@shipload/item-renderer 0.1.0

package/src/primitives/category-icon.ts

@@ -0,0 +1,87 @@
+import type { CategoryIconShape } from '@shipload/sdk'
+import { el } from './svg.ts'
+
+export interface CategoryIconPathOpts {
+  shape: CategoryIconShape
+  cx: number
+  cy: number
+  size: number
+  color: string
+  strokeWidth?: number
+}
+
+export interface CategoryIconSvgOpts {
+  size?: number
+  color?: string
+  strokeWidth?: number
+}
+
+function hexPoints(cx: number, cy: number, r: number): string {
+  const pts: string[] = []
+  for (let i = 0; i < 6; i++) {
+    const angle = (Math.PI / 3) * i - Math.PI / 2
+    pts.push(`${(cx + r * Math.cos(angle)).toFixed(2)},${(cy + r * Math.sin(angle)).toFixed(2)}`)
+  }
+  return pts.join(' ')
+}
+
+function diamondPoints(cx: number, cy: number, r: number): string {
+  return [
+    `${cx.toFixed(2)},${(cy - r).toFixed(2)}`,
+    `${(cx + r).toFixed(2)},${cy.toFixed(2)}`,
+    `${cx.toFixed(2)},${(cy + r).toFixed(2)}`,
+    `${(cx - r).toFixed(2)},${cy.toFixed(2)}`,
+  ].join(' ')
+}
+
+function starPoints(cx: number, cy: number, r: number): string {
+  const inner = r * 0.45
+  const pts: string[] = []
+  for (let i = 0; i < 10; i++) {
+    const angle = (Math.PI / 5) * i - Math.PI / 2
+    const radius = i % 2 === 0 ? r : inner
+    pts.push(`${(cx + radius * Math.cos(angle)).toFixed(2)},${(cy + radius * Math.sin(angle)).toFixed(2)}`)
+  }
+  return pts.join(' ')
+}
+
+export function categoryIconPath({ shape, cx, cy, size, color, strokeWidth }: CategoryIconPathOpts): string {
+  const r = size / 2
+  const stroked = strokeWidth && strokeWidth > 0
+  const shapeAttrs = stroked
+    ? { fill: 'none', stroke: color, 'stroke-width': strokeWidth, 'stroke-linejoin': 'round' as const }
+    : { fill: color }
+  switch (shape) {
+    case 'hex':
+      return el('polygon', { points: hexPoints(cx, cy, r), ...shapeAttrs })
+    case 'diamond':
+      return el('polygon', { points: diamondPoints(cx, cy, r), ...shapeAttrs })
+    case 'star':
+      return el('polygon', { points: starPoints(cx, cy, r), ...shapeAttrs })
+    case 'circle':
+      return el('circle', { cx, cy, r, ...shapeAttrs })
+    case 'square':
+      return el('rect', { x: cx - r, y: cy - r, width: size, height: size, ...shapeAttrs })
+  }
+  const _exhaustive: never = shape
+  throw new Error(`Unknown CategoryIconShape: ${String(_exhaustive)}`)
+}
+
+export function categoryIconSvg(shape: CategoryIconShape, opts: CategoryIconSvgOpts = {}): string {
+  const size = opts.size ?? 16
+  const color = opts.color ?? '#ffffff'
+  const cx = size / 2
+  const cy = size / 2
+  const iconSize = size * 0.85
+  const inner = categoryIconPath({ shape, cx, cy, size: iconSize, color, strokeWidth: opts.strokeWidth })
+  return el(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+    },
+    inner,
+  )
+}

package/src/primitives/compact-row.ts

@@ -0,0 +1,38 @@
+import { text } from './text.ts'
+import { tokens } from '../tokens/index.ts'
+
+export interface CompactRowProps {
+  x: number
+  y: number
+  width: number
+  label: string
+  value: string
+  labelColor?: string
+  valueColor?: string
+}
+
+export function compactRow(p: CompactRowProps): string {
+  const labelColor = p.labelColor ?? tokens.colors.text.secondary
+  const valueColor = p.valueColor ?? tokens.colors.text.primary
+  return (
+    text({
+      x: p.x,
+      y: p.y,
+      value: p.label,
+      size: 11,
+      weight: 500,
+      family: tokens.typography.sans,
+      color: labelColor,
+    }) +
+    text({
+      x: p.x + p.width,
+      y: p.y,
+      value: p.value,
+      size: 11,
+      weight: 700,
+      family: tokens.typography.sans,
+      color: valueColor,
+      anchor: 'end',
+    })
+  )
+}

