@glossarist/concept-browser 0.7.100 → 0.7.101

package/src/views/learn/LearnRelationshipsView.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+/**
+ * LearnRelationshipsView — expanded from the former /relation-types.
+ *
+ * Three sections:
+ *   1. Bilateral relations (one-to-one) — grouped by category.
+ *   2. Partitive hyperedge — card + per-dimension breakdown (presence,
+ *      count, delimiting) anchored in ISO 704:2022 §5.5.4.3.1.
+ *   3. General hyperedge — card + criterion + thick/thin hierarchy
+ *      anchored in ISO 704:2022 §5.5.4.2 + §5.6.3.
+ *
+ * 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 LearnCard from '../../components/learn/LearnCard.vue';
+import DimensionCard, { type DimensionValue } from '../../components/learn/DimensionCard.vue';
+import HyperedgeDiagram from '../../components/HyperedgeDiagram.vue';
+import {
+  NORMAL_STROKE_WIDTH,
+  DELIMITING_STROKE_WIDTH,
+} from '../../utils/partitive-multiplicity';
+
+const { t } = useI18n();
+
+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),
+    })),
+  })),
+);
+
+/* Per-dimension values for the partitive hyperedge (ISO 704:2022 §5.5.4.3.1). */
+const presenceValues: readonly DimensionValue[] = [
+  {
+    value: 'required',
+    label: t('learn.dimensions.presence.required.label'),
+    meaning: t('learn.dimensions.presence.required.meaning'),
+  },
+  {
+    value: 'optional',
+    label: t('learn.dimensions.presence.optional.label'),
+    meaning: t('learn.dimensions.presence.optional.meaning'),
+  },
+];
+
+const countValues: readonly DimensionValue[] = [
+  {
+    value: 'exactly_one',
+    label: t('learn.dimensions.count.exactly_one.label'),
+    meaning: t('learn.dimensions.count.exactly_one.meaning'),
+  },
+  {
+    value: 'at_least_one',
+    label: t('learn.dimensions.count.at_least_one.label'),
+    meaning: t('learn.dimensions.count.at_least_one.meaning'),
+  },
+  {
+    value: 'multiple',
+    label: t('learn.dimensions.count.multiple.label'),
+    meaning: t('learn.dimensions.count.multiple.meaning'),
+  },
+];
+
+const delimitingValues: readonly DimensionValue[] = [
+  {
+    value: 'false',
+    label: t('learn.dimensions.delimiting.false.label'),
+    meaning: t('learn.dimensions.delimiting.false.meaning'),
+  },
+  {
+    value: 'true',
+    label: t('learn.dimensions.delimiting.true.label'),
+    meaning: t('learn.dimensions.delimiting.true.meaning'),
+  },
+];
+</script>
+
+<template>
+  <div class="learn-relationships 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.relationships.title') }}
+      </h1>
+      <p class="text-ink-500 dark:text-ink-300 max-w-3xl">{{ t('learn.relationships.intro') }}</p>
+    </header>
+
+    <!-- ── Bilateral relations ────────────────────────────────────── -->
+    <section class="mb-12" :aria-label="t('learn.relationships.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('learn.relationships.bilateralSection') }}
+      </h2>
+      <p class="text-sm text-ink-500 dark:text-ink-400 mb-4">
+        {{ t('learn.relationships.bilateralIntro') }}
+      </p>
+      <div class="space-y-4">
+        <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>
+
+    <!-- ── Partitive hyperedge ────────────────────────────────────── -->
+    <section class="mb-12" :aria-label="t('learn.relationships.partitiveSection')">
+      <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.relationships.partitiveSection') }}
+      </h2>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <LearnCard
+          id="__partitive__"
+          :title="t('learn.relationships.partitiveTitle')"
+          iso-reference="ISO 704:2022 §5.5.4.3"
+          learn-more-url="https://www.glossarist.org/model/partitive-relations"
+        >
+          <template #diagram>
+            <HyperedgeDiagram kind="partitive" />
+          </template>
+          {{ t('learn.relationships.partitiveBody') }}
+          <template #example>
+            {{ t('learn.example') }}: VIM 1.3 system of quantities
+            — quantity equation (required, at_least_one), base quantity (required, multiple),
+            derived quantity (required, at_least_one).
+          </template>
+        </LearnCard>
+      </div>
+
+      <h3 class="text-base font-semibold text-ink-700 dark:text-ink-100 mb-3">
+        {{ t('learn.dimensions.sectionTitle') }}
+      </h3>
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <DimensionCard
+          id="partitive-presence"
+          :name="t('learn.dimensions.presence.title')"
+          iso-reference="ISO 704:2022 §5.5.4.3.1"
+          :summary="t('learn.dimensions.presence.summary')"
+          :values="presenceValues"
+        >
+          <template #visual="{ value }">
+            <svg width="44" height="14" aria-hidden="true">
+              <line x1="2" y1="7" x2="42" y2="7" stroke="currentColor" stroke-width="1.5"
+                    :stroke-dasharray="value === 'optional' ? '4 3' : undefined" />
+            </svg>
+          </template>
+        </DimensionCard>
+
+        <DimensionCard
+          id="partitive-count"
+          :name="t('learn.dimensions.count.title')"
+          iso-reference="ISO 704:2022 §5.5.4.3.1"
+          :summary="t('learn.dimensions.count.summary')"
+          :values="countValues"
+        >
+          <template #visual="{ value }">
+            <svg width="44" height="14" aria-hidden="true">
+              <line x1="2" y1="5" x2="42" y2="5" stroke="currentColor" stroke-width="1.5" />
+              <line v-if="value !== 'exactly_one'" x1="2" y1="9" x2="42" y2="9" stroke="currentColor"
+                    stroke-width="1.5" :stroke-dasharray="value === 'at_least_one' ? '4 3' : undefined" />
+            </svg>
+          </template>
+        </DimensionCard>
+
+        <DimensionCard
+          id="partitive-delimiting"
+          :name="t('learn.dimensions.delimiting.title')"
+          iso-reference="ISO 704:2022 §5.5.4.3.1"
+          :summary="t('learn.dimensions.delimiting.summary')"
+          :values="delimitingValues"
+        >
+          <template #visual="{ value }">
+            <svg width="44" height="14" aria-hidden="true">
+              <line x1="2" y1="7" x2="42" y2="7" stroke="currentColor"
+                    :stroke-width="value === 'true' ? DELIMITING_STROKE_WIDTH : NORMAL_STROKE_WIDTH" />
+            </svg>
+          </template>
+        </DimensionCard>
+      </div>
+    </section>
+
+    <!-- ── General hyperedge ──────────────────────────────────────── -->
+    <section :aria-label="t('learn.relationships.generalSection')">
+      <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.relationships.generalSection') }}
+      </h2>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <LearnCard
+          id="__generic__"
+          :title="t('learn.relationships.generalTitle')"
+          iso-reference="ISO 704:2022 §5.5.4.2"
+          learn-more-url="https://www.glossarist.org/model/generic-relations"
+        >
+          <template #diagram>
+            <HyperedgeDiagram kind="generic" />
+          </template>
+          {{ t('learn.relationships.generalBody') }}
+          <template #example>
+            {{ t('learn.example') }}: VIM 1.9 measurement unit
+            — group criterion "by magnitude relationship" splits into
+            multiple (1.17), submultiple (1.18), coherent derived (1.12).
+          </template>
+        </LearnCard>
+
+        <div class="space-y-4">
+          <LearnCard
+            :title="t('learn.relationships.criterionTitle')"
+            iso-reference="ISO 704:2022 §5.5.4.2 + §5.6.3"
+          >
+            {{ t('learn.relationships.criterionBody') }}
+          </LearnCard>
+
+          <LearnCard
+            :title="t('learn.relationships.thickThinTitle')"
+            iso-reference="ISO 704:2022 §5.6.3"
+          >
+            {{ t('learn.relationships.thickThinBody') }}
+          </LearnCard>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.bilateral-row {
+  scroll-margin-top: 5rem;
+}
+</style>

