affora 0.1.0

package/src/patterns/confirmundo.tsx

@@ -0,0 +1,134 @@
+import type React from "react"
+import { useId, useState } from "react"
+
+export type ConfirmUndoProps = {
+  folderName?: string
+  fileCount?: number
+  onCommit?: (state: "deleted" | "restored") => void
+}
+
+/** A recoverable destructive action with a persistent, named reversal. */
+export const ConfirmUndo: React.FC<ConfirmUndoProps> = ({
+  folderName = "Drafts",
+  fileCount = 12,
+  onCommit,
+}) => {
+  const [deleted, setDeleted] = useState(false)
+  const statusId = useId()
+
+  const remove = () => {
+    setDeleted(true)
+    onCommit?.("deleted")
+  }
+
+  const restore = () => {
+    setDeleted(false)
+    onCommit?.("restored")
+  }
+
+  return (
+    <section className="acu-root" aria-labelledby={`${statusId}-title`}>
+      <style>{css}</style>
+      <header>
+        <h3 id={`${statusId}-title`}>Folders</h3>
+        <p>Deleted folders remain recoverable for 30 days.</p>
+      </header>
+
+      {!deleted ? (
+        <div className="acu-row">
+          <div>
+            <strong>{folderName}</strong>
+            <span>{fileCount} files</span>
+          </div>
+          <button type="button" className="acu-delete" aria-describedby={`${statusId}-consequence`} onClick={remove}>
+            Move {folderName} to trash
+          </button>
+          <p id={`${statusId}-consequence`} className="acu-consequence">
+            This removes the folder from Folders. You can undo this action or restore it from Trash for 30 days.
+          </p>
+        </div>
+      ) : (
+        <div className="acu-result">
+          <p><strong>{folderName}</strong> moved to Trash.</p>
+          <button type="button" onClick={restore}>Undo — restore {folderName}</button>
+        </div>
+      )}
+
+      <output id={statusId} className="acu-status" aria-live="polite">
+        {deleted ? `${folderName} is in Trash and can be restored for 30 days.` : `${folderName} is available in Folders.`}
+      </output>
+    </section>
+  )
+}
+
+export const css = `
+.acu-root {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--gap);
+  width: 100%;
+  max-width: 36rem;
+  padding: var(--pad-loose);
+  color: var(--fg);
+  background: var(--glass-bg, var(--surface));
+  border: 1px solid var(--glass-border, var(--border));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--font);
+  font-size: var(--text-base);
+  line-height: var(--leading);
+}
+.acu-root * { box-sizing: border-box; }
+.acu-root h3 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: calc(var(--text-base) * 1.15);
+  font-weight: var(--weight-display);
+  letter-spacing: var(--tracking-tight);
+}
+.acu-root header p, .acu-status { margin: 0; color: var(--fg-muted); font-size: calc(var(--text-base) * 0.9); }
+.acu-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--gap);
+  align-items: center;
+  padding: var(--pad);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.acu-row > div { display: grid; }
+.acu-row span { color: var(--fg-muted); font-size: calc(var(--text-base) * 0.9); }
+.acu-consequence { grid-column: 1 / -1; margin: 0; color: var(--fg-muted); font-size: calc(var(--text-base) * 0.9); }
+.acu-root button {
+  min-height: calc(var(--text-base) * 2.75);
+  padding: var(--pad-tight) var(--pad);
+  color: var(--accent);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  font: inherit;
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+.acu-root button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
+.acu-root .acu-delete { color: var(--danger); border-color: var(--danger); }
+.acu-result {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+  padding: var(--pad);
+  background: var(--accent-weak);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+}
+.acu-result p { margin: 0; }
+@media (max-width: 30rem) {
+  .acu-row { grid-template-columns: 1fr; }
+  .acu-row .acu-delete { width: 100%; }
+}
+`
+
+export default ConfirmUndo

package/src/patterns/errremedy.tsx

