@kolkrabbi/kol-component 0.6.0 → 0.8.0

package/src/organisms/WorkCard.jsx

@@ -1,120 +0,0 @@
-import { useEffect, useState } from 'react'
-import TiltCard from '../atoms/TiltCard.jsx'
-import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
-
-/* Ragged-skyline heights, chosen by `index % 3` — a shelf of these reads as an
- * uneven horizon. Overridable via the `heights` prop. */
-const HEIGHTS = ['h-[408px] md:h-[560px]', 'h-[372px] md:h-[520px]', 'h-[336px] md:h-[480px]']
-const EASE = 'cubic-bezier(0.16, 1, 0.3, 1)'
-const TYPE_LABELS = { client: 'Client', collection: 'Collection', typeface: 'Typeface', tool: 'Tool', system: 'System' }
-
-/**
- * WorkCard — the grid/shelf project tile for a `/work` listing: a fixed-size
- * media card (the DS **TiltCard** in its `grounded` variant) with a
- * hover-revealed bottom drawer carrying the project title + a meta line
- * (client-or-type · year). The whole card is an anchor to the project detail;
- * it preloads its own thumbnail and plays a staggered rise-and-untilt entrance
- * keyed off its `index` in the shelf.
- *
- * Composes TiltCard (owns the `<img>` + pointer tilt); this organism adds the
- * entrance choreography, the caption drawer, and the link. Router-agnostic:
- * renders a plain `<a href>` plus an `onNavigate(href, event)` seam — call
- * `preventDefault` inside it for SPA navigation. Flat project props (no Sanity):
- * the meta line is composed internally so callers pass raw fields.
- *
- * Text casing: no text-transform (KOL rule) — the source's presentational
- * `uppercase` is dropped; `title`, `client`, `year` render verbatim as authored.
- *
- * @param {string}          title       overlay heading (display type)
- * @param {string}          thumbnail   image URL (preloaded, passed to TiltCard `src`); AssetPlaceholder shows when absent
- * @param {string}          href        link target
- * @param {string}          client      first meta segment; falls back to the type label
- * @param {string}          type        'client'|'collection'|'typeface'|'tool'|'system' — mapped via TYPE_LABELS when no client
- * @param {string|number}   year        second meta segment
- * @param {number}          index       drives stagger height + entrance timing (default 0)
- * @param {number}          perspective CSS perspective in px on fine pointers (default 800)
- * @param {string[]}        heights     override the ragged-height ramp (chosen by index % heights.length)
- * @param {Function}        onNavigate  (href, event) => void — anchor click seam for SPA routing
- */
-export default function WorkCard({
-  title,
-  thumbnail,
-  href,
-  client,
-  type,
-  year,
-  index = 0,
-  perspective = 800,
-  heights = HEIGHTS,
-  onNavigate,
-}) {
-  const [ready, setReady] = useState(false)
-  // Evaluated once at mount (SSR-safe): drop perspective on coarse/small screens.
-  const [isMobile] = useState(
-    () => typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches,
-  )
-
-  useEffect(() => {
-    if (!thumbnail) {
-      setReady(true)
-      return
-    }
-    let cancelled = false
-    const img = new window.Image()
-    const done = () => { if (!cancelled) setReady(true) }
-    img.onload = done
-    img.onerror = done
-    img.src = thumbnail
-    return () => { cancelled = true }
-  }, [thumbnail])
-
-  const height = heights[index % heights.length]
-  const meta = [client || TYPE_LABELS[type] || type, year].filter(Boolean).join(' · ')
-
-  const drawer = (
-    <div className="absolute inset-x-0 bottom-0 z-10 p-4 md:p-6 bg-surface-inverse opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-      <p className="kol-sans-display-02 text-fg-inverse leading-tight">{title}</p>
-      {meta && (
-        <p className="kol-mono-12 text-fg-inverse opacity-60 tracking-widest mt-2">{meta}</p>
-      )}
-    </div>
-  )
-
-  return (
-    <a
-      href={href}
-      onClick={onNavigate ? (e) => onNavigate(href, e) : undefined}
-      className={`flex-none w-[280px] md:w-[400px] ${height} group`}
-      style={isMobile ? undefined : { perspective }}
-    >
-      <div
-        className="w-full h-full"
-        style={{
-          transformOrigin: 'bottom center',
-          opacity: ready ? 1 : 0,
-          transform: ready
-            ? 'rotateX(0deg) translateY(0px)'
-            : `rotateX(${20 + (index % 3) * 8}deg) translateY(${30 + (index % 4) * 10}px)`,
-          transition: `opacity ${0.7 + (index % 3) * 0.15}s ${EASE} ${index * 0.07}s, transform ${0.7 + (index % 3) * 0.15}s ${EASE} ${index * 0.07}s`,
-        }}
-      >
-        {thumbnail ? (
-          <TiltCard
-            src={thumbnail}
-            alt={title}
-            variant="grounded"
-            perspective={perspective}
-            className="w-full h-full rounded-[4px] border border-fg-04"
-          >
-            {drawer}
-          </TiltCard>
-        ) : (
-          <div className="relative w-full h-full rounded-[4px] border border-fg-04 overflow-hidden">
-            <AssetPlaceholder category="work" name={title} aspectRatio="auto" className="w-full h-full" />
-            {drawer}
-          </div>
-        )}
-      </div>
-    </a>
-  )
-}

