settings: move the theme/motion panel into @hive/shared, add motion to agent

Review feedback on this PR (mara): "i think the component should be
shared. motion setting is missing." Both addressed:

- `settings-storage.ts` (generic localStorage hook), `theme-apply.ts`,
  `motion-apply.ts`, and `SettingsMenu.tsx`/`.css` all move from
  swarm-ui's `lib/`/`shell/` into `@hive/shared/src/settings/` —
  agent's previous local copies are deleted outright rather than kept
  as a second implementation. One component, `Badge` trigger
  everywhere (already used elsewhere in swarm-ui, so not a new visual
  language there either) — storage keys stay caller-owned (`themeKey`/
  `motionKey` props + matching `useApplyThemeOverride`/
  `useApplyMotionOverride` calls at each package's single mount point)
  so agent and swarm-ui keep fully independent, non-colliding
  persisted settings.
- Agent's settings menu now includes the motion row, matching
  swarm-ui's. No animation in the agent package is gated behind
  `data-motion` yet — same as when swarm-ui first built this plumbing
  ahead of having a consumer — so it's currently inert there, ready for
  whenever agent grows a motion-guarded animation.
- swarm-ui's own theme default flips to `'dark'` as part of this move
  (`theme-apply.ts`'s new default), superseding PR #3715 — that PR
  becomes redundant once this lands and will be closed rather than
  merged, to avoid the two colliding on the same file.

Verified end-to-end with real screenshots on both pages: shared
component renders identically (Badge trigger, theme+motion rows, dark
default) on agent's mock server and a static rebuild of swarm-ui's
dist.

frontend/packages/shared/src/settings/SettingsMenu.tsx

@@ -0,0 +1,95 @@
+// <SettingsMenu> — a single header icon-button + popover holding the
+// client-local overrides a page has (theme, reduced motion). Originated
+// in swarm-ui (its own `shell/SettingsMenu.tsx`, trigger a raw SVG
+// gear icon); the agent terminal page needed the identical panel
+// (mara: "agent terminal page should get the settings panel from swarm
+// ui as well"). First pass duplicated it with an agent-specific trigger
+// (`Badge`, matching the rest of that page's header pills — `MetaNav`
+// already established `Badge` as the one interactive-chip language
+// there); mara's review on that PR: "i think the component should be
+// shared. motion setting is missing." — this is that: one component,
+// both pages import it, `Badge` trigger everywhere (already a
+// `@hive/shared` component itself, and already used elsewhere in
+// swarm-ui — `pages/ComponentsPage.tsx` etc. — so this isn't a new
+// visual language for that package either), motion included
+// unconditionally rather than agent-only.
+//
+// Storage keys are the caller's responsibility (`themeKey`/`motionKey`
+// props), not derived here — a page mounts `useApplyThemeOverride`/
+// `useApplyMotionOverride` (`./theme-apply.js`/`./motion-apply.js`)
+// once, high in its tree, with the SAME key strings passed to this
+// component, so the two stay in sync without this component owning any
+// page-specific naming decision.
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { Badge } from '../badge/Badge.js';
+import { useThemeOverride, type ThemeOverride } from './theme-apply.js';
+import { useMotionOverride, type MotionOverride } from './motion-apply.js';
+import './SettingsMenu.css';
+
+const THEME_OPTIONS: ThemeOverride[] = ['system', 'light', 'dark'];
+const MOTION_OPTIONS: MotionOverride[] = ['system', 'allow', 'reduce'];
+
+export interface SettingsMenuProps {
+  themeKey: string;
+  motionKey: string;
+}
+
+export function SettingsMenu({ themeKey, motionKey }: SettingsMenuProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [theme, setTheme] = useThemeOverride(themeKey);
+  const [motion, setMotion] = useMotionOverride(motionKey);
+
+  // Close on an outside click or Escape — only listens while open.
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: PointerEvent) {
+      if (rootRef.current && e.target instanceof Node && !rootRef.current.contains(e.target)) setOpen(false);
+    }
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <div class="settings-menu-anchor" ref={rootRef}>
+      <Badge value="⚙" title="settings" onClick={() => setOpen((v) => !v)} expanded={open} />
+      {open ? (
+        <div class="settings-menu-popover" role="menu" aria-label="settings">
+          <label class="settings-menu-row">
+            <span>theme</span>
+            <select
+              value={theme}
+              onChange={(e) => setTheme((e.target as HTMLSelectElement).value as ThemeOverride)}
+            >
+              {THEME_OPTIONS.map((o) => (
+                <option key={o} value={o}>
+                  {o}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label class="settings-menu-row">
+            <span>motion</span>
+            <select
+              value={motion}
+              onChange={(e) => setMotion((e.target as HTMLSelectElement).value as MotionOverride)}
+            >
+              {MOTION_OPTIONS.map((o) => (
+                <option key={o} value={o}>
+                  {o}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+      ) : null}
+    </div>
+  );
+}