hanzo.ai/components/kai/figures.tsx

'use client'

/**
 * The monospace figures on /kai: a program, a distribution, a call. Each is
 * real text in a `Window`, selectable and read by a screen reader as what it
 * is, never a picture of text.
 *
 * Every number drawn in these figures is an EXAMPLE and the window says so in
 * its bar. Measured results live in components/kai/Results, read from the run
 * files; a figure here that looked measured would be a claim nothing backs.
 *
 * Emphasis is brightness, as in `Term`: the thing a reader should look at is the
 * brightest, its context a step down, commentary a step below that. Every value
 * is a design token, stated on the element that draws it.
 */

import { Fragment, type ComponentProps, type ReactNode } from 'react'
import { Pulse, Text, View } from '@hanzo/ui'
import { Window } from '@/components/frame/Term'

type TextProps = ComponentProps<typeof Text>

/** The word in a window's bar that says what kind of figure it is. */
export function Tag({ children }: { children: ReactNode }) {
  return (
    <Text
      data-tag=""
      py={1}
      px={8}
      borderWidth={1}
      borderColor="$edge"
      rounded="var(--radius-full)"
      fontFamily="$mono"
      fontSize="$1"
      color="var(--text-tertiary)"
      whiteSpace="nowrap"
    >
      {children}
    </Text>
  )
}

/** The label every figure of the Kai-1.7 multimodal design carries: a target, not a measurement. */
export const TARGET = 'Kai-1.7 target'

/** `TARGET` as a pill, in `Tag`'s face. */
export function Target() {
  return (
    <Text
      data-target=""
      py={1}
      px={8}
      borderWidth={1}
      borderColor="$edge"
      rounded="var(--radius-full)"
      fontFamily="$mono"
      fontSize="$1"
      color="var(--text-tertiary)"
      whiteSpace="nowrap"
    >
      {TARGET}
    </Text>
  )
}

/**
 * A 6px status dot. Live, it takes the one hue and breathes — @hanzo/ui's
 * `Pulse`, which the motion sheet stops under reduced motion.
 */
export function Dot({ live, ...rest }: { live?: boolean } & ComponentProps<typeof View>) {
  const Mark = live ? Pulse : View
  return <Mark render="span" aria-hidden shrink={0} width={6} height={6} rounded="var(--radius-full)" bg={live ? 'var(--state-online)' : 'var(--text-tertiary)'} {...rest} />
}

/** A figure: a window titled with what it holds, tagged `example` unless it is not one. */
export function Panel({
  title,
  example = true,
  fill,
  children,
}: {
  title: string
  example?: boolean
  /** Take the whole height of the cell, so a row of panels ends on one line. */
  fill?: boolean
  children: ReactNode
}) {
  // A transcript's face and inset, the ones components/frame/Term draws: a
  // phone takes the rung below and fades its right edge, so a line too long
  // for it dissolves instead of stopping dead. Its leading is 1.65 of
  // whichever size the inset sets.
  const window = (
    <Window title={title} aside={example ? <Tag>example</Tag> : undefined}>
      <Text
        display="block"
        overflowX="auto"
        pt={18}
        px={20}
        pb={22}
        fontFamily="$mono"
        fontSize="$2"
        $max-sm={{ pt: 16, pr: 26, pb: 20, pl: 16, fontSize: '$1', '$platform-web': { maskImage: 'linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%)' } }}
        $platform-web={{ lineHeight: '1.65', fontVariantLigatures: 'none', fontFeatureSettings: 'normal' }}
      >
        {children}
      </Text>
    </Window>
  )
  return fill ? (
    <View display="grid" height="100%">
      {window}
    </View>
  ) : (
    window
  )
}

/** Three inks: commentary, context, and the subject. */
const INK = { dim: 'var(--text-tertiary)', mid: 'var(--text-secondary)', lit: '$ink' } as const

/** A span of a figure in one of its inks. */
function Ink({ ink, children, ...rest }: { ink: keyof typeof INK } & TextProps) {
  return (
    <Text color={INK[ink]} {...rest}>
      {children}
    </Text>
  )
}

/** Key and value, aligned on the key's longest line. */
const PAIRS = { display: 'grid', gridTemplateColumns: 'max-content minmax(0, 1fr)', columnGap: 24, rowGap: 2 } as const

export function Pairs({ rows }: { rows: readonly (readonly [string, ReactNode])[] }) {
  return (
    <Text {...PAIRS}>
      {rows.map(([k, v]) => (
        <Fragment key={k}>
          <Ink ink="dim">{k}</Ink>
          <Ink ink="lit">{v}</Ink>
        </Fragment>
      ))}
    </Text>
  )
}

/** Lines of a listing, each one ink. `dim` is commentary, `mid` context, the rest is the subject. */
export function Lines({ lines }: { lines: readonly (string | readonly [string, 'dim' | 'mid' | 'lit'])[] }) {
  return (
    <Text display="block" whiteSpace="pre">
      {lines.map((l, i) => {
        const [text, ink] = typeof l === 'string' ? [l, 'lit' as const] : l
        return (
          <Ink key={i} ink={ink} display="block">
            {text || ' '}
          </Ink>
        )
      })}
    </Text>
  )
}

/**
 * A distribution: each option, a bar in proportion, and its probability. `lead`
 * names the row to light; without it the largest is lit. A bar's width is the
 * value as given, unrounded, so a distribution moving between two answers
 * deforms smoothly rather than in whole-percent steps.
 */
export function Dist({ rows, lead }: { rows: readonly (readonly [string, number])[]; lead?: number }) {
  const top = lead ?? rows.findIndex(([, p]) => p === Math.max(...rows.map(([, q]) => q)))
  return (
    <Text display="grid" gridTemplateColumns="max-content minmax(48px, 1fr) max-content" items="center" columnGap={14} rowGap={6}>
      {rows.map(([label, p], i) => (
        <Fragment key={label}>
          <Ink ink={i === top ? 'lit' : 'mid'}>{label}</Ink>
          {/* Theme inks, so the track and the runners-up read on a light ground as on a dark one. */}
          <View aria-hidden height={6} overflow="hidden" rounded={2} bg="var(--border)">
            <View height="100%" width={`${(p * 100).toFixed(2)}%`} bg={i === top ? '$ink' : 'var(--text-tertiary)'} />
          </View>
          <Ink ink={i === top ? 'lit' : 'dim'} data-option={label} $platform-web={{ fontVariantNumeric: 'tabular-nums' }}>
            {p.toFixed(2).replace(/^0/, '')}
          </Ink>
        </Fragment>
      ))}
    </Text>
  )
}

/** One of a figure's switches: the fact a reader may change. Pressed is the state in force. */
export function Switch({
  pressed,
  children,
  ...rest
}: { pressed: boolean; children: ReactNode } & Omit<ComponentProps<'button'>, 'style' | 'children' | 'type'>) {
  return (
    <Text
      render={<button type="button" aria-pressed={pressed} {...rest} />}
      display="inline-flex"
      items="center"
      py={2}
      px={10}
      lineHeight={20}
      borderWidth={1}
      borderStyle={pressed ? 'solid' : 'dashed'}
      borderColor={pressed ? '$ink' : 'var(--text-disabled)'}
      rounded="var(--radius-full)"
      bg="transparent"
      color={pressed ? '$ink' : 'var(--text-tertiary)'}
      fontFamily="$mono"
      cursor="pointer"
    >
      {children}
    </Text>
  )
}