@lickle/docs 0.0.0-dev.1

package/src/ui/components/Comment.tsx

@@ -0,0 +1,221 @@
+import { createMemo, For, Show } from 'solid-js'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+import { createSlot, type Types } from '../context/index.ts'
+import { useCommentMarkdown } from '../hooks/index.ts'
+
+import { CodeBlock } from './Code/index.tsx'
+import { Markdown } from './Markdown.tsx'
+import { Type } from './Type.tsx'
+import { Link } from './Link.tsx'
+
+/**
+ * Render a single doc comment: summary markdown first, then every tag in
+ * source order. Consecutive `@param` (or `@property`) runs are merged into
+ * one labelled table so a five-parameter signature reads as one block.
+ *
+ * Per-tag rendering goes through the component registry — `defaults` from
+ * `theme/tags/`, with user overrides taking precedence. Unknown tags fall
+ * through to {@link UnknownTag}.
+ */
+export const Comment = createSlot('comment', (props) => {
+  return (
+    <Show when={props.comment}>
+      {(c) => {
+        const summary = useCommentMarkdown(c)
+        const groups = createMemo(() => groupTags(c().tags ?? []))
+
+        return (
+          <Show when={summary() || props.comment?.tags?.length}>
+            <div class={props.class}>
+              <Show when={summary()}>{(c) => <Markdown source={c()} />}</Show>
+              <For each={groups()}>
+                {(g) => {
+                  if (g.kind === '@param') return <Parameters tags={g.items} />
+                  if (g.kind === '@property') return <Properties tags={g.items} />
+                  if (g.tag.tag === '@module') return null
+                  return <Tag tag={g.tag} />
+                }}
+              </For>
+            </div>
+          </Show>
+        )
+      }}
+    </Show>
+  )
+})
+
+const Properties = createSlot('comment.properties', (p) => <NamedTable title="Properties" tags={p.tags} />)
+const Parameters = createSlot('comment.parameters', (p) => <NamedTable title="Parameters" tags={p.tags} />)
+
+const NamedTable = (props: {
+  title: string
+  tags: Types.CommentTagMap['@property'][] | Types.CommentTagMap['@param'][]
+}) => {
+  return (
+    <section class="mt-6">
+      <div class="flex items-baseline gap-2 mb-2">
+        <h4 class="text-mute uppercase text-[0.7rem] font-semibold tracking-wider">{props.title}</h4>
+      </div>
+      <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 items-baseline">
+        <For each={props.tags}>{(it) => <NamedRow item={it} />}</For>
+      </dl>
+    </section>
+  )
+}
+
+const NamedRow = (props: { item: Types.CommentTagMap['@property'] | Types.CommentTagMap['@param'] }) => (
+  <>
+    <dt class="font-mono text-sm whitespace-nowrap">
+      <span class="font-semibold">{props.item.name}</span>
+      <Show when={props.item.optional}>
+        <span class="text-mute">?</span>
+      </Show>
+      <Show when={props.item.type}>
+        <>
+          <span class="text-mute">: </span>
+          <Type type={props.item.type!} />
+        </>
+      </Show>
+      <Show when={props.item.default}>
+        <span class="text-mute"> = {props.item.default}</span>
+      </Show>
+    </dt>
+    <dd class="text-sm text-mute min-w-0">
+      <Show when={trimLead(props.item.text)}>
+        <Markdown.Inline source={trimLead(props.item.text)} />
+      </Show>
+    </dd>
+  </>
+)
+
+type Named = Types.CommentTagMap['@property'] | Types.CommentTagMap['@param']
+
+/** Strip a single leading `- ` so `@param foo - desc` collapses cleanly. */
+const trimLead = (s: string): string => (s ?? '').replace(/^\s*-\s*/, '').trim()
+
+type Group =
+  | { kind: '@param'; items: Types.CommentTagMap['@param'][] }
+  | { kind: '@property'; items: Types.CommentTagMap['@property'][] }
+  | { kind: 'tag'; tag: Types.CommentTag }
+
+const groupTags = (tags: Types.CommentTag[]): Group[] => {
+  const out: Group[] = []
+  const pushRun = <K extends '@param' | '@property'>(kind: K, item: Named) => {
+    const last = out[out.length - 1]
+    if (last && last.kind === kind) (last.items as Named[]).push(item)
+    else out.push({ kind, items: [item] } as Group)
+  }
+  for (const t of tags) {
+    if (t.tag === '@param') pushRun('@param', t as Named)
+    else if (t.tag === '@property') pushRun('@property', t as Named)
+    else out.push({ kind: 'tag', tag: t })
+  }
+  return out
+}
+
+export const Tag = createSlot('tag', (props) => {
+  if (props.tag.tag === '@returns') return <TagReturns tag={props.tag as Types.CommentTagMap['@returns']} />
+  if (props.tag.tag === '@throws') return <TagThrows tag={props.tag as Types.CommentTagMap['@throws']} />
+  if (props.tag.tag === '@type') return <TagType tag={props.tag as Types.CommentTagMap['@type']} />
+  if (props.tag.tag === '@satisfies') return <TagSatisfies tag={props.tag as Types.CommentTagMap['@satisfies']} />
+  if (props.tag.tag === '@example') return <TagExample tag={props.tag as Types.CommentTagMap['@example']} />
+  if (props.tag.tag === '@see') return <TagSee tag={props.tag as Types.CommentTagMap['@see']} />
+  if (props.tag.tag === '@template') return <TagTemplate tag={props.tag as Types.CommentTagMap['@template']} />
+  return <TagOther tag={props.tag} />
+})
+
+/** Section frame shared across tag renderers. */
+export const TagSection = (props: { tag: Types.CommentTag; description?: string; children: JSX.Element }) => (
+  <section class="mt-6">
+    <div class="flex items-baseline gap-2 mb-2">
+      <TagTitle tag={props.tag} />
+      <Show when={props.description}>
+        {(description) => (
+          <div class="text-xs text-mute min-w-0">
+            <Markdown.Inline source={description()} />
+          </div>
+        )}
+      </Show>
+    </div>
+    {props.children}
+  </section>
+)
+
+const TagTitle = (props: { tag: Types.CommentTag }) => {
+  const title = props.tag.tag.replace(/^@/, '')
+  return <h4 class="text-mute uppercase text-[0.7rem] font-semibold tracking-wider">{title}</h4>
+}
+
+export const TagExample = createSlot('tag.example', (props: { tag: Types.CommentTagMap['@example'] }) => (
+  <TagSection tag={props.tag}>
+    <CodeBlock code={props.tag.code} />
+  </TagSection>
+))
+
+export const TagReturns = createSlot('tag.returns', (props: { tag: Types.CommentTagMap['@returns'] }) => (
+  <TagSection tag={props.tag}>
+    <Type.Inline type={props.tag.type} text={props.tag.text} />
+  </TagSection>
+))
+
+export const TagSatisfies = createSlot('tag.satisfies', (props: { tag: Types.CommentTagMap['@satisfies'] }) => (
+  <TagSection tag={props.tag}>
+    <Type.Inline type={props.tag.type} text={props.tag.text} />
+  </TagSection>
+))
+
+export const TagSee = createSlot('tag.see', (props: { tag: Types.CommentTagMap['@see'] }) => (
+  <TagSection tag={props.tag}>
+    <Show when={props.tag.target}>
+      <div class="font-mono text-sm mb-1">
+        <Link.ByName name={props.tag.target ?? ''} />
+      </div>
+    </Show>
+  </TagSection>
+))
+
+export const TagTemplate = createSlot('tag.template', (props: { tag: Types.CommentTagMap['@template'] }) => (
+  <TagSection tag={props.tag}>
+    <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 items-baseline">
+      <For each={props.tag.generics}>
+        {(tp) => (
+          <>
+            <dt class="font-mono text-sm font-semibold">{tp.name}</dt>
+            <dd class="text-sm text-mute">
+              <Show when={tp.constraint}>
+                <>
+                  <span class="text-accent">extends </span>
+                  <Type type={tp.constraint!} />
+                </>
+              </Show>
+            </dd>
+          </>
+        )}
+      </For>
+    </dl>
+    <Show when={props.tag.text?.trim()}>
+      <div class="mt-2">
+        <Markdown.Inline source={props.tag.text} />
+      </div>
+    </Show>
+  </TagSection>
+))
+
+export const TagThrows = createSlot('tag.throws', (props: { tag: Types.CommentTagMap['@throws'] }) => (
+  <TagSection tag={props.tag}>
+    <Type.Inline type={props.tag.type} text={props.tag.text} />
+  </TagSection>
+))
+
+export const TagType = createSlot('tag.type', (props: { tag: Types.CommentTagMap['@type'] }) => (
+  <TagSection tag={props.tag}>
+    <Type.Inline type={props.tag.type} text={props.tag.text} />
+  </TagSection>
+))
+
+export const TagOther = createSlot('tag.*', (props) => (
+  <TagSection tag={props.tag}>
+    <Markdown source={(props.tag as { text?: string }).text ?? ''} />
+  </TagSection>
+))

