import React, { useMemo } from "react";/** * WeeklyCompassSlim (No-Text Version) * - Visual replica of a vertical "Weekly Compass" card WITHOUT any visible labels. * - Each line is an input (borderless) sitting on a ruled line. * - Blue header bars keep the analog look; text is intentionally omitted. * - Accessible: every input has an aria-label (screen-reader only). * * Tailwind required in the host app. */export type WeeklyCompassData = {  date?: string;  self?: [string, string, string]; // 3 lines (e.g., body/social/mind) but unlabeled visually  pairs?: [string, string][]; // action/feedback pairs, each as two lines};export type WeeklyCompassSlimProps = {  value: WeeklyCompassData;  onChange: (next: WeeklyCompassData) => void;  /** number of action/feedback pairs (default 6) */  pairs?: number;  /** card width (tailwind class), default "w-[320px] md:w-[360px]" */  widthClass?: string;  /** optional className for outer wrapper */  className?: string;};const BlueBar: React.FC<{ height?: string }>=({ height = "h-8" })=> (  );const RuleInput: React.FC<{  value?: string;  onChange?: (v: string) => void;  ariaLabel: string;  className?: string;}> = ({ value, onChange, ariaLabel, className }) => (       onChange?.(e.target.value)}      className={        "peer block w-full bg-transparent px-3 pt-2 text-[13px] leading-6 outline-none " +        "text-slate-900 placeholder:opacity-50 dark:text-slate-100"      }      placeholder=""    />    {/* Ruled line */}      );const Spacer: React.FC<{ h?: number }> = ({ h = 8 }) => (  );export default function WeeklyCompassSlim({  value,  onChange,  pairs = 6,  widthClass = "w-[320px] md:w-[360px]",  className,}: WeeklyCompassSlimProps) {  const selfLines = useMemo(() => value.self ?? ["", "", ""], [value.self]);  const abPairs = useMemo(    () => {      const raw = value.pairs ?? [];      const next: [string, string][] = [];      for (let i = 0; i < pairs; i++) {        next.push(raw[i] ?? ["", ""]);      }      return next;    },    [value.pairs, pairs]  );  const setDate = (v: string) => onChange({ ...value, date: v });  const setSelf = (idx: number, v: string) => {    const next = [...selfLines] as [string, string, string];    next[idx] = v;    onChange({ ...value, self: next });  };  const setPair = (idx: number, lineIdx: 0  1, v: string) => {    const next = abPairs.map((p) => [...p]) as [string, string][];    next[idx][lineIdx] = v;    onChange({ ...value, pairs: next });  };  return (          {/* Top blue bar (title area, no text) */}            {/* Date line */}                          {/* Section blue bar (category header, no text) */}            {/* Three self lines (no visible labels) */}              setSelf(0,v)} />        setSelf(1,v)} className="mt-2" />        setSelf(2,v)} className="mt-2" />            {/* Repeating Action/Feedback pairs */}      {abPairs.map((pair, i) => (                  {/* Thin divider between blocks */}                                 setPair(i, 0, v)}            />             setPair(i, 1, v)}              className="mt-2"            />                        ))}            );}/** * Usage example: * * ["",""]) }} *   onChange={(next)=> setState(next)} *   pairs={6} * /> */