@kolkrabbi/kol-foundry 0.1.0 → 0.3.0

package/src/TypeSample.jsx

@@ -0,0 +1,50 @@
+/**
+ * TypeSample — a single labeled type-specimen block: an optional mono caption
+ * over one paragraph whose typography is driven entirely by props via inline
+ * style. The atomic unit of the type-specimen kit — stack several to show a
+ * scale, a weight range, or a family; adjacent samples get a hairline
+ * separator (`.kol-type-sample + .kol-type-sample`).
+ *
+ * Presentational — arbitrary px values are the point, so props map to inline
+ * style rather than fixed kol-* size stops. Label and children render
+ * verbatim as authored.
+ *
+ * @param {string}    family     font family name (wrapped as `"family", sans-serif`); defaults to the KOL sans token
+ * @param {number}    weight     font-weight
+ * @param {boolean}   italic     italic sample
+ * @param {number}    size       font-size in px
+ * @param {number}    lineHeight line-height in px; unitless 1.2 when unset
+ * @param {string}    label      mono caption above the sample (omit to hide)
+ * @param {ReactNode} children   the specimen text itself
+ */
+export default function TypeSample({
+  family,
+  weight = 400,
+  italic = false,
+  size = 32,
+  lineHeight,
+  label,
+  children,
+}) {
+  return (
+    <div className="kol-type-sample py-6">
+      {label && (
+        <p className="kol-helper-12 tracking-wider text-meta m-0 mb-3">
+          {label}
+        </p>
+      )}
+      <p
+        className="kol-type-sample-body m-0 text-auto"
+        style={{
+          fontFamily: family ? `"${family}", sans-serif` : 'var(--kol-font-family-sans)',
+          fontWeight: weight,
+          fontStyle: italic ? 'italic' : 'normal',
+          fontSize: `${size}px`,
+          lineHeight: lineHeight ? `${lineHeight}px` : '1.2',
+        }}
+      >
+        {children}
+      </p>
+    </div>
+  )
+}

package/src/TypeSpecCard.jsx

@@ -0,0 +1,42 @@
+/**
+ * TypeSpecCard — a two-column type-spec row: a left meta panel of key/value
+ * pairs (font metrics) beside a live sample slot on the right, with an
+ * optional corner label. The "data-sheet" member of the type-specimen kit —
+ * pairs the numeric spec of a type style with a rendered example of it
+ * (often a TypeSample passed as children, composed at the call site).
+ *
+ * Single column on mobile; `240px + fluid` two-column at lg. `meta` is
+ * arbitrary tuples — no fixed metric schema. Sample paragraphs get 16px
+ * rhythm via `.kol-type-spec-sample p` (Preflight zeroes <p> margins).
+ *
+ * @param {string}                label    corner caption, absolute top-left (omit to hide)
+ * @param {Array<[string, ReactNode]>} meta key/value rows in the left panel
+ * @param {ReactNode}             children the live type sample on the right
+ */
+export default function TypeSpecCard({ label, meta = [], children }) {
+  return (
+    <div className="kol-type-spec relative py-12 border-t border-fg-08">
+      {label && (
+        <span className="kol-type-spec-label kol-helper-12 tracking-widest text-meta absolute top-4 left-0">
+          {label}
+        </span>
+      )}
+      <div className="kol-type-spec-row grid grid-cols-1 gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-12 items-start pt-6">
+        <div className="kol-type-spec-meta flex flex-col">
+          {meta.map(([key, value]) => (
+            <div
+              key={key}
+              className="kol-type-spec-meta-row grid grid-cols-[auto_minmax(0,1fr)] gap-4 items-baseline py-2 border-b border-[var(--kol-fg-04)] last:border-b-0"
+            >
+              <span className="kol-helper-10 text-meta">{key}</span>
+              <span className="kol-helper-10 text-strong text-right [overflow-wrap:anywhere]">{value}</span>
+            </div>
+          ))}
+        </div>
+        <div className="kol-type-spec-sample min-w-0">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

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