package/src/organisms/WorkViewToggle.jsx

@@ -1,170 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-icons'
-
-/* taxonomy-ok: composites a segmented toggle + an inline search into one
- * space-trading control (organism); nests kol-icons's Icon (infrastructure). */
-
-const CUBIC_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)'
-/* The pill uses a springier overshoot ease, distinct from CUBIC_EASE. */
-const PILL_EASE = 'cubic-bezier(0.34, 1.2, 0.64, 1)'
-
-/**
- * WorkViewToggle — the `/work` header control: a pill-shaped segmented
- * **Shelf ⟷ List** view switch with a sliding-pill highlight, beside an
- * expandable inline search. Resting: the two-option toggle + a collapsed
- * search icon-button. Opening search collapses the toggle to zero width (fades
- * out) and expands the field to full width, revealing a round close button on
- * the left — the three siblings trade horizontal space via animated
- * width/margin/opacity.
- *
- * Its own component, not a variant of DS ViewToggle / SegmentedToggle: the
- * animated sliding pill, the expanding active-option icon, and the embedded
- * search choreography are materially different. All animated numerics are
- * inline `style` (width/left/margin/opacity + the two eases).
- *
- * Controlled seam replacing the app's WorkViewContext: `view`/`onView` +
- * `query`/`onQuery`. `searchOpen` is internal state (open on the search icon,
- * close on the × / Escape); closing clears the controlled query via
- * `onQuery('')`. No router, no context.
- *
- * Text casing: labels are authored data (`shelfLabel`/`listLabel`), no
- * text-transform.
- *
- * @param {string}   view        'shelf' | 'list' — active view; positions the pill + swaps icon/color
- * @param {Function} onView      (mode) => void — fires on Shelf/List click
- * @param {string}   query       controlled search value (default '')
- * @param {Function} onQuery     (value) => void — fires on input change; called with '' on close
- * @param {string}   shelfLabel  first option label (default 'Shelf')
- * @param {string}   listLabel   second option label (default 'List')
- * @param {string}   shelfIcon   first option icon name (default 'library')
- * @param {string}   listIcon    second option icon name (default 'list')
- * @param {string}   placeholder search input placeholder (default '')
- * @param {string}   className   extra classes on the root
- */
-export default function WorkViewToggle({
-  view = 'shelf',
-  onView,
-  query = '',
-  onQuery,
-  shelfLabel = 'Shelf',
-  listLabel = 'List',
-  shelfIcon = 'library',
-  listIcon = 'list',
-  placeholder = '',
-  className = '',
-}) {
-  const [open, setOpen] = useState(false)
-  const inputRef = useRef(null)
-
-  useEffect(() => {
-    if (open) inputRef.current?.focus()
-  }, [open])
-
-  const closeSearch = () => {
-    setOpen(false)
-    onQuery?.('')
-  }
-
-  const isShelf = view === 'shelf'
-  const isList = view === 'list'
-
-  const collapse = `width 600ms ${CUBIC_EASE}, margin 600ms ${CUBIC_EASE}, opacity 300ms ${CUBIC_EASE}`
-  const inactiveColor = 'color-mix(in srgb, var(--kol-surface-on-primary) 80%, transparent)'
-
-  const optionIcon = (name, on) => (
-    <span
-      className="inline-flex overflow-hidden flex-shrink-0"
-      style={{ width: on ? 20 : 0, marginRight: on ? 8 : 0, opacity: on ? 1 : 0, transition: collapse }}
-    >
-      <Icon name={name} size={20} />
-    </span>
-  )
-
-  return (
-    <div className={`flex items-center ${className}`.trim()}>
-      {/* Close button — appears when search is open */}
-      <span
-        className="inline-flex overflow-hidden flex-shrink-0"
-        style={{ width: open ? 36 : 0, marginRight: open ? 12 : 0, opacity: open ? 1 : 0, transition: collapse }}
-      >
-        <button
-          type="button"
-          className="flex items-center justify-center w-9 h-9 rounded-full bg-fg-96 transition-colors hover:bg-fg-88"
-          style={{ color: 'var(--kol-surface-primary)' }}
-          onClick={closeSearch}
-          aria-label="Close search"
-        >
-          <Icon name="cross" size={20} />
-        </button>
-      </span>
-
-      {/* Toggle — collapses when search is open */}
-      <div
-        className="relative flex items-center rounded-full bg-fg-04 h-9 overflow-hidden"
-        style={{ width: open ? 0 : 176, marginRight: open ? 0 : 12, opacity: open ? 0 : 1, transition: collapse }}
-      >
-        <div
-          className="absolute top-0 h-9 rounded-full bg-fg-96"
-          style={{ width: 96, left: isShelf ? 0 : 80, transition: `left 600ms ${PILL_EASE}` }}
-        />
-
-        <button
-          type="button"
-          className="relative z-10 flex items-center justify-center rounded-full h-9 kol-helper-14 transition-colors duration-300"
-          style={{
-            width: 96,
-            letterSpacing: 0,
-            color: isShelf ? 'var(--kol-surface-primary)' : inactiveColor,
-            paddingRight: isShelf ? undefined : 8,
-          }}
-          onClick={() => onView?.('shelf')}
-          aria-pressed={isShelf}
-        >
-          {optionIcon(shelfIcon, isShelf)}
-          {shelfLabel}
-        </button>
-        <button
-          type="button"
-          className="relative z-10 flex items-center justify-center rounded-full h-9 -ml-4 kol-helper-14 transition-colors duration-300"
-          style={{
-            width: 96,
-            letterSpacing: 0,
-            color: isList ? 'var(--kol-surface-primary)' : inactiveColor,
-            paddingLeft: isList ? undefined : 8,
-          }}
-          onClick={() => onView?.('list')}
-          aria-pressed={isList}
-        >
-          {optionIcon(listIcon, isList)}
-          {listLabel}
-        </button>
-      </div>
-
-      {/* Search — icon button expands to a search field */}
-      <div
-        className="flex items-center bg-fg-04 rounded-full h-9"
-        style={{ width: open ? 280 : 36, transition: `width 600ms ${CUBIC_EASE}` }}
-      >
-        <button
-          type="button"
-          className={`flex items-center justify-center w-9 h-9 rounded-full text-auto flex-shrink-0 border border-transparent ${open ? '' : 'transition-colors hover:border-fg-12'}`}
-          onClick={() => !open && setOpen(true)}
-          aria-label="Search projects"
-        >
-          <Icon name="search" size={16} className="text-fg-80" />
-        </button>
-        {open && (
-          <input
-            ref={inputRef}
-            type="text"
-            value={query}
-            onChange={(e) => onQuery?.(e.target.value)}
-            placeholder={placeholder}
-            className="bg-transparent outline-none kol-helper-14 flex-1 text-fg-80 caret-current pr-4 min-w-0"
-            onKeyDown={(e) => { if (e.key === 'Escape') closeSearch() }}
-          />
-        )}
-      </div>
-    </div>
-  )
-}

