@glossarist/concept-browser 0.7.101 → 0.7.103

package/src/components/ConceptDetail.vue

@@ -200,7 +200,7 @@ function getTermForLang(lang: string): string {
 
 function getDesignationsForLang(lang: string): Designation[] {
   const lc = props.concept.localization(lang);
-  return lc?.terms ?? [];
+  return [...(lc?.terms ?? [])];
 }
 
 function hasDefinition(lang: string): boolean {
@@ -444,7 +444,7 @@ const nonVerbalReps = computed(() => {
               </div>
 
               <!-- Non-verbal representations -->
-              <NonVerbalRepDisplay v-if="lc.lc.nonVerbalRep?.length" :reps="lc.lc.nonVerbalRep" :locale="lc.lang" :register-id="registerId" :dataset-locales="languages" />
+              <NonVerbalRepDisplay v-if="lc.lc.nonVerbalRep?.length" :reps="[...lc.lc.nonVerbalRep]" :locale="lc.lang" :register-id="registerId" :dataset-locales="languages" />
 
               <!-- Sources -->
               <div v-if="lc.sources.length" class="space-y-2">

package/src/components/ConceptDiffModal.vue

@@ -33,7 +33,7 @@ const { t } = useI18n();
 const targetConcept = ref<Concept | null>(null);
 const loadError = ref<string | null>(null);
 
-function conceptToData(c: Concept | null, registerId: string): ConceptLikeData | null {
+function conceptToData(c: any, registerId: string): ConceptLikeData | null {
   if (!c) return null;
   const langs = c.languages ?? [];
   const localizations: Record<string, unknown> = {};
@@ -51,7 +51,7 @@ function conceptToData(c: Concept | null, registerId: string): ConceptLikeData |
 }
 
 const oldData = computed(() => conceptToData(targetConcept.value, props.targetRegisterId));
-const newData = computed(() => conceptToData(props.currentConcept, props.currentRegisterId));
+const newData = computed(() => conceptToData(props.currentConcept as any, props.currentRegisterId));
 
 async function loadTarget() {
   if (!props.open || !props.targetRegisterId || !props.targetConceptId) return;

package/src/components/ConceptDiffView.vue

@@ -51,7 +51,7 @@ watchEffect(() => {
   }
 });
 
-const effectiveDiff = computed(() => props.diff ?? internal.diffResult.value);
+const effectiveDiff = computed(() => (props.diff ?? internal.diffResult.value) as any);
 const sections = computed(() => deriveDiffSections(effectiveDiff.value, props.lang));
 const similarity = computed(() => computeSimilarity(effectiveDiff.value));
 const hasChanges = computed(() => effectiveDiff.value?.hasChanges === true);

package/src/components/DesignationList.vue

@@ -77,11 +77,11 @@ function resolvedLabel(dr: { content: string | null; ref?: { source: string | nu
       <div v-if="d.related?.length" class="mt-0.5 space-y-0.5">
         <div v-for="(dr, dri) in d.related" :key="'dr'+dri" class="text-xs text-ink-400 flex items-center gap-1.5">
           <span class="badge text-[9px] bg-gray-50 text-gray-600">{{ relationshipLabel(dr.type ?? '') }}</span>
-          <template v-if="getDesignationTarget(dr)">
-            <span class="italic">{{ getDesignationTarget(dr) }}</span>
+          <template v-if="getDesignationTarget(dr as any)">
+            <span class="italic">{{ getDesignationTarget(dr as any) }}</span>
           </template>
-          <button v-else-if="'ref' in dr && dr.ref" @click="emit('navigate-related', dr.ref)" class="concept-link">{{ resolvedLabel(dr) }}</button>
-          <span v-else>{{ resolvedLabel(dr) }}</span>
+          <button v-else-if="'ref' in dr && dr.ref" @click="emit('navigate-related', dr.ref)" class="concept-link">{{ resolvedLabel(dr as any) }}</button>
+          <span v-else>{{ resolvedLabel(dr as any) }}</span>
         </div>
       </div>
     </div>

package/src/components/NavIcon.vue

@@ -10,6 +10,7 @@ const icons: Record<string, string> = {
   list: 'M4 6h16M4 10h16M4 14h16M4 18h16',
   schema: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z',
   database: 'M4 7c0 1.1 3.6 2 8 2s8-.9 8-2M4 7c0-1.1 3.6-2 8-2s8 .9 8 2M4 7v10c0 1.1 3.6 2 8 2s8-.9 8-2V7M4 12c0 1.1 3.6 2 8 2s8-.9 8-2',
+  book: 'M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25',
 };
 
 defineProps<{ name: string }>();

package/src/components/figure/FigureDisplay.vue

@@ -50,8 +50,8 @@ const topLevelImages = computed(() => fig.value?.images ?? []);
   >
     <div v-if="topLevelImages.length" :class="`figure__media figure__media--${layout}`">
       <FigureImages
-        :images="topLevelImages"
-        :alt="fig.alt"
+        :images="[...topLevelImages]"
+        :alt="(fig.alt as any)"
         :dataset-id="datasetId"
         :locale="locale"
         :fallback-chain="fallbackChain"
@@ -76,8 +76,8 @@ const topLevelImages = computed(() => fig.value?.images ?? []);
 
     <NonVerbalCaption
       :identifier="fig.identifier"
-      :caption="fig.caption"
-      :description="fig.description"
+      :caption="(fig.caption as any)"
+      :description="(fig.description as any)"
       :locale="locale"
       :fallback-chain="fallbackChain"
       :description-id="descriptionId"
@@ -85,7 +85,7 @@ const topLevelImages = computed(() => fig.value?.images ?? []);
 
     <NonVerbalSources
       v-if="fig.sources?.length"
-      :sources="fig.sources"
+      :sources="[...(fig.sources || [])]"
     />
   </figure>
 

package/src/components/formula/FormulaDisplay.vue

@@ -41,7 +41,7 @@ const descriptionId = computed(() => `${anchor.value}-desc`);
   >
     <div class="formula__expr-line">
       <FormulaExpression
-        :expression="form.expression"
+        :expression="(form.expression as any)"
         :notation="(form.notation as FormulaNotation | null)"
         :locale="locale"
         :fallback-chain="fallbackChain"
@@ -50,8 +50,8 @@ const descriptionId = computed(() => `${anchor.value}-desc`);
 
     <NonVerbalCaption
       :identifier="form.identifier"
-      :caption="form.caption"
-      :description="form.description"
+      :caption="(form.caption as any)"
+      :description="(form.description as any)"
       :locale="locale"
       :fallback-chain="fallbackChain"
       :description-id="descriptionId"
@@ -59,7 +59,7 @@ const descriptionId = computed(() => `${anchor.value}-desc`);
 
     <NonVerbalSources
       v-if="form.sources?.length"
-      :sources="form.sources"
+      :sources="[...(form.sources || [])]"
     />
   </figure>
 

package/src/components/table/TableDisplay.vue

@@ -65,8 +65,8 @@ const markup = computed(() => {
 
     <NonVerbalCaption
       :identifier="table.identifier"
-      :caption="table.caption"
-      :description="table.description"
+      :caption="(table.caption as any)"
+      :description="(table.description as any)"
       :locale="locale"
       :fallback-chain="fallbackChain"
       :description-id="descriptionId"
@@ -74,7 +74,7 @@ const markup = computed(() => {
 
     <NonVerbalSources
       v-if="table.sources?.length"
-      :sources="table.sources"
+      :sources="[...(table.sources || [])]"
     />
   </figure>
 

package/src/components/use-rdf-document.ts

@@ -8,12 +8,21 @@ import {
   writeTurtleSync,
   collectQuads,
   PREFIXES,
-  type ClassInstance,
-  type PropValue,
-  type Quad,
 } from 'glossarist/rdf';
+import type { Quad } from '@rdfjs/types';
 
-export type { ClassInstance, PropValue };
+export interface PropValue {
+  predicate: string;
+  values: string[];
+  nested?: boolean;
+}
+
+export interface ClassInstance {
+  classId: string;
+  classLabel: string;
+  label: string;
+  props: PropValue[];
+}
 
 export interface RdfDocument {
   sections: ComputedRef<ClassInstance[]>;
@@ -111,10 +120,10 @@ export function useRdfDocument(
     const concept = getConcept();
     const uri = getConceptUri();
     const conceptQuads = collectQuads(
-      conceptToQuads(concept, {
+      conceptToQuads(concept as any, {
         registerId: options.registerId ?? '',
         uriBase: options.uriBase ?? '',
-      }),
+      }) as any,
     );
     const provenanceQuads = collectQuads(
       provenanceToQuads({
@@ -122,7 +131,7 @@ export function useRdfDocument(
         serializer: 'concept-browser',
         serializerVersion: SERIALIZER_VERSION,
         generatedAt: new Date().toISOString(),
-      }),
+      }) as any,
     );
     return [...conceptQuads, ...provenanceQuads];
   });

package/src/composables/use-concept-content.ts

@@ -101,14 +101,14 @@ export function useConceptContent(
         renderedAnnotations: annotations.map((a: string) => renderContent(a, opts)),
         notes,
         examples,
-        sources: lc.sources,
-        designations: lc.terms,
+        sources: [...lc.sources],
+        designations: [...lc.terms],
         renderedDesignations: new Map(lc.terms.map(d => [d.designation, renderContent(d.designation)])),
         entryStatus: lc.entryStatus ?? '',
         classification: lc.classification,
         reviewType: lc.reviewType,
         release: lc.release,
-        lineageSourceSimilarity: lc.lineageSourceSimilarity,
+        lineageSourceSimilarity: (lc.lineageSourceSimilarity as any),
         lcScript: lc.script,
         lcSystem: lc.system,
       });

package/src/composables/use-concept-diff.ts

@@ -211,8 +211,8 @@ export function useConceptDiff() {
     error.value = null;
     try {
       diffResult.value = diffConcepts(
-        oldData ? toDiffableConcept(oldData) : null,
-        newData ? toDiffableConcept(newData) : null,
+        (oldData ? toDiffableConcept(oldData) : null) as any,
+        (newData ? toDiffableConcept(newData) : null) as any,
       );
     } catch (e: unknown) {
       error.value = e instanceof Error ? e.message : String(e);

package/src/composables/use-concept-edges.ts

@@ -7,7 +7,7 @@ import type { Concept, RelatedConcept, ConceptRef } from 'glossarist';
 import { PartitiveHyperedge } from 'glossarist';
 import { GenericHyperedge } from 'glossarist/models';
 import type {
-  PartitiveRelation as GlsPartitiveRelation,
+  PartitiveHyperedge as GlsPartitiveRelation,
   PartitiveMember as GlsPartitiveMember,
 } from 'glossarist/models';
 import type {
@@ -39,7 +39,7 @@ export interface EdgeDisplay {
 }
 
 export function useConceptEdges(
-  concept: ComputedRef<Concept | null | undefined>,
+  concept: ComputedRef<any>,
   registerId: ComputedRef<string>,
   manifest: ComputedRef<Manifest | null | undefined>,
   edges: ComputedRef<GraphEdge[]>,
@@ -138,7 +138,7 @@ export function useConceptEdges(
   // Concept-level related concepts (managed concept cross-references)
   const conceptRelated = computed(() => {
     if (!concept.value) return [];
-    const direct = concept.value.relatedConcepts?.filter(rc => !INVERSE_RELATIONSHIPS[rc.type]) ?? [];
+    const direct = concept.value.relatedConcepts?.filter((rc: any) => !INVERSE_RELATIONSHIPS[rc.type]) ?? [];
     const derived = incomingEdges.value
       .filter(e => INVERSE_RELATIONSHIPS[e.type])
       .map(e => {

package/src/config/page-types.ts

@@ -35,7 +35,7 @@ export const PAGE_TYPES: readonly PageTypeDefinition[] = [
   { type: 'stats',      route: 'stats',   title: 'Statistics',   icon: 'chart',      scope: 'dataset', featureFlag: '!stats',     autoSynthesize: true },
   { type: 'sources',    route: 'sources', title: 'Sources',      icon: 'database',   scope: 'dataset', autoSynthesize: true },
   { type: 'about',      route: 'about',   title: 'About',        icon: 'info',       scope: 'dataset', featureFlag: '!about',     autoSynthesize: true },
-  { type: 'learn',      route: 'learn',   title: 'Learn',        icon: 'book-open',  scope: 'global',  autoSynthesize: true },
+  { type: 'learn',      route: 'learn',   title: 'Learn',        icon: 'book',        scope: 'global',  autoSynthesize: true },
 ] as const;
 
 export type BuiltinPageType = typeof PAGE_TYPES[number]['type'];

package/src/i18n/locales/eng.yml

@@ -56,6 +56,18 @@ 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.dimensions.combinationsTitle: Valid multiplicity combinations
+learn.dimensions.combinationsDescription: ISO 704 description
+learn.dimensions.combinationsModel: Our model
+learn.dimensions.combinationsVisual: Visual
+learn.dimensions.combo.compulsory: compulsory
+learn.dimensions.combo.atLeastOne: at least one
+learn.dimensions.combo.optional: optional
+learn.dimensions.combo.optionalMultiple: optional multiple
+learn.dimensions.combo.compulsoryMultiple: compulsory multiple
+learn.dimensions.invalidDescription: (invalid)
+learn.dimensions.invalidModel: optional + at_least_one
+learn.dimensions.invalidReason: Vacuous — collapses to optional + multiple (0..*). Rejected by glossarist-js.
 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.

package/src/i18n/locales/fra.yml

@@ -55,6 +55,18 @@ 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.dimensions.combinationsTitle: Combinaisons de multiplicité valides
+learn.dimensions.combinationsDescription: Description ISO 704
+learn.dimensions.combinationsModel: Notre modèle
+learn.dimensions.combinationsVisual: Visuel
+learn.dimensions.combo.compulsory: obligatoire
+learn.dimensions.combo.atLeastOne: au moins un
+learn.dimensions.combo.optional: optionnel
+learn.dimensions.combo.optionalMultiple: optionnel multiple
+learn.dimensions.combo.compulsoryMultiple: obligatoire multiple
+learn.dimensions.invalidDescription: (invalide)
+learn.dimensions.invalidModel: optional + at_least_one
+learn.dimensions.invalidReason: Vacuous — se réduit à optional + multiple (0..*). Rejeté par glossarist-js.
 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.

package/src/layouts/Default.astro

@@ -12,6 +12,30 @@ interface Props {
 
 const { title, description = '', conceptTerm, conceptDefinition } = Astro.props;
 const siteConfig = await getSiteConfig();
+
+// Derive Google Fonts URL from siteConfig branding (build-time SSG).
+// Falls back to the default DM Sans / DM Serif Display / JetBrains Mono
+// when no branding.fonts is declared.
+const brandingFonts = siteConfig?.branding?.fonts;
+const fontParts: string[] = [];
+if (brandingFonts?.header?.source === 'google' && brandingFonts.header.family) {
+  const w = (brandingFonts.header.weights || [400, 700]).join(';');
+  fontParts.push(`family=${brandingFonts.header.family.replace(/ /g, '+')}:wght@${w}`);
+}
+if (brandingFonts?.body?.source === 'google' && brandingFonts.body.family) {
+  const w = (brandingFonts.body.weights || [400, 700]).join(';');
+  fontParts.push(`family=${brandingFonts.body.family.replace(/ /g, '+')}:wght@${w}`);
+}
+const fontsUrl = fontParts.length > 0
+  ? `https://fonts.googleapis.com/css2?${fontParts.join('&')}&display=swap`
+  : 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap';
+
+const fontHeader = brandingFonts?.header?.family
+  ? `'${brandingFonts.header.family}', Georgia, serif`
+  : `'DM Serif Display', Georgia, serif`;
+const fontBody = brandingFonts?.body?.family
+  ? `'${brandingFonts.body.family}', system-ui, sans-serif`
+  : `'DM Sans', system-ui, sans-serif`;
 ---
 
 <!DOCTYPE html>
@@ -42,8 +66,14 @@ const siteConfig = await getSiteConfig();
     <title>{title}</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" onload="this.rel='stylesheet'">
-    <noscript><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"></noscript>
+    <link rel="preload" as="style" href={fontsUrl} onload="this.rel='stylesheet'">
+    <noscript><link href={fontsUrl} rel="stylesheet"></noscript>
+    <style is:global>
+      :root {
+        --font-header: ${fontHeader};
+        --font-body: ${fontBody};
+      }
+    </style>
     <script is:inline>
       (function() {
         const c = document.cookie.split(';').map(s => s.trim()).find(s => s.startsWith('theme='));

package/src/utils/content-renderer.ts

@@ -183,7 +183,7 @@ function resolveUrnRefs(text: string, opts: RenderOptions): string {
 function resolveMentions(text: string, opts: RenderOptions): string {
   return text.replace(/\{\{([^{}]+?)\}\}/g, (_orig, body) => {
     const parsed = parseMention(body);
-    const p = parsed as Record<string, unknown>;
+    const p = parsed as unknown as Record<string, unknown>;
 
     switch (p.kind) {
       case 'fig-ref':

package/src/utils/partitive-multiplicity.ts

@@ -28,10 +28,11 @@ import {
   multiplicityFromPair,
   isValidPresence,
   isValidCount,
-  type PartitivePresence,
-  type PartitiveCount,
 } from 'glossarist/models';
 
+type PartitivePresence = (typeof PARTITIVE_PRESENCE.VALUES)[number];
+type PartitiveCount = (typeof PARTITIVE_COUNT.VALUES)[number];
+
 // ── Two independent axes (re-exported SSOT) ────────────────────────────
 
 export { PARTITIVE_PRESENCE, PARTITIVE_COUNT };

package/src/views/ConceptView.vue

@@ -60,7 +60,7 @@ const activeRegisterId = computed(() => sphereFocusPayload.value?.registerId ??
 const adjacent = ref({ prev: null as string | null, next: null as string | null });
 
 const { conceptPartitiveRelations, conceptGenericRelations } = useConceptEdges(
-  concept,
+  computed(() => concept.value as any),
   activeRegisterId,
   manifest,
   edges,
@@ -284,7 +284,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown));
         <!-- Sphere mode — receives concept + edges directly, no URI matching -->
         <RelationSphere
           v-if="viewMode === 'sphere'"
-          :concept="concept"
+          :concept="concept as any"
           :manifest="manifest"
           :register-id="activeRegisterId"
           :edges="edges"
@@ -295,7 +295,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown));
         <!-- Detail mode -->
         <ConceptDetail
           v-else
-          :concept="concept"
+          :concept="concept as any"
           :manifest="manifest"
           :edges="edges"
           :adjacent="adjacent"

package/src/views/learn/LearnRelationshipsView.vue

@@ -86,6 +86,39 @@ const delimitingValues: readonly DimensionValue[] = [
     meaning: t('learn.dimensions.delimiting.true.meaning'),
   },
 ];
+
+const validCombinations = [
+  {
+    description: t('learn.dimensions.combo.compulsory'),
+    uml: '1..1',
+    model: 'required + exactly_one',
+    svg: '<svg width="44" height="14"><line x1="2" y1="7" x2="42" y2="7" stroke="currentColor" stroke-width="1.5"/></svg>',
+  },
+  {
+    description: t('learn.dimensions.combo.atLeastOne'),
+    uml: '1..*',
+    model: 'required + at_least_one',
+    svg: '<svg width="44" height="14"><line x1="2" y1="5" x2="42" y2="5" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="9" x2="42" y2="9" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 3"/></svg>',
+  },
+  {
+    description: t('learn.dimensions.combo.optional'),
+    uml: '0..1',
+    model: 'optional + exactly_one',
+    svg: '<svg width="44" height="14"><line x1="2" y1="7" x2="42" y2="7" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 3"/></svg>',
+  },
+  {
+    description: t('learn.dimensions.combo.optionalMultiple'),
+    uml: '0..*',
+    model: 'optional + multiple',
+    svg: '<svg width="44" height="14"><line x1="2" y1="5" x2="42" y2="5" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 3"/><line x1="2" y1="9" x2="42" y2="9" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 3"/></svg>',
+  },
+  {
+    description: t('learn.dimensions.combo.compulsoryMultiple'),
+    uml: '2..*',
+    model: 'required + multiple',
+    svg: '<svg width="44" height="14"><line x1="2" y1="5" x2="42" y2="5" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="9" x2="42" y2="9" stroke="currentColor" stroke-width="1.5"/></svg>',
+  },
+];
 </script>
 
 <template>
@@ -202,6 +235,36 @@ const delimitingValues: readonly DimensionValue[] = [
           </template>
         </DimensionCard>
       </div>
+
+      <h3 class="text-base font-semibold text-ink-700 dark:text-ink-100 mt-6 mb-3">
+        {{ t('learn.dimensions.combinationsTitle') }}
+      </h3>
+      <div class="card p-4 overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-ink-100 dark:border-ink-700 text-ink-500 dark:text-ink-400 text-xs uppercase tracking-wide">
+              <th class="text-left py-2 pr-4">{{ t('learn.dimensions.combinationsDescription') }}</th>
+              <th class="text-center py-2 px-2">UML</th>
+              <th class="text-left py-2 px-2">{{ t('learn.dimensions.combinationsModel') }}</th>
+              <th class="text-center py-2 pl-4">{{ t('learn.dimensions.combinationsVisual') }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-ink-100 dark:divide-ink-700">
+            <tr v-for="combo in validCombinations" :key="combo.model">
+              <td class="py-2 pr-4 text-ink-700 dark:text-ink-200">{{ combo.description }}</td>
+              <td class="py-2 px-2 text-center font-mono text-ink-500 dark:text-ink-400">{{ combo.uml }}</td>
+              <td class="py-2 px-2 font-mono text-xs text-ink-600 dark:text-ink-300">{{ combo.model }}</td>
+              <td class="py-2 pl-4 text-center" v-html="combo.svg"></td>
+            </tr>
+            <tr class="opacity-50">
+              <td class="py-2 pr-4 text-ink-500 dark:text-ink-400 italic">{{ t('learn.dimensions.invalidDescription') }}</td>
+              <td class="py-2 px-2 text-center font-mono text-ink-400">—</td>
+              <td class="py-2 px-2 font-mono text-xs text-ink-400">{{ t('learn.dimensions.invalidModel') }}</td>
+              <td class="py-2 pl-4 text-center text-xs text-ink-400 italic">{{ t('learn.dimensions.invalidReason') }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </section>
 
     <!-- ── General hyperedge ──────────────────────────────────────── -->

package/tailwind.config.js

@@ -13,8 +13,8 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        serif: ['"DM Serif Display"', 'Georgia', 'serif'],
-        sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
+        serif: ['var(--font-header, "DM Serif Display")', 'Georgia', 'serif'],
+        sans: ['var(--font-body, "DM Sans")', 'system-ui', 'sans-serif'],
         mono: ['"JetBrains Mono"', 'monospace'],
       },
       colors: {
@@ -39,7 +39,7 @@ export default {
       },
       typography: {
         serif: {
-          'font-family': '"DM Serif Display", Georgia, serif',
+          'font-family': 'var(--font-header, "DM Serif Display"), Georgia, serif',
         },
       },
     },

package/tsconfig.json

@@ -20,6 +20,6 @@
     },
     "baseUrl": "."
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "env.d.ts", ".astro/types.d.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "cli/**/*.ts", "env.d.ts", ".astro/types.d.ts"],
   "exclude": ["src/content.config.ts", "src/pages/**", "src/layouts/**", "src/astro-islands/**", "src/lib/site-config.ts"]
 }