Bug Hunt Context

A thin React context provider that distributes the state, action callbacks, and static config (code lines, buggy line numbers, fix options, track color, language) every panel of a bug-hunt flow tends to need.

The provider is agnostic to who owns the reducer — wrap your panels in BugHuntProvider and consume the value with the useBugHunt hook.

Preview

Context

phase: find

remaining: 1

wrong taps: 0

lines: 11

buggy line: 4

fix options: 2

lang: typescript

Customize

Initial phase

find

fix

done

Installation

npx shadcn@latest add https://craftbits.dev/r/bug-hunt-context.json

Usage

import {
  BugHuntProvider,
  useBugHunt,
  type BugHuntActions,
  type BugHuntState,
} from "@craft-bits/core";
 
function MyPanel() {
  const { state, actions, codeLines, buggyLines } = useBugHunt();
  return (
    <button onClick={() => actions.tapLine(4)} disabled={state.phase !== "find"}>
      Flag the bug
    </button>
  );
}
 
function MyShell({ state, actions }) {
  return (
    <BugHuntProvider
      state={state}
      actions={actions}
      codeLines={CODE}
      buggyLines={[4]}
      fixOptions={FIX_OPTIONS}
    >
      <MyPanel />
    </BugHuntProvider>
  );
}

The provider renders a display: contents wrapper so it does not affect layout. Children inherit the same flow as their parent.

Anatomy

State — phase, traceIdx, selectedLine, foundLines, selectedFix, fixRevealed, wrongLineCount, remainingBugs. The shape produced by a typical bug-hunt reducer.
Actions — advanceTrace, tapLine, selectFix, reset. Discrete events panels fire to drive the flow.
Config — codeLines, buggyLines, fixOptions, lang, trackHex. Static per-flow data the panels read but never mutate.

The hook throws a descriptive error when called outside a provider so missing wrappers fail loudly during development.

Props

Prop	Type	Default	Description
`state`	`BugHuntState`	—	Current state of the flow.
`actions`	`BugHuntActions`	—	Action callbacks.
`codeLines`	`readonly string[]`	—	Code lines rendered by the panel.
`buggyLines`	`readonly number[]`	—	1-indexed lines that contain a bug.
`fixOptions`	`readonly BugHuntFixOptionDef[]`	`[]`	Fix options shown in the fix phase.
`lang`	`string`	`"typescript"`	Shiki language id for the code panel.
`trackHex`	`string`	`var(--cb-accent)`	Track / theme color for accent rails.
`className`	`string`	—	Merged onto the root wrapper via `cn()`.
`children`	`ReactNode`	—	Panels and consumers that read the context.

Accessibility

The provider renders a contents wrapper so it does not introduce any new DOM landmarks, focus stops, or ARIA boundaries — pure structural plumbing.
A data-phase attribute on the wrapper exposes the current phase so styling and assistive tooling can target it without reading the context directly.
Consumers are responsible for their own a11y; the provider only distributes the values they need.

Credits

Extracted from: AlgoFlashcards (src/lessons/primitives/BugHunt/BugHuntContext.tsx). Renamed the hook from useBugHuntContext to the cleaner useBugHunt, renamed the provider from the source's <BugHuntShell> to <BugHuntProvider> to match Radix/shadcn naming, and reshaped the value so fixOptions defaults to an empty array. A forwardRef wrapper was added so consumers can attach refs and forward ARIA / data attributes to the provider boundary.