fix default layout

proto/src/index.tsx

···
   type JSXElement,
 } from "./render.tsx";
 import { deserializeTree, $ } from "@inlay/core";
-import { setComponentUri } from "./primitives.tsx";
+import { setQueryString } from "./primitives.tsx";
 import { resolveDidToService } from "./resolve.ts";
 import "./types.ts";
 
···
         <script src="https://unpkg.com/htmx.org@2.0.4"></script>
         <script src="https://unpkg.com/htmx-ext-preload@2.1.0/preload.js"></script>
         {raw(`<style>
-          body { margin: 0; font-family: system-ui, sans-serif; background: var(--surface); color: var(--text); }
+          body { margin: 0; font-family: system-ui, sans-serif; background: #f5f5f5; color: var(--text); }
           .error { color: red; padding: 8px; font-size: 12px; }
           .list-sentinel { padding: 20px; text-align: center; color: var(--text-secondary); }
           .tabs-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
           .tabs-bar button { padding: 12px 20px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; }
           .tabs-bar button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
           hr { border: none; border-top: 1px solid var(--border); margin: 0; display: var(--separator, block); }
+          .layout-full, .layout-page {
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+          }
+          .layout-full > .layout-content,
+          .layout-page > .layout-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            overflow-y: auto;
+            box-sizing: border-box;
+          }
+          .layout-full > .layout-content {
+            align-items: stretch;
+          }
         </style>`)}
         {raw(`<script>
           function switchTab(btn, index) {
···
 app.get("/at/:did/:collection/:rkey", async (c) => {
   const { did, collection, rkey } = c.req.param();
   const componentUri = c.req.query("componentUri");
+  const layout = c.req.query("layout") as "page" | "full" | undefined;
 
   if (!componentUri) {
     return c.html(
···
     const uri = `at://${did}/${collection}/${rkey}`;
     const element = $(componentRecord.type, { uri });
     const context = createContext(componentRecord as any, componentUri);
-    setComponentUri(componentUri);
+    setQueryString(new URL(c.req.url).search.slice(1));
 
     const body = await renderNode(element, context, renderOptions);
 
+    const isFull = layout === "full";
+    const isPage = layout === "page";
+
+    const wrapped =
+      isFull || isPage ? (
+        <div class={isFull ? "layout-full" : "layout-page"}>
+          <div class="layout-content">
+            {isFull ? (
+              <at-inlay-root data-full>{body}</at-inlay-root>
+            ) : (
+              <at-inlay-root data-page>{body}</at-inlay-root>
+            )}
+          </div>
+        </div>
+      ) : (
+        <at-inlay-root>{body}</at-inlay-root>
+      );
+
     const stream = renderToReadableStream(
       <Shell>
         <ErrorBoundary
           fallbackRender={(e) => <div class="error">{e.message}</div>}
         >
-          {body}
+          {wrapped}
         </ErrorBoundary>
       </Shell>
     );

proto/src/primitives.tsx

···
 
 // renderNode is injected to avoid circular deps
 let _renderNode: (node: unknown, ctx: RenderContext) => Promise<JSXElement>;
-let _componentUri: string | undefined;
+let _qs: string = "";
 
 export function setRenderNode(
   fn: (node: unknown, ctx: RenderContext) => Promise<JSXElement>
···
   _renderNode = fn;
 }
 
-export function setComponentUri(uri: string) {
-  _componentUri = uri;
+export function setQueryString(qs: string) {
+  _qs = qs;
 }
 
 function rn(node: unknown, ctx: RenderContext): Promise<JSXElement> {
···
   if (!p.uri) return <></>;
 
   const content = p.children != null ? await rn(p.children, ctx) : p.uri;
-  const qs = _componentUri
-    ? `?componentUri=${encodeURIComponent(_componentUri)}`
-    : "";
+  const qs = _qs ? `?${_qs}` : "";
 
   if (p.uri.startsWith("did:")) {
     return (