@glossarist/concept-browser 0.7.80 → 0.7.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.7.80",
+  "version": "0.7.82",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {

package/src/__tests__/components/PartitiveRelationDiagram.test.ts

@@ -0,0 +1,169 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import PartitiveRelationDiagram, {
+  type PartitiveMemberLabeled,
+} from '../../components/PartitiveRelationDiagram.vue';
+
+const members = (n: number, certainty: 'confirmed' | 'possible' = 'confirmed'): PartitiveMemberLabeled[] =>
+  Array.from({ length: n }, (_, i) => ({
+    uri: `https://example.org/test/concept/1.${i + 1}`,
+    label: `1.${i + 1}`,
+    certainty,
+  }));
+
+function svgLinesOf(wrapper: ReturnType<typeof mount>) {
+  return wrapper.findAll('line');
+}
+
+describe('PartitiveRelationDiagram — ISO 704 rake rendering', () => {
+  it('renders comprehensive + N partitive nodes as text', () => {
+    const w = mount(PartitiveRelationDiagram, {
+      props: {
+        comprehensiveLabel: '1.3',
+        partitives: members(3),
+        completeness: 'complete',
+        plurality: null,
+      },
+    });
+    const texts = w.findAll('text').map(t => t.text());
+    expect(texts).toContain('1.3');
+    expect(texts).toContain('1.1');
+    expect(texts).toContain('1.2');
+    expect(texts).toContain('1.3');
+  });
+
+  it('renders criterion under the comprehensive', () => {
+    const w = mount(PartitiveRelationDiagram, {
+      props: {
+        comprehensiveLabel: '1.3',
+        partitives: members(2),
+        completeness: 'complete',
+        plurality: null,
+        criterion: 'physical structure',
+      },
+    });
+    expect(w.findAll('text').map(t => t.text())).toContain('physical structure');
+  });
+
+  describe('line variant by plurality', () => {
+    it('single solid line when no plurality (3 lines: stem + spine + 2 drops = 4 actually)', () => {
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: '1.3',
+          partitives: members(2),
+          completeness: 'complete',
+          plurality: null,
+        },
+      });
+      // stem (1) + spine (1) + drops (2) = 4 single lines
+      expect(svgLinesOf(w)).toHaveLength(4);
+      // none should be dashed
+      const dashed = svgLinesOf(w).filter(l => l.attributes('stroke-dasharray'));
+      expect(dashed).toHaveLength(0);
+    });
+
+    it('close-set double solid lines when isShared && !isUncertain', () => {
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: '1.3',
+          partitives: members(2),
+          completeness: 'complete',
+          plurality: { isShared: true, isUncertain: false },
+        },
+      });
+      // stem doubles (2) + spine doubles (2) + drops (2, single) = 6 lines
+      expect(svgLinesOf(w)).toHaveLength(6);
+      const dashed = svgLinesOf(w).filter(l => l.attributes('stroke-dasharray'));
+      expect(dashed).toHaveLength(0);
+    });
+
+    it('one solid + one dashed when isShared && isUncertain', () => {
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: '1.3',
+          partitives: members(2),
+          completeness: 'complete',
+          plurality: { isShared: true, isUncertain: true },
+        },
+      });
+      // stem (2: 1 solid + 1 dashed) + spine (2: 1 solid + 1 dashed) + drops (2, single solid) = 6
+      const lines = svgLinesOf(w);
+      expect(lines).toHaveLength(6);
+      const dashed = lines.filter(l => l.attributes('stroke-dasharray'));
+      // exactly 2 dashed lines (the second stem + the second spine)
+      expect(dashed).toHaveLength(2);
+    });
+  });
+
+  describe('completeness: partial extends spine', () => {
+    it('extends spine past last tooth when completeness=partial', () => {
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: '1.3',
+          partitives: members(2),
+          completeness: 'partial',
+          plurality: null,
+        },
+      });
+      const lines = svgLinesOf(w);
+      // stem + spine + 2 drops = 4 lines (same count, but spine is longer)
+      expect(lines).toHaveLength(4);
+      // The spine line's x2 should be > the last partitive's x
+      const lastMember = w.props('partitives')[1];
+      // visual assertion: the spine line's x2 is greater than the second
+      // partitive's slot x. We can't compute slot exactly without internals,
+      // but we know PARTIAL_TAIL (32) is added.
+      const spineLine = lines.find(l => {
+        const y1 = l.attributes('y1');
+        const y2 = l.attributes('y2');
+        return y1 && y2 && y1 === y2; // horizontal
+      });
+      expect(spineLine).toBeDefined();
+      const x2 = Number(spineLine!.attributes('x2'));
+      // last member x ≈ PADDING_X + NODE_W * 1.5 + GAP_X = 24 + 180 + 16 = 220
+      // spine end with PARTIAL_TAIL = 220 + 32 = 252
+      expect(x2).toBeGreaterThan(220);
+      void lastMember;
+    });
+  });
+
+  describe('per-member certainty', () => {
+    it('renders possible members with dashed border', () => {
+      const possibleMembers: PartitiveMemberLabeled[] = [
+        { uri: 'u1', label: '1', certainty: 'confirmed' },
+        { uri: 'u2', label: '2', certainty: 'possible' },
+      ];
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: '0',
+          partitives: possibleMembers,
+          completeness: 'complete',
+          plurality: null,
+        },
+      });
+      // Find the rect for the 'possible' member (the 2nd node)
+      const rects = w.findAll('rect');
+      // 1 comp + 2 partitive = 3 rects
+      expect(rects).toHaveLength(3);
+      // The possible member's rect should have a dashed border
+      const possibleRect = rects[2];
+      expect(possibleRect.attributes('stroke-dasharray')).toBeTruthy();
+    });
+
+    it('emits navigate when a partitive is clicked', async () => {
+      const w = mount(PartitiveRelationDiagram, {
+        props: {
+          comprehensiveLabel: '0',
+          partitives: members(2),
+          completeness: 'complete',
+          plurality: null,
+        },
+      });
+      // Click any of the partitive <g> elements
+      const groups = w.findAll('g.cursor-pointer');
+      expect(groups.length).toBeGreaterThan(0);
+      await groups[0].trigger('click');
+      expect(w.emitted('navigate')).toBeTruthy();
+    });
+  });
+});

