@kolkrabbi/kol-foundry 0.1.0 → 0.3.0

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,38 @@
 /**
- * @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'
+
+// type-specimen kit — prop-driven specimen blocks (moved from @kolkrabbi/kol-component 2026-07-09)
+export { default as TypeSample } from './TypeSample.jsx'
+export { default as TypeSpecCard } from './TypeSpecCard.jsx'
+
+// live-font effects — variable-font axes, animated
+export { default as TextPressure } from './TextPressure.jsx'
+export { default as ColorLoader } from './ColorLoader.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)
+}