From 352e01d564197ae469a6a6364a7356433e1b7690 Mon Sep 17 00:00:00 2001
From: Marco Farina <marco.farina@jcmaxwell.it>
Date: Mon, 22 Jun 2026 13:11:52 +0200
Subject: [PATCH 1/9] feat(apprendista): template esercizi Volume 4 (componenti
 + demo + sidebar)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Infrastruttura per gli esercizi della Biblioteca dell'Apprendista (Vol. 4):

- <ExerciseLink>: card-link lato lezione per gli «Esercizi assegnati».
- <LessonMeta>/<Exercise>/<Solution>: pagina-esercizio con provenienza,
  esercizi numerati e soluzioni in PyRunner readonly. Card di provenienza
  con lo stile del redesign Claude Design (ancora icona+numero, breadcrumb,
  teoria), riadattata a token/font/icone del progetto. Niente bordo-accento
  sinistro.
- Modello ibrido: lezione = pagina singola se ha solo esercizi rapidi,
  categoria se ha anche esercizi dedicati/laboratori. Badge tipo pagina
  (rapidi/esercizio/laboratorio) con icone duotone (dumbbell/pen/flask).
- Sidebar apprendista ristrutturata (volume-sorgente aperto, resto chiuso).
- Pagine demo segnaposto + _esercizio-template.mdx (escluso dal build).
- Linking solo on-site (doc id/permalink), mai paideia_id.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 sidebars/apprendista.ts                       |  75 ++++-
 src/components/Exercise/index.tsx             | 189 ++++++++++++
 src/components/Exercise/styles.module.css     | 289 ++++++++++++++++++
 src/components/ExerciseLink/index.tsx         |  73 +++++
 src/components/ExerciseLink/styles.module.css | 117 +++++++
 src/components/Icon/icons.ts                  |  29 +-
 src/theme/MDXComponents.tsx                   |   6 +
 volumes/apprendista/_esercizio-template.mdx   | 132 ++++++++
 .../i-tipi-di-dato/esercizi-rapidi.mdx        |  59 ++++
 .../i-tipi-di-dato/esercizio-convertitore.mdx |  38 +++
 .../laboratorio-convertitore.mdx              |  41 +++
 .../programmatore/le-basi/le-variabili.mdx    |  70 +++++
 12 files changed, 1112 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Exercise/index.tsx
 create mode 100644 src/components/Exercise/styles.module.css
 create mode 100644 src/components/ExerciseLink/index.tsx
 create mode 100644 src/components/ExerciseLink/styles.module.css
 create mode 100644 volumes/apprendista/_esercizio-template.mdx
 create mode 100644 volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx
 create mode 100644 volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx
 create mode 100644 volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx
 create mode 100644 volumes/apprendista/programmatore/le-basi/le-variabili.mdx

diff --git a/sidebars/apprendista.ts b/sidebars/apprendista.ts
index a6830f3..0146468 100644
--- a/sidebars/apprendista.ts
+++ b/sidebars/apprendista.ts
@@ -1,11 +1,76 @@
-import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
 
 // Biblioteca dell'Apprendista (Volume 4 — esercizi e laboratori).