package/src/__tests__/model-bridge-partitive.test.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect } from 'vitest';
+import { conceptFromJson } from '../adapters/model-bridge';
+
+describe('conceptFromJson — gl:partitiveRelations (v2)', () => {
+  function makeJson(overrides: Record<string, unknown> = {}) {
+    return {
+      '@type': 'gl:Concept',
+      '@id': 'https://example.org/test/concept/1.3',
+      'gl:identifier': '1.3',
+      'gl:localizedConcept': {},
+      ...overrides,
+    };
+  }
+
+  it('returns empty array when no partitiveRelations', () => {
+    const c = conceptFromJson(makeJson());
+    expect(c.partitiveRelations).toEqual([]);
+  });
+
+  it('parses comprehensive + 2 partitives', () => {
+    const c = conceptFromJson(makeJson({
+      'gl:partitiveRelations': [{
+        'gl:comprehensive': { 'gl:source': 'urn:test', 'gl:id': '1.3' },
+        'gl:hasPartitive': [
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.4' } },
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.5' } },
+        ],
+      }],
+    }));
+    expect(c.partitiveRelations).toHaveLength(1);
+    const r = c.partitiveRelations[0];
+    expect(r.comprehensive.source).toBe('urn:test');
+    expect(r.comprehensive.id).toBe('1.3');
+    expect(r.partitives).toHaveLength(2);
+    expect(r.partitives[0].ref.id).toBe('1.4');
+    expect(r.partitives[1].ref.id).toBe('1.5');
+  });
+
+  it('parses completeness', () => {
+    const c = conceptFromJson(makeJson({
+      'gl:partitiveRelations': [{
+        'gl:comprehensive': { 'gl:source': 'urn:test', 'gl:id': '1.3' },
+        'gl:hasPartitive': [
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.4' } },
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.5' } },
+        ],
+        'gl:completeness': 'partial',
+      }],
+    }));
+    expect(c.partitiveRelations[0].completeness).toBe('partial');
+    expect(c.partitiveRelations[0].isPartial).toBe(true);
+  });
+
+  it('parses per-member certainty', () => {
+    const c = conceptFromJson(makeJson({
+      'gl:partitiveRelations': [{
+        'gl:comprehensive': { 'gl:source': 'urn:test', 'gl:id': '1.3' },
+        'gl:hasPartitive': [
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.4' } },
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.5' }, 'gl:certainty': 'possible' },
+        ],
+      }],
+    }));
+    const members = c.partitiveRelations[0].partitives;
+    expect(members[0].certainty).toBe('confirmed');
+    expect(members[1].certainty).toBe('possible');
+    expect(members[1].isPossible).toBe(true);
+  });
+
+  it('parses plurality block', () => {
+    const c = conceptFromJson(makeJson({
+      'gl:partitiveRelations': [{
+        'gl:comprehensive': { 'gl:source': 'urn:test', 'gl:id': '1.3' },
+        'gl:hasPartitive': [
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.4' } },
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.5' } },
+        ],
+        'gl:hasPlurality': {
+          'gl:isShared': true,
+          'gl:isUncertain': true,
+          'gl:sharedType': { 'gl:source': 'urn:test', 'gl:id': '1.99' },
+        },
+      }],
+    }));
+    const p = c.partitiveRelations[0].plurality;
+    expect(p).not.toBeNull();
+    expect(p?.isShared).toBe(true);
+    expect(p?.isUncertain).toBe(true);
+    expect(p?.sharedType?.id).toBe('1.99');
+  });
+
+  it('parses criterion as localized hash', () => {
+    const c = conceptFromJson(makeJson({
+      'gl:partitiveRelations': [{
+        'gl:comprehensive': { 'gl:source': 'urn:test', 'gl:id': '1.3' },
+        'gl:hasPartitive': [
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.4' } },
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.5' } },
+        ],
+        'gl:criterion': { eng: 'physical structure', fra: 'structure physique' },
+      }],
+    }));
+    expect(c.partitiveRelations[0].criterion?.eng).toBe('physical structure');
+    expect(c.partitiveRelations[0].criterion?.fra).toBe('structure physique');
+  });
+
+  it('parses criterion as plain string (normalized to default)', () => {
+    const c = conceptFromJson(makeJson({
+      'gl:partitiveRelations': [{
+        'gl:comprehensive': { 'gl:source': 'urn:test', 'gl:id': '1.3' },
+        'gl:hasPartitive': [
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.4' } },
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.5' } },
+        ],
+        'gl:criterion': 'a bare criterion string',
+      }],
+    }));
+    expect(c.partitiveRelations[0].criterion?.default).toBe('a bare criterion string');
+  });
+
+  it('skips relation with no comprehensive', () => {
+    const c = conceptFromJson(makeJson({
+      'gl:partitiveRelations': [{
+        'gl:hasPartitive': [
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.4' } },
+        ],
+      }],
+    }));
+    expect(c.partitiveRelations).toEqual([]);
+  });
+
+  it('skips relation with < 2 valid partitives', () => {
+    const c = conceptFromJson(makeJson({
+      'gl:partitiveRelations': [{
+        'gl:comprehensive': { 'gl:source': 'urn:test', 'gl:id': '1.3' },
+        'gl:hasPartitive': [
+          { 'gl:ref': { 'gl:source': 'urn:test', 'gl:id': '1.4' } },
+          // Single member — PartitiveRelation constructor throws
+        ],
+      }],
+    }));
+    // The constructor throws before we catch it, so the relation is dropped
+    // via the runtime error path. conceptFromJson should not propagate.
+    expect(c.partitiveRelations).toEqual([]);
+  });
+});

