@shipload/item-renderer 0.2.2 → 1.0.0-beta1

package/src/primitives/panel.ts

@@ -1,24 +1,24 @@
-import { el } from './svg.ts'
-import { tokens } from '../tokens/index.ts'
+import {el} from './svg.ts'
+import {tokens} from '../tokens/index.ts'
 
 export interface PanelProps {
-  width: number
-  height: number
-  borderColor?: string
+    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,
-  })
+    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

@@ -1,37 +1,37 @@
-import { el } from './svg.ts'
-import { text } from './text.ts'
-import { tokens } from '../tokens/index.ts'
+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
+    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',
-    })
-  )
+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

@@ -1,72 +1,70 @@
-import { wrapText } from './wrap.ts'
-import { escapeXml as escapeAttr } from './svg.ts'
-import { tokens } from '../tokens/index.ts'
-import type { TextSpan } from '@shipload/sdk'
+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
+    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;')
+    return s
+        .replace(/&/g, '&amp;')
+        .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
+    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
+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 })
+    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>`
+    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 `<text x="${props.x}" y="${y}" font-family="${escapeAttr(tokens.typography.sans)}" font-size="${size}">${tspans}</text>`
-    })
-    .join('')
-  return { svg: out, lineCount: lines.length }
+    return {svg: out, lineCount: lines.length}
 }

package/src/primitives/stat-bar.ts

@@ -1,85 +1,85 @@
-import { el } from './svg.ts'
-import { text } from './text.ts'
-import { tokens } from '../tokens/index.ts'
+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
+    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,
-  })
+    label,
+    abbreviation,
+    value,
+    color,
+    inverted,
+}: StatBarProps): string {
+    const h = tokens.spacing.statBarHeight
 
-  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)
+    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,
+        })
 
-    labelOut += text({
-      x: x + width,
-      y: y - 6,
-      value: String(clamped),
-      size: tokens.typography.sizes.statValue,
-      weight: 700,
-      color,
-      anchor: 'end',
+    const track = el('rect', {
+        x,
+        y,
+        width,
+        height: h,
+        rx: h / 2,
+        ry: h / 2,
+        fill: tokens.colors.surface.panelBorder,
     })
 
-    const bar = el('rect', {
-      x,
-      y,
-      width: filled,
-      height: h,
-      rx: h / 2,
-      ry: h / 2,
-      fill: color,
-    })
-    return labelOut + track + bar
-  }
+    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
+    return labelOut + track
 }

package/src/primitives/svg.ts

@@ -1,25 +1,25 @@
 export function escapeXml(input: string): string {
-  return input
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&apos;')
+    return input
+        .replaceAll('&', '&amp;')
+        .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
+    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}>`
+    if (children === undefined) return `<${tag}${attr(attrs)}/>`
+    return `<${tag}${attr(attrs)}>${children}</${tag}>`
 }

package/src/primitives/text.ts

@@ -1,42 +1,42 @@
-import { el } from './svg.ts'
-import { tokens } from '../tokens/index.ts'
+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'
+    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),
-  )
+    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;')
+    return v
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&apos;')
 }

package/src/primitives/wrap.ts

@@ -1,24 +1,24 @@
 export interface WrapProps {
-  value: string
-  charsPerLine: number
+    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
+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 + 1 + word.length <= charsPerLine) {
-      current += ` ${word}`
-    } else {
-      lines.push(current)
-      current = word
-    }
-  }
-  if (current.length > 0) lines.push(current)
-  return lines
+    if (current.length > 0) lines.push(current)
+    return lines
 }

package/src/render.ts

@@ -1,33 +1,29 @@
-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'
+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'
+    width?: number
+    theme?: 'dark' | 'light'
 }
 
-export function renderItem(
-  item: CargoItem,
-  resolved: ResolvedItem,
-  _opts?: RenderOptions,
-): string {
-  return renderByType(item, resolved)
+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 }
+    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

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