package/src/ui/components/Declaration.tsx

@@ -0,0 +1,210 @@
+import { For, Show, type Component } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+import { createSlot, type Types } from '../context/index.ts'
+import { Syntax } from './Syntax.tsx'
+import { Comment } from './Comment.tsx'
+import { Type } from './Type.tsx'
+
+/**
+ * Dispatch a declaration to its per-kind renderer. Implemented via `Dynamic`
+ * (not an `if`/`switch`) so the active sub-component swaps reactively when
+ * `props.decl.kind` changes — otherwise navigating between pages of different
+ * kinds would freeze on the original branch.
+ */
+export const Declaration = createSlot('declaration', (props) => (
+  <Dynamic component={dispatch(props.decl.kind)} decl={props.decl} />
+))
+
+const dispatch = (kind: Types.Declaration['kind']): Component<{ decl: any }> => RENDERERS[kind]
+
+/** Heritage line — `extends A, B` / `implements C`. */
+const ExtendsLine = (props: { label: string; types?: Types.Type[] }) => (
+  <Show when={props.types?.length}>
+    <div class="text-sm text-mute font-mono mt-2">
+      <span class="text-accent">{props.label} </span>
+      <Type.Join sep=", " items={props.types!} />
+    </div>
+  </Show>
+)
+
+export const DeclarationFunction = createSlot('declaration.function', (props) => (
+  <div class="mt-2">
+    <For each={props.decl.signatures}>
+      {(sig) => <Type.SignatureLine sig={sig} name={props.decl.name} id={props.decl.id} kind="function" />}
+    </For>
+    <Comment comment={props.decl.comment} />
+  </div>
+))
+
+export const DeclarationVariable = createSlot('declaration.variable', (props) => (
+  <div>
+    <div class="font-mono text-sm leading-relaxed">
+      <Syntax.Kw>const </Syntax.Kw>
+      <span class="font-semibold">{props.decl.name}</span>
+      <Syntax.Punct>: </Syntax.Punct>
+      <Type type={props.decl.type} />
+      <Show when={props.decl.defaultValue}>
+        <Syntax.Punct>{` = ${props.decl.defaultValue}`}</Syntax.Punct>
+      </Show>
+    </div>
+    <Comment comment={props.decl.comment} />
+  </div>
+))
+
+export const DeclarationTypeAlias = createSlot('declaration.type-alias', (props) => (
+  <div>
+    <div class="font-mono text-sm leading-relaxed">
+      <Syntax.Kw>type </Syntax.Kw>
+      <span class="font-semibold">{props.decl.name}</span>
+      <Type.Generics generics={props.decl.generics} />
+      <Syntax.Punct> = </Syntax.Punct>
+      <Type type={props.decl.type} />
+    </div>
+    <Comment comment={props.decl.comment} />
+  </div>
+))
+
+export const DeclarationClass = createSlot('declaration.class', (props) => (
+  <div>
+    <ExtendsLine label="extends" types={props.decl.extends} />
+    <ExtendsLine label="implements" types={props.decl.implements} />
+    <Comment comment={props.decl.comment} />
+    <Members
+      constructors={props.decl.constructors}
+      properties={props.decl.properties}
+      methods={props.decl.methods}
+      indexSignature={props.decl.indexSignature}
+    />
+  </div>
+))
+
+export const DeclarationInterface = createSlot('declaration.interface', (props) => (
+  <div>
+    <ExtendsLine label="extends" types={props.decl.extends} />
+    <Comment comment={props.decl.comment} />
+    <Members
+      properties={props.decl.properties}
+      methods={props.decl.methods}
+      callSignatures={props.decl.callSignatures}
+      constructSignatures={props.decl.constructSignatures}
+      indexSignature={props.decl.indexSignature}
+    />
+  </div>
+))
+
+/** Section heading matching the module-children layout in `Page.tsx`. */
+const MemberSection = (props: { title: string; when: unknown; children: any }) => (
+  <Show when={props.when}>
+    <section class="mt-8">
+      <h2 class="text-sm font-semibold mb-3 pb-1.5 border-b border-line capitalize">{props.title}</h2>
+      {props.children}
+    </section>
+  </Show>
+)
+
+const PropertyRow = (props: { prop: Types.Part<'property'> }) => (
+  <div class="py-2">
+    <div class="font-mono text-sm leading-relaxed">
+      <span class="font-semibold">{props.prop.name}</span>
+      <Show when={props.prop.optional}>
+        <Syntax.Punct>?</Syntax.Punct>
+      </Show>
+      <Syntax.Punct>: </Syntax.Punct>
+      <Type type={props.prop.type} />
+      <Show when={props.prop.defaultValue}>
+        <Syntax.Punct>{` = ${props.prop.defaultValue}`}</Syntax.Punct>
+      </Show>
+    </div>
+    <Show when={props.prop.comment}>
+      <div class="mt-1">
+        <Comment comment={props.prop.comment} />
+      </div>
+    </Show>
+  </div>
+)
+
+const IndexRow = (props: { sig: Types.Part<'index-signature'> }) => (
+  <div class="font-mono text-sm leading-relaxed py-2">
+    <Syntax.Punct>[</Syntax.Punct>
+    <span class="font-semibold">{props.sig.parameter.name}</span>
+    <Syntax.Punct>: </Syntax.Punct>
+    <Type type={props.sig.parameter.type} />
+    <Syntax.Punct>]: </Syntax.Punct>
+    <Type type={props.sig.type} />
+  </div>
+)
+
+/** Member listing shared by classes and interfaces. */
+const Members = (props: {
+  constructors?: Types.Part<'signature'>[]
+  properties?: Types.Part<'property'>[]
+  methods?: Types.Part<'method'>[]
+  callSignatures?: Types.Part<'signature'>[]
+  constructSignatures?: Types.Part<'signature'>[]
+  indexSignature?: Types.Part<'index-signature'>
+}) => (
+  <>
+    <MemberSection title="Constructors" when={props.constructors?.length}>
+      <For each={props.constructors}>{(sig) => <Type.Signature sig={sig} name="constructor" kind="constructor" />}</For>
+    </MemberSection>
+    <MemberSection title="Properties" when={props.properties?.length || props.indexSignature}>
+      <For each={props.properties}>{(p) => <PropertyRow prop={p} />}</For>
+      <Show when={props.indexSignature}>{(sig) => <IndexRow sig={sig()} />}</Show>
+    </MemberSection>
+    <MemberSection title="Methods" when={props.methods?.length}>
+      <For each={props.methods}>
+        {(m) => <For each={m.signatures}>{(sig) => <Type.Signature sig={sig} name={m.name} kind="method" />}</For>}
+      </For>
+    </MemberSection>
+    <MemberSection title="Call Signatures" when={props.callSignatures?.length}>
+      <For each={props.callSignatures}>{(sig) => <Type.Signature sig={sig} />}</For>
+    </MemberSection>
+    <MemberSection title="Construct Signatures" when={props.constructSignatures?.length}>
+      <For each={props.constructSignatures}>{(sig) => <Type.Signature sig={sig} kind="constructor" />}</For>
+    </MemberSection>
+  </>
+)
+
+export const DeclarationEnum = createSlot('declaration.enum', (props) => (
+  <div>
+    <Comment comment={props.decl.comment} />
+    <MemberSection title="Members" when={props.decl.members?.length}>
+      <For each={props.decl.members}>{(m) => <EnumMemberRow member={m} />}</For>
+    </MemberSection>
+  </div>
+))
+
+const EnumMemberRow = (props: { member: Types.Part<'enum-member'> }) => (
+  <div class="py-2">
+    <div class="font-mono text-sm leading-relaxed">
+      <span class="font-semibold">{props.member.name}</span>
+      <Show when={props.member.value !== undefined}>
+        <Syntax.Punct>{` = ${typeof props.member.value === 'string' ? `"${props.member.value}"` : props.member.value}`}</Syntax.Punct>
+      </Show>
+    </div>
+    <Show when={props.member.comment}>
+      <div class="mt-1">
+        <Comment comment={props.member.comment} />
+      </div>
+    </Show>
+  </div>
+)
+
+export const DeclarationModule = createSlot('declaration.module', (props) => <Comment comment={props.decl.comment} />)
+
+export const DeclarationNamespace = createSlot('declaration.namespace', (props) => (
+  <Comment comment={props.decl.comment} />
+))
+
+const RENDERERS: Record<Types.Declaration['kind'], Component<{ decl: any }>> = {
+  class: DeclarationClass,
+  interface: DeclarationInterface,
+  enum: DeclarationEnum,
+  function: DeclarationFunction,
+  variable: DeclarationVariable,
+  'type-alias': DeclarationTypeAlias,
+  module: DeclarationModule,
+  namespace: DeclarationNamespace,
+  export: () => null,
+}