package/src/organisms/foundry/FontPreviewSection.jsx

@@ -1,187 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import Dropdown from '../../molecules/Dropdown.jsx'
-import Slider from '../../molecules/Slider.jsx'
-import SpecimenSectionHeader from '../../molecules/foundry/SpecimenSectionHeader.jsx'
-import { SPECIMEN_SAMPLE_TEXT } from './glyphData.js'
-
-/* taxonomy-ok: organism — nests Dropdown, Slider, SpecimenSectionHeader
- * (relative imports) plus a same-file FontPreviewItem. */
-
-const WEIGHT_VALUES = {
-  Thin: 100,
-  Extralight: 200,
-  Light: 300,
-  Regular: 400,
-  Medium: 500,
-  Semibold: 600,
-  Bold: 700,
-  Extrabold: 800,
-  Black: 900,
-}
-
-/**
- * FontPreviewItem (same-file) — one preview block: a weight dropdown + Size /
- * Leading / Spacing sliders over an editable, in-family sample. Weight is
- * seeded from the section header (re-syncs when the parent's selection changes);
- * size/leading/spacing are local. Leading maps 0–50 → 90–140% line-height.
- */
-function FontPreviewItem({
-  fontFamily,
-  fontStyle = 'normal',
-  text = SPECIMEN_SAMPLE_TEXT,
-  initialWeight = 'Regular',
-  initialSize = 64,
-  initialLeading = 10,
-  lineClamp = null,
-  availableWeights,
-}) {
-  const [size, setSize] = useState(initialSize)
-  const [leading, setLeading] = useState(initialLeading)
-  const [spacing, setSpacing] = useState(0)
-  const [selectedWeight, setSelectedWeight] = useState(initialWeight)
-  const editableRef = useRef(null)
-
-  useEffect(() => setSelectedWeight(initialWeight), [initialWeight])
-  useEffect(() => {
-    if (editableRef.current && editableRef.current.textContent !== text) {
-      editableRef.current.textContent = text
-    }
-  }, [text])
-
-  const weightOptions = availableWeights.map((label) => ({ label, value: label }))
-  const numericWeight = WEIGHT_VALUES[selectedWeight] || 400
-
-  return (
-    <div className="self-stretch min-h-40 p-6 rounded border border-fg-16 flex flex-col justify-start items-start gap-6 bg-surface-primary">
-      <div className="self-stretch flex justify-start items-start gap-8">
-        <div className="flex-shrink-0">
-          <Dropdown
-            options={weightOptions}
-            value={selectedWeight}
-            onChange={setSelectedWeight}
-            variant="minimal"
-          />
-        </div>
-        <div className="flex-1 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="hidden md:flex flex-1"
-            formatValue={(val) => 90 + val}
-          />
-          <Slider label="Spacing" min={-50} max={50} value={spacing} onChange={setSpacing} variant="minimal" className="hidden md:flex flex-1" />
-        </div>
-      </div>
-
-      <div className="self-stretch rounded flex justify-start items-start overflow-hidden">
-        <div
-          ref={editableRef}
-          contentEditable
-          suppressContentEditableWarning
-          className="flex-1 bg-transparent outline-none border-none text-auto"
-          style={{
-            fontFamily,
-            fontStyle,
-            fontWeight: numericWeight,
-            fontSize: `${size}px`,
-            lineHeight: `${90 + leading}%`,
-            letterSpacing: `${spacing}px`,
-            wordWrap: 'break-word',
-            overflowWrap: 'break-word',
-            whiteSpace: 'normal',
-            hyphens: 'none',
-            maxWidth: '100%',
-            ...(lineClamp && {
-              display: '-webkit-box',
-              WebkitLineClamp: lineClamp,
-              WebkitBoxOrient: 'vertical',
-              overflow: 'hidden',
-            }),
-          }}
-        />
-      </div>
-    </div>
-  )
-}
-
-const DEFAULT_WEIGHTS = [
-  'Thin', 'Extralight', 'Light', 'Regular', 'Medium', 'Semibold', 'Bold', 'Extrabold', 'Black',
-]
-const SIZE_LADDER = [
-  { size: 96, lines: 1 },
-  { size: 64, lines: 3 },
-  { size: 48, lines: 4 },
-  { size: 24, lines: 5, leading: 50 },
-]
-
-/**
- * FontPreviewSection — a stacked multi-size preview: the shared header (weight +
- * Roman/Italic dropdowns) above a ladder of preview blocks at 96 / 64 / 48 / 24
- * px, each pre-seeded with the section's selected weight + italic state. Read a
- * family from display down to body size at a chosen weight.
- *
- * Font-agnostic: the monorepo's TGMalromur/Málrómur defaults are dropped —
- * `fontFamily` + `badgeText` are prop-driven. The size ladder + weight ramp are
- * sensible defaults, overridable via `sizes` / `availableWeights`.
- *
- * Text casing: badgeText, weight labels and style labels render verbatim.
- *
- * @param {string} props.fontFamily - Family rendered in every preview item.
- * @param {string} props.badgeText - Header title.
- * @param {boolean} props.showDropdown - Render the style dropdown; seeds italic (default true).
- * @param {string[]} props.availableWeights - Weight dropdown options (default 9-stop ramp).
- * @param {string} props.initialWeight - Initially selected weight (default 'Regular').
- * @param {Array<{size,lines,leading?}>} props.sizes - Size ladder (default 96/64/48/24).
- */
-const FontPreviewSection = ({
-  fontFamily = 'system-ui, sans-serif',
-  badgeText = 'Preview',
-  showDropdown = true,
-  availableWeights = DEFAULT_WEIGHTS,
-  initialWeight = 'Regular',
-  sizes = SIZE_LADDER,
-}) => {
-  const [selectedStyleVariant, setSelectedStyleVariant] = useState(showDropdown ? 'italic' : 'roman')
-  const [selectedWeight, setSelectedWeight] = useState(initialWeight)
-  const isItalic = selectedStyleVariant === 'italic'
-  const weightOptions = availableWeights.map((label) => ({ label, value: label }))
-
-  return (
-    <section className="w-full py-12 lg:py-16">
-      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
-        <SpecimenSectionHeader
-          selectedStyle={selectedStyleVariant}
-          onStyleChange={setSelectedStyleVariant}
-          showDropdown={showDropdown}
-          badgeText={badgeText}
-          icon="foundation"
-          size="sm"
-          selectedWeight={selectedWeight}
-          onWeightChange={setSelectedWeight}
-          showWeightDropdown={availableWeights.length > 0}
-          weightOptions={weightOptions}
-        />
-
-        {sizes.map(({ size, lines, leading }) => (
-          <FontPreviewItem
-            key={size}
-            fontFamily={fontFamily}
-            fontStyle={isItalic ? 'italic' : 'normal'}
-            initialWeight={selectedWeight}
-            availableWeights={availableWeights}
-            initialSize={size}
-            initialLeading={leading}
-            lineClamp={lines}
-          />
-        ))}
-      </div>
-    </section>
-  )
-}
-
-export default FontPreviewSection

