+ {shown.split(/(<[^<>\s][^<>]*>)/g).map((part, i) =>
+ /^<[^<>\s][^<>]*>$/.test(part) ? (
+
+ {part}
+
+ ) : (
+ part
+ ),
+ )}
+
+
+ {/* Secrets are masked on screen but copied in full. */}
+ {filled.hasSecret && (
+ <>
+
+
+ >
+ )}
+
+
+
+
+ Filled in from your setup:
+ {filled.map((token) => (
+
+
+ Replace before running:
+ {remaining.map((token) => (
+
{extraLabel}
} +{note}
} +Your setup
+Commands across these guides fill in with these values.
+From your account. You never type it.
+{field.hint}
} ++ Anything left blank keeps its placeholder in the commands. Passwords and API secrets are never asked for — + replace those yourself before running. Values stay in this browser. +
++ Step {step} of {stepCount} +
+ )} +{children}
; } -/** An unordered list. The frames pack these into single text nodes; real list - * semantics are used here so screen readers announce the item count. */ -export function DocList({ items }: { items: ReactNode[] }) { +/** The one-line deck under a section title: what the reader gets, set a size up. */ +export function DocLede({ children }: { children: ReactNode }) { + return{children}
; +} + +export function DocList({ items, ordered = false }: { items: ReactNode[]; ordered?: boolean }) { + const List = ordered ? 'ol' : 'ul'; return ( -
- {code}
-
-
-
-
-
- {label}
+
+ {check &&
| + | {h} | ))} @@ -157,7 +299,7 @@ export function DocTable({ headers, rows }: { headers: string[]; rows: ReactNode {rows.map((row, i) => (
|---|---|
| + | {cell} | ))} @@ -169,47 +311,281 @@ export function DocTable({ headers, rows }: { headers: string[]; rows: ReactNode ); } +/** One end of a guide pager: where it goes, and the section it lands on. */ +interface DocPagerLink { + href: string; + label: string; +} + +/** Previous and next buttons at the foot of a guide page. */ +export function DocPager({ prev, next, guide }: { prev?: DocPagerLink; next?: DocPagerLink; guide: string }) { + const button = 'inline-flex shrink-0 items-center gap-1 rounded-lg border-[0.5px] border-border px-3 py-1.5 text-sm leading-5 text-foreground transition-colors group-hover:bg-muted'; + + return ( + + ); +} + /** * The footer prompt that closes every guide page. It is the Info Prompt component in - * its fuchsia variant, the one tint with no token yet, so the two colours are written - * literally the same way the callout above writes its purple. + * its fuchsia variant, the one tint with no token yet. + * + * Its panel is a fixed pale fuchsia in both themes, so its ink is fixed too: the + * theme's `foreground` inverts to near-white in dark mode and would vanish here. */ -export function DocFooterPrompt({ href }: { href: string }) { +export function DocFooterPrompt({ + href, + title = 'Need the complete implementation?', + description = 'Explore the source code, documentation, examples, and setup guides on GitHub.', + linkLabel = 'Open GitHub', +}: { + href: string; + title?: string; + description?: string; + linkLabel?: string; +}) { return ( -