Give each rule one authoritative home

First, build a mental model

The domain describes what the product means. Presentation asks and displays; adapters translate external systems. Dependencies should not make the rule depend on the screen that happens to use it.

1. Keep a pure rule independent of React, DOM, network clients and environment secrets when those are not part of its meaning.
2. Pass explicit inputs and return explicit results/errors. Validate untrusted values at boundaries before a typed domain function relies on them.
3. Sharing a library does not automatically make it the persisted authority. Security, concurrency and atomic invariants still need enforcement where trusted state changes.
4. Prefer one small cohesive package over a speculative generic framework. Add an abstraction because actual consumers share a contract, not because a diagram looks elegant.

type Line = { quantity: number; unitCents: number };
export function lineCents(line: Line): number {
  if (!Number.isSafeInteger(line.quantity) || line.quantity < 1 ||
      !Number.isSafeInteger(line.unitCents) || line.unitCents < 0) {
    throw new Error('Invalid synthetic line');
  }
  const total = line.quantity * line.unitCents;
  if (!Number.isSafeInteger(total)) throw new Error('Out of range');
  return total;
}

1. Input contract

   The toy rule accepts positive integer quantities and nonnegative integer cents within the safe range.

2. Rule

   One exported calculation serves its deliberately limited purpose without knowing about React or HTTP.

3. Boundary

   Real persistence still needs its own authorization and integrity; this function is not a financial engine.