package/src/primitives/divider.ts

@@ -0,0 +1,20 @@
+import { el } from './svg.ts'
+import { tokens } from '../tokens/index.ts'
+
+export interface DividerProps {
+  x: number
+  y: number
+  width: number
+  color?: string
+}
+
+export function divider(props: DividerProps): string {
+  return el('line', {
+    x1: props.x,
+    x2: props.x + props.width,
+    y1: props.y,
+    y2: props.y,
+    stroke: props.color ?? tokens.colors.surface.panelBorder,
+    'stroke-width': 1,
+  })
+}

package/src/primitives/icon-hex.ts

@@ -0,0 +1,39 @@
+import { el } from './svg.ts'
+import { text } from './text.ts'
+import { tokens } from '../tokens/index.ts'
+
+export interface IconHexProps {
+  x: number
+  y: number
+  color: string
+  code: string
+}
+
+export function iconHex({ x, y, color, code }: IconHexProps): string {
+  const size = tokens.spacing.iconHexSize
+  const h = size
+  const w = size * 1.1547 // flat-top hex aspect
+  const cx = x + w / 2
+  const cy = y + h / 2
+  const points = [
+    [cx - w / 2, cy],
+    [cx - w / 4, cy - h / 2],
+    [cx + w / 4, cy - h / 2],
+    [cx + w / 2, cy],
+    [cx + w / 4, cy + h / 2],
+    [cx - w / 4, cy + h / 2],
+  ].map(([px, py]) => `${px?.toFixed(1)},${py?.toFixed(1)}`).join(' ')
+  return (
+    el('polygon', { points, fill: 'none', stroke: color, 'stroke-width': 1.5 }) +
+    text({
+      x: cx,
+      y: cy + 3,
+      value: code,
+      size: 9,
+      weight: 700,
+      family: tokens.typography.mono,
+      color,
+      anchor: 'middle',
+    })
+  )
+}

package/src/primitives/module-slot.ts

