@kolkrabbi/kol-foundry 0.4.2 → 0.5.0

package/src/engine/MetricsOverlay.js

@@ -0,0 +1,169 @@
+// =============================================================================
+// hyperflip/MetricsOverlay.js
+// =============================================================================
+
+export class MetricsOverlay {
+  constructor(overlayElement) {
+    this.overlay = overlayElement;
+    this.isVisible = false;
+    this.overlay.style.display = 'none'; // Ensure it's hidden initially
+  }
+
+  render(font, glyphElement) {
+    if (!this.isVisible || !glyphElement) return;
+
+    this.overlay.innerHTML = '';
+
+    const currentChar = glyphElement.textContent;
+    if (!currentChar) return;
+
+    const metrics = this.calculateMetrics(font, glyphElement, currentChar);
+    this.renderMetricLines(metrics, font);
+    this.renderBearingLines(metrics);
+  }
+
+  calculateMetrics(font, glyphElement, currentChar) {
+    const computedStyle = getComputedStyle(glyphElement);
+    const fontSize = parseInt(computedStyle.fontSize);
+    const unitsPerEm = font.unitsPerEm;
+
+    // Basic metrics scale based on font size
+    const metricsScale = fontSize / unitsPerEm;
+
+    // Get the glyph element's metrics
+    const glyphRect = glyphElement.getBoundingClientRect();
+    const renderedWidth = glyphRect.width;
+    const verticalCenter = glyphRect.top + (glyphRect.height / 2);
+    const horizontalCenter = glyphRect.left + (glyphRect.width / 2);
+
+    // Get glyph info
+    const glyphIndex = font.charToGlyphIndex(currentChar);
+    const glyph = font.glyphs.get(glyphIndex);
+
+    // The total height in font units from descender to ascender
+    const totalHeight = font.tables.os2.sTypoAscender - font.tables.os2.sTypoDescender;
+
+    // Calculate how much of the total height is above the baseline (in font units)
+    const baselineOffset = font.tables.os2.sTypoAscender;
+
+    // Calculate where the baseline should be relative to the center
+    const baselineRatio = baselineOffset / totalHeight;
+
+    // Scale the total height to pixels
+    const totalPixelHeight = (totalHeight / unitsPerEm) * fontSize;
+
+    // Position the baseline
+    const baseline = verticalCenter - (totalPixelHeight / 2) + (baselineRatio * totalPixelHeight);
+
+    return {
+      glyph,
+      fontSize,
+      metricsScale,
+      glyphRect,
+      containerCenter: horizontalCenter,
+      baseline,
+      renderedWidth,
+      ascender: baseline - (font.tables.os2.sTypoAscender * metricsScale),
+      descender: baseline - (font.tables.os2.sTypoDescender * metricsScale),
+      capHeight: baseline - (font.tables.os2.sCapHeight * metricsScale),
+      xHeight: baseline - (font.tables.os2.sxHeight * metricsScale),
+      // Store the original values from the font file
+      originalMetrics: {
+        ascender: font.tables.os2.sTypoAscender,
+        descender: font.tables.os2.sTypoDescender,
+        capHeight: font.tables.os2.sCapHeight,
+        xHeight: font.tables.os2.sxHeight,
+        smallCapHeight: font.tables.os2.sSmallCapHeight
+      }
+    };
+  }
+
+  renderMetricLines(metrics, font) {
+    const lines = [
+      {
+        pos: metrics.baseline,
+        label: 'Baseline',
+        value: 0 // Baseline is reference point 0
+      },
+      {
+        pos: metrics.ascender,
+        label: 'Ascender',
+        value: metrics.originalMetrics.ascender
+      },
+      {
+        pos: metrics.descender,
+        label: 'Descender',
+        value: metrics.originalMetrics.descender
+      },
+      {
+        pos: metrics.capHeight,
+        label: 'Capital height',
+        value: metrics.originalMetrics.capHeight
+      },
+      {
+        pos: metrics.xHeight,
+        label: 'x-height',
+        value: metrics.originalMetrics.xHeight
+      }
+    ];
+
+    if (font.tables.os2.sSmallCapHeight) {
+      lines.push({
+        pos: metrics.baseline - (font.tables.os2.sSmallCapHeight * metrics.metricsScale),
+        label: 'Small Caps',
+        value: metrics.originalMetrics.smallCapHeight
+      });
+    }
+
+    lines.forEach(({ pos, label, value }) => {
+      if (isFinite(pos)) {
+        const line = document.createElement('div');
+        line.className = 'metric-line';
+        line.style.top = `${pos}px`;
+
+        const legend = document.createElement('div');
+        legend.className = 'legend';
+        legend.style.top = `${pos - 21}px`;
+
+        // Create the formatted legend content
+        const labelText = document.createTextNode(`${label} → `);
+        const valueSpan = document.createElement('span');
+        valueSpan.className = 'monospaced';
+        valueSpan.textContent = `${value}`;
+
+        legend.appendChild(labelText);
+        legend.appendChild(valueSpan);
+
+        this.overlay.appendChild(line);
+        this.overlay.appendChild(legend);
+      }
+    });
+  }
+
+  renderBearingLines(metrics) {
+    if (!metrics.glyph) return;
+
+    // Use the rendered width for sidebearings, which takes into account both
+    // font size and any active variation settings
+    const leftPos = metrics.containerCenter - (metrics.renderedWidth / 2);
+    const rightPos = leftPos + metrics.renderedWidth;
+
+    [leftPos, rightPos].forEach(pos => {
+      if (isFinite(pos)) {
+        const line = document.createElement('div');
+        line.className = 'side-bearing-line';
+        line.style.left = `${pos}px`;
+        this.overlay.appendChild(line);
+      }
+    });
+  }
+
+  toggle() {
+    this.isVisible = !this.isVisible;
+    this.overlay.style.display = this.isVisible ? 'block' : 'none';
+    if (!this.isVisible) {
+      this.overlay.innerHTML = '';
+    }
+  }
+
+}

