@supersuit/suggest-a-change 0.2.4 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.5 (2026-10-26)
+
+- **A tap on the microphone records.** `DefaultField` was hold-only: on a tap the release ended the take before the microphone had answered, so nothing was recorded and nothing said to hold (seen on iPhone Safari). Now a press shorter than 350 ms starts a take that keeps recording until the next tap (or the time limit), and a longer press records until it is let go. Leaving the button, or a pointer the browser cancels (iOS Safari does when its permission prompt appears), never ends a tapped take. `startTake` is still called synchronously inside the press, with nothing awaited before it. While recording the dot turns to a stop square and pulses (under `prefers-reduced-motion: no-preference`).
+- **The microphone sits inside its text box.** Bottom right of a text area, centred at the right of a one-line input, a 44px target, with the box's padding keeping text clear of it (`.sac-voice-box`, `.sac-voice-multi`, `.sac-voice-single`). The `[data-voice-field]` / `[data-voice-control]` contract is unchanged.
+- **Words.** `holdToTalk` now defaults to "Tap to talk", `stopTalking` to "Tap to stop", and the placeholders say "tap the microphone and say it". The keys keep their names.
+
 ## 0.2.4 (2026-10-26)
 
 - **The list of what a suggestion carries is folded by default.** With a destination, the sheet above Send says one line, "Files an issue on <repo> (private)" or, in `--sac-danger` and never folded, "(public: anyone can read it)", then a toggle "What it carries (N)" counting what will go (the always rows plus each ticked one). Tapping it opens the full list with its tick boxes, reasons and account line; unticking inside still leaves an item out and lowers the count. Without a destination the tick boxes fold under the one line as "Also shared (N)". The toggle is a `<button aria-expanded aria-controls>` with a 44px target (`.sac-fold`); the app's `destinationNote` stays visible outside the fold. New replaceable words: `filesOn`, `privateShort`, `publicShort`, `carriesToggle`, `alsoSharedToggle`, `carriesLead`. `destinationWords` is unchanged. Earned by the operator's read of the open list on a phone: "it's a little bit disturbing with all the checkboxes shown."

package/README.md

