@glossarist/concept-browser 0.7.99 → 0.7.101

package/src/i18n/locales/fra.yml

@@ -11,6 +11,110 @@ nav.stats: Statistiques
 nav.about: À propos
 nav.navigation: Navigation
 nav.datasets: Jeux de données
+nav.relationTypes: Types de relations
+nav.learn: Apprendre
+
+# Section « Apprendre » (enseignement orienté lecteur)
+learn.intro: Cette section explique ce que vous voyez sur ce site et ce que chaque étiquette signifie. Pour la documentation méthodologique canonique (rédaction de jeux de données, alignement ISO), consultez glossarist.org.
+learn.glossaristOrgNote: La documentation méthodologique pour les auteurs de jeux de données se trouve sur glossarist.org.
+learn.example: Exemple
+learn.learnMore: En savoir plus sur glossarist.org
+learn.relationships.title: Relations
+learn.relationships.short: Comment lire les arêtes bilatérales, le râteau partitif, et le tuyau-fil générique.
+learn.relationships.intro: Chaque ligne et étiquette de la Sphère de relations, de la page de détail et de la vue graphe correspond à une relation sémantique typée. Cette page explique ce que chaque type signifie et comment lire son encodage visuel.
+learn.relationships.bilateralSection: Relations bilatérales (un-un)
+learn.relationships.bilateralIntro: Relations typées un-un entre deux concepts. Dessinées sous forme de lignes droites colorées avec flèches dans la sphère.
+learn.relationships.partitiveSection: Hyper-arête partitive (un-plusieurs)
+learn.relationships.partitiveTitle: relation partitive
+learn.relationships.partitiveBody: Décomposition tout/partie. Le concept englobant est le tout ; chaque membre est une partie. Rendu sous forme de râteau — une tige depuis l'englobant vers une colonne perpendiculaire, avec des dents descendant vers chaque membre.
+learn.relationships.generalSection: Hyper-arête générique (un-plusieurs)
+learn.relationships.generalTitle: relation générique
+learn.relationships.generalBody: Décomposition genre/espèce. Le concept englobant est le genre ; chaque membre est une espèce coordonnée différant selon une dimension partagée. Rendu sous forme de branche d'arbre — un tuyau parent épais depuis l'englobant vers un nœud central, avec des fils fins rayonnant vers chaque membre.
+learn.relationships.criterionTitle: Critère de subdivision
+learn.relationships.criterionBody: "La dimension selon laquelle les concepts coordonnés diffèrent. Affichée une fois sur le corps du tuyau parent. Optionnelle : si aucun critère n'est décrit, aucune étiquette n'est dessinée."
+learn.relationships.thickThinTitle: Hiérarchie épais/mince
+learn.relationships.thickThinBody: ISO 704 utilise traditionnellement des lignes plus épaisses pour marquer différents critères de subdivision (multidimensionalité). Le tuyau-fil respecte cela avec un tuyau parent épais (3,2 px) et des fils enfants plus fins (1,0 px) — la métaphore de la branche d'arbre (tronc vs rameaux).
+learn.dimensions.sectionTitle: Dimensions partitives (comment lire les dents du râteau)
+learn.dimensions.presence.title: Présence
+learn.dimensions.presence.summary: Indique si la partie doit être présente (obligatoire) ou peut être absente (optionnelle).
+learn.dimensions.presence.required.label: obligatoire
+learn.dimensions.presence.required.meaning: La partie doit être présente. Dessinée en ligne pleine.
+learn.dimensions.presence.optional.label: optionnelle
+learn.dimensions.presence.optional.meaning: La partie peut être absente. Dessinée en ligne pointillée.
+learn.dimensions.count.title: Nombre
+learn.dimensions.count.summary: Combien d'instances de la partie apparaissent dans le tout.
+learn.dimensions.count.exactly_one.label: exactement un
+learn.dimensions.count.exactly_one.meaning: Un et un seul. Dessiné en ligne simple.
+learn.dimensions.count.at_least_one.label: au moins un
+learn.dimensions.count.at_least_one.meaning: Un ou plusieurs. Dessiné en ligne double, la secondaire pointillée (« possiblement plus »).
+learn.dimensions.count.multiple.label: plusieurs
+learn.dimensions.count.multiple.meaning: Deux ou plusieurs. Dessiné en ligne double, les deux de même style que la primaire.
+learn.dimensions.delimiting.title: Délimitation
+learn.dimensions.delimiting.summary: Indique si la partie reflète une caractéristique délimitante — qui distingue le tout des concepts coordonnés.
+learn.dimensions.delimiting.false.label: non délimitante
+learn.dimensions.delimiting.false.meaning: Une partie ordinaire. Dessinée à largeur de trait normale (1,5 px).
+learn.dimensions.delimiting.true.label: délimitante
+learn.dimensions.delimiting.true.meaning: La partie est essentielle à l'identité du tout. Dessinée à largeur de trait 3× (4,5 px).
+learn.designations.title: Désignations
+learn.designations.short: Termes et symboles — préféré, admis, déconseillé, forme complète, abréviation, acronyme, sigle.
+learn.designations.intro: Les concepts sont désignés par des termes, noms propres et symboles. Cette page explique le vocabulaire que vous verrez sur chaque page de concept.
+learn.designations.normativeSection: Statut normatif
+learn.designations.normativeIntro: Chaque terme porte un statut normatif attribué par l'organisme de normalisation. IL PEUT Y AVOIR PLUS D'UN terme de chaque statut — les termes préférés ne sont pas uniques.
+learn.designations.preferred.label: terme préféré
+learn.designations.preferred.meaning: Le terme principal pour le concept, attribué par l'organisme de normalisation.
+learn.designations.preferred.multipleNote: Il peut y avoir plus d'un terme préféré.
+learn.designations.admitted.label: terme admis
+learn.designations.admitted.meaning: Un synonyme du terme préféré, mais non retenu comme préféré.
+learn.designations.admitted.multipleNote: Il peut y avoir plus d'un terme admis.
+learn.designations.deprecated.label: terme déconseillé
+learn.designations.deprecated.meaning: Un synonyme du terme préféré, mais jugé indésirable.
+learn.designations.deprecated.multipleNote: Il peut y avoir plus d'un terme déconseillé.
+learn.designations.kindsSection: Types et formes de terme
+learn.designations.fullForm.label: forme complète
+learn.designations.fullForm.meaning: La représentation complète d'une désignation.
+learn.designations.abbreviatedForm.label: forme abrégée
+learn.designations.abbreviatedForm.meaning: Une représentation résultant de l'omission d'une partie de la forme complète.
+learn.designations.abbreviatedForm.multipleNote: Pour certaines formes complètes, deux ou plusieurs formes abrégées peuvent exister.
+learn.designations.borrowed.label: terme emprunté
+learn.designations.borrowed.meaning: Un terme pris depuis une autre langue ou un autre domaine.
+learn.designations.variant.label: variante
+learn.designations.variant.meaning: L'une des formes alternatives d'une désignation (ex. différences d'orthographe entre régions).
+learn.designations.typesSection: Types de désignation
+learn.designations.typesIntro: Trois types de plus haut niveau — termes, noms propres et symboles. Pour les termes, les abréviations se divisent en acronymes vs sigles selon la prononciation.
+learn.designations.term.label: terme (expression)
+learn.designations.term.meaning: Une désignation parlée ou écrite — le type le plus courant.
+learn.designations.acronym.label: acronyme
+learn.designations.acronym.meaning: Une forme abrégée prononcée comme un seul mot.
+learn.designations.initialism.label: sigle
+learn.designations.initialism.meaning: Une forme abrégée prononcée lettre par lettre.
+learn.designations.symbol.label: symbole
+learn.designations.symbol.meaning: Une désignation graphique ou mathématique régie par ISO 80000 / IEC 60027.
+learn.statuses.title: Statuts
+learn.statuses.short: Statut d'entrée (valide/retiré/brouillon), statut normatif, statut de source — ce que chaque badge signifie.
+learn.statuses.intro: Les badges de statut apparaissent partout sur le site. Cette page est une référence rapide pour leur signification.
+learn.statuses.entrySection: Statut d'entrée
+learn.statuses.entry.valid.label: valide
+learn.statuses.entry.valid.meaning: L'entrée du concept est actuellement en vigueur.
+learn.statuses.entry.withdrawn.label: retiré
+learn.statuses.entry.withdrawn.meaning: L'entrée a été retirée de l'usage actif.
+learn.statuses.entry.draft.label: brouillon
+learn.statuses.entry.draft.meaning: L'entrée est en cours de développement et non finalisée.
+learn.statuses.entry.superseded.label: remplacé
+learn.statuses.entry.superseded.meaning: L'entrée a été remplacée par une plus récente.
+learn.statuses.normativeSection: Statut normatif
+learn.statuses.normativeTitle: préféré / admis / déconseillé
+learn.statuses.normativeSummary: Statut par terme (préféré, admis, déconseillé). Chaque statut peut s'appliquer à plus d'un terme par concept.
+learn.statuses.normativeGoDeeper: Voir les types de désignation pour des exemples
+learn.statuses.sourceSection: Statut de source
+learn.statuses.sourceIntro: Chaque citation porte un statut décrivant la fidélité de sa reproduction de la source.
+learn.statuses.source.identical.label: identique
+learn.statuses.source.identical.meaning: La définition correspond verbatim à la source.
+learn.statuses.source.modified.label: modifié
+learn.statuses.source.modified.meaning: La définition est adaptée de la source avec des modifications éditoriales.
+learn.statuses.source.restyled.label: reformulé
+learn.statuses.source.restyled.meaning: La définition préserve le sens de la source mais la reformule largement.
+learn.statuses.source.lineage.label: lignage
+learn.statuses.source.lineage.meaning: La source est l'ancêtre historique de ce concept, pas une citation directe.
 
 # Home page
 home.search: Rechercher
@@ -204,6 +308,8 @@ sphere.tight: serré
 sphere.loose: étendu
 sphere.redraw: Redessiner
 sphere.focus: FOCUS
+sphere.toggleMute: Basculer la visibilité
+sphere.learnAbout: En savoir plus sur ce type de relation
 concept.detailView: Détail
 concept.relationSphere: Sphère de relations
 concept.permalink: Permalien

package/src/router/index.ts

@@ -94,6 +94,30 @@ export const routes: RouteRecordRaw[] = [
     name: 'contributors',
     component: () => import('../views/ContributorsView.vue'),
   },
+  {
+    path: '/relation-types',
+    redirect: '/learn/relationships',
+  },
+  {
+    path: '/learn',
+    name: 'learn',
+    component: () => import('../views/learn/LearnIndexView.vue'),
+  },
+  {
+    path: '/learn/relationships',
+    name: 'learn-relationships',
+    component: () => import('../views/learn/LearnRelationshipsView.vue'),
+  },
+  {
+    path: '/learn/designations',
+    name: 'learn-designations',
+    component: () => import('../views/learn/LearnDesignationsView.vue'),
+  },
+  {
+    path: '/learn/statuses',
+    name: 'learn-statuses',
+    component: () => import('../views/learn/LearnStatusesView.vue'),
+  },
   {
     path: '/about',
     name: 'about-global',

package/src/views/RelationTypesView.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+/**
+ * RelationTypesView — teaching page explaining every relation type
+ * the app renders, grouped into:
+ *
+ *   1. Hyperedge relations (one-to-many decompositions)
+ *      - partitive (rake diagram) — ISO 704:2022 §5.5.3
+ *      - general  (pipe-and-thread diagram) — ISO 704:2022 §5.5.4
+ *
+ *   2. Bilateral relations (one-to-one) — grouped by category, labels
+ *      and definitions pulled from the live ontology taxonomy. Adding
+ *      a new type to src/data/taxonomies.json automatically flows
+ *      through to this page (no code change).
+ *
+ * Sphere legend labels deep-link here via `#<type>` anchors
+ * (e.g. `#__generic__`, `#__partitive__`, `#broader_generic`).
+ */
+import { computed } from 'vue';
+import { useI18n } from '../i18n';
+import {
+  RELATIONSHIP_CATEGORIES,
+  relationshipLabel,
+  relationshipDefinition,
+} from '../utils/relationship-categories';
+import HyperedgeDiagram from '../components/HyperedgeDiagram.vue';
+
+const { t } = useI18n();
+
+interface HyperedgeCard {
+  readonly anchor: string;
+  readonly kind: 'partitive' | 'generic';
+  readonly label: string;
+  readonly iso: string;
+  readonly definition: string;
+  readonly example: { conceptId: string; description: string };
+}
+
+const HYPEREDGE_CARDS: readonly HyperedgeCard[] = [
+  {
+    anchor: '__partitive__',
+    kind: 'partitive',
+    label: 'partitive relation',
+    iso: 'ISO 704:2022 §5.5.3',
+    definition:
+      'A whole/part decomposition. The comprehensive concept is the whole; each member is a part. Per-member multiplicity (presence × count) is encoded in the tooth stroke style — solid for required, dashed for optional, double-line for multiple or at-least-one, 3× width for delimiting members.',
+    example: { conceptId: '1.3', description: 'system of quantities' },
+  },
+  {
+    anchor: '__generic__',
+    kind: 'generic',
+    label: 'general relation',
+    iso: 'ISO 704:2022 §5.5.4',
+    definition:
+      'A genus/species decomposition. The comprehensive concept is the genus; each member is a species (coordinate concept) differing along a shared dimension. The thick parent pipe carries the shared criterion (the dimension); thin direct threads radiate from a middle node to each member.',
+    example: { conceptId: '1.9', description: 'measurement unit' },
+  },
+];
+
+const bilateralCategories = computed(() =>
+  RELATIONSHIP_CATEGORIES.map(cat => ({
+    id: cat.id,
+    label: cat.label,
+    color: cat.color,
+    types: cat.types.map(type => ({
+      type,
+      label: relationshipLabel(type),
+      definition: relationshipDefinition(type),
+    })),
+  })),
+);
+</script>
+
+<template>
+  <div class="relation-types-view max-w-5xl mx-auto px-4 py-8">
+    <header class="mb-8">
+      <h1 class="text-3xl font-serif text-ink-800 dark:text-ink-50 mb-2">
+        {{ t('nav.relationTypes') }}
+      </h1>
+      <p class="text-ink-500 dark:text-ink-300">{{ t('relationTypes.intro') }}</p>
+    </header>
+
+    <!-- ── Hyperedge relations ─────────────────────────────────────── -->
+    <section class="mb-12" :aria-label="t('relationTypes.hyperedgeSection')">
+      <h2 class="text-xl font-semibold text-ink-700 dark:text-ink-100 mb-4 border-b border-ink-100 dark:border-ink-700 pb-2">
+        {{ t('relationTypes.hyperedgeSection') }}
+      </h2>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <article
+          v-for="card in HYPEREDGE_CARDS"
+          :key="card.anchor"
+          :id="card.anchor"
+          class="hyperedge-card card p-5 scroll-mt-20"
+        >
+          <div class="flex items-baseline justify-between mb-3 gap-3">
+            <h3 class="text-lg font-semibold text-ink-800 dark:text-ink-50">{{ card.label }}</h3>
+            <span class="text-xs font-mono text-ink-400 dark:text-ink-500">{{ card.iso }}</span>
+          </div>
+          <div class="grid grid-cols-[auto_1fr] gap-4 items-start">
+            <div class="diagram-frame bg-surface-alt dark:bg-ink-800 rounded-md p-2 border border-ink-100 dark:border-ink-700">
+              <HyperedgeDiagram :kind="card.kind" />
+            </div>
+            <div>
+              <p class="text-sm text-ink-600 dark:text-ink-200 mb-3">{{ card.definition }}</p>
+              <p class="text-xs text-ink-400 dark:text-ink-400">
+                {{ t('relationTypes.example') }}: VIM {{ card.example.conceptId }} — {{ card.example.description }}
+              </p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <!-- ── Bilateral relations ─────────────────────────────────────── -->
+    <section :aria-label="t('relationTypes.bilateralSection')">
+      <h2 class="text-xl font-semibold text-ink-700 dark:text-ink-100 mb-4 border-b border-ink-100 dark:border-ink-700 pb-2">
+        {{ t('relationTypes.bilateralSection') }}
+      </h2>
+      <div class="space-y-6">
+        <article
+          v-for="cat in bilateralCategories"
+          :key="cat.id"
+          class="card p-4"
+        >
+          <header class="flex items-center gap-2 mb-3">
+            <span :class="['text-xs font-semibold uppercase tracking-wide px-2 py-0.5 rounded', cat.color]">
+              {{ cat.label }}
+            </span>
+            <span class="text-xs text-ink-400">{{ cat.types.length }}</span>
+          </header>
+          <ul class="space-y-2">
+            <li
+              v-for="item in cat.types"
+              :key="item.type"
+              :id="item.type"
+              class="bilateral-row scroll-mt-20"
+            >
+              <div class="flex items-baseline gap-2 flex-wrap">
+                <span class="font-medium text-ink-800 dark:text-ink-100">{{ item.label }}</span>
+                <code class="text-xs text-ink-400 dark:text-ink-500 font-mono">{{ item.type }}</code>
+              </div>
+              <p v-if="item.definition" class="text-sm text-ink-600 dark:text-ink-300 mt-0.5">
+                {{ item.definition }}
+              </p>
+            </li>
+          </ul>
+        </article>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.hyperedge-card {
+  scroll-margin-top: 5rem;
+}
+.bilateral-row {
+  scroll-margin-top: 5rem;
+}
+</style>

package/src/views/learn/LearnDesignationsView.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+/**
+ * LearnDesignationsView — explains the term/designation vocabulary.
+ *
+ * Three cards:
+ *   1. Normative status (preferred / admitted / deprecated) — ISO 10241-1:2011 §3.4.1.3.
+ *      Each explicitly allows multiple (per ISO Notes 1).
+ *   2. Kinds and forms of term (full form, abbreviated form, borrowed, variant) —
+ *      ISO 10241-1:2011 §3.4.1.2.
+ *   3. Designation types (term / proper name / symbol) with abbreviation subtypes
+ *      (acronym vs initialism) — ISO 704:2022 §7.
+ *
+ * Addresses the user's specific concerns:
+ *   - "preferred/admitted term means, that they can be multiple" → Card 1
+ *   - "types of acronym" → Card 3 (acronym vs initialism vs symbol)
+ */
+import { useI18n } from '../../i18n';
+import LearnCard from '../../components/learn/LearnCard.vue';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="learn-designations max-w-5xl mx-auto px-4 py-8">
+    <header class="mb-8">
+      <h1 class="text-3xl font-serif text-ink-800 dark:text-ink-50 mb-2">
+        {{ t('learn.designations.title') }}
+      </h1>
+      <p class="text-ink-500 dark:text-ink-300 max-w-3xl">{{ t('learn.designations.intro') }}</p>
+    </header>
+
+    <!-- ── Normative status ──────────────────────────────────────── -->
+    <section class="mb-12" :aria-label="t('learn.designations.normativeSection')">
+      <h2 class="text-xl font-semibold text-ink-700 dark:text-ink-100 mb-4 border-b border-ink-100 dark:border-ink-700 pb-2">
+        {{ t('learn.designations.normativeSection') }}
+      </h2>
+      <p class="text-sm text-ink-500 dark:text-ink-400 mb-4">
+        {{ t('learn.designations.normativeIntro') }}
+      </p>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <LearnCard
+          :title="t('learn.designations.preferred.label')"
+          iso-reference="ISO 10241-1:2011 §3.4.1.3.1"
+          learn-more-url="https://www.glossarist.org/model/designations"
+        >
+          <p>{{ t('learn.designations.preferred.meaning') }}</p>
+          <p class="mt-3 text-xs italic text-ink-500 dark:text-ink-400">
+            {{ t('learn.designations.preferred.multipleNote') }}
+          </p>
+          <template #example>
+            VIM 1.9: <strong>measurement unit</strong> (preferred) — the primary term.
+          </template>
+        </LearnCard>
+
+        <LearnCard
+          :title="t('learn.designations.admitted.label')"
+          iso-reference="ISO 10241-1:2011 §3.4.1.3.2"
+        >
+          <p>{{ t('learn.designations.admitted.meaning') }}</p>
+          <p class="mt-3 text-xs italic text-ink-500 dark:text-ink-400">
+            {{ t('learn.designations.admitted.multipleNote') }}
+          </p>
+          <template #example>
+            VIM 1.9: <strong>unit of measurement</strong> (admitted) — a synonym for "measurement unit".
+          </template>
+        </LearnCard>
+
+        <LearnCard
+          :title="t('learn.designations.deprecated.label')"
+          iso-reference="ISO 10241-1:2011 §3.4.1.3.3"
+        >
+          <p>{{ t('learn.designations.deprecated.meaning') }}</p>
+          <p class="mt-3 text-xs italic text-ink-500 dark:text-ink-400">
+            {{ t('learn.designations.deprecated.multipleNote') }}
+          </p>
+          <template #example>
+            A term still in use but discouraged, e.g. an outdated spelling or a vendor name
+            used as a generic term.
+          </template>
+        </LearnCard>
+      </div>
+    </section>
+
+    <!-- ── Kinds and forms of term ───────────────────────────────── -->
+    <section class="mb-12" :aria-label="t('learn.designations.kindsSection')">
+      <h2 class="text-xl font-semibold text-ink-700 dark:text-ink-100 mb-4 border-b border-ink-100 dark:border-ink-700 pb-2">
+        {{ t('learn.designations.kindsSection') }}
+      </h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <LearnCard
+          :title="t('learn.designations.fullForm.label')"
+          iso-reference="ISO 10241-1:2011 §3.4.1.2.3"
+        >
+          <p>{{ t('learn.designations.fullForm.meaning') }}</p>
+          <template #example>
+            <strong>compact disc</strong> is the full form of "CD".
+          </template>
+        </LearnCard>
+
+        <LearnCard
+          :title="t('learn.designations.abbreviatedForm.label')"
+          iso-reference="ISO 10241-1:2011 §3.4.1.2.4"
+        >
+          <p>{{ t('learn.designations.abbreviatedForm.meaning') }}</p>
+          <p class="mt-3 text-xs italic text-ink-500 dark:text-ink-400">
+            {{ t('learn.designations.abbreviatedForm.multipleNote') }}
+          </p>
+          <template #example>
+            <strong>CD</strong> is the abbreviated form of "compact disc".
+            World Wide Web has two: <strong>WWW</strong> and <strong>W3</strong>.
+          </template>
+        </LearnCard>
+
+        <LearnCard
+          :title="t('learn.designations.borrowed.label')"
+          iso-reference="ISO 10241-1:2011 §3.4.1.2.1"
+        >
+          <p>{{ t('learn.designations.borrowed.meaning') }}</p>
+          <template #example>
+            English "kindergarten" (borrowed from German).
+          </template>
+        </LearnCard>
+
+        <LearnCard
+          :title="t('learn.designations.variant.label')"
+          iso-reference="ISO 10241-1:2011 §3.4.1.2.2"
+        >
+          <p>{{ t('learn.designations.variant.meaning') }}</p>
+          <template #example>
+            <strong>colour</strong> (UK) ↔ <strong>color</strong> (US);
+            <strong>multi-word term</strong> ↔ <strong>multiword term</strong>.
+          </template>
+        </LearnCard>
+      </div>
+    </section>
+
+    <!-- ── Designation types ─────────────────────────────────────── -->
+    <section :aria-label="t('learn.designations.typesSection')">
+      <h2 class="text-xl font-semibold text-ink-700 dark:text-ink-100 mb-4 border-b border-ink-100 dark:border-ink-700 pb-2">
+        {{ t('learn.designations.typesSection') }}
+      </h2>
+      <p class="text-sm text-ink-500 dark:text-ink-400 mb-4">
+        {{ t('learn.designations.typesIntro') }}
+      </p>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <LearnCard
+          :title="t('learn.designations.term.label')"
+          iso-reference="ISO 704:2022 §7.3"
+        >
+          <p>{{ t('learn.designations.term.meaning') }}</p>
+          <template #example>
+            <strong>system of quantities</strong> (VIM 1.3)
+          </template>
+        </LearnCard>
+
+        <LearnCard
+          :title="t('learn.designations.acronym.label')"
+          iso-reference="ISO 704:2022 §7.3.2"
+        >
+          <p>{{ t('learn.designations.acronym.meaning') }}</p>
+          <template #example>
+            <strong>laser</strong> — light amplification by stimulated emission of radiation.
+            Pronounced as one word.
+          </template>
+        </LearnCard>
+
+        <LearnCard
+          :title="t('learn.designations.initialism.label')"
+          iso-reference="ISO 704:2022 §7.3.2"
+        >
+          <p>{{ t('learn.designations.initialism.meaning') }}</p>
+          <template #example>
+            <strong>OIML</strong> — Organisation Internationale de Métrologie Légale.
+            Each letter pronounced separately.
+          </template>
+        </LearnCard>
+
+        <LearnCard
+          :title="t('learn.designations.symbol.label')"
+          iso-reference="ISO 704:2022 §7.5 + ISO 80000"
+        >
+          <p>{{ t('learn.designations.symbol.meaning') }}</p>
+          <template #example>
+            <strong>kg</strong> for kilogram. <strong>m/s</strong> for metre per second.
+          </template>
+        </LearnCard>
+      </div>
+    </section>
+  </div>
+</template>

package/src/views/learn/LearnIndexView.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/**
+ * LearnIndexView — entry point for the /learn section.
+ *
+ * Cards link to each topic with a one-line description. Phase 1 pages
+ * (relationships, designations, statuses) are linked; Phase 2 pages
+ * are not yet wired.
+ *
+ * Reader-focused: this section explains how to READ this site and the
+ * terminology behind its labels. For authoring datasets in glossarist
+ * format, see glossarist.org.
+ */
+import { useI18n } from '../../i18n';
+import LearnCard from '../../components/learn/LearnCard.vue';
+
+const { t } = useI18n();
+
+interface TopicLink {
+  to: string;
+  title: string;
+  description: string;
+}
+
+const phase1Topics: readonly TopicLink[] = [
+  {
+    to: '/learn/relationships',
+    title: t('learn.relationships.title'),
+    description: t('learn.relationships.short'),
+  },
+  {
+    to: '/learn/designations',
+    title: t('learn.designations.title'),
+    description: t('learn.designations.short'),
+  },
+  {
+    to: '/learn/statuses',
+    title: t('learn.statuses.title'),
+    description: t('learn.statuses.short'),
+  },
+];
+</script>
+
+<template>
+  <div class="learn-index max-w-5xl mx-auto px-4 py-8">
+    <header class="mb-8">
+      <h1 class="text-3xl font-serif text-ink-800 dark:text-ink-50 mb-2">
+        {{ t('nav.learn') }}
+      </h1>
+      <p class="text-ink-500 dark:text-ink-300 max-w-2xl">{{ t('learn.intro') }}</p>
+    </header>
+
+    <nav class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" aria-label="Learn topics">
+      <RouterLink v-for="topic in phase1Topics" :key="topic.to" :to="topic.to"
+                  class="learn-topic-link block no-underline">
+        <LearnCard :title="topic.title">
+          <div class="flex items-center justify-between">
+            <h2 class="text-base font-semibold text-ink-800 dark:text-ink-50">{{ topic.title }}</h2>
+            <span class="text-ink-300 dark:text-ink-500 text-sm">→</span>
+          </div>
+          <p class="text-sm text-ink-600 dark:text-ink-300 mt-1">{{ topic.description }}</p>
+        </LearnCard>
+      </RouterLink>
+    </nav>
+
+    <p class="text-xs text-ink-400 dark:text-ink-500 mt-8">
+      {{ t('learn.glossaristOrgNote') }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.learn-topic-link:hover :deep(.learn-card) {
+  border-color: var(--color-accent, #0d9488);
+}
+</style>