@@ -0,0 +1,147 @@
+import { el } from './svg.ts'
+import { text } from './text.ts'
+import { wrapText } from './wrap.ts'
+import { tokens } from '../tokens/index.ts'
+import type { TextSpan } from '@shipload/sdk'
+
+export interface ModuleSlotProps {
+  x: number
+  y: number
+  width: number
+  installed: boolean
+  capability?: string
+  description?: string | TextSpan[]
+  accentColor?: string
+}
+
+const EMPTY_DIAMOND = (cx: number, cy: number, color: string) =>
+  el('polygon', {
+    points: `${cx},${cy - 5} ${cx + 5},${cy} ${cx},${cy + 5} ${cx - 5},${cy}`,
+    fill: 'none',
+    stroke: color,
+    'stroke-width': 1,
+  })
+
+const FILLED_DIAMOND = (cx: number, cy: number, color: string) =>
+  el('polygon', {
+    points: `${cx},${cy - 5} ${cx + 5},${cy} ${cx},${cy + 5} ${cx - 5},${cy}`,
+    fill: color,
+  })
+
+function escapeXml(s: string): string {
+  return s
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function sliceSpans(spans: TextSpan[], start: number, end: number): TextSpan[] {
+  const out: TextSpan[] = []
+  let cursor = 0
+  for (const span of spans) {
+    const spanStart = cursor
+    const spanEnd = cursor + span.text.length
+    cursor = spanEnd
+    if (spanEnd <= start || spanStart >= end) continue
+    const sliceStart = Math.max(0, start - spanStart)
+    const sliceEnd = span.text.length - Math.max(0, spanEnd - end)
+    const txt = span.text.slice(sliceStart, sliceEnd)
+    if (txt.length === 0) continue
+    out.push(span.highlight ? { text: txt, highlight: true } : { text: txt })
+  }
+  return out
+}
+
+export function moduleSlot(props: ModuleSlotProps): string {
+  const iconX = props.x + 6
+  const iconY = props.y + 6
+  const textX = props.x + 20
+
+  if (!props.installed) {
+    return (
+      EMPTY_DIAMOND(iconX, iconY, tokens.colors.surface.panelBorderBright) +
+      text({
+        x: textX,
+        y: iconY + 3,
+        value: 'Empty module',
+        size: tokens.typography.sizes.body,
+        color: tokens.colors.text.muted,
+      })
+    )
+  }
+
+  const accent = props.accentColor ?? tokens.colors.text.accent
+  const label = `${props.capability ?? 'Module'}: `
+
+  const desc = props.description
+  const isEmpty =
+    !desc ||
+    (typeof desc === 'string' && desc.length === 0) ||
+    (Array.isArray(desc) && desc.length === 0)
+
+  if (isEmpty) {
+    return (
+      FILLED_DIAMOND(iconX, iconY, accent) +
+      text({
+        x: textX,
+        y: iconY + 3,
+        value: label.trimEnd(),
+        size: tokens.typography.sizes.body,
+        weight: 600,
+        color: tokens.colors.text.primary,
+      })
+    )
+  }
+
+  const descSpans: TextSpan[] = typeof desc === 'string' ? [{ text: desc }] : desc
+  const descPlain = descSpans.map((s) => s.text).join('')
+  const combined = label + descPlain
+  const lines = wrapText({ value: combined, charsPerLine: 36 })
+
+  const highlightColor = tokens.colors.text.accent
+  const bodyColor = tokens.colors.text.secondary
+  const labelColor = tokens.colors.text.primary
+  const size = tokens.typography.sizes.body
+  const fontFamily = escapeXml(tokens.typography.sans)
+  const labelEnd = label.length
+
+  let offset = 0
+  const textBlocks = lines
+    .map((line, i) => {
+      const lineStart = combined.indexOf(line, offset)
+      const lineEnd = lineStart + line.length
+      offset = lineEnd
+      const y = iconY + 3 + i * 14
+
+      const tspans: string[] = []
+
+      if (lineStart < labelEnd) {
+        const labelSliceEnd = Math.min(lineEnd, labelEnd)
+        const labelText = combined.slice(lineStart, labelSliceEnd)
+        if (labelText.length > 0) {
+          tspans.push(
+            `<tspan font-weight="600" fill="${labelColor}">${escapeXml(labelText)}</tspan>`,
+          )
+        }
+        if (lineEnd > labelEnd) {
+          const descSlice = sliceSpans(descSpans, 0, lineEnd - labelEnd)
+          for (const s of descSlice) {
+            const fill = s.highlight ? highlightColor : bodyColor
+            tspans.push(`<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`)
+          }
+        }
+      } else {
+        const descSlice = sliceSpans(descSpans, lineStart - labelEnd, lineEnd - labelEnd)
+        for (const s of descSlice) {
+          const fill = s.highlight ? highlightColor : bodyColor
+          tspans.push(`<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`)
+        }
+      }
+
+      return `<text x="${textX}" y="${y}" font-family="${fontFamily}" font-size="${size}">${tspans.join('')}</text>`
+    })
+    .join('')
+
+  return FILLED_DIAMOND(iconX, iconY, accent) + textBlocks
+}

package/src/primitives/panel.ts

@@ -0,0 +1,24 @@
+import { el } from './svg.ts'
+import { tokens } from '../tokens/index.ts'
+
+export interface PanelProps {
+  width: number
+  height: number
+  borderColor?: string
+}
+
+export function panel(props: PanelProps): string {
+  const { width, height, borderColor } = props
+  const r = tokens.spacing.cornerRadius
+  return el('rect', {
+    x: 0.5,
+    y: 0.5,
+    width: width - 1,
+    height: height - 1,
+    rx: r,
+    ry: r,
+    fill: tokens.colors.surface.panel,
+    stroke: borderColor ?? tokens.colors.surface.panelBorder,
+    'stroke-width': 1,
+  })
+}

package/src/primitives/quantity-badge.ts

@@ -0,0 +1,37 @@
+import { el } from './svg.ts'
+import { text } from './text.ts'
+import { tokens } from '../tokens/index.ts'
+
+export interface QuantityBadgeProps {
+  x: number
+  y: number
+  quantity: number
+}
+
+export function quantityBadge({ x, y, quantity }: QuantityBadgeProps): string {
+  if (quantity <= 1) return ''
+  const label = `×${quantity}`
+  const w = label.length * 7 + 12
+  const h = tokens.spacing.quantityBadgeHeight
+  return (
+    el('rect', {
+      x: x - w,
+      y,
+      width: w,
+      height: h,
+      rx: h / 2,
+      ry: h / 2,
+      fill: tokens.colors.text.accent,
+    }) +
+    text({
+      x: x - w / 2,
+      y: y + h / 2 + 4,
+      value: label,
+      size: tokens.typography.sizes.label,
+      weight: 700,
+      family: tokens.typography.mono,
+      color: tokens.colors.surface.background,
+      anchor: 'middle',
+    })
+  )
+}

package/src/primitives/span-paragraph.ts

@@ -0,0 +1,72 @@
+import { wrapText } from './wrap.ts'
+import { escapeXml as escapeAttr } from './svg.ts'
+import { tokens } from '../tokens/index.ts'
+import type { TextSpan } from '@shipload/sdk'
+
+export interface SpanParagraphProps {
+  x: number
+  y: number
+  spans: TextSpan[]
+  charsPerLine?: number
+  lineHeight?: number
+  bodyColor?: string
+  highlightColor?: string
+  fontSize?: number
+}
+
+function escapeXml(s: string): string {
+  return s
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function sliceSpans(spans: TextSpan[], start: number, end: number): TextSpan[] {
+  const out: TextSpan[] = []
+  let cursor = 0
+  for (const span of spans) {
+    const spanStart = cursor
+    const spanEnd = cursor + span.text.length
+    cursor = spanEnd
+    if (spanEnd <= start || spanStart >= end) continue
+    const sliceStart = Math.max(0, start - spanStart)
+    const sliceEnd = span.text.length - Math.max(0, spanEnd - end)
+    const txt = span.text.slice(sliceStart, sliceEnd)
+    if (txt.length === 0) continue
+    out.push(span.highlight ? { text: txt, highlight: true } : { text: txt })
+  }
+  return out
+}
+
+export function spanParagraph(
+  props: SpanParagraphProps,
+): { svg: string; lineCount: number } {
+  const chars = props.charsPerLine ?? 36
+  const lh = props.lineHeight ?? 14
+  const bodyColor = props.bodyColor ?? tokens.colors.text.secondary
+  const highlightColor = props.highlightColor ?? tokens.colors.text.accent
+  const size = props.fontSize ?? tokens.typography.sizes.body
+
+  const plain = props.spans.map((s) => s.text).join('')
+  const lines = wrapText({ value: plain, charsPerLine: chars })
+
+  let charOffset = 0
+  const out = lines
+    .map((line, i) => {
+      const lineStart = charOffset
+      const lineEnd = lineStart + line.length
+      charOffset = lineEnd + 1
+      const lineSpans = sliceSpans(props.spans, lineStart, lineEnd)
+      const y = props.y + i * lh
+      const tspans = lineSpans
+        .map((s) => {
+          const fill = s.highlight ? highlightColor : bodyColor
+          return `<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`
+        })
+        .join('')
+      return `<text x="${props.x}" y="${y}" font-family="${escapeAttr(tokens.typography.sans)}" font-size="${size}">${tspans}</text>`
+    })
+    .join('')
+  return { svg: out, lineCount: lines.length }
+}

package/src/primitives/stat-bar.ts

@@ -0,0 +1,85 @@
+import { el } from './svg.ts'
+import { text } from './text.ts'
+import { tokens } from '../tokens/index.ts'
+
+export interface StatBarProps {
+  x: number
+  y: number
+  width: number
+  label: string
+  abbreviation: string
+  value: number | null // 0..1023, or null for ranges mode (no value text, no fill)
+  color: string
+  inverted?: boolean
+}
+
+export function statBar({
+  x,
+  y,
+  width,
+  label,
+  abbreviation,
+  value,
+  color,
+  inverted,
+}: StatBarProps): string {
+  const h = tokens.spacing.statBarHeight
+
+  let labelOut =
+    text({
+      x,
+      y: y - 6,
+      value: abbreviation,
+      size: tokens.typography.sizes.label,
+      weight: 700,
+      family: tokens.typography.mono,
+      color,
+    }) +
+    text({
+      x: x + 22,
+      y: y - 6,
+      value: label,
+      size: tokens.typography.sizes.stat,
+      weight: 400,
+      color: tokens.colors.text.primary,
+    })
+
+  const track = el('rect', {
+    x,
+    y,
+    width,
+    height: h,
+    rx: h / 2,
+    ry: h / 2,
+    fill: tokens.colors.surface.panelBorder,
+  })
+
+  if (value !== null) {
+    const clamped = Math.max(0, Math.min(1023, value))
+    const displayFraction = inverted ? 1 - clamped / 1023 : clamped / 1023
+    const filled = Math.floor(width * displayFraction)
+
+    labelOut += text({
+      x: x + width,
+      y: y - 6,
+      value: String(clamped),
+      size: tokens.typography.sizes.statValue,
+      weight: 700,
+      color,
+      anchor: 'end',
+    })
+
+    const bar = el('rect', {
+      x,
+      y,
+      width: filled,
+      height: h,
+      rx: h / 2,
+      ry: h / 2,
+      fill: color,
+    })
+    return labelOut + track + bar
+  }
+
+  return labelOut + track
+}

package/src/primitives/svg.ts

@@ -0,0 +1,25 @@
+export function escapeXml(input: string): string {
+  return input
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&apos;')
+}
+
+export type AttrValue = string | number | null | undefined
+
+export function attr(attrs: Record<string, AttrValue>): string {
+  let out = ''
+  for (const [k, v] of Object.entries(attrs)) {
+    if (v === undefined || v === null) continue
+    const value = typeof v === 'number' ? String(v) : escapeXml(v)
+    out += ` ${k}="${value}"`
+  }
+  return out
+}
+
+export function el(tag: string, attrs: Record<string, AttrValue>, children?: string): string {
+  if (children === undefined) return `<${tag}${attr(attrs)}/>`
+  return `<${tag}${attr(attrs)}>${children}</${tag}>`
+}

package/src/primitives/text.ts

@@ -0,0 +1,42 @@
+import { el } from './svg.ts'
+import { tokens } from '../tokens/index.ts'
+
+export interface TextProps {
+  x: number
+  y: number
+  value: string
+  size?: number
+  weight?: 400 | 600 | 700 | 500
+  family?: string
+  color?: string
+  anchor?: 'start' | 'middle' | 'end'
+  letterSpacing?: number
+  dominantBaseline?: 'auto' | 'middle' | 'central' | 'hanging' | 'text-top' | 'text-bottom'
+}
+
+export function text(props: TextProps): string {
+  return el(
+    'text',
+    {
+      x: props.x,
+      y: props.y,
+      'font-family': props.family ?? tokens.typography.sans,
+      'font-size': props.size ?? tokens.typography.sizes.body,
+      'font-weight': props.weight ?? 400,
+      fill: props.color ?? tokens.colors.text.primary,
+      'text-anchor': props.anchor,
+      'letter-spacing': props.letterSpacing,
+      'dominant-baseline': props.dominantBaseline,
+    },
+    escapeValue(props.value),
+  )
+}
+
+function escapeValue(v: string): string {
+  return v
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&apos;')
+}

package/src/primitives/wrap.ts

@@ -0,0 +1,24 @@
+export interface WrapProps {
+  value: string
+  charsPerLine: number
+}
+
+export function wrapText({ value, charsPerLine }: WrapProps): string[] {
+  const words = value.split(/\s+/).filter((w) => w.length > 0)
+  const lines: string[] = []
+  let current = ''
+  for (const word of words) {
+    if (current.length === 0) {
+      current = word
+      continue
+    }
+    if (current.length + 1 + word.length <= charsPerLine) {
+      current += ` ${word}`
+    } else {
+      lines.push(current)
+      current = word
+    }
+  }
+  if (current.length > 0) lines.push(current)
+  return lines
+}

package/src/render.ts

@@ -0,0 +1,33 @@
+import { resolveItem, type ResolvedItem } from '@shipload/sdk'
+import type { CargoItem } from './payload/codec.ts'
+import { decodePayload } from './payload/codec.ts'
+import { renderByType } from './templates/index.ts'
+import { UnknownItemError } from './errors.ts'
+
+export interface RenderOptions {
+  width?: number
+  theme?: 'dark' | 'light'
+}
+
+export function renderItem(
+  item: CargoItem,
+  resolved: ResolvedItem,
+  _opts?: RenderOptions,
+): string {
+  return renderByType(item, resolved)
+}
+
+export async function renderFromPayload(
+  payload: string,
+  opts?: RenderOptions,
+): Promise<{ svg: string; item: ResolvedItem }> {
+  const cargoItem = decodePayload(payload)
+  let resolved: ResolvedItem
+  try {
+    resolved = resolveItem(cargoItem.item_id, cargoItem.stats, cargoItem.modules)
+  } catch {
+    throw new UnknownItemError(Number(BigInt(cargoItem.item_id.toString())))
+  }
+  const svg = renderItem(cargoItem, resolved, opts)
+  return { svg, item: resolved }
+}

package/src/templates/_shared.ts

@@ -0,0 +1,15 @@
+import { tokens } from '../tokens/index.ts'
+
+export function formatMass(n: number): string {
+  return n.toLocaleString('en-US')
+}
+
+export function tierBorder(tier: string): string {
+  const key = tier.toLowerCase() as keyof typeof tokens.colors.tier
+  return tokens.colors.tier[key] ?? tokens.colors.surface.panelBorder
+}
+
+export function shortCode(itemId: number): string {
+  const str = itemId.toString(10)
+  return str.slice(-2).padStart(2, '0')
+}