import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
import { useState, useEffect, useRef } from "react";
import { borders } from "../theme/borders.js";
import { semantic } from "../theme/palette.js";
import { reducedMotion } from "../theme/motion-guard.js";
function MainPane(props) {
  const style = props.focused ? borders.active : borders.box;
  const rm = reducedMotion();
  const [phase, setPhase] = useState("idle");
  const prevRouteRef = useRef(props.routeId);
  useEffect(() => {
    if (rm) return;
    if (props.routeId === void 0) return;
    if (prevRouteRef.current === props.routeId) return;
    prevRouteRef.current = props.routeId;
    setPhase("dimming");
    const t = setTimeout(() => setPhase("idle"), 16);
    return () => clearTimeout(t);
  }, [props.routeId, rm]);
  const isDimming = phase === "dimming";
  return /* @__PURE__ */ jsxs(Box, { ...style, flexDirection: "column", flexGrow: 1, paddingX: 1, children: [
    /* @__PURE__ */ jsx(Text, { color: isDimming ? semantic.textMuted : semantic.accent, bold: true, children: props.title }),
    props.children
  ] });
}
export {
  MainPane
};
//# sourceMappingURL=MainPane.js.map