KQ-1754 · QUICK/FIX

Quick Fix

A code editor panel built from code and diagnostics: every problem is underlined under its exact columns in its severity's colour, marked in the gutter and counted in the header. Applying a fix morphs the faulty token into its correction character by character — the common start and end stay, each changed slot rolls on springs.snap in a left-to-right cascade and slots that appear or vanish grow or shrink on springs.glide — while the squiggle unwinds, its coil straightening on glide before it retracts into its middle, and the count ticks down on snap. The text is a real textarea over a painted layer: F8 and Shift+F8 walk the problems, gliding the code into view and opening a peek under the line, Command or Control with period opens the fixes menu at the caret, and edits shift the problems after them.

KQ-1754 · QUICK/FIX

readings.ts

import { formatLitres } from "./units";

type Reading = { site: string; litres: number; at: Date };

export function dailyTotal(readings: Reading[]): number {

let total = 0;

for (const r of readings) {

total += r.liters;

}

retrun total;

}

export function busiestSite(readings: Reading[]) {

const ranked = readings.sort((a, b) => b.litres - a.litres);

return ranked[0]?.site ?? "none";

}

export function isBasin(r: Reading) {

return r.site == "Basin";

}

export const label = (r: Reading) =>

`${r.site}: ${formatLitres(r.litres)}`;

Problems5

f8 · next problem · 2 errors · 2 warnings

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/quick-fix

Props

squiggleStyle: "wave" | "dots" | "line"; default "wave"; How a problem is underlined: a sine wave, a row of dots (they close into a rule as a fix unwinds them) or a straight rule.
editorTheme: "paper" | "slate" | "mono"; default "paper"; The surface and syntax colour: the card with quiet hues, a sunk slate panel with stronger hues and a tinted gutter, or no syntax colour so only the squiggles carry colour.
fontScale: number; default 1; Code size as a multiple of 13px; line height, squiggle size and gutter follow.
code / defaultCode: string; default — / defaultQuickFixCode; The source text.
onChange: (code) => void; default —; Fires with the new text after typing or a fix.
diagnostics / defaultDiagnostics: QuickFixDiagnostic[]; default — / defaultQuickFixDiagnostics; Problems as { id, from, to, severity, message, rule?, fixes?: { id, title, text }[] }, where from and to are character offsets into the code.
onDiagnosticsChange: (diagnostics) => void; default —; Fires after a fix, an ignore, or an edit that shifted problems or dropped one it touched.
onApplyFix: (diagnostic, fix, code) => void; default —; A fix was applied, with the new text.
onIgnore: (diagnostic) => void; default —; A problem was ignored from the peek or the menu.
fileName: string; default "gaugeworks/readings.ts"; The file's path, shown on its tab; the last part names it in messages.
status: "ready" | "loading" | "error"; default "ready"; Whether the file has opened: loading draws ruled lines, error offers Try again.
onRetry: () => void; default —; Try again was pressed after the file failed to open.
problemsOpen / defaultProblemsOpen: boolean; default — / true; Whether the problems panel is shown under the code.
onProblemsOpenChange: (open) => void; default —; Fires from the count button or the panel's close button.
readOnly: boolean; default false; The text can be read and navigated with F8, but not typed into or fixed.
height: number; default 540; The panel's height in px; the code scrolls inside it.
label: string; default the file name; The editor's accessible name.
disabled: boolean; default false; Nothing can be typed, fixed or ignored.
className: string; default —; Classes for the editor's outer box.

Prop	Type	Default	Description
squiggleStyle	"wave" \| "dots" \| "line"	"wave"	How a problem is underlined: a sine wave, a row of dots (they close into a rule as a fix unwinds them) or a straight rule.
editorTheme	"paper" \| "slate" \| "mono"	"paper"	The surface and syntax colour: the card with quiet hues, a sunk slate panel with stronger hues and a tinted gutter, or no syntax colour so only the squiggles carry colour.
fontScale	number	1	Code size as a multiple of 13px; line height, squiggle size and gutter follow.
code / defaultCode	string	— / defaultQuickFixCode	The source text.
onChange	(code) => void	—	Fires with the new text after typing or a fix.
diagnostics / defaultDiagnostics	QuickFixDiagnostic[]	— / defaultQuickFixDiagnostics	Problems as { id, from, to, severity, message, rule?, fixes?: { id, title, text }[] }, where from and to are character offsets into the code.
onDiagnosticsChange	(diagnostics) => void	—	Fires after a fix, an ignore, or an edit that shifted problems or dropped one it touched.
onApplyFix	(diagnostic, fix, code) => void	—	A fix was applied, with the new text.
onIgnore	(diagnostic) => void	—	A problem was ignored from the peek or the menu.
fileName	string	"gaugeworks/readings.ts"	The file's path, shown on its tab; the last part names it in messages.
status	"ready" \| "loading" \| "error"	"ready"	Whether the file has opened: loading draws ruled lines, error offers Try again.
onRetry	() => void	—	Try again was pressed after the file failed to open.
problemsOpen / defaultProblemsOpen	boolean	— / true	Whether the problems panel is shown under the code.
onProblemsOpenChange	(open) => void	—	Fires from the count button or the panel's close button.
readOnly	boolean	false	The text can be read and navigated with F8, but not typed into or fixed.
height	number	540	The panel's height in px; the code scrolls inside it.
label	string	the file name	The editor's accessible name.
disabled	boolean	false	Nothing can be typed, fixed or ignored.
className	string	—	Classes for the editor's outer box.