-// Sidebar per percorso, identica struttura agli altri volumi.
+//
+// Gli esercizi sono raggruppati per volume di provenienza:
+//   volume-sorgente > capitolo > lezione
+//
+// Modello IBRIDO al livello "lezione":
+//   - lezione con SOLO esercizi rapidi → è una PAGINA singola (un doc)
+//   - lezione con anche esercizi dedicati / laboratori → è una CATEGORIA, con
+//     sotto una pagina per tipo (Esercizi rapidi / Esercizio: … / Laboratorio: …)
+// Gli esercizietti di una pagina-batch sono sezioni <h2> (vanno nel TOC della
+// pagina), non voci di sidebar.
+//
+// Regola di collapse (per evitare la "lista infinita"):
+//   - categorie volume-sorgente: collapsed: false  → aperte, mostrano i capitoli
+//   - categorie capitolo / lezione: collapsed: true → chiuse di default
+// Così a colpo d'occhio si vedono i volumi-sorgente e l'elenco dei capitoli;
+// il resto resta nascosto finché non si espande.
+//
+// NB: `themeConfig.docs.sidebar.autoCollapseCategories` è GLOBALE ed è a `true`:
+// aprendo un capitolo, i fratelli si richiudono. Per questa sidebar sarebbe
+// preferibile `false` (vedi nota in docusaurus.config.ts).
+
+// Albero condiviso dai tre percorsi (it / liceo / its). Quando i percorsi
+// divergeranno, duplicare e personalizzare per chiave.
+const tree: SidebarsConfig[string] = [
+  'intro',
+  {
+    type: 'category',
+    label: 'Manuale del Programmatore',
+    collapsed: false, // volume-sorgente: aperto
+    items: [
+      {
+        type: 'category',
+        label: 'Le basi',
+        collapsed: true, // capitolo: chiuso
+        items: [
+          // lezione con solo esercizi rapidi → pagina singola
+          'programmatore/le-basi/le-variabili',
+          // lezione con più tipi di pagina → categoria
+          {
+            type: 'category',
+            label: 'I tipi di dato',
+            collapsed: true, // lezione: chiusa
+            items: [
+              'programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi',
+              'programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore',
+              'programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore',
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  // {
+  //   type: 'category',
+  //   label: 'Manuale dell'Artefice',
+  //   collapsed: false,
+  //   items: [ /* capitoli > lezioni > esercizi */ ],
+  // },
+  // {
+  //   type: 'category',
+  //   label: 'Manuale dell'Archivista',
+  //   collapsed: false,
+  //   items: [ /* capitoli > lezioni > esercizi */ ],
+  // },
+];
+
 const sidebars: SidebarsConfig = {
-  it: ['intro'],
-  liceo: ['intro'],
-  its: ['intro'],
+  it: tree,
+  liceo: tree,
+  its: tree,
 };
 
 export default sidebars;
diff --git a/src/components/Exercise/index.tsx b/src/components/Exercise/index.tsx
new file mode 100644
index 0000000..adb0fe1
--- /dev/null
+++ b/src/components/Exercise/index.tsx
@@ -0,0 +1,189 @@
+/**
+ * Componenti per le pagine-esercizio del Volume 4 (Biblioteca dell'Apprendista).
+ *
+ * Modello IBRIDO: una lezione con soli esercizi rapidi è una pagina singola;
+ * se ha anche esercizi dedicati / laboratori diventa una cartella con una pagina
+ * per tipo. Ogni pagina dichiara la sua provenienza con <LessonMeta>.
+ *
+ *   <LessonMeta kind="…" ... />   card compatta (badge tipo + provenienza + teoria)
+ *   <Exercise n="10.2" title="…">…</Exercise>   un esercizietto (nelle pagine batch)
+ *   <Solution>```py live readonly … ```</Solution>   soluzione (PyRunner non editabile)
+ *
+ * Numerazione: id interno volume.capitolo.lezione.esercizio (es. 1.3.10.2).
+ * A video l'esercizio mostra la forma corta lezione.esercizio (es. 10.2).
+ * Tutti i riferimenti sono identificatori on-site (path/permalink), mai esterni.
+ */
+import { type ReactNode } from 'react';
+import Link from '@docusaurus/Link';
+import Heading from '@theme/Heading';
+import Icon, { type IconName } from '@site/src/components/Icon';
+
+import styles from './styles.module.css';
+
+// ─── LessonMeta ──────────────────────────────────────────────────────────────
+
+interface TheoryRef {
+  /** path on-site della lezione */
+  to: string;
+  label: string;
+}
+
+/**
+ * Tipo di pagina-esercizio:
+ *   rapidi      → batch di esercizietti «a batteria» (più <Exercise> in pagina)
+ *   esercizio   → un esercizio completo, pagina dedicata
+ *   laboratorio → laboratorio/progetto, pagina dedicata
+ */
+type ExerciseKind = 'rapidi' | 'esercizio' | 'laboratorio';
+
+const KIND: Record<ExerciseKind, { label: string; icon: IconName }> = {
+  rapidi: { label: 'Esercizi rapidi', icon: 'dumbbell' },
+  esercizio: { label: 'Esercizio', icon: 'pen' },
+  laboratorio: { label: 'Laboratorio', icon: 'flask' },
+};
+
+interface LessonMetaProps {
+  /** Tipo di pagina: mostra un badge con icona. */
+  kind?: ExerciseKind;
+  /**
+   * Numero dell'esercizio (forma corta lezione.esercizio, es. «11.3»), per le
+   * pagine a esercizio singolo / laboratorio. Sui batch si usa <Exercise n="…">.
+   */
+  n?: string;
+  /** Path on-site della lezione che assegna gli esercizi. */
+  lessonTo: string;
+  /** Nome della lezione (link alla teoria). */
+  lessonLabel: string;
+  /** Volume di provenienza, es. «Manuale del Programmatore». */
+  volume: string;
+  /** Capitolo di provenienza, es. «Le basi». */
+  chapter: string;
+  /** Id interno della lezione, es. «1.3.10». Mostrato come badge discreto. */
+  lessonId?: string;
+  /** Lezioni che danno teoria supplementare. */
+  theory?: TheoryRef[];
+}
+
+export function LessonMeta({
+  kind = 'rapidi',
+  n,
+  lessonTo,
+  lessonLabel,
+  volume,
+  chapter,
+  lessonId,
+  theory = [],
+}: LessonMetaProps): ReactNode {
+  const k = KIND[kind];
+  const section = n ?? lessonId;
+  return (
+    <aside className={styles.card} aria-label="Provenienza dell'esercizio">
+      <div className={styles.inner}>
+        {/* ancora: icona grande a tutta altezza + tipo/numero impilati */}
+        <div className={styles.anchor}>
+          <span className={styles.iconTile}>
+            <Icon name={k.icon} size={28} />
+          </span>
+          <div className={styles.anchorText}>
+            <span className={styles.typeLabel}>{k.label}</span>
+            {section && <span className={styles.section}>{section}</span>}
+          </div>
+        </div>
+
+        {/* meta: assegnato in / teoria */}
+        <div className={styles.meta}>
+          <div className={styles.row}>
+            <span className={styles.label}>
+              <Icon name="thumbtack" size={13} color="var(--c-accent-dim)" />
+              Assegnato in
+            </span>
+            <span className={styles.crumbs}>
+              <span>{volume}</span>
+              <span className={styles.chevron} aria-hidden="true">
+                ›
+              </span>
+              <span>{chapter}</span>
+              <span className={styles.chevron} aria-hidden="true">
+                ›
+              </span>
+              <Link to={lessonTo} className={styles.crumbLeaf}>
+                {lessonLabel}
+              </Link>
+            </span>
+          </div>
+
+          {theory.length > 0 && (
+            <>
+              <div className={styles.divider} />
+              <div className={styles.row}>
+                <span className={styles.label}>
+                  <Icon
+                    name="book-open"
+                    size={13}
+                    color="var(--c-accent-dim)"
+                  />
+                  Teoria
+                </span>
+                <span className={styles.theory}>
+                  {theory.map((t) => (
+                    <Link key={t.to} to={t.to} className={styles.theoryLink}>
+                      {t.label}
+                    </Link>
+                  ))}
+                </span>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+// ─── Exercise ────────────────────────────────────────────────────────────────
+
+interface ExerciseProps {
+  /** Numero a video, forma corta lezione.esercizio, es. «10.2». */
+  n: string;
+  /** Titolo dell'esercizio, es. «Calcola la media». */
+  title: string;
+  children: ReactNode;
+}
+
+export function Exercise({ n, title, children }: ExerciseProps): ReactNode {
+  const id = `esercizio-${n.replace(/\./g, '-')}`;
+  return (
+    <section className={styles.exercise}>
+      <Heading as="h2" id={id} className={styles.exHeading}>
+        <span className={styles.exNum}>{n}</span>
+        <span className={styles.exTitle}>{title}</span>
+      </Heading>
+      {children}
+    </section>
+  );
+}
+
+// ─── Solution ────────────────────────────────────────────────────────────────
+
+interface SolutionProps {
+  /** Etichetta del disclosure. Default: «Mostra la soluzione». */
+  label?: string;
+  children: ReactNode;
+}
+
+export function Solution({
+  label = 'Mostra la soluzione',
+  children,
+}: SolutionProps): ReactNode {
+  return (
+    <details className={styles.solution}>
+      <summary className={styles.solutionSummary}>
+        <Icon name="check" size={16} className={styles.solutionIcon} />
+        <span>{label}</span>
+      </summary>
+      <div className={styles.solutionBody}>{children}</div>
+    </details>
+  );
+}
+
+export default Exercise;
diff --git a/src/components/Exercise/styles.module.css b/src/components/Exercise/styles.module.css
new file mode 100644
index 0000000..e32ce9a
--- /dev/null
+++ b/src/components/Exercise/styles.module.css
@@ -0,0 +1,289 @@
+/* LessonMeta — card di riferimento esercizio.
+   Stile ripreso dal redesign Claude Design (progetto "Rainbow bits",
+   ExerciseCard), riadattato ai token, font e icone del progetto.
+   Niente bordo-accento sinistro: l'accento sta nel pannello "ancora". */
+
+.card {
+  /* mappa la palette del design sui nostri token (che gestiscono già dark/light) */
+  --c-mono: var(--font-mono-ui);
+  --c-serif: var(--font-body);
+  --c-bg-from: var(--at-bg-panel);
+  --c-bg-to: var(--at-bg-subtle);
+  --c-border: var(--at-border);
+  --c-border-soft: color-mix(in srgb, var(--at-border) 55%, transparent);
+  --c-fg-strong: var(--at-fg-strong);
+  --c-fg-body: var(--at-fg-body);
+  --c-muted: var(--at-muted);
+  --c-faint: var(--at-faint);
+  --c-accent: var(--at-accent);
+  --c-accent-soft: var(--at-accent-soft);
+  --c-accent-dim: var(--at-accent-soft);
+  --c-accent-chip: var(--at-accent-chip);
+  --c-accent-chip-bd: var(--at-accent-chip-border);
+  --c-anchor-bg: color-mix(in srgb, var(--at-accent) 4%, transparent);
+
+  position: relative;
+  background: linear-gradient(180deg, var(--c-bg-from), var(--c-bg-to));
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin: 0 0 32px;
+}
+
+.inner {
+  display: flex;
+  align-items: stretch;
+}
+
+/* ── ancora (sinistra): tipo + numero ───────────────────── */
+.anchor {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 15px;
+  padding: 18px 22px;
+  border-right: 1px solid var(--c-border);
+  background: var(--c-anchor-bg);
+  min-width: 180px;
+}
+
+.iconTile {
+  align-self: stretch;
+  width: 54px;
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--c-accent-chip);
+  border: 1px solid var(--c-accent-chip-bd);
+  color: var(--c-accent);
+}
+
+.anchorText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  min-width: 0;
+}
+
+.typeLabel {
+  font-family: var(--c-mono);
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--c-accent-soft);
+}
+
+.section {
+  font-family: var(--c-mono);
+  font-size: 25px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--c-fg-strong);
+}
+
+/* ── meta (destra): assegnato in / teoria ───────────────── */
+.meta {
+  flex: 1;
+  min-width: 0;
+  padding: 16px 26px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.label {
+  width: 124px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-family: var(--c-mono);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--c-faint);
+  white-space: nowrap;
+}
+
+/* l'icona duotone ha il viewBox quadrato: la centriamo otticamente sulla
+   x-height del testo maiuscoletto */
+.label :global(svg) {
+  display: block;
+  margin-top: -1px;
+}
+
+.divider {
+  height: 1px;
+  background: var(--c-border-soft);
+}
+
+/* ── breadcrumb ─────────────────────────────────────────── */
+.crumbs {
+  font-family: var(--c-serif);
+  font-size: 16px;
+  line-height: 1.4;
+  color: var(--c-muted);
+}
+
+.chevron {
+  color: var(--c-faint);
+  font-family: var(--c-mono);
+  font-size: 0.82em;
+  padding: 0 4px;
+  user-select: none;
+}
+
+.crumbLeaf {
+  color: var(--c-accent-soft);
+  font-weight: 600;
+  text-decoration: none;
+  border-bottom: 1px solid var(--c-accent-chip-bd);
+  padding-bottom: 1px;
+}
+
+.crumbLeaf:hover {
+  color: var(--c-accent);
+  border-bottom-color: var(--c-accent);
+  text-decoration: none;
+}
+
+/* ── link teoria ────────────────────────────────────────── */
+.theory {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  align-items: baseline;
+}
+
+.theoryLink {
+  font-family: var(--c-serif);
+  font-size: 16px;
+  color: var(--c-fg-body);
+  text-decoration: none;
+  border-bottom: 1px solid var(--c-accent-dim);
+  padding-bottom: 1px;
+  transition: color var(--dur-fast) var(--ease-out);
+}
+
+.theoryLink:hover {
+  color: var(--c-accent-soft);
+  text-decoration: none;
+}
+
+/* ── responsive: su schermi stretti impila ancora + meta ── */
+@media (max-width: 600px) {
+  .inner {
+    flex-direction: column;
+  }
+  .anchor {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 16px;
+    border-right: none;
+    border-bottom: 1px solid var(--c-border);
+    min-width: 0;
+  }
+  .label {
+    width: auto;
+  }
+  .row {
+    flex-wrap: wrap;
+    gap: 6px 12px;
+  }
+}
+
+/* ─── Exercise ─────────────────────────────────────────────────────────────── */
+
+.exercise {
+  margin: 40px 0;
+  scroll-margin-top: 80px;
+}
+
+.exHeading {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.exNum {
+  flex-shrink: 0;
+  font-family: var(--font-mono-ui);
+  font-size: 0.78em;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--at-accent);
+  background: var(--at-accent-bg);
+  border: 1px solid var(--at-accent-chip-border);
+  border-radius: var(--radius-sm);
+  padding: 2px 10px;
+  line-height: 1.4;
+}
+
+.exTitle {
+  min-width: 0;
+}
+
+/* ─── Solution ─────────────────────────────────────────────────────────────── */
+
+.solution {
+  margin: 16px 0 0;
+  border: 1px solid var(--at-border);
+  border-radius: var(--radius-md);
+  background: var(--at-bg-subtle);
+  overflow: hidden;
+}
+
+.solutionSummary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  cursor: pointer;
+  list-style: none;
+  font-family: var(--font-mono-ui);
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--at-fg-strong);
+  user-select: none;
+  transition: background var(--dur-fast) var(--ease-out);
+}
+
+.solutionSummary::-webkit-details-marker {
+  display: none;
+}
+
+.solutionSummary:hover {
+  background: var(--at-bg-chip);
+}
+
+.solutionIcon {
+  color: #16a34a;
+  flex-shrink: 0;
+}
+
+html[data-theme='dark'] .solutionIcon {
+  color: #4ade80;
+}
+
+.solutionBody {
+  padding: 4px 16px 14px;
+  border-top: 1px solid var(--at-border);
+}
diff --git a/src/components/ExerciseLink/index.tsx b/src/components/ExerciseLink/index.tsx
new file mode 100644
index 0000000..59323ca
--- /dev/null
+++ b/src/components/ExerciseLink/index.tsx
@@ -0,0 +1,73 @@
+/**
+ * ExerciseLink — card-link da usare nelle lezioni (volumi 1–3) per elencare gli
+ * esercizi assegnati, che vivono nel Volume 4 (Biblioteca dell'Apprendista).
+ *
+ * Il riferimento è SEMPRE un identificatore on-site: `to` è il path del sito
+ * (senza baseUrl, lo aggiunge Docusaurus), es.
+ *   /apprendista/programmatore/le-basi/le-variabili/calcola-la-media
+ * Mai riferimenti interni esterni al sito (niente paideia_id o simili).
+ */
+import React, { type ReactNode } from 'react';
+import Link from '@docusaurus/Link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import styles from './styles.module.css';
+
+type Difficulty = 'facile' | 'medio' | 'difficile';
+
+interface ExerciseLinkProps {
+  /** Path on-site dell'esercizio (senza baseUrl). Es. `/apprendista/...`. */
+  to: string;
+  /** Difficoltà, opzionale: mostra un chip colorato. */
+  difficulty?: Difficulty;
+  /** Tempo stimato, opzionale. Es. `20 min`. */
+  time?: string;
+  /** Titolo dell'esercizio. */
+  children: ReactNode;
+}
+
+const DIFFICULTY_LABEL: Record<Difficulty, string> = {
+  facile: 'Facile',
+  medio: 'Medio',
+  difficile: 'Difficile',
+};
+
+export default function ExerciseLink({
+  to,
+  difficulty,
+  time,
+  children,
+}: ExerciseLinkProps): ReactNode {
+  return (
+    <Link to={to} className={styles.card}>
+      <FontAwesomeIcon
+        icon={['fas', 'dumbbell']}
+        className={styles.icon}
+        aria-hidden="true"
+      />
+      <span className={styles.body}>
+        <span className={styles.title}>{children}</span>
+        {(difficulty || time) && (
+          <span className={styles.meta}>
+            {difficulty && (
+              <span className={styles.chip} data-difficulty={difficulty}>
+                {DIFFICULTY_LABEL[difficulty]}
+              </span>
+            )}
+            {time && (
+              <span className={styles.time}>
+                <FontAwesomeIcon icon={['fas', 'clock']} aria-hidden="true" />{' '}
+                {time}
+              </span>
+            )}
+          </span>
+        )}
+      </span>
+      <FontAwesomeIcon
+        icon={['fas', 'arrow-right']}
+        className={styles.arrow}
+        aria-hidden="true"
+      />
+    </Link>
+  );
+}
diff --git a/src/components/ExerciseLink/styles.module.css b/src/components/ExerciseLink/styles.module.css
new file mode 100644
index 0000000..28601fc
--- /dev/null
+++ b/src/components/ExerciseLink/styles.module.css
@@ -0,0 +1,117 @@
+.card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 16px;
+  margin: 10px 0;
+  border-radius: var(--radius-md);
+  background: var(--at-bg-subtle);
+  border: 1px solid var(--at-border);
+  color: var(--at-fg);
+  text-decoration: none;
+  transition:
+    border-color var(--dur-fast) var(--ease-out),
+    background var(--dur-fast) var(--ease-out),
+    transform var(--dur-fast) var(--ease-out),
+    box-shadow var(--dur-fast) var(--ease-out);
+}
+
+.card:hover {
+  text-decoration: none;
+  border-color: var(--at-accent);
+  background: var(--at-accent-bg);
+  box-shadow: var(--shadow-card);
+}
+
+.card:active {
+  transform: scale(0.98);
+}
+
+.icon {
+  font-size: 18px;
+  color: var(--at-accent);
+  flex-shrink: 0;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.3;
+  color: var(--at-fg-strong);
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: var(--font-mono-ui);
+  font-size: 0.78rem;
+  color: var(--at-muted);
+}
+
+.chip {
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  padding: 1px 8px;
+  border-radius: var(--radius-pill);
+  border: 1px solid transparent;
+}
+
+.chip[data-difficulty='facile'] {
+  background: rgba(34, 197, 94, 0.12);
+  border-color: rgba(34, 197, 94, 0.3);
+  color: #15803d;
+}
+
+.chip[data-difficulty='medio'] {
+  background: rgba(245, 158, 11, 0.12);
+  border-color: rgba(245, 158, 11, 0.3);
+  color: #b45309;
+}
+
+.chip[data-difficulty='difficile'] {
+  background: rgba(239, 68, 68, 0.12);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #b91c1c;
+}
+
+html[data-theme='dark'] .chip[data-difficulty='facile'] {
+  color: #4ade80;
+}
+
+html[data-theme='dark'] .chip[data-difficulty='medio'] {
+  color: #fbbf24;
+}
+
+html[data-theme='dark'] .chip[data-difficulty='difficile'] {
+  color: #f87171;
+}
+
+.time {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.arrow {
+  font-size: 13px;
+  color: var(--at-faint);
+  flex-shrink: 0;
+  transition:
+    transform var(--dur-fast) var(--ease-out),
+    color var(--dur-fast) var(--ease-out);
+}
+
+.card:hover .arrow {
+  color: var(--at-accent);
+  transform: translateX(3px);
+}
diff --git a/src/components/Icon/icons.ts b/src/components/Icon/icons.ts
index 038de1f..91f21dc 100644
--- a/src/components/Icon/icons.ts
+++ b/src/components/Icon/icons.ts
@@ -51,7 +51,12 @@ export type IconName =
   | 'wrench'
   | 'broom-wide'
   | 'tag'
-  | 'rss';
+  | 'rss'
+  // Esercizi (Volume 4)
+  | 'thumbtack'
+  | 'dumbbell'
+  | 'pen'
+  | 'flask';
 
 export const DUOTONE: Record<IconName, DuotoneGlyph> = {
   heart: {
@@ -235,4 +240,26 @@ export const DUOTONE: Record<IconName, DuotoneGlyph> = {
     s: 'M0 64c0 17.7 14.3 32 32 32 194.4 0 352 157.6 352 352 0 17.7 14.3 32 32 32s32-14.3 32-32C448 218.2 261.8 32 32 32 14.3 32 0 46.3 0 64zM0 192c0 17.7 14.3 32 32 32 123.7 0 224 100.3 224 224 0 17.7 14.3 32 32 32s32-14.3 32-32c0-159.1-128.9-288-288-288-17.7 0-32 14.3-32 32z',
     p: 'M0 416a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z',
   },
+  // Puntina da disegno: "appuntato/assegnato". Sorgente: Font Awesome 7.1.0 duotone.
+  thumbtack: {
+    vb: '0 0 384 512',
+    s: 'M1.2 311.2c-2.8 9.7-.8 20 5.2 28.1S22 352 32 352l320 0c10 0 19.5-4.7 25.5-12.7s8-18.4 5.2-28.1L379 297.8c-12.4-43.3-41-78.5-78.2-99.7L290.5 64 320 64c17.7 0 32-14.3 32-32S337.7 0 320 0L64 0C46.3 0 32 14.3 32 32S46.3 64 64 64l29.5 0-10.3 134.1C46.1 219.4 17.4 254.6 5 297.8L1.2 311.2z',
+    p: 'M160 512l0-160 64 0 0 160c0 17.7-14.3 32-32 32s-32-14.3-32-32z',
+  },
+  // Tipi di pagina-esercizio. Sorgenti: Font Awesome 7.1.0 duotone.
+  dumbbell: {
+    vb: '0 0 640 512',
+    s: 'M0 256c0 17.7 14.3 32 32 32l0-64c-17.7 0-32 14.3-32 32zm192-32l0 64 256 0 0-64-256 0zm416 0l0 64c17.7 0 32-14.3 32-32s-14.3-32-32-32z',
+    p: 'M144 64c26.5 0 48 21.5 48 48l0 288c0 26.5-21.5 48-48 48s-48-21.5-48-48l0-16-16 0c-26.5 0-48-21.5-48-48l0-160c0-26.5 21.5-48 48-48l16 0 0-16c0-26.5 21.5-48 48-48zm352 0c26.5 0 48 21.5 48 48l0 16 16 0c26.5 0 48 21.5 48 48l0 160c0 26.5-21.5 48-48 48l-16 0 0 16c0 26.5-21.5 48-48 48s-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48z',
+  },
+  pen: {
+    vb: '0 0 512 512',
+    s: 'M291 83c46 46 92 92 137.9 137.9 20.6-20.6 41.2-41.2 61.9-61.9 13.6-13.6 21.2-31.9 21.2-51.1s-7.6-37.6-21.2-51.1L455.1 21.2C441.6 7.6 423.2 0 404 0s-37.6 7.6-51.1 21.2C332.3 41.8 311.6 62.4 291 83z',
+    p: 'M58.9 315.1c-10.7 10.7-18.5 24.1-22.6 38.7L.9 481.6c-2.3 8.3 0 17.3 6.2 23.4s15.1 8.5 23.4 6.2l127.8-35.5c14.6-4.1 27.9-11.8 38.7-22.6L429 221 291 83 58.9 315.1z',
+  },
+  flask: {
+    vb: '0 0 448 512',
+    s: 'M68.9 448l73.1-128 164 0 73.1 128-310.3 0z',
+    p: 'M160 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 151.5 120.5 210.8c4.9 8.7 7.5 18.5 7.5 28.4 0 31.6-25.6 57.3-57.3 57.3L57.3 512C25.6 512 0 486.4 0 454.7 0 444.7 2.6 435 7.5 426.3L128 215.5 128 64c-17.7 0-32-14.3-32-32S110.3 0 128 0l32 0zm32 64l0 151.5c0 11.1-2.9 22.1-8.4 31.8L68.9 448 379.1 448 264.4 247.3c-5.5-9.7-8.4-20.6-8.4-31.8l0-151.5-64 0z',
+  },
 };
diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx
index e81e8f4..2877014 100644
--- a/src/theme/MDXComponents.tsx
+++ b/src/theme/MDXComponents.tsx
@@ -16,6 +16,8 @@ import Quiz, {
 import PyRunner from '@site/src/theme/PyRunner';
 import SQLRunner from '@site/src/theme/SQLRunner';
 import Algorithm from '@site/src/components/Algorithm';
+import ExerciseLink from '@site/src/components/ExerciseLink';
+import Exercise, { LessonMeta, Solution } from '@site/src/components/Exercise';
 
 export default {
   ...MDXComponents,
@@ -31,4 +33,8 @@ export default {
   PyRunner,
   SQLRunner,
   Algorithm,
+  ExerciseLink,
+  Exercise,
+  LessonMeta,
+  Solution,
 };
diff --git a/volumes/apprendista/_esercizio-template.mdx b/volumes/apprendista/_esercizio-template.mdx
new file mode 100644
index 0000000..f420a8f
--- /dev/null
+++ b/volumes/apprendista/_esercizio-template.mdx
@@ -0,0 +1,132 @@
+---
+# ─────────────────────────────────────────────────────────────────────────────
+# TEMPLATE PAGINE-ESERCIZIO — Volume 4 (Biblioteca dell'Apprendista)
+#
+# File con prefisso "_": Docusaurus lo ESCLUDE dal build. È un promemoria da cui
+# copiare. Sotto trovi i TRE tipi di pagina; copia il blocco che ti serve in
+#   volumes/apprendista/<volume-sorgente>/<capitolo>/<...>.mdx
+#
+# MODELLO IBRIDO (livello "lezione"):
+#   - lezione con SOLO esercizi rapidi → un'unica pagina:
+#       <capitolo>/<lezione>.mdx
+#   - lezione con anche esercizi dedicati / laboratori → una cartella-lezione:
+#       <capitolo>/<lezione>/esercizi-rapidi.mdx
+#       <capitolo>/<lezione>/esercizio-<slug>.mdx
+#       <capitolo>/<lezione>/laboratorio-<slug>.mdx
+#     e in sidebars/apprendista.ts la lezione diventa una `category`.
+#
+# NUMERAZIONE: id interno volume.capitolo.lezione.esercizio (es. 1.3.11.3).
+#   - <LessonMeta lessonId="1.3.11">  coordinata della lezione
+#   - batch:  <Exercise n="11.1">     forma corta lezione.esercizio
+#   - singola: <LessonMeta n="11.3">  il numero sta nel badge
+#
+# REGOLA FERREA sui link: SOLO identificatori on-site (path/permalink del sito),
+# MAI riferimenti interni esterni (niente paideia_id e simili).
+# ─────────────────────────────────────────────────────────────────────────────
+title: <titolo della pagina>
+sidebar_label: <label in sidebar>
+sidebar_position: 1
+description: <una frase>
+---
+
+{/* ===========================================================================
+    TIPO 1 — ESERCIZI RAPIDI (batch): più esercizietti «a batteria» in pagina.
+    title pagina = nome lezione. kind="rapidi". Più <Exercise>.
+    =========================================================================== */}
+
+<LessonMeta
+  kind="rapidi"
+  volume="Manuale del Programmatore"
+  chapter="<nome capitolo>"
+  lessonId="1.3.11"
+  lessonTo="/programmatore/<slug-lezione>"
+  lessonLabel="<nome lezione>"
+  theory={[{ to: '/programmatore/<slug>', label: '<lezione>' }]}
+/>
+
+<Exercise n="11.1" title="<titolo esercizietto>">
+
+Testo della consegna.
+
+```py live
+# codice di partenza (opzionale)
+```
+
+<Solution>
+
+```py live readonly
+# soluzione (PyRunner non editabile, ma eseguibile)
+```
+
+</Solution>
+
+</Exercise>
+
+{/* ===========================================================================
+    TIPO 2 — ESERCIZIO dedicato: un esercizio completo, pagina sua.
+    title pagina = nome esercizio. kind="esercizio" + n="11.3". Niente <Exercise>.
+    =========================================================================== */}
+
+<LessonMeta
+  kind="esercizio"
+  n="11.3"
+  volume="Manuale del Programmatore"
+  chapter="<nome capitolo>"
+  lessonId="1.3.11"
+  lessonTo="/programmatore/<slug-lezione>"
+  lessonLabel="<nome lezione>"
+  theory={[{ to: '/programmatore/<slug>', label: '<lezione>' }]}
+/>
+
+Testo della consegna (il corpo della pagina È l'esercizio).
+
+```py live
+# codice di partenza
+```
+
+<Solution>
+
+```py live readonly
+# soluzione
+```
+
+</Solution>
+
+{/* ===========================================================================
+    TIPO 3 — LABORATORIO: progetto più ampio, a passi, pagina sua.
+    title pagina = nome lab. kind="laboratorio" + n. Usa ### per i passi.
+    =========================================================================== */}
+
+<LessonMeta
+  kind="laboratorio"
+  n="11.4"
+  volume="Manuale del Programmatore"
+  chapter="<nome capitolo>"
+  lessonId="1.3.11"
+  lessonTo="/programmatore/<slug-lezione>"
+  lessonLabel="<nome lezione>"
+  theory={[{ to: '/programmatore/<slug>', label: '<lezione>' }]}
+/>
+
+Introduzione del laboratorio.
+
+### Passo 1 — …
+
+```py live
+# …
+```
+
+{/* ───────────────────────────────────────────────────────────────────────────
+    LATO LEZIONE (volumi 1–3): nella lezione che assegna, con il path on-site
+    della pagina-esercizio (eventualmente con anchor #esercizio-11-3):
+
+      ## Esercizi assegnati
+
+      <ExerciseLink
+        to="/apprendista/programmatore/<capitolo>/<lezione>/esercizio-<slug>"
+        difficulty="medio"
+        time="20 min"
+      >
+        11.3 — Titolo dell'esercizio
+      </ExerciseLink>
+   ─────────────────────────────────────────────────────────────────────────── */}
diff --git a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx
new file mode 100644
index 0000000..e66259a
--- /dev/null
+++ b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx
@@ -0,0 +1,59 @@
+---
+title: Esercizi rapidi
+sidebar_label: Esercizi rapidi
+sidebar_position: 1
+description: Pagina dimostrativa — batch di esercizietti sulla lezione «I tipi di dato».
+---
+
+<LessonMeta
+  kind="rapidi"
+  volume="Manuale del Programmatore"
+  chapter="Le basi"
+  lessonId="1.3.11"
+  lessonTo="/programmatore/variabili"
+  lessonLabel="I tipi di dato"
+  theory={[{ to: '/programmatore/variabili', label: 'Le variabili' }]}
+/>
+
+<Exercise n="11.1" title="Indovina il tipo">
+
+Stampa il tipo di ciascun valore con `type()`.
+
+```py live
+print(type(42))
+print(type(3.14))
+# aggiungi una stringa e un booleano
+```
+
+<Solution>
+
+```py live readonly
+print(type(42))
+print(type(3.14))
+print(type("ciao"))
+print(type(True))
+```
+
+</Solution>
+
+</Exercise>
+
+<Exercise n="11.2" title="Conversioni">
+
+Converti la stringa `"7"` in intero e sommala a `3`.
+
+```py live
+s = "7"
+# converti e somma
+```
+
+<Solution>
+
+```py live readonly
+s = "7"
+print(int(s) + 3)
+```
+
+</Solution>
+
+</Exercise>
diff --git a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx
new file mode 100644
index 0000000..792bd32
--- /dev/null
+++ b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx
@@ -0,0 +1,38 @@
+---
+title: Convertitore di temperatura
+sidebar_label: 'Esercizio: convertitore'
+sidebar_position: 2
+description: Pagina dimostrativa — un esercizio completo con pagina dedicata.
+---
+
+<LessonMeta
+  kind="esercizio"
+  n="11.3"
+  volume="Manuale del Programmatore"
+  chapter="Le basi"
+  lessonId="1.3.11"
+  lessonTo="/programmatore/variabili"
+  lessonLabel="I tipi di dato"
+  theory={[{ to: '/programmatore/variabili', label: 'Le variabili' }]}
+/>
+
+Scrivi un programma che, data una temperatura in gradi Celsius, stampi il valore
+in Fahrenheit. La formula è `F = C * 9 / 5 + 32`.
+
+Quando funziona, prova a leggere il valore di partenza da una variabile invece
+che da un numero scritto a mano.
+
+```py live
+celsius = 25
+# calcola e stampa i gradi Fahrenheit
+```
+
+<Solution>
+
+```py live readonly
+celsius = 25
+fahrenheit = celsius * 9 / 5 + 32
+print(fahrenheit)
+```
+
+</Solution>
diff --git a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx
new file mode 100644
index 0000000..231852a
--- /dev/null
+++ b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx
@@ -0,0 +1,41 @@
+---
+title: 'Laboratorio: piccolo convertitore'
+sidebar_label: 'Laboratorio: convertitore'
+sidebar_position: 3
+description: Pagina dimostrativa — un laboratorio (progetto) con pagina dedicata.
+---
+
+<LessonMeta
+  kind="laboratorio"
+  n="11.4"
+  volume="Manuale del Programmatore"
+  chapter="Le basi"
+  lessonId="1.3.11"
+  lessonTo="/programmatore/variabili"
+  lessonLabel="I tipi di dato"
+  theory={[{ to: '/programmatore/variabili', label: 'Le variabili' }]}
+/>
+
+In questo laboratorio metti insieme quello che hai imparato e costruisci un
+piccolo convertitore passo dopo passo. È un lavoro più lungo di un esercizio
+singolo: prenditi il tuo tempo.
+
+### Passo 1 — i dati
+
+Parti da una temperatura in Celsius e calcola Fahrenheit e Kelvin.
+
+```py live
+celsius = 20
+# Fahrenheit e Kelvin
+```
+
+### Passo 2 — un riepilogo
+
+Stampa una riga riassuntiva con tutti e tre i valori.
+
+```py live readonly
+celsius = 20
+fahrenheit = celsius * 9 / 5 + 32
+kelvin = celsius + 273.15
+print(f"{celsius} C = {fahrenheit} F = {kelvin} K")
+```
diff --git a/volumes/apprendista/programmatore/le-basi/le-variabili.mdx b/volumes/apprendista/programmatore/le-basi/le-variabili.mdx
new file mode 100644
index 0000000..536b857
--- /dev/null
+++ b/volumes/apprendista/programmatore/le-basi/le-variabili.mdx
@@ -0,0 +1,70 @@
+---
+title: Le variabili
+sidebar_label: Le variabili
+sidebar_position: 1
+description: Esercizi dimostrativi sul template del Volume 4 — pagina-lezione con più esercizi numerati.
+---
+
+:::note Pagina dimostrativa
+Pagina di tipo **Esercizi rapidi** (batch): più esercizietti numerati da fare
+«a batteria». Questa lezione ha solo questo, quindi in sidebar è una pagina
+singola (modello ibrido). I contenuti sono segnaposto.
+:::
+
+<LessonMeta
+  kind="rapidi"
+  volume="Manuale del Programmatore"
+  chapter="Le basi"
+  lessonId="1.3.10"
+  lessonTo="/programmatore/variabili"
+  lessonLabel="Le variabili"
+  theory={[{ to: '/programmatore/variabili', label: 'Le variabili' }]}
+/>
+
+<Exercise n="10.1" title="Scambia due variabili">
+
+Hai due variabili `a` e `b`. Scambia i loro valori, poi stampali.
+
+```py live
+a = 3
+b = 8
+# scambia a e b, poi stampali
+```
+
+<Solution>
+
+```py live readonly
+a = 3
+b = 8
+a, b = b, a
+print(a, b)
+```
+
+</Solution>
+
+</Exercise>
+
+<Exercise n="10.2" title="Calcola la media">
+
+Date tre variabili numeriche, calcola e stampa la loro media aritmetica.
+
+```py live
+a = 4
+b = 7
+c = 10
+# calcola la media e stampala
+```
+
+<Solution>
+
+```py live readonly
+a = 4
+b = 7
+c = 10
+media = (a + b + c) / 3
+print(media)
+```
+
+</Solution>
+
+</Exercise>

From c51c7f59e697e3d22ff26c07cc6757de204eb4db Mon Sep 17 00:00:00 2001
From: Marco Farina <marco.farina@jcmaxwell.it>
Date: Mon, 22 Jun 2026 16:29:01 +0200
Subject: [PATCH 2/9] feat(apprendista): accento per-tipo a livello pagina
 (Vol.4 non-blu)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ogni pagina-esercizio della Biblioteca dell'Apprendista è monocroma nel colore
del suo tipo — rapidi=ambra, esercizio=viola, laboratorio=teal — così il Vol.4
si stacca visivamente dagli altri 3 (che restano blu). La card non-blu era già
arrivata; ora il colore si propaga a titolo, chip-numero, bottoni PyRunner,
icone e link in prosa.

Meccanismo:
- frontmatter `exercise_kind` (rapidi|esercizio|laboratorio);
- swizzle DocItem/Content imposta `data-exercise-kind` sul solo wrapper del
  contenuto (sidebar e briciole escluse);
- custom.css: blocco [data-exercise-kind] che deriva l'intera famiglia
  --ifm-color-primary, --at-accent e il gradiente titolo --at-grad-accent da
  due variabili --ex-pa/--ex-pa-soft (per-tipo, light+dark).
- <LessonMeta> non ha più colori hardcoded: eredita l'accento di pagina.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/Exercise/index.tsx             |  6 +-
 src/components/Exercise/styles.module.css     | 19 +++++--
 src/css/custom.css                            | 55 +++++++++++++++++++
 src/theme/DocItem/Content/index.tsx           |  6 ++
 volumes/apprendista/_esercizio-template.mdx   |  5 ++
 .../i-tipi-di-dato/esercizi-rapidi.mdx        |  1 +
 .../i-tipi-di-dato/esercizio-convertitore.mdx |  1 +
 .../laboratorio-convertitore.mdx              |  1 +
 .../programmatore/le-basi/le-variabili.mdx    |  1 +
 9 files changed, 88 insertions(+), 7 deletions(-)

diff --git a/src/components/Exercise/index.tsx b/src/components/Exercise/index.tsx
index adb0fe1..04cf6b1 100644
--- a/src/components/Exercise/index.tsx
+++ b/src/components/Exercise/index.tsx
@@ -77,7 +77,11 @@ export function LessonMeta({
   const k = KIND[kind];
   const section = n ?? lessonId;
   return (
-    <aside className={styles.card} aria-label="Provenienza dell'esercizio">
+    <aside
+      className={styles.card}
+      data-kind={kind}
+      aria-label="Provenienza dell'esercizio"
+    >
       <div className={styles.inner}>
         {/* ancora: icona grande a tutta altezza + tipo/numero impilati */}
         <div className={styles.anchor}>
diff --git a/src/components/Exercise/styles.module.css b/src/components/Exercise/styles.module.css
index e32ce9a..18d41ae 100644
--- a/src/components/Exercise/styles.module.css
+++ b/src/components/Exercise/styles.module.css
@@ -15,12 +15,16 @@
   --c-fg-body: var(--at-fg-body);
   --c-muted: var(--at-muted);
   --c-faint: var(--at-faint);
-  --c-accent: var(--at-accent);
-  --c-accent-soft: var(--at-accent-soft);
-  --c-accent-dim: var(--at-accent-soft);
-  --c-accent-chip: var(--at-accent-chip);
-  --c-accent-chip-bd: var(--at-accent-chip-border);
-  --c-anchor-bg: color-mix(in srgb, var(--at-accent) 4%, transparent);
+  /* accento per-tipo: un solo colore, i chip si derivano da qui */
+  --ex-accent: var(--at-accent);
+  --ex-accent-soft: var(--at-accent-soft);
+
+  --c-accent: var(--ex-accent);
+  --c-accent-soft: var(--ex-accent-soft);
+  --c-accent-dim: var(--ex-accent-soft);
+  --c-accent-chip: color-mix(in srgb, var(--ex-accent) 9%, transparent);
+  --c-accent-chip-bd: color-mix(in srgb, var(--ex-accent) 24%, transparent);
+  --c-anchor-bg: color-mix(in srgb, var(--ex-accent) 4%, transparent);
 
   position: relative;
   background: linear-gradient(180deg, var(--c-bg-from), var(--c-bg-to));
@@ -30,6 +34,9 @@
   margin: 0 0 32px;
 }
 
+/* Il colore per-tipo arriva dall'accento di pagina (custom.css,
+   [data-exercise-kind]): la card eredita --at-accent, niente override locale. */
+
 .inner {
   display: flex;
   align-items: stretch;
diff --git a/src/css/custom.css b/src/css/custom.css
index e4dbab4..2c2a443 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -1588,3 +1588,58 @@ html[data-theme='dark'] {
   margin: 0;
   line-height: 1;
 }
+
+/* ─── Volume 4 (esercizi): accento per-tipo a livello di pagina ──────────────
+   Ogni pagina-esercizio della Biblioteca dell'Apprendista è monocroma nel
+   colore del suo tipo (rapidi = ambra, esercizio = viola, laboratorio = teal);
+   gli altri 3 volumi restano blu. `data-exercise-kind` è impostato dallo
+   swizzle DocItem/Content da `frontMatter.exercise_kind` sul solo wrapper del
+   contenuto (sidebar e briciole escluse). Tutti i token accento si derivano da
+   --ex-pa / --ex-pa-soft, così basta cambiare quei due per ritoccare il tipo. */
+[data-exercise-kind] {
+  --ifm-color-primary: var(--ex-pa);
+  --ifm-color-primary-dark: color-mix(in srgb, var(--ex-pa) 90%, #000);
+  --ifm-color-primary-darker: color-mix(in srgb, var(--ex-pa) 85%, #000);
+  --ifm-color-primary-darkest: color-mix(in srgb, var(--ex-pa) 72%, #000);
+  --ifm-color-primary-light: color-mix(in srgb, var(--ex-pa) 90%, #fff);
+  --ifm-color-primary-lighter: color-mix(in srgb, var(--ex-pa) 85%, #fff);
+  --ifm-color-primary-lightest: color-mix(in srgb, var(--ex-pa) 72%, #fff);
+
+  --at-accent: var(--ex-pa);
+  --at-accent-soft: var(--ex-pa-soft);
+  --at-accent-bg: color-mix(in srgb, var(--ex-pa) 7%, transparent);
+  --at-accent-chip: color-mix(in srgb, var(--ex-pa) 9%, transparent);
+  --at-accent-chip-border: color-mix(in srgb, var(--ex-pa) 22%, transparent);
+
+  --at-grad-accent: linear-gradient(
+    135deg,
+    var(--ex-pa) 0%,
+    var(--ex-pa-soft) 100%
+  );
+}
+
+[data-exercise-kind='rapidi'] {
+  --ex-pa: #b45309;
+  --ex-pa-soft: #92400e;
+}
+[data-exercise-kind='esercizio'] {
+  --ex-pa: #7c3aed;
+  --ex-pa-soft: #6d28d9;
+}
+[data-exercise-kind='laboratorio'] {
+  --ex-pa: #0d9488;
+  --ex-pa-soft: #0f766e;
+}
+
+html[data-theme='dark'] [data-exercise-kind='rapidi'] {
+  --ex-pa: #fbbf24;
+  --ex-pa-soft: #fcd34d;
+}
+html[data-theme='dark'] [data-exercise-kind='esercizio'] {
+  --ex-pa: #a78bfa;
+  --ex-pa-soft: #c4b5fd;
+}
+html[data-theme='dark'] [data-exercise-kind='laboratorio'] {
+  --ex-pa: #2dd4bf;
+  --ex-pa-soft: #5eead4;
+}
diff --git a/src/theme/DocItem/Content/index.tsx b/src/theme/DocItem/Content/index.tsx
index 6d38000..bf1e2db 100644
--- a/src/theme/DocItem/Content/index.tsx
+++ b/src/theme/DocItem/Content/index.tsx
@@ -63,11 +63,17 @@ function useChapterNumber(): number | null {
 export default function DocItemContent({ children }: Props): ReactNode {
   const syntheticTitle = useSyntheticTitle();
   const chapter = useChapterNumber();
+  const { frontMatter } = useDoc();
+  // Vol. 4 (esercizi): tinge la pagina con l'accento del tipo (rapidi/esercizio/
+  // laboratorio). L'override dei token vive in custom.css ([data-exercise-kind]).
+  const exerciseKind = (frontMatter as { exercise_kind?: string })
+    .exercise_kind;
   const kicker =
     chapter !== null ? `Capitolo ${String(chapter).padStart(2, '0')}` : null;
   return (
     <div
       data-pagefind-body
+      data-exercise-kind={exerciseKind}
       className={clsx(
         ThemeClassNames.docs.docMarkdown,
         'markdown',
diff --git a/volumes/apprendista/_esercizio-template.mdx b/volumes/apprendista/_esercizio-template.mdx
index f420a8f..7d78a6c 100644
--- a/volumes/apprendista/_esercizio-template.mdx
+++ b/volumes/apprendista/_esercizio-template.mdx
@@ -20,6 +20,10 @@
 #   - batch:  <Exercise n="11.1">     forma corta lezione.esercizio
 #   - singola: <LessonMeta n="11.3">  il numero sta nel badge
 #
+# COLORE PAGINA: `exercise_kind` (rapidi|esercizio|laboratorio) tinge l'INTERA
+# pagina con l'accento del tipo (ambra/viola/teal). DEVE combaciare col `kind`
+# del <LessonMeta>. Senza, la pagina resta blu come gli altri volumi.
+#
 # REGOLA FERREA sui link: SOLO identificatori on-site (path/permalink del sito),
 # MAI riferimenti interni esterni (niente paideia_id e simili).
 # ─────────────────────────────────────────────────────────────────────────────
@@ -27,6 +31,7 @@ title: <titolo della pagina>
 sidebar_label: <label in sidebar>
 sidebar_position: 1
 description: <una frase>
+exercise_kind: rapidi # rapidi | esercizio | laboratorio (= kind del LessonMeta)
 ---
 
 {/* ===========================================================================
diff --git a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx
index e66259a..9013b5d 100644
--- a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx
+++ b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx
@@ -3,6 +3,7 @@ title: Esercizi rapidi
 sidebar_label: Esercizi rapidi
 sidebar_position: 1
 description: Pagina dimostrativa — batch di esercizietti sulla lezione «I tipi di dato».
+exercise_kind: rapidi
 ---
 
 <LessonMeta
diff --git a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx
index 792bd32..ee27678 100644
--- a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx
+++ b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx
@@ -3,6 +3,7 @@ title: Convertitore di temperatura
 sidebar_label: 'Esercizio: convertitore'
 sidebar_position: 2
 description: Pagina dimostrativa — un esercizio completo con pagina dedicata.
+exercise_kind: esercizio
 ---
 
 <LessonMeta
diff --git a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx
index 231852a..ef0f393 100644
--- a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx
+++ b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx
@@ -3,6 +3,7 @@ title: 'Laboratorio: piccolo convertitore'
 sidebar_label: 'Laboratorio: convertitore'
 sidebar_position: 3
 description: Pagina dimostrativa — un laboratorio (progetto) con pagina dedicata.
+exercise_kind: laboratorio
 ---
 
 <LessonMeta
diff --git a/volumes/apprendista/programmatore/le-basi/le-variabili.mdx b/volumes/apprendista/programmatore/le-basi/le-variabili.mdx
index 536b857..1eb06ed 100644
--- a/volumes/apprendista/programmatore/le-basi/le-variabili.mdx
+++ b/volumes/apprendista/programmatore/le-basi/le-variabili.mdx
@@ -3,6 +3,7 @@ title: Le variabili
 sidebar_label: Le variabili
 sidebar_position: 1
 description: Esercizi dimostrativi sul template del Volume 4 — pagina-lezione con più esercizi numerati.
+exercise_kind: rapidi
 ---
 
 :::note Pagina dimostrativa

From 53307427e21f530ffd507e6077ab8698ea55845a Mon Sep 17 00:00:00 2001
From: Marco Farina <marco.farina@jcmaxwell.it>
Date: Mon, 22 Jun 2026 16:34:10 +0200
Subject: [PATCH 3/9] feat(theme): briciole ancorate al volume corrente
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swizzle di DocBreadcrumbs: dopo la casetta (che punta alla home del sito)
inserisce una briciola col nome del volume corrente, linkata all'indice del
volume. In Biblioteca dell'Apprendista le briciole erano fuorvianti — la prima
voce era il volume-sorgente (es. «Manuale del Programmatore») e sembrava di
essere nel Vol.1 invece che negli esercizi del Vol.4. Ora:

  🏠 › Biblioteca dell'Apprendista › Manuale del Programmatore › Le basi › …

Vale per tutti i volumi (pluginId → nome leggibile). Copia fedele
dell'originale a parte la briciola del volume: da ricontrollare agli upgrade.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/theme/DocBreadcrumbs/index.tsx         | 136 +++++++++++++++++++++
 src/theme/DocBreadcrumbs/styles.module.css |  13 ++
 2 files changed, 149 insertions(+)
 create mode 100644 src/theme/DocBreadcrumbs/index.tsx
 create mode 100644 src/theme/DocBreadcrumbs/styles.module.css

diff --git a/src/theme/DocBreadcrumbs/index.tsx b/src/theme/DocBreadcrumbs/index.tsx
new file mode 100644
index 0000000..4c183f3
--- /dev/null
+++ b/src/theme/DocBreadcrumbs/index.tsx
@@ -0,0 +1,136 @@
+/**
+ * Swizzle di @theme/DocBreadcrumbs (eject).
+ *
+ * Unica differenza rispetto all'originale: dopo la casetta (che punta alla home
+ * del sito) inseriamo una briciola col NOME DEL VOLUME corrente, linkata
+ * all'indice del volume. Senza, in Biblioteca dell'Apprendista la prima briciola
+ * è il volume-sorgente (es. «Manuale del Programmatore») e si ha l'impressione
+ * di essere nel Vol.1 invece che negli esercizi del Vol.4.
+ *
+ * Il resto è copia fedele dell'originale: ricontrollare a ogni upgrade di
+ * Docusaurus (vedi memoria upgrade_risks).
+ */
+import React, { type ReactNode } from 'react';
+import clsx from 'clsx';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import {
+  useSidebarBreadcrumbs,
+  useDocsVersion,
+} from '@docusaurus/plugin-content-docs/client';
+import { useHomePageRoute } from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { translate } from '@docusaurus/Translate';
+import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
+import DocBreadcrumbsStructuredData from '@theme/DocBreadcrumbs/StructuredData';
+
+import styles from './styles.module.css';
+
+// Nome leggibile del volume, per pluginId dell'istanza docs. routeBasePath
+// coincide col pluginId per tutti e quattro i volumi (vedi docusaurus.config).
+const VOLUME_LABELS: Record<string, string> = {
+  programmatore: 'Manuale del Programmatore',
+  artefice: 'Manuale dell’Artefice',
+  archivista: 'Manuale dell’Archivista',
+  apprendista: 'Biblioteca dell’Apprendista',
+};
+
+function BreadcrumbsItemLink({
+  children,
+  href,
+  isLast,
+}: {
+  children: ReactNode;
+  href?: string;
+  isLast: boolean;
+}): ReactNode {
+  const className = 'breadcrumbs__link';
+  if (isLast) {
+    return <span className={className}>{children}</span>;
+  }
+  return href ? (
+    <Link className={className} href={href}>
+      <span>{children}</span>
+    </Link>
+  ) : (
+    <span className={className}>{children}</span>
+  );
+}
+
+function BreadcrumbsItem({
+  children,
+  active,
+}: {
+  children: ReactNode;
+  active?: boolean;
+}): ReactNode {
+  return (
+    <li
+      className={clsx('breadcrumbs__item', {
+        'breadcrumbs__item--active': active,
+      })}
+    >
+      {children}
+    </li>
+  );
+}
+
+// Briciola del volume corrente, subito dopo la casetta.
+function VolumeBreadcrumbItem(): ReactNode {
+  const { pluginId } = useDocsVersion();
+  const href = useBaseUrl(`/${pluginId}/`);
+  const label = VOLUME_LABELS[pluginId];
+  if (!label) {
+    return null;
+  }
+  return (
+    <BreadcrumbsItem>
+      <BreadcrumbsItemLink href={href} isLast={false}>
+        {label}
+      </BreadcrumbsItemLink>
+    </BreadcrumbsItem>
+  );
+}
+
+export default function DocBreadcrumbs(): ReactNode {
+  const breadcrumbs = useSidebarBreadcrumbs();
+  const homePageRoute = useHomePageRoute();
+  if (!breadcrumbs) {
+    return null;
+  }
+  return (
+    <>
+      <DocBreadcrumbsStructuredData breadcrumbs={breadcrumbs} />
+      <nav
+        className={clsx(
+          ThemeClassNames.docs.docBreadcrumbs,
+          styles.breadcrumbsContainer,
+        )}
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.navAriaLabel',
+          message: 'Breadcrumbs',
+          description: 'The ARIA label for the breadcrumbs',
+        })}
+      >
+        <ul className="breadcrumbs">
+          {homePageRoute && <HomeBreadcrumbItem />}
+          <VolumeBreadcrumbItem />
+          {breadcrumbs.map((item, idx) => {
+            const isLast = idx === breadcrumbs.length - 1;
+            const href =
+              item.type === 'category' && item.linkUnlisted
+                ? undefined
+                : item.href;
+            return (
+              <BreadcrumbsItem key={idx} active={isLast}>
+                <BreadcrumbsItemLink href={href} isLast={isLast}>
+                  {item.label}
+                </BreadcrumbsItemLink>
+              </BreadcrumbsItem>
+            );
+          })}
+        </ul>
+      </nav>
+    </>
+  );
+}
diff --git a/src/theme/DocBreadcrumbs/styles.module.css b/src/theme/DocBreadcrumbs/styles.module.css
new file mode 100644
index 0000000..60c86d2
--- /dev/null
+++ b/src/theme/DocBreadcrumbs/styles.module.css
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Swizzle: copia verbatim dello stile originale di DocBreadcrumbs.
+ */
+
+.breadcrumbsContainer {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
+}

From c19aa8188db807b40ff6994b8f6d1bde3765d823 Mon Sep 17 00:00:00 2001
From: Marco Farina <marco.farina@jcmaxwell.it>
Date: Tue, 23 Jun 2026 00:00:40 +0200
Subject: [PATCH 4/9] =?UTF-8?q?feat(apprendista):=20auto-backlink=20eserci?=
 =?UTF-8?q?zi=E2=86=94lezioni=20da=20frontmatter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Il link esercizio↔lezione era scritto a mano in due punti (LessonMeta
sull'esercizio + ExerciseLink sulla lezione), da tenere allineati a mano.
Ora la fonte di verità è una sola: il frontmatter dell'esercizio
(assigned_in/theory). Provenienza e backlink si derivano e si validano
a build-time, e gli autori scrivono solo frontmatter + corpo.

- plugins/exercise-graph/index.js: nuovo plugin (modello pyrunner) che
  cammina i 4 volumi, parsa il frontmatter via @docusaurus/utils
  (parseMarkdownFile + DEFAULT_PARSE_FRONT_MATTER, niente nuova dep),
  costruisce exercises/byLesson/lessons e li espone via setGlobalData.
  Validazione strict: assigned_in/theory che non risolvono → throw.
  Esclude i file con prefisso _/. come content-docs.
- src/lib/docResolve.ts: VOLUME_LABELS condiviso (estratto da
  DocBreadcrumbs) + resolvePermalink via useAllDocsData/versions.current
  + tipi del global data.
- LessonMeta: rifattorizzato propless/derivato; AssignedExercises: nuovo
  componente che riusa ExerciseLink.
- Auto-injection: LessonMeta prepend in DocItem/Content; nuovo wrapper
  swizzle DocItem/Footer che appende AssignedExercises.
- Demo + template migrati al modello solo-frontmatter.

Capitolo della lezione-sorgente non mostrato: non derivabile a
build-time coi volumi flat (crumb Volume › Lezione).

Verificato: typecheck/lint/build verdi; backlink bidirezionali presenti
nell'HTML SSR sia sulla lezione sia sull'esercizio.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docusaurus.config.ts                          |   1 +
 plugins/exercise-graph/index.js               | 215 ++++++++++++++++++
 src/components/AssignedExercises/index.tsx    |  58 +++++
 .../AssignedExercises/styles.module.css       |  21 ++
 src/components/Exercise/index.tsx             | 106 ++++-----
 src/lib/docResolve.ts                         |  80 +++++++
 src/theme/DocBreadcrumbs/index.tsx            |  11 +-
 src/theme/DocItem/Content/index.tsx           |   3 +
 src/theme/DocItem/Footer/index.tsx            |  32 +++
 src/theme/MDXComponents.tsx                   |   2 +
 volumes/apprendista/_esercizio-template.mdx   |  99 +++-----
 .../i-tipi-di-dato/esercizi-rapidi.mdx        |  13 +-
 .../i-tipi-di-dato/esercizio-convertitore.mdx |  16 +-
 .../laboratorio-convertitore.mdx              |  17 +-
 .../programmatore/le-basi/le-variabili.mdx    |  13 +-
 15 files changed, 518 insertions(+), 169 deletions(-)
 create mode 100644 plugins/exercise-graph/index.js
 create mode 100644 src/components/AssignedExercises/index.tsx
 create mode 100644 src/components/AssignedExercises/styles.module.css
 create mode 100644 src/lib/docResolve.ts
 create mode 100644 src/theme/DocItem/Footer/index.tsx

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index fd561fd..1c1b903 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -127,6 +127,7 @@ export default async function createConfig(): Promise<Config> {
 
     plugins: [
       './plugins/pyrunner/index.js',
+      './plugins/exercise-graph/index.js',
       [
         '@docusaurus/plugin-content-docs',
         {
diff --git a/plugins/exercise-graph/index.js b/plugins/exercise-graph/index.js
new file mode 100644
index 0000000..85b802f
--- /dev/null
+++ b/plugins/exercise-graph/index.js
@@ -0,0 +1,215 @@
+const path = require('path');
+const fs = require('fs');
+const {
+  parseMarkdownFile,
+  DEFAULT_PARSE_FRONT_MATTER,
+} = require('@docusaurus/utils');
+
+const PLUGIN_NAME = 'exercise-graph';
+
+// Tutti i volumi (istanze plugin-content-docs). Le lezioni-sorgente vivono nei
+// primi tre; gli esercizi nel quarto (apprendista).
+const VOLUMES = ['programmatore', 'artefice', 'archivista', 'apprendista'];
+
+const MD_EXT = /\.mdx?$/;
+
+// Umanizza un id-segmento come fallback per il titolo quando manca il
+// frontmatter (`title`/`sidebar_label`) e l'H1: «le-stringhe» → «Le stringhe».
+function humanize(segment) {
+  const s = segment.replace(/[-_]+/g, ' ').trim();
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+// Cammina ricorsivamente una cartella-volume e ritorna la lista dei file
+// markdown con il loro docId volume-local (path relativo senza estensione,
+// separatori posix). Replica la convenzione di id di @docusaurus/plugin-content-docs.
+function walkDocs(dir, baseDir, out = []) {
+  if (!fs.existsSync(dir)) return out;
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    // Esclude file/cartelle con prefisso `_` o `.` — stessa convenzione di
+    // content-docs (es. _category_.json, _esercizio-template.mdx, partial), che
+    // li tiene fuori dal build: il grafo deve ignorarli per non validare un
+    // template-segnaposto.
+    if (entry.name.startsWith('_') || entry.name.startsWith('.')) continue;
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walkDocs(full, baseDir, out);
+    } else if (entry.isFile() && MD_EXT.test(entry.name)) {
+      const rel = path
+        .relative(baseDir, full)
+        .split(path.sep)
+        .join('/')
+        .replace(MD_EXT, '');
+      out.push({ filePath: full, relId: rel });
+    }
+  }
+  return out;
+}
+
+// docId effettivo: il frontmatter `id` sovrascrive l'ultimo segmento del path
+// (stessa regola di content-docs). Senza override → relId.
+function resolveDocId(relId, frontMatter) {
+  const override = frontMatter.id;
+  if (typeof override !== 'string' || override.length === 0) return relId;
+  const slash = relId.lastIndexOf('/');
+  return slash === -1 ? override : `${relId.slice(0, slash + 1)}${override}`;
+}
+
+async function parseDoc(filePath) {
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  return parseMarkdownFile({
+    filePath,
+    fileContent,
+    parseFrontMatter: DEFAULT_PARSE_FRONT_MATTER,
+    removeContentTitle: true,
+  });
+}
+
+// Normalizza una chiave globale «<volume>/<docId>» in { volume, docId }.
+// Lo split è sul PRIMO `/`: il volume è il primo segmento, il resto è il docId
+// volume-local (che può contenere altri `/`).
+function splitKey(raw, filePath, field) {
+  if (typeof raw !== 'string' || !raw.includes('/')) {
+    throw new Error(
+      `[exercise-graph] ${field} non valido in ${filePath}: ` +
+        `atteso «<volume>/<docId>», ricevuto ${JSON.stringify(raw)}.`,
+    );
+  }
+  const slash = raw.indexOf('/');
+  const volume = raw.slice(0, slash);
+  const docId = raw.slice(slash + 1);
+  if (!VOLUMES.includes(volume)) {
+    throw new Error(
+      `[exercise-graph] ${field} in ${filePath}: volume sconosciuto «${volume}». ` +
+        `Volumi validi: ${VOLUMES.join(', ')}.`,
+    );
+  }
+  return { volume, docId, key: `${volume}/${docId}` };
+}
+
+module.exports = function exerciseGraphPlugin(context) {
+  const volumeDir = (v) => path.join(context.siteDir, 'volumes', v);
+
+  return {
+    name: PLUGIN_NAME,
+
+    async loadContent() {
+      // ── Indice delle lezioni (tutti i volumi) ────────────────────────────
+      // lessons["<volume>/<docId>"] = { title } — usato per validare i
+      // riferimenti e per il display lato client.
+      const lessons = {};
+      // exercises["<docId>"] = record completo (la chiave è il docId
+      // volume-local dell'esercizio; il volume è sempre `apprendista`).
+      const exercises = {};
+      // byLesson["<volume>/<docId>"] = [ref...] — mappa inversa lezione→esercizi.
+      const byLesson = {};
+
+      // Raccolgo prima TUTTI i doc di tutti i volumi, così la validazione degli
+      // esercizi vede l'indice completo delle lezioni.
+      const docsByVolume = {};
+      await Promise.all(
+        VOLUMES.map(async (volume) => {
+          const base = volumeDir(volume);
+          const files = walkDocs(base, base);
+          const parsed = await Promise.all(
+            files.map(async ({ filePath, relId }) => {
+              const { frontMatter, contentTitle } = await parseDoc(filePath);
+              const docId = resolveDocId(relId, frontMatter);
+              const title =
+                (typeof frontMatter.title === 'string' && frontMatter.title) ||
+                (typeof frontMatter.sidebar_label === 'string' &&
+                  frontMatter.sidebar_label) ||
+                contentTitle ||
+                humanize(docId.split('/').pop());
+              const key = `${volume}/${docId}`;
+              lessons[key] = { title };
+              return { filePath, docId, key, frontMatter, title };
+            }),
+          );
+          docsByVolume[volume] = parsed;
+        }),
+      );
+
+      // ── Esercizi (solo `apprendista`, marcati da `assigned_in`) ───────────
+      for (const doc of docsByVolume.apprendista) {
+        const { filePath, docId, frontMatter, title } = doc;
+        if (typeof frontMatter.assigned_in === 'undefined') continue; // non è un esercizio
+
+        const assignedIn = splitKey(
+          frontMatter.assigned_in,
+          filePath,
+          'assigned_in',
+        );
+        if (!lessons[assignedIn.key]) {
+          throw new Error(
+            `[exercise-graph] ${filePath}: assigned_in «${assignedIn.key}» ` +
+              `non corrisponde ad alcuna lezione esistente.`,
+          );
+        }
+
+        const theoryRaw = Array.isArray(frontMatter.theory)
+          ? frontMatter.theory
+          : [];
+        const theory = theoryRaw.map((t) => {
+          const ref = splitKey(t, filePath, 'theory');
+          if (!lessons[ref.key]) {
+            throw new Error(
+              `[exercise-graph] ${filePath}: theory «${ref.key}» ` +
+                `non corrisponde ad alcuna lezione esistente.`,
+            );
+          }
+          return { volume: ref.volume, docId: ref.docId, title: lessons[ref.key].title };
+        });
+
+        const record = {
+          docId,
+          title,
+          kind:
+            typeof frontMatter.exercise_kind === 'string'
+              ? frontMatter.exercise_kind
+              : 'rapidi',
+          n: typeof frontMatter.n === 'string' ? frontMatter.n : undefined,
+          lessonId:
+            typeof frontMatter.lesson_id === 'string'
+              ? frontMatter.lesson_id
+              : undefined,
+          difficulty:
+            typeof frontMatter.difficulty === 'string'
+              ? frontMatter.difficulty
+              : undefined,
+          time: typeof frontMatter.time === 'string' ? frontMatter.time : undefined,
+          assignedIn: {
+            volume: assignedIn.volume,
+            docId: assignedIn.docId,
+            title: lessons[assignedIn.key].title,
+          },
+          theory,
+        };
+        exercises[docId] = record;
+
+        // Backlink inverso: l'esercizio è «assegnato in» assignedIn → lo
+        // elenchiamo su quella lezione. La teoria NON genera backlink (non è
+        // assegnazione, solo supporto).
+        (byLesson[assignedIn.key] ??= []).push({
+          docId,
+          title,
+          kind: record.kind,
+          difficulty: record.difficulty,
+          time: record.time,
+        });
+      }
+
+      return { exercises, byLesson, lessons };
+    },
+
+    async contentLoaded({ content, actions }) {
+      actions.setGlobalData(content);
+    },
+
+    getPathsToWatch() {
+      return VOLUMES.map((v) => path.join(volumeDir(v), '**/*.{md,mdx}'));
+    },
+  };
+};
+
+module.exports.PLUGIN_NAME = PLUGIN_NAME;
diff --git a/src/components/AssignedExercises/index.tsx b/src/components/AssignedExercises/index.tsx
new file mode 100644
index 0000000..b600498
--- /dev/null
+++ b/src/components/AssignedExercises/index.tsx
@@ -0,0 +1,58 @@
+/**
+ * AssignedExercises — elenco «Esercizi assegnati» mostrato in fondo a una
+ * lezione (Volumi 1–3). È DERIVATO: legge la mappa inversa `byLesson` dal global
+ * data del plugin `exercise-graph` per la chiave «<volume>/<docId>» della lezione
+ * corrente e renderizza una card per esercizio (riusa <ExerciseLink>).
+ *
+ * Viene auto-iniettato dallo swizzle DocItem/Footer; le lezioni non vengono
+ * mai editate a mano. Render `null` se la lezione non assegna esercizi.
+ */
+import { type ReactNode } from 'react';
+import Heading from '@theme/Heading';
+import { usePluginData } from '@docusaurus/useGlobalData';
+import { useAllDocsData } from '@docusaurus/plugin-content-docs/client';
+import ExerciseLink from '@site/src/components/ExerciseLink';
+import {
+  resolvePermalink,
+  type ExerciseGraphData,
+} from '@site/src/lib/docResolve';
+
+import styles from './styles.module.css';
+
+interface AssignedExercisesProps {
+  /** Chiave della lezione corrente: «<volume>/<docId>». */
+  lessonKey: string;
+}
+
+export default function AssignedExercises({
+  lessonKey,
+}: AssignedExercisesProps): ReactNode {
+  const data = usePluginData('exercise-graph') as ExerciseGraphData | undefined;
+  const allData = useAllDocsData();
+  const items = data?.byLesson?.[lessonKey];
+  if (!items || items.length === 0) return null;
+
+  return (
+    <section className={styles.section} aria-label="Esercizi assegnati">
+      <Heading as="h2" className={styles.heading}>
+        Esercizi assegnati
+      </Heading>
+      <div className={styles.list}>
+        {items.map((item) => {
+          const to = resolvePermalink(allData, 'apprendista', item.docId);
+          if (!to) return null;
+          return (
+            <ExerciseLink
+              key={item.docId}
+              to={to}
+              difficulty={item.difficulty}
+              time={item.time}
+            >
+              {item.title}
+            </ExerciseLink>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/AssignedExercises/styles.module.css b/src/components/AssignedExercises/styles.module.css
new file mode 100644
index 0000000..650d1e2
--- /dev/null
+++ b/src/components/AssignedExercises/styles.module.css
@@ -0,0 +1,21 @@
+/* Sezione «Esercizi assegnati» in fondo a una lezione. Sta FUORI dal corpo
+   markdown (iniettata dallo swizzle DocItem/Footer): non eredita la tipografia
+   della prosa, quindi definisce il proprio spazio e separatore. */
+.section {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--at-border);
+}
+
+.heading {
+  font-family: var(--font-display);
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--at-fg-strong);
+  margin-bottom: 0.75rem;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/components/Exercise/index.tsx b/src/components/Exercise/index.tsx
index 04cf6b1..90bbe49 100644
--- a/src/components/Exercise/index.tsx
+++ b/src/components/Exercise/index.tsx
@@ -3,9 +3,10 @@
  *
  * Modello IBRIDO: una lezione con soli esercizi rapidi è una pagina singola;
  * se ha anche esercizi dedicati / laboratori diventa una cartella con una pagina
- * per tipo. Ogni pagina dichiara la sua provenienza con <LessonMeta>.
+ * per tipo. La provenienza è dichiarata nel FRONTMATTER (assigned_in/theory) e la
+ * card <LessonMeta> è DERIVATA + auto-iniettata dallo swizzle DocItem/Content.
  *
- *   <LessonMeta kind="…" ... />   card compatta (badge tipo + provenienza + teoria)
+ *   <LessonMeta />   card compatta derivata dal global data (badge + provenienza)
  *   <Exercise n="10.2" title="…">…</Exercise>   un esercizietto (nelle pagine batch)
  *   <Solution>```py live readonly … ```</Solution>   soluzione (PyRunner non editabile)
  *
@@ -16,70 +17,67 @@
 import { type ReactNode } from 'react';
 import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
+import { usePluginData } from '@docusaurus/useGlobalData';
+import { useDoc, useAllDocsData } from '@docusaurus/plugin-content-docs/client';
 import Icon, { type IconName } from '@site/src/components/Icon';
+import {
+  resolvePermalink,
+  volumeLabel,
+  type ExerciseGraphData,
+  type ExerciseKind,
+  type LessonRef,
+} from '@site/src/lib/docResolve';
 
 import styles from './styles.module.css';
 
 // ─── LessonMeta ──────────────────────────────────────────────────────────────
 
-interface TheoryRef {
-  /** path on-site della lezione */
-  to: string;
-  label: string;
-}
-
 /**
- * Tipo di pagina-esercizio:
+ * Card di provenienza dell'esercizio. È DERIVATA: legge il record dal global
+ * data del plugin `exercise-graph` (chiave = docId della pagina corrente) e ne
+ * risolve i permalink. Non prende props — viene auto-iniettata dallo swizzle
+ * DocItem/Content. Render `null` se la pagina non è un esercizio noto.
+ *
+ * Tipo di pagina-esercizio (badge):
  *   rapidi      → batch di esercizietti «a batteria» (più <Exercise> in pagina)
  *   esercizio   → un esercizio completo, pagina dedicata
  *   laboratorio → laboratorio/progetto, pagina dedicata
+ *
+ * NB: il «capitolo» della lezione-sorgente non è derivabile a build-time
+ * (volumi flat, capitoli solo nelle sidebar) → la crumb è «Volume › Lezione».
  */
-type ExerciseKind = 'rapidi' | 'esercizio' | 'laboratorio';
-
 const KIND: Record<ExerciseKind, { label: string; icon: IconName }> = {
   rapidi: { label: 'Esercizi rapidi', icon: 'dumbbell' },
   esercizio: { label: 'Esercizio', icon: 'pen' },
   laboratorio: { label: 'Laboratorio', icon: 'flask' },
 };
 
-interface LessonMetaProps {
-  /** Tipo di pagina: mostra un badge con icona. */
-  kind?: ExerciseKind;
-  /**
-   * Numero dell'esercizio (forma corta lezione.esercizio, es. «11.3»), per le
-   * pagine a esercizio singolo / laboratorio. Sui batch si usa <Exercise n="…">.
-   */
-  n?: string;
-  /** Path on-site della lezione che assegna gli esercizi. */
-  lessonTo: string;
-  /** Nome della lezione (link alla teoria). */
-  lessonLabel: string;
-  /** Volume di provenienza, es. «Manuale del Programmatore». */
-  volume: string;
-  /** Capitolo di provenienza, es. «Le basi». */
-  chapter: string;
-  /** Id interno della lezione, es. «1.3.10». Mostrato come badge discreto. */
-  lessonId?: string;
-  /** Lezioni che danno teoria supplementare. */
-  theory?: TheoryRef[];
-}
+export function LessonMeta(): ReactNode {
+  const data = usePluginData('exercise-graph') as ExerciseGraphData | undefined;
+  const allData = useAllDocsData();
+  const { metadata } = useDoc();
+  const record = data?.exercises?.[metadata.id];
+  if (!record) return null;
+
+  const k = KIND[record.kind] ?? KIND.rapidi;
+  const section = record.n ?? record.lessonId;
+  const lessonTo = resolvePermalink(
+    allData,
+    record.assignedIn.volume,
+    record.assignedIn.docId,
+  );
+
+  const theory = record.theory
+    .map((t: LessonRef) => ({
+      to: resolvePermalink(allData, t.volume, t.docId),
+      label: t.title,
+    }))
+    .filter((t): t is { to: string; label: string } => t.to !== null);
 
-export function LessonMeta({
-  kind = 'rapidi',
-  n,
-  lessonTo,
-  lessonLabel,
-  volume,
-  chapter,
-  lessonId,
-  theory = [],
-}: LessonMetaProps): ReactNode {
-  const k = KIND[kind];
-  const section = n ?? lessonId;
   return (
     <aside
       className={styles.card}
-      data-kind={kind}
+      data-kind={record.kind}
       aria-label="Provenienza dell'esercizio"
     >
       <div className={styles.inner}>
@@ -102,17 +100,19 @@ export function LessonMeta({
               Assegnato in
             </span>
             <span className={styles.crumbs}>
-              <span>{volume}</span>
-              <span className={styles.chevron} aria-hidden="true">
-                ›
-              </span>
-              <span>{chapter}</span>
+              <span>{volumeLabel(record.assignedIn.volume)}</span>
               <span className={styles.chevron} aria-hidden="true">
                 ›
               </span>
-              <Link to={lessonTo} className={styles.crumbLeaf}>
-                {lessonLabel}
-              </Link>
+              {lessonTo ? (
+                <Link to={lessonTo} className={styles.crumbLeaf}>
+                  {record.assignedIn.title}
+                </Link>
+              ) : (
+                <span className={styles.crumbLeaf}>
+                  {record.assignedIn.title}
+                </span>
+              )}
             </span>
           </div>
 
diff --git a/src/lib/docResolve.ts b/src/lib/docResolve.ts
new file mode 100644
index 0000000..70c9adc
--- /dev/null
+++ b/src/lib/docResolve.ts
@@ -0,0 +1,80 @@
+/**
+ * Helper condivisi per risolvere doc id → URL e label di volume, usati dai
+ * componenti del grafo esercizi (LessonMeta, AssignedExercises) e dalle briciole.
+ *
+ * Il permalink NON va ricostruito a mano (regole slug/index/trailingSlash sono
+ * fragili): lo risolviamo dai dati che Docusaurus ha già calcolato, esposti via
+ * `useAllDocsData()` (vedi src/components/PathSelector per il pattern `current`).
+ */
+import type { GlobalPluginData } from '@docusaurus/plugin-content-docs/client';
+
+export type AllDocsData = Record<string, GlobalPluginData>;
+
+// ─── Tipi del global data del plugin `exercise-graph` ────────────────────────
+
+export type ExerciseKind = 'rapidi' | 'esercizio' | 'laboratorio';
+export type Difficulty = 'facile' | 'medio' | 'difficile';
+
+/** Riferimento a una lezione-sorgente (provenienza o teoria). */
+export interface LessonRef {
+  volume: string;
+  docId: string;
+  title: string;
+}
+
+/** Record completo di un esercizio (chiave = docId volume-local in apprendista). */
+export interface ExerciseRecord {
+  docId: string;
+  title: string;
+  kind: ExerciseKind;
+  n?: string;
+  lessonId?: string;
+  difficulty?: Difficulty;
+  time?: string;
+  assignedIn: LessonRef;
+  theory: LessonRef[];
+}
+
+/** Voce dell'elenco «esercizi assegnati» mostrato su una lezione. */
+export interface ExerciseListItem {
+  docId: string;
+  title: string;
+  kind: ExerciseKind;
+  difficulty?: Difficulty;
+  time?: string;
+}
+
+export interface ExerciseGraphData {
+  exercises: Record<string, ExerciseRecord>;
+  byLesson: Record<string, ExerciseListItem[]>;
+  lessons: Record<string, { title: string }>;
+}
+
+// Nome leggibile del volume per pluginId (= routeBasePath = cartella). Fonte
+// unica: importato anche dallo swizzle DocBreadcrumbs.
+export const VOLUME_LABELS: Record<string, string> = {
+  programmatore: 'Manuale del Programmatore',
+  artefice: 'Manuale dell’Artefice',
+  archivista: 'Manuale dell’Archivista',
+  apprendista: 'Biblioteca dell’Apprendista',
+};
+
+export function volumeLabel(volume: string): string {
+  return VOLUME_LABELS[volume] ?? volume;
+}
+
+/**
+ * Risolve il permalink (senza baseUrl, pronto per <Link to>) di un doc dato il
+ * suo volume (pluginId) e il suo docId volume-local. `null` se non risolve —
+ * la validazione forte dei riferimenti avviene a build-time nel plugin
+ * exercise-graph, qui degradiamo con grazia.
+ */
+export function resolvePermalink(
+  allData: AllDocsData,
+  volume: string,
+  docId: string,
+): string | null {
+  const version = allData[volume]?.versions?.find((v) => v.name === 'current');
+  if (!version) return null;
+  return version.docs.find((d) => d.id === docId)?.path ?? null;
+}
diff --git a/src/theme/DocBreadcrumbs/index.tsx b/src/theme/DocBreadcrumbs/index.tsx
index 4c183f3..104dbda 100644
--- a/src/theme/DocBreadcrumbs/index.tsx
+++ b/src/theme/DocBreadcrumbs/index.tsx
@@ -24,16 +24,9 @@ import { translate } from '@docusaurus/Translate';
 import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
 import DocBreadcrumbsStructuredData from '@theme/DocBreadcrumbs/StructuredData';
 
-import styles from './styles.module.css';
+import { VOLUME_LABELS } from '@site/src/lib/docResolve';
 
-// Nome leggibile del volume, per pluginId dell'istanza docs. routeBasePath
-// coincide col pluginId per tutti e quattro i volumi (vedi docusaurus.config).
-const VOLUME_LABELS: Record<string, string> = {
-  programmatore: 'Manuale del Programmatore',
-  artefice: 'Manuale dell’Artefice',
-  archivista: 'Manuale dell’Archivista',
-  apprendista: 'Biblioteca dell’Apprendista',
-};
+import styles from './styles.module.css';
 
 function BreadcrumbsItemLink({
   children,
diff --git a/src/theme/DocItem/Content/index.tsx b/src/theme/DocItem/Content/index.tsx
index bf1e2db..448f9d4 100644
--- a/src/theme/DocItem/Content/index.tsx
+++ b/src/theme/DocItem/Content/index.tsx
@@ -11,6 +11,7 @@ import type {
 } from '@docusaurus/plugin-content-docs';
 
 import OffPathBanner from '@site/src/components/OffPathBanner';
+import { LessonMeta } from '@site/src/components/Exercise';
 
 function useSyntheticTitle(): string | null {
   const { metadata, frontMatter, contentTitle } = useDoc();
@@ -87,6 +88,8 @@ export default function DocItemContent({ children }: Props): ReactNode {
           <Heading as="h1">{syntheticTitle}</Heading>
         </header>
       )}
+      {/* Card di provenienza auto-iniettata: self-gate (null se non esercizio). */}
+      <LessonMeta />
       <MDXContent>{children}</MDXContent>
     </div>
   );
diff --git a/src/theme/DocItem/Footer/index.tsx b/src/theme/DocItem/Footer/index.tsx
new file mode 100644
index 0000000..8f436fc
--- /dev/null
+++ b/src/theme/DocItem/Footer/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * Swizzle WRAPPER di @theme/DocItem/Footer.
+ *
+ * Renderizza il footer originale (tag, edit link, last-updated) e, dopo di esso
+ * — quindi FUORI dal corpo markdown `.markdown` — appende l'elenco «Esercizi
+ * assegnati» della lezione corrente. Così le lezioni dei Volumi 1–3 non vanno
+ * mai editate a mano: il backlink si genera dal grafo (plugin exercise-graph).
+ *
+ * Wrapper (non eject): delega tutto l'originale, aggiunge solo in coda →
+ * minore superficie da ricontrollare agli upgrade di Docusaurus.
+ */
+import React, { type ReactNode } from 'react';
+import Footer from '@theme-original/DocItem/Footer';
+import type FooterType from '@theme/DocItem/Footer';
+import type { WrapperProps } from '@docusaurus/types';
+import { useDoc, useDocsVersion } from '@docusaurus/plugin-content-docs/client';
+
+import AssignedExercises from '@site/src/components/AssignedExercises';
+
+type Props = WrapperProps<typeof FooterType>;
+
+export default function FooterWrapper(props: Props): ReactNode {
+  const { metadata } = useDoc();
+  const { pluginId } = useDocsVersion();
+  const lessonKey = `${pluginId}/${metadata.id}`;
+  return (
+    <>
+      <Footer {...props} />
+      <AssignedExercises lessonKey={lessonKey} />
+    </>
+  );
+}
diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx
index 2877014..f6efe9d 100644
--- a/src/theme/MDXComponents.tsx
+++ b/src/theme/MDXComponents.tsx
@@ -18,6 +18,7 @@ import SQLRunner from '@site/src/theme/SQLRunner';
 import Algorithm from '@site/src/components/Algorithm';
 import ExerciseLink from '@site/src/components/ExerciseLink';
 import Exercise, { LessonMeta, Solution } from '@site/src/components/Exercise';
+import AssignedExercises from '@site/src/components/AssignedExercises';
 
 export default {
   ...MDXComponents,
@@ -37,4 +38,5 @@ export default {
   Exercise,
   LessonMeta,
   Solution,
+  AssignedExercises,
 };
diff --git a/volumes/apprendista/_esercizio-template.mdx b/volumes/apprendista/_esercizio-template.mdx
index 7d78a6c..dc74010 100644
--- a/volumes/apprendista/_esercizio-template.mdx
+++ b/volumes/apprendista/_esercizio-template.mdx
@@ -3,52 +3,58 @@
 # TEMPLATE PAGINE-ESERCIZIO — Volume 4 (Biblioteca dell'Apprendista)
 #
 # File con prefisso "_": Docusaurus lo ESCLUDE dal build. È un promemoria da cui
-# copiare. Sotto trovi i TRE tipi di pagina; copia il blocco che ti serve in
+# copiare in:
 #   volumes/apprendista/<volume-sorgente>/<capitolo>/<...>.mdx
 #
+# AUTORAGGIO SOLO-FRONTMATTER: scrivi SOLO il frontmatter qui sotto + il corpo
+# dell'esercizio. NON scrivere <LessonMeta> né <AssignedExercises>: la card di
+# provenienza (in cima all'esercizio) e l'elenco «Esercizi assegnati» (in fondo
+# alla lezione sorgente) sono GENERATI e iniettati automaticamente dal plugin
+# `exercise-graph` a partire da questo frontmatter. Una sola fonte di verità.
+#
 # MODELLO IBRIDO (livello "lezione"):
-#   - lezione con SOLO esercizi rapidi → un'unica pagina:
-#       <capitolo>/<lezione>.mdx
-#   - lezione con anche esercizi dedicati / laboratori → una cartella-lezione:
+#   - lezione con SOLO esercizi rapidi → un'unica pagina:  <capitolo>/<lezione>.mdx
+#   - lezione con anche esercizi dedicati / laboratori → cartella-lezione:
 #       <capitolo>/<lezione>/esercizi-rapidi.mdx
 #       <capitolo>/<lezione>/esercizio-<slug>.mdx
 #       <capitolo>/<lezione>/laboratorio-<slug>.mdx
 #     e in sidebars/apprendista.ts la lezione diventa una `category`.
 #
-# NUMERAZIONE: id interno volume.capitolo.lezione.esercizio (es. 1.3.11.3).
-#   - <LessonMeta lessonId="1.3.11">  coordinata della lezione
-#   - batch:  <Exercise n="11.1">     forma corta lezione.esercizio
-#   - singola: <LessonMeta n="11.3">  il numero sta nel badge
-#
-# COLORE PAGINA: `exercise_kind` (rapidi|esercizio|laboratorio) tinge l'INTERA
-# pagina con l'accento del tipo (ambra/viola/teal). DEVE combaciare col `kind`
-# del <LessonMeta>. Senza, la pagina resta blu come gli altri volumi.
+# CAMPI:
+#   exercise_kind  rapidi | esercizio | laboratorio  — badge + colore pagina.
+#   assigned_in    «<volume>/<docId>» della lezione che assegna (OBBLIGATORIO).
+#                  docId = path della lezione SENZA estensione, relativo al
+#                  volume (es. la lezione volumes/programmatore/variabili.mdx →
+#                  «programmatore/variabili»). Validato a build-time: se non
+#                  esiste, la build fallisce.
+#   theory         lista «<volume>/<docId>» di lezioni di teoria (opzionale).
+#   n              numero a video forma corta lezione.esercizio (es. «11.3»),
+#                  per esercizio/laboratorio singolo (opzionale).
+#   lesson_id      id interno volume.capitolo.lezione (es. «1.3.11», opzionale).
+#   difficulty     facile | medio | difficile (opzionale).
+#   time           tempo stimato, es. «20 min» (opzionale).
 #
-# REGOLA FERREA sui link: SOLO identificatori on-site (path/permalink del sito),
-# MAI riferimenti interni esterni (niente paideia_id e simili).
+# NB: i batch usano <Exercise n="11.1"> per i singoli esercizietti (vanno nel TOC).
+# REGOLA FERREA: i riferimenti sono SOLO doc id on-site, MAI paideia_id o simili.
 # ─────────────────────────────────────────────────────────────────────────────
 title: <titolo della pagina>
 sidebar_label: <label in sidebar>
 sidebar_position: 1
 description: <una frase>
-exercise_kind: rapidi # rapidi | esercizio | laboratorio (= kind del LessonMeta)
+exercise_kind: rapidi # rapidi | esercizio | laboratorio
+assigned_in: programmatore/<slug-lezione>
+theory: [programmatore/<slug-lezione>]
+lesson_id: '1.3.11'
+# n: '11.3'           # solo per esercizio/laboratorio singolo
+# difficulty: medio
+# time: 20 min
 ---
 
 {/* ===========================================================================
     TIPO 1 — ESERCIZI RAPIDI (batch): più esercizietti «a batteria» in pagina.
-    title pagina = nome lezione. kind="rapidi". Più <Exercise>.
+    Frontmatter: exercise_kind: rapidi. Corpo = più <Exercise>.
     =========================================================================== */}
 
-<LessonMeta
-  kind="rapidi"
-  volume="Manuale del Programmatore"
-  chapter="<nome capitolo>"
-  lessonId="1.3.11"
-  lessonTo="/programmatore/<slug-lezione>"
-  lessonLabel="<nome lezione>"
-  theory={[{ to: '/programmatore/<slug>', label: '<lezione>' }]}
-/>
-
 <Exercise n="11.1" title="<titolo esercizietto>">
 
 Testo della consegna.
@@ -69,20 +75,9 @@ Testo della consegna.
 
 {/* ===========================================================================
     TIPO 2 — ESERCIZIO dedicato: un esercizio completo, pagina sua.
-    title pagina = nome esercizio. kind="esercizio" + n="11.3". Niente <Exercise>.
+    Frontmatter: exercise_kind: esercizio, n: '11.3'. Corpo = la consegna.
     =========================================================================== */}
 
-<LessonMeta
-  kind="esercizio"
-  n="11.3"
-  volume="Manuale del Programmatore"
-  chapter="<nome capitolo>"
-  lessonId="1.3.11"
-  lessonTo="/programmatore/<slug-lezione>"
-  lessonLabel="<nome lezione>"
-  theory={[{ to: '/programmatore/<slug>', label: '<lezione>' }]}
-/>
-
 Testo della consegna (il corpo della pagina È l'esercizio).
 
 ```py live
@@ -99,20 +94,9 @@ Testo della consegna (il corpo della pagina È l'esercizio).
 
 {/* ===========================================================================
     TIPO 3 — LABORATORIO: progetto più ampio, a passi, pagina sua.
-    title pagina = nome lab. kind="laboratorio" + n. Usa ### per i passi.
+    Frontmatter: exercise_kind: laboratorio, n: '11.4'. Usa ### per i passi.
     =========================================================================== */}
 
-<LessonMeta
-  kind="laboratorio"
-  n="11.4"
-  volume="Manuale del Programmatore"
-  chapter="<nome capitolo>"
-  lessonId="1.3.11"
-  lessonTo="/programmatore/<slug-lezione>"
-  lessonLabel="<nome lezione>"
-  theory={[{ to: '/programmatore/<slug>', label: '<lezione>' }]}
-/>
-
 Introduzione del laboratorio.
 
 ### Passo 1 — …
@@ -120,18 +104,3 @@ Introduzione del laboratorio.
 ```py live
 # …
 ```
-
-{/* ───────────────────────────────────────────────────────────────────────────
-    LATO LEZIONE (volumi 1–3): nella lezione che assegna, con il path on-site
-    della pagina-esercizio (eventualmente con anchor #esercizio-11-3):
-
-      ## Esercizi assegnati
-
-      <ExerciseLink
-        to="/apprendista/programmatore/<capitolo>/<lezione>/esercizio-<slug>"
-        difficulty="medio"
-        time="20 min"
-      >
-        11.3 — Titolo dell'esercizio
-      </ExerciseLink>
-   ─────────────────────────────────────────────────────────────────────────── */}
diff --git a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx
index 9013b5d..433a7c1 100644
--- a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx
+++ b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizi-rapidi.mdx
@@ -4,18 +4,11 @@ sidebar_label: Esercizi rapidi
 sidebar_position: 1
 description: Pagina dimostrativa — batch di esercizietti sulla lezione «I tipi di dato».
 exercise_kind: rapidi
+assigned_in: programmatore/variabili
+theory: [programmatore/variabili]
+lesson_id: '1.3.11'
 ---
 
-<LessonMeta
-  kind="rapidi"
-  volume="Manuale del Programmatore"
-  chapter="Le basi"
-  lessonId="1.3.11"
-  lessonTo="/programmatore/variabili"
-  lessonLabel="I tipi di dato"
-  theory={[{ to: '/programmatore/variabili', label: 'Le variabili' }]}
-/>
-
 <Exercise n="11.1" title="Indovina il tipo">
 
 Stampa il tipo di ciascun valore con `type()`.
diff --git a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx
index ee27678..517bf3c 100644
--- a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx
+++ b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/esercizio-convertitore.mdx
@@ -4,19 +4,13 @@ sidebar_label: 'Esercizio: convertitore'
 sidebar_position: 2
 description: Pagina dimostrativa — un esercizio completo con pagina dedicata.
 exercise_kind: esercizio
+assigned_in: programmatore/variabili
+theory: [programmatore/variabili]
+n: '11.3'
+lesson_id: '1.3.11'
+difficulty: facile
 ---
 
-<LessonMeta
-  kind="esercizio"
-  n="11.3"
-  volume="Manuale del Programmatore"
-  chapter="Le basi"
-  lessonId="1.3.11"
-  lessonTo="/programmatore/variabili"
-  lessonLabel="I tipi di dato"
-  theory={[{ to: '/programmatore/variabili', label: 'Le variabili' }]}
-/>
-
 Scrivi un programma che, data una temperatura in gradi Celsius, stampi il valore
 in Fahrenheit. La formula è `F = C * 9 / 5 + 32`.
 
diff --git a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx
index ef0f393..6cef927 100644
--- a/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx
+++ b/volumes/apprendista/programmatore/le-basi/i-tipi-di-dato/laboratorio-convertitore.mdx
@@ -4,19 +4,14 @@ sidebar_label: 'Laboratorio: convertitore'
 sidebar_position: 3
 description: Pagina dimostrativa — un laboratorio (progetto) con pagina dedicata.
 exercise_kind: laboratorio
+assigned_in: programmatore/variabili
+theory: [programmatore/variabili]
+n: '11.4'
+lesson_id: '1.3.11'
+difficulty: medio
+time: 30 min
 ---
 
-<LessonMeta
-  kind="laboratorio"
-  n="11.4"
-  volume="Manuale del Programmatore"
-  chapter="Le basi"
-  lessonId="1.3.11"
-  lessonTo="/programmatore/variabili"
-  lessonLabel="I tipi di dato"
-  theory={[{ to: '/programmatore/variabili', label: 'Le variabili' }]}
-/>
-
 In questo laboratorio metti insieme quello che hai imparato e costruisci un
 piccolo convertitore passo dopo passo. È un lavoro più lungo di un esercizio
 singolo: prenditi il tuo tempo.
diff --git a/volumes/apprendista/programmatore/le-basi/le-variabili.mdx b/volumes/apprendista/programmatore/le-basi/le-variabili.mdx
index 1eb06ed..9ad207a 100644
--- a/volumes/apprendista/programmatore/le-basi/le-variabili.mdx
+++ b/volumes/apprendista/programmatore/le-basi/le-variabili.mdx
@@ -4,6 +4,9 @@ sidebar_label: Le variabili
 sidebar_position: 1
 description: Esercizi dimostrativi sul template del Volume 4 — pagina-lezione con più esercizi numerati.
 exercise_kind: rapidi
+assigned_in: programmatore/variabili
+theory: [programmatore/variabili]
+lesson_id: '1.3.10'
 ---
 
 :::note Pagina dimostrativa
@@ -12,16 +15,6 @@ Pagina di tipo **Esercizi rapidi** (batch): più esercizietti numerati da fare
 singola (modello ibrido). I contenuti sono segnaposto.
 :::
 
-<LessonMeta
-  kind="rapidi"
-  volume="Manuale del Programmatore"
-  chapter="Le basi"
-  lessonId="1.3.10"
-  lessonTo="/programmatore/variabili"
-  lessonLabel="Le variabili"
-  theory={[{ to: '/programmatore/variabili', label: 'Le variabili' }]}
-/>
-
 <Exercise n="10.1" title="Scambia due variabili">
 
 Hai due variabili `a` e `b`. Scambia i loro valori, poi stampali.

From 4af16be7cbe007ffadfa9cfb89c726d0963b7715 Mon Sep 17 00:00:00 2001
From: Marco Farina <marco.farina@jcmaxwell.it>
Date: Tue, 23 Jun 2026 01:25:12 +0200
Subject: [PATCH 5/9] feat(apprendista): soluzione a tieni-premuto-per-rivelare
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Il box <Solution> non si apre più al click (rischio spoiler da misclick):
ora richiede una pressione continua di 3s. Feedback durante l'hold: barra
di avanzamento che riempie il pulsante e cross-fade dell'icona da faccina
(face-awesome) a mano-che-preme (hand-pointer); al rilascio anticipato
tutto rientra. Una volta rivelata, il pulsante diventa un normale toggle.

- progress guidato da requestAnimationFrame inline (resta visibile anche
  con prefers-reduced-motion, dove le transition globali sono azzerate)
- soppressione del click sintetico post-gesto per non richiudere subito
- attivazione da tastiera (Enter/Space) deliberata, senza hold
- accento legato a --at-accent: ambra su rapidi, viola su esercizio,
  teal su laboratorio
- icone face-awesome + hand-pointer da Font Awesome 7.1.0 duotone

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/Exercise/index.tsx         | 169 ++++++++++++++++++++--
 src/components/Exercise/styles.module.css | 122 ++++++++++++++--
 src/components/Icon/icons.ts              |  17 ++-
 3 files changed, 282 insertions(+), 26 deletions(-)

diff --git a/src/components/Exercise/index.tsx b/src/components/Exercise/index.tsx
index 90bbe49..08b4838 100644
--- a/src/components/Exercise/index.tsx
+++ b/src/components/Exercise/index.tsx
@@ -14,7 +14,14 @@
  * A video l'esercizio mostra la forma corta lezione.esercizio (es. 10.2).
  * Tutti i riferimenti sono identificatori on-site (path/permalink), mai esterni.
  */
-import { type ReactNode } from 'react';
+import {
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
 import { usePluginData } from '@docusaurus/useGlobalData';
@@ -169,24 +176,166 @@ export function Exercise({ n, title, children }: ExerciseProps): ReactNode {
 
 // ─── Solution ────────────────────────────────────────────────────────────────
 
+/** Millisecondi di pressione continua per rivelare la soluzione. */
+const HOLD_MS = 3000;
+
 interface SolutionProps {
-  /** Etichetta del disclosure. Default: «Mostra la soluzione». */
+  /** Etichetta principale (prominente). Default: «Soluzione». */
   label?: string;
+  /** Riga di servizio (attenuata). Default: «tieni premuto per visualizzare». */
+  hint?: string;
   children: ReactNode;
 }
 
+/**
+ * Soluzione a rivelazione protetta: per evitare lo spoiler da misclick, il
+ * corpo si apre solo dopo aver tenuto premuto il pulsante per {@link HOLD_MS}.
+ * Feedback: una barra di avanzamento (nell'accento per-tipo della pagina)
+ * riempie il pulsante e l'icona passa in cross-fade da faccina (a riposo) a
+ * mano-che-preme (in pressione); al rilascio anticipato tutto torna indietro.
+ * Una volta rivelata, il pulsante diventa un normale toggle apri/chiudi
+ * (niente più rischio spoiler).
+ *
+ * Il progress è guidato da requestAnimationFrame scritto inline sull'elemento
+ * (non da una transition CSS) così resta visibile anche con
+ * `prefers-reduced-motion`, dove le transition globali sono azzerate.
+ */
 export function Solution({
-  label = 'Mostra la soluzione',
+  label = 'Soluzione',
+  hint = 'tieni premuto per visualizzare',
   children,
 }: SolutionProps): ReactNode {
+  const [revealed, setRevealed] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [holding, setHolding] = useState(false);
+
+  const fillRef = useRef<HTMLSpanElement>(null);
+  const rafRef = useRef<number | null>(null);
+  const startRef = useRef(0);
+  // gesto di pressione in corso (da puntatore) + soppressione del click che
+  // ogni gesto di puntatore emette al rilascio: senza, il click finale
+  // richiuderebbe la soluzione appena rivelata dall'hold.
+  const gestureRef = useRef(false);
+  const suppressClickRef = useRef(false);
+
+  const setFill = useCallback((p: number) => {
+    if (fillRef.current) fillRef.current.style.transform = `scaleX(${p})`;
+  }, []);
+
+  const stopRaf = useCallback(() => {
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  }, []);
+
+  const startHold = useCallback(
+    (e: ReactPointerEvent<HTMLButtonElement>) => {
+      // Già rivelata o tasto non primario: lascia che sia il click a gestire.
+      if (revealed || e.button !== 0) return;
+      e.preventDefault();
+      gestureRef.current = true;
+      setHolding(true);
+      startRef.current = performance.now();
+      // durante l'hold la barra segue il RAF fotogramma per fotogramma
+      if (fillRef.current) fillRef.current.style.transition = 'none';
+      stopRaf();
+      const step = (now: number) => {
+        const p = Math.min(1, (now - startRef.current) / HOLD_MS);
+        setFill(p);
+        if (p >= 1) {
+          stopRaf();
+          setRevealed(true);
+          setOpen(true);
+          return;
+        }
+        rafRef.current = requestAnimationFrame(step);
+      };
+      rafRef.current = requestAnimationFrame(step);
+    },
+    [revealed, stopRaf, setFill],
+  );
+
+  // fine di un gesto di puntatore (rilascio, uscita o annullamento)
+  const endGesture = useCallback(() => {
+    stopRaf();
+    if (gestureRef.current) {
+      gestureRef.current = false;
+      suppressClickRef.current = true;
+    }
+    setHolding(false);
+    // al rilascio la barra rientra con un breve ease (deterministico, inline)
+    if (fillRef.current) {
+      fillRef.current.style.transition = 'transform 160ms var(--ease-out)';
+    }
+    setFill(0);
+  }, [stopRaf, setFill]);
+
+  const onClick = useCallback(() => {
+    // Sopprimi il click sintetico che segue ogni gesto di puntatore.
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      return;
+    }
+    // Qui ci arriva solo l'attivazione da tastiera (Enter/Space) o il click su
+    // soluzione già rivelata: la prima rivela, il secondo fa toggle.
+    if (revealed) setOpen((v) => !v);
+    else {
+      setRevealed(true);
+      setOpen(true);
+    }
+  }, [revealed]);
+
+  useEffect(() => () => stopRaf(), [stopRaf]);
+
   return (
-    <details className={styles.solution}>
-      <summary className={styles.solutionSummary}>
-        <Icon name="check" size={16} className={styles.solutionIcon} />
-        <span>{label}</span>
-      </summary>
-      <div className={styles.solutionBody}>{children}</div>
-    </details>
+    <div
+      className={styles.solution}
+      data-revealed={revealed || undefined}
+      data-holding={holding || undefined}
+    >
+      <button
+        type="button"
+        className={styles.solutionSummary}
+        aria-expanded={open}
+        onPointerDown={startHold}
+        onPointerUp={endGesture}
+        onPointerLeave={endGesture}
+        onPointerCancel={endGesture}
+        onClick={onClick}
+      >
+        <span
+          ref={fillRef}
+          className={styles.solutionFill}
+          aria-hidden="true"
+        />
+        <span className={styles.solutionIconWrap} aria-hidden="true">
+          <Icon
+            name="face-awesome"
+            size={18}
+            className={`${styles.solutionIcon} ${styles.solutionIconRest}`}
+          />
+          <Icon
+            name="hand-pointer"
+            size={17}
+            className={`${styles.solutionIcon} ${styles.solutionIconHold}`}
+          />
+        </span>
+        <span className={styles.solutionLabels}>
+          <span className={styles.solutionLabel}>{label}</span>
+          {!revealed && <span className={styles.solutionHint}>{hint}</span>}
+        </span>
+        {revealed && (
+          <Icon
+            name="arrow-right"
+            size={13}
+            className={styles.solutionChevron}
+            aria-hidden="true"
+          />
+        )}
+      </button>
+      {open && <div className={styles.solutionBody}>{children}</div>}
+    </div>
   );
 }
 
diff --git a/src/components/Exercise/styles.module.css b/src/components/Exercise/styles.module.css
index 18d41ae..a831bf0 100644
--- a/src/components/Exercise/styles.module.css
+++ b/src/components/Exercise/styles.module.css
@@ -247,9 +247,12 @@
   min-width: 0;
 }
 
-/* ─── Solution ─────────────────────────────────────────────────────────────── */
+/* ─── Solution (tieni-premuto-per-rivelare) ────────────────────────────────── */
 
 .solution {
+  /* segue l'accento per-tipo della pagina (rapidi=ambra, esercizio=viola,
+     laboratorio=teal); fuori da una pagina-esercizio ricade sul blu di default */
+  --sol: var(--at-accent);
   margin: 16px 0 0;
   border: 1px solid var(--at-border);
   border-radius: var(--radius-md);
@@ -258,39 +261,128 @@
 }
 
 .solutionSummary {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
+  gap: 11px;
+  width: 100%;
+  margin: 0;
+  padding: 11px 16px;
+  border: 0;
+  background: transparent;
+  text-align: left;
   cursor: pointer;
-  list-style: none;
   font-family: var(--font-mono-ui);
-  font-size: 0.85rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
   color: var(--at-fg-strong);
   user-select: none;
+  -webkit-touch-callout: none;
+  /* la pressione lunga su touch non deve selezionare testo o scrollare */
+  touch-action: none;
   transition: background var(--dur-fast) var(--ease-out);
 }
 
-.solutionSummary::-webkit-details-marker {
-  display: none;
-}
-
 .solutionSummary:hover {
   background: var(--at-bg-chip);
 }
 
-.solutionIcon {
-  color: #16a34a;
+/* barra di avanzamento: riempie il pulsante durante la pressione. Lo scaleX e
+   la sua transition sono guidati inline da JS (requestAnimationFrame durante
+   l'hold, breve ease al rilascio): vedi src/components/Exercise/index.tsx. */
+.solutionFill {
+  position: absolute;
+  inset: 0;
+  transform: scaleX(0);
+  transform-origin: left center;
+  background: color-mix(in srgb, var(--sol) 16%, transparent);
+  pointer-events: none;
+}
+
+[data-holding] .solutionFill {
+  /* bordo destro come "testa" della barra, per leggere meglio l'avanzamento */
+  box-shadow: inset -2px 0 0 0 color-mix(in srgb, var(--sol) 55%, transparent);
+}
+
+/* contenuti sopra la barra */
+.solutionIconWrap,
+.solutionLabels,
+.solutionChevron {
+  position: relative;
+  z-index: 1;
+}
+
+/* cross-fade icona: lampadina (a riposo) ⇄ mano-che-preme (in pressione) */
+.solutionIconWrap {
   flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+  color: var(--sol);
+}
+
+.solutionIcon {
+  grid-area: 1 / 1;
+  transition:
+    opacity var(--dur-fast) var(--ease-out),
+    transform var(--dur-fast) var(--ease-out);
+}
+
+.solutionIconRest {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.solutionIconHold {
+  opacity: 0;
+  transform: scale(0.78);
 }
 
-html[data-theme='dark'] .solutionIcon {
-  color: #4ade80;
+[data-holding] .solutionIconRest {
+  opacity: 0;
+  transform: scale(0.78);
+}
+
+[data-holding] .solutionIconHold {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.solutionLabels {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.solutionLabel {
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1.3;
+}
+
+.solutionHint {
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+  color: var(--at-faint);
+}
+
+.solutionChevron {
+  margin-left: auto;
+  color: var(--at-muted);
+  transform: rotate(90deg);
+  transition: transform var(--dur-fast) var(--ease-out);
+}
+
+[aria-expanded='true'] .solutionChevron {
+  transform: rotate(-90deg);
 }
 
 .solutionBody {
+  position: relative;
+  z-index: 1;
   padding: 4px 16px 14px;
   border-top: 1px solid var(--at-border);
 }
diff --git a/src/components/Icon/icons.ts b/src/components/Icon/icons.ts
index 91f21dc..d3778ad 100644
--- a/src/components/Icon/icons.ts
+++ b/src/components/Icon/icons.ts
@@ -56,7 +56,10 @@ export type IconName =
   | 'thumbtack'
   | 'dumbbell'
   | 'pen'
-  | 'flask';
+  | 'flask'
+  // Soluzione (tieni-premuto-per-rivelare)
+  | 'face-awesome'
+  | 'hand-pointer';
 
 export const DUOTONE: Record<IconName, DuotoneGlyph> = {
   heart: {
@@ -262,4 +265,16 @@ export const DUOTONE: Record<IconName, DuotoneGlyph> = {
     s: 'M68.9 448l73.1-128 164 0 73.1 128-310.3 0z',
     p: 'M160 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 151.5 120.5 210.8c4.9 8.7 7.5 18.5 7.5 28.4 0 31.6-25.6 57.3-57.3 57.3L57.3 512C25.6 512 0 486.4 0 454.7 0 444.7 2.6 435 7.5 426.3L128 215.5 128 64c-17.7 0-32-14.3-32-32S110.3 0 128 0l32 0zm32 64l0 151.5c0 11.1-2.9 22.1-8.4 31.8L68.9 448 379.1 448 264.4 247.3c-5.5-9.7-8.4-20.6-8.4-31.8l0-151.5-64 0z',
   },
+  // Faccina mascotte FA: la soluzione "a riposo". Sorgente: FA 7.1.0 duotone.
+  'face-awesome': {
+    vb: '0 0 512 512',
+    s: 'M0 256a256 256 0 1 0 512 0 256 256 0 1 0 -512 0zm80-72c0-35.3 28.7-64 64-64 3.4 0 6.7 .3 10 .8 22.6 3.5 41.3 18.9 49.5 39.6 2.9 7.3 4.5 15.3 4.5 23.6l0 10.3c0 16.4-13.3 29.7-29.7 29.7l-68.6 0C93.3 224 80 210.7 80 194.3L80 184zm20.4 123.8c-2.3-10.2 5.5-19.8 15.9-19.8l279.4 0c10.4 0 18.1 9.6 15.9 19.8-5 22.3-14.6 42.7-27.7 60.2-29.4 39.3-76.5 64-127.9 64-74.3 0-139.5-51.6-155.6-124.2zM272 192c0-39.8 32.2-72 72-72 5.8 0 11.4 .7 16.8 2 22 5.3 40.1 20.6 49.1 40.9 3.9 8.9 6.1 18.8 6.1 29.1l0 7.5c0 13.5-11 24.5-24.5 24.5l-95.1 0C283 224 272 213 272 199.5l0-7.5z',
+    p: 'M154 120.8c22.6 3.5 41.3 18.9 49.5 39.6-5.6 9.4-15.8 15.6-27.5 15.6-17.7 0-32-14.3-32-32 0-9.1 3.8-17.4 10-23.2zM360.8 122c22 5.3 40.1 20.6 49.1 40.9-5.8 8-15.2 13.1-25.9 13.1-17.7 0-32-14.3-32-32 0-8.5 3.3-16.3 8.8-22zM100.4 307.8c-2.3-10.2 5.5-19.8 15.9-19.8l279.4 0c10.4 0 18.1 9.6 15.9 19.8-5 22.3-14.6 42.7-27.7 60.2-13.4-10-30-16-47.9-16-44.2 0-80 35.8-80 80-74.3 0-139.5-51.6-155.6-124.2z',
+  },
+  // Mano che preme: stato "tieni premuto". Sorgente: FA 7.1.0 duotone.
+  'hand-pointer': {
+    vb: '0 0 448 512',
+    s: 'M8 336l72 96c33.7 45 84.6 73.4 140 79 4.8 .7 9.7 1 14.7 1l85.3 0c70.7 0 128-57.3 128-128l0-112c0-26.5-21.5-48-48-48-12.4 0-23.6 4.7-32.1 12.3-1.9-24.8-22.6-44.3-47.9-44.3-13.8 0-26.3 5.8-35 15.2-6.8-18.2-24.4-31.2-45-31.2-12.3 0-23.5 4.6-32 12.2L208 40c0-22.1-17.9-40-40-40s-40 17.9-40 40l0 322.7-56-74.7c-13.3-17.7-38.3-21.3-56-8s-21.3 38.3-8 56zm200-32c0-8.8 7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-96zm64 0c0-8.8 7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-96zm64 0c0-8.8 7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-96z',
+    p: 'M224 288c8.8 0 16 7.2 16 16l0 96c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-96c0-8.8 7.2-16 16-16zm64 0c8.8 0 16 7.2 16 16l0 96c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-96c0-8.8 7.2-16 16-16zm80 16l0 96c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-96c0-8.8 7.2-16 16-16s16 7.2 16 16z',
+  },
 };

From 017c4203cc67ba695833d2588f668b4ceffe2abb Mon Sep 17 00:00:00 2001
From: Marco Farina <marco.farina@jcmaxwell.it>
Date: Tue, 23 Jun 2026 08:47:53 +0200
Subject: [PATCH 6/9] =?UTF-8?q?feat(apprendista):=20volume-sorgente=20come?=
 =?UTF-8?q?=20=C2=ABVol.=20N=C2=BB=20nelle=20briciole?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nella Biblioteca dell'Apprendista le briciole affiancavano due titoli di
libro interi — «Biblioteca dell'Apprendista» (volume corrente) e il
volume-sorgente «Manuale del Programmatore» — dando l'impressione di
navigare fra due libri. Ora la prima briciola della sidebar (il
volume-sorgente) è accorciata a «Vol. N»: si legge come una sezione, non
come un libro concorrente, e conserva la provenienza.

  🏠 › Biblioteca dell'Apprendista › Vol. 1 › Le basi › …

Rietichetta solo client-side e limitata a pluginId 'apprendista'; la
sidebar resta col nome lungo. Mappa corta VOLUME_SHORT + helper
volumeShortByLabel in docResolve (lookup inverso nome-lungo → Vol. N).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017qp2CZ92ExM3WsDzuVQXRC
---
 src/lib/docResolve.ts              | 24 ++++++++++++++++++++++++
 src/theme/DocBreadcrumbs/index.tsx | 27 ++++++++++++++++++++-------
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/lib/docResolve.ts b/src/lib/docResolve.ts
index 70c9adc..686f6d6 100644
--- a/src/lib/docResolve.ts
+++ b/src/lib/docResolve.ts
@@ -63,6 +63,30 @@ export function volumeLabel(volume: string): string {
   return VOLUME_LABELS[volume] ?? volume;
 }
 
+// Etichetta CORTA del volume (Vol. N), usata SOLO nelle briciole della
+// Biblioteca dell'Apprendista: lì il volume-sorgente affianca «Biblioteca
+// dell'Apprendista» e due titoli di libro interi confondono. «Vol. 1» si legge
+// come una sezione, non come un libro concorrente, e conserva la provenienza.
+export const VOLUME_SHORT: Record<string, string> = {
+  programmatore: 'Vol. 1',
+  artefice: 'Vol. 2',
+  archivista: 'Vol. 3',
+  apprendista: 'Vol. 4',
+};
+
+// Lookup inverso nome-lungo → Vol. N: la prima briciola della sidebar espone il
+// label lungo (es. «Manuale del Programmatore»), non il pluginId.
+const SHORT_BY_LABEL: Record<string, string> = Object.fromEntries(
+  Object.entries(VOLUME_LABELS)
+    .filter(([key]) => VOLUME_SHORT[key])
+    .map(([key, label]) => [label, VOLUME_SHORT[key]]),
+);
+
+/** «Vol. N» dato il nome lungo del volume, o `undefined` se non è un volume. */
+export function volumeShortByLabel(label: string): string | undefined {
+  return SHORT_BY_LABEL[label];
+}
+
 /**
  * Risolve il permalink (senza baseUrl, pronto per <Link to>) di un doc dato il
  * suo volume (pluginId) e il suo docId volume-local. `null` se non risolve —
diff --git a/src/theme/DocBreadcrumbs/index.tsx b/src/theme/DocBreadcrumbs/index.tsx
index 104dbda..f5964f8 100644
--- a/src/theme/DocBreadcrumbs/index.tsx
+++ b/src/theme/DocBreadcrumbs/index.tsx
@@ -1,11 +1,15 @@
 /**
  * Swizzle di @theme/DocBreadcrumbs (eject).
  *
- * Unica differenza rispetto all'originale: dopo la casetta (che punta alla home
- * del sito) inseriamo una briciola col NOME DEL VOLUME corrente, linkata
- * all'indice del volume. Senza, in Biblioteca dell'Apprendista la prima briciola
- * è il volume-sorgente (es. «Manuale del Programmatore») e si ha l'impressione
- * di essere nel Vol.1 invece che negli esercizi del Vol.4.
+ * Due differenze rispetto all'originale:
+ *  1. dopo la casetta (che punta alla home del sito) inseriamo una briciola col
+ *     NOME DEL VOLUME corrente, linkata all'indice del volume. Senza, in
+ *     Biblioteca dell'Apprendista la prima briciola è il volume-sorgente (es.
+ *     «Manuale del Programmatore») e si ha l'impressione di essere nel Vol.1
+ *     invece che negli esercizi del Vol.4.
+ *  2. nella sola Biblioteca dell'Apprendista la prima briciola della sidebar (il
+ *     volume-sorgente) è accorciata a «Vol. N»: affianco a «Biblioteca
+ *     dell'Apprendista» due titoli di libro interi confondono.
  *
  * Il resto è copia fedele dell'originale: ricontrollare a ogni upgrade di
  * Docusaurus (vedi memoria upgrade_risks).
@@ -24,7 +28,7 @@ import { translate } from '@docusaurus/Translate';
 import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
 import DocBreadcrumbsStructuredData from '@theme/DocBreadcrumbs/StructuredData';
 
-import { VOLUME_LABELS } from '@site/src/lib/docResolve';
+import { VOLUME_LABELS, volumeShortByLabel } from '@site/src/lib/docResolve';
 
 import styles from './styles.module.css';
 
@@ -88,9 +92,14 @@ function VolumeBreadcrumbItem(): ReactNode {
 export default function DocBreadcrumbs(): ReactNode {
   const breadcrumbs = useSidebarBreadcrumbs();
   const homePageRoute = useHomePageRoute();
+  const { pluginId } = useDocsVersion();
   if (!breadcrumbs) {
     return null;
   }
+  // Solo in Biblioteca dell'Apprendista: la prima briciola della sidebar è il
+  // volume-sorgente (es. «Manuale del Programmatore»). Accanto a «Biblioteca
+  // dell'Apprendista» due titoli di libro confondono → la accorciamo a «Vol. N».
+  const shortenFirst = pluginId === 'apprendista';
   return (
     <>
       <DocBreadcrumbsStructuredData breadcrumbs={breadcrumbs} />
@@ -114,10 +123,14 @@ export default function DocBreadcrumbs(): ReactNode {
               item.type === 'category' && item.linkUnlisted
                 ? undefined
                 : item.href;
+            const label =
+              shortenFirst && idx === 0
+                ? (volumeShortByLabel(item.label) ?? item.label)
+                : item.label;
             return (
               <BreadcrumbsItem key={idx} active={isLast}>
                 <BreadcrumbsItemLink href={href} isLast={isLast}>
-                  {item.label}
+                  {label}
                 </BreadcrumbsItemLink>
               </BreadcrumbsItem>
             );

From 8888f1a9351ab491003a30e1efa7c9f16b67acf8 Mon Sep 17 00:00:00 2001
From: Marco Farina <marco.farina@jcmaxwell.it>
Date: Tue, 23 Jun 2026 08:55:57 +0200
Subject: [PATCH 7/9] fix(apprendista): chip esercizio centrato otticamente in
 verticale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le cifre del numero non hanno discendenti: lo spazio vuoto del descender
dell'em-box si accumulava sotto l'inchiostro (≈3,8px), rendendo il chip
basso-pesante. line-height:1 + padding verticale asimmetrico in em
(0.3em sopra / 0.14em sotto) ricentra; in em scala col font.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017qp2CZ92ExM3WsDzuVQXRC
---
 src/components/Exercise/styles.module.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Exercise/styles.module.css b/src/components/Exercise/styles.module.css
index a831bf0..c4e494d 100644
--- a/src/components/Exercise/styles.module.css
+++ b/src/components/Exercise/styles.module.css
@@ -239,8 +239,12 @@
   background: var(--at-accent-bg);
   border: 1px solid var(--at-accent-chip-border);
   border-radius: var(--radius-sm);
-  padding: 2px 10px;
-  line-height: 1.4;
+  /* padding verticale asimmetrico in em: le cifre non hanno discendenti, così
+     lo spazio vuoto del descender finisce tutto sotto e il chip sembra basso-
+     pesante. Più padding sopra che sotto ricentra otticamente l'inchiostro
+     (compensa ≈0.16em di overhang del descender); in em così scala col font. */
+  padding: 0.3em 10px 0.14em;
+  line-height: 1;
 }
 
 .exTitle {

From 51a1281ddc1ff65fdf1c537fe160e8e987e823e1 Mon Sep 17 00:00:00 2001
From: Marco Farina <marco.farina@jcmaxwell.it>
Date: Tue, 23 Jun 2026 09:05:53 +0200
Subject: [PATCH 8/9] feat(apprendista): icona puzzle per la soluzione + tile
 tipo quadrata
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- soluzione: tessera di puzzle (FA 7.1.0 duotone) al posto della faccina
  come icona "a riposo", ingrandita (32px) per pareggiare l'altezza di
  label + hint
- card esercizio: la tile del tipo ora è quadrata (46px) e centrata,
  non più rettangolare stirata a tutta l'altezza della card
- bump 0.8.0

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017qp2CZ92ExM3WsDzuVQXRC
---
 package-lock.json                         |  4 ++--
 package.json                              |  2 +-
 src/components/Exercise/index.tsx         |  6 +++---
 src/components/Exercise/styles.module.css | 12 +++++++-----
 src/components/Icon/icons.ts              |  7 +++++++
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4ef34c1..3898462 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "python-doesnt-byte",
-  "version": "0.7.12",
+  "version": "0.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "python-doesnt-byte",
-      "version": "0.7.12",
+      "version": "0.8.0",
       "dependencies": {
         "@codemirror/commands": "^6.10.3",
         "@codemirror/lang-python": "^6.2.1",
diff --git a/package.json b/package.json
index 2c1ecc4..bcdde40 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "python-doesnt-byte",
-  "version": "0.7.12",
+  "version": "0.8.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
diff --git a/src/components/Exercise/index.tsx b/src/components/Exercise/index.tsx
index 08b4838..955b8ec 100644
--- a/src/components/Exercise/index.tsx
+++ b/src/components/Exercise/index.tsx
@@ -311,13 +311,13 @@ export function Solution({
         />
         <span className={styles.solutionIconWrap} aria-hidden="true">
           <Icon
-            name="face-awesome"
-            size={18}
+            name="puzzle"
+            size={30}
             className={`${styles.solutionIcon} ${styles.solutionIconRest}`}
           />
           <Icon
             name="hand-pointer"
-            size={17}
+            size={28}
             className={`${styles.solutionIcon} ${styles.solutionIconHold}`}
           />
         </span>
diff --git a/src/components/Exercise/styles.module.css b/src/components/Exercise/styles.module.css
index c4e494d..c87738f 100644
--- a/src/components/Exercise/styles.module.css
+++ b/src/components/Exercise/styles.module.css
@@ -46,7 +46,7 @@
 .anchor {
   display: flex;
   flex-direction: row;
-  align-items: stretch;
+  align-items: center;
   gap: 15px;
   padding: 18px 22px;
   border-right: 1px solid var(--c-border);
@@ -55,8 +55,10 @@
 }
 
 .iconTile {
-  align-self: stretch;
-  width: 54px;
+  align-self: center;
+  /* quadrata, alta quanto il blocco label-tipo + numero esercizio */
+  width: 46px;
+  height: 46px;
   flex-shrink: 0;
   border-radius: var(--radius-md);
   display: flex;
@@ -317,8 +319,8 @@
 /* cross-fade icona: lampadina (a riposo) ⇄ mano-che-preme (in pressione) */
 .solutionIconWrap {
   flex-shrink: 0;
-  width: 20px;
-  height: 20px;
+  width: 32px;
+  height: 32px;
   display: grid;
   place-items: center;
   color: var(--sol);
diff --git a/src/components/Icon/icons.ts b/src/components/Icon/icons.ts
index d3778ad..92f1c78 100644
--- a/src/components/Icon/icons.ts
+++ b/src/components/Icon/icons.ts
@@ -59,6 +59,7 @@ export type IconName =
   | 'flask'
   // Soluzione (tieni-premuto-per-rivelare)
   | 'face-awesome'
+  | 'puzzle'
   | 'hand-pointer';
 
 export const DUOTONE: Record<IconName, DuotoneGlyph> = {
@@ -271,6 +272,12 @@ export const DUOTONE: Record<IconName, DuotoneGlyph> = {
     s: 'M0 256a256 256 0 1 0 512 0 256 256 0 1 0 -512 0zm80-72c0-35.3 28.7-64 64-64 3.4 0 6.7 .3 10 .8 22.6 3.5 41.3 18.9 49.5 39.6 2.9 7.3 4.5 15.3 4.5 23.6l0 10.3c0 16.4-13.3 29.7-29.7 29.7l-68.6 0C93.3 224 80 210.7 80 194.3L80 184zm20.4 123.8c-2.3-10.2 5.5-19.8 15.9-19.8l279.4 0c10.4 0 18.1 9.6 15.9 19.8-5 22.3-14.6 42.7-27.7 60.2-29.4 39.3-76.5 64-127.9 64-74.3 0-139.5-51.6-155.6-124.2zM272 192c0-39.8 32.2-72 72-72 5.8 0 11.4 .7 16.8 2 22 5.3 40.1 20.6 49.1 40.9 3.9 8.9 6.1 18.8 6.1 29.1l0 7.5c0 13.5-11 24.5-24.5 24.5l-95.1 0C283 224 272 213 272 199.5l0-7.5z',
     p: 'M154 120.8c22.6 3.5 41.3 18.9 49.5 39.6-5.6 9.4-15.8 15.6-27.5 15.6-17.7 0-32-14.3-32-32 0-9.1 3.8-17.4 10-23.2zM360.8 122c22 5.3 40.1 20.6 49.1 40.9-5.8 8-15.2 13.1-25.9 13.1-17.7 0-32-14.3-32-32 0-8.5 3.3-16.3 8.8-22zM100.4 307.8c-2.3-10.2 5.5-19.8 15.9-19.8l279.4 0c10.4 0 18.1 9.6 15.9 19.8-5 22.3-14.6 42.7-27.7 60.2-13.4-10-30-16-47.9-16-44.2 0-80 35.8-80 80-74.3 0-139.5-51.6-155.6-124.2z',
   },
+  // Tessera di puzzle: alternativa per la soluzione "a riposo". Sorgente: FA 7.1.0 duotone.
+  puzzle: {
+    vb: '0 0 512 512',
+    s: 'M0 288l64 0c8.8 0 16-7.2 16-16l0-16c0-17.7 14.3-32 32-32s32 14.3 32 32l0 16c0 8.8 7.2 16 16 16l64 0 0-68c0-6.6 5.4-12 12-12l4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-4 0c-6.6 0-12-5.4-12-12l0-52c0-8.8-7.2-16-16-16L64 64C28.7 64 0 92.7 0 128L0 288zm224 0l0 64c0 8.8-7.2 16-16 16l-16 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l16 0c8.8 0 16 7.2 16 16l0 64 160 0c35.3 0 64-28.7 64-64l0-144c0-8.8-7.2-16-16-16l-48 0c-8.8 0-16 7.2-16 16l0 16c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-16c0-8.8-7.2-16-16-16l-64 0z',
+    p: 'M0 288L0 448c0 35.3 28.7 64 64 64l160 0 0-64c0-8.8-7.2-16-16-16l-16 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l16 0c8.8 0 16-7.2 16-16l0-64-64 0c-8.8 0-16-7.2-16-16l0-16c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 16c0 8.8-7.2 16-16 16L0 288zM304 16l0 48c0 8.8 7.2 16 16 16l16 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-16 0c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l36 0c6.6 0 12 5.4 12 12l0 4c0 17.7 14.3 32 32 32s32-14.3 32-32l0-4c0-6.6 5.4-12 12-12l52 0c8.8 0 16-7.2 16-16l0-128c0-35.3-28.7-64-64-64L320 0c-8.8 0-16 7.2-16 16z',
+  },
   // Mano che preme: stato "tieni premuto". Sorgente: FA 7.1.0 duotone.
   'hand-pointer': {
     vb: '0 0 448 512',

From 7303a153c3c65bc2b6b9dfcf295da08272035bce Mon Sep 17 00:00:00 2001
From: Marco Farina <marco.farina@jcmaxwell.it>
Date: Tue, 23 Jun 2026 09:19:27 +0200
Subject: [PATCH 9/9] refactor(apprendista): pulizia post-review template
 esercizi
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rilievi della review della PR #11, tutti pulizia (nessun cambio a runtime):

- Icon: rimossa l'icona morta `face-awesome` (tipo + glifo duotone): la
  soluzione a riposo usa `puzzle`, `face-awesome` non era mai referenziata.
- ExerciseLink: riusa il tipo `Difficulty` da src/lib/docResolve invece di
  ridichiararlo (una sola fonte per la union).
- exercise-graph: `loadContent` non espone piu `lessons` nel global data
  (serve solo internamente alla validazione; i client usano exercises/byLesson).
  Tipo `ExerciseGraphData` allineato.
- Commenti: aggiornati i riferimenti all'icona a riposo da «faccina»/«lampadina»
  a «tessera-di-puzzle» (Exercise/index.tsx e styles).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019kfksKgmzWoiSuMLCgFdQb
---
 plugins/exercise-graph/index.js           | 4 +++-
 src/components/Exercise/index.tsx         | 5 +++--
 src/components/Exercise/styles.module.css | 2 +-
 src/components/ExerciseLink/index.tsx     | 3 +--
 src/components/Icon/icons.ts              | 9 +--------
 src/lib/docResolve.ts                     | 1 -
 6 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/plugins/exercise-graph/index.js b/plugins/exercise-graph/index.js
index 85b802f..3d36211 100644
--- a/plugins/exercise-graph/index.js
+++ b/plugins/exercise-graph/index.js
@@ -199,7 +199,9 @@ module.exports = function exerciseGraphPlugin(context) {
         });
       }
 
-      return { exercises, byLesson, lessons };
+      // `lessons` serve solo qui per validare i riferimenti: non finisce nel
+      // global data (i client usano solo `exercises` e `byLesson`).
+      return { exercises, byLesson };
     },
 
     async contentLoaded({ content, actions }) {
diff --git a/src/components/Exercise/index.tsx b/src/components/Exercise/index.tsx
index 955b8ec..d00fb83 100644
--- a/src/components/Exercise/index.tsx
+++ b/src/components/Exercise/index.tsx
@@ -191,8 +191,9 @@ interface SolutionProps {
  * Soluzione a rivelazione protetta: per evitare lo spoiler da misclick, il
  * corpo si apre solo dopo aver tenuto premuto il pulsante per {@link HOLD_MS}.
  * Feedback: una barra di avanzamento (nell'accento per-tipo della pagina)
- * riempie il pulsante e l'icona passa in cross-fade da faccina (a riposo) a
- * mano-che-preme (in pressione); al rilascio anticipato tutto torna indietro.
+ * riempie il pulsante e l'icona passa in cross-fade da tessera-di-puzzle (a
+ * riposo) a mano-che-preme (in pressione); al rilascio anticipato tutto torna
+ * indietro.
  * Una volta rivelata, il pulsante diventa un normale toggle apri/chiudi
  * (niente più rischio spoiler).
  *
diff --git a/src/components/Exercise/styles.module.css b/src/components/Exercise/styles.module.css
index c87738f..1d09966 100644
--- a/src/components/Exercise/styles.module.css
+++ b/src/components/Exercise/styles.module.css
@@ -316,7 +316,7 @@
   z-index: 1;
 }
 
-/* cross-fade icona: lampadina (a riposo) ⇄ mano-che-preme (in pressione) */
+/* cross-fade icona: tessera-di-puzzle (a riposo) ⇄ mano-che-preme (in pressione) */
 .solutionIconWrap {
   flex-shrink: 0;
   width: 32px;
diff --git a/src/components/ExerciseLink/index.tsx b/src/components/ExerciseLink/index.tsx
index 59323ca..971c84f 100644
--- a/src/components/ExerciseLink/index.tsx
+++ b/src/components/ExerciseLink/index.tsx
@@ -10,11 +10,10 @@
 import React, { type ReactNode } from 'react';
 import Link from '@docusaurus/Link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Difficulty } from '@site/src/lib/docResolve';
 
 import styles from './styles.module.css';
 
-type Difficulty = 'facile' | 'medio' | 'difficile';
-
 interface ExerciseLinkProps {
   /** Path on-site dell'esercizio (senza baseUrl). Es. `/apprendista/...`. */
   to: string;
diff --git a/src/components/Icon/icons.ts b/src/components/Icon/icons.ts
index 92f1c78..5204bfd 100644
--- a/src/components/Icon/icons.ts
+++ b/src/components/Icon/icons.ts
@@ -58,7 +58,6 @@ export type IconName =
   | 'pen'
   | 'flask'
   // Soluzione (tieni-premuto-per-rivelare)
-  | 'face-awesome'
   | 'puzzle'
   | 'hand-pointer';
 
@@ -266,13 +265,7 @@ export const DUOTONE: Record<IconName, DuotoneGlyph> = {
     s: 'M68.9 448l73.1-128 164 0 73.1 128-310.3 0z',
     p: 'M160 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 151.5 120.5 210.8c4.9 8.7 7.5 18.5 7.5 28.4 0 31.6-25.6 57.3-57.3 57.3L57.3 512C25.6 512 0 486.4 0 454.7 0 444.7 2.6 435 7.5 426.3L128 215.5 128 64c-17.7 0-32-14.3-32-32S110.3 0 128 0l32 0zm32 64l0 151.5c0 11.1-2.9 22.1-8.4 31.8L68.9 448 379.1 448 264.4 247.3c-5.5-9.7-8.4-20.6-8.4-31.8l0-151.5-64 0z',
   },
-  // Faccina mascotte FA: la soluzione "a riposo". Sorgente: FA 7.1.0 duotone.
-  'face-awesome': {
-    vb: '0 0 512 512',
-    s: 'M0 256a256 256 0 1 0 512 0 256 256 0 1 0 -512 0zm80-72c0-35.3 28.7-64 64-64 3.4 0 6.7 .3 10 .8 22.6 3.5 41.3 18.9 49.5 39.6 2.9 7.3 4.5 15.3 4.5 23.6l0 10.3c0 16.4-13.3 29.7-29.7 29.7l-68.6 0C93.3 224 80 210.7 80 194.3L80 184zm20.4 123.8c-2.3-10.2 5.5-19.8 15.9-19.8l279.4 0c10.4 0 18.1 9.6 15.9 19.8-5 22.3-14.6 42.7-27.7 60.2-29.4 39.3-76.5 64-127.9 64-74.3 0-139.5-51.6-155.6-124.2zM272 192c0-39.8 32.2-72 72-72 5.8 0 11.4 .7 16.8 2 22 5.3 40.1 20.6 49.1 40.9 3.9 8.9 6.1 18.8 6.1 29.1l0 7.5c0 13.5-11 24.5-24.5 24.5l-95.1 0C283 224 272 213 272 199.5l0-7.5z',
-    p: 'M154 120.8c22.6 3.5 41.3 18.9 49.5 39.6-5.6 9.4-15.8 15.6-27.5 15.6-17.7 0-32-14.3-32-32 0-9.1 3.8-17.4 10-23.2zM360.8 122c22 5.3 40.1 20.6 49.1 40.9-5.8 8-15.2 13.1-25.9 13.1-17.7 0-32-14.3-32-32 0-8.5 3.3-16.3 8.8-22zM100.4 307.8c-2.3-10.2 5.5-19.8 15.9-19.8l279.4 0c10.4 0 18.1 9.6 15.9 19.8-5 22.3-14.6 42.7-27.7 60.2-13.4-10-30-16-47.9-16-44.2 0-80 35.8-80 80-74.3 0-139.5-51.6-155.6-124.2z',
-  },
-  // Tessera di puzzle: alternativa per la soluzione "a riposo". Sorgente: FA 7.1.0 duotone.
+  // Tessera di puzzle: la soluzione "a riposo". Sorgente: FA 7.1.0 duotone.
   puzzle: {
     vb: '0 0 512 512',
     s: 'M0 288l64 0c8.8 0 16-7.2 16-16l0-16c0-17.7 14.3-32 32-32s32 14.3 32 32l0 16c0 8.8 7.2 16 16 16l64 0 0-68c0-6.6 5.4-12 12-12l4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-4 0c-6.6 0-12-5.4-12-12l0-52c0-8.8-7.2-16-16-16L64 64C28.7 64 0 92.7 0 128L0 288zm224 0l0 64c0 8.8-7.2 16-16 16l-16 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l16 0c8.8 0 16 7.2 16 16l0 64 160 0c35.3 0 64-28.7 64-64l0-144c0-8.8-7.2-16-16-16l-48 0c-8.8 0-16 7.2-16 16l0 16c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-16c0-8.8-7.2-16-16-16l-64 0z',
diff --git a/src/lib/docResolve.ts b/src/lib/docResolve.ts
index 686f6d6..b0723e2 100644
--- a/src/lib/docResolve.ts
+++ b/src/lib/docResolve.ts
@@ -47,7 +47,6 @@ export interface ExerciseListItem {
 export interface ExerciseGraphData {
   exercises: Record<string, ExerciseRecord>;
   byLesson: Record<string, ExerciseListItem[]>;
-  lessons: Record<string, { title: string }>;
 }
 
 // Nome leggibile del volume per pluginId (= routeBasePath = cartella). Fonte