package/src/ui/components/Header.tsx

@@ -0,0 +1,99 @@
+import { For, Show, createMemo } from 'solid-js'
+import { A } from '@solidjs/router'
+
+import { useProject } from '../context/index.ts'
+import { createSlot } from '../context/index.ts'
+import { ThemeToggle } from './ThemeToggle.tsx'
+
+const isMac = () => typeof navigator !== 'undefined' && /mac/i.test(navigator.platform || navigator.userAgent || '')
+
+const ICON_BY_NAME: Record<string, string> = {
+  github: 'github-icon',
+  bluesky: 'bluesky-icon',
+  discord: 'discord-icon',
+  x: 'x-icon',
+  twitter: 'x-icon',
+  npm: 'documentation-icon',
+}
+
+const iconFor = (label: string): string | null => {
+  const k = label.toLowerCase()
+  return ICON_BY_NAME[k] ?? null
+}
+
+export const Header = createSlot('header', (props: { onMenu?: () => void; onSearch?: () => void }) => {
+  const project = useProject()
+  const searchHint = createMemo(() => (isMac() ? '\u2318K' : 'Ctrl K'))
+
+  return (
+    <header class="sticky top-0 z-30 border-b border-line bg-bg/80 backdrop-blur-md backdrop-saturate-150">
+      <div class="flex items-center h-14 px-4 lg:px-6 gap-4">
+        <button
+          type="button"
+          aria-label="Open menu"
+          class="lg:hidden p-1.5 rounded hover:bg-hover cursor-pointer"
+          onClick={() => props.onMenu?.()}
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            stroke-linecap="round"
+          >
+            <path d="M4 7h16M4 12h16M4 17h16" />
+          </svg>
+        </button>
+        <A href="/" class="flex items-baseline gap-2 hover:opacity-70 transition-opacity">
+          <span class="font-semibold text-[0.95rem] tracking-tight">{project().name}</span>
+          <Show when={project().version}>
+            <span class="text-xs text-mute font-mono">v{project().version}</span>
+          </Show>
+        </A>
+
+        <button
+          type="button"
+          onClick={() => props.onSearch?.()}
+          aria-label="Search"
+          class="ml-4 flex items-center gap-2 px-2.5 py-1 text-xs text-mute border border-line rounded-md hover:text-fg hover:bg-hover transition-colors cursor-pointer"
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.5-3.5" stroke-linecap="round" />
+          </svg>
+          <span class="hidden sm:inline">Search</span>
+          <kbd class="font-mono text-[0.65rem] text-mute">{searchHint()}</kbd>
+        </button>
+
+        <nav class="ml-auto flex items-center gap-1">
+          <For each={project().links}>
+            {({ label, href }) => {
+              const icon = iconFor(label)
+              return (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer"
+                  class="flex items-center gap-1.5 px-2 py-1 text-xs text-mute hover:text-fg transition-colors duration-150"
+                  title={label}
+                >
+                  <Show when={icon} fallback={<span>{label}</span>}>
+                    <svg width="14" height="14">
+                      <use href={`/icons.svg#${icon}`} />
+                    </svg>
+                    <span class="sr-only">{label}</span>
+                  </Show>
+                </a>
+              )
+            }}
+          </For>
+          <div class="ml-2">
+            <ThemeToggle />
+          </div>
+        </nav>
+      </div>
+    </header>
+  )
+})

