+1 -1

README.md

··· 148 export default serve; 149 ``` 150 151 - It's recommended to tag XRPC return values as cacheable; see [`@inlay/cache`](packages/@inlay/cache) for how to do this. In the calling code, it's recommended to wrap XRPC components into `<at.inlay.Placeholder fallback=...>` so that they don't block the entire page. 152 153 ### Pack record 154

··· 148 export default serve; 149 ``` 150 151 + It's recommended to tag XRPC return values as cacheable; see [`@inlay/cache`](packages/@inlay/cache) for how to do this. In the calling code, it's recommended to wrap XRPC components into `<at.inlay.Loading fallback=...>` so that they don't block the entire page. 152 153 ### Pack record 154

+1 -1

generated/at/inlay.ts

··· 7 export * as Fragment from "./inlay/Fragment"; 8 export * as Maybe from "./inlay/Maybe"; 9 export * as Missing from "./inlay/Missing"; 10 - export * as Placeholder from "./inlay/Placeholder"; 11 export * as Slot from "./inlay/Slot"; 12 export * as Throw from "./inlay/Throw"; 13 export * as component from "./inlay/component";

··· 7 export * as Fragment from "./inlay/Fragment"; 8 export * as Maybe from "./inlay/Maybe"; 9 export * as Missing from "./inlay/Missing"; 10 + export * as Loading from "./inlay/Loading"; 11 export * as Slot from "./inlay/Slot"; 12 export * as Throw from "./inlay/Throw"; 13 export * as component from "./inlay/component";

+6

generated/at/inlay/Loading.ts

··· 0 0 0 0 0 0

··· 1 + /* 2 + * THIS FILE WAS GENERATED BY "@atproto/lex". DO NOT EDIT. 3 + */ 4 + 5 + export * from "./Loading.defs"; 6 + export * as $defs from "./Loading.defs";

+1 -1

generated/at/inlay/Placeholder.defs.ts generated/at/inlay/Loading.defs.ts

··· 5 import { l } from "@atproto/lex"; 6 import * as InlayDefs from "./defs.defs"; 7 8 - const $nsid = "at.inlay.Placeholder"; 9 10 export { $nsid }; 11

··· 5 import { l } from "@atproto/lex"; 6 import * as InlayDefs from "./defs.defs"; 7 8 + const $nsid = "at.inlay.Loading"; 9 10 export { $nsid }; 11

-6

generated/at/inlay/Placeholder.ts

··· 1 - /* 2 - * THIS FILE WAS GENERATED BY "@atproto/lex". DO NOT EDIT. 3 - */ 4 - 5 - export * from "./Placeholder.defs"; 6 - export * as $defs from "./Placeholder.defs";

··· 0 0 0 0 0 0

+1 -1

lexicons/at/inlay/Placeholder.json lexicons/at/inlay/Loading.json

··· 1 { 2 "lexicon": 1, 3 - "id": "at.inlay.Placeholder", 4 "defs": { 5 "main": { 6 "type": "procedure",

··· 1 { 2 "lexicon": 1, 3 + "id": "at.inlay.Loading", 4 "defs": { 5 "main": { 6 "type": "procedure",

+1 -1

proto/README.md

··· 17 18 The main route is `/at/:did/:collection/:rkey?componentUri=...`. It fetches the component record, creates an element (`$(componentType, { uri })`), and calls [`@inlay/render`](../packages/@inlay/render) in a loop until everything bottoms out in primitives. Each primitive maps to a custom HTML element (`org-atsui-stack`, `org-atsui-text`, etc.) styled by two CSS files. 19 20 - The response is streamed with Hono's `renderToReadableStream`. Slow XRPC calls don't block the whole page — `at.inlay.Placeholder` components use `<Suspense>` to show a fallback while the rest of the page streams. 21 22 ## Primitives 23

··· 17 18 The main route is `/at/:did/:collection/:rkey?componentUri=...`. It fetches the component record, creates an element (`$(componentType, { uri })`), and calls [`@inlay/render`](../packages/@inlay/render) in a loop until everything bottoms out in primitives. Each primitive maps to a custom HTML element (`org-atsui-stack`, `org-atsui-text`, etc.) styled by two CSS files. 19 20 + The response is streamed with Hono's `renderToReadableStream`. Slow XRPC calls don't block the whole page — `at.inlay.Loading` components use `<Suspense>` to show a fallback while the rest of the page streams. 21 22 ## Primitives 23

+3 -3

proto/src/primitives.tsx

··· 307 ); 308 } 309 310 - // --- Fragment / Maybe / Placeholder / Throw --- 311 312 async function Fragment({ ctx, props }: PrimitiveProps) { 313 const p = props as { children?: unknown[] }; ··· 335 ); 336 } 337 338 - async function Placeholder({ ctx, props }: PrimitiveProps) { 339 const p = props as { children?: unknown[]; fallback?: unknown }; 340 const fallback = 341 p.fallback && isValidElement(p.fallback) ? ( ··· 516 "org.atsui.Link": Link, 517 "at.inlay.Fragment": Fragment, 518 "at.inlay.Maybe": Maybe, 519 - "at.inlay.Placeholder": Placeholder, 520 "at.inlay.Throw": Throw, 521 "org.atsui.Tabs": Tabs, 522 "org.atsui.List": List,

··· 307 ); 308 } 309 310 + // --- Fragment / Maybe / Loading / Throw --- 311 312 async function Fragment({ ctx, props }: PrimitiveProps) { 313 const p = props as { children?: unknown[] }; ··· 335 ); 336 } 337 338 + async function Loading({ ctx, props }: PrimitiveProps) { 339 const p = props as { children?: unknown[]; fallback?: unknown }; 340 const fallback = 341 p.fallback && isValidElement(p.fallback) ? ( ··· 516 "org.atsui.Link": Link, 517 "at.inlay.Fragment": Fragment, 518 "at.inlay.Maybe": Maybe, 519 + "at.inlay.Loading": Loading, 520 "at.inlay.Throw": Throw, 521 "org.atsui.Tabs": Tabs, 522 "org.atsui.List": List,