@guuey/agent-layout 0.16.0

package/src/react.tsx

@@ -0,0 +1,305 @@
+/**
+ * `@guuey/agent-layout/react` — the Provider + primitives (guuey#403 §4).
+ * React DOM only, by design: cross-platform semantics live in
+ * `@guuey/chat`'s selection contract (portal's consult on the proposal).
+ *
+ * Engineering shape (ggui#633's scar, adopted): the active-panel state
+ * lives in its OWN provider, separate from any chat/transcript state —
+ * shells must never re-render per streaming token. The context value
+ * changes ONLY on machine transitions; every callback identity is stable.
+ */
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import {
+  agentModeReduce,
+  INITIAL_AGENT_MODE_STATE,
+  type ActivePanel,
+  type AgentModeInput,
+  type AgentModeState,
+} from "./machine.js";
+import { assertToneFloor, DEFAULT_TONES, type TonePair } from "./tones.js";
+import { DEFAULT_TONE_TRANSITION_MS, LAYOUT_TOKENS } from "./index.js";
+
+interface AgentModeContextValue {
+  state: AgentModeState;
+  dispatch: (input: AgentModeInput) => void;
+  drawerOpen: boolean;
+  setDrawerOpen: (open: boolean) => void;
+  identity: ReactNode;
+}
+
+const AgentModeContext = createContext<AgentModeContextValue | null>(null);
+
+export interface AgentModeProviderProps {
+  children: ReactNode;
+  /**
+   * The presentation mode — the SAME host-resolved value the surface
+   * passes to `<GuueyChat mode>`; this lib rides the existing mode
+   * machinery and adds none of its own (the ggui#633 binding rule: never
+   * fixed-dark, never a second mode system). Default `"light"`, matching
+   * the kit's own default.
+   */
+  mode?: "light" | "dark";
+  /**
+   * Tone override pair for the CURRENT mode (host-palette / app-theme
+   * tiers — §2's tier chain). Validated against the perceptibility floor
+   * at wiring time (reject-under-floor, explanatory throw). Base defaults
+   * (the ggui#633 shipped pair + its dark mirror) apply when absent.
+   */
+  tones?: TonePair;
+  /** The follow fade in ms — default the founder-certified eased 150. */
+  transitionMs?: number;
+  /**
+   * The surface's identity mark (logo / brand node) for the working state
+   * (founder (d)): shown with the built-in spinner while the agent has the
+   * room but nothing is presented yet.
+   */
+  identity?: ReactNode;
+  /**
+   * The route-derived follow signal (ggui#633's scar: hand-wiring
+   * per-link missed 20+ surfaces — sub-nav tabs, in-content links,
+   * `router.push`). Pass your router's location key (`usePathname()`,
+   * `useLocation().key`, …): ANY change dispatches `menuInteraction`.
+   * The initial value dispatches nothing.
+   */
+  navigationKey?: unknown;
+}
+
+export function AgentModeProvider({
+  children,
+  mode = "light",
+  tones,
+  transitionMs = DEFAULT_TONE_TRANSITION_MS,
+  identity = null,
+  navigationKey,
+}: AgentModeProviderProps): ReactNode {
+  const [state, dispatch] = useReducer(agentModeReduce, INITIAL_AGENT_MODE_STATE);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  // Route-derived follow: any CHANGE of the key = the user navigated.
+  const navRef = useRef({ initial: true, key: navigationKey });
+  useEffect(() => {
+    if (navRef.current.initial) {
+      navRef.current = { initial: false, key: navigationKey };
+      return;
+    }
+    if (Object.is(navRef.current.key, navigationKey)) return;
+    navRef.current.key = navigationKey;
+    dispatch({ type: "menuInteraction" });
+    setDrawerOpen(false);
+  }, [navigationKey]);
+
+  const resolvedTones = useMemo(() => {
+    const pair = tones ?? DEFAULT_TONES[mode];
+    // Reject-under-floor at wiring time — an override that measures alike
+    // defeats the category (§2); the base defaults pass by construction.
+    if (tones !== undefined) assertToneFloor(tones);
+    return pair;
+  }, [tones, mode]);
+
+  const value = useMemo<AgentModeContextValue>(
+    () => ({ state, dispatch, drawerOpen, setDrawerOpen, identity }),
+    [state, drawerOpen, identity],
+  );
+
+  // Token application (§2): tones + transition as inline custom properties
+  // on the shell scope; `pane-tone` is LIB-WRITTEN from the machine state.
+  const vars = {
+    [LAYOUT_TOKENS.toneUpper]: resolvedTones.upper,
+    [LAYOUT_TOKENS.toneUpperOn]: resolvedTones.upperOn,
+    [LAYOUT_TOKENS.toneLower]: resolvedTones.lower,
+    [LAYOUT_TOKENS.toneLowerOn]: resolvedTones.lowerOn,
+    [LAYOUT_TOKENS.paneTone]:
+      state.activePanel === "agent" ? resolvedTones.lower : resolvedTones.upper,
+    [LAYOUT_TOKENS.toneTransition]: `${transitionMs}ms`,
+  } as CSSProperties;
+
+  return (
+    <AgentModeContext.Provider value={value}>
+      <div className="guuey-agent-layout" data-mode={mode} data-active-panel={state.activePanel} style={vars}>
+        {children}
+      </div>
+    </AgentModeContext.Provider>
+  );
+}
+
+export interface UseAgentModeResult {
+  activePanel: ActivePanel;
+  /** A turn is in flight (submit → settled). */
+  streaming: boolean;
+  /** The founder-(d) working-state window is open. */
+  pending: boolean;
+  /** The raw machine door — `bindGuueyChat(dispatch)` wires a kit surface. */
+  dispatch: (input: AgentModeInput) => void;
+  /** Escape hatch for surfaces with custom needs (documented as rarely needed). */
+  setActivePanel: (panel: ActivePanel) => void;
+  /** The <1024px overlay drawer (lib-owned state; Shell renders the toggle). */
+  drawerOpen: boolean;
+  setDrawerOpen: (open: boolean) => void;
+}
+
+export function useAgentMode(): UseAgentModeResult {
+  const ctx = useContext(AgentModeContext);
+  if (ctx === null) {
+    throw new Error("useAgentMode: no <AgentModeProvider> above this component.");
+  }
+  const { state, dispatch, drawerOpen, setDrawerOpen } = ctx;
+  const setActivePanel = useCallback(
+    (panel: ActivePanel) =>
+      dispatch(panel === "app" ? { type: "menuInteraction" } : { type: "agentSubmit" }),
+    [dispatch],
+  );
+  return {
+    activePanel: state.activePanel,
+    streaming: state.streaming,
+    pending: state.pending,
+    dispatch,
+    setActivePanel,
+    drawerOpen,
+    setDrawerOpen,
+  };
+}
+
+/**
+ * The grid: sidebar column + pane. Below 1024px (the console family's own
+ * sidebar boundary — one muscle memory across surfaces) the sidebar leaves
+ * the grid and becomes an overlay drawer, and the follow is SUSPENDED —
+ * the pane holds the lower (agent) tone (stylesheet-enforced; §4's ruled
+ * degraded mode). The drawer toggle renders only at drawer widths.
+ *
+ * Children: an {@link AgentModeSidebar} (wrapping the two panels) and an
+ * {@link ActivePane}. The wrapper is structural — the drawer must slide as
+ * ONE element, so the two panels share a positioned parent (the §4 sketch
+ * elides it; the contract is unchanged).
+ */
+export function AgentModeShell({
+  children,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement>): ReactNode {
+  const { drawerOpen, setDrawerOpen } = useAgentMode();
+  return (
+    <div
+      {...rest}
+      className={joinClass("guuey-layout-shell", className)}
+      data-drawer-open={drawerOpen ? "true" : undefined}
+    >
+      <button
+        type="button"
+        className="guuey-layout-drawer-toggle"
+        aria-expanded={drawerOpen}
+        aria-controls="guuey-layout-sidebar"
+        onClick={() => setDrawerOpen(!drawerOpen)}
+      >
+        <span aria-hidden="true">☰</span>
+        <span className="guuey-layout-sr-only">Menu</span>
+      </button>
+      {children}
+    </div>
+  );
+}
+
+/** The sidebar column: the two panels' shared, drawer-slidable parent. */
+export function AgentModeSidebar({
+  children,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLElement>): ReactNode {
+  return (
+    <aside
+      {...rest}
+      id="guuey-layout-sidebar"
+      className={joinClass("guuey-layout-sidebar", className)}
+    >
+      {children}
+    </aside>
+  );
+}
+
+export interface SidebarPanelProps extends HTMLAttributes<HTMLDivElement> {
+  section: "app" | "agent";
+}
+
+/**
+ * One sidebar section. `section="app"` wires `menuInteraction` on
+ * pointer/focus interactions inside it (capture-phase — apps write ZERO
+ * per-link wiring; this covers same-page clicks the route signal cannot
+ * see). `section="agent"` hosts the agent surface and wires nothing — the
+ * agent bridge speaks through the machine.
+ */
+export function SidebarPanel({ section, children, className, ...rest }: SidebarPanelProps): ReactNode {
+  const { dispatch } = useAgentMode();
+  const onMenuInteraction =
+    section === "app" ? () => dispatch({ type: "menuInteraction" }) : undefined;
+  return (
+    <div
+      {...rest}
+      className={joinClass(`guuey-layout-panel guuey-layout-panel-${section}`, className)}
+      onPointerDownCapture={onMenuInteraction}
+      onFocusCapture={onMenuInteraction}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface ActivePaneProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Replaces the built-in working-state treatment (identity + pulse) shown
+   * while the agent has the room and nothing is presented yet (founder
+   * (d): NEVER hold prior page content on the agent ground).
+   */
+  workingState?: ReactNode;
+}
+
+/**
+ * The right pane: paints `--guuey-layout-pane-tone`, animates per the
+ * transition token, honors `prefers-reduced-motion` (stylesheet: instant
+ * snap). While the founder-(d) window is open the pane presents the
+ * working state INSTEAD of its children — prior page content never sits
+ * on the agent ground.
+ */
+export function ActivePane({ children, workingState, className, ...rest }: ActivePaneProps): ReactNode {
+  const ctx = useContext(AgentModeContext);
+  if (ctx === null) throw new Error("ActivePane: no <AgentModeProvider> above this component.");
+  const { state, identity } = ctx;
+  const working = state.activePanel === "agent" && state.pending;
+  return (
+    <main {...rest} className={joinClass("guuey-layout-pane", className)}>
+      {working ? (
+        (workingState ?? (
+          <div className="guuey-layout-working" role="status">
+            {identity !== null ? <div className="guuey-layout-working-identity">{identity}</div> : null}
+            <span className="guuey-layout-working-pulse" aria-hidden="true">
+              <span />
+              <span />
+              <span />
+            </span>
+            <span className="guuey-layout-sr-only">Working…</span>
+          </div>
+        ))
+      ) : (
+        children
+      )}
+    </main>
+  );
+}
+
+function joinClass(base: string, extra: string | undefined): string {
+  return extra === undefined || extra === "" ? base : `${base} ${extra}`;
+}
+
+export { bindGuueyChat } from "./bind.js";
+export type { AgentModeInput, AgentModeState, ActivePanel } from "./machine.js";
+export type { TonePair } from "./tones.js";

package/src/tones.ts

@@ -0,0 +1,156 @@
+/**
+ * Tone math (guuey#403 §2) — the two-panel tone pair, its perceptibility
+ * floor, and the chat-palette derivation.
+ *
+ * The floor is CALIBRATED, not invented (ggui#633's scars): the console's
+ * first cut at ΔL* 3.5 measured below perception; their shipped pair
+ * (#F4F3ED warm paper vs #E4E4E2 neutral chrome) reads clearly at ΔL* 5.2
+ * because the warm→neutral TEMPERATURE step does perceptual work lightness
+ * alone doesn't. Hence the OR-form floor:
+ *
+ *     ΔL* ≥ 6  —  OR  —  a hue-temperature step (Δab ≥ 2) with ΔL* ≥ 5
+ *
+ * Both arms reject the failed 3.5 cut; the strict arm alone would have
+ * rejected the founder-certified shipped pair. The platform's theme-doc
+ * gate applies its own mirror of this rule server-side; this module is the
+ * lib's own honesty (derived defaults satisfy the floor BY CONSTRUCTION —
+ * pairs that land under it get the documented nudge apart, never a silent
+ * pass). Calibration may RAISE the floor; it does not lower it.
+ */
+
+/** A resolved tone pair for one mode: two backgrounds + their foregrounds. */
+export interface TonePair {
+  /** Upper panel (app menus) background. */
+  upper: string;
+  /** Foreground on the upper tone. */
+  upperOn: string;
+  /** Lower panel (agent) background. */
+  lower: string;
+  /** Foreground on the lower tone. */
+  lowerOn: string;
+}
+
+/**
+ * The lib base defaults — the ggui#633 SHIPPED pair for light, and its
+ * temperature-step mirror for dark (warm umber menu vs neutral chrome,
+ * ΔL* 6.5 — the strict arm). Founder-certified "two-toned and
+ * well-distinguished" in light; the dark pair keeps the identical warm→
+ * neutral grammar so a mode flip changes brightness, not the layout's
+ * character. Both pairs assert the floor in this package's tests.
+ */
+export const DEFAULT_TONES: Record<"light" | "dark", TonePair> = {
+  light: {
+    upper: "#F4F3ED",
+    upperOn: "#1F1E1B",
+    lower: "#E4E4E2",
+    lowerOn: "#1A1A1C",
+  },
+  dark: {
+    upper: "#302B24",
+    upperOn: "#ECE9E2",
+    lower: "#1E1E21",
+    lowerOn: "#E3E3E5",
+  },
+};
+
+/** CIELAB (D65) from a `#rrggbb` hex. Throws on a malformed color. */
+export function hexToLab(hex: string): { L: number; a: number; b: number } {
+  const m = /^#([0-9a-fA-F]{6})$/.exec(hex.trim());
+  if (m === null) {
+    throw new Error(
+      `agent-layout tones: "${hex}" is not a #rrggbb color — tone math needs resolvable hex (CSS keywords and var() belong to the stylesheet tier, not the derivation door).`,
+    );
+  }
+  const h = m[1];
+  const chan = (i: number): number => parseInt(h.slice(i, i + 2), 16) / 255;
+  const lin = (c: number): number => (c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+  const R = lin(chan(0));
+  const G = lin(chan(2));
+  const B = lin(chan(4));
+  const X = (0.4124 * R + 0.3576 * G + 0.1805 * B) / 0.95047;
+  const Y = 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  const Z = (0.0193 * R + 0.1192 * G + 0.9505 * B) / 1.08883;
+  const f = (t: number): number => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116);
+  return {
+    L: 116 * f(Y) - 16,
+    a: 500 * (f(X) - f(Y)),
+    b: 200 * (f(Y) - f(Z)),
+  };
+}
+
+/** The perceptibility deltas between two backgrounds. */
+export function toneDelta(upper: string, lower: string): { dL: number; dab: number } {
+  const A = hexToLab(upper);
+  const B = hexToLab(lower);
+  return { dL: Math.abs(A.L - B.L), dab: Math.hypot(A.a - B.a, A.b - B.b) };
+}
+
+/** The OR-form floor (module header). */
+export function meetsToneFloor(upper: string, lower: string): boolean {
+  const { dL, dab } = toneDelta(upper, lower);
+  return dL >= 6 || (dab >= 2 && dL >= 5);
+}
+
+/**
+ * Reject-under-floor with the explanatory message (the brandAccent
+ * posture): overrides that fail perceptibility throw HERE, at wiring time,
+ * never render as an invisible seam.
+ */
+export function assertToneFloor(pair: TonePair): void {
+  if (meetsToneFloor(pair.upper, pair.lower)) return;
+  const { dL, dab } = toneDelta(pair.upper, pair.lower);
+  throw new Error(
+    `agent-layout tones: the upper/lower pair ${pair.upper}/${pair.lower} is below the perceptibility floor ` +
+      `(ΔL* ${dL.toFixed(1)}, Δab ${dab.toFixed(1)}; needs ΔL* ≥ 6, or a temperature step Δab ≥ 2 with ΔL* ≥ 5). ` +
+      `Two tones that measure alike defeat the category's defining behavior — pick a stronger pair.`,
+  );
+}
+
+/**
+ * Base-tier derivation (§2, platform's pick): tones DERIVE from the chat
+ * palette's surface/canvas pair, so an already-themed app gets coherent
+ * tones for free — theming chat themes the layout, no second authoring
+ * step. `surface` grounds the AGENT (lower) panel — it is the chat's own
+ * ground — and `canvas` grounds the MENU (upper) panel. Pairs that land
+ * under the floor get the documented nudge: the upper tone walks away from
+ * the lower along the lightness axis (toward white below L* 50, toward
+ * black above — always INTO the pair's existing contrast direction) until
+ * the strict arm passes. Deterministic, bounded, and asserted by tests.
+ */
+export function deriveTones(palette: {
+  surface: string;
+  canvas: string;
+  ink: string;
+}): Pick<TonePair, "upper" | "lower"> & { nudged: boolean } {
+  const lower = palette.surface;
+  let upper = palette.canvas;
+  let nudged = false;
+  if (!meetsToneFloor(upper, lower)) {
+    nudged = true;
+    const lowerL = hexToLab(lower).L;
+    // Walk upper away from lower in sRGB mix steps until ΔL* ≥ 6. The mix
+    // target keeps the walk inside the pair's own contrast direction.
+    const towardWhite = hexToLab(upper).L >= lowerL;
+    for (let i = 1; i <= 20 && !(toneDelta(upper, lower).dL >= 6); i++) {
+      upper = mixHex(palette.canvas, towardWhite ? "#FFFFFF" : "#000000", i * 0.05);
+    }
+  }
+  return { upper, lower, nudged };
+}
+
+/** Linear sRGB-space hex mix (`t` toward `target`). Exported for tests. */
+export function mixHex(base: string, target: string, t: number): string {
+  const pb = /^#([0-9a-fA-F]{6})$/.exec(base.trim());
+  const pt = /^#([0-9a-fA-F]{6})$/.exec(target.trim());
+  if (pb === null || pt === null) throw new Error(`agent-layout tones: mixHex needs #rrggbb inputs`);
+  const out = [0, 2, 4]
+    .map((i) => {
+      const b = parseInt(pb[1].slice(i, i + 2), 16);
+      const g = parseInt(pt[1].slice(i, i + 2), 16);
+      return Math.round(b + (g - b) * Math.min(1, Math.max(0, t)))
+        .toString(16)
+        .padStart(2, "0");
+    })
+    .join("");
+  return `#${out.toUpperCase()}`;
+}

package/styles.css

@@ -0,0 +1,180 @@
+/**
+ * @guuey/agent-layout — the token sheet + structural rules (guuey#403 §2/§4).
+ *
+ * One import: `import "@guuey/agent-layout/styles.css"`. The tone values
+ * arrive as inline `--guuey-layout-*` custom properties from the Provider
+ * (base defaults = the ggui#633 founder-certified pair; overrides ride the
+ * §2 tier chain). This sheet carries structure, the follow transition, the
+ * <1024px drawer collapse, and the working-state treatment.
+ *
+ * `--guuey-layout-pane-tone` is LIB-WRITTEN state — apps read it, never
+ * set it.
+ */
+
+.guuey-agent-layout {
+  height: 100%;
+  min-height: 0;
+}
+
+.guuey-layout-shell {
+  display: grid;
+  grid-template-columns: minmax(240px, 300px) 1fr;
+  height: 100%;
+  min-height: 0;
+}
+
+.guuey-layout-sidebar {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.guuey-layout-panel {
+  min-height: 0;
+  min-width: 0;
+  transition: background-color var(--guuey-layout-tone-transition) ease-out;
+}
+.guuey-layout-panel-app {
+  background: var(--guuey-layout-tone-upper);
+  color: var(--guuey-layout-tone-upper-on);
+}
+.guuey-layout-panel-agent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--guuey-layout-tone-lower);
+  color: var(--guuey-layout-tone-lower-on);
+}
+
+/* The follow: the pane's ground tracks the active panel (lib-written var),
+ * arriving on the founder-certified eased fade. */
+.guuey-layout-pane {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--guuey-layout-pane-tone);
+  color: var(--guuey-layout-tone-upper-on);
+  transition: background-color var(--guuey-layout-tone-transition) ease-out;
+}
+.guuey-agent-layout[data-active-panel="agent"] .guuey-layout-pane {
+  color: var(--guuey-layout-tone-lower-on);
+}
+
+/* Founder (d): the working state — identity + pulse on the agent ground;
+ * prior page content never holds the room. */
+.guuey-layout-working {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+.guuey-layout-working-identity {
+  opacity: 0.75;
+}
+.guuey-layout-working-pulse {
+  display: inline-flex;
+  gap: 6px;
+}
+.guuey-layout-working-pulse span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.4;
+  animation: guuey-layout-pulse 1.2s ease-in-out infinite;
+}
+.guuey-layout-working-pulse span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.guuey-layout-working-pulse span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes guuey-layout-pulse {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 0.9;
+    transform: translateY(-3px);
+  }
+}
+
+/* The drawer toggle exists only at drawer widths (≥24px target — the
+ * ggui#633 a11y floor). */
+.guuey-layout-drawer-toggle {
+  display: none;
+}
+.guuey-layout-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── <1024px: the sidebar leaves the grid and becomes an overlay drawer;
+ *    the follow is SUSPENDED — the pane holds the lower (agent) tone (a
+ *    tone flip referencing a panel the user cannot see is noise, §4). ── */
+@media (max-width: 1023.98px) {
+  .guuey-layout-shell {
+    grid-template-columns: 1fr;
+  }
+  .guuey-layout-sidebar {
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: min(85vw, 320px);
+    z-index: 20;
+    transform: translateX(-100%);
+    transition: transform var(--guuey-layout-tone-transition) ease-out;
+    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
+  }
+  .guuey-layout-shell[data-drawer-open="true"] .guuey-layout-sidebar {
+    transform: translateX(0);
+  }
+  .guuey-layout-drawer-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    inset-block-start: 12px;
+    inset-inline-start: 12px;
+    z-index: 21;
+    min-width: 40px;
+    min-height: 40px;
+    border: none;
+    border-radius: 8px;
+    background: var(--guuey-layout-tone-upper);
+    color: var(--guuey-layout-tone-upper-on);
+    cursor: pointer;
+  }
+  /* Follow suspended: fixed conversation tone, not a broken animation. */
+  .guuey-layout-pane {
+    background: var(--guuey-layout-tone-lower);
+    color: var(--guuey-layout-tone-lower-on);
+    transition: none;
+  }
+}
+
+/* Reduced motion: instant snap, no pulse travel (non-negotiable MUST). */
+@media (prefers-reduced-motion: reduce) {
+  .guuey-layout-panel,
+  .guuey-layout-pane,
+  .guuey-layout-sidebar {
+    transition: none;
+  }
+  .guuey-layout-working-pulse span {
+    animation: none;
+    opacity: 0.6;
+    transform: none;
+  }
+}