package/src/ui/components/Layout.tsx

@@ -0,0 +1,62 @@
+import { createSignal, onCleanup, onMount } from 'solid-js'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+import { useLocation } from '@solidjs/router'
+import { createEffect } from 'solid-js'
+
+import { createSlot } from '../context/index.ts'
+
+import { SearchPalette } from './SearchPalette.tsx'
+import { Sidebar } from './Sidebar.tsx'
+import { Header } from './Header.tsx'
+
+export const Layout = createSlot('layout', (props: { children: JSX.Element }) => {
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  const [searchOpen, setSearchOpen] = createSignal(false)
+  const loc = useLocation()
+  createEffect(() => {
+    void loc.pathname
+    setMenuOpen(false)
+  })
+
+  onMount(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault()
+        setSearchOpen((v) => !v)
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    onCleanup(() => window.removeEventListener('keydown', onKey))
+  })
+
+  return (
+    <div class="min-h-screen flex flex-col">
+      <Header onMenu={() => setMenuOpen((v) => !v)} onSearch={() => setSearchOpen(true)} />
+
+      <div class="flex-1 grid grid-cols-1 lg:grid-cols-[220px_1fr] max-w-[1400px] w-full mx-auto">
+        <Sidebar class="hidden lg:block border-r border-line sticky top-14 self-start h-[calc(100vh-3.5rem)] overflow-y-auto" />
+
+        <div
+          class={`lg:hidden fixed inset-0 z-40 bg-black/30 transition-opacity duration-200 ${
+            menuOpen() ? 'opacity-100' : 'opacity-0 pointer-events-none'
+          }`}
+          onClick={() => setMenuOpen(false)}
+        >
+          <div
+            class={`absolute inset-y-0 left-0 w-64 bg-bg border-r border-line overflow-y-auto pt-14 transition-transform duration-200 ease-out ${
+              menuOpen() ? 'translate-x-0' : '-translate-x-full'
+            }`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Sidebar onNavigate={() => setMenuOpen(false)} />
+          </div>
+        </div>
+
+        <main class="min-w-0 px-6 lg:px-12 pt-8 pb-20 max-w-[860px] wrap-break-word">{props.children}</main>
+      </div>
+
+      <SearchPalette open={searchOpen} onClose={() => setSearchOpen(false)} />
+    </div>
+  )
+})

