@immediately-run/grove 0.1.10 → 0.2.2

package/src/components/PageView.tsx

@@ -1,27 +1,26 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Include, Link } from '@immediately-run/sdk';
+import { Link } from '@immediately-run/sdk';
 import { useShell, EDIT_REFUSED_NOTICE } from '../lib/shell';
-import { keyToHref, keyToRepoRel } from '../lib/content';
+import { keyToHref, keyToRepoRel, homeKey } from '../lib/content';
 import { crumb } from '../lib/wiki';
 import { useHeadingFragmentUrl } from '../hooks/useHeadingFragmentUrl';
+import { useFollowLink } from '../hooks/useFollowLink';
+import { followLinkOnClick } from '../lib/navigationPolicy';
 import DirectoryView from './DirectoryView';
-import EntryHeader from './EntryHeader';
-import SafeEntryBody from './SafeEntryBody';
-import ScrollToFragment from './ScrollToFragment';
-import Toc from './Toc';
-import Backlinks from './Backlinks';
+import EntryBody from './EntryBody';
 import Icon from './Icon';
 
-declare const module: any;
-
 // `<PageView/>` — the reading view for the current entry: the 404/missing state,
 // or the entry header + prose body (+ ToC / backlinks rails). This is what the
 // INNERMOST `<Outlet/>` renders at the bottom of the layout chain. It carries no
 // site chrome (nav / sidebar / footer) — that's the layout's job — so the page
 // stays free of shell concerns.
 export default function PageView() {
-  const { entryKey, includePath, layout, showRails, mins, missing, suggestion, writable, openEditor, editBusy, editRefused, editHint, vw, safe, directory } =
+  // R3-872: the entry content lives in EntryBody (one renderer, shared with
+  // GroveEntry); the page keeps only the page-level states (checking /
+  // directory / missing) and the deep-link half it owns.
+  const { entryKey, missing, suggestion, writable, openEditor, editBusy, editRefused, editHint, directory } =
     useShell();
+  const follow = useFollowLink();
 
   // The reading view owns the headings, so it owns the outgoing half of deep
   // linking: same-page heading navigation writes the fragment into the host's
@@ -41,10 +40,10 @@ export default function PageView() {
         <h2>No entry at <code>{keyToRepoRel(entryKey).replace(/^content/, '')}</code>.</h2>
         <p>
           That link points to an entry that doesn’t exist yet.
-          {suggestion ? <> Did you mean <Link className="grove-wikilink" data-state="ok" href={keyToHref(suggestion)}>{crumb(suggestion)}</Link>?</> : null}
+          {suggestion ? <> Did you mean <Link className="grove-wikilink" data-state="ok" href={keyToHref(suggestion)} onClick={followLinkOnClick(follow, { key: suggestion, href: keyToHref(suggestion), from: entryKey })}>{crumb(suggestion)}</Link>?</> : null}
         </p>
         <div className="grove-state__actions">
-          <Link className="btn-ghost" href="/"><Icon name="chevron-right" /> Back to home</Link>
+          <Link className="btn-ghost" href="/" onClick={followLinkOnClick(follow, { key: homeKey(), href: '/', from: entryKey })}><Icon name="chevron-right" /> Back to home</Link>
           {writable ? (
             <>
             <button
@@ -66,54 +65,5 @@ export default function PageView() {
     );
   }
 
-  return (
-    <article className="grove-page" data-layout={layout}>
-      <div className="gp-main">
-        <EntryHeader entryKey={entryKey} writable={writable} mins={mins} />
-        {showRails && vw === 'mobile' ? (
-          <details className="grove-toc__disclosure">
-            <summary>On this page</summary>
-            <Toc entryKey={entryKey} />
-          </details>
-        ) : null}
-        <div className="grove-prose">
-          {/* Interpreter mode (R3-213) renders the raw entry as data — no author JS runs;
-              executable mode compiles + runs the MDX via <Include>. Both are supported,
-              and since R3-252 the choice is per-entry as well as wiki-wide.
-
-              The compiled branch mounts <ScrollToFragment> too — deep-link landing is not
-              a safe-path feature — but deliberately carries NO `data-entry` marker, and
-              both halves of that are load-bearing (R3-252).
-
-              `key={entryKey}` forces an unmount across a client-side navigation. Without
-              it React reuses this subtree and keeps the PREVIOUS document mounted while
-              the new one compiles, so `#sec-4` resolves against the wrong entry — every
-              entry here numbers its sections from 1, so that lookup always succeeds and
-              always lands wrong. Measured on the host: a citation to core_concepts §4
-              ("4 — Principal") scrolled to a different document's "4. The provider-facing
-              contract" (R3-249's hazard, reintroduced).
-
-              No marker, because `<Include>` owns an internal <Suspense> and this wrapper
-              is OUTSIDE it — so a marker here would appear the instant we navigate, while
-              the body is still compiling, and claim a commit that has not happened. That
-              is worse than no signal: `data-entry` means "this subtree holds entry X's
-              committed body" everywhere else (`SafeEntryBody` puts it inside the suspended
-              subtree, so it is true there), and the on-host harness waits on it. Keying
-              already removes the hazard the marker defended against — the outgoing
-              document is gone from the DOM, not lingering — so `resolveFragmentTarget`'s
-              documented document-wide fallback for the compiled path is safe here. */}
-          {safe ? (
-            <SafeEntryBody entryKey={entryKey} />
-          ) : (
-            <div className="grove-entry-body" key={entryKey}>
-              <Include filename={includePath} baseModule={module} />
-              <ScrollToFragment entryKey={entryKey} />
-            </div>
-          )}
-        </div>
-        {showRails ? <Backlinks /> : null}
-      </div>
-      {showRails && vw === 'desktop' ? <Toc entryKey={entryKey} /> : null}
-    </article>
-  );
+  return <EntryBody entryKey={entryKey} />;
 }

package/src/components/Search.tsx

@@ -4,6 +4,8 @@ import type { Metadata } from '@immediately-run/sdk';
 import { keyToHref } from '../lib/content';
 import { crumb } from '../lib/wiki';
 import { useOverlayFocusDismiss } from '../hooks/useOverlayFocusDismiss';
+import { useFollowLink } from '../hooks/useFollowLink';
+import { followLinkOnClick } from '../lib/navigationPolicy';
 import InlineProse from './InlineProse';
 import { matchesQuery, searchQuery, toSearchEntries } from '../lib/queries';
 import type { SearchRecord } from '../lib/queries';
@@ -75,6 +77,7 @@ export default function Search({ onClose }: { onClose: () => void }) {
     }
   };
 
+  const follow = useFollowLink();
   const activeId = total > 0 ? `${listId}-opt-${sel}` : undefined;
 
   return (
@@ -125,7 +128,13 @@ export default function Search({ onClose }: { onClose: () => void }) {
                   id={`${listId}-opt-${i}`}
                   role="option"
                   aria-selected={sel === i}
-                  onClick={onClose}
+                  onClick={(e) => {
+                    // R3-872: the policy first (it preventDefaults plain clicks and
+                    // no-ops modified ones), then the overlay's own close — the
+                    // same order the bare onClick={onClose} had with no policy.
+                    followLinkOnClick(follow, { key: h.key, href: keyToHref(h.key) })(e);
+                    onClose();
+                  }}
                 >
                   <Icon name="file" />
                   <span className="t">

package/src/components/Sidebar.tsx

@@ -1,9 +1,10 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useContext, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Link, useMetadataQuery } from '@immediately-run/sdk';
 import type { Metadata } from '@immediately-run/sdk';
-import { TinkerableContext } from '@immediately-run/sdk/TinkerableContext';
-import { contentDir, keyToHref, sandboxPathToKey } from '../lib/content';
+import { contentDir, keyToHref } from '../lib/content';
+import { useEntryKey } from '../hooks/useEntryKey';
+import { useFollowLink } from '../hooks/useFollowLink';
+import { followLinkOnClick } from '../lib/navigationPolicy';
 import { sidebarQuery } from '../lib/queries';
 import { plainLabel } from '../lib/queries';
 import InlineProse from './InlineProse';
@@ -77,6 +78,7 @@ function Branch({
   const isFolder = childKeys.length > 0;
   const containsCurrent = !!currentKey && (node.key === currentKey || hasDescendant(node, currentKey));
   const [open, setOpen] = useState(depth < 1 || containsCurrent);
+  const follow = useFollowLink();
 
   if (!isFolder) {
     return (
@@ -89,6 +91,7 @@ function Branch({
         aria-level={depth + 1}
         aria-current={node.key === currentKey ? 'page' : undefined}
         tabIndex={node.key === stopRowId ? 0 : -1}
+        onClick={followLinkOnClick(follow, { key: node.key!, href: keyToHref(node.key!), from: currentKey })}
       >
         <Icon name="file" />
         <InlineProse text={node.title || node.name} trimPeriod />
@@ -141,8 +144,8 @@ function Branch({
 // `.grove-sidebar` — the wiki shell's left rail: a namespace tree + author-defined
 // `ui/sidebar` sections (a header + a link into the tagged entry).
 export default function Sidebar() {
-  const ctx = useContext(TinkerableContext) as any;
-  const currentKey = sandboxPathToKey(ctx?.navigationState?.sandboxPath || '/');
+  const currentKey = useEntryKey();
+  const follow = useFollowLink();
 
   // Records, not tab-encoded paths (R3-276a).
   const q = useMetadataQuery<Metadata, SidebarRecord>(sidebarQuery);
@@ -209,7 +212,12 @@ export default function Sidebar() {
         <div className="gs-block" key={s.key}>
           <div className="gs-block__h">{s.label}</div>
           <div className="gs-section__body">
-            <Link href={keyToHref(s.key)} className="grove-wikilink" data-state="ok">
+            <Link
+              href={keyToHref(s.key)}
+              className="grove-wikilink"
+              data-state="ok"
+              onClick={followLinkOnClick(follow, { key: s.key, href: keyToHref(s.key), from: currentKey })}
+            >
               Open
             </Link>
           </div>

package/src/components/TableOfContents.tsx

@@ -42,7 +42,7 @@ const MANUAL_SCROLL_GRACE_MS = 2000;
  */
 export default function TableOfContents({ entryKey, title = 'On this page', className }: Props) {
   const heads = useHeadings(entryKey);
-  const cur = useActiveHeading(heads);
+  const cur = useActiveHeading(heads, entryKey);
   const listRef = useRef<HTMLElement | null>(null);
   const itemsRef = useRef(new Map<string, HTMLAnchorElement>());
   const manualUntilRef = useRef(0);

package/src/components/TagCloud.test.tsx

@@ -0,0 +1,103 @@
+// @vitest-environment jsdom
+// TagCloud's render contract: chips carry a 0..1 `--tag-weight` and NO inline
+// font-size (the pixel range is GroveApp.css's), the wrapper carries the
+// --weighted modifier, and `limit` keeps the N most-used tags (a bad limit is
+// ignored with one warning). Metadata is supplied through TinkerableContext, the
+// way Sidebar.test.tsx supplies its map. The rendered pixel size itself is
+// jsdom-untestable (no calc()/custom-property resolution) — that leg is R3-946.
+import { describe, expect, it, vi, afterEach } from 'vitest';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { TinkerableContext } from '@immediately-run/sdk/TinkerableContext';
+
+const { default: TagCloud } = await import('./TagCloud');
+
+// One tag on 191 entries (the real docs corpus's `bug` scale) and one on a
+// single entry.
+const FILES = {
+  ...Object.fromEntries(
+    Array.from({ length: 191 }, (_, i) => [`/app/content/e${i}.mdx`, { title: `E${i}`, tags: ['bug'] }]),
+  ),
+  '/app/content/single.mdx': { title: 'Single.', tags: ['doc'] },
+};
+
+const NAV = {
+  outerHref: 'https://example.immediately.run/app/x',
+  navigationState: {
+    sandboxPath: '/app/x',
+    provider: 'github',
+    namespace: 'immediately-run',
+    repository: 'docs',
+    ref: 'main',
+    hash: '',
+    search: '',
+  },
+  routingSpec: {} as never,
+  filesMetadata: FILES,
+};
+
+let mounted: { root: Root; container: HTMLElement } | null = null;
+
+async function mountCloud(limit?: number): Promise<HTMLElement> {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(
+      <TinkerableContext.Provider value={NAV as never}>
+        <TagCloud limit={limit} />
+      </TinkerableContext.Provider>,
+    );
+  });
+  mounted = { root, container };
+  return container;
+}
+
+afterEach(() => {
+  if (mounted) {
+    act(() => mounted!.root.unmount());
+    mounted!.container.remove();
+    mounted = null;
+  }
+});
+
+const chips = (container: HTMLElement): HTMLElement[] =>
+  [...container.querySelectorAll('.grove-tag')] as HTMLElement[];
+
+describe('TagCloud', () => {
+  it('weights every chip between 0 and 1 with no inline font-size, on a --weighted wrapper', async () => {
+    const container = await mountCloud();
+    expect(container.querySelector('.grove-tagcloud')!.classList.contains('grove-tagcloud--weighted')).toBe(true);
+    const all = chips(container);
+    expect(all.length).toBe(2);
+    const weights = all.map((chip) => Number.parseFloat(chip.style.getPropertyValue('--tag-weight')));
+    for (const w of weights) {
+      expect(Number.isFinite(w)).toBe(true);
+      expect(w).toBeGreaterThanOrEqual(0);
+      expect(w).toBeLessThanOrEqual(1);
+    }
+    // Chips read alphabetically: `bug` (191 entries, the maximum) then `doc`
+    // (one entry, the minimum).
+    expect(weights).toEqual([1, 0]);
+    for (const chip of all) expect(chip.style.fontSize).toBe('');
+  });
+
+  it('limit={1} renders only the most-used tag, still scaled against the corpus', async () => {
+    const container = await mountCloud(1);
+    const all = chips(container);
+    expect(all.length).toBe(1);
+    expect(all[0]!.textContent).toContain('bug');
+    // Corpus-relative (not subset-relative): the corpus maximum keeps weight 1
+    // under the limit — subset scaling would give it min === max → 0.
+    expect(all[0]!.style.getPropertyValue('--tag-weight')).toBe('1');
+  });
+
+  it('limit={0} is treated as absent and warns once', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const container = await mountCloud(0);
+    expect(chips(container).length).toBe(2);
+    expect(warn.mock.calls.length).toBe(1);
+    expect(String(warn.mock.calls[0]![0])).toContain('0');
+    warn.mockRestore();
+  });
+});

package/src/components/TagCloud.tsx

@@ -1,46 +1,64 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
+import type { CSSProperties } from 'react';
 import { useMetadataQuery } from '@immediately-run/sdk';
 import { contentDir } from '../lib/content';
 import { queryPaths } from '../lib/wiki';
+import { countTags, tagWeight, topTags, type TagCount } from '../lib/tagCloud';
 
 // Import-free engine component: every tag across the site, sized by frequency.
 // Chrome tags (`ui/*`) are excluded — they drive layout, not classification.
-export default function TagCloud() {
+//
+// Sizing: each chip carries its weight as `--tag-weight` and the CSS owns the
+// pixels (11.5–22px) — the old `11 + count * 2 + 'px'` inline style had no
+// ceiling and let a frequent tag fill the viewport. The wrapper carries the
+// `--weighted` modifier so the rule never touches TagList's plain chips, which
+// share the `.grove-tagcloud` wrapper class.
+
+// A bad `limit` warns once per distinct value per session — an authored page
+// never goes blank over a prop.
+const warnedLimits = new Set<string>();
+
+export default function TagCloud({ limit }: { limit?: number }) {
+  const limitOk = limit === undefined || (Number.isInteger(limit) && limit > 0);
+  useEffect(() => {
+    if (limitOk) return;
+    const key = String(limit);
+    if (warnedLimits.has(key)) return;
+    warnedLimits.add(key);
+    console.warn(`TagCloud: limit must be a positive integer, got ${key} — showing every tag`);
+  }, [limit, limitOk]);
+
   const queryFn = useCallback((filesMetadata: Record<string, any>) => {
-    const counts: Record<string, number> = {};
-    Object.entries(filesMetadata).forEach(([p, m]) => {
-      if (!p.startsWith(contentDir())) return;
-      if (m && Array.isArray(m.tags)) {
-        m.tags.forEach((t: string) => {
-          if (t.startsWith('ui/')) return;
-          counts[t] = (counts[t] || 0) + 1;
-        });
-      }
-    });
-    // Encode counts into the string[] the query contract returns.
-    return Object.keys(counts)
-      .sort()
-      .map((t) => `${t}:${counts[t]}`);
+    // The query contract is string-valued, so the pairs ride as `tag:count`
+    // (the encoding is unchanged).
+    return countTags(filesMetadata, contentDir()).map(({ tag, count }) => `${tag}:${count}`);
   }, []);
 
   const result = useMetadataQuery(queryFn);
   const entries: string[] = queryPaths(result);
+  const pairs: TagCount[] = entries.map((e) => {
+    const [tag, count] = e.split(':');
+    return { tag: tag!, count: Number(count) };
+  });
+  const shown = topTags(pairs, limitOk ? limit : undefined);
+  // The scale is relative to the CORPUS (every tag), not the shown subset —
+  // under a limit the corpus's most-used tag must still read as the largest.
+  const counts = pairs.map((p) => p.count);
+  const min = Math.min(...counts);
+  const max = Math.max(...counts);
 
   return (
-    <div className="grove-tagcloud">
-      {entries.map((e) => {
-        const [tag, count] = e.split(':');
-        return (
-          <span
-            key={tag}
-            className="grove-tag"
-            style={{ fontSize: 11 + Number(count) * 2 + 'px', padding: '4px 12px' }}
-          >
-            #{tag} <span style={{ opacity: 0.5, marginLeft: 4 }}>{count}</span>
-          </span>
-        );
-      })}
+    <div className="grove-tagcloud grove-tagcloud--weighted">
+      {shown.map(({ tag, count }) => (
+        <span
+          key={tag}
+          className="grove-tag"
+          style={{ '--tag-weight': String(tagWeight(count, min, max)) } as CSSProperties}
+        >
+          #{tag} <span className="grove-tag__count">{count}</span>
+        </span>
+      ))}
     </div>
   );
 }

package/src/components/Timeline.tsx

@@ -4,15 +4,20 @@ import { Link, useFileMetadata, useMetadataQuery } from '@immediately-run/sdk';
 import { isContentEntry, keyToHref } from '../lib/content';
 import InlineProse from './InlineProse';
 import { queryPaths } from '../lib/wiki';
+import { useEntryKey } from '../hooks/useEntryKey';
+import { useFollowLink } from '../hooks/useFollowLink';
+import { followLinkOnClick } from '../lib/navigationPolicy';
 import EntryImage from './EntryImage';
 
 // One dated entry on the axis: mono date · node · card.
 function Row({ path }: { path: string }) {
   const m = useFileMetadata(path) as any;
+  const from = useEntryKey();
+  const follow = useFollowLink();
   if (!m) return null;
   const tags: string[] = Array.isArray(m.tags) ? m.tags.filter((t: string) => !t.startsWith('ui/')) : [];
   return (
-    <Link href={keyToHref(path)} className="gtl-row">
+    <Link href={keyToHref(path)} className="gtl-row" onClick={followLinkOnClick(follow, { key: path, href: keyToHref(path), from })}>
       <div className="gtl-date">{m.date}</div>
       <div className="gtl-node" />
       <div className="gtl-card">

package/src/components/WikiLink.test.tsx

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+// R3-871 — WikiLink resolves against the entry it renders inside, not the URL.
+// The URL routes to content/home.mdx while an EntryContext provider says this
+// subtree renders content/teams/engineering.mdx: a relative link must resolve
+// from engineering's directory, and "self" must be judged against engineering.
+// Keys come from the real key grammar (sandboxPathToKey/hrefKeyCandidates), the
+// same fixtures shape the other component tests use.
+import { describe, it, expect, beforeEach } from 'vitest';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { ReactNode } from 'react';
+import { TinkerableContext } from '@immediately-run/sdk/TinkerableContext';
+import { resetContentRoot, setContentRoot } from '../lib/contentRoot';
+
+const { default: WikiLink } = await import('./WikiLink');
+const { EntryContext } = await import('../hooks/useEntryKey');
+
+const METADATA = {
+  '/app/content/home.mdx': { title: 'Home' },
+  '/app/content/teams/engineering.mdx': { title: 'Engineering' },
+  '/app/content/people/ada-lovelace.mdx': { title: 'Ada Lovelace' },
+};
+
+/** The URL routes HOME; the provider (when given) says which entry we render. */
+function host(children: ReactNode, entryKey?: string, sandboxPath = '/files/content/home.mdx') {
+  const value = {
+    outerHref: 'https://immediately.run/present/github/o/r/main/files/content/home.mdx',
+    navigationState: { mode: 'present', namespace: 'github', provider: 'github', repository: 'o/r', ref: 'main', sandboxPath, hash: '', search: '' },
+    routingSpec: { routes: [] },
+    filesMetadata: METADATA,
+  };
+  const inner = <TinkerableContext.Provider value={value as never}>{children}</TinkerableContext.Provider>;
+  return entryKey === undefined ? inner : <EntryContext.Provider value={{ entryKey }}>{inner}</EntryContext.Provider>;
+}
+
+async function render(node: ReactNode): Promise<HTMLElement> {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    createRoot(container).render(node);
+  });
+  return container;
+}
+
+describe('WikiLink — the entry context decides the base (R3-871)', () => {
+  beforeEach(() => {
+    setContentRoot('/app/content/');
+    return () => resetContentRoot();
+  });
+
+  it('a relative link inside a non-routed entry resolves against that entry', async () => {
+    // the URL routes home; the subtree renders engineering (teams/engineering.mdx).
+    const el = await render(
+      host(
+        <WikiLink href="../people/ada-lovelace.mdx">Ada</WikiLink>,
+        '/app/content/teams/engineering.mdx',
+      ),
+    );
+    const link = el.querySelector('.grove-wikilink') as HTMLElement;
+    expect(link).not.toBeNull();
+    expect(link.getAttribute('data-state')).toBe('ok');
+    expect(link.getAttribute('href')).toContain('people/ada-lovelace.mdx');
+  });
+
+  it('the same relative link with no provider resolves against the routed entry (home)', async () => {
+    // From home/, ../people/ada-lovelace.mdx lands outside the corpus → broken.
+    // This is the default-preserving seam: same input, different base, by design.
+    const el = await render(host(<WikiLink href="../people/ada-lovelace.mdx">Ada</WikiLink>));
+    const link = el.querySelector('.grove-wikilink') as HTMLElement;
+    expect(link.getAttribute('data-state')).toBe('broken');
+  });
+
+  it('a link to the context entry\'s own entry is self — judged against the entry, not the URL', async () => {
+    const el = await render(
+      host(
+        <WikiLink href="engineering.mdx">this very page</WikiLink>,
+        '/app/content/teams/engineering.mdx',
+      ),
+    );
+    const link = el.querySelector('.grove-wikilink') as HTMLElement;
+    expect(link.getAttribute('data-state')).toBe('self');
+  });
+});

package/src/components/WikiLink.tsx

@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useContext } from 'react';
+import { useCallback } from 'react';
 import { Link, useMetadataQuery } from '@immediately-run/sdk';
-import { TinkerableContext } from '@immediately-run/sdk/TinkerableContext';
-import { hrefKeyCandidates, hrefTargetKey, isContentEntry, keyToHref, linkKind, sandboxPathToKey, splitFragment } from '../lib/content';
+import { hrefKeyCandidates, hrefTargetKey, isContentEntry, keyToHref, linkKind, splitFragment } from '../lib/content';
 import { isFolderKey } from '../lib/directory';
 import { queryPaths } from '../lib/wiki';
+import { useEntryKey } from '../hooks/useEntryKey';
+import { useFollowLink } from '../hooks/useFollowLink';
+import { followLinkOnClick } from '../lib/navigationPolicy';
 import Icon from './Icon';
 
 interface Props {
@@ -19,8 +21,10 @@ interface Props {
 // glance. Those are the ONLY two shapes: an in-app href that resolves to nothing renders
 // broken, never as a bare `<a>` (see `linkKind` — R3-252).
 export default function WikiLink({ href = '', children, ...rest }: Props) {
-  const ctx = useContext(TinkerableContext) as any;
-  const currentKey = sandboxPathToKey(ctx?.navigationState?.sandboxPath || '/');
+  // R3-871: the entry this link renders inside, not whatever the URL says.
+  const currentKey = useEntryKey();
+  // R3-872: plain clicks ride the navigation policy; the href stays real.
+  const follow = useFollowLink();
 
   // Resolve existence against the whole in-memory index (so a missing target is
   // *definitively* broken, not a load-time flash).
@@ -45,7 +49,12 @@ export default function WikiLink({ href = '', children, ...rest }: Props) {
   const targetKey = candidates.find((k) => keys.includes(k)) ?? candidates[0] ?? null;
   // Route on the RESOLVED key, not the author's text: handing `<Link>` a relative href
   // would make it resolve against the outer page URL rather than the content tree.
-  const [, fragment] = splitFragment(href);
+  const [, fragmentRaw] = splitFragment(href);
+  // `fragmentRaw` keeps the '#' for the hrefs (they concatenate it); the policy
+  // target carries the bare id (the FollowLinkTarget shape and
+  // resolveFragmentTarget's convention agree — never '#' + id).
+  const fragment = fragmentRaw || '';
+  const policyFragment = fragmentRaw ? fragmentRaw.replace(/^#/, '') : undefined;
   const resolvedHref = targetKey ? keyToHref(targetKey) + fragment : href;
 
   // Only an href that MEANS to leave the document becomes a real `<a>` — see `linkKind`.
@@ -60,7 +69,13 @@ export default function WikiLink({ href = '', children, ...rest }: Props) {
     const dirKey = kind === 'content' ? hrefTargetKey(href, currentKey) : null;
     if (dirKey && loaded && isFolderKey(dirKey, keys)) {
       return (
-        <Link href={keyToHref(dirKey) + fragment} className="grove-wikilink" data-state="ok" {...rest}>
+        <Link
+          href={keyToHref(dirKey) + fragment}
+          className="grove-wikilink"
+          data-state="ok"
+          onClick={followLinkOnClick(follow, { key: dirKey, fragment: policyFragment, href: keyToHref(dirKey) + fragment, from: currentKey })}
+          {...rest}
+        >
           {children}
         </Link>
       );
@@ -105,7 +120,13 @@ export default function WikiLink({ href = '', children, ...rest }: Props) {
   }
 
   return (
-    <Link href={resolvedHref} className="grove-wikilink" data-state="ok" {...rest}>
+    <Link
+      href={resolvedHref}
+      className="grove-wikilink"
+      data-state="ok"
+      onClick={followLinkOnClick(follow, { key: targetKey, fragment: policyFragment, href: resolvedHref, from: currentKey })}
+      {...rest}
+    >
       {children}
     </Link>
   );