chore: version packages (#226 )

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
chore: patch release (#225 )
2026-10-03 04:18:15 +08:00 · 2026-03-17 17:44:18 -05:00 · 2026-03-17 17:37:29 -05:00 · 2026-03-17 13:40:28 -05:00
132 changed files with 476 additions and 2197 deletions
@@ -1,5 +1,15 @@
 # web

+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/codegen@0.14.1
+  - @json-render/react@0.14.1
+  - @json-render/yaml@0.14.1
+
 ## 0.1.8

 ### Patch Changes
@@ -1,7 +1,6 @@
 import { DocsMobileNav } from "@/components/docs-mobile-nav";
 import { DocsSidebar } from "@/components/docs-sidebar";
 import { CopyPageButton } from "@/components/copy-page-button";
-import { TableOfContents } from "@/components/table-of-contents";

 export default function DocsLayout({
  children,
@@ -11,7 +10,7 @@ export default function DocsLayout({
  return (
    <>
      <DocsMobileNav />
-      <div className="max-w-7xl mx-auto px-6 py-8 lg:py-12 flex gap-12">
+      <div className="max-w-5xl mx-auto px-6 py-8 lg:py-12 flex gap-16">
        {/* Sidebar */}
        <aside className="w-48 shrink-0 hidden lg:block sticky top-28 h-[calc(100vh-7rem)] overflow-y-auto">
          <DocsSidebar />
@@ -24,11 +23,6 @@ export default function DocsLayout({
          </div>
          <article>{children}</article>
        </div>
-
-        {/* On this page */}
-        <aside className="w-44 shrink-0 hidden xl:block sticky top-28 h-[calc(100vh-7rem)] overflow-y-auto">
-          <TableOfContents />
-        </aside>
      </div>
    </>
  );
@@ -1,133 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { examples, allTags, getGitHubUrl, type Example } from "@/lib/examples";
-import { cn } from "@/lib/utils";
-
-function ExampleCard({ example }: { example: Example }) {
-  return (
-    <div className="group flex flex-col rounded-xl border border-border bg-card text-card-foreground overflow-hidden transition-colors hover:border-foreground/25">
-      <div className="flex flex-1 flex-col gap-3 p-5">
-        <h3 className="font-semibold leading-none">{example.title}</h3>
-
-        <p className="text-sm text-muted-foreground leading-relaxed">
-          {example.description}
-        </p>
-
-        <div className="flex flex-wrap gap-1.5">
-          {example.tags.map((tag) => (
-            <Badge key={tag} variant="secondary" className="text-[11px]">
-              {tag}
-            </Badge>
-          ))}
-        </div>
-
-        <div className="mt-auto flex items-center gap-3 pt-2">
-          {example.demoUrl && (
-            <a
-              href={example.demoUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 text-sm text-foreground hover:text-primary transition-colors"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M15 3h6v6" />
-                <path d="M10 14 21 3" />
-                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-              </svg>
-              Live Demo
-            </a>
-          )}
-          <a
-            href={getGitHubUrl(example)}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              className="h-3.5 w-3.5"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-            </svg>
-            Source
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function ExamplesPage() {
-  const [activeTag, setActiveTag] = useState<string | null>(null);
-
-  const filtered = activeTag
-    ? examples.filter((e) => e.tags.includes(activeTag))
-    : examples;
-
-  return (
-    <section className="mx-auto max-w-6xl px-6 py-16">
-      <div className="mb-10">
-        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
-          Examples
-        </h1>
-        <p className="mt-3 text-lg text-muted-foreground">
-          Explore json-render across frameworks, renderers, and use cases.
-        </p>
-      </div>
-
-      <div className="mb-8 flex flex-wrap gap-2">
-        <button
-          onClick={() => setActiveTag(null)}
-          className={cn(
-            "rounded-full border px-3 py-1 text-xs font-medium transition-colors",
-            activeTag === null
-              ? "border-foreground bg-foreground text-background"
-              : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/50",
-          )}
-        >
-          All
-        </button>
-        {allTags.map((tag) => (
-          <button
-            key={tag}
-            onClick={() => setActiveTag(activeTag === tag ? null : tag)}
-            className={cn(
-              "rounded-full border px-3 py-1 text-xs font-medium transition-colors",
-              activeTag === tag
-                ? "border-foreground bg-foreground text-background"
-                : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/50",
-            )}
-          >
-            {tag}
-          </button>
-        ))}
-      </div>
-
-      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {filtered.map((example) => (
-          <ExampleCard key={example.slug} example={example} />
-        ))}
-      </div>
-
-      {filtered.length === 0 && (
-        <p className="py-12 text-center text-muted-foreground">
-          No examples match the selected filter.
-        </p>
-      )}
-    </section>
-  );
-}
@@ -1,74 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { getSearchIndex } from "@/lib/search-index";
-
-export async function GET(req: NextRequest) {
-  const q = req.nextUrl.searchParams.get("q")?.trim().toLowerCase();
-
-  if (!q) {
-    return NextResponse.json({ results: [] });
-  }
-
-  const index = await getSearchIndex();
-  const terms = q.split(/\s+/).filter(Boolean);
-
-  const results = index
-    .map((entry) => {
-      const titleLower = entry.title.toLowerCase();
-      const contentLower = entry.content.toLowerCase();
-
-      const titleMatch = terms.every((t) => titleLower.includes(t));
-      const contentMatch = terms.every((t) => contentLower.includes(t));
-
-      if (!titleMatch && !contentMatch) return null;
-
-      let snippet = "";
-      if (contentMatch) {
-        const firstTermIdx = Math.min(
-          ...terms.map((t) => {
-            const idx = contentLower.indexOf(t);
-            return idx === -1 ? Infinity : idx;
-          }),
-        );
-        if (firstTermIdx !== Infinity) {
-          const start = Math.max(0, firstTermIdx - 40);
-          const end = Math.min(entry.content.length, firstTermIdx + 120);
-          snippet =
-            (start > 0 ? "..." : "") +
-            entry.content.slice(start, end).replace(/\n/g, " ") +
-            (end < entry.content.length ? "..." : "");
-        }
-      }
-
-      return {
-        title: entry.title,
-        href: entry.href,
-        section: entry.section,
-        snippet,
-        score: titleMatch ? 2 : 1,
-      };
-    })
-    .filter(
-      (
-        r,
-      ): r is {
-        title: string;
-        href: string;
-        section: string;
-        snippet: string;
-        score: number;
-      } => r !== null,
-    )
-    .sort((a, b) => b.score - a.score)
-    .slice(0, 20)
-    .map(({ title, href, section, snippet }) => ({
-      title,
-      href,
-      section,
-      snippet,
-    }));
-
-  return NextResponse.json(
-    { results },
-    { headers: { "Cache-Control": "public, max-age=60" } },
-  );
-}
@@ -261,10 +261,10 @@ export function DocsChat({
    }
  }, [messages, isLoading]);

-  // Cmd+I to open sidebar and focus prompt, Escape to close
+  // Cmd+K to open sidebar and focus prompt, Escape to close
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "i" && (e.metaKey || e.ctrlKey)) {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((prev) => {
          if (!prev) {
@@ -497,12 +497,12 @@ export function DocsChat({
      {!open && (
        <button
          onClick={() => setOpen(true)}
-          className="fixed z-50 bottom-4 left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 sm:right-4 flex items-center gap-2 px-4 py-2 rounded-lg border border-primary bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors text-sm font-medium"
+          className="fixed z-50 bottom-4 left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 sm:right-4 flex items-center gap-2 px-4 py-2 rounded-lg border bg-background text-primary shadow-lg hover:bg-primary hover:text-primary-foreground transition-colors text-sm font-medium"
          aria-label="Ask AI"
        >
          Ask AI
          <kbd className="hidden sm:inline-flex items-center gap-0.5 text-xs opacity-60 font-mono">
-            <span>&#8984;</span>I
+            <span>&#8984;</span>K
          </kbd>
        </button>
      )}
@@ -1,59 +1,17 @@
 "use client";

-import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ThemeToggle } from "./theme-toggle";
-import { Search } from "./search";
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetTitle,
-} from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";

-const navLinks = [
-  { href: "/playground", label: "Playground" },
-  { href: "/examples", label: "Examples" },
-  { href: "/docs", label: "Docs" },
-];
-
-function GitHubLink({ className }: { className?: string }) {
-  return (
-    <a
-      href="https://github.com/vercel-labs/json-render"
-      target="_blank"
-      rel="noopener noreferrer"
-      className={cn(
-        "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors",
-        className,
-      )}
-    >
-      <svg
-        viewBox="0 0 16 16"
-        className="h-4 w-4"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-      </svg>
-      <span>12k</span>
-    </a>
-  );
-}
-
 export function Header() {
  const pathname = usePathname();
-  const [mobileOpen, setMobileOpen] = useState(false);

  const isActive = (href: string) => {
    if (href === "/playground") {
      return pathname === "/playground";
    }
-    if (href === "/examples") {
-      return pathname.startsWith("/examples");
-    }
    if (href === "/docs") {
      return pathname.startsWith("/docs");
    }
@@ -104,81 +62,48 @@ export function Header() {
            </span>
          </Link>
        </div>
-
-        {/* Desktop nav */}
-        <nav className="hidden sm:flex items-center gap-4">
-          {navLinks.map((link) => (
-            <Link
-              key={link.href}
-              href={link.href}
-              className={cn(
-                "text-sm transition-colors",
-                isActive(link.href)
-                  ? "text-primary"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
+        <nav className="flex items-center gap-4">
+          <Link
+            href="/playground"
+            className={cn(
+              "text-sm transition-colors",
+              isActive("/playground")
+                ? "text-primary font-medium"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            <span className="sm:hidden">Play</span>
+            <span className="hidden sm:inline">Playground</span>
+          </Link>
+          <Link
+            href="/docs"
+            className={cn(
+              "text-sm transition-colors",
+              isActive("/docs")
+                ? "text-primary font-medium"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            Docs
+          </Link>
+          <a
+            href="https://github.com/vercel-labs/json-render"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <svg
+              viewBox="0 0 16 16"
+              className="h-4 w-4"
+              fill="currentColor"
+              aria-hidden="true"
            >
-              {link.label}
-            </Link>
-          ))}
-          <Search />
-          <GitHubLink />
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+            </svg>
+            <span>12k</span>
+          </a>
          <ThemeToggle />
        </nav>
-
-        {/* Mobile nav */}
-        <div className="flex sm:hidden items-center gap-3">
-          <Search />
-          <GitHubLink />
-          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
-            <SheetTrigger
-              className="flex items-center justify-center"
-              aria-label="Open menu"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="text-muted-foreground"
-              >
-                <line x1="4" x2="20" y1="12" y2="12" />
-                <line x1="4" x2="20" y1="6" y2="6" />
-                <line x1="4" x2="20" y1="18" y2="18" />
-              </svg>
-            </SheetTrigger>
-            <SheetContent side="right" className="overflow-y-auto p-6">
-              <SheetTitle className="mb-6">Menu</SheetTitle>
-              <nav className="flex flex-col gap-1">
-                {navLinks.map((link) => (
-                  <Link
-                    key={link.href}
-                    href={link.href}
-                    onClick={() => setMobileOpen(false)}
-                    className={cn(
-                      "block py-2.5 text-sm transition-colors",
-                      isActive(link.href)
-                        ? "text-primary"
-                        : "text-muted-foreground hover:text-foreground",
-                    )}
-                  >
-                    {link.label}
-                  </Link>
-                ))}
-                <div className="my-3 border-t border-border" />
-                <div className="flex items-center justify-between py-2.5">
-                  <span className="text-sm text-muted-foreground">Theme</span>
-                  <ThemeToggle />
-                </div>
-              </nav>
-            </SheetContent>
-          </Sheet>
-        </div>
      </div>
    </header>
  );
@@ -1,266 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
-
-type SearchResult = {
-  title: string;
-  href: string;
-  section: string;
-  snippet: string;
-};
-
-export function Search() {
-  const router = useRouter();
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-  const abortRef = useRef<AbortController | null>(null);
-
-  const navigate = useCallback(
-    (href: string) => {
-      setOpen(false);
-      setQuery("");
-      setResults([]);
-      router.push(href);
-    },
-    [router],
-  );
-
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      }
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, []);
-
-  useEffect(() => {
-    if (open) {
-      setTimeout(() => inputRef.current?.focus(), 0);
-    } else {
-      setQuery("");
-      setResults([]);
-    }
-  }, [open]);
-
-  useEffect(() => {
-    const q = query.trim();
-    if (!q) {
-      setResults([]);
-      setLoading(false);
-      return;
-    }
-
-    setLoading(true);
-    abortRef.current?.abort();
-    const controller = new AbortController();
-    abortRef.current = controller;
-
-    const timeout = setTimeout(async () => {
-      try {
-        const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`, {
-          signal: controller.signal,
-        });
-        if (res.ok) {
-          const data = await res.json();
-          setResults(data.results);
-        }
-      } catch {
-        // aborted or network error
-      } finally {
-        if (!controller.signal.aborted) {
-          setLoading(false);
-        }
-      }
-    }, 150);
-
-    return () => {
-      clearTimeout(timeout);
-      controller.abort();
-    };
-  }, [query]);
-
-  useEffect(() => {
-    setActiveIndex(0);
-  }, [results]);
-
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setActiveIndex((i) => Math.min(i + 1, results.length - 1));
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setActiveIndex((i) => Math.max(i - 1, 0));
-    } else if (e.key === "Enter" && results[activeIndex]) {
-      e.preventDefault();
-      navigate(results[activeIndex].href);
-    }
-  }
-
-  useEffect(() => {
-    const active = listRef.current?.querySelector("[data-active='true']");
-    active?.scrollIntoView({ block: "nearest" });
-  }, [activeIndex]);
-
-  const hasQuery = query.trim().length > 0;
-
-  return (
-    <>
-      <button
-        onClick={() => setOpen(true)}
-        className="hidden sm:flex items-center gap-2 rounded-md border border-border bg-muted/50 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:border-foreground/25 transition-colors"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <path d="m21 21-4.3-4.3" />
-        </svg>
-        Search docs
-        <kbd className="pointer-events-none ml-1 inline-flex items-center gap-0.5 rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
-          <span>&#8984;</span>K
-        </kbd>
-      </button>
-
-      <button
-        onClick={() => setOpen(true)}
-        className="sm:hidden flex items-center text-muted-foreground hover:text-foreground transition-colors"
-        aria-label="Search docs"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <path d="m21 21-4.3-4.3" />
-        </svg>
-      </button>
-
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent
-          showCloseButton={false}
-          className="gap-0 p-0 sm:max-w-lg"
-        >
-          <DialogTitle className="sr-only">Search documentation</DialogTitle>
-          <div className="flex items-center gap-2 border-b px-3">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="shrink-0 text-muted-foreground"
-            >
-              <circle cx="11" cy="11" r="8" />
-              <path d="m21 21-4.3-4.3" />
-            </svg>
-            <input
-              ref={inputRef}
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Search docs..."
-              className="flex-1 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
-            />
-            {query && (
-              <button
-                onClick={() => setQuery("")}
-                className="text-muted-foreground hover:text-foreground"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M18 6 6 18" />
-                  <path d="m6 6 12 12" />
-                </svg>
-              </button>
-            )}
-          </div>
-
-          <div
-            ref={listRef}
-            className="max-h-[min(60vh,400px)] overflow-y-auto p-2"
-          >
-            {loading && hasQuery ? (
-              <div className="flex items-center justify-center py-6">
-                <div className="h-4 w-4 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
-              </div>
-            ) : hasQuery && results.length === 0 ? (
-              <p className="py-6 text-center text-sm text-muted-foreground">
-                No results found.
-              </p>
-            ) : !hasQuery ? (
-              <p className="py-6 text-center text-sm text-muted-foreground">
-                Type to search documentation...
-              </p>
-            ) : (
-              results.map((item, i) => (
-                <button
-                  key={item.href}
-                  data-active={i === activeIndex}
-                  onClick={() => navigate(item.href)}
-                  onMouseEnter={() => setActiveIndex(i)}
-                  className={cn(
-                    "flex w-full flex-col gap-1 rounded-md px-3 py-2 text-left transition-colors",
-                    i === activeIndex
-                      ? "bg-accent text-accent-foreground"
-                      : "text-foreground",
-                  )}
-                >
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="text-sm font-medium">{item.title}</span>
-                    <span className="shrink-0 text-xs text-muted-foreground">
-                      {item.section}
-                    </span>
-                  </div>
-                  {item.snippet && (
-                    <span className="line-clamp-2 text-xs text-muted-foreground leading-relaxed">
-                      {item.snippet}
-                    </span>
-                  )}
-                </button>
-              ))
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
@@ -1,83 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-import { cn } from "@/lib/utils";
-
-type Heading = {
-  id: string;
-  text: string;
-  level: number;
-};
-
-function getHeadings(): Heading[] {
-  const article = document.querySelector("article");
-  if (!article) return [];
-  const elements = article.querySelectorAll("h2[id], h3[id]");
-  return Array.from(elements).map((el) => ({
-    id: el.id,
-    text: el.textContent?.replace(/#$/, "").trim() ?? "",
-    level: el.tagName === "H3" ? 3 : 2,
-  }));
-}
-
-export function TableOfContents() {
-  const pathname = usePathname();
-  const [headings, setHeadings] = useState<Heading[]>([]);
-  const [activeId, setActiveId] = useState<string>("");
-
-  useEffect(() => {
-    const timer = setTimeout(() => setHeadings(getHeadings()), 100);
-    return () => clearTimeout(timer);
-  }, [pathname]);
-
-  useEffect(() => {
-    if (headings.length === 0) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            setActiveId(entry.target.id);
-          }
-        }
-      },
-      { rootMargin: "0px 0px -75% 0px", threshold: 0.1 },
-    );
-
-    for (const h of headings) {
-      const el = document.getElementById(h.id);
-      if (el) observer.observe(el);
-    }
-
-    return () => observer.disconnect();
-  }, [headings]);
-
-  if (headings.length === 0) return null;
-
-  return (
-    <nav aria-label="On this page">
-      <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
-        On this page
-      </h4>
-      <ul className="space-y-1">
-        {headings.map((h) => (
-          <li key={h.id}>
-            <a
-              href={`#${h.id}`}
-              className={cn(
-                "block text-xs leading-relaxed py-0.5 transition-colors",
-                h.level === 3 && "pl-3",
-                activeId === h.id
-                  ? "text-foreground"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              {h.text}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  );
-}
@@ -45,7 +45,63 @@ export const docsNavigation: NavSection[] = [
  },
  {
    title: "Examples",
-    items: [{ title: "Browse All Examples", href: "/examples" }],
+    items: [
+      {
+        title: "Chat",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/chat",
+        external: true,
+      },
+      {
+        title: "Dashboard",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/dashboard",
+        external: true,
+      },
+      {
+        title: "React Native",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/react-native",
+        external: true,
+      },
+      {
+        title: "React PDF",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/react-pdf",
+        external: true,
+      },
+      {
+        title: "React Email",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/react-email",
+        external: true,
+      },
+      {
+        title: "Remotion",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/remotion",
+        external: true,
+      },
+      {
+        title: "Image",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/image",
+        external: true,
+      },
+      {
+        title: "Svelte",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/svelte",
+        external: true,
+      },
+      {
+        title: "Vue",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/vue",
+        external: true,
+      },
+      {
+        title: "Renders with Vite (Vue / React / Svelte / Solid)",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/vite-renderers",
+        external: true,
+      },
+      {
+        title: "MCP App",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/mcp",
+        external: true,
+      },
+    ],
  },
  {
    title: "Guides",
@@ -1,152 +0,0 @@
-export type Example = {
-  slug: string;
-  title: string;
-  description: string;
-  tags: string[];
-  githubPath: string;
-  demoUrl?: string;
-};
-
-const GITHUB_BASE =
-  "https://github.com/vercel-labs/json-render/tree/main/examples";
-
-export const examples: Example[] = [
-  {
-    slug: "chat",
-    title: "Chat",
-    description:
-      "AI chat app with tool calling, streaming UI, and rich components powered by the AI SDK.",
-    tags: ["React", "Next.js", "AI"],
-    githubPath: "examples/chat",
-    demoUrl: "https://chat-demo.json-render.dev",
-  },
-  {
-    slug: "dashboard",
-    title: "Dashboard",
-    description:
-      "AI-generated dashboard with drag-and-drop, charts, and real-time data binding.",
-    tags: ["React", "Next.js", "AI"],
-    githubPath: "examples/dashboard",
-    demoUrl: "https://dashboard-demo.json-render.dev",
-  },
-  {
-    slug: "no-ai",
-    title: "No AI",
-    description:
-      "Static specs rendered without any AI — forms, cards, tables, and more from hardcoded JSON.",
-    tags: ["React", "Next.js"],
-    githubPath: "examples/no-ai",
-    demoUrl: "https://no-ai-demo.json-render.dev",
-  },
-  {
-    slug: "svelte",
-    title: "Svelte",
-    description:
-      "Svelte renderer demo with counter, todo list, and two-way data binding.",
-    tags: ["Svelte", "Vite"],
-    githubPath: "examples/svelte",
-    demoUrl: "https://svelte-demo.json-render.dev",
-  },
-  {
-    slug: "svelte-chat",
-    title: "Svelte Chat",
-    description: "AI chat app built with SvelteKit and the Svelte renderer.",
-    tags: ["Svelte", "SvelteKit", "AI"],
-    githubPath: "examples/svelte-chat",
-    demoUrl: "https://json-render-svelte-chat-demo.labs.vercel.dev",
-  },
-  {
-    slug: "vue",
-    title: "Vue",
-    description:
-      "Vue renderer demo with counter, todo list, and two-way data binding.",
-    tags: ["Vue", "Vite"],
-    githubPath: "examples/vue",
-    demoUrl: "https://vue-demo.json-render.dev",
-  },
-  {
-    slug: "solid",
-    title: "Solid",
-    description:
-      "Solid renderer demo with counter, todo list, and two-way data binding.",
-    tags: ["Solid", "Vite"],
-    githubPath: "examples/solid",
-    demoUrl: "https://solid-demo.json-render.dev",
-  },
-  {
-    slug: "vite-renderers",
-    title: "Multi-Framework Renderers",
-    description:
-      "Same spec rendered with React, Vue, Svelte, and Solid side by side — hot-swappable at runtime.",
-    tags: ["React", "Vue", "Svelte", "Solid", "Vite"],
-    githubPath: "examples/vite-renderers",
-  },
-  {
-    slug: "react-email",
-    title: "React Email",
-    description:
-      "Generate HTML and plain-text emails from json-render specs using React Email.",
-    tags: ["React", "Email"],
-    githubPath: "examples/react-email",
-    demoUrl: "https://react-email-demo.json-render.dev",
-  },
-  {
-    slug: "react-pdf",
-    title: "React PDF",
-    description:
-      "Generate PDF documents from json-render specs with @react-pdf/renderer.",
-    tags: ["React", "PDF"],
-    githubPath: "examples/react-pdf",
-    demoUrl: "https://react-pdf-demo.json-render.dev",
-  },
-  {
-    slug: "react-three-fiber",
-    title: "React Three Fiber",
-    description:
-      "3D scenes generated from json-render specs using Three.js and React Three Fiber.",
-    tags: ["React", "3D"],
-    githubPath: "examples/react-three-fiber",
-    demoUrl: "https://react-three-fiber-demo.json-render.dev",
-  },
-  {
-    slug: "react-native",
-    title: "React Native",
-    description:
-      "Mobile app rendering json-render specs with Expo and React Native.",
-    tags: ["React Native", "Expo"],
-    githubPath: "examples/react-native",
-  },
-  {
-    slug: "remotion",
-    title: "Remotion",
-    description: "Generate videos from json-render specs using Remotion.",
-    tags: ["React", "Video"],
-    githubPath: "examples/remotion",
-    demoUrl: "https://remotion-demo.json-render.dev",
-  },
-  {
-    slug: "image",
-    title: "Image",
-    description:
-      "Generate OG images and social cards from json-render specs using Satori.",
-    tags: ["React", "Image"],
-    githubPath: "examples/image",
-    demoUrl: "https://image-demo.json-render.dev",
-  },
-  {
-    slug: "mcp",
-    title: "MCP App",
-    description:
-      "MCP server that serves shadcn UIs to Claude, ChatGPT, Cursor, and VS Code.",
-    tags: ["React", "MCP", "Vite"],
-    githubPath: "examples/mcp",
-  },
-];
-
-export const allTags = Array.from(
-  new Set(examples.flatMap((e) => e.tags)),
-).sort();
-
-export function getGitHubUrl(example: Example): string {
-  return `${GITHUB_BASE}/${example.slug}`;
-}
@@ -11,7 +11,6 @@ export const PAGE_TITLES: Record<string, string> = {

  // Top-level
  playground: "Playground",
-  examples: "Examples",

  // Docs
  docs: "Introduction",
@@ -1,76 +0,0 @@
-import { readFile } from "fs/promises";
-import { join } from "path";
-import { docsNavigation } from "./docs-navigation";
-import { mdxToCleanMarkdown } from "./mdx-to-markdown";
-
-export type IndexEntry = {
-  title: string;
-  href: string;
-  section: string;
-  content: string;
-};
-
-let cached: IndexEntry[] | null = null;
-
-function stripMarkdown(md: string): string {
-  return (
-    md
-      // Remove fenced code blocks entirely
-      .replace(/```[\s\S]*?```/g, "")
-      // Remove inline code
-      .replace(/`[^`]+`/g, "")
-      // Remove markdown links, keep text
-      .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
-      // Remove heading markers
-      .replace(/^#{1,6}\s+/gm, "")
-      // Remove bold/italic markers
-      .replace(/\*{1,3}([^*]+)\*{1,3}/g, "$1")
-      // Remove HTML tags
-      .replace(/<[^>]+>/g, "")
-      // Collapse whitespace
-      .replace(/\n{3,}/g, "\n\n")
-      .trim()
-  );
-}
-
-function mdxFileForSlug(slug: string): string {
-  const docsRoot = join(process.cwd(), "app", "(main)", "docs");
-  if (slug === "/docs") {
-    return join(docsRoot, "page.mdx");
-  }
-  const rest = slug.replace(/^\/docs\/?/, "");
-  return join(docsRoot, ...rest.split("/"), "page.mdx");
-}
-
-export async function getSearchIndex(): Promise<IndexEntry[]> {
-  if (cached) return cached;
-
-  const entries: IndexEntry[] = [];
-
-  for (const section of docsNavigation) {
-    for (const item of section.items) {
-      if (item.external) continue;
-      try {
-        const raw = await readFile(mdxFileForSlug(item.href), "utf-8");
-        const md = mdxToCleanMarkdown(raw);
-        const content = stripMarkdown(md);
-        entries.push({
-          title: item.title,
-          href: item.href,
-          section: section.title,
-          content,
-        });
-      } catch {
-        entries.push({
-          title: item.title,
-          href: item.href,
-          section: section.title,
-          content: "",
-        });
-      }
-    }
-  }
-
-  cached = entries;
-  return entries;
-}
@@ -35,26 +35,16 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
    h2: ({ children }: { children?: React.ReactNode }) => {
      const id = slugify(extractText(children));
      return (
-        <h2 id={id} className="group text-xl font-semibold mt-12 mb-4">
-          <a href={`#${id}`} className="no-underline hover:no-underline">
-            {children}
-            <span className="ml-2 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors select-none">
-              #
-            </span>
-          </a>
+        <h2 id={id} className="text-xl font-semibold mt-12 mb-4">
+          {children}
        </h2>
      );
    },
    h3: ({ children }: { children?: React.ReactNode }) => {
      const id = slugify(extractText(children));
      return (
-        <h3 id={id} className="group text-lg font-medium mt-8 mb-3">
-          <a href={`#${id}`} className="no-underline hover:no-underline">
-            {children}
-            <span className="ml-2 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors select-none">
-              #
-            </span>
-          </a>
+        <h3 id={id} className="text-lg font-medium mt-8 mb-3">
+          {children}
        </h3>
      );
    },
@@ -1,6 +1,6 @@
 {
  "name": "web",
-  "version": "0.1.8",
+  "version": "0.1.9",
  "type": "module",
  "private": true,
  "license": "Apache-2.0",
@@ -1,15 +0,0 @@
-# Vercel AI Gateway
-# Automatically authenticated when deployed on Vercel
-# For local development, get your key from https://vercel.com/ai-gateway
-AI_GATEWAY_API_KEY=
-
-# AI Model Configuration
-# Default: anthropic/claude-haiku-4.5
-AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100
@@ -1,5 +1,14 @@
 # example-chat

+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/react@0.14.1
+  - @json-render/shadcn@0.14.1
+
 ## 0.1.8

 ### Patch Changes
@@ -1,5 +1,4 @@
 import { agent } from "@/lib/agent";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
 import {
  convertToModelMessages,
  createUIMessageStream,
@@ -7,35 +6,10 @@ import {
  type UIMessage,
 } from "ai";
 import { pipeJsonRender } from "@json-render/core";
-import { headers } from "next/headers";

 export const maxDuration = 60;

 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
  const body = await req.json();
  const uiMessages: UIMessage[] = body.messages;

@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:chat:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:chat:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};
@@ -1,6 +1,6 @@
 {
  "name": "example-chat",
-  "version": "0.1.8",
+  "version": "0.1.9",
  "type": "module",
  "private": true,
  "scripts": {
@@ -34,8 +34,6 @@
    "streamdown": "^2.2.0",
    "tailwind-merge": "^3.4.0",
    "three": "^0.182.0",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
    "zod": "4.3.6"
  },
  "devDependencies": {
@@ -4,10 +4,3 @@ DATABASE_URL=postgresql://postgres:postgres@localhost:5432/json_render_dashboard
 # AI (optional - for UI generation)
 AI_GATEWAY_API_KEY=
 AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100
@@ -1,5 +1,14 @@
 # example-dashboard

+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/codegen@0.14.1
+  - @json-render/react@0.14.1
+
 ## 0.1.8

 ### Patch Changes
@@ -1,8 +1,6 @@
 import { streamText } from "ai";
 import { buildUserPrompt } from "@json-render/core";
 import { dashboardCatalog } from "@/lib/render/catalog";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
-import { headers } from "next/headers";

 export const maxDuration = 30;

@@ -11,30 +9,6 @@ const SYSTEM_PROMPT = dashboardCatalog.prompt();
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";

 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
  const { prompt, context } = await req.json();

  const userPrompt = buildUserPrompt({
@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:dashboard:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:dashboard:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};
@@ -1,6 +1,6 @@
 {
  "name": "example-dashboard",
-  "version": "0.1.8",
+  "version": "0.1.9",
  "type": "module",
  "private": true,
  "scripts": {
@@ -40,8 +40,6 @@
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.4.0",
    "vaul": "^1.1.2",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
    "zod": "^4.3.6"
  },
  "devDependencies": {
@@ -1,15 +0,0 @@
-# Vercel AI Gateway
-# Automatically authenticated when deployed on Vercel
-# For local development, get your key from https://vercel.com/ai-gateway
-AI_GATEWAY_API_KEY=
-
-# AI Model Configuration
-# Default: anthropic/claude-haiku-4.5
-AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100
@@ -1,5 +1,13 @@
 # example-image

+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/image@0.14.1
+
 ## 0.1.5

 ### Patch Changes
@@ -1,8 +1,6 @@
 import { streamText } from "ai";
 import { buildUserPrompt, type Spec } from "@json-render/core";
 import { imageCatalog } from "@/lib/catalog";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
-import { headers } from "next/headers";

 export const maxDuration = 60;

@@ -11,30 +9,6 @@ const SYSTEM_PROMPT = imageCatalog.prompt();
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";

 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
  const { prompt, startingSpec } = (await req.json()) as {
    prompt: string;
    startingSpec?: Spec | null;
@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:image:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:image:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};
@@ -1,6 +1,6 @@
 {
  "name": "example-image",
-  "version": "0.1.5",
+  "version": "0.1.6",
  "type": "module",
  "private": true,
  "scripts": {
@@ -28,8 +28,6 @@
    "react-resizable-panels": "^4.4.1",
    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.1.18",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
    "zod": "4.3.6"
  },
  "devDependencies": {
@@ -1,5 +1,15 @@
 # example-mcp

+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/mcp@0.14.1
+  - @json-render/react@0.14.1
+  - @json-render/shadcn@0.14.1
+
 ## 0.1.4

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "example-mcp",
-  "version": "0.1.4",
+  "version": "0.1.5",
  "type": "module",
  "private": true,
  "scripts": {
@@ -1,5 +1,14 @@
 # example-no-ai

+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/react@0.14.1
+  - @json-render/shadcn@0.14.1
+
 ## 0.1.8

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "example-no-ai",
-  "version": "0.1.8",
+  "version": "0.1.9",
  "type": "module",
  "private": true,
  "scripts": {
@@ -7,10 +7,3 @@ AI_GATEWAY_API_KEY=
 # Override the default model used for email generation
 # Default: anthropic/claude-haiku-4.5
 AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100
@@ -1,5 +1,13 @@
 # example-react-email

+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/react-email@0.14.1
+
 ## 0.1.4

 ### Patch Changes
@@ -1,8 +1,6 @@
 import { streamText } from "ai";
 import { buildUserPrompt, type Spec } from "@json-render/core";
 import { emailCatalog } from "@/lib/catalog";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
-import { headers } from "next/headers";

 export const maxDuration = 60;

@@ -11,30 +9,6 @@ const SYSTEM_PROMPT = emailCatalog.prompt();
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";

 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
  const { prompt, startingSpec } = (await req.json()) as {
    prompt: string;
    startingSpec?: Spec | null;
@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:react-email:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:react-email:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};
@@ -1,6 +1,6 @@
 {
  "name": "example-react-email",
-  "version": "0.1.4",
+  "version": "0.1.5",
  "type": "module",
  "private": true,
  "scripts": {
@@ -25,8 +25,6 @@
    "react-resizable-panels": "^4.4.1",
    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.1.18",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
    "zod": "4.3.6"
  },
  "devDependencies": {
@@ -1,5 +1,13 @@
 # example-react-native

+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/react-native@0.14.1
+
 ## 0.1.8

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "example-react-native",
-  "version": "0.1.8",
+  "version": "0.1.9",
  "private": true,
  "main": "expo-router/entry",
  "scripts": {
@@ -3,10 +3,3 @@ AI_GATEWAY_API_KEY=

 # Optional: override the default model (default: anthropic/claude-haiku-4.5)
 # AI_GATEWAY_MODEL=openai/gpt-4o-mini
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100
@@ -1,5 +1,13 @@
 # example-react-pdf

+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/react-pdf@0.14.1
+
 ## 0.1.8

 ### Patch Changes
@@ -2,8 +2,6 @@ import { streamText } from "ai";
 import { gateway } from "@ai-sdk/gateway";
 import { buildUserPrompt, type Spec } from "@json-render/core";
 import { pdfCatalog } from "@/lib/catalog";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
-import { headers } from "next/headers";

 export const maxDuration = 60;

@@ -12,30 +10,6 @@ const SYSTEM_PROMPT = pdfCatalog.prompt();
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";

 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
  const { prompt, startingSpec } = (await req.json()) as {
    prompt: string;
    startingSpec?: Spec | null;
@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:react-pdf:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:react-pdf:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};
@@ -1,6 +1,6 @@
 {
  "name": "example-react-pdf",
-  "version": "0.1.8",
+  "version": "0.1.9",
  "type": "module",
  "private": true,
  "scripts": {
@@ -26,8 +26,6 @@
    "react-resizable-panels": "^4.4.1",
    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.1.18",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
    "zod": "4.3.6"
  },
  "devDependencies": {
@@ -1,5 +1,14 @@
 # example-react-three-fiber

+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/react@0.14.1
+  - @json-render/react-three-fiber@0.14.1
+
 ## 0.1.8

 ### Patch Changes
@@ -1,6 +1,6 @@
 "use client";

-import { useState, useSyncExternalStore, useCallback } from "react";
+import { useState } from "react";
 import { defineCatalog } from "@json-render/core";
 import type { ComputedFunction } from "@json-render/core";
 import { schema, defineRegistry } from "@json-render/react";
@@ -109,27 +109,9 @@ function highlightJson(json: string): string {
  );
 }

-const MOBILE_BREAKPOINT = 768;
-
-function subscribeToResize(cb: () => void) {
-  window.addEventListener("resize", cb);
-  return () => window.removeEventListener("resize", cb);
-}
-
-function getIsMobile() {
-  return typeof window !== "undefined"
-    ? window.innerWidth < MOBILE_BREAKPOINT
-    : false;
-}
-
-function useIsMobile() {
-  return useSyncExternalStore(subscribeToResize, getIsMobile, () => false);
-}
-
 const LIST_WIDTH = 220;
 const JSON_WIDTH = 380;
 const HEADER_HEIGHT = 40;
-const MOBILE_HEADER_HEIGHT = 48;

 const headerStyle: React.CSSProperties = {
  height: HEADER_HEIGHT,
@@ -150,236 +132,7 @@ const headerStyle: React.CSSProperties = {
  boxSizing: "border-box",
 };

-function MobileLayout() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [showJson, setShowJson] = useState(false);
-  const [showScenes, setShowScenes] = useState(false);
-  const selected = scenes[selectedIndex]!;
-
-  const closePanels = useCallback(() => {
-    setShowJson(false);
-    setShowScenes(false);
-  }, []);
-
-  return (
-    <div
-      style={{
-        height: "100dvh",
-        display: "flex",
-        flexDirection: "column",
-        background: "#0a0a0a",
-        overflow: "hidden",
-      }}
-    >
-      <div
-        style={{
-          height: MOBILE_HEADER_HEIGHT,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "0 12px",
-          borderBottom: "1px solid #1e1e1e",
-          background: "#0f0f0f",
-          flexShrink: 0,
-          gap: 8,
-        }}
-      >
-        <button
-          onClick={() => {
-            setShowScenes((v) => !v);
-            setShowJson(false);
-          }}
-          style={{
-            background: showScenes ? "rgba(255,255,255,0.1)" : "transparent",
-            border: "1px solid #333",
-            borderRadius: 6,
-            color: "#ccc",
-            fontSize: 12,
-            fontWeight: 500,
-            padding: "6px 10px",
-            cursor: "pointer",
-            fontFamily: "inherit",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            maxWidth: "50%",
-          }}
-        >
-          {selected.name}
-        </button>
-
-        <span
-          style={{
-            flex: 1,
-            fontSize: 10,
-            color: "#555",
-            textAlign: "center",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            fontFamily: "ui-monospace, monospace",
-            textTransform: "uppercase",
-            letterSpacing: "0.06em",
-          }}
-        >
-          {selected.description}
-        </span>
-
-        <button
-          onClick={() => {
-            setShowJson((v) => !v);
-            setShowScenes(false);
-          }}
-          style={{
-            background: showJson ? "rgba(255,255,255,0.1)" : "transparent",
-            border: "1px solid #333",
-            borderRadius: 6,
-            color: "#ccc",
-            fontSize: 11,
-            fontWeight: 500,
-            padding: "6px 10px",
-            cursor: "pointer",
-            fontFamily: "ui-monospace, monospace",
-            whiteSpace: "nowrap",
-            letterSpacing: "0.04em",
-          }}
-        >
-          JSON
-        </button>
-      </div>
-
-      <div style={{ flex: 1, position: "relative", minHeight: 0 }}>
-        <ThreeCanvas
-          key={selectedIndex}
-          spec={selected.spec}
-          registry={registry}
-          functions={computedFunctions}
-          shadows
-          camera={{ position: [0, 0, 5], fov: 50 }}
-          style={{ width: "100%", height: "100%" }}
-        />
-
-        {showScenes && (
-          <>
-            <div
-              onClick={closePanels}
-              style={{
-                position: "absolute",
-                inset: 0,
-                background: "rgba(0,0,0,0.5)",
-                zIndex: 10,
-              }}
-            />
-            <div
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                bottom: 0,
-                width: "75%",
-                maxWidth: 280,
-                background: "#0f0f0f",
-                borderRight: "1px solid #1e1e1e",
-                zIndex: 11,
-                display: "flex",
-                flexDirection: "column",
-                overflowY: "auto",
-                WebkitOverflowScrolling: "touch",
-              }}
-            >
-              <div style={{ ...headerStyle, height: 36 }}>Scenes</div>
-              <div style={{ padding: "6px 0" }}>
-                {scenes.map((scene, i) => (
-                  <button
-                    key={scene.name}
-                    onClick={() => {
-                      setSelectedIndex(i);
-                      setShowScenes(false);
-                    }}
-                    style={{
-                      display: "block",
-                      width: "100%",
-                      padding: "10px 16px",
-                      fontSize: 14,
-                      border: "none",
-                      textAlign: "left",
-                      background:
-                        i === selectedIndex
-                          ? "rgba(255,255,255,0.08)"
-                          : "transparent",
-                      color: i === selectedIndex ? "#fff" : "#888",
-                      fontWeight: i === selectedIndex ? 500 : 400,
-                      cursor: "pointer",
-                      borderLeft:
-                        i === selectedIndex
-                          ? "2px solid #fff"
-                          : "2px solid transparent",
-                      fontFamily: "inherit",
-                    }}
-                  >
-                    {scene.name}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        {showJson && (
-          <>
-            <div
-              onClick={closePanels}
-              style={{
-                position: "absolute",
-                inset: 0,
-                background: "rgba(0,0,0,0.5)",
-                zIndex: 10,
-              }}
-            />
-            <div
-              style={{
-                position: "absolute",
-                top: 0,
-                right: 0,
-                bottom: 0,
-                width: "85%",
-                maxWidth: 400,
-                background: "#0d0d0d",
-                borderLeft: "1px solid #1e1e1e",
-                zIndex: 11,
-                display: "flex",
-                flexDirection: "column",
-              }}
-            >
-              <div style={{ ...headerStyle, height: 36 }}>Spec JSON</div>
-              <pre
-                style={{
-                  flex: 1,
-                  margin: 0,
-                  padding: 14,
-                  overflowY: "auto",
-                  overflowX: "auto",
-                  WebkitOverflowScrolling: "touch",
-                  fontSize: 11,
-                  lineHeight: 1.6,
-                  fontFamily:
-                    "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace",
-                  color: "#EDEDED",
-                  tabSize: 2,
-                }}
-                dangerouslySetInnerHTML={{
-                  __html: highlightJson(JSON.stringify(selected.spec, null, 2)),
-                }}
-              />
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function DesktopLayout() {
+export default function Page() {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const selected = scenes[selectedIndex]!;

@@ -483,8 +236,3 @@ function DesktopLayout() {
    </div>
  );
 }
-
-export default function Page() {
-  const isMobile = useIsMobile();
-  return isMobile ? <MobileLayout /> : <DesktopLayout />;
-}
@@ -1,6 +1,6 @@
 {
  "name": "example-react-three-fiber",
-  "version": "0.1.8",
+  "version": "0.1.9",
  "type": "module",
  "private": true,
  "scripts": {
@@ -7,10 +7,3 @@ AI_GATEWAY_API_KEY=
 # Override the default model used for video generation
 # Default: anthropic/claude-haiku-4.5
 AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100
@@ -1,5 +1,13 @@
 # example-remotion

+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/remotion@0.14.1
+
 ## 0.1.8

 ### Patch Changes
@@ -1,7 +1,5 @@
 import { streamText } from "ai";
 import { getVideoPrompt } from "@/lib/catalog";
-import { minuteRateLimit, dailyRateLimit } from "@/lib/rate-limit";
-import { headers } from "next/headers";

 export const maxDuration = 30;

@@ -12,30 +10,6 @@ const MAX_PROMPT_LENGTH = 500;
 const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";

 export async function POST(req: Request) {
-  const headersList = await headers();
-  const ip = headersList.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
  const { prompt } = await req.json();

  const sanitizedPrompt = String(prompt || "").slice(0, MAX_PROMPT_LENGTH);
@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:remotion:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:remotion:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};
@@ -1,6 +1,6 @@
 {
  "name": "example-remotion",
-  "version": "0.1.8",
+  "version": "0.1.9",
  "type": "module",
  "private": true,
  "scripts": {
@@ -27,8 +27,6 @@
    "remotion": "4.0.418",
    "shiki": "^3.21.0",
    "tailwind-merge": "^3.4.0",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
    "zod": "^4.3.6"
  },
  "devDependencies": {
@@ -1,5 +1,13 @@
 # example-solid

+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/solid@0.14.1
+
 ## 0.1.2

 ### Patch Changes
@@ -4,13 +4,6 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>json-render solid example</title>
-    <meta property="og:title" content="Solid Example | json-render" />
-    <meta property="og:image" content="/og-image.png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Solid Example | json-render" />
-    <meta name="twitter:image" content="/og-image.png" />
  </head>
  <body>
    <div id="app"></div>
@@ -1,6 +1,6 @@
 {
  "name": "example-solid",
-  "version": "0.1.2",
+  "version": "0.1.3",
  "private": true,
  "type": "module",
  "scripts": {
@@ -1,5 +1,13 @@
 # com.example.json-render-demo

+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/react@0.14.1
+
 ## 0.0.9

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "com.example.json-render-demo",
-  "version": "0.0.9",
+  "version": "0.0.10",
  "description": "Test",
  "private": true,
  "license": "~~proprietary~~",
@@ -1,5 +1,13 @@
 # com.example.json-render-fullpage-demo

+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/react@0.14.1
+
 ## 0.0.9

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "com.example.json-render-fullpage-demo",
-  "version": "0.0.9",
+  "version": "0.0.10",
  "description": "Full-page Stripe App example (alpha)",
  "private": true,
  "license": "~~proprietary~~",
@@ -1,15 +0,0 @@
-# Vercel AI Gateway
-# Automatically authenticated when deployed on Vercel
-# For local development, get your key from https://vercel.com/ai-gateway
-AI_GATEWAY_API_KEY=
-
-# AI Model Configuration
-# Default: anthropic/claude-haiku-4.5
-AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
-
-# Rate Limiting (Upstash Redis)
-# Optional - rate limiting is disabled when these are not set
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-RATE_LIMIT_PER_MINUTE=10
-RATE_LIMIT_PER_DAY=100
@@ -1,5 +1,13 @@
 # svelte-chat

+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/svelte@0.14.1
+
 ## 0.0.5

 ### Patch Changes
@@ -1,7 +1,7 @@
 {
  "name": "svelte-chat",
  "private": true,
-  "version": "0.0.5",
+  "version": "0.0.6",
  "type": "module",
  "scripts": {
    "dev": "vite dev",
@@ -34,8 +34,6 @@
    "clsx": "^2.1.1",
    "lucide-svelte": "^0.500.0",
    "tailwind-merge": "^3.2.0",
-    "@upstash/ratelimit": "^2.0.8",
-    "@upstash/redis": "^1.37.0",
    "zod": "4.3.6"
  }
 }
@@ -3,13 +3,6 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta property="og:title" content="Svelte Chat Example | json-render" />
-		<meta property="og:image" content="/og-image.png" />
-		<meta property="og:image:width" content="1200" />
-		<meta property="og:image:height" content="630" />
-		<meta name="twitter:card" content="summary_large_image" />
-		<meta name="twitter:title" content="Svelte Chat Example | json-render" />
-		<meta name="twitter:image" content="/og-image.png" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
@@ -1,57 +0,0 @@
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-
-// Lazy initialization to avoid errors when Redis env vars are not configured
-let _minuteRateLimit: Ratelimit | null = null;
-let _dailyRateLimit: Ratelimit | null = null;
-
-function getRedis(): Redis | null {
-  const url = process.env.KV_REST_API_URL;
-  const token = process.env.KV_REST_API_TOKEN;
-
-  if (!url || !token) {
-    return null;
-  }
-
-  return new Redis({ url, token });
-}
-
-// No-op rate limiter for when Redis is not configured
-const noopRateLimiter = {
-  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
-};
-
-const MINUTE_LIMIT = Number(process.env.RATE_LIMIT_PER_MINUTE) || 10;
-const DAILY_LIMIT = Number(process.env.RATE_LIMIT_PER_DAY) || 100;
-
-// Requests per minute (sliding window)
-export const minuteRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_minuteRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _minuteRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.slidingWindow(MINUTE_LIMIT, "1 m"),
-        prefix: "ratelimit:svelte-chat:minute",
-      });
-    }
-    return _minuteRateLimit.limit(identifier);
-  },
-};
-
-// Requests per day (fixed window)
-export const dailyRateLimit = {
-  limit: async (identifier: string) => {
-    if (!_dailyRateLimit) {
-      const redis = getRedis();
-      if (!redis) return noopRateLimiter.limit();
-      _dailyRateLimit = new Ratelimit({
-        redis,
-        limiter: Ratelimit.fixedWindow(DAILY_LIMIT, "1 d"),
-        prefix: "ratelimit:svelte-chat:daily",
-      });
-    }
-    return _dailyRateLimit.limit(identifier);
-  },
-};
@@ -1,5 +1,4 @@
 import { agent } from "$lib/agent";
-import { minuteRateLimit, dailyRateLimit } from "$lib/rate-limit";
 import {
  convertToModelMessages,
  createUIMessageStream,
@@ -10,30 +9,6 @@ import { pipeJsonRender } from "@json-render/core";
 import type { RequestHandler } from "./$types";

 export const POST: RequestHandler = async ({ request }) => {
-  const ip =
-    request.headers.get("x-forwarded-for")?.split(",")[0] ?? "anonymous";
-
-  const [minuteResult, dailyResult] = await Promise.all([
-    minuteRateLimit.limit(ip),
-    dailyRateLimit.limit(ip),
-  ]);
-
-  if (!minuteResult.success || !dailyResult.success) {
-    const isMinuteLimit = !minuteResult.success;
-    return new Response(
-      JSON.stringify({
-        error: "Rate limit exceeded",
-        message: isMinuteLimit
-          ? "Too many requests. Please wait a moment before trying again."
-          : "Daily limit reached. Please try again tomorrow.",
-      }),
-      {
-        status: 429,
-        headers: { "Content-Type": "application/json" },
-      },
-    );
-  }
-
  const body = await request.json();
  const uiMessages: UIMessage[] = body.messages;

@@ -1,5 +1,13 @@
 # example-svelte

+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/svelte@0.14.1
+
 ## 0.1.5

 ### Patch Changes
@@ -4,13 +4,6 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>json-render svelte example</title>
-    <meta property="og:title" content="Svelte Example | json-render" />
-    <meta property="og:image" content="/og-image.png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Svelte Example | json-render" />
-    <meta name="twitter:image" content="/og-image.png" />
  </head>
  <body>
    <div id="app"></div>
@@ -1,6 +1,6 @@
 {
  "name": "example-svelte",
-  "version": "0.1.5",
+  "version": "0.1.6",
  "private": true,
  "type": "module",
  "scripts": {
@@ -1,5 +1,16 @@
 # vite-renderers

+## 0.1.7
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/react@0.14.1
+  - @json-render/solid@0.14.1
+  - @json-render/svelte@0.14.1
+  - @json-render/vue@0.14.1
+
 ## 0.1.6

 ### Patch Changes
@@ -4,13 +4,6 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@json-render multi-renderer demo</title>
-    <meta property="og:title" content="Multi-Renderer Example | json-render" />
-    <meta property="og:image" content="/og-image.png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Multi-Renderer Example | json-render" />
-    <meta name="twitter:image" content="/og-image.png" />
    <style>
      * {
        box-sizing: border-box;
@@ -1,6 +1,6 @@
 {
  "name": "vite-renderers",
-  "version": "0.1.6",
+  "version": "0.1.7",
  "private": true,
  "type": "module",
  "scripts": {
@@ -1,5 +1,13 @@
 # example-vue

+## 0.1.7
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+  - @json-render/vue@0.14.1
+
 ## 0.1.6

 ### Patch Changes
@@ -4,13 +4,6 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>json-render vue example</title>
-    <meta property="og:title" content="Vue Example | json-render" />
-    <meta property="og:image" content="/og-image.png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Vue Example | json-render" />
-    <meta name="twitter:image" content="/og-image.png" />
    <style>
      * {
        box-sizing: border-box;
@@ -1,6 +1,6 @@
 {
  "name": "example-vue",
-  "version": "0.1.6",
+  "version": "0.1.7",
  "private": true,
  "scripts": {
    "predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
@@ -25,16 +25,14 @@
    "prepare": "husky",
    "changeset": "changeset",
    "ci:version": "changeset version && pnpm install --no-frozen-lockfile",
-    "ci:publish": "pnpm run build && changeset publish",
-    "generate:og": "npx tsx scripts/generate-og-images.mts"
+    "ci:publish": "pnpm run build && changeset publish"
  },
  "devDependencies": {
    "@changesets/cli": "2.29.8",
-    "@resvg/resvg-js": "2.6.2",
-    "@solidjs/testing-library": "^0.8.10",
    "@sveltejs/vite-plugin-svelte": "^6.2.4",
    "@testing-library/dom": "^10.4.1",
    "@testing-library/react": "^16.3.1",
+    "@solidjs/testing-library": "^0.8.10",
    "@testing-library/svelte": "^5.2.0",
    "@types/react": "^19.2.3",
    "husky": "^9.1.7",
@@ -43,7 +41,6 @@
    "prettier": "^3.7.4",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
-    "satori": "0.25.0",
    "solid-js": "^1.9.11",
    "svelte": "^5.0.0",
    "turbo": "^2.7.4",
@@ -1,5 +1,12 @@
 # @json-render/codegen

+## 0.14.1
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+
 ## 0.14.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@json-render/codegen",
-  "version": "0.14.0",
+  "version": "0.14.1",
  "license": "Apache-2.0",
  "description": "Utilities for generating code from json-render UI trees",
  "keywords": [
@@ -1,5 +1,14 @@
 # @json-render/core

+## 0.14.1
+
+### Patch Changes
+
+- 43b7515: Add yaml format support to `buildUserPrompt`
+
+  ### New:
+  - `buildUserPrompt` now accepts `format` and `serializer` options, enabling YAML as a wire format alongside JSON
+
 ## 0.14.0

 ### Minor Changes
@@ -1,6 +1,6 @@
 {
  "name": "@json-render/core",
-  "version": "0.14.0",
+  "version": "0.14.1",
  "license": "Apache-2.0",
  "description": "JSON becomes real things. Define your catalog, register your components, let AI generate.",
  "keywords": [
@@ -16,6 +16,10 @@ export interface UserPromptOptions {
  maxPromptLength?: number;
  /** Edit modes to offer when refining an existing spec. Default: `["patch"]`. */
  editModes?: EditMode[];
+  /** Wire format. Default: `"json"`. */
+  format?: "json" | "yaml";
+  /** Serialise the spec for edits. Defaults to JSON.stringify for json, must be provided for yaml. */
+  serializer?: (spec: Spec) => string;
 }

 /**
@@ -39,7 +43,15 @@ export interface UserPromptOptions {
 * ```
 */
 export function buildUserPrompt(options: UserPromptOptions): string {
-  const { prompt, currentSpec, state, maxPromptLength, editModes } = options;
+  const {
+    prompt,
+    currentSpec,
+    state,
+    maxPromptLength,
+    editModes,
+    format,
+    serializer,
+  } = options;

  // Sanitize and optionally truncate the user's text
  let userText = String(prompt || "");
@@ -53,7 +65,8 @@ export function buildUserPrompt(options: UserPromptOptions): string {
      prompt: userText,
      currentSpec,
      config: { modes: editModes ?? ["patch"] },
-      format: "json",
+      format: format ?? "json",
+      serializer,
    });

    // Append state context if provided
@@ -71,9 +84,15 @@ export function buildUserPrompt(options: UserPromptOptions): string {
    parts.push(`\nAVAILABLE STATE:\n${JSON.stringify(state, null, 2)}`);
  }

-  parts.push(
-    `\nRemember: Output /root first, then interleave /elements and /state patches so the UI fills in progressively as it streams. Output each state patch right after the elements that use it, one per array item.`,
-  );
+  if (format === "yaml") {
+    parts.push(
+      `\nOutput the full spec in a \`\`\`yaml-spec fence. Stream progressively — output elements one at a time.`,
+    );
+  } else {
+    parts.push(
+      `\nRemember: Output /root first, then interleave /elements and /state patches so the UI fills in progressively as it streams. Output each state patch right after the elements that use it, one per array item.`,
+    );
+  }

  return parts.join("\n");
 }
@@ -1,5 +1,12 @@
 # @json-render/image

+## 0.14.1
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+
 ## 0.14.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@json-render/image",
-  "version": "0.14.0",
+  "version": "0.14.1",
  "license": "Apache-2.0",
  "description": "Image renderer for @json-render/core. JSON becomes SVG and PNG images via Satori.",
  "keywords": [
@@ -1,5 +1,12 @@
 # @json-render/jotai

+## 0.14.1
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+
 ## 0.14.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@json-render/jotai",
-  "version": "0.14.0",
+  "version": "0.14.1",
  "license": "Apache-2.0",
  "description": "Jotai adapter for json-render StateStore",
  "keywords": [
@@ -1,5 +1,12 @@
 # @json-render/mcp

+## 0.14.1
+
+### Patch Changes
+
+- Updated dependencies [43b7515]
+  - @json-render/core@0.14.1
+
 ## 0.14.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@json-render/mcp",
-  "version": "0.14.0",
+  "version": "0.14.1",
  "license": "Apache-2.0",
  "description": "MCP Apps integration for @json-render/core. Serve json-render UIs as interactive MCP Apps in Claude, ChatGPT, Cursor, and VS Code.",
  "keywords": [
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
github-actions[bot]	ad557b2309	chore: version packages (#226 ) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2026-03-17 17:44:18 -05:00
Chris Tateandctate	43b7515a24	chore: patch release (#225 ) * chore: add minor changeset for v0.15 release * chore: change changeset to patch release --------- Co-authored-by: ctate <366502+ctate@users.noreply.github.com>	2026-03-17 17:37:29 -05:00
Laurens van der Helm	e16c5ef477	feat: add yaml format support to buildUserPrompt (#223 )	2026-03-17 13:40:28 -05:00