Meter Quota Rule

"use client";

import { useState } from "react";
import { RationRule } from "./component";

// a settings-page workspace panel: the kind of screen where a quota meter
// like this appears half a dozen times, quietly, at text scale — no bars,
// no pills, just the number and a rule underneath it.
export default function RationRuleDemo() {
  const [storage, setStorage] = useState(38.2);
  const [seats, setSeats] = useState(14);
  const [credits, setCredits] = useState(4200);
  const [budget, setBudget] = useState(2150);

  function simulateUsage() {
    setStorage((v) => (v <= 60 ? 92.4 : 38.2));
    setSeats((v) => (v <= 16 ? 19 : 14));
    setCredits((v) => (v <= 4500 ? 4820 : 4200));
    setBudget((v) => (v <= 3000 ? 4680 : 2150));
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-background p-6">
      <div className="w-full max-w-md">
        <p className="mb-4 font-mono text-xs tracking-widest text-ns-muted">
          ns-ui / meter-quota-rule
        </p>
        <h1 className="text-lg font-semibold text-foreground">
          Workspace usage
        </h1>
        <p className="mt-1 text-sm leading-relaxed text-ns-muted">
          Every allowance on this page reads the same way: the number, then
          the rule underneath it. Used ground is solid, remaining ground is
          dashed, and a tick marks the warning line — crossing it thickens
          the rule and bolds the digits, never turns them red.
        </p>

        <div className="mt-5 divide-y divide-border rounded-md border border-border bg-surface">
          <div className="p-5">
            <RationRule
              label="Storage"
              value={storage}
              max={100}
              unit="GB"
              unitLabel="gigabytes"
            />
          </div>
          <div className="p-5">
            <RationRule
              label="Seats"
              value={seats}
              max={20}
              unit="seats"
              unitLabel="seats"
            />
          </div>
          <div className="p-5">
            <RationRule
              label="API credits"
              value={credits}
              max={5000}
              unit="req"
              unitLabel="requests"
            />
          </div>
          <div className="p-5">
            <RationRule
              label="Monthly budget"
              value={budget}
              max={5000}
              unit="$"
              unitLabel="dollars"
              warning={0.85}
            />
          </div>
          <div className="flex items-center justify-between gap-4 px-5 py-3">
            <span className="font-mono text-[11px] text-ns-muted">
              advance the billing period
            </span>
            <button
              type="button"
              data-ration-cycle
              onClick={simulateUsage}
              className="rounded-sm border border-border px-3 py-1.5 font-mono text-[11px] tracking-widest text-ns-muted transition-colors duration-200 hover:border-foreground/20 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ns-accent"
            >
              SIMULATE USAGE
            </button>
          </div>
        </div>

        <p className="mt-3 font-mono text-[11px] text-ns-muted">
          the printed numbers are the whole reading — the rule is a footnote
          to them, not the other way around
        </p>
      </div>
    </main>
  );
}

"use client";

import { useEffect, useId, useRef, useState } from "react";

// ---------------------------------------------------------------------------
// RationRule — a quota meter with no bar, no fill, no pill: just the printed
// reading ('38.2 GB of 100 GB') sitting directly above a 4px-tall hairline.
// The rule itself IS the meter — its used portion is a solid --foreground
// stroke, its remainder a dashed --border stroke (2 3), and the boundary
// between them eases with the value. A fixed tick marks the warning
// threshold in --warning, never on the fill; crossing it doesn't turn
// anything red, it thickens the solid stroke 1px -> 2px and steps the
// numerals from weight 400 to 600 — the line asserts itself instead of
// alarming. Meant to sit dozens-deep on a settings page (storage, seats,
// API credits, budget) at text scale. Pure inline SVG + CSS, no canvas.
// ---------------------------------------------------------------------------

export interface RationRuleProps {
  /** what's being rationed, e.g. "Storage" — shown as a caption and used as the meter's accessible name */
  label: string;
  /** amount currently used */
  value: number;
  /** total allowance */
  max: number;
  /** short unit printed after both numbers, e.g. "GB" */
  unit: string;
  /** full unit word spoken by aria-valuetext, e.g. "gigabytes" — defaults to `unit` */
  unitLabel?: string;
  /** fraction of max (0-1) at which the rule crosses into warning weight */
  warning?: number;
  /** extra classes merged onto the rendered root element */
  className?: string;
}

const VIEW_W = 400;
const VIEW_H = 6;
const RULE_Y = VIEW_H / 2;
const MOVE_MS = 350;

function easeOutExpo(t: number) {
  return t >= 1 ? 1 : 1 - Math.pow(2, -10 * t);
}

function fmt(n: number) {
  if (!Number.isFinite(n)) return "0";
  const rounded = Math.round(n * 10) / 10;
  return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
}

function clamp01(n: number) {
  if (Number.isNaN(n)) return 0;
  return Math.min(1, Math.max(0, n));
}

