Restructure repo into five-package AFI architecture

Mizan is an Application Framework Interface (AFI) with five
independent packages:

  packages/
    mizan-ast/       Language layer (source → KDL schema)
    mizan-schema/    IR layer (KDL schema definition)
    mizan-rpc/       Protocol layer (client gen + server adapters)
      adapters/django/   ← was django/
      generator/         ← was react/src/generator/
    mizan-csr/       State layer (client state engine)
      adapters/react/    ← was react/
    mizan-ssr/       Rendering layer (server-side rendering)

Each package is independent. The adapter directories contain the
framework-specific implementations. Stub packages (ast, schema, ssr)
establish the structure for future work.

264 Django tests + 33 React tests pass from new locations.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/mizan-csr/adapters/react/src/allauth/components/settings/SettingsComponents.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { useStyles, cx } from '../../contexts/StylesContext'
+
+interface SettingsSectionProps {
+    title: string
+    children: React.ReactNode
+}
+
+export function SettingsSection({ title, children }: SettingsSectionProps) {
+    const styles = useStyles()
+    return (
+        <section className={styles.settingsCard}>
+            <h2 className={styles.settingsSectionTitle}>{title}</h2>
+            {children}
+        </section>
+    )
+}
+
+interface SettingsItemProps {
+    label: React.ReactNode
+    meta?: React.ReactNode
+    actions?: React.ReactNode
+}
+
+export function SettingsItem({ label, meta, actions }: SettingsItemProps) {
+    const styles = useStyles()
+    return (
+        <div className={styles.settingsItem}>
+            <div className={styles.settingsItemInfo}>
+                <span className={styles.settingsItemLabel}>{label}</span>
+                {meta && <span className={styles.settingsItemMeta}>{meta}</span>}
+            </div>
+            {actions && <div className={styles.settingsItemActions}>{actions}</div>}
+        </div>
+    )
+}
+
+export function SettingsList({ children }: { children: React.ReactNode }) {
+    const styles = useStyles()
+    return <div className={styles.settingsList}>{children}</div>
+}
+
+type BadgeVariant = 'primary' | 'success' | 'warning' | 'danger'
+
+export function Badge({ variant, children }: { variant: BadgeVariant, children: React.ReactNode }) {
+    const styles = useStyles()
+    const variantClass = {
+        primary: styles.badgePrimary,
+        success: styles.badgeSuccess,
+        warning: styles.badgeUnverified,
+        danger: styles.badgeDanger,
+    }[variant]
+
+    return <span className={cx(styles.badge, variantClass)}>{children}</span>
+}
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'danger'
+    size?: 'small' | 'normal'
+}
+
+export function Button({ variant = 'primary', size = 'small', className, children, ...props }: ButtonProps) {
+    const styles = useStyles()
+    const variantClass = {
+        primary: styles.smallButtonPrimary,
+        secondary: styles.smallButtonSecondary,
+        danger: styles.smallButtonDanger,
+    }[variant]
+
+    return (
+        <button className={cx(styles.smallButton, variantClass, className)} {...props}>
+            {children}
+        </button>
+    )
+}