@@ -0,0 +1,155 @@
+import type React from "react"
+import { useId, useRef, useState } from "react"
+
+export type ErrorRemedyProps = {
+  onCommit?: (value: string) => void
+  destination?: string
+}
+
+const INVALID_METHOD = "International courier"
+const VALID_METHOD = "Domestic ground"
+
+/** A form whose failure remains visible and names the exact corrective action. */
+export const ErrorRemedy: React.FC<ErrorRemedyProps> = ({
+  onCommit,
+  destination = "500 Howard St, San Francisco, United States",
+}) => {
+  const [method, setMethod] = useState(INVALID_METHOD)
+  const [error, setError] = useState("")
+  const [saved, setSaved] = useState(false)
+  const methodRef = useRef<HTMLSelectElement>(null)
+  const methodId = useId()
+  const errorId = useId()
+  const statusId = useId()
+
+  const save = () => {
+    if (method === INVALID_METHOD) {
+      setSaved(false)
+      setError(`${INVALID_METHOD} is not available for United States. Choose “${VALID_METHOD}”, then save again.`)
+      methodRef.current?.focus()
+      return
+    }
+    setError("")
+    setSaved(true)
+    onCommit?.("SHIP-OK")
+  }
+
+  return (
+    <form className="aer-root" onSubmit={(event) => { event.preventDefault(); save() }} noValidate>
+      <style>{css}</style>
+      <header className="aer-heading">
+        <h3>Shipping preferences</h3>
+        <p>Deliver to: {destination}</p>
+      </header>
+
+      <div className="aer-field">
+        <label htmlFor={methodId}>Shipping method</label>
+        <select
+          ref={methodRef}
+          id={methodId}
+          value={method}
+          aria-invalid={error ? "true" : undefined}
+          aria-describedby={error ? errorId : undefined}
+          onChange={(event) => {
+            setMethod(event.target.value)
+            setSaved(false)
+            if (event.target.value === VALID_METHOD) setError("")
+          }}
+        >
+          <option>{INVALID_METHOD}</option>
+          <option>{VALID_METHOD}</option>
+        </select>
+        {error && <p id={errorId} className="aer-error" role="alert">{error}</p>}
+      </div>
+
+      <label className="aer-check">
+        <input type="checkbox" />
+        <span>Gift wrap</span>
+      </label>
+
+      <div className="aer-field">
+        <label htmlFor={`${methodId}-notes`}>Delivery notes</label>
+        <input id={`${methodId}-notes`} type="text" placeholder="For example, leave at door" />
+      </div>
+
+      <div className="aer-field">
+        <label htmlFor={`${methodId}-promo`}>Promo code</label>
+        <input id={`${methodId}-promo`} type="text" />
+      </div>
+
+      <button type="submit">Save preferences</button>
+      <output id={statusId} className="aer-status" aria-live="polite">
+        {saved ? `Saved. Shipping method: ${method}.` : "Preferences not saved yet."}
+      </output>
+    </form>
+  )
+}
+
+export const css = `
+.aer-root {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--gap);
+  width: 100%;
+  max-width: 32rem;
+  padding: var(--pad-loose);
+  color: var(--fg);
+  background: var(--glass-bg, var(--surface));
+  border: 1px solid var(--glass-border, var(--border));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--font);
+  font-size: var(--text-base);
+  line-height: var(--leading);
+}
+.aer-root * { box-sizing: border-box; }
+.aer-heading h3 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: calc(var(--text-base) * 1.15);
+  font-weight: var(--weight-display);
+  letter-spacing: var(--tracking-tight);
+}
+.aer-heading p, .aer-status { margin: 0; color: var(--fg-muted); font-size: calc(var(--text-base) * 0.9); }
+.aer-field { display: grid; gap: calc(var(--gap) * 0.5); }
+.aer-field label { font-weight: var(--weight-medium); }
+.aer-field input, .aer-field select {
+  width: 100%;
+  min-height: calc(var(--text-base) * 2.75);
+  padding: var(--pad-tight) var(--pad);
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  font: inherit;
+}
+.aer-field input:focus-visible, .aer-field select:focus-visible, .aer-root button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ring);
+}
+.aer-field [aria-invalid='true'] { border-color: var(--danger); }
+.aer-error {
+  margin: 0;
+  padding: var(--pad-tight) var(--pad);
+  color: var(--danger);
+  background: var(--surface-2);
+  border-left: 3px solid var(--danger);
+  border-radius: var(--radius-sm);
+  font-size: calc(var(--text-base) * 0.9);
+}
+.aer-check { display: flex; align-items: center; gap: var(--pad-tight); min-height: calc(var(--text-base) * 2.75); }
+.aer-check input { width: calc(var(--text-base) * 1.25); height: calc(var(--text-base) * 1.25); margin: 0; accent-color: var(--accent); }
+.aer-root button {
+  min-height: calc(var(--text-base) * 2.75);
+  padding: var(--pad-tight) var(--pad);
+  color: var(--accent-fg);
+  background: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  font: inherit;
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+`
+
+export default ErrorRemedy