package/src/organisms/foundry/FoundryCharacterSets.jsx

@@ -1,113 +0,0 @@
-import { useState } from 'react'
-import Button from '../../atoms/Button.jsx'
-import SpecimenSectionHeader from '../../molecules/foundry/SpecimenSectionHeader.jsx'
-import { glyphSets, glyphCategories } from './glyphData.js'
-
-/* taxonomy-ok: organism — nests Button + SpecimenSectionHeader (relative
- * imports) plus same-file GlyphCategory / GlyphItem. */
-
-/** GlyphItem (same-file) — one bordered glyph cell that flips to the inverse
- *  surface on hover. Display-only (character sets aren't selectable). */
-function GlyphItem({ glyph, fontFamily, fontStyle }) {
-  return (
-    <div
-      className="aspect-square border rounded-lg flex items-center justify-center text-3xl leading-none transition-colors duration-300 w-16 h-16 hover:bg-surface-inverse"
-      style={{ borderColor: 'var(--kol-border-default)', fontFamily, fontStyle }}
-    >
-      {glyph}
-    </div>
-  )
-}
-
-/** GlyphCategory (same-file) — a labeled category title over a wrap grid of
- *  GlyphItems, all rendered in the chosen family/style. */
-function GlyphCategory({ title, glyphs, fontFamily, fontStyle, className = '' }) {
-  return (
-    <div className={`w-full flex flex-col gap-4 ${className}`.trim()}>
-      <h3 className="kol-mono-12">{title}</h3>
-      <div className="flex flex-wrap gap-4 w-full">
-        {glyphs?.map((glyph, i) => (
-          <GlyphItem key={i} glyph={glyph} fontFamily={fontFamily} fontStyle={fontStyle} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-/**
- * FoundryCharacterSets — the character-set browser: the shared header ("Character
- * Set" + Roman/Italic dropdown) above a stack of glyph categories rendered in
- * the chosen family/style. Collapsed by default to the first two categories
- * under a fade with a "Show All Glyphs" reveal; clicking expands to every
- * category.
- *
- * Light-theme fix ([source-bug]): the monorepo faded with a hardcoded
- * `rgba(18,18,21,…)` — the app's literal dark background baked in, which broke
- * in light theme. Here the mask runs `transparent → var(--kol-surface-primary)`
- * so it matches whatever surface it sits on, in either theme. `fontFamily` is
- * prop-driven (no brand default).
- *
- * Text casing: label, category titles and the reveal button render verbatim.
- *
- * @param {string} props.fontFamily - Family every glyph renders in.
- * @param {boolean} props.showDropdown - Render the Roman/Italic dropdown (default true).
- * @param {number} props.collapsedCount - Categories shown when collapsed (default 2).
- */
-const FoundryCharacterSets = ({
-  fontFamily = 'system-ui, sans-serif',
-  showDropdown = true,
-  collapsedCount = 2,
-}) => {
-  const [selectedStyle, setSelectedStyle] = useState('italic')
-  const [showAll, setShowAll] = useState(false)
-
-  const visibleCategories = showAll ? glyphCategories : glyphCategories.slice(0, collapsedCount)
-  const fontStyle = selectedStyle === 'italic' ? 'italic' : 'normal'
-
-  return (
-    <section className="w-full py-12 lg:py-16">
-      <div className="max-w-[1400px] mx-auto flex flex-col gap-8">
-        <SpecimenSectionHeader
-          label="Character Set"
-          size="sm"
-          selectedStyle={selectedStyle}
-          onStyleChange={setSelectedStyle}
-          showDropdown={showDropdown}
-        />
-
-        <div className="w-full flex flex-col gap-12 relative">
-          {visibleCategories.map((category, index) => (
-            <GlyphCategory
-              key={category.key}
-              title={category.title}
-              glyphs={glyphSets[category.key]}
-              fontFamily={fontFamily}
-              fontStyle={fontStyle}
-              className={!showAll && index === collapsedCount - 1 ? 'relative' : ''}
-            />
-          ))}
-
-          {!showAll && (
-            <>
-              {/* Theme-aware fade (fixes the hardcoded rgba(18,18,21) dark mask). */}
-              <div
-                className="absolute bottom-0 left-0 right-0 h-64 pointer-events-none"
-                style={{
-                  background:
-                    'linear-gradient(to bottom, transparent 13%, var(--kol-surface-primary) 86%)',
-                }}
-              />
-              <div className="absolute bottom-0 left-0 right-0 flex justify-center">
-                <Button onClick={() => setShowAll(true)} variant="outline">
-                  Show All Glyphs
-                </Button>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default FoundryCharacterSets