"use client";
/* The ink "Now counting" panel (mockup .panel): garment ยท size, Counted / Expected / Gap, the
* Hands-free switch, and the inline "Type a count" field when it is open. The same pieces are the
* figure and control of the live camera overlay when hands-free falls back to it. */
import { useEffect, useRef, useState } from "react";
import { GROUND, INK, MFigRow, MKick, MSwitchRow } from "@/components/m";
import { signed } from "@/components/m/count/lines";
const OFF_GREY_TEXT = "#b5b1af"; // mockup .panel .kick
export function CountFigures({ name, counted, expected }: { name: string; counted: number; expected: number }) {
const d = counted - expected;
return (
<>
Now counting
{name}
);
}
export function HandsFree({ on, onToggle, disabled }: { on: boolean; onToggle: () => void; disabled?: boolean }) {
return ;
}
/** Inline count field: Enter or Set applies it. Keyed by the caller on the line, so it never shows
* the previous line's figure under the new line's name. */
export function TypeCount({ name, value, onSet }: { name: string; value: number; onSet: (n: number) => void }) {
const [v, setV] = useState(String(value));
const ref = useRef(null);
useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
const set = () => { const n = parseInt(v, 10); if (Number.isFinite(n) && n >= 0) onSet(n); };
return (
);
}
/** The panel as it sits at the top of the counting body (bleeds over MBody pad). */
export function CountPanel({ children }: { children: React.ReactNode }) {
return {children};
}