package/src/views/learn/LearnStatusesView.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+/**
+ * LearnStatusesView — quick reference for the status badges used
+ * across the site.
+ *
+ * Three categories:
+ *   1. Entry status (glossarist lifecycle: valid, withdrawn, draft)
+ *   2. Normative status (preferred/admitted/deprecated — cross-links
+ *      /learn/designations, no duplication)
+ *   3. Source status (identical, modified, restyled — provenance)
+ */
+import { useI18n } from '../../i18n';
+import LearnCard from '../../components/learn/LearnCard.vue';
+
+const { t } = useI18n();
+
+interface StatusRow {
+  value: string;
+  label: string;
+  meaning: string;
+}
+
+const entryStatuses: readonly StatusRow[] = [
+  { value: 'valid', label: t('learn.statuses.entry.valid.label'), meaning: t('learn.statuses.entry.valid.meaning') },
+  { value: 'withdrawn', label: t('learn.statuses.entry.withdrawn.label'), meaning: t('learn.statuses.entry.withdrawn.meaning') },
+  { value: 'draft', label: t('learn.statuses.entry.draft.label'), meaning: t('learn.statuses.entry.draft.meaning') },
+  { value: 'superseded', label: t('learn.statuses.entry.superseded.label'), meaning: t('learn.statuses.entry.superseded.meaning') },
+];
+
+const sourceStatuses: readonly StatusRow[] = [
+  { value: 'identical', label: t('learn.statuses.source.identical.label'), meaning: t('learn.statuses.source.identical.meaning') },
+  { value: 'modified', label: t('learn.statuses.source.modified.label'), meaning: t('learn.statuses.source.modified.meaning') },
+  { value: 'restyled', label: t('learn.statuses.source.restyled.label'), meaning: t('learn.statuses.source.restyled.meaning') },
+  { value: 'lineage', label: t('learn.statuses.source.lineage.label'), meaning: t('learn.statuses.source.lineage.meaning') },
+];
+</script>
+
+<template>
+  <div class="learn-statuses 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.statuses.title') }}
+      </h1>
+      <p class="text-ink-500 dark:text-ink-300 max-w-3xl">{{ t('learn.statuses.intro') }}</p>
+    </header>
+
+    <!-- ── Entry status ──────────────────────────────────────────── -->
+    <section class="mb-12" :aria-label="t('learn.statuses.entrySection')">
+      <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.statuses.entrySection') }}
+      </h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <LearnCard
+          v-for="s in entryStatuses"
+          :key="s.value"
+          :id="`entry-${s.value}`"
+          :title="s.label"
+        >
+          <p>{{ s.meaning }}</p>
+          <template #example>
+            <span class="inline-block text-xs font-semibold px-2 py-0.5 rounded uppercase tracking-wide"
+                  :class="{
+                    'bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300': s.value === 'valid',
+                    'bg-red-50 text-red-700 dark:bg-red-900/40 dark:text-red-300': s.value === 'withdrawn',
+                    'bg-amber-50 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300': s.value === 'draft',
+                    'bg-gray-50 text-gray-700 dark:bg-gray-700/40 dark:text-gray-300': s.value === 'superseded',
+                  }">
+              {{ s.label }}
+            </span>
+          </template>
+        </LearnCard>
+      </div>
+    </section>
+
+    <!-- ── Normative status (cross-link) ─────────────────────────── -->
+    <section class="mb-12" :aria-label="t('learn.statuses.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.statuses.normativeSection') }}
+      </h2>
+      <LearnCard
+        :title="t('learn.statuses.normativeTitle')"
+        iso-reference="ISO 10241-1:2011 §3.4.1.3"
+      >
+        <p>{{ t('learn.statuses.normativeSummary') }}</p>
+        <p class="mt-3">
+          <RouterLink to="/learn/designations" class="text-ink-500 dark:text-ink-400 underline">
+            {{ t('learn.statuses.normativeGoDeeper') }} →
+          </RouterLink>
+        </p>
+      </LearnCard>
+    </section>
+
+    <!-- ── Source status ─────────────────────────────────────────── -->
+    <section :aria-label="t('learn.statuses.sourceSection')">
+      <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.statuses.sourceSection') }}
+      </h2>
+      <p class="text-sm text-ink-500 dark:text-ink-400 mb-4">
+        {{ t('learn.statuses.sourceIntro') }}
+      </p>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <LearnCard
+          v-for="s in sourceStatuses"
+          :key="s.value"
+          :id="`source-${s.value}`"
+          :title="s.label"
+          learn-more-url="https://www.glossarist.org/model/sources"
+        >
+          <p>{{ s.meaning }}</p>
+        </LearnCard>
+      </div>
+    </section>
+  </div>
+</template>