function useReducedMotion() {
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReduced(mq.matches);
    const onChange = () => setReduced(mq.matches);
    mq.addEventListener("change", onChange);
    return () => mq.removeEventListener("change", onChange);
  }, []);
  return reduced;
}

// eases `target` toward its resting value over `duration`ms with
// ease-out-expo, cleanly retargeting mid-flight from whatever the display
// value currently is. Snaps instantly when `reduced`.
function useEasedFraction(target: number, duration: number, reduced: boolean) {
  const [display, setDisplay] = useState(target);
  const displayRef = useRef(target);
  const fromRef = useRef(target);
  const toRef = useRef(target);
  const startRef = useRef(0);
  const rafRef = useRef<number | null>(null);

  useEffect(() => {
    if (reduced) {
      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
      rafRef.current = null;
      displayRef.current = target;
      fromRef.current = target;
      toRef.current = target;
      setDisplay(target);
      return;
    }
    if (target === toRef.current) return;
    fromRef.current = displayRef.current;
    toRef.current = target;
    startRef.current = performance.now();
    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);

    const tick = (now: number) => {
      const t = Math.min(1, (now - startRef.current) / duration);
      const eased = easeOutExpo(t);
      const next = fromRef.current + (toRef.current - fromRef.current) * eased;
      displayRef.current = next;
      setDisplay(next);
      rafRef.current = t < 1 ? requestAnimationFrame(tick) : null;
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => {
      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [target, duration, reduced]);

  return display;
}

export function RationRule({
  label,
  value,
  max,
  unit,
  unitLabel,
  warning = 0.8,
  className = "",
}: RationRuleProps) {
  const uid = useId();
  const reduced = useReducedMotion();

  const safeMax = max > 0 ? max : 1e-6;
  const targetFraction = clamp01(value / safeMax);
  const warningFraction = clamp01(warning);

  const displayFraction = useEasedFraction(targetFraction, MOVE_MS, reduced);

  // final rest-state crossing drives ARIA (never mid-animation dependent);
  // the visual stroke width/weight track the live animated position, so the
  // thickening visibly happens AT the tick as the boundary sweeps past it.
  const crossedFinal = targetFraction >= warningFraction;
  const crossedLive = displayFraction >= warningFraction;

  const boundaryX = displayFraction * VIEW_W;
  const tickX = warningFraction * VIEW_W;

  const usedText = fmt(value);
  const maxText = fmt(max);
  const resolvedUnitLabel = unitLabel || unit;
  const stateText = crossedFinal
    ? "at or above warning threshold"
    : "below warning threshold";
  const valueText =
    `${usedText} of ${maxText} ${resolvedUnitLabel}, ${stateText}`.replace(
      /\s+/g,
      " "
    );

  const labelId = `${uid}-label`;

  return (
    <div className={className}>
      <style>{`
.ns-ration-solid{transition:stroke-width 200ms cubic-bezier(0.22,1,0.36,1)}
.ns-ration-weight{transition:font-weight 200ms cubic-bezier(0.22,1,0.36,1)}
@media (prefers-reduced-motion: reduce){
  .ns-ration-solid{transition:none}
  .ns-ration-weight{transition:none}
}
`}</style>

      <span id={labelId} className="block font-mono text-[11px] tracking-wide text-ns-muted">
        {label.toUpperCase()}
      </span>

      <p
        className={
          "ns-ration-weight mt-1 text-sm tabular-nums text-foreground " +
          (crossedLive ? "font-semibold" : "font-normal")
        }
      >
        {usedText} {unit}{" "}
        <span className="text-ns-muted">
          of {maxText} {unit}
        </span>
      </p>

      <div
        role="meter"
        aria-labelledby={labelId}
        aria-valuemin={0}
        aria-valuemax={max}
        aria-valuenow={value}
        aria-valuetext={valueText}
        className="mt-1.5"
      >
        <svg
          viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
          preserveAspectRatio="none"
          className="block h-1.5 w-full"
          aria-hidden
          focusable="false"
        >
          <line
            x1={boundaryX}
            y1={RULE_Y}
            x2={VIEW_W}
            y2={RULE_Y}
            vectorEffect="non-scaling-stroke"
            strokeWidth={1}
            strokeDasharray="2 3"
            strokeLinecap="butt"
            className="stroke-current text-border"
          />
          <line
            x1={0}
            y1={RULE_Y}
            x2={boundaryX}
            y2={RULE_Y}
            vectorEffect="non-scaling-stroke"
            strokeWidth={crossedLive ? 2 : 1}
            strokeLinecap="butt"
            className="ns-ration-solid stroke-current text-foreground"
          />
          <line
            x1={tickX}
            y1={0}
            x2={tickX}
            y2={VIEW_H}
            vectorEffect="non-scaling-stroke"
            strokeWidth={1}
            style={{ stroke: "var(--warning, #f5a623)" }}
          />
        </svg>
      </div>

      <p role="status" aria-live="polite" className="sr-only">
        {valueText}
      </p>
    </div>
  );
}