package/src/patterns/flowform.tsx

@@ -0,0 +1,179 @@
+import type React from "react"
+import { useId, useMemo, useRef, useState } from "react"
+
+type Values = {
+  name: string
+  email: string
+  region: string
+  plan: string
+  terms: boolean
+}
+
+type Field = keyof Values
+
+export type FlowFormProps = {
+  onCommit?: (value: string) => void
+}
+
+const EMPTY: Values = { name: "", email: "", region: "", plan: "", terms: false }
+const STEP_FIELDS: Field[][] = [["name", "email"], ["region", "plan"], ["terms"]]
+const STEP_TITLES = ["Account", "Preferences", "Review"]
+
+function validate(values: Values) {
+  const errors: Partial<Record<Field, string>> = {}
+  if (!values.name.trim()) errors.name = "Enter your full name."
+  if (!/^\S+@\S+\.\S+$/.test(values.email)) errors.email = "Enter an email address in the form name@example.com."
+  if (!values.region) errors.region = "Choose a region."
+  if (!values.plan) errors.plan = "Choose a plan."
+  if (!values.terms) errors.terms = "Accept the terms of service before registering."
+  return errors
+}
+
+/** A visually guided form whose complete, directly submittable substrate stays mounted. */
+export const FlowForm: React.FC<FlowFormProps> = ({ onCommit }) => {
+  const [values, setValues] = useState(EMPTY)
+  const [errors, setErrors] = useState<Partial<Record<Field, string>>>({})
+  const [activeStep, setActiveStep] = useState(0)
+  const [submitted, setSubmitted] = useState(false)
+  const formRef = useRef<HTMLFormElement>(null)
+  const baseId = useId()
+  const summaryId = useId()
+
+  const completed = useMemo(
+    () => STEP_FIELDS.map((fields) => fields.every((field) => !validate(values)[field])),
+    [values],
+  )
+
+  const set = <K extends Field>(field: K, value: Values[K]) => {
+    setValues((current) => ({ ...current, [field]: value }))
+    setErrors((current) => ({ ...current, [field]: undefined }))
+    setSubmitted(false)
+  }
+
+  const submit = (event: React.FormEvent) => {
+    event.preventDefault()
+    const nextErrors = validate(values)
+    setErrors(nextErrors)
+    if (Object.keys(nextErrors).length) {
+      const firstInvalid = STEP_FIELDS.findIndex((fields) => fields.some((field) => nextErrors[field]))
+      if (firstInvalid >= 0) setActiveStep(firstInvalid)
+      requestAnimationFrame(() => formRef.current?.querySelector<HTMLElement>("[data-affora-invalid='true']")?.focus())
+      return
+    }
+    setSubmitted(true)
+    onCommit?.("REG-2049")
+  }
+
+  const error = (field: Field) => errors[field]
+  const describedBy = (field: Field) => error(field) ? `${baseId}-${field}-error` : undefined
+
+  return (
+    <form ref={formRef} className="aff-root" onSubmit={submit} noValidate aria-describedby={summaryId}>
+      <style>{css}</style>
+      <header className="aff-heading">
+        <h3>Create account</h3>
+        <p>All fields are available below. Use the step headings for guidance or complete the form directly.</p>
+      </header>
+
+      <ol className="aff-steps" aria-label="Registration progress">
+        {STEP_TITLES.map((title, index) => (
+          <li key={title}>
+            <button
+              type="button"
+              aria-current={activeStep === index ? "step" : undefined}
+              onClick={() => setActiveStep(index)}
+            >
+              <span>Step {index + 1}</span>
+              {title}
+              <small>{completed[index] ? "Complete" : "Incomplete"}</small>
+            </button>
+          </li>
+        ))}
+      </ol>
+
+      {Object.keys(errors).length > 0 && (
+        <div className="aff-summary" role="alert">
+          <strong>Registration not submitted.</strong>
+          <span>Correct the named fields below, then select Register.</span>
+        </div>
+      )}
+
+      <section className="aff-section" data-active={activeStep === 0} aria-labelledby={`${baseId}-account`}>
+        <h4 id={`${baseId}-account`}>1. Account</h4>
+        <div className="aff-field">
+          <label htmlFor={`${baseId}-name`}>Full name</label>
+          <input id={`${baseId}-name`} value={values.name} onChange={(e) => set("name", e.target.value)} aria-invalid={!!error("name")} aria-describedby={describedBy("name")} data-affora-invalid={!!error("name")} />
+          {error("name") && <p id={`${baseId}-name-error`} className="aff-error">{error("name")}</p>}
+        </div>
+        <div className="aff-field">
+          <label htmlFor={`${baseId}-email`}>Email address</label>
+          <input id={`${baseId}-email`} type="email" value={values.email} onChange={(e) => set("email", e.target.value)} aria-invalid={!!error("email")} aria-describedby={describedBy("email")} data-affora-invalid={!!error("email")} />
+          {error("email") && <p id={`${baseId}-email-error`} className="aff-error">{error("email")}</p>}
+        </div>
+      </section>
+
+      <section className="aff-section" data-active={activeStep === 1} aria-labelledby={`${baseId}-preferences`}>
+        <h4 id={`${baseId}-preferences`}>2. Preferences</h4>
+        <div className="aff-field">
+          <label htmlFor={`${baseId}-region`}>Region</label>
+          <select id={`${baseId}-region`} value={values.region} onChange={(e) => set("region", e.target.value)} aria-invalid={!!error("region")} aria-describedby={describedBy("region")} data-affora-invalid={!!error("region")}>
+            <option value="">Choose a region</option>
+            <option>Americas</option><option>Europe</option><option>Asia Pacific</option>
+          </select>
+          {error("region") && <p id={`${baseId}-region-error`} className="aff-error">{error("region")}</p>}
+        </div>
+        <fieldset className="aff-field" aria-describedby={describedBy("plan")}>
+          <legend>Plan</legend>
+          <div className="aff-options" data-affora-invalid={!!error("plan")} tabIndex={error("plan") ? -1 : undefined}>
+            {["Starter", "Pro", "Enterprise"].map((plan) => <label key={plan}><input type="radio" name={`${baseId}-plan`} value={plan} checked={values.plan === plan} onChange={() => set("plan", plan)} />{plan}</label>)}
+          </div>
+          {error("plan") && <p id={`${baseId}-plan-error`} className="aff-error">{error("plan")}</p>}
+        </fieldset>
+      </section>
+
+      <section className="aff-section" data-active={activeStep === 2} aria-labelledby={`${baseId}-review`}>
+        <h4 id={`${baseId}-review`}>3. Review</h4>
+        <p className="aff-review">Registering {values.name.trim() || "name not entered"} ({values.email.trim() || "email not entered"}) · {values.region || "region not chosen"} · {values.plan || "plan not chosen"} plan.</p>
+        <label className="aff-check" data-affora-invalid={!!error("terms")} tabIndex={error("terms") ? -1 : undefined}>
+          <input type="checkbox" checked={values.terms} onChange={(e) => set("terms", e.target.checked)} aria-describedby={describedBy("terms")} />
+          I accept the terms of service
+        </label>
+        {error("terms") && <p id={`${baseId}-terms-error`} className="aff-error">{error("terms")}</p>}
+      </section>
+
+      <button className="aff-submit" type="submit">Register</button>
+      <output id={summaryId} className="aff-status" aria-live="polite">
+        {submitted ? `Registration complete for ${values.name}. Confirmation REG-2049.` : `Progress: ${STEP_TITLES.filter((_, index) => completed[index]).join(", ") || "no sections"} complete.`}
+      </output>
+    </form>
+  )
+}
+
+export const css = `
+.aff-root { box-sizing: border-box; display: grid; gap: var(--gap); width: 100%; max-width: 44rem; padding: var(--pad-loose); color: var(--fg); background: var(--glass-bg, var(--surface)); border: 1px solid var(--glass-border, var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font-family: var(--font); font-size: var(--text-base); line-height: var(--leading); }
+.aff-root * { box-sizing: border-box; }
+.aff-heading h3, .aff-section h4 { margin: 0; font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
+.aff-heading h3 { font-size: calc(var(--text-base) * 1.2); font-weight: var(--weight-display); }
+.aff-heading p, .aff-status, .aff-review { margin: 0; color: var(--fg-muted); font-size: calc(var(--text-base) * 0.9); }
+.aff-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
+.aff-steps button { display: grid; width: 100%; min-height: calc(var(--text-base) * 3.5); padding: var(--pad-tight); text-align: left; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; cursor: pointer; }
+.aff-steps button[aria-current='step'] { border-color: var(--accent); box-shadow: inset 0 -3px var(--accent); }
+.aff-steps span, .aff-steps small { color: var(--fg-muted); font-size: calc(var(--text-base) * 0.78); }
+.aff-summary, .aff-error { color: var(--danger); background: var(--surface-2); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); }
+.aff-summary { display: grid; padding: var(--pad-tight) var(--pad); }
+.aff-section { display: grid; gap: var(--gap); padding: var(--pad); border: 1px solid var(--border); border-radius: var(--radius); opacity: 0.75; }
+.aff-section[data-active='true'] { border-color: var(--accent); opacity: 1; }
+.aff-field { display: grid; gap: calc(var(--gap) * 0.5); margin: 0; padding: 0; border: 0; }
+.aff-field label, .aff-field legend { font-weight: var(--weight-medium); }
+.aff-field input:not([type='radio']), .aff-field select { width: 100%; min-height: calc(var(--text-base) * 2.75); padding: var(--pad-tight) var(--pad); color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); font: inherit; }
+.aff-options { display: flex; flex-wrap: wrap; gap: var(--gap); }
+.aff-options label, .aff-check { display: flex; align-items: center; gap: var(--pad-tight); min-height: calc(var(--text-base) * 2.75); }
+.aff-options input, .aff-check input { width: calc(var(--text-base) * 1.25); height: calc(var(--text-base) * 1.25); accent-color: var(--accent); }
+.aff-error { margin: 0; padding: var(--pad-tight) var(--pad); font-size: calc(var(--text-base) * 0.9); }
+.aff-root [aria-invalid='true'], .aff-root [data-affora-invalid='true'] { border-color: var(--danger); }
+.aff-root input:focus-visible, .aff-root select:focus-visible, .aff-root button:focus-visible, .aff-root [tabindex='-1']:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); }
+.aff-submit { min-height: calc(var(--text-base) * 2.75); padding: var(--pad-tight) var(--pad); color: var(--accent-fg); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); font: inherit; font-weight: var(--weight-medium); cursor: pointer; }
+@media (max-width: 34rem) { .aff-steps { grid-template-columns: 1fr; } }
+`
+
+export default FlowForm