package/src/__tests__/views/relation-types-view.test.ts

@@ -1,85 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { createPinia, setActivePinia } from 'pinia';
-import { createRouter, createMemoryHistory } from 'vue-router';
-import RelationTypesView from '../../views/RelationTypesView.vue';
-
-/**
- * Smoke + structure tests for the Relation Types teaching page.
- *
- * Hyperedge section: 2 cards (partitive + general) with anchors.
- * Bilateral section: at least one category with type rows.
- */
-async function makeRouter() {
-  const router = createRouter({
-    history: createMemoryHistory(),
-    routes: [
-      { path: '/', name: 'home', component: { template: '<div/>' } },
-      { path: '/relation-types', name: 'relation-types', component: RelationTypesView },
-    ],
-  });
-  await router.push('/relation-types');
-  await router.isReady();
-  return router;
-}
-
-describe('RelationTypesView', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  it('renders the page header with translated title', async () => {
-    const router = await makeRouter();
-    const w = mount(RelationTypesView, { global: { plugins: [router] } });
-    expect(w.find('h1').text()).toContain('Relation Types');
-  });
-
-  it('renders both hyperedge cards with the expected anchors', async () => {
-    const router = await makeRouter();
-    const w = mount(RelationTypesView, { global: { plugins: [router] } });
-    const cards = w.findAll('.hyperedge-card');
-    expect(cards.length).toBe(2);
-    const ids = cards.map(c => c.attributes('id'));
-    expect(ids).toContain('__partitive__');
-    expect(ids).toContain('__generic__');
-  });
-
-  it('renders a HyperedgeDiagram child for each card', async () => {
-    const router = await makeRouter();
-    const w = mount(RelationTypesView, { global: { plugins: [router] } });
-    /* The HyperedgeDiagram component renders an <svg class="hyperedge-diagram"> */
-    expect(w.findAll('svg.hyperedge-diagram').length).toBe(2);
-  });
-
-  it('renders the bilateral section grouped by category', async () => {
-    const router = await makeRouter();
-    const w = mount(RelationTypesView, { global: { plugins: [router] } });
-    const bilateralArticles = w.findAll('section[aria-label="Bilateral relations (one-to-one)"] article');
-    /* The taxonomy has ≥5 categories (hierarchical, associative, lifecycle, …). */
-    expect(bilateralArticles.length).toBeGreaterThanOrEqual(5);
-  });
-
-  it('every bilateral type row has an id anchor matching the type key', async () => {
-    const router = await makeRouter();
-    const w = mount(RelationTypesView, { global: { plugins: [router] } });
-    const rows = w.findAll('.bilateral-row');
-    expect(rows.length).toBeGreaterThan(10); /* taxonomy has ~40 types */
-    for (const row of rows) {
-      const id = row.attributes('id');
-      expect(id).toBeTruthy();
-      expect(id).toMatch(/^[a-z_]+$/);
-    }
-  });
-
-  it('renders label + ISO standard + definition for each hyperedge card', async () => {
-    const router = await makeRouter();
-    const w = mount(RelationTypesView, { global: { plugins: [router] } });
-    const cards = w.findAll('.hyperedge-card');
-    for (const card of cards) {
-      /* Label is the h3 heading; ISO reference is a mono span; definition is a paragraph. */
-      expect(card.find('h3').text()).toBeTruthy();
-      expect(card.find('span.font-mono').text()).toMatch(/ISO 704/);
-      expect(card.find('p').text().length).toBeGreaterThan(20);
-    }
-  });
-});