슬라이더를 포기한 값

// THE SEAM THAT WAS PROPOSED - reasonable-looking, and permanent.
// Every consumer would now choose or default a storage strategy,
// and the shared component would carry two paths forever.
type PanelProps = {
  storage?: {                        // <- REFUSED
    get(key: string): string | null;
    set(key: string, value: string): void;
  };
};

// WHAT SHIPPED INSTEAD: one storage strategy, app-supplied prefix.
function usePanelGeometry(prefix: string) {
  const key = `${prefix}.panel`;
  const [geometry, setGeometry] = useState(() =>
    JSON.parse(localStorage.getItem(key) ?? "null") ?? DEFAULTS
  );
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(geometry));
  }, [key, geometry]);
  return [geometry, setGeometry] as const;
}


// WHAT THE CONVERTING APP DELETED - the actual invoice line:
//
//   - <ModePicker  value={pippaPanelMode}  onChange={...} />
//   - <SizeSlider  label="Width"  value={pippaPanelWidthPx}  ... />
//   - <SizeSlider  label="Height" value={pippaPanelHeightPx} ... />
//   - pippaPanelMode / WidthPx / HeightPx  from the settings store
//   - the three setters and their types
//
// The next three conversions asked the SAME question and deleted
// NOTHING, because none of them had ever rendered these controls.
// Their geometry was internal state, and internal state moves
// silently.


// THE PRICING QUESTION, which is not the one people ask:
//
//   not  "what does this app STORE?"        (all four: geometry)
//   but  "what has this app SHIPPED that a  (one of four: sliders)
//         user could notice disappearing?"