package/src/engine/Types.js

@@ -0,0 +1,22 @@
+// =============================================================================
+// Types.js - Font variation axis definitions
+// =============================================================================
+
+export const AXIS_NAMES = {
+  'wght': 'Weight',
+  'wdth': 'Width',
+  'ital': 'Italic',
+  'slnt': 'Slant',
+  'opsz': 'Optical Size',
+  'GRAD': 'Grade',
+  'YOPQ': 'Thin Stroke',
+  'YTLC': 'Lowercase Height',
+  'YTUC': 'Uppercase Height',
+  'YTAS': 'Ascender Height',
+  'YTDE': 'Descender Depth',
+  'YTFI': 'Figure Height',
+  'XHGT': 'x-Height',
+  'XOPQ': 'Thick Stroke',
+  'XTRA': 'Parametric Tracking',
+  'YTRA': 'Parametric Tracking'
+};

package/src/engine/UIControls.js

@@ -0,0 +1,92 @@
+// =============================================================================
+// shared/UIControls.js
+// =============================================================================
+
+export class UIControls {
+  constructor(options = {}) {
+    this.isDarkMode = false;
+    this.isFullscreen = false;
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    // Fullscreen change events for different browsers
+    document.addEventListener('fullscreenchange', this.handleFullscreenChange.bind(this));
+    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange.bind(this));
+    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange.bind(this));
+    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange.bind(this));
+  }
+
+  toggleFullscreen() {
+    if (this.isFullscreen) {
+      this.exitFullscreen();
+    } else {
+      this.enterFullscreen();
+    }
+  }
+
+  enterFullscreen() {
+    const elem = document.documentElement;
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.webkitRequestFullscreen) {
+      elem.webkitRequestFullscreen();
+    } else if (elem.msRequestFullscreen) {
+      elem.msRequestFullscreen();
+    }
+  }
+
+  exitFullscreen() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    }
+  }
+
+  handleFullscreenChange() {
+    this.isFullscreen = Boolean(
+      document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+    );
+
+    // Update button text if needed
+    const fullscreenButton = document.querySelector('#fullScreen button');
+    if (fullscreenButton) {
+      fullscreenButton.textContent = this.isFullscreen ? 'Windowed' : 'Fullscreen';
+    }
+  }
+
+  toggleColorScheme() {
+    this.isDarkMode = !this.isDarkMode;
+    const wrapper = document.querySelector('.font-viewer-wrapper');
+
+    if (wrapper) {
+      if (this.isDarkMode) {
+        wrapper.style.setProperty('--fv-white', 'rgb(0, 0, 0)');
+        wrapper.style.setProperty('--fv-black', 'rgb(255, 255, 255)');
+        wrapper.style.setProperty('--fv-metrics-color', 'rgba(255, 255, 255, 0.4)');
+        wrapper.style.setProperty('--fv-border-color', 'rgba(255, 255, 255, 0.9)');
+        wrapper.style.setProperty('--fv-surface', 'rgba(0, 0, 0, 0.82)');
+        wrapper.style.setProperty('--fv-panel-bg', 'rgba(8, 8, 8, 0.9)');
+        wrapper.style.setProperty('--fv-panel-border', 'rgba(255, 255, 255, 0.9)');
+        wrapper.style.setProperty('--fv-panel-shadow', '0 10px 24px rgba(0, 0, 0, 0.6)');
+        wrapper.dataset.colorScheme = 'dark'
+      } else {
+        wrapper.style.setProperty('--fv-white', 'rgb(255, 255, 255)');
+        wrapper.style.setProperty('--fv-black', 'rgb(0, 0, 0)');
+        wrapper.style.setProperty('--fv-metrics-color', 'rgba(0, 0, 0, 0.4)');
+        wrapper.style.setProperty('--fv-border-color', 'var(--fv-black)');
+        wrapper.style.setProperty('--fv-surface', 'rgba(255, 255, 255, 0.92)');
+        wrapper.style.setProperty('--fv-panel-bg', 'rgba(255, 255, 255, 0.96)');
+        wrapper.style.setProperty('--fv-panel-border', 'var(--fv-black)');
+        wrapper.style.setProperty('--fv-panel-shadow', '0 10px 24px rgba(0, 0, 0, 0.18)');
+        wrapper.dataset.colorScheme = 'light'
+      }
+    }
+  }
+}

