"use client"; import { useId, useState } from "react"; /** One sharing scope, rendered as a real switch. Toggling it redacts/reveals every token tagged with its `id`. */ export interface LampBlackScope { id: string; /** Visible + accessible label for the switch, e.g. "Location". */ label: string; /** Optional one-line clarifier under the label. */ hint?: string; /** Whether this scope is shared (visible) at mount. Defaults to true. */ defaultShared?: boolean; } /** A redactable span of the record — literal text tied to a scope. */ export interface LampBlackToken { /** Literal text of this token exactly as it appears in the record. */ text: string; /** Which scope's switch controls this token. Must match a `LampBlackScope.id`. */ scope: string; /** Short noun used in the a11y string "[withheld: kind]" — defaults to `scope`. */ kind?: string; } /** A part of the templated sentence: plain connective text, or a token tied to a scope. */ export type LampBlackPart = string | LampBlackToken; export interface LampBlackProps { /** The switches — one per sharing scope. */ scopes: LampBlackScope[]; /** The sentence, templated as an ordered list of literal text and scope-tagged tokens. */ record: LampBlackPart[]; /** extra classes merged onto the rendered root element */ className?: string; } const SWEEP_MS = 260; const STAGGER_MS = 40; function isToken(part: LampBlackPart): part is LampBlackToken { return typeof part !== "string"; } // Deterministic +/-0.3deg per bar so the strokes don't all sit dead-level — a // hand-laid feel, not randomness that would differ mount to mount. function rotationFor(text: string, groupIndex: number): number { const sign = (text.length + groupIndex) % 2 === 0 ? 1 : -1; return sign * 0.3; } /** * A consent surface that shows instead of tells: a live sentence built from * the user's own record, where each sharing scope is a real switch and * toggling one sweeps a felt-pen redaction bar over exactly the tokens that * scope withholds. The bar is the consent document. */ export function LampBlack({ scopes, record, className = "" }: LampBlackProps) { const [shared, setShared] = useState>(() => Object.fromEntries(scopes.map((s) => [s.id, s.defaultShared ?? true])), ); const uid = useId(); const toggle = (id: string) => { setShared((prev) => ({ ...prev, [id]: !prev[id] })); }; // per-scope running counts, for the 40ms group stagger const groupCounts: Record = {}; const sharedLabels = scopes.filter((s) => shared[s.id]).map((s) => s.label); const withheldLabels = scopes.filter((s) => !shared[s.id]).map((s) => s.label); const summary = withheldLabels.length === 0 ? `Sharing everything below: ${sharedLabels.join(", ")}.` : sharedLabels.length === 0 ? `Withholding everything below: ${withheldLabels.join(", ")}.` : `Sharing ${sharedLabels.join(", ")}. Withholding ${withheldLabels.join(", ")}.`; return (

DATA SHARING PREVIEW

{record.map((part, i) => { if (!isToken(part)) { return {part}; } const groupIndex = groupCounts[part.scope] ?? 0; groupCounts[part.scope] = groupIndex + 1; const withheld = !shared[part.scope]; const kind = part.kind ?? part.scope; const delayMs = groupIndex * STAGGER_MS; const rot = rotationFor(part.text, groupIndex); return ( {part.text} {withheld && {`[withheld: ${kind}]`}} ); })}

{scopes.map((scope) => { const labelId = `${uid}-${scope.id}-label`; const on = shared[scope.id]; return (

{scope.label}

{scope.hint &&

{scope.hint}

}

); })}

{summary}

); }