{error}
}
+ {error && {error}
}
{updateNotice}
{view === "home" &&Switches
Scanning
Mobile connection
Optional mobile control and switch forwarding
Mobile
- {tabs.map((tab, index) => )}
{/* Outside the tablist so the reason never becomes part of a tab's name. */}
{tabs.filter((tab) => tab.attention).map((tab) => {tab.attention})}
diff --git a/src/help/Demonstration.test.tsx b/src/help/Demonstration.test.tsx
index e1e26286..3cdea6fd 100644
--- a/src/help/Demonstration.test.tsx
+++ b/src/help/Demonstration.test.tsx
@@ -6,7 +6,7 @@ import { demonstration, type DemonstrationKind } from "./demonstrations";
let reduced = false;
let mediaChange: (() => void) | undefined;
const advance = (ms = 3050) => act(() => { vi.advanceTimersByTime(ms); });
-const open = (title: string) => fireEvent.click(screen.getByRole("button", { name: `Show demonstration: ${title}` }));
+const open = (title: string) => fireEvent.click(screen.getByRole("button", { name: `Show me how: ${title}` }));
const caption = () => document.querySelector(".teaching-caption")!.textContent;
beforeEach(() => {
@@ -39,7 +39,7 @@ describe("teaching demonstrations", () => {
expect(vi.getTimerCount()).toBe(0);
fireEvent.click(screen.getByRole("button", { name: "Replay Learn a switch key" }));
expect(caption()).toMatch(/^1 \/ 3/);
- fireEvent.click(screen.getByRole("button", { name: "Hide demonstration: Learn a switch key" }));
+ fireEvent.click(screen.getByRole("button", { name: "Hide: Learn a switch key" }));
expect(document.querySelector("svg")).toBeNull();
expect(vi.getTimerCount()).toBe(0);
});
@@ -51,7 +51,7 @@ describe("teaching demonstrations", () => {
expect(vi.getTimerCount()).toBe(0);
expect(screen.queryByRole("button", { name: /^Pause/ })).toBeNull();
for (let i = 0; i < 4; i++) fireEvent.click(screen.getByRole("button", { name: /Next illustration/ }));
- expect(caption()).toContain("Release to execute");
+ expect(caption()).toContain("Release to run it.");
expect(screen.getByRole("button", { name: /Next illustration/ })).toBeDisabled();
act(() => { reduced = false; mediaChange?.(); });
fireEvent.click(screen.getByRole("button", { name: /Replay/ }));
@@ -98,7 +98,7 @@ describe("teaching demonstrations", () => {
it("keeps SVG definition IDs unique when the same artwork appears twice", () => {
render(<>
{kind === "grid" || kind === "line" || kind === "hold" ?
- {step + 1} / {steps.length}: {steps[step]}
+{step + 1} / {steps.length}: {captions[step]}
- {!reduced && <>}
- {reduced && <>}
+ {!reduced && <>}
+ {reduced && <>}
{reduced && Reduced motion: use the buttons to view each still illustration.
} -- {steps.map((text, index) =>
- {text} )}
- {steps.map((text, index) =>
- {text} )}
-
+
{open &&
;
}
diff --git a/src/help/demonstrations.css b/src/help/demonstrations.css
index 34211840..f1b309bf 100644
--- a/src/help/demonstrations.css
+++ b/src/help/demonstrations.css
@@ -1,3 +1,4 @@
+@layer components {
.teaching-disclosure { margin: 12px 0; }
.teaching-disclosure > button { text-align: left; white-space: normal; }
.teaching-demo { margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); max-width: 760px; }
@@ -8,9 +9,11 @@
.teaching-art svg text[fill="#fff"] { fill: #fff; }
.teaching-art svg g, .teaching-art svg circle, .teaching-art svg rect { transition: transform 500ms ease, opacity 500ms ease, cy 500ms ease, cx 500ms ease, fill 500ms ease; }
.teaching-caption { line-height: 1.5; }
-.teaching-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
-.teaching-steps { padding-left: 24px; font-size: 13px; line-height: 1.6; }
+.teaching-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
+.teaching-steps { padding-left: 24px; font-size: 16px; line-height: 1.6; }
.teaching-steps li { margin: 8px 0; }
.teaching-steps li[aria-current="step"] { font-weight: 600; }
.teaching-demo[data-moving="false"] svg *, .teaching-demo[data-reduced="true"] svg * { transition: none; }
@media (prefers-reduced-motion: reduce) { .teaching-art svg * { transition: none; } }
+
+}
diff --git a/src/help/demonstrations.ts b/src/help/demonstrations.ts
index ae7ab1de..7965aae0 100644
--- a/src/help/demonstrations.ts
+++ b/src/help/demonstrations.ts
@@ -15,5 +15,17 @@ export function demonstration(kind: DemonstrationKind, platform: DemoPlatform) {
pair: { title: "Pair a mobile device", steps: ["Open Switchify on your mobile device and choose this computer while it is advertising.", "Compare the six-digit codes in both apps. These are example codes, not a live pairing request.", "Approve on this computer only if the codes match. If they differ or you did not request pairing, reject the request.", "A successful pairing trusts the mobile device. Check the real connection status in the app."] },
startup: { title: "Understand startup behavior", steps: ["Start with system is optional. Choose whether Switchify should launch when you sign in.", `When enabled, Switchify starts quietly in the ${location}.`, `Open Switchify from the ${location} when you need its window. Start manually means opening the app yourself.`] },
};
- return examples[kind];
+ const captions: Record
- {
e.stopPropagation();
@@ -78,7 +79,7 @@ export function SwitchPractice({ disabled = false }: { disabled?: boolean }) {
, document.body)}
;
}
diff --git a/src/settings/CursorSection.tsx b/src/settings/CursorSection.tsx
index 3d7f5708..6270c99f 100644
--- a/src/settings/CursorSection.tsx
+++ b/src/settings/CursorSection.tsx
@@ -1,3 +1,4 @@
+import { Input } from "../ui/controls";
import type { AppSettings } from "../types";
import {
OptionGroup, SettingGroup, Toggle, overlaySizeOptions, overlayVisibilityOptions,
@@ -10,9 +11,9 @@ export function CursorSection({ settings, update }: { settings: AppSettings; upd
Test your saved switches safely with a simple set of practice blocks. Select starts a scan; Next and Previous move the highlight.
- - +Try your saved switches safely.
+ + {!open && error &&{error}
} {open && createPortal(Highlighted: {highlighted || "None — use Select to start"}
{error &&{error}
} - +
+
update("mouseRepeatEnabled", value)} />
legend="Movement interval" columns="four" disabled={!settings.mouseRepeatEnabled} options={secondsOptions(repeatIntervalOptions)} value={settings.moveRepeatIntervalMs} onChange={(next) => update("moveRepeatIntervalMs", next)} />
@@ -43,12 +51,6 @@ export function PointerSection({ settings, update }: { settings: AppSettings; up
note={{ about: "key repeat", summary: "Held navigation keys repeat, like on a keyboard.", detail: "Applies to the arrow keys, Tab, Backspace, Delete, Page Up, and Page Down." }} />
-
;
}
diff --git a/src/settings/PrivacySection.tsx b/src/settings/PrivacySection.tsx
index 71216857..9bfba8dc 100644
--- a/src/settings/PrivacySection.tsx
+++ b/src/settings/PrivacySection.tsx
@@ -1,6 +1,7 @@
+import { Button } from "../ui/controls";
import type { AppSettings, AppState } from "../types";
import { SettingGroup, Toggle, type SettingsUpdate } from "./controls";
export function PrivacySection({ state, settings, update, chooseTelemetry, busy }: { state: AppState; settings: AppSettings; update: SettingsUpdate; chooseTelemetry: (enabled: boolean) => void; busy: boolean }) {
- return update("shareDiagnostics", value)} />{state.telemetry.consent === "undecided" && } update("shareDiagnostics", value)} />{state.telemetry.consent === "undecided" && }
{remote ? (
) : (
+ update("dwellClickEnabled", value)} />
+
+
+ legend="Wait before clicking" columns="five" disabled={!settings.dwellClickEnabled} options={secondsOptions(dwellDelayOptions)} value={settings.dwellClickDelayMs} onChange={(next) => update("dwellClickDelayMs", next)}
+ note={{ summary: "After mobile pointer movement stops, a countdown appears and performs one left click. Move again to rearm it." }} />
+
+
- update("dwellClickEnabled", value)} />
-
+
- legend="Dwell delay" columns="five" disabled={!settings.dwellClickEnabled} options={secondsOptions(dwellDelayOptions)} value={settings.dwellClickDelayMs} onChange={(next) => update("dwellClickDelayMs", next)}
- note={{ summary: "After mobile pointer movement stops, a countdown appears and performs one left click. Move again to rearm it." }} />
-
- {state.telemetry.available ? state.telemetry.consent === "undecided" ? "No choice recorded yet. Nothing is sent unless you choose Share diagnostics." : state.telemetry.consent === "enabled" ? "Consent recorded. You can turn this off at any time to delete queued reports." : "Opted out. No diagnostic reports are stored or sent." : "Diagnostic reporting is unavailable in this build."} Privacy policy
{state.telemetry.available ? state.telemetry.consent === "undecided" ? "No choice recorded yet. Nothing is sent unless you choose Share diagnostics." : state.telemetry.consent === "enabled" ? "Consent recorded. You can turn this off at any time to delete queued reports." : "Opted out. No diagnostic reports are stored or sent." : "Diagnostic reporting is unavailable in this build."} Privacy policy
{area !== 'shared' &&
;
};
return {custom ? 'Custom' : 'Default'}
- {custom && }
+ {custom && }
}
{children(disabled)}
- {area === 'shared' &&
- }
- {area === 'shared' ?
-
+ {area === 'shared' ?
+
}
- {area === 'point' && <>
+ {(area === 'point' || area === 'shared') && <>
- legend="Mode"
+ legend="Method"
disabled={disabled}
value={config.mode}
onChange={(value) => update("mode", value)}
@@ -105,7 +92,7 @@ export function ScannerPreferences({ controller }: { controller: ScanningControl
<>
)}
-
+
update("autoSelectEnabled", value)} />
{config.autoSelectEnabled && }
-
+
}
{area === 'keyboard' &&
update('wordPrediction', value)} />
}
-
+
{field('automatic', 'Automatic scanning', locked => change('automatic', value)} />)}
{area === 'keyboard' && legend="After typing" disabled={disabled || !effective.automatic} value={config.keyboardWaitAfterTyping ? 'wait' : 'continue'}
options={[{ value: 'continue', label: 'Continue scanning' }, { value: 'wait', label: 'Wait for Select' }]}
@@ -145,28 +132,45 @@ export function ScannerPreferences({ controller }: { controller: ScanningControl
note={{ summary: effective.automatic ? 'After typing a key or suggestion, wait for Select before scanning again.' : 'Used in automatic keyboard scanning. Your choice is kept while scanning manually.' }} />}
{field('intervalMs', 'Auto scan rate', locked => <>
+
{field('direction', 'Initial direction', locked => legend="Initial direction" disabled={locked} value={effective.direction} options={[{ value: 'forward', label: 'Forward' }, { value: 'reverse', label: 'Reverse' }]} onChange={value => change('direction', value)} />)}
{field('passLimit', 'Pass limit', locked => legend="Pass limit" disabled={locked} value={effective.passLimit} options={[1, 2, 3, 5, 0].map(value => ({ value, label: value ? `${value} ${value === 1 ? 'pass' : 'passes'}` : 'Unlimited' }))} onChange={value => change('passLimit', value)}
note={{ summary: 'After this many automatic passes, scanning waits for Select. Unlimited keeps scanning until you pause or stop.' }} />)}
{area !== 'point' && field('pattern', 'Item scanning', locked => legend="Item scanning" disabled={locked} value={effective.pattern} options={[{ value: 'grouped', label: 'Groups, then items' }, { value: 'linear', label: 'One item at a time' }]} onChange={value => change('pattern', value)}
note={{ summary: 'Grouped scanning chooses a row or group before an item. Linear scanning visits each item directly. Point scanning uses its own line and grid modes.' }} />)}
-
+
{field('color', 'Scanner colour', locked => )}
{field('thickness', 'Highlight thickness', locked => legend="Highlight thickness" disabled={locked} value={effective.thickness} options={(['thin', 'standard', 'thick'] as const).map(value => ({ value, label: value[0].toUpperCase() + value.slice(1) }))} onChange={value => change('thickness', value)} />)}
- {area !== 'shared' && }
-
+ }
+
+ {area !== 'shared' && }
+
;
}
diff --git a/src/settings/ScanningSection.tsx b/src/settings/ScanningSection.tsx
index 686953d0..740bcb67 100644
--- a/src/settings/ScanningSection.tsx
+++ b/src/settings/ScanningSection.tsx
@@ -1,3 +1,4 @@
+import { Button } from "../ui/controls";
import { Demonstration } from "../help/Demonstration";
import { type ScanningController, validSwitches } from "../scanning/useScanning";
import { ScannerPreferences } from "./ScannerPreferences";
@@ -25,11 +26,12 @@ export function ScanningSection({ controller }: { controller: ScanningController
return Customise an area
Give an area different settings, or keep using your defaults.
{(['point', 'menu', 'keyboard'] as const).map(key => {
- const options = areaOptions(config, key);
- const count = Object.entries(settings[key]).filter(([name, value]) => value != null && !(key === 'point' && name === 'pattern')).length;
- return ;
- })}
- Shared defaults
Start here. Each scanning area follows these settings unless you customise it.
Scanning
{names[area]}
Change any value to customise it. Other settings keep following your defaults.
Auto scan rate
-
-
+
-
+
{effective.automatic ? 'Time each row or item stays highlighted. Lower values scan faster. Line speed is separate.' : 'Used in automatic scanning. Your rate is kept while scanning manually.'}
+{effective.automatic ? 'Seconds per highlight. Less time means faster scanning.' : 'Used in automatic scanning. Your rate is kept while scanning manually.'}
)} +
Selected area
Changes save automatically, cancel the current scan and wait for Select.
+ {area === 'shared' &&Customise an area
Give an area different settings, or keep using your defaults.
{(['point', 'menu', 'keyboard'] as const).map(key => {
+ const options = areaOptions(config, key);
+ const count = Object.entries(settings[key]).filter(([name, value]) => value != null && !(key === 'point' && name === 'pattern')).length;
+ return ;
+ })}
+ Saved automatically. Press Select to scan again.
{state?.enabled ? `${state.paused ? "Paused. " : ""}${phases[state.phase]}.` : (state?.message ?? "Loading point scan...")}
-{pending ? "Saving scanning settings..." : unsaved ? "Scanning settings have unsaved changes." : "Scanning settings save automatically."}
+{pending ? "Saving scanning settings..." : unsaved ? "Scanning settings have unsaved changes." : "Saved automatically."}
{error &&{error}
} - {error && unsaved && } + {error && unsaved && } {!validSwitches(config) &&Each switch action needs a different key. Escape is reserved for cancel.
}How scanning works
Focus the application you want to use, then press Select to scan the display under the pointer. Choose a point, then use the action menu for clicks, scrolling and dragging.
Assign switch actions in the Switches page. Actions run on release; holding a switch freezes movement. Manual scanning needs Select, Next and Previous. After clicking or reaching the pass limit, use Select to start again.
@@ -37,6 +39,5 @@ export function ScanningSection({ controller }: { controller: ScanningControllerOn Windows, assigned keys remain switches with Shift, Ctrl, Alt or Windows held, even in the background. Other keys and Switchify-generated shortcuts still work normally.
Key
-
-
);
@@ -346,9 +347,9 @@ function CaptureDialog({ name, onCancel }: { name: string; onCancel: () => void
press is learned. Press Escape to cancel, or click Cancel capture with
the mouse.
-
{title}
{error} Your switch is still available. Try again or keep it.
} - +