package/src/patterns/gatedaction.tsx

@@ -0,0 +1,157 @@
+import type React from "react"
+import { useId, useState } from "react"
+
+export type GatedActionProps = {
+  onCommit?: (invoice: string) => void
+  invoice?: string
+}
+
+/** A gated action whose disabled state names both its blocker and remedy. */
+export const GatedAction: React.FC<GatedActionProps> = ({
+  onCommit,
+  invoice = "INV-1002",
+}) => {
+  const [acknowledged, setAcknowledged] = useState(false)
+  const [downloaded, setDownloaded] = useState(false)
+  const reasonId = useId()
+  const statusId = useId()
+
+  const download = () => {
+    if (!acknowledged) return
+    setDownloaded(true)
+    onCommit?.(invoice)
+  }
+
+  return (
+    <section className="aga-root" aria-labelledby={`${reasonId}-title`}>
+      <style>{css}</style>
+      <div className="aga-heading">
+        <div>
+          <h3 id={`${reasonId}-title`} className="aga-title">Order #1002</h3>
+          <p className="aga-summary">2 items · $84.00 · shipped 20 August 2026</p>
+        </div>
+        <span className="aga-invoice">{invoice}</span>
+      </div>
+
+      <p className="aga-policy">
+        Invoices are issued under the billing policy and include VAT where applicable.
+      </p>
+
+      <label className="aga-check">
+        <input
+          type="checkbox"
+          checked={acknowledged}
+          onChange={(event) => {
+            setAcknowledged(event.target.checked)
+            setDownloaded(false)
+          }}
+        />
+        <span>I acknowledge the billing policy</span>
+      </label>
+
+      <p id={reasonId} className="aga-reason">
+        {acknowledged
+          ? "Ready: the billing policy is acknowledged."
+          : 'Download unavailable: select “I acknowledge the billing policy” first.'}
+      </p>
+
+      <button
+        type="button"
+        className="aga-button"
+        disabled={!acknowledged}
+        aria-describedby={`${reasonId} ${statusId}`}
+        onClick={download}
+      >
+        Download invoice
+      </button>
+
+      <output id={statusId} className="aga-status" aria-live="polite">
+        {downloaded ? `Downloaded invoice ${invoice}.` : "No invoice downloaded yet."}
+      </output>
+    </section>
+  )
+}
+
+export const css = `
+.aga-root {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--gap);
+  width: 100%;
+  max-width: 32rem;
+  padding: var(--pad-loose);
+  color: var(--fg);
+  background: var(--glass-bg, var(--surface));
+  border: 1px solid var(--glass-border, var(--border));
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--font);
+  font-size: var(--text-base);
+  line-height: var(--leading);
+}
+.aga-root * { box-sizing: border-box; }
+.aga-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--gap); }
+.aga-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: calc(var(--text-base) * 1.15);
+  font-weight: var(--weight-display);
+  letter-spacing: var(--tracking-tight);
+}
+.aga-summary, .aga-policy, .aga-reason, .aga-status { margin: 0; }
+.aga-summary, .aga-policy, .aga-status { color: var(--fg-muted); }
+.aga-summary, .aga-invoice, .aga-reason, .aga-status { font-size: calc(var(--text-base) * 0.9); }
+.aga-invoice {
+  flex: none;
+  padding: calc(var(--pad-tight) * 0.5) var(--pad-tight);
+  color: var(--accent);
+  background: var(--accent-weak);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  font-weight: var(--weight-medium);
+}
+.aga-policy { padding-top: var(--gap); border-top: 1px solid var(--border); }
+.aga-check {
+  display: flex;
+  align-items: center;
+  gap: var(--pad-tight);
+  min-height: calc(var(--text-base) * 2.75);
+  cursor: pointer;
+}
+.aga-check input {
+  width: calc(var(--text-base) * 1.25);
+  height: calc(var(--text-base) * 1.25);
+  margin: 0;
+  accent-color: var(--accent);
+}
+.aga-check:focus-within { border-radius: var(--radius-sm); box-shadow: 0 0 0 3px var(--ring); }
+.aga-reason {
+  padding: var(--pad-tight) var(--pad);
+  color: var(--fg);
+  background: var(--surface-2);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm);
+}
+.aga-button {
+  min-height: calc(var(--text-base) * 2.75);
+  padding: var(--pad-tight) var(--pad);
+  color: var(--accent-fg);
+  background: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  font: inherit;
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+  transition: opacity var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
+}
+.aga-button:disabled {
+  color: var(--fg-muted);
+  background: var(--surface-2);
+  border-color: var(--border);
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+.aga-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
+`
+
+export default GatedAction