@@ -52,7 +52,7 @@ const adapters: Adapters = {
 
 `SuggestEntry` also takes `className` and `role` (for example `role="menuitem"` when a host shows it as a menu row); no role is set by default. My suggestions and the detail view keep their last answer from the app on the phone (module-owned IndexedDB, keyed by app and account like a draft), draw it at once with a quiet "Updating" line, and replace it when the app answers; if the app cannot be reached they keep the saved rows and say so. An adapter tells a refusal from an unreachable app: `mine()` and `one()` throw an error with `refused: true` or a `status` of 401, 403 or 404 for a refusal (the saved copy is then deleted), and anything else thrown is unreachable. Saved reports the list no longer holds are pruned, and signing out clears them. A first open with nothing saved shows "Loading".
 
-The entry also keeps the phone's outbox moving while it is mounted (a report sent with the Mac away goes when it is back, with the sheet closed); a host with no always-mounted entry renders `<KeepSending adapters={adapters} />` once, high in the app. The entry carries `data-suggest-entry` (the attribute the screen check looks for; see "The check" below). Signed out, it opens nothing and says why. The receipt says "Got it" only after the adapter has answered `done` for the report and every attachment; until then it says the report is on the phone. Every text field the module renders sits in a `[data-voice-field]` container with a `[data-voice-control]`; a host's `Field` slot must keep that shape (it receives `FieldProps`, which is the Helm's voice field props). A voice note alone is a whole report: the recording is kept and uploaded as a part, and the receiving Mac writes the transcript.
+The entry also keeps the phone's outbox moving while it is mounted (a report sent with the Mac away goes when it is back, with the sheet closed); a host with no always-mounted entry renders `<KeepSending adapters={adapters} />` once, high in the app. The entry carries `data-suggest-entry` (the attribute the screen check looks for; see "The check" below). Signed out, it opens nothing and says why. The receipt says "Got it" only after the adapter has answered `done` for the report and every attachment; until then it says the report is on the phone. Every text field the module renders sits in a `[data-voice-field]` container with a `[data-voice-control]`; a host's `Field` slot must keep that shape (it receives `FieldProps`, which is the Helm's voice field props). A voice note alone is a whole report: the recording is kept and uploaded as a part, and the receiving Mac writes the transcript. `DefaultField` puts its microphone inside the text box (bottom right of a text area, centred at the right of a one-line input, a 44px target, with the text kept clear of it). A tap starts a take that records until the next tap or the time limit; a press held past a tap records until it is let go; leaving the button or a pointer the browser cancels (iOS Safari's microphone prompt) never ends a tapped take. The recorder is asked inside the press with nothing awaited first, so iOS Safari counts the microphone request as part of the gesture. A host's own `Field` should follow the same two rules.
 
 Styling: structure only, class names prefixed `sac-`. `@supersuit/suggest-a-change/styles.css` is optional defaults (16px inputs so iOS does not zoom, 44px touch targets, safe-area padding on the sheet). Re-skin it with these custom properties:
 

package/dist/client/default-field.js

@@ -1,17 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// THE MODULE'S OWN VOICE FIELD, for hosted apps that have no golden one. A text area with a hold-to-talk
-// button beside it, in one [data-voice-field] container with nothing else typeable in it. A take is
+// THE MODULE'S OWN VOICE FIELD, for hosted apps that have no golden one. A text area with its microphone
+// INSIDE the box (bottom right; centred at the right of a one-line input), in one [data-voice-field]
+// container with nothing else typeable in it. A take is
 // recorded with the module's recorder (written to the phone's database as it is made). Transcription is
 // not done here: the take goes to `upload`, and the receiving Mac writes the transcript. A voice note
 // alone is a whole report, so a field with no words and one take is a complete answer.
 //
-// Holding the button records; letting go (or leaving it) stops. For anyone who cannot hold, Space or
-// Enter on the focused button starts a take and again stops it.
+// A tap starts a take that keeps recording until the next tap (or the time limit); a press held longer
+// than a tap records until it is let go, as hold-to-talk always did. Leaving the button, or a pointer the
+// browser cancels (iOS Safari does when its microphone prompt appears), never ends a tapped take. The
+// recorder is asked synchronously inside the press, with nothing awaited first, so iOS Safari treats the
+// microphone request as part of the gesture. Space or Enter on the focused button starts and stops a take.
+// (The operator, 2026-10-26: a tap on the hold-only button did nothing, because the release ended the take
+// before the microphone had answered.)
 import { useEffect, useRef, useState } from 'react';
 import { startTake as defaultStartTake } from './recorder.js';
 import { toast } from './toast.js';
 import { DEFAULT_STRINGS } from './words.js';
+/** A press shorter than this is a tap: it starts a take that a second tap stops. */
+const TAP_MS = 350;
 export function DefaultField(props) {
     const { rt, id, label, value, onChange, placeholder, multiline = false, type = 'text', upload, onHeard, onKept, onHearing, disabled, startTake = defaultStartTake, maxMs, labels, scope } = props;
     const L = labels ?? DEFAULT_STRINGS;
@@ -21,6 +29,8 @@ export function DefaultField(props) {
     const take = useRef(null);
     const wanted = useRef(false);
     const timer = useRef(null);
+    // The press in progress that started a take: when it began. Null between presses, and for a press that stopped one.
+    const press = useRef(null);
     const latest = useRef(value);
     latest.current = value;
     const cb = useRef({ onChange, upload, onHeard, onKept, onHearing });
@@ -85,8 +95,32 @@ export function DefaultField(props) {
     }
     useEffect(() => () => { wanted.current = false; if (timer.current)
         clearTimeout(timer.current); void take.current?.cancel(); }, []);
-    const control = (_jsx("button", { type: "button", "data-voice-control": "", className: "sac-record", "aria-pressed": recording, "aria-label": canRecord ? `${recording ? L.stopTalking : L.holdToTalk}: ${label}` : `${L.voiceUnavailable}: ${label}`, disabled: disabled || !canRecord, onPointerDown: (e) => { e.preventDefault(); void begin(); }, onPointerUp: () => void end(), onPointerLeave: () => { if (wanted.current)
-            void end(); }, onPointerCancel: () => void end(), onContextMenu: (e) => e.preventDefault(), onKeyDown: (e) => {
+    const control = (_jsx("button", { type: "button", "data-voice-control": "", className: "sac-record", "aria-pressed": recording, "aria-label": canRecord ? `${recording ? L.stopTalking : L.holdToTalk}: ${label}` : `${L.voiceUnavailable}: ${label}`, disabled: disabled || !canRecord, onPointerDown: (e) => {
+            e.preventDefault();
+            // A take already going (a tapped one): this press stops it.
+            if (take.current || wanted.current) {
+                press.current = null;
+                void end();
+                return;
+            }
+            press.current = Date.now();
+            void begin(); // startTake is called before begin's first await: still inside the gesture
+        }, onPointerUp: () => {
+            const at = press.current;
+            press.current = null;
+            // A tap keeps recording until the next tap; a hold stops on release.
+            if (at !== null && Date.now() - at >= TAP_MS)
+                void end();
+        }, onPointerLeave: () => {
+            // Sliding off a held press stops it, as hold-to-talk did; a tapped take, or one still starting, goes on.
+            const at = press.current;
+            press.current = null;
+            if (at !== null && take.current && Date.now() - at >= TAP_MS)
+                void end();
+        }, onPointerCancel: () => {
+            // The browser took the pointer (a permission prompt, a scroll): the take carries on as a tapped one.
+            press.current = null;
+        }, onContextMenu: (e) => e.preventDefault(), onKeyDown: (e) => {
             if (e.key !== ' ' && e.key !== 'Enter')
                 return;
             e.preventDefault();
@@ -95,5 +129,5 @@ export function DefaultField(props) {
             void (take.current || wanted.current ? end() : begin());
         }, children: _jsx("span", { "aria-hidden": "true", className: "sac-record-dot" }) }));
     const shared = { id: `sac-field-${id}`, value, placeholder, disabled, className: 'sac-input', onChange: (e) => onChange(e.target.value) };
-    return (_jsxs("div", { "data-voice-field": "", className: "sac-voice", "data-recording": recording ? '' : undefined, children: [control, _jsx("label", { htmlFor: `sac-field-${id}`, className: "sac-sr", children: label }), multiline ? _jsx("textarea", { rows: 3, ...shared }) : _jsx("input", { type: type, ...shared })] }));
+    return (_jsxs("div", { "data-voice-field": "", className: "sac-voice", "data-recording": recording ? '' : undefined, children: [_jsx("label", { htmlFor: `sac-field-${id}`, className: "sac-sr", children: label }), _jsxs("div", { className: `sac-voice-box ${multiline ? 'sac-voice-multi' : 'sac-voice-single'}`, children: [multiline ? _jsx("textarea", { rows: 3, ...shared }) : _jsx("input", { type: type, ...shared }), control] })] }));
 }

package/dist/client/words.d.ts

@@ -57,6 +57,7 @@ export interface Strings {
     mineTitle: string;
     mineEmpty: string;
     back: string;
+    /** The microphone's name while idle. The key keeps its old name; a tap starts it, and holding works too. */
     holdToTalk: string;
     stopTalking: string;
     micDenied: string;

package/dist/client/words.js

@@ -20,9 +20,9 @@ export const DEFAULT_STRINGS = {
     optional: 'optional',
     sayItLegend: 'Say it',
     sayItLabel: 'Your suggestion',
-    sayItPlaceholder: 'What would you change? Type it, or hold the microphone and say it',
-    sayItPlaceholderBroken: 'What happened, what you expected, and how to make it happen again. Type it, or hold the microphone and say it',
-    sayItPlaceholderFeedback: 'Whatever is on your mind. Type it, or hold the microphone and say it',
+    sayItPlaceholder: 'What would you change? Type it, or tap the microphone and say it',
+    sayItPlaceholderBroken: 'What happened, what you expected, and how to make it happen again. Type it, or tap the microphone and say it',
+    sayItPlaceholderFeedback: 'Whatever is on your mind. Type it, or tap the microphone and say it',
     showItLegend: 'Show it',
     addImages: 'Add a screenshot or photo',
     addVideo: 'Add a short video',
@@ -51,8 +51,8 @@ export const DEFAULT_STRINGS = {
     mineTitle: 'My suggestions',
     mineEmpty: 'You have not sent a suggestion yet.',
     back: 'Back',
-    holdToTalk: 'Hold to talk',
-    stopTalking: 'Stop and keep the recording',
+    holdToTalk: 'Tap to talk',
+    stopTalking: 'Tap to stop',
     micDenied: 'The microphone could not be used. You can type it instead.',
     voiceUnavailable: 'Voice notes cannot be added here',
     loading: 'Loading',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/suggest-a-change",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "The report format and flow behind a Suggest a change button: what a report is, who acts at each step, the screens, and the check every app runs. The contract has zero dependencies.",
   "type": "module",
   "bin": {

package/src/client/default-field.tsx

@@ -1,12 +1,18 @@
 'use client'
-// THE MODULE'S OWN VOICE FIELD, for hosted apps that have no golden one. A text area with a hold-to-talk
-// button beside it, in one [data-voice-field] container with nothing else typeable in it. A take is
+// THE MODULE'S OWN VOICE FIELD, for hosted apps that have no golden one. A text area with its microphone
+// INSIDE the box (bottom right; centred at the right of a one-line input), in one [data-voice-field]
+// container with nothing else typeable in it. A take is
 // recorded with the module's recorder (written to the phone's database as it is made). Transcription is
 // not done here: the take goes to `upload`, and the receiving Mac writes the transcript. A voice note
 // alone is a whole report, so a field with no words and one take is a complete answer.
 //
-// Holding the button records; letting go (or leaving it) stops. For anyone who cannot hold, Space or
-// Enter on the focused button starts a take and again stops it.
+// A tap starts a take that keeps recording until the next tap (or the time limit); a press held longer
+// than a tap records until it is let go, as hold-to-talk always did. Leaving the button, or a pointer the
+// browser cancels (iOS Safari does when its microphone prompt appears), never ends a tapped take. The
+// recorder is asked synchronously inside the press, with nothing awaited first, so iOS Safari treats the
+// microphone request as part of the gesture. Space or Enter on the focused button starts and stops a take.
+// (The operator, 2026-10-26: a tap on the hold-only button did nothing, because the release ended the take
+// before the microphone had answered.)
 import { useEffect, useRef, useState } from 'react'
 import type { FieldProps } from './adapters.ts'
 import { startTake as defaultStartTake } from './recorder.ts'
@@ -15,6 +21,8 @@ import { DEFAULT_STRINGS } from './words.ts'
 
 
 type Take = Awaited<ReturnType<typeof defaultStartTake>>
+/** A press shorter than this is a tap: it starts a take that a second tap stops. */
+const TAP_MS = 350
 
 export function DefaultField(props: FieldProps) {
   const { rt, id, label, value, onChange, placeholder, multiline = false, type = 'text', upload, onHeard, onKept, onHearing, disabled, startTake = defaultStartTake, maxMs, labels, scope } = props
@@ -25,6 +33,8 @@ export function DefaultField(props: FieldProps) {
   const take = useRef<Take | null>(null)
   const wanted = useRef(false)
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // The press in progress that started a take: when it began. Null between presses, and for a press that stopped one.
+  const press = useRef<number | null>(null)
   const latest = useRef(value)
   latest.current = value
   const cb = useRef({ onChange, upload, onHeard, onKept, onHearing })
@@ -75,10 +85,29 @@ export function DefaultField(props: FieldProps) {
       aria-pressed={recording}
       aria-label={canRecord ? `${recording ? L.stopTalking : L.holdToTalk}: ${label}` : `${L.voiceUnavailable}: ${label}`}
       disabled={disabled || !canRecord}
-      onPointerDown={(e) => { e.preventDefault(); void begin() }}
-      onPointerUp={() => void end()}
-      onPointerLeave={() => { if (wanted.current) void end() }}
-      onPointerCancel={() => void end()}
+      onPointerDown={(e) => {
+        e.preventDefault()
+        // A take already going (a tapped one): this press stops it.
+        if (take.current || wanted.current) { press.current = null; void end(); return }
+        press.current = Date.now()
+        void begin() // startTake is called before begin's first await: still inside the gesture
+      }}
+      onPointerUp={() => {
+        const at = press.current
+        press.current = null
+        // A tap keeps recording until the next tap; a hold stops on release.
+        if (at !== null && Date.now() - at >= TAP_MS) void end()
+      }}
+      onPointerLeave={() => {
+        // Sliding off a held press stops it, as hold-to-talk did; a tapped take, or one still starting, goes on.
+        const at = press.current
+        press.current = null
+        if (at !== null && take.current && Date.now() - at >= TAP_MS) void end()
+      }}
+      onPointerCancel={() => {
+        // The browser took the pointer (a permission prompt, a scroll): the take carries on as a tapped one.
+        press.current = null
+      }}
       onContextMenu={(e) => e.preventDefault()}
       onKeyDown={(e) => {
         if (e.key !== ' ' && e.key !== 'Enter') return
@@ -93,9 +122,11 @@ export function DefaultField(props: FieldProps) {
   const shared = { id: `sac-field-${id}`, value, placeholder, disabled, className: 'sac-input', onChange: (e: { target: { value: string } }) => onChange(e.target.value) }
   return (
     <div data-voice-field="" className="sac-voice" data-recording={recording ? '' : undefined}>
-      {control}
       <label htmlFor={`sac-field-${id}`} className="sac-sr">{label}</label>
-      {multiline ? <textarea rows={3} {...shared} /> : <input type={type} {...shared} />}
+      <div className={`sac-voice-box ${multiline ? 'sac-voice-multi' : 'sac-voice-single'}`}>
+        {multiline ? <textarea rows={3} {...shared} /> : <input type={type} {...shared} />}
+        {control}
+      </div>
     </div>
   )
 }

package/src/client/styles.css

@@ -37,11 +37,22 @@
 .sac-select { font: inherit; font-size: 16px; min-height: 36px; padding: 4px 10px; color: inherit; background: var(--sac-bg); border: 1px solid var(--sac-border); border-radius: var(--sac-radius); }
 /* Saying it is the sheet's biggest thing, whatever field the host puts in it. */
 .sac-sayit textarea { min-height: 9rem; }
-.sac-voice { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
+.sac-voice { min-width: 0; }
 .sac-input, .sac-voice textarea, .sac-voice input { flex: 1; min-width: 0; min-height: 44px; font: inherit; font-size: 16px; color: inherit; background: var(--sac-bg); border: 1px solid var(--sac-border); border-radius: var(--sac-radius); padding: 10px 12px; box-sizing: border-box; }
 .sac-record { flex: none; width: 48px; height: 48px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--sac-border); background: var(--sac-bg); display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
 .sac-record-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--sac-danger); }
 .sac-voice[data-recording] .sac-record { border-color: var(--sac-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sac-danger) 25%, transparent); }
+/* Recording: the dot becomes a stop square, so a tapped take reads as "tap to stop". */
+.sac-voice[data-recording] .sac-record-dot { border-radius: 3px; width: 16px; height: 16px; }
+/* The microphone sits inside its text box: bottom right of a text area, centred at the right of a one-line input.
+   The box keeps its text clear of it. */
+.sac-voice-box { position: relative; display: flex; min-width: 0; }
+.sac-voice-box > textarea, .sac-voice-box > input { padding-right: 60px; }
+.sac-voice-multi > textarea { padding-bottom: 56px; }
+.sac-voice-single > input { min-height: 56px; }
+.sac-voice-box > .sac-record { position: absolute; right: 6px; }
+.sac-voice-multi > .sac-record { bottom: 6px; }
+.sac-voice-single > .sac-record { top: 50%; transform: translateY(-50%); }
 .sac-button, .sac-entry, .sac-row-button { font: inherit; font-size: 16px; min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: var(--sac-radius); border: 1px solid var(--sac-border); background: var(--sac-bg); color: var(--sac-fg); cursor: pointer; }
 .sac-primary { background: var(--sac-accent); color: var(--sac-accent-fg); border-color: var(--sac-accent); }
 .sac-button:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -86,4 +97,5 @@
 .sac-entry-why { margin-left: 8px; color: var(--sac-muted); font-size: 0.9rem; }
 .sac-sheet :focus-visible, .sac-entry:focus-visible, .sac-button:focus-visible, .sac-record:focus-visible, .sac-row-button:focus-visible { outline: 3px solid var(--sac-focus); outline-offset: 2px; }
 @media (min-width: 640px) { .sac-backdrop { align-items: center; } .sac-sheet { border-radius: var(--sac-radius); } }
-@media (prefers-reduced-motion: no-preference) { .sac-voice[data-recording] .sac-record { transition: box-shadow 0.15s; } .sac-fold-mark { transition: transform 0.15s; } }
+@keyframes sac-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sac-danger) 25%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--sac-danger) 10%, transparent); } }
+@media (prefers-reduced-motion: no-preference) { .sac-voice[data-recording] .sac-record { transition: box-shadow 0.15s; animation: sac-pulse 1.4s ease-in-out infinite; } .sac-fold-mark { transition: transform 0.15s; } }

package/src/client/words.ts

@@ -63,6 +63,7 @@ export interface Strings {
   mineTitle: string
   mineEmpty: string
   back: string
+  /** The microphone's name while idle. The key keeps its old name; a tap starts it, and holding works too. */
   holdToTalk: string
   stopTalking: string
   micDenied: string
@@ -143,9 +144,9 @@ export const DEFAULT_STRINGS: Strings = {
   optional: 'optional',
   sayItLegend: 'Say it',
   sayItLabel: 'Your suggestion',
-  sayItPlaceholder: 'What would you change? Type it, or hold the microphone and say it',
-  sayItPlaceholderBroken: 'What happened, what you expected, and how to make it happen again. Type it, or hold the microphone and say it',
-  sayItPlaceholderFeedback: 'Whatever is on your mind. Type it, or hold the microphone and say it',
+  sayItPlaceholder: 'What would you change? Type it, or tap the microphone and say it',
+  sayItPlaceholderBroken: 'What happened, what you expected, and how to make it happen again. Type it, or tap the microphone and say it',
+  sayItPlaceholderFeedback: 'Whatever is on your mind. Type it, or tap the microphone and say it',
   showItLegend: 'Show it',
   addImages: 'Add a screenshot or photo',
   addVideo: 'Add a short video',
@@ -174,8 +175,8 @@ export const DEFAULT_STRINGS: Strings = {
   mineTitle: 'My suggestions',
   mineEmpty: 'You have not sent a suggestion yet.',
   back: 'Back',
-  holdToTalk: 'Hold to talk',
-  stopTalking: 'Stop and keep the recording',
+  holdToTalk: 'Tap to talk',
+  stopTalking: 'Tap to stop',
   micDenied: 'The microphone could not be used. You can type it instead.',
   voiceUnavailable: 'Voice notes cannot be added here',
   loading: 'Loading',