package/src/ui/components/Link.tsx

@@ -0,0 +1,43 @@
+import { Show } from 'solid-js'
+import { A } from '@solidjs/router'
+
+import { useSlugFor } from '../hooks/index.ts'
+import { Syntax } from './Syntax.tsx'
+
+export const Link = (props: { href: string; children: string }) => {
+  return (
+    <A href={props.href} class="underline decoration-line underline-offset-[3px] hover:opacity-70">
+      {props.children}
+    </A>
+  )
+}
+
+/**
+ * Link to an in-project declaration by id, with a fallback rendering when
+ * the target isn't resolvable. The `?` prefix marks anonymous external
+ * references the resolver couldn't anchor to anything.
+ */
+Link.Type = (props: { id?: number; name: string; external?: 'stdlib' | 'package' | 'anonymous' | 'type-parameter' }) => {
+  const slugs = useSlugFor()
+  const slug = () => (props.id != null ? slugs.byId(props.id) : undefined)
+  return (
+    <>
+      <Show when={props.external === 'anonymous'}>
+        <Syntax.Punct>?</Syntax.Punct>
+      </Show>
+      <Show when={slug()} fallback={<Syntax.Name>{props.name}</Syntax.Name>}>
+        <Link href={`/${slug()}`}>{props.name}</Link>
+      </Show>
+    </>
+  )
+}
+
+Link.ByName = (props: { name: string }) => {
+  const slugs = useSlugFor()
+  const slug = () => slugs.byName(props.name)
+  return (
+    <Show when={slug()} fallback={<Syntax.Name>{props.name}</Syntax.Name>}>
+      <Link href={`/${slug()}`}>{props.name}</Link>
+    </Show>
+  )
+}