@kolkrabbi/kol-foundry 0.1.0 → 0.2.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@kolkrabbi/kol-foundry",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
-  "description": "KOL type-foundry system — the type-specimen apparatus: typeface hero, variable-font axis playground, parsed-metric glyph inspector, character-set browser, and font-preview. Typeface data is consumer-injected. Sits above @kolkrabbi/kol-{theme,icons,component}.",
+  "description": "KOL foundry component set — the type-specimen apparatus: typeface hero, variable-font axis playground, parsed-metric glyph inspector, character-set browser, font-preview, and the typeface-catalog grid. Every component renders, inspects, or manipulates a live font. Typeface data is consumer-injected. Sits above @kolkrabbi/kol-{theme,icons,component}.",
   "license": "MIT",
   "type": "module",
   "main": "./src/index.js",
@@ -11,9 +11,9 @@
     ".": "./src/index.js"
   },
   "dependencies": {
+    "@kolkrabbi/kol-theme": "0.7.1",
     "@kolkrabbi/kol-component": "0.7.0",
-    "@kolkrabbi/kol-icons": "0.5.0",
-    "@kolkrabbi/kol-theme": "0.7.1"
+    "@kolkrabbi/kol-icons": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/GlyphMetricsSection.jsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import SpecimenSectionHeader from './SpecimenSectionHeader.jsx'
+import GlyphMetricsGrid from './GlyphMetricsGrid.jsx'
+
+/**
+ * GlyphMetricsSection — the "Glyph Metrics" specimen section: a section header
+ * (Roman/Italic or Weight/Width axis dropdowns) over the parsed-metric
+ * GlyphMetricsGrid. Owns the style/axis selection state and feeds the grid the
+ * chosen font URL + `variationSettings`.
+ *
+ * Composes the package's existing canonical leaves — SpecimenSectionHeader
+ * (promoted from the monorepo's `FoundrySection`) and GlyphMetricsGrid (which
+ * already handles font I/O with opentype.js as an optional peer).
+ *
+ * @param {Object} props
+ * @param {string} props.fontFamily - CSS family fallback until the parsed face injects.
+ * @param {string} props.fontUrlRoman - Roman/upright font URL.
+ * @param {string} props.fontUrlItalic - Italic font URL.
+ * @param {'normal'|'italic'} props.fontStyle - Initial style variant.
+ * @param {string} props.badgeText - Section title text.
+ * @param {boolean} props.showDropdown - Show the Roman/Italic style dropdown.
+ * @param {boolean} props.hasWeight - Font has a weight axis.
+ * @param {boolean} props.hasWidth - Font has a width axis.
+ * @param {Array<{label,weight}>} props.weights - Weight axis options.
+ * @param {Array<{label,width}>} props.widths - Width axis options.
+ */
+const GlyphMetricsSection = ({
+  fontFamily = 'TGMalromur',
+  fontUrlRoman,
+  fontUrlItalic,
+  fontStyle = 'normal',
+  badgeText = 'Málrómur',
+  showDropdown = true,
+  // Variable font axis support
+  hasWeight = false,
+  hasWidth = false,
+  weights = [],
+  widths = []
+}) => {
+  const [selectedStyleVariant, setSelectedStyleVariant] = useState(
+    fontStyle === 'italic' ? 'italic' : 'roman'
+  )
+  const [selectedAxis] = useState('weight')
+  const [selectedWeight, setSelectedWeight] = useState(400)
+  const [selectedWidth, setSelectedWidth] = useState(100)
+
+  const isItalic = selectedStyleVariant === 'italic'
+
+  // Select the correct font URL based on the dropdown
+  const currentFontUrl = isItalic ? fontUrlItalic : fontUrlRoman
+
+  // Build axis options for dropdown
+  const axisOptions = []
+  if (hasWeight) axisOptions.push({ label: 'Weight', value: 'weight' })
+  if (hasWidth) axisOptions.push({ label: 'Width', value: 'width' })
+
+  // Build value options based on selected axis
+  const valueOptions = selectedAxis === 'weight'
+    ? weights.map(w => ({ label: w.label, value: w.weight }))
+    : widths.map(w => ({ label: w.label, value: w.width }))
+
+  const selectedValue = selectedAxis === 'weight' ? selectedWeight : selectedWidth
+  const onValueChange = selectedAxis === 'weight' ? setSelectedWeight : setSelectedWidth
+
+  // Show axis dropdown if font has variable axes
+  const showAxisDropdown = axisOptions.length > 0
+
+  // Get variation settings for the glyph display
+  const variationSettings = {}
+  if (hasWeight) variationSettings.wght = selectedWeight
+  if (hasWidth) variationSettings.wdth = selectedWidth
+
+  // Style dropdown: roman/italic when font has italic
+  const italicOptions = [
+    { label: 'Roman', value: 'roman' },
+    { label: 'Italic', value: 'italic' }
+  ]
+
+  return (
+    <section className="w-full py-12 lg:py-16">
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
+        <SpecimenSectionHeader
+          selectedStyle={showDropdown ? selectedStyleVariant : showAxisDropdown ? selectedValue : undefined}
+          onStyleChange={showDropdown ? setSelectedStyleVariant : showAxisDropdown ? onValueChange : undefined}
+          showDropdown={showDropdown || (showAxisDropdown && valueOptions.length > 0)}
+          styleOptions={showDropdown ? italicOptions : valueOptions}
+          badgeText={badgeText}
+          icon="foundation"
+          size="sm"
+          showWeightDropdown={showAxisDropdown && valueOptions.length > 0}
+          weightOptions={valueOptions}
+          selectedWeight={selectedValue}
+          onWeightChange={onValueChange}
+        />
+
+        <GlyphMetricsGrid
+          fontUrl={currentFontUrl}
+          fontFamily={fontFamily}
+          fontStyle="normal"
+          variationSettings={variationSettings}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default GlyphMetricsSection

package/src/TypefaceLibraryGrid.jsx

@@ -0,0 +1,75 @@
+import { ContentFilters } from '@kolkrabbi/kol-component'
+
+/**
+ * TypefaceLibraryGrid — filtered typeface library grid. Thin wrapper around the
+ * DS `ContentFilters` configured for typefaces (Classification + Styles filter
+ * groups, card/list view toggle). The parent supplies `renderItem` so it can
+ * wrap each entry in its own navigation.
+ *
+ * @param {Object} props
+ * @param {Array} props.typefaces - Typeface objects.
+ * @param {Function} props.renderItem - (typeface, viewMode) => node, wraps each item.
+ * @param {number} props.totalCount - Total count of all typefaces.
+ */
+const TypefaceLibraryGrid = ({
+  typefaces,
+  renderItem,
+  totalCount
+}) => {
+  // Extract unique values for filter groups
+  const classifications = [...new Set(typefaces.map((t) => t.classification))].sort()
+  const styles = [...new Set(typefaces.map((t) => t.styles))].sort()
+
+  const filterGroups = [
+    {
+      label: 'Classification',
+      key: 'classification',
+      values: classifications
+    },
+    {
+      label: 'Styles',
+      key: 'styles',
+      values: styles
+    }
+  ]
+
+  const viewModeOptions = [
+    { value: 'card', label: 'Card view' },
+    { value: 'list', label: 'List view' }
+  ]
+
+  // Render items in grid or list based on view mode
+  const renderItemsWithLayout = (items, viewMode) => {
+    if (viewMode === 'card') {
+      return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {items.map((typeface) => renderItem(typeface, 'card'))}
+        </div>
+      )
+    }
+
+    return (
+      <div className="space-y-3">
+        {items.map((typeface) => renderItem(typeface, 'list'))}
+      </div>
+    )
+  }
+
+  return (
+    <section className="w-full py-16">
+      <div className="max-w-[1400px] mx-auto">
+        <ContentFilters
+          items={typefaces}
+          title="All Typefaces"
+          totalCount={totalCount}
+          filterGroups={filterGroups}
+          renderItem={(items, viewMode) => renderItemsWithLayout(items, viewMode)}
+          viewModeOptions={viewModeOptions}
+          defaultViewMode="list"
+        />
+      </div>
+    </section>
+  )
+}
+
+export default TypefaceLibraryGrid

package/src/TypefaceLibraryGridWithVariables.jsx

@@ -0,0 +1,236 @@
+import { useState, useMemo, useEffect, useRef } from 'react'
+import { ContentFilters } from '@kolkrabbi/kol-component'
+import TypefaceLibraryItem from './TypefaceLibraryItem.jsx'
+import TypefaceVariablePreview from './TypefaceVariablePreview.jsx'
+
+/**
+ * TypefaceLibraryGridWithVariables — the library grid with a "By Typeface"
+ * filter mode. Default mode shows standard TypefaceLibraryItem cards; selecting
+ * a single typeface swaps to TypefaceVariablePreview per weight variant, with an
+ * optional Axes filter for multi-axis families.
+ *
+ * Router-severed: pass an injected `linkComponent` (e.g. your router's `Link`)
+ * to wrap each item — it receives a `to` prop. When omitted, items render as a
+ * plain `<a href>`. Report: replaced the monorepo's `react-router-dom` `Link`.
+ *
+ * @param {Object} props
+ * @param {Array} props.typefaces - Typeface objects.
+ * @param {Object} props.typefaceWeights - Map of typeface name → weight variant array.
+ * @param {number} props.totalCount - Total count of all typefaces.
+ * @param {React.ElementType} props.linkComponent - Optional link wrapper (receives `to`); defaults to `<a href>`.
+ */
+const TypefaceLibraryGridWithVariables = ({
+  typefaces,
+  typefaceWeights = {},
+  totalCount,
+  linkComponent
+}) => {
+  const [activeFilters, setActiveFilters] = useState(new Set())
+  const [viewMode, setViewMode] = useState('list')
+  const [activeIndex, setActiveIndex] = useState(null)
+  const prevModeRef = useRef(null)
+
+  const LinkEl = linkComponent || 'a'
+  const linkPropsFor = (dest) => (linkComponent ? { to: dest } : { href: dest })
+
+  // Reset active index when filters change
+  useEffect(() => {
+    setActiveIndex(null)
+  }, [activeFilters])
+
+  // Handle filter changes with mutual exclusivity for typeface selection
+  const handleFilterChange = (newFilters) => {
+    // Check if a typeface (name) filter was added
+    const newTypefaceFilter = Array.from(newFilters).find(f => f.startsWith('name:'))
+    const oldTypefaceFilter = Array.from(activeFilters).find(f => f.startsWith('name:'))
+
+    // If a new typeface is selected and it's different from the old one,
+    // remove the old typeface filter to enforce mutual exclusivity
+    if (newTypefaceFilter && oldTypefaceFilter && newTypefaceFilter !== oldTypefaceFilter) {
+      const updatedFilters = new Set(newFilters)
+      updatedFilters.delete(oldTypefaceFilter)
+      setActiveFilters(updatedFilters)
+    } else {
+      setActiveFilters(newFilters)
+    }
+  }
+
+  // Extract unique values for filter groups
+  const classifications = [...new Set(typefaces.map((t) => t.classification))].sort()
+  const styles = [...new Set(typefaces.map((t) => t.styles))].sort()
+  const typefaceNames = typefaces.map((t) => t.name).sort()
+
+  // Check if a specific typeface is selected
+  const selectedTypeface = useMemo(() => {
+    const typefaceFilter = Array.from(activeFilters).find(f => f.startsWith('name:'))
+    return typefaceFilter ? typefaceFilter.split(':')[1] : null
+  }, [activeFilters])
+
+  // Get available axes for selected typeface
+  const availableAxes = useMemo(() => {
+    if (!selectedTypeface || !typefaceWeights[selectedTypeface]) return []
+    const weights = typefaceWeights[selectedTypeface]
+    const axes = [...new Set(weights.map(w => w.axis).filter(Boolean))]
+    return axes
+  }, [selectedTypeface, typefaceWeights])
+
+  // Filter groups - dynamically add Axes filter if multi-axis typeface selected
+  const filterGroups = useMemo(() => {
+    const baseGroups = [
+      { label: 'Classification', key: 'classification', values: classifications },
+      { label: 'Styles', key: 'styles', values: styles },
+      { label: 'Typefaces', key: 'name', values: typefaceNames }
+    ]
+
+    // Add Axes filter if selected typeface has multiple axes
+    if (selectedTypeface && availableAxes.length > 1) {
+      baseGroups.push({
+        label: 'Axes',
+        key: 'axis',
+        values: availableAxes
+      })
+    }
+
+    return baseGroups
+  }, [classifications, styles, typefaceNames, selectedTypeface, availableAxes])
+
+  // Filtered items
+  const filteredItems = useMemo(() => {
+    if (activeFilters.size === 0) return typefaces
+
+    return typefaces.filter((typeface) => {
+      let matches = true
+      activeFilters.forEach((filter) => {
+        const [filterType, value] = filter.split(':')
+        if (filterType === 'typeface' && typeface.name !== value) {
+          matches = false
+        }
+        if (filterType === 'classification' && typeface.classification !== value) {
+          matches = false
+        }
+        if (filterType === 'styles' && typeface.styles !== value) {
+          matches = false
+        }
+      })
+      return matches
+    })
+  }, [typefaces, activeFilters])
+
+  // View mode options
+  const viewModeOptions = [
+    { value: 'card', label: 'Card view' },
+    { value: 'list', label: 'List view' }
+  ]
+
+  // Render items based on filter mode
+  const renderItems = (items, mode) => {
+    // Reset active index when view mode changes
+    if (prevModeRef.current !== null && prevModeRef.current !== mode) {
+      setActiveIndex(null)
+    }
+    prevModeRef.current = mode
+
+    // If a specific typeface is selected, show weight variants
+    if (selectedTypeface && typefaceWeights[selectedTypeface]) {
+      const typeface = items.find(t => t.name === selectedTypeface)
+      if (!typeface) return null
+
+      let weights = typefaceWeights[selectedTypeface]
+
+      // Filter by selected axes if any axis filters are active
+      const selectedAxes = Array.from(activeFilters)
+        .filter(f => f.startsWith('axis:'))
+        .map(f => f.split(':')[1])
+
+      if (selectedAxes.length > 0) {
+        weights = weights.filter(w => selectedAxes.includes(w.axis))
+      }
+
+      if (mode === 'card') {
+        return (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {weights.map((w) => (
+              <TypefaceVariablePreview
+                key={`${typeface.name}-${w.weight}`}
+                typeface={typeface}
+                weight={w.weight}
+                weightValue={w.value}
+                variant="card"
+              />
+            ))}
+          </div>
+        )
+      }
+
+      // List view
+      return (
+        <div className="space-y-6">
+          {weights.map((w) => (
+            <TypefaceVariablePreview
+              key={`${typeface.name}-${w.weight}`}
+              typeface={typeface}
+              weight={w.weight}
+              weightValue={w.value}
+              variant="list"
+            />
+          ))}
+        </div>
+      )
+    }
+
+    // Default mode: show standard typeface cards
+    if (mode === 'card') {
+      return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {items.map((typeface, index) => (
+            <LinkEl key={typeface.link} {...linkPropsFor(typeface.link)}>
+              <TypefaceLibraryItem
+                typeface={typeface}
+                variant="card"
+                isActive={activeIndex === index}
+                onMouseEnter={() => setActiveIndex(index)}
+              />
+            </LinkEl>
+          ))}
+        </div>
+      )
+    }
+
+    // List view
+    return (
+      <div className="space-y-6">
+        {items.map((typeface, index) => (
+          <LinkEl key={typeface.link} {...linkPropsFor(typeface.link)}>
+            <TypefaceLibraryItem
+              typeface={typeface}
+              variant="list"
+              isActive={activeIndex === index}
+              onMouseEnter={() => setActiveIndex(index)}
+            />
+          </LinkEl>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <section className="w-full py-16">
+      <div className="max-w-[1400px] mx-auto">
+        <ContentFilters
+          items={typefaces}
+          title="All Typefaces (With Variable Preview)"
+          totalCount={totalCount}
+          filterGroups={filterGroups}
+          renderItem={(items, mode) => renderItems(items, mode)}
+          viewModeOptions={viewModeOptions}
+          defaultViewMode="list"
+          onFilterChange={handleFilterChange}
+          mutuallyExclusiveFilters={['name']}
+          customFilterKeys={['axis']}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default TypefaceLibraryGridWithVariables

package/src/TypefaceLibraryItem.jsx

@@ -0,0 +1,190 @@
+import { useState, useRef, useLayoutEffect } from 'react'
+
+/**
+ * TypefaceLibraryItem — a single typeface entry in the library, in either card
+ * or list layout. Card: vertical layout with a large "Ðð" preview that swaps to
+ * a pangram on hover. List: horizontal layout with a width-clipped alphabet
+ * preview (binary-search clipping via ResizeObserver, mirroring DisplaySpecimen).
+ *
+ * Meant to be wrapped by the parent for navigation (see TypefaceLibraryGrid*).
+ *
+ * @param {Object} props
+ * @param {Object} props.typeface - Typeface data ({ name, styles, classification, year, ... }).
+ * @param {'card'|'list'} props.variant - Display variant (default 'card').
+ * @param {boolean} props.isActive - Whether this item is the last-hovered/active one.
+ * @param {Function} props.onMouseEnter - Callback fired on mouse enter.
+ */
+const TypefaceLibraryItem = ({ typeface, variant = 'card', isActive = false, onMouseEnter }) => {
+  const containerRef = useRef(null)
+  const textRef = useRef(null)
+  const [visibleText, setVisibleText] = useState('Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz')
+  // Map typeface name to font family
+  const fontFamily = typeface.name === 'TG Rót' ? 'TGRoot' :
+                     typeface.name === 'TG Tröllatunga' ? 'TGTrollatunga' :
+                     typeface.name === 'TG Dylgjur' ? 'TGDylgjur' :
+                     typeface.name === 'TG Gullhamrar' ? 'TGGullhamrar' :
+                     'TGMalromur'
+
+  const fontStyle = typeface.name === 'TG Málrómur' ? 'italic' : 'normal'
+
+  const fullAlphabet = 'Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz'
+
+  // TEXT CLIPPING LOGIC - similar to DisplaySpecimen but for horizontal width
+  useLayoutEffect(() => {
+    if (variant !== 'list') return
+
+    const container = containerRef.current
+    const textElement = textRef.current
+    if (!container || !textElement) return
+
+    const calculateClipping = () => {
+      if (container.clientWidth === 0) return
+      const availableWidth = container.clientWidth - 40
+      const chars = fullAlphabet.split('')
+      let clippedText = ''
+      let low = 0
+      let high = chars.length
+
+      while (low <= high) {
+        const mid = Math.floor((low + high) / 2)
+        const testText = chars.slice(0, mid).join('')
+        textElement.textContent = testText
+        if (textElement.scrollWidth <= availableWidth) {
+          clippedText = testText
+          low = mid + 1
+        } else {
+          high = mid - 1
+        }
+      }
+
+      setVisibleText(clippedText)
+    }
+
+    // Use ResizeObserver so it fires when container actually has dimensions
+    const ro = new ResizeObserver(calculateClipping)
+    ro.observe(container)
+
+    window.addEventListener('resize', calculateClipping)
+
+    return () => {
+      ro.disconnect()
+      window.removeEventListener('resize', calculateClipping)
+    }
+  }, [variant, fontFamily, fontStyle])
+
+  // Card variant
+  if (variant === 'card') {
+    return (
+      <div
+        className={`group bg-surface-primary hover:bg-surface-inverse rounded transition-all duration-300 h-[500px] relative border border-fg-08 cursor-pointer ${
+          isActive ? 'bg-surface-inverse' : ''
+        }`}
+        onMouseEnter={onMouseEnter}
+      >
+          {/* Details at Top */}
+          <div className={`p-6 space-y-2 group-hover:opacity-0 transition-opacity duration-300 relative z-10 ${isActive ? 'opacity-0' : ''}`}>
+            <div className="flex items-center gap-2 mb-1 flex-wrap">
+              <h3 className={`kol-helper-lg group-hover:text-auto-inverse transition-colors ${isActive ? 'text-auto-inverse' : 'text-auto'}`}>
+                {typeface.name}
+              </h3>
+            </div>
+            <p className={`kol-helper-s group-hover:text-fg-inverse-64 transition-colors ${isActive ? 'text-fg-inverse-64' : 'text-fg-64'}`}>
+              {typeface.styles}
+            </p>
+          </div>
+
+          {/* Preview Area */}
+          <div className="absolute bottom-0 left-0 right-0 top-0 flex items-end justify-start p-8">
+            {/* Default: Ðð */}
+            <div
+              className={`text-[140px] lg:text-[160px] leading-none group-hover:text-auto-inverse group-hover:opacity-0 transition-all duration-300 relative z-10 ${
+                isActive ? 'text-auto-inverse opacity-0' : 'text-auto'
+              }`}
+              style={{
+                fontFamily,
+                fontStyle,
+                fontWeight: 400
+              }}
+            >
+              Ðð
+            </div>
+          </div>
+
+          {/* Hover: Sentence - Covers entire card */}
+          <div className={`absolute inset-0 flex items-center justify-center p-8 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none ${
+            isActive ? 'opacity-100' : 'opacity-0'
+          }`}>
+            <p
+              className="text-auto-inverse text-4xl lg:text-5xl leading-tight text-center"
+              style={{
+                fontFamily,
+                fontStyle,
+                fontWeight: 400
+              }}
+            >
+              The quick brown fox jumps over the lazy dog
+            </p>
+          </div>
+        </div>
+    )
+  }
+
+  // List variant - compact horizontal style matching TypefaceVariablePreview
+  return (
+    <div
+      ref={containerRef}
+      className={`self-stretch min-h-40 p-6 rounded flex flex-col justify-start items-start gap-6 mb-6 overflow-hidden cursor-pointer transition-all duration-300 ${
+        isActive
+          ? 'bg-[color-mix(in_srgb,var(--kol-surface-on-primary)_1%,transparent)] border border-[color-mix(in_srgb,var(--kol-surface-on-primary)_24%,transparent)]'
+          : 'bg-transparent border border-fg-08 hover:bg-[color-mix(in_srgb,var(--kol-surface-on-primary)_1%,transparent)] hover:border-[color-mix(in_srgb,var(--kol-surface-on-primary)_24%,transparent)]'
+      }`}
+      onMouseEnter={onMouseEnter}
+    >
+      {/* Header Row */}
+      <div className="self-stretch flex justify-between items-center">
+        {/* Left: Typeface Name & Info */}
+        <div className="w-64 flex justify-start items-start gap-6">
+          <div className="flex-1 flex flex-col justify-start items-start gap-3">
+            <div className="self-stretch flex flex-col justify-start items-start gap-2">
+              <div className="self-stretch kol-mono-sm uppercase">
+                {typeface.name}
+              </div>
+              <div className="self-stretch kol-mono-xs text-fg-64">
+                {typeface.styles}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right: Status/Year info */}
+        <div className="flex flex-col items-end gap-2">
+          <span className="kol-mono-sm">
+            {typeface.classification}
+          </span>
+          <span className="kol-mono-xs text-fg-64">
+            {typeface.year}
+          </span>
+        </div>
+      </div>
+
+      {/* Preview Text Row */}
+      <div className="self-stretch rounded flex justify-start items-center">
+        <div
+          ref={textRef}
+          className="flex-1 self-stretch justify-start text-auto font-black leading-[52px] whitespace-nowrap"
+          style={{
+            fontFamily,
+            fontStyle,
+            fontWeight: 400,
+            fontSize: '48px',
+            letterSpacing: '0'
+          }}
+        >
+          {visibleText}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TypefaceLibraryItem

package/src/TypefaceSpecimenPage.jsx

@@ -0,0 +1,223 @@
+import { Button } from '@kolkrabbi/kol-component'
+
+import TypefaceStyleSection from './TypefaceStyleSection.jsx'
+import FontPreviewSection from './FontPreviewSection.jsx'
+import VariableFontSection from './VariableFontSection.jsx'
+import GlyphMetricsSection from './GlyphMetricsSection.jsx'
+
+/**
+ * TypefaceSpecimenPage — the full data-driven typeface specimen composition:
+ * hero → styles → preview → variable axes → glyph metrics, interleaved with
+ * editorial photos. Drives every section generically from one `typeface` config
+ * object (see the bundled `typefaceConfig` / `getTypefaceConfig`).
+ *
+ * SEVERED from the monorepo route (`TypefacePage`), which is why this is a pure
+ * composition, not a route:
+ * - No router: navigation is an injected `linkComponent` prop (receives `to`),
+ *   defaulting to a plain `<a href>`.
+ * - No app theme control: the route's `applyTheme`/`getInitialTheme` effect and
+ *   `toggleTheme` were dropped — theme is the consuming app's concern.
+ * - No app-shell hero: the route's `FullBleedHero` (consumer chrome) is now an
+ *   injectable `HeroComponent` prop. A minimal built-in `DefaultHero` renders the
+ *   background photo when none is injected; pass the real hero to restore it.
+ * - No SEO / data-fetch wrapper: data arrives via the `typeface` prop.
+ *
+ * Text casing: displayName, category, description and labels render verbatim.
+ *
+ * @param {Object} props
+ * @param {Object} props.typeface - Typeface config object (see typefaceConfig).
+ * @param {string} props.titleClassName - Optional hero title className (kept for API parity).
+ * @param {React.ElementType} props.linkComponent - Optional link wrapper (receives `to`); defaults to `<a href>`.
+ * @param {React.ElementType} props.HeroComponent - Optional hero slot; defaults to a minimal built-in hero.
+ */
+
+/** Minimal built-in hero used when no HeroComponent is injected — background
+ *  photo with the specimen intro overlaid. Ignores FullBleedHero-only props. */
+const DefaultHero = ({ image, srcSet, alt, children }) => (
+  <div className="relative w-full min-h-[70vh] flex items-center justify-center overflow-hidden rounded-[2px] bg-surface-secondary">
+    {image && (
+      <img
+        src={image}
+        srcSet={srcSet || undefined}
+        alt={alt}
+        className="absolute inset-0 w-full h-full object-cover"
+        loading="eager"
+      />
+    )}
+    <div className="relative z-10">{children}</div>
+  </div>
+)
+
+const TypefaceSpecimenPage = ({
+  typeface,
+  titleClassName = 'text-8xl',
+  linkComponent,
+  HeroComponent,
+}) => {
+  const LinkEl = linkComponent || 'a'
+  const linkPropsFor = (dest) => (linkComponent ? { to: dest } : { href: dest })
+  const Hero = HeroComponent || DefaultHero
+
+  const {
+    displayName,
+    fontFamily,
+    fontUrl,
+    fontUrlRoman,
+    fontUrlItalic,
+    fontStyle,
+    badgeText,
+    category,
+    description,
+    styles,
+    photos = []
+  } = typeface
+
+  // Determine if variable font sections should be shown
+  const showVariableSection = styles.hasWeight || styles.hasWidth
+
+  // Get photo at index (all typefaces have CDN photos configured)
+  const getPhoto = (index) => photos[index]
+
+  // Generate srcSet from a photo URL by replacing the size
+  // Pattern: {path}-{size}.jpg → {path}-400.jpg 400w, {path}-800.jpg 800w, etc.
+  // Capped at 1600 as not all images have 2560 available
+  const getSrcSet = (photoUrl) => {
+    if (!photoUrl || !photoUrl.includes('-1200.jpg')) return null
+    const basePath = photoUrl.replace('-1200.jpg', '')
+    return `${basePath}-400.jpg 400w, ${basePath}-800.jpg 800w, ${basePath}-1200.jpg 1200w, ${basePath}-1600.jpg 1600w`
+  }
+
+  return (
+    <div className="min-h-screen mb-16 bg-surface-primary">
+      <main className="w-full">
+        {/* Hero (injectable slot) */}
+        <div className="mt-14 md:mt-16">
+          <Hero
+            image={getPhoto(0)}
+            srcSet={getSrcSet(photos[0])}
+            alt={`${displayName} showcase`}
+            imageOpacity={100}
+          >
+            <div className="flex flex-col items-center text-center gap-4 md:gap-6 px-4 md:px-6 py-6 md:py-8 rounded-[2px]" style={{ backgroundColor: 'color-mix(in srgb, var(--kol-surface-primary) 80%, transparent)', backdropFilter: 'blur(1px)' }}>
+              <span
+                className={`${(displayName === 'Málrómur' || displayName === 'Tröllatunga') ? 'text-[48px] sm:text-[64px] md:text-[88px] lg:text-[120px]' : 'text-[56px] sm:text-[80px] md:text-[110px] lg:text-[144px]'} block text-auto leading-none ${fontStyle === 'italic' ? 'italic' : ''}`.trim()}
+                style={{ fontFamily, fontStyle: fontStyle || 'normal', fontWeight: 400 }}
+              >
+                {displayName}
+              </span>
+              <span className="kol-mono-xs text-fg-64">{category}</span>
+              <p className="kol-mono-xs text-auto max-w-[480px] md:max-w-[600px]">{description}</p>
+              <LinkEl {...linkPropsFor('/foundry/licensing')}>
+                <Button variant="primary" size="sm">Download Font</Button>
+              </LinkEl>
+            </div>
+          </Hero>
+        </div>
+
+        <div className="breakpoint-padding">
+          {/* Section 1: Styles */}
+          <TypefaceStyleSection typeface={typeface} />
+
+          {/* Image Section 2 */}
+          <section className="w-full overflow-hidden py-16">
+            <div className="max-w-[1400px] mx-auto aspect-[2/1]">
+              <div className="w-full h-full bg-surface-secondary rounded border border-fg-08">
+                <img
+                  src={getPhoto(1)}
+                  srcSet={getSrcSet(photos[1])}
+                  sizes="(max-width: 1400px) 100vw, 1400px"
+                  alt={`${displayName} showcase`}
+                  className="w-full h-full object-cover rounded-[4px]"
+                  loading="lazy"
+                />
+              </div>
+            </div>
+          </section>
+
+          {/* Section 2: Font Preview */}
+          <FontPreviewSection
+            fontFamily={fontFamily}
+            badgeText={badgeText}
+            showDropdown={styles.hasItalic}
+            availableWeights={(styles.weights || []).map(w => w.label)}
+            initialWeight={(styles.weights || [])[0]?.label || 'Regular'}
+          />
+
+          {/* Image Section 3 */}
+          <section className="w-full overflow-hidden py-16">
+            <div className="max-w-[1400px] mx-auto aspect-[2/1]">
+              <div className="w-full h-full bg-surface-secondary rounded border border-fg-08">
+                <img
+                  src={getPhoto(2)}
+                  srcSet={getSrcSet(photos[2])}
+                  sizes="(max-width: 1400px) 100vw, 1400px"
+                  alt={`${displayName} showcase`}
+                  className="w-full h-full object-cover rounded-[4px]"
+                  loading="lazy"
+                />
+              </div>
+            </div>
+          </section>
+
+          {/* Section 3: Variable Font (only for variable fonts) */}
+          {showVariableSection && (
+            <VariableFontSection
+              fontFamily={fontFamily}
+              badgeText={badgeText}
+              showDropdown={styles.hasItalic}
+            />
+          )}
+
+          {/* Section 4: Glyph Metrics Grid */}
+          <GlyphMetricsSection
+            fontUrlRoman={fontUrlRoman || fontUrl}
+            fontUrlItalic={fontUrlItalic || fontUrl}
+            fontFamily={fontFamily}
+            fontStyle={fontStyle}
+            badgeText={badgeText}
+            showDropdown={styles.hasItalic}
+            hasWeight={styles.hasWeight}
+            hasWidth={styles.hasWidth}
+            weights={styles.weights || []}
+            widths={styles.widths || []}
+          />
+
+          {/* Image Section 4 */}
+          <section className="w-full mt-12 py-16 overflow-hidden">
+            <div className="max-w-[1400px] mx-auto aspect-[2/1]">
+              <div className="w-full h-full bg-surface-secondary rounded border border-fg-08">
+                <img
+                  src={getPhoto(3)}
+                  srcSet={getSrcSet(photos[3])}
+                  sizes="(max-width: 1400px) 100vw, 1400px"
+                  alt={`${displayName} showcase`}
+                  className="w-full h-full object-cover rounded-[4px]"
+                  loading="lazy"
+                />
+              </div>
+            </div>
+          </section>
+
+          {/* Image Section 5 */}
+          <section className="w-full py-16 overflow-hidden">
+            <div className="max-w-[1400px] mx-auto aspect-[2/1]">
+              <div className="w-full h-full bg-surface-secondary rounded border border-fg-08">
+                <img
+                  src={getPhoto(4)}
+                  srcSet={getSrcSet(photos[4])}
+                  sizes="(max-width: 1400px) 100vw, 1400px"
+                  alt={`${displayName} showcase`}
+                  className="w-full h-full object-cover rounded-[4px]"
+                  loading="lazy"
+                />
+              </div>
+            </div>
+          </section>
+
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default TypefaceSpecimenPage

package/src/TypefaceVariablePreview.jsx

@@ -0,0 +1,160 @@
+import { useState } from 'react'
+import { Slider } from '@kolkrabbi/kol-component'
+
+/**
+ * TypefaceVariablePreview — interactive preview for a single typeface weight.
+ * List view: editable specimen text with Size / Leading / Spacing sliders. Card
+ * view: static metrics readout. Used in the "By Typeface" library filter to
+ * compare weights side by side.
+ *
+ * @param {Object} props
+ * @param {Object} props.typeface - Typeface data ({ name, styles, classification, status, year }).
+ * @param {string} props.weight - Weight label (e.g. 'Medium', 'Bold').
+ * @param {number} props.weightValue - Numeric weight value (200–900).
+ * @param {'list'|'card'} props.variant - Display variant (default 'list').
+ */
+const TypefaceVariablePreview = ({
+  typeface,
+  weight = 'Medium',
+  weightValue = 400,
+  variant = 'list'
+}) => {
+  // Font family mapping
+  const fontFamilyMap = {
+    'TG Málrómur': 'TGMalromur',
+    'TG Rót': 'TGRoot',
+    'TG Gullhamrar': 'TGGullhamrar',
+    'TG Tröllatunga': 'TGTrollatunga',
+    'TG Dylgjur': 'TGDylgjur'
+  }
+
+  const fontFamily = fontFamilyMap[typeface.name] || 'TGMalromur'
+  const isItalic = typeface.name === 'TG Málrómur' || typeface.name === 'TG Dylgjur'
+
+  // State for interactive controls
+  const [size, setSize] = useState(64)
+  const [leading, setLeading] = useState(10) // 0-50 range (maps to 90-140%)
+  const [spacing, setSpacing] = useState(0)
+  const [previewText, setPreviewText] = useState('Rennimjúkt eðal flauel, duft slæðist, silkislaufa')
+
+  // Card View - Static information display
+  if (variant === 'card') {
+    return (
+      <div className="bg-surface-primary border border-fg-08 rounded-sm p-6 h-full">
+        <div className="space-y-4">
+          {/* Header */}
+          <div>
+            <h3 className="kol-heading-sm mb-1">{typeface.name} — {weight}</h3>
+            <p className="kol-mono-xs text-fg-64">{typeface.styles}</p>
+          </div>
+
+          {/* Metrics Grid */}
+          <div className="grid grid-cols-2 gap-3 pt-4">
+            <div>
+              <span className="kol-mono-xs text-fg-64">Classification</span>
+              <p className="kol-mono-sm text-auto">{typeface.classification}</p>
+            </div>
+            <div>
+              <span className="kol-mono-xs text-fg-64">Weight</span>
+              <p className="kol-mono-sm text-auto">{weight} ({weightValue})</p>
+            </div>
+            <div>
+              <span className="kol-mono-xs text-fg-64">Status</span>
+              <p className="kol-mono-sm text-auto">{typeface.status}</p>
+            </div>
+            <div>
+              <span className="kol-mono-xs text-fg-64">Year</span>
+              <p className="kol-mono-sm text-auto">{typeface.year}</p>
+            </div>
+          </div>
+
+          {/* Typography Metrics - Placeholder for future implementation */}
+          <div className="pt-4 border-t border-fg-08">
+            <h4 className="kol-mono-xs text-fg-64 mb-2">Typography Metrics</h4>
+            <div className="grid grid-cols-2 gap-2 kol-mono-xs text-fg-64">
+              <div>Baseline: —</div>
+              <div>x-height: —</div>
+              <div>Cap height: —</div>
+              <div>Ascender: —</div>
+              <div>Descender: —</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // List View - Interactive preview with controls
+  return (
+    <div className="self-stretch min-h-40 p-6 rounded border border-fg-16 flex flex-col justify-start items-start gap-6 overflow-hidden bg-surface-primary">
+      {/* Header Row with Controls */}
+      <div className="self-stretch flex justify-between items-center">
+        {/* Left: Typeface Name & Info */}
+        <div className="w-64 flex justify-start items-start gap-6">
+          <div className="flex-1 flex flex-col justify-start items-start gap-3">
+            <div className="self-stretch flex flex-col justify-start items-start gap-2">
+              <div className="self-stretch kol-mono-sm uppercase">
+                {typeface.name} — {weight}
+              </div>
+              <div className="self-stretch kol-mono-xs text-fg-64">
+                {typeface.styles}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right: Three Sliders Horizontal */}
+        <div className="w-[960px] flex justify-start items-start gap-8">
+          <Slider
+            label="Size"
+            min={12}
+            max={200}
+            value={size}
+            onChange={setSize}
+            variant="minimal"
+            className="flex-1"
+          />
+          <Slider
+            label="Leading"
+            min={0}
+            max={50}
+            value={leading}
+            onChange={setLeading}
+            variant="minimal"
+            className="flex-1"
+            formatValue={(val) => 90 + val}
+          />
+          <Slider
+            label="Spacing"
+            min={-50}
+            max={50}
+            value={spacing}
+            onChange={setSpacing}
+            variant="minimal"
+            className="flex-1"
+          />
+        </div>
+      </div>
+
+      {/* Preview Text Row */}
+      <div className="self-stretch rounded flex justify-start items-center">
+        <input
+          type="text"
+          value={previewText}
+          onChange={(e) => setPreviewText(e.target.value)}
+          className="flex-1 self-stretch justify-start bg-transparent text-auto font-black leading-[52px] outline-none border-none placeholder:text-auto"
+          style={{
+            fontFamily: fontFamily,
+            fontStyle: isItalic ? 'italic' : 'normal',
+            fontWeight: weightValue,
+            fontSize: `${size}px`,
+            lineHeight: `${90 + leading}%`,
+            letterSpacing: `${spacing}px`
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default TypefaceVariablePreview

package/src/index.js

@@ -1,21 +1,30 @@
 /**
- * @kol/component foundry sub-barrel — the type-specimen layer (the DS answer to
- * the monorepo's `@kol/ui/foundry`). Exposed as the `./foundry` package subpath
- * so the showcase specimen set can import these without touching the root
- * src/index.js barrel. The root barrel export lines are documented in the p9
- * wiring notes for a central merge.
+ * @kolkrabbi/kol-foundry — the type-specimen apparatus. Every export renders,
+ * inspects, or manipulates a live font (see COMPONENTS.md for the membership
+ * test). Data is consumer-injected; shared primitives stay in @kolkrabbi/kol-component.
  */
 
-// molecule (shared section header)
+// section scaffold
 export { default as SpecimenSectionHeader } from './SpecimenSectionHeader.jsx'
 
-// organisms (specimen sections)
+// specimen tools — one typeface, inspected
 export { default as TypefaceHero } from './TypefaceHero.jsx'
-export { default as VariableFontSection } from './VariableFontSection.jsx'
-export { default as GlyphMetricsGrid } from './GlyphMetricsGrid.jsx'
 export { default as TypefaceStyleSection } from './TypefaceStyleSection.jsx'
 export { default as FontPreviewSection } from './FontPreviewSection.jsx'
+export { default as VariableFontSection } from './VariableFontSection.jsx'
+export { default as GlyphMetricsGrid } from './GlyphMetricsGrid.jsx'
+export { default as GlyphMetricsSection } from './GlyphMetricsSection.jsx'
 export { default as FoundryCharacterSets } from './FoundryCharacterSets.jsx'
 
+// catalog — the specimen collection
+export { default as TypefaceLibraryGrid } from './TypefaceLibraryGrid.jsx'
+export { default as TypefaceLibraryGridWithVariables } from './TypefaceLibraryGridWithVariables.jsx'
+export { default as TypefaceLibraryItem } from './TypefaceLibraryItem.jsx'
+export { default as TypefaceVariablePreview } from './TypefaceVariablePreview.jsx'
+
+// reference composition (severed page — data via props, no router/SEO/data-fetch)
+export { default as TypefaceSpecimenPage } from './TypefaceSpecimenPage.jsx'
+
 // data
 export { glyphSets, glyphCategories, SPECIMEN_SAMPLE_TEXT } from './glyphData.js'
+export { typefaceConfig, getTypefaceConfig, getAllTypefaceIds, getAllTypefaces } from './typefaceConfig.js'

package/src/typefaceConfig.js

@@ -0,0 +1,227 @@
+/**
+ * Typeface Configuration — bundled default fixture for the foundry specimen
+ * layer. Ported verbatim from the monorepo `apps/web` foundry data so the DS
+ * package carries a ready-to-render default set (Málrómur, Rót, Dylgjur,
+ * Gullhamrar, Tröllatunga). Consumers can ignore this and inject their own
+ * typeface objects via props — nothing here is load-bearing beyond a default.
+ *
+ * Font URLs are relative (`/fonts/…`); a consumer serves the actual files.
+ */
+
+const cdnBase = 'https://f005.backblazeb2.com/file/kolkrabbi/website/asset-library/foundry'
+
+export const typefaceConfig = {
+  malromur: {
+    id: 'malromur',
+    name: 'Málrómur',
+    displayName: 'Málrómur',
+    fontFamily: 'TGMalromur',
+    fontUrl: '/fonts/TGMalromurItalicVF.ttf',
+    fontUrlRoman: '/fonts/TGMalromurRomanVF.ttf',
+    fontUrlItalic: '/fonts/TGMalromurItalicVF.ttf',
+    fontStyle: 'italic',
+    category: 'Variable Font',
+    description: 'A contemporary italic variable font for editorial design',
+    badgeText: 'Málrómur',
+    specimenLink: '/foundry/specimen/malromur',
+
+    photos: [
+      `${cdnBase}/foundry-typefaces/01-malromur/typefaces-malromur/01-typefaces-hero/typefaces-hero-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/01-malromur/typefaces-malromur/02-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/01-malromur/typefaces-malromur/03-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/01-malromur/typefaces-malromur/04-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/01-malromur/typefaces-malromur/05-typefaces-image/typefaces-image-1200.jpg`
+    ],
+
+    // Style section config
+    styles: {
+      hasWeight: true,
+      hasWidth: false,
+      hasItalic: true,
+      defaultStyle: 'italic',
+      weights: [
+        { label: 'Thin', weight: 100 },
+        { label: 'Extralight', weight: 200 },
+        { label: 'Light', weight: 300 },
+        { label: 'Regular', weight: 400 },
+        { label: 'Medium', weight: 500 },
+        { label: 'Semibold', weight: 600 },
+        { label: 'Bold', weight: 700 },
+        { label: 'Extrabold', weight: 800 }
+      ]
+    }
+  },
+
+  rot: {
+    id: 'rot',
+    name: 'Rót',
+    displayName: 'Rót',
+    fontFamily: 'TGRoot',
+    fontUrl: '/fonts/TGRotVF.ttf',
+    fontStyle: 'normal',
+    category: 'Variable Font',
+    description: 'A precise geometric sans serif with variable weight and width axes',
+    badgeText: 'Rót Aa',
+    specimenLink: '/foundry/specimen/rot',
+
+    photos: [
+      `${cdnBase}/foundry-typefaces/02-raetur/typefaces-raetur/01-typefaces-hero/typefaces-hero-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/02-raetur/typefaces-raetur/02-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/02-raetur/typefaces-raetur/03-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/02-raetur/typefaces-raetur/04-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/02-raetur/typefaces-raetur/05-typefaces-image/typefaces-image-1200.jpg`
+    ],
+
+    styles: {
+      hasWeight: true,
+      hasWidth: true,
+      hasItalic: false,
+      defaultStyle: 'weight',
+      weights: [
+        { label: 'Thin', weight: 100 },
+        { label: 'Extralight', weight: 200 },
+        { label: 'Light', weight: 300 },
+        { label: 'Regular', weight: 400 },
+        { label: 'Medium', weight: 500 },
+        { label: 'Semibold', weight: 600 },
+        { label: 'Bold', weight: 700 },
+        { label: 'Extrabold', weight: 800 },
+        { label: 'Black', weight: 900 }
+      ],
+      widths: [
+        { label: 'Narrow', width: 100 },
+        { label: 'Semi-Narrow', width: 175 },
+        { label: 'Normal', width: 250 },
+        { label: 'Semi-Extended', width: 325 },
+        { label: 'Extended', width: 400 }
+      ]
+    }
+  },
+
+  dylgjur: {
+    id: 'dylgjur',
+    name: 'Dylgjur',
+    displayName: 'Dylgjur',
+    fontFamily: 'TGDylgjur',
+    fontUrl: '/fonts/TGDylgjur-Regular.otf',
+    fontStyle: 'normal',
+    category: 'Display Font',
+    description: 'Sharp angles and pointed character for critical discourse',
+    badgeText: 'Dylgjur Aa',
+    specimenLink: '/foundry/specimen/dylgjur',
+
+    photos: [
+      `${cdnBase}/foundry-typefaces/03-dylgjur/typefaces-dylgjur/01-typefaces-hero/typefaces-hero-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/03-dylgjur/typefaces-dylgjur/02-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/03-dylgjur/typefaces-dylgjur/03-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/03-dylgjur/typefaces-dylgjur/04-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/03-dylgjur/typefaces-dylgjur/05-typefaces-image/typefaces-image-1200.jpg`
+    ],
+
+    styles: {
+      hasWeight: false,
+      hasWidth: false,
+      hasItalic: false,
+      weights: [
+        { label: 'Regular', weight: 400 }
+      ]
+    }
+  },
+
+  gullhamrar: {
+    id: 'gullhamrar',
+    name: 'Gullhamrar',
+    displayName: 'Gullhamrar',
+    fontFamily: 'TGGullhamrar',
+    fontUrl: '/fonts/TGGullhamrarVF.ttf',
+    fontStyle: 'normal',
+    category: 'Variable Font',
+    description: 'Variable weight typeface with warm, graceful forms',
+    badgeText: 'Gullhamrar Aa',
+    specimenLink: '/foundry/specimen/gullhamrar',
+
+    photos: [
+      `${cdnBase}/foundry-typefaces/04-gullhamrar/typefaces-gullhamrar/01-typefaces-hero/typefaces-hero-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/04-gullhamrar/typefaces-gullhamrar/02-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/04-gullhamrar/typefaces-gullhamrar/03-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/04-gullhamrar/typefaces-gullhamrar/04-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/04-gullhamrar/typefaces-gullhamrar/05-typefaces-image/typefaces-image-1200.jpg`
+    ],
+
+    styles: {
+      hasWeight: true,
+      hasWidth: false,
+      hasItalic: false,
+      weights: [
+        { label: 'Thin', weight: 100 },
+        { label: 'Extralight', weight: 200 },
+        { label: 'Light', weight: 300 },
+        { label: 'Regular', weight: 400 },
+        { label: 'Medium', weight: 500 },
+        { label: 'Semibold', weight: 600 },
+        { label: 'Bold', weight: 700 },
+        { label: 'Extrabold', weight: 800 }
+      ]
+    }
+  },
+
+  trollatunga: {
+    id: 'trollatunga',
+    name: 'Tröllatunga',
+    displayName: 'Tröllatunga',
+    fontFamily: 'TGTrollatunga',
+    fontUrl: '/fonts/TGTrollatunga-Regular.otf',
+    fontStyle: 'normal',
+    category: 'Display Font',
+    description: 'Bold expressive display font for impactful messaging',
+    badgeText: 'Tröllatunga Aa',
+    specimenLink: '/foundry/specimen/trollatunga',
+
+    photos: [
+      `${cdnBase}/foundry-typefaces/05-trollatunga/typefaces-trollatunga/01-typefaces-hero/typefaces-hero-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/05-trollatunga/typefaces-trollatunga/02-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/05-trollatunga/typefaces-trollatunga/03-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/05-trollatunga/typefaces-trollatunga/04-typefaces-image/typefaces-image-1200.jpg`,
+      `${cdnBase}/foundry-typefaces/05-trollatunga/typefaces-trollatunga/05-typefaces-image/typefaces-image-1200.jpg`
+    ],
+
+    styles: {
+      hasWeight: false,
+      hasWidth: false,
+      hasItalic: false,
+      weights: [
+        { label: 'Regular', weight: 400 }
+      ]
+    }
+  }
+}
+
+/**
+ * Helper to get typeface config by ID
+ * @param {string} id - Typeface ID (malromur, rot, dylgjur, etc.)
+ * @returns {object} Typeface configuration object
+ */
+export function getTypefaceConfig(id) {
+  const config = typefaceConfig[id]
+  if (!config) {
+    console.warn(`Typeface config not found for: ${id}`)
+    return typefaceConfig.malromur // fallback
+  }
+  return config
+}
+
+/**
+ * Get all typeface IDs
+ * @returns {string[]} Array of typeface IDs
+ */
+export function getAllTypefaceIds() {
+  return Object.keys(typefaceConfig)
+}
+
+/**
+ * Get all typefaces
+ * @returns {object[]} Array of typeface configuration objects
+ */
+export function getAllTypefaces() {
+  return Object.values(typefaceConfig)
+}