Control scale: Button/IconButton primitives, two-height tokens, app-wide migration

src/app/components/IconButton.tsx

@@ -0,0 +1,53 @@
+/**
+ * IconButton — the shared icon-only button primitive (arch 09 §4 + §5).
+ *
+ * A square button holding a single `<Icon>` (the controlled-vocabulary glyph
+ * primitive) and nothing else. Because there is no visible text, an accessible
+ * name is required: `label` becomes `aria-label` (APG button pattern) and, unless
+ * overridden via `title`, the hover tooltip.
+ *
+ * Always ghost — borderless toolbar utility; the transparent border holds the
+ * box size. Sizes are the control scale: `md` = `--control-height` (32px
+ * square, the default), `lg` = `--control-height-lg` (40px — beside a lg
+ * Button), `sm` = 24px (only nested inside another 32px control, e.g. a search
+ * field's clear button).
+ *
+ * Hover follows the same one-elevation-step rule as Button, via the same
+ * `--control-hover-fill` custom property; an open disclosure trigger
+ * (`aria-expanded="true"`) holds the `--layer-02` fill.
+ */
+
+import type { ComponentPropsWithRef } from 'react';
+import styles from './IconButton.module.css';
+
+export interface IconButtonProps extends ComponentPropsWithRef<'button'> {
+  /** Accessible name (required — there is no visible text). */
+  label: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function IconButton({
+  label,
+  size = 'md',
+  className,
+  type = 'button',
+  title,
+  ...rest
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      aria-label={label}
+      title={title ?? label}
+      className={[
+        styles.iconButton,
+        size === 'sm' && styles.sm,
+        size === 'lg' && styles.lg,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      {...rest}
+    />
+  );
+}