@glossarist/concept-browser 0.7.100 → 0.7.101

package/src/i18n/locales/eng.yml

@@ -13,16 +13,109 @@ nav.sources: Sources
 nav.navigation: Navigation
 nav.datasets: Datasets
 nav.relationTypes: Relation Types
+nav.learn: Learn
 
-# Relation Types teaching page
-relationTypes.intro: What each line shape and label means in this site. Diagrams use the same renderers as the Relation Sphere, so what you see here is what you'll see in the wild.
-relationTypes.hyperedgeSection: Hyperedge relations (one-to-many)
-relationTypes.bilateralSection: Bilateral relations (one-to-one)
-relationTypes.isoStandard: ISO standard
-relationTypes.example: Example
-relationTypes.category: Category
-relationTypes.diagram: Diagram
-relationTypes.notInDataset: Not used in the current dataset
+# Learn section (reader-focused teaching)
+learn.intro: This section explains what you see on this site and what each label means. For canonical methodology docs (authoring datasets, ISO alignment), see glossarist.org.
+learn.glossaristOrgNote: Methodology documentation for dataset authors lives on glossarist.org.
+learn.example: Example
+learn.learnMore: Learn more on glossarist.org
+learn.relationships.title: Relationships
+learn.relationships.short: How to read the bilateral edges, partitive rake, and general pipe-and-thread.
+learn.relationships.intro: Every line and label on the Relation Sphere, the detail page, and the graph view maps to a typed semantic relation. This page explains what each kind means and how to read its visual encoding.
+learn.relationships.bilateralSection: Bilateral relations (one-to-one)
+learn.relationships.bilateralIntro: One-to-one typed relations between two concepts. Drawn as straight colored lines with arrowheads in the sphere.
+learn.relationships.partitiveSection: Partitive hyperedge (one-to-many)
+learn.relationships.partitiveTitle: partitive relation
+learn.relationships.partitiveBody: A whole/part decomposition. The comprehensive concept is the whole; each member is a part. Rendered as a rake — a stem from the comprehensive to a perpendicular spine, with teeth dropping to each partitive member.
+learn.relationships.generalSection: General hyperedge (one-to-many)
+learn.relationships.generalTitle: general relation
+learn.relationships.generalBody: A genus/species decomposition. The comprehensive concept is the genus; each member is a coordinate species differing along a shared dimension. Rendered as a tree branch — a thick parent pipe from the comprehensive to a middle node, with thin threads radiating to each member.
+learn.relationships.criterionTitle: Criterion of subdivision
+learn.relationships.criterionBody: "The dimension along which coordinate concepts differ. Shown once on the parent pipe body. Optional: when no criterion is described, no label is drawn."
+learn.relationships.thickThinTitle: Thick/thin hierarchy
+learn.relationships.thickThinBody: ISO 704 traditionally uses thicker lines to mark different criteria of subdivision (multidimensionality). The pipe-and-thread honors this with a thick parent pipe (3.2px) and thinner child threads (1.0px) — the tree-branch metaphor (trunk vs twigs).
+learn.dimensions.sectionTitle: Partitive dimensions (how to read the rake teeth)
+learn.dimensions.presence.title: Presence
+learn.dimensions.presence.summary: Whether the part must be present (compulsory) or may be absent (optional).
+learn.dimensions.presence.required.label: required
+learn.dimensions.presence.required.meaning: The part must be present. Drawn as a solid line.
+learn.dimensions.presence.optional.label: optional
+learn.dimensions.presence.optional.meaning: The part may be absent. Drawn as a dashed line.
+learn.dimensions.count.title: Count
+learn.dimensions.count.summary: How many instances of the part occur in the whole.
+learn.dimensions.count.exactly_one.label: exactly one
+learn.dimensions.count.exactly_one.meaning: One and only one. Drawn as a single line.
+learn.dimensions.count.at_least_one.label: at least one
+learn.dimensions.count.at_least_one.meaning: One or more. Drawn as a double line, the secondary dashed ("possibly more").
+learn.dimensions.count.multiple.label: multiple
+learn.dimensions.count.multiple.meaning: Two or more. Drawn as a double line, both the same style as the primary.
+learn.dimensions.delimiting.title: Delimiting
+learn.dimensions.delimiting.summary: Whether the part reflects a delimiting characteristic — one that distinguishes the whole from coordinate concepts.
+learn.dimensions.delimiting.false.label: not delimiting
+learn.dimensions.delimiting.false.meaning: An ordinary part. Drawn at normal stroke width (1.5px).
+learn.dimensions.delimiting.true.label: delimiting
+learn.dimensions.delimiting.true.meaning: The part is essential to the whole's identity. Drawn at 3× normal stroke width (4.5px).
+learn.designations.title: Designations
+learn.designations.short: Terms and symbols — preferred, admitted, deprecated, full form, abbreviation, acronym, initialism.
+learn.designations.intro: Concepts are designated by terms, proper names, and symbols. This page explains the vocabulary you'll see on each concept page.
+learn.designations.normativeSection: Normative status
+learn.designations.normativeIntro: Each term carries a normative rating from the standardizing body. There can be MORE THAN ONE of each rating — preferred terms aren't unique.
+learn.designations.preferred.label: preferred term
+learn.designations.preferred.meaning: The primary term for the concept, rated by a standardizing body.
+learn.designations.preferred.multipleNote: There can be more than one preferred term.
+learn.designations.admitted.label: admitted term
+learn.designations.admitted.meaning: A synonym for the preferred term, but not rated as preferred.
+learn.designations.admitted.multipleNote: There can be more than one admitted term.
+learn.designations.deprecated.label: deprecated term
+learn.designations.deprecated.meaning: A synonym for the preferred term, but rated as undesired.
+learn.designations.deprecated.multipleNote: There can be more than one deprecated term.
+learn.designations.kindsSection: Kinds and forms of term
+learn.designations.fullForm.label: full form
+learn.designations.fullForm.meaning: The complete representation of a designation.
+learn.designations.abbreviatedForm.label: abbreviated form
+learn.designations.abbreviatedForm.meaning: A representation resulting from the omission of any part of the full form.
+learn.designations.abbreviatedForm.multipleNote: For some full forms, two or more abbreviated forms may exist.
+learn.designations.borrowed.label: borrowed term
+learn.designations.borrowed.meaning: A term taken from another language or from another domain.
+learn.designations.variant.label: variant
+learn.designations.variant.meaning: One of the alternative forms of a designation (e.g. spelling differences across regions).
+learn.designations.typesSection: Designation types
+learn.designations.typesIntro: Three top-level types — terms, proper names, and symbols. Within terms, abbreviations split further into acronyms vs initialisms based on how they're pronounced.
+learn.designations.term.label: term (expression)
+learn.designations.term.meaning: A spoken or written designation — the most common type.
+learn.designations.acronym.label: acronym
+learn.designations.acronym.meaning: An abbreviated form pronounced as a single word.
+learn.designations.initialism.label: initialism
+learn.designations.initialism.meaning: An abbreviated form pronounced letter by letter.
+learn.designations.symbol.label: symbol
+learn.designations.symbol.meaning: A graphical or mathematical designation governed by ISO 80000 / IEC 60027.
+learn.statuses.title: Statuses
+learn.statuses.short: Entry status (valid/withdrawn/draft), normative status, source status — what each badge means.
+learn.statuses.intro: Status badges appear throughout the site. This page is a quick reference for what each one means.
+learn.statuses.entrySection: Entry status
+learn.statuses.entry.valid.label: valid
+learn.statuses.entry.valid.meaning: The concept entry is currently in force.
+learn.statuses.entry.withdrawn.label: withdrawn
+learn.statuses.entry.withdrawn.meaning: The entry has been removed from active use.
+learn.statuses.entry.draft.label: draft
+learn.statuses.entry.draft.meaning: The entry is under development and not yet finalized.
+learn.statuses.entry.superseded.label: superseded
+learn.statuses.entry.superseded.meaning: The entry has been replaced by a newer one.
+learn.statuses.normativeSection: Normative status
+learn.statuses.normativeTitle: preferred / admitted / deprecated
+learn.statuses.normativeSummary: Per-term rating (preferred, admitted, deprecated). Each rating can apply to more than one term per concept.
+learn.statuses.normativeGoDeeper: See designation types for examples
+learn.statuses.sourceSection: Source status
+learn.statuses.sourceIntro: Each citation carries a status describing how faithfully it reproduces the source.
+learn.statuses.source.identical.label: identical
+learn.statuses.source.identical.meaning: The definition matches the source verbatim.
+learn.statuses.source.modified.label: modified
+learn.statuses.source.modified.meaning: The definition is adapted from the source with editorial changes.
+learn.statuses.source.restyled.label: restyled
+learn.statuses.source.restyled.meaning: The definition preserves the source meaning but rewords it heavily.
+learn.statuses.source.lineage.label: lineage
+learn.statuses.source.lineage.meaning: The source is the historical ancestor of this concept, not a direct citation.
 
 # Home page
 home.search: Search

package/src/i18n/locales/fra.yml

@@ -12,16 +12,109 @@ nav.about: À propos
 nav.navigation: Navigation
 nav.datasets: Jeux de données
 nav.relationTypes: Types de relations
+nav.learn: Apprendre
 
-# Page enseignante « Types de relations »
-relationTypes.intro: Ce que chaque forme de ligne et étiquette signifie sur ce site. Les diagrammes utilisent les mêmes rendus que la Sphère de relations — ce que vous voyez ici correspond à ce que vous verrez en navigation.
-relationTypes.hyperedgeSection: Relations hyper-arêtes (un-plusieurs)
-relationTypes.bilateralSection: Relations bilatérales (un-un)
-relationTypes.isoStandard: Norme ISO
-relationTypes.example: Exemple
-relationTypes.category: Catégorie
-relationTypes.diagram: Diagramme
-relationTypes.notInDataset: Non utilisé dans le jeu de données courant
+# 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

package/src/router/index.ts

@@ -96,8 +96,27 @@ export const routes: RouteRecordRaw[] = [
   },
   {
     path: '/relation-types',
-    name: 'relation-types',
-    component: () => import('../views/RelationTypesView.vue'),
+    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',

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>