Inline Code Bridge

A tone-tinted inline code reference. Drop it into prose to anchor a snippet to a side panel, figure, or any element with a stable id. Clicking smooth-scrolls the target into view and points focus there for keyboard users.

Preview

The cache check at line 3 guards against double work. Click the pill to scroll the panel below into view.

Customize

Tone

toneaccent

Features

leading dot

Installation

npx shadcn@latest add https://craftbits.dev/r/inline-code-bridge.json

Usage

import { InlineCodeBridge } from "@craft-bits/core";
 
<p>
  The cache check at{" "}
  <InlineCodeBridge targetId="panel-cache" tone="good">
    line 3
  </InlineCodeBridge>{" "}
  guards against double work.
</p>
 
<aside id="panel-cache">Cache hit shortcut...</aside>

Pair with a tone for code-review intent:

<InlineCodeBridge targetId="panel-off-by-one" tone="bad">
  i &lt;= nums.length
</InlineCodeBridge>

Understanding the component

Anchor first. The pill renders as a real <a href="#targetId"> so the link works without JavaScript, surfaces in browser link lists, and ships keyboard activation for free. Click is intercepted only to add smooth-scroll polish and focus management.
Focus follows the jump. On click the target element receives focus — if it lacks tabindex, the component adds tabindex="-1" for the duration of the focus move, then strips it on blur. The next Tab keypress continues from the panel, matching the user's mental model.
Tones map to tokens. Five tones — neutral / accent / good / bad / warn — map to --cb-fg-subtle, --cb-accent, --cb-success, --cb-error, --cb-warning. Override the --cb-* vars at the app root to reskin without touching the component.
Cross-page bridges. Pass an explicit href to point at another route — same-page anchors get the smooth-scroll treatment, cross-page hrefs fall through to native navigation.
A11y wiring. The pill carries aria-controls and aria-describedby pointed at the target id, so screen readers announce the bridge as a controller for the named region. The leading dot is aria-hidden.

Variants

Plain link — pass showDot={false} for a quieter inline treatment.
Cross-page — href="/docs/foo#bar" to bridge to a different route.
Tone mix — combine good / bad / warn pills inline to read like a code-review margin.

Props

Prop	Type	Default	Description
`targetId`	`string`	required	Id of the element this pill bridges to.
`children`	`ReactNode`	required	Inline content — typically a code snippet or short label.
`tone`	`'neutral' \| 'accent' \| 'good' \| 'bad' \| 'warn'`	`'accent'`	Semantic tone.
`href`	`string`	`#targetId`	Override the anchor href — set for cross-page bridges.
`showDot`	`boolean`	`true`	Render the leading tone dot.
`smoothScroll`	`boolean`	`true`	Smooth-scroll the target into view on click.
`className`	`string`	—	Merged onto the root `<a>`.

Accessibility

Renders as a native <a> — works with keyboard navigation out of the box.
Carries aria-controls and aria-describedby set to targetId, surfacing the bridge as a controller for the named region.
Focus follows the jump — the target element is focused after smooth-scroll so the next Tab continues from there.
The tone dot is decorative (aria-hidden="true"); the children carry the announced label.
Focus-visible outline keyed to the tone color (--cb-accent / --cb-success / etc.) for visible keyboard focus.

Credits

Extracted from: algoflashcards (src/lessons/primitives/chrome/InlineCodeBridge.tsx). The source was a multi-step interactive code-bridge with chunks, prediction gates, and per-line reveals. The library version distills the inline-anchor surface into a reusable primitive — strip the chunk reducer, generalise the tone palette to the cb token system, and expose the deep-link as the public API.