package/src/engine/VariationAxes.js

@@ -0,0 +1,71 @@
+// =============================================================================
+// hyperflip/VariationAxes.js
+// =============================================================================
+
+export class VariationAxes {
+  constructor(options) {
+    this.container = options.container
+    this.onChange = options.onChange
+    this.currentSettings = {}
+  }
+
+  createAxesControls(axes) {
+    if (!this.container) {
+      return
+    }
+
+    this.container.innerHTML = ''
+    this.currentSettings = {}
+
+    axes.forEach(axis => {
+      const sliderGroup = document.createElement('div')
+      sliderGroup.className = 'font-viewer-slider-group'
+
+      const label = document.createElement('label')
+      const sliderId = `font-axis-${axis.tag}`
+      label.htmlFor = sliderId
+      label.textContent = `${axis.name} (${axis.tag})`
+
+      const slider = document.createElement('input')
+      slider.type = 'range'
+      slider.id = sliderId
+      slider.dataset.tag = axis.tag
+      slider.min = axis.min
+      slider.max = axis.max
+      slider.value = axis.default
+      slider.step = 0.1
+
+      const valueSpan = document.createElement('span')
+      valueSpan.textContent = parseFloat(axis.default).toFixed(1)
+
+      slider.addEventListener('input', (e) => {
+        this.updateAxisValue(axis.tag, e.target.value)
+        valueSpan.textContent = parseFloat(e.target.value).toFixed(1)
+      })
+
+      sliderGroup.appendChild(label)
+      sliderGroup.appendChild(slider)
+      sliderGroup.appendChild(valueSpan)
+
+      this.container.appendChild(sliderGroup)
+    })
+  }
+
+  updateAxisValue(tag, value) {
+    const numValue = parseFloat(value)
+    if (isNaN(numValue)) {
+      delete this.currentSettings[tag]
+    } else {
+      this.currentSettings[tag] = numValue
+    }
+    this.updateVariationSettings()
+  }
+
+  updateVariationSettings() {
+    const settings = Object.entries(this.currentSettings)
+      .filter(([_, val]) => !isNaN(val))
+      .map(([tag, val]) => `"${tag}" ${val.toFixed(1)}`)
+      .join(', ')
+    this.onChange?.(settings || 'normal')
+  }
+}

package/src/index.js

@@ -40,3 +40,21 @@ 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'
+
+// fontviewer engine (lobbied from elder @kol/fontviewer 2026-07-16) — the
+// variable-font viewer instrument: canvas glyph stage + parsed-metrics overlay
+// + axis controls. Plain-JS utils are React-free; opentype.js is the optional
+// peer. Chrome CSS lives in kol-theme/kol-components-foundry.css. Font files
+// are consumer-served (never bundled) — pass fontUrl/defaultFontUrl props.
+export { default as FontViewerComponent } from './engine/FontViewerComponent.jsx'
+export { default as FontViewerSection } from './engine/FontViewerSection.jsx'
+export * from './engine/FontLoader.js'
+export * from './engine/FontInfo.js'
+export * from './engine/GlyphAnimator.js'
+export * from './engine/MetricsOverlay.js'
+export * from './engine/Types.js'
+export * from './engine/UIControls.js'
+export * from './engine/VariationAxes.js'
+
+// glyph atom (lobbied from elder @kol/ui 2026-07-16) — renders one live glyph
+export { default as GlyphItem } from './GlyphItem.jsx'