package/src/adapters/model-bridge.ts

@@ -164,6 +164,25 @@ interface JsonLdLocalizedConcept {
   'gl:reviewDecisionNotes'?: string;
 }
 
+interface JsonLdPartitiveMember {
+  'gl:ref'?: JsonLdRef;
+  'gl:certainty'?: string;
+}
+
+interface JsonLdTypeSharedPlurality {
+  'gl:isShared'?: boolean;
+  'gl:isUncertain'?: boolean;
+  'gl:sharedType'?: JsonLdRef;
+}
+
+interface JsonLdPartitiveRelation {
+  'gl:comprehensive'?: JsonLdRef;
+  'gl:hasPartitive'?: JsonLdPartitiveMember[];
+  'gl:completeness'?: string;
+  'gl:hasPlurality'?: JsonLdTypeSharedPlurality;
+  'gl:criterion'?: Record<string, string> | string;
+}
+
 interface JsonLdConcept {
   '@type'?: string;
   '@id'?: string;
@@ -171,6 +190,7 @@ interface JsonLdConcept {
   'gl:term'?: string;
   'gl:localizedConcept'?: Record<string, JsonLdLocalizedConcept>;
   'gl:related'?: JsonLdRelated[];
+  'gl:partitiveRelations'?: JsonLdPartitiveRelation[];
   'gl:tags'?: string[];
   'gl:figureRef'?: unknown[];
   'gl:tableRef'?: unknown[];
@@ -563,6 +583,51 @@ function mapLocalizedFromJsonLd(lc: JsonLdLocalizedConcept): Record<string, unkn
   return data;
 }
 
+function mapPartitiveRelationFromJsonLd(r: JsonLdPartitiveRelation): Record<string, unknown> | null {
+  const comprehensive = r['gl:comprehensive'] ? mapRefFromJsonLd(r['gl:comprehensive']) : null;
+  if (!comprehensive) return null;
+
+  const partitives = (r['gl:hasPartitive'] ?? [])
+    .map((m): Record<string, unknown> | null => {
+      const ref = m['gl:ref'] ? mapRefFromJsonLd(m['gl:ref']) : null;
+      if (!ref) return null;
+      const out: Record<string, unknown> = { ref };
+      if (m['gl:certainty']) out.certainty = m['gl:certainty'];
+      return out;
+    })
+    .filter((m): m is Record<string, unknown> => m !== null);
+
+  // ISO 704 requires ≥2 partitives. Skip malformed relations rather
+  // than letting the constructor throw and break the whole concept.
+  if (partitives.length < 2) return null;
+
+  const out: Record<string, unknown> = {
+    comprehensive,
+    partitives,
+  };
+
+  if (r['gl:completeness']) out.completeness = r['gl:completeness'];
+
+  const plurality = r['gl:hasPlurality'];
+  if (plurality && typeof plurality['gl:isShared'] === 'boolean') {
+    const p: Record<string, unknown> = { isShared: plurality['gl:isShared'] };
+    if (typeof plurality['gl:isUncertain'] === 'boolean') {
+      p.isUncertain = plurality['gl:isUncertain'];
+    }
+    const sharedType = plurality['gl:sharedType'] ? mapRefFromJsonLd(plurality['gl:sharedType']) : null;
+    if (sharedType) p.sharedType = sharedType;
+    out.plurality = p;
+  }
+
+  if (r['gl:criterion']) {
+    out.criterion = typeof r['gl:criterion'] === 'string'
+      ? { default: r['gl:criterion'] }
+      : r['gl:criterion'];
+  }
+
+  return out;
+}
+
 function conceptFromJsonLd(doc: JsonLdConcept): Concept {
   const id = String(doc['gl:identifier'] ?? doc['@id']?.split('/').pop() ?? '');
   const localizations: Record<string, unknown> = {};
@@ -575,6 +640,9 @@ function conceptFromJsonLd(doc: JsonLdConcept): Concept {
   }
 
   const related = (doc['gl:related'] ?? []).map(mapRelatedFromJsonLd);
+  const partitiveRelations = (doc['gl:partitiveRelations'] ?? [])
+    .map(mapPartitiveRelationFromJsonLd)
+    .filter((r): r is Record<string, unknown> => r !== null);
   const tags = Array.isArray(doc['gl:tags']) ? [...doc['gl:tags']] : [];
 
   const concept = Concept.fromJSON({
@@ -583,6 +651,7 @@ function conceptFromJsonLd(doc: JsonLdConcept): Concept {
     uri: doc['@id'] ?? null,
     localizations,
     related,
+    partitive_relations: partitiveRelations,
     tags,
     figures: normalizeEntityRefs(doc['gl:figureRef']),
     tables: normalizeEntityRefs(doc['gl:tableRef']),

package/src/components/PartitiveRelationDiagram.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+/**
+ * PartitiveRelationDiagram — renders a single PartitiveRelation as an
+ * ISO 704 rake/bracket diagram in SVG.
+ *
+ * Layout (looking top-down):
+ *
+ *            [comprehensive]
+ *                   │
+ *                   │   ← vertical stem
+ *   ┌───────────────┴───────────────┐   ← horizontal spine
+ *   │               │               │
+ *   │               │               │   ← perpendicular drops
+ * [part1]        [part2]        [part3]
+ *
+ * Line conventions per ISO 704:
+ *   - default                              : single solid line
+ *   - plurality.isShared && !isUncertain   : close-set DOUBLE solid lines
+ *                                            on stem + spine (drops stay single)
+ *   - plurality.isShared && isUncertain    : one solid + one DASHED line
+ *   - completeness === 'partial'           : spine extends past the last
+ *                                            tooth (continued backline —
+ *                                            "more exist but aren't shown")
+ *
+ * The diagram is pure SVG — no JS layout engine. Coordinates are
+ * computed from the partitive count.
+ */
+import { computed } from 'vue';
+import type { TypeSharedPluralityWire } from '../adapters/types';
+
+export interface PartitiveMemberLabeled {
+  uri: string;
+  label: string;
+  certainty: 'confirmed' | 'possible';
+}
+
+const props = withDefaults(defineProps<{
+  comprehensiveLabel: string;
+  partitives: PartitiveMemberLabeled[];
+  completeness: 'complete' | 'partial';
+  plurality: TypeSharedPluralityWire | null;
+  criterion?: string | null;
+}>(), {
+  criterion: null,
+});
+
+const emit = defineEmits<{
+  (e: 'navigate', uri: string): void;
+}>();
+
+// Layout constants — chosen for readability at 100% zoom.
+const NODE_W = 120;
+const NODE_H = 32;
+const STEM_LEN = 28;
+const SPINE_TO_NODE = 32;
+const GAP_X = 16;
+const PADDING_X = 24;
+const PADDING_Y = 16;
+const DOUBLE_GAP = 3;       // gap between the two lines of a close-set double
+const PARTIAL_TAIL = 32;    // how far the spine extends past the last tooth for partial
+const DASH_PATTERN = '4 3';
+
+type LineVariant = 'single' | 'double-solid' | 'solid-plus-dashed';
+
+const lineVariant = computed<LineVariant>(() => {
+  if (!props.plurality?.isShared) return 'single';
+  return props.plurality.isUncertain ? 'solid-plus-dashed' : 'double-solid';
+});
+
+const layout = computed(() => {
+  const n = props.partitives.length;
+  const totalWidth = PADDING_X * 2 + n * NODE_W + (n - 1) * GAP_X;
+  const totalHeight = PADDING_Y * 2 + NODE_H + STEM_LEN + SPINE_TO_NODE + NODE_H;
+
+  const centerX = totalWidth / 2;
+  const compY = PADDING_Y + NODE_H / 2;
+  const spineY = compY + NODE_H / 2 + STEM_LEN;
+  const partY = spineY + SPINE_TO_NODE;
+
+  const partitiveSlots = props.partitives.map((member, i) => {
+    const x = PADDING_X + NODE_W / 2 + i * (NODE_W + GAP_X);
+    return { member, x };
+  });
+
+  const leftX = partitiveSlots[0]?.x ?? centerX;
+  const lastX = partitiveSlots[n - 1]?.x ?? centerX;
+  const spineEndX = props.completeness === 'partial'
+    ? lastX + PARTIAL_TAIL
+    : lastX;
+
+  return {
+    totalWidth,
+    totalHeight,
+    centerX,
+    compY,
+    spineY,
+    partY,
+    partitiveSlots,
+    leftX,
+    spineEndX,
+  };
+});
+
+function strokeAttr(variant: LineVariant, opacity = 1) {
+  if (variant === 'solid-plus-dashed') {
+    return { stroke: 'currentColor', 'stroke-width': 1.4, 'stroke-dasharray': DASH_PATTERN, opacity };
+  }
+  return { stroke: 'currentColor', 'stroke-width': 1.4, opacity };
+}
+
+function emitNav(uri: string) {
+  emit('navigate', uri);
+}
+</script>
+
+<template>
+  <svg
+    :viewBox="`0 0 ${layout.totalWidth} ${layout.totalHeight}`"
+    width="100%"
+    :style="{ maxWidth: `${layout.totalWidth}px` }"
+    preserveAspectRatio="xMidYMid meet"
+    class="partitive-rake text-emerald-700 dark:text-emerald-300"
+    role="img"
+    aria-label="Partitive relation diagram"
+  >
+    <!-- Comprehensive label -->
+    <g>
+      <rect
+        :x="layout.centerX - NODE_W / 2"
+        :y="layout.compY - NODE_H / 2"
+        :width="NODE_W"
+        :height="NODE_H"
+        rx="6"
+        class="fill-emerald-50 dark:fill-emerald-900/30 stroke-current"
+        stroke-width="1.2"
+      />
+      <text
+        :x="layout.centerX"
+        :y="layout.compY"
+        text-anchor="middle"
+        dominant-baseline="middle"
+        class="text-[11px] fill-emerald-900 dark:fill-emerald-100"
+      >{{ comprehensiveLabel }}</text>
+    </g>
+
+    <!-- Criterion italic under the comprehensive -->
+    <text
+      v-if="criterion"
+      :x="layout.centerX"
+      :y="layout.compY + NODE_H / 2 + 10"
+      text-anchor="middle"
+      class="text-[9px] italic fill-emerald-800 dark:fill-emerald-200/80"
+    >{{ criterion }}</text>
+
+    <!-- Stem (vertical from comprehensive to spine) -->
+    <line
+      v-if="lineVariant === 'single'"
+      :x1="layout.centerX" :y1="layout.compY + NODE_H / 2"
+      :x2="layout.centerX" :y2="layout.spineY"
+      v-bind="strokeAttr('single')"
+    />
+    <template v-else>
+      <line
+        :x1="layout.centerX - DOUBLE_GAP / 2" :y1="layout.compY + NODE_H / 2"
+        :x2="layout.centerX - DOUBLE_GAP / 2" :y2="layout.spineY"
+        v-bind="strokeAttr('double-solid')"
+      />
+      <line
+        :x1="layout.centerX + DOUBLE_GAP / 2" :y1="layout.compY + NODE_H / 2"
+        :x2="layout.centerX + DOUBLE_GAP / 2" :y2="layout.spineY"
+        v-bind="strokeAttr(lineVariant === 'solid-plus-dashed' ? 'solid-plus-dashed' : 'double-solid')"
+      />
+    </template>
+
+    <!-- Spine (horizontal, from leftmost tooth to rightmost tooth or extended) -->
+    <line
+      v-if="lineVariant === 'single'"
+      :x1="layout.leftX" :y1="layout.spineY"
+      :x2="layout.spineEndX" :y2="layout.spineY"
+      v-bind="strokeAttr('single')"
+    />
+    <template v-else>
+      <line
+        :x1="layout.leftX" :y1="layout.spineY - DOUBLE_GAP / 2"
+        :x2="layout.spineEndX" :y2="layout.spineY - DOUBLE_GAP / 2"
+        v-bind="strokeAttr('double-solid')"
+      />
+      <line
+        :x1="layout.leftX" :y1="layout.spineY + DOUBLE_GAP / 2"
+        :x2="layout.spineEndX" :y2="layout.spineY + DOUBLE_GAP / 2"
+        v-bind="strokeAttr(lineVariant === 'solid-plus-dashed' ? 'solid-plus-dashed' : 'double-solid')"
+      />
+    </template>
+
+    <!-- Drops + partitive nodes -->
+    <g v-for="(slot, i) in layout.partitiveSlots" :key="i">
+      <!-- drop from spine to node (always single line per ISO 704) -->
+      <line
+        :x1="slot.x" :y1="layout.spineY"
+        :x2="slot.x" :y2="layout.partY - NODE_H / 2"
+        v-bind="strokeAttr('single', slot.member.certainty === 'possible' ? 0.5 : 1)"
+        :stroke-dasharray="slot.member.certainty === 'possible' ? DASH_PATTERN : undefined"
+      />
+      <!-- node -->
+      <g class="cursor-pointer" @click="emitNav(slot.member.uri)">
+        <rect
+          :x="slot.x - NODE_W / 2"
+          :y="layout.partY - NODE_H / 2"
+          :width="NODE_W"
+          :height="NODE_H"
+          rx="6"
+          :class="slot.member.certainty === 'possible'
+            ? 'fill-emerald-50/60 dark:fill-emerald-900/20 stroke-current'
+            : 'fill-emerald-50 dark:fill-emerald-900/30 stroke-current'"
+          :stroke-dasharray="slot.member.certainty === 'possible' ? DASH_PATTERN : undefined"
+          stroke-width="1.2"
+        />
+        <text
+          :x="slot.x"
+          :y="layout.partY"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          :class="slot.member.certainty === 'possible'
+            ? 'text-[11px] fill-emerald-700/70 dark:fill-emerald-200/60 italic'
+            : 'text-[11px] fill-emerald-900 dark:fill-emerald-100'"
+        >{{ slot.member.label }}</text>
+      </g>
+    </g>
+  </svg>
+</template>

package/src/components/PartitiveRelationList.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
 /**
  * PartitiveRelationList — renders one-to-many partitive decompositions
- * as grouped cards. Each relation shows:
- *   - the comprehensive (whole) concept as the card header
- *   - each partitive member as an indented child with a certainty badge
+ * as ISO 704 rake diagrams. Each relation shows:
  *   - completeness badge (complete / partial)
  *   - plurality badge (shared / uncertain / sharedType) when present
- *   - criterion as italic text under the title
+ *   - criterion as italic text under the header
+ *   - the rake diagram itself (PartitiveRelationDiagram)
  *
- * Independent of RelationshipList.vue, which renders binary edges.
- * Both consume the same stores but render in separate sections.
- *
- * v2 shape per concept-model/TODO.partitive-relation-v2.
+ * The diagram is the primary renderer. Badges in the header communicate
+ * the metadata that the diagram's line styles also encode (so users who
+ * can't perceive the visual difference still get the info).
  */
 import type { PartitiveRelationWire, Manifest } from '../adapters/types';
 import { useRouter } from 'vue-router';
@@ -19,10 +17,12 @@ import { useVocabularyStore } from '../stores/vocabulary';
 import { getFactory } from '../adapters/factory';
 import { useI18n } from '../i18n';
 import {
-  partitiveRelationStyle,
   completenessLabel,
   certaintyLabel,
 } from '../utils/partitive-relation-styling';
+import PartitiveRelationDiagram, {
+  type PartitiveMemberLabeled,
+} from './PartitiveRelationDiagram.vue';
 
 const props = defineProps<{
   relations: PartitiveRelationWire[];
@@ -30,10 +30,6 @@ const props = defineProps<{
   registerId: string;
 }>();
 
-const emit = defineEmits<{
-  (e: 'navigate', registerId: string, conceptId: string): void;
-}>();
-
 const router = useRouter();
 const store = useVocabularyStore();
 const factory = getFactory();
@@ -78,6 +74,14 @@ function pluralityBadge(plurality: NonNullable<PartitiveRelationWire['plurality'
   }
   return label;
 }
+
+function labeledMembers(rel: PartitiveRelationWire): PartitiveMemberLabeled[] {
+  return rel.partitives.map(m => ({
+    uri: m.uri,
+    label: labelFor(m.uri),
+    certainty: m.certainty,
+  }));
+}
 </script>
 
 <template>
@@ -115,25 +119,17 @@ function pluralityBadge(plurality: NonNullable<PartitiveRelationWire['plurality'
       >
         {{ criterionText(rel.criterion) }}
       </div>
-      <ul class="divide-y divide-emerald-100 dark:divide-emerald-900/30">
-        <li v-for="(member, j) in rel.partitives" :key="j">
-          <button
-            @click="navigate(member.uri)"
-            class="block w-full text-left px-3 py-1.5 text-sm hover:bg-emerald-100 dark:hover:bg-emerald-900/30 text-emerald-900 dark:text-emerald-100"
-            :class="{ 'opacity-60': member.certainty === 'possible' }"
-          >
-            <span class="text-emerald-600 dark:text-emerald-400 mr-2">└</span>
-            {{ labelFor(member.uri) }}
-            <span
-              v-if="member.certainty === 'possible'"
-              class="ml-2 text-[10px] font-mono px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/50 text-amber-800 dark:text-amber-200 uppercase"
-              :title="'plurality uncertain (ISO 704 broken line)'"
-            >
-              {{ certaintyLabel(member.certainty) }}
-            </span>
-          </button>
-        </li>
-      </ul>
+      <!-- Rake diagram (ISO 704 partitive-relation convention) -->
+      <div class="px-3 py-3 overflow-x-auto">
+        <PartitiveRelationDiagram
+          :comprehensive-label="labelFor(rel.comprehensive)"
+          :partitives="labeledMembers(rel)"
+          :completeness="rel.completeness"
+          :plurality="rel.plurality"
+          :criterion="null"
+          @navigate="navigate"
+        />
+      </div>
     </div>
   </div>
 </template>

package/src/main.ts

@@ -3,7 +3,7 @@ import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
 import { vMath } from './directives/v-math';
-import './style.css';
+import './styles/tailwind.css';
 
 const app = createApp(App);
 app.use(createPinia());

package/src/style.css

@@ -492,7 +492,7 @@
 
 /* Section labels brighter in dark mode */
 .dark .section-label {
-  color: theme('colors.ink.300') !important;
+  color: var(--color-ink-300) !important;
 }
 
 /* Scrollbar hide utility */