@shipload/item-renderer 1.0.0-next.5 → 1.0.0-next.51

package/src/render.ts

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

package/src/templates/_shared.ts

@@ -1,7 +1,11 @@
+import type {ResolvedItem} from '@shipload/sdk'
+import {baseName, formatMassScaled} from '@shipload/sdk'
+import {text} from '../primitives/text.ts'
+import {divider} from '../primitives/divider.ts'
 import {tokens} from '../tokens/index.ts'
 
-export function formatMass(n: number): string {
-    return n.toLocaleString('en-US')
+export function formatMass(kg: number): string {
+    return formatMassScaled(kg)
 }
 
 export function tierBorder(tier: number): string {
@@ -12,3 +16,110 @@ export function shortCode(itemId: number): string {
     const str = itemId.toString(10)
     return str.slice(-2).padStart(2, '0')
 }
+
+export function capabilityColor(name: string): string {
+    const key = name.toLowerCase().replace(/\s+/g, '') as keyof typeof tokens.colors.capability
+    return tokens.colors.capability[key] ?? tokens.colors.accent.component
+}
+
+export const META_ROW_H = 22
+export const HEADER_H = 48
+export const ICON_Y = 4
+export const BADGE_Y = 6
+export const META_BLOCK_GAP = 16
+
+export const STAT_ROW_H = 26
+export const CAP_HEADER_H = 22
+export const CAP_ROW_H = 18
+export const BODY_TAIL = 8
+
+// Gap from the meta block to the first stat row. Resources/components have no
+// body sub-header, and statBar draws its label 6px above its y, so this is
+// META_BLOCK_GAP plus the offset that puts the first stat label level with
+// where module/entity body sections begin — keeping the meta→body gap uniform.
+export const STAT_BLOCK_GAP = META_BLOCK_GAP + 22
+
+// Uniform gap between a card's last body element and the bottom frame edge.
+// Cards size their height to (last element bottom) + BOTTOM_PAD so trailing
+// space is consistent across resource / component / module / entity types.
+export const BOTTOM_PAD = 22
+
+export function titleParts(x: number, y: number, name: string, tier: number): string {
+    return text({
+        x,
+        y,
+        value: name,
+        size: tokens.typography.sizes.title,
+        weight: 700,
+        family: tokens.typography.display,
+        spans: [
+            {
+                value: `T${tier}`,
+                dx: 6,
+                size: tokens.typography.sizes.subtitle,
+                weight: 700,
+                color: tokens.colors.text.secondary,
+            },
+        ],
+    })
+}
+
+export function titleText(x: number, y: number, resolved: ResolvedItem): string {
+    // Prominent base name; tier rendered as a smaller, muted inline suffix.
+    return titleParts(x, y, baseName(resolved), resolved.tier)
+}
+
+export interface MetaRowProps {
+    x: number
+    y: number
+    width: number
+    label: string
+    value: string
+    showDivider?: boolean
+}
+
+export function metaRow({x, y, width, label, value, showDivider = true}: MetaRowProps): string {
+    const labelText = text({
+        x,
+        y: y + 12,
+        value: label,
+        size: tokens.typography.sizes.body,
+        color: tokens.colors.text.secondary,
+    })
+    const valueText = text({
+        x: x + width,
+        y: y + 12,
+        value,
+        size: tokens.typography.sizes.body,
+        weight: 700,
+        anchor: 'end',
+    })
+    const sep = showDivider
+        ? divider({
+              x,
+              y: y + META_ROW_H - 4,
+              width,
+              color: tokens.colors.surface.panelBorderBright,
+          })
+        : ''
+    return labelText + valueText + sep
+}
+
+export function metaRowBlock(
+    x: number,
+    yStart: number,
+    width: number,
+    rows: {label: string; value: string}[]
+): {svg: string; height: number} {
+    let svg = ''
+    rows.forEach((row, i) => {
+        svg += metaRow({
+            x,
+            y: yStart + i * META_ROW_H,
+            width,
+            ...row,
+            showDivider: i < rows.length - 1,
+        })
+    })
+    return {svg, height: rows.length * META_ROW_H}
+}

package/src/templates/component.ts

@@ -1,17 +1,28 @@
-import type {ResolvedItem, ResourceCategory} from '@shipload/sdk'
-import {formatTier, getRecipe, getStatDefinitions, categoryColors} from '@shipload/sdk'
+import type {ResolvedItem} from '@shipload/sdk'
+import {getRecipe, getStatDefinitions, resolveItemCategory, formatLocation} from '@shipload/sdk'
 import type {CargoItem} from '../payload/codec.ts'
 import {panel} from '../primitives/panel.ts'
 import {iconHex} from '../primitives/icon-hex.ts'
-import {text} from '../primitives/text.ts'
-import {divider} from '../primitives/divider.ts'
 import {statBar} from '../primitives/stat-bar.ts'
 import {quantityBadge} from '../primitives/quantity-badge.ts'
 import {tokens} from '../tokens/index.ts'
-import {shortCode, formatMass, tierBorder} from './_shared.ts'
+import {
+    shortCode,
+    formatMass,
+    tierBorder,
+    metaRowBlock,
+    titleText,
+    BADGE_Y,
+    HEADER_H,
+    ICON_Y,
+    STAT_BLOCK_GAP,
+    STAT_ROW_H,
+    BOTTOM_PAD,
+} from './_shared.ts'
 
 export interface RenderComponentOpts {
     mode?: 'values' | 'ranges'
+    location?: {x: number; y: number}
 }
 
 type StatRow = {
@@ -32,13 +43,15 @@ export function renderComponent(
     const pad = tokens.spacing.panelPadding
     const innerW = w - pad * 2
 
+    const identity = tokens.colors.accent.component
+
     let rows: StatRow[]
     if (mode === 'values') {
         rows = (resolved.stats ?? []).map((s) => ({
             label: s.label,
             abbreviation: s.abbreviation,
             value: s.value,
-            color: s.color,
+            color: identity,
             inverted: s.inverted,
         }))
     } else {
@@ -47,8 +60,9 @@ export function renderComponent(
             const src = slot.sources[0]
             if (!src) return []
             const input = recipe!.inputs[src.inputIndex]
-            if (!input || !('category' in input)) return []
-            const category = input.category as ResourceCategory
+            if (!input) return []
+            const category = resolveItemCategory(input.itemId)
+            if (!category) return []
             const def = getStatDefinitions(category)[src.statIndex]
             if (!def) return []
             return [
@@ -56,78 +70,44 @@ export function renderComponent(
                     label: def.label,
                     abbreviation: def.abbreviation,
                     value: null,
-                    color: categoryColors[category],
+                    color: identity,
                     inverted: def.inverted,
                 },
             ]
         })
     }
 
-    const headerH = 48
-    const metaRowH = 28
-    const statsH = rows.length * 26 + 8
-    const height = headerH + metaRowH + 14 + statsH + pad
+    const quantity = Number(BigInt(item.quantity.toString()))
+    const metaRows = [
+        {label: 'Mass', value: formatMass(resolved.mass * Math.max(quantity, 1))},
+        ...(opts?.location ? [{label: 'Location', value: formatLocation(opts.location)}] : []),
+    ]
+
+    const metaYStart = pad + HEADER_H
+    const {svg: metaSvg, height: metaH} = metaRowBlock(pad, metaYStart, innerW, metaRows)
+    const statsYStart = metaYStart + metaH + STAT_BLOCK_GAP
+    const statsBottom =
+        statsYStart + Math.max(0, rows.length - 1) * STAT_ROW_H + tokens.spacing.statBarHeight
+    const height = statsBottom + BOTTOM_PAD
 
     const chrome = panel({width: w, height, borderColor: tierBorder(resolved.tier)})
 
-    const quantity = Number(BigInt(item.quantity.toString()))
-    const badge = quantityBadge({x: w - pad, y: pad, quantity})
+    const badge = quantityBadge({x: w - pad, y: pad + BADGE_Y, quantity, tone: identity})
 
     const icon = iconHex({
         x: pad,
-        y: pad + 4,
-        color: tokens.colors.accent.component,
+        y: pad + ICON_Y,
+        color: identity,
         code: shortCode(resolved.itemId),
     })
 
-    const name = text({
-        x: pad + 34,
-        y: pad + 22,
-        value: resolved.name,
-        size: tokens.typography.sizes.title,
-        weight: 700,
-        family: tokens.typography.display,
-    })
-
-    const subtitleText = text({
-        x: pad,
-        y: pad + headerH + 4,
-        value: 'Type',
-        size: tokens.typography.sizes.body,
-        color: tokens.colors.text.secondary,
-    })
-    const subtitleValue = text({
-        x: w - pad,
-        y: pad + headerH + 4,
-        value: `COMPONENT · ${formatTier(resolved.tier)}`,
-        size: tokens.typography.sizes.body,
-        weight: 600,
-        anchor: 'end',
-    })
-    const massLabel = text({
-        x: pad,
-        y: pad + headerH + metaRowH - 8,
-        value: 'Mass',
-        size: tokens.typography.sizes.body,
-        color: tokens.colors.text.secondary,
-    })
-    const massValue = text({
-        x: w - pad,
-        y: pad + headerH + metaRowH - 8,
-        value: formatMass(resolved.mass),
-        size: tokens.typography.sizes.body,
-        weight: 600,
-        anchor: 'end',
-    })
-
-    const sepY = pad + headerH + metaRowH + 6
-    const sep = divider({x: pad, y: sepY, width: innerW})
+    const name = titleText(pad + 34, pad + 22, resolved)
 
     const statsSvg = rows
         .map((row, i) =>
             statBar({
                 x: pad,
-                y: sepY + 18 + i * 26,
+                y: statsYStart + i * STAT_ROW_H,
                 width: innerW,
                 label: row.label,
                 abbreviation: row.abbreviation,
@@ -138,7 +118,7 @@ export function renderComponent(
         )
         .join('')
 
-    const inner = `${chrome}${icon}${name}${badge}${subtitleText}${subtitleValue}${massLabel}${massValue}${sep}${statsSvg}`
+    const inner = `${chrome}${icon}${name}${badge}${metaSvg}${statsSvg}`
 
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
 }

package/src/templates/index.ts

@@ -8,6 +8,7 @@ import {renderModule} from './module.ts'
 
 export interface RenderByTypeOpts {
     mode?: 'values' | 'ranges'
+    location?: {x: number; y: number}
 }
 
 export function renderByType(
@@ -19,7 +20,7 @@ export function renderByType(
         case 'resource':
             return renderResource(item, resolved, opts)
         case 'entity':
-            return renderPackedEntity(item, resolved)
+            return renderPackedEntity(item, resolved, opts)
         case 'component':
             return renderComponent(item, resolved, opts)
         case 'module':

package/src/templates/item-cell.ts

@@ -1,14 +1,37 @@
 import type {ResolvedItem} from '@shipload/sdk'
-import {tierColors, categoryColors, categoryIconShapes} from '@shipload/sdk'
+import {tierColors} from '@shipload/sdk'
 import {el} from '../primitives/svg.ts'
 import {text} from '../primitives/text.ts'
-import {categoryIconPath} from '../primitives/category-icon.ts'
+import {componentIcon, componentIconSlugForName} from '../primitives/component-icon.ts'
+import {entityIcon, entityIconSlugForName} from '../primitives/entity-icon.ts'
+import {moduleIcon, moduleIconSlugForName} from '../primitives/module-icon.ts'
+import {resourceIcon} from '../primitives/resource-icon.ts'
+import {stationEntityIcon, stationEntityIconKindForName} from '../primitives/station-entity-icon.ts'
 import {tokens} from '../tokens/index.ts'
 
 export interface ItemCellProps {
     resolved: ResolvedItem
     quantity?: number
     size?: number
+    quantityColor?: string
+    quantityPrefix?: string
+    iconImageHref?: string
+}
+
+export function abbreviateQuantity(n: number): string {
+    const abs = Math.abs(n)
+    if (abs < 1000) return String(n)
+    const units = [
+        {v: 1e9, s: 'b'},
+        {v: 1e6, s: 'm'},
+        {v: 1e3, s: 'k'},
+    ]
+    for (const u of units) {
+        if (abs >= u.v) {
+            return (n / u.v).toFixed(1).replace(/\.0$/, '') + u.s
+        }
+    }
+    return String(n)
 }
 
 export interface ItemCellGroupProps extends ItemCellProps {
@@ -34,37 +57,103 @@ function cellInner(props: ItemCellProps): string {
         'stroke-width': 1.5,
     })
 
+    const qty = props.quantity ?? 0
+    const showQuantity = props.quantityPrefix ? qty >= 1 : qty > 1
+
     let content = ''
-    if (props.resolved.abbreviation) {
-        const iconCy = size * 0.45
-        content = text({
-            x: cx,
-            y: iconCy,
-            value: props.resolved.abbreviation,
-            size: Math.round(size * 0.28),
-            weight: 700,
-            anchor: 'middle',
-            color: tokens.colors.text.primary,
-            family: tokens.typography.display,
+    const componentSlug =
+        props.resolved.itemType === 'component'
+            ? componentIconSlugForName(props.resolved.name)
+            : null
+    const stationEntityKind =
+        props.resolved.itemType === 'entity'
+            ? stationEntityIconKindForName(props.resolved.name)
+            : null
+    const entitySlug =
+        props.resolved.itemType === 'entity' ? entityIconSlugForName(props.resolved.name) : null
+    const moduleSlug =
+        props.resolved.itemType === 'module' ? moduleIconSlugForName(props.resolved.name) : null
+
+    if (props.iconImageHref) {
+        const iconSize = Math.round(size * (showQuantity ? 0.72 : 0.9))
+        const iconY = showQuantity ? Math.round(size * 0.08) : Math.round(height / 2 - iconSize / 2)
+        content = el('image', {
+            href: props.iconImageHref,
+            x: (size - iconSize) / 2,
+            y: iconY,
+            width: iconSize,
+            height: iconSize,
+            preserveAspectRatio: 'xMidYMid meet',
+        })
+    } else if (componentSlug) {
+        const iconSize = Math.round(size * (showQuantity ? 0.66 : 0.84))
+        const iconY = showQuantity ? Math.round(size * 0.12) : Math.round(height / 2 - iconSize / 2)
+        content = componentIcon(componentSlug, {
+            x: (size - iconSize) / 2,
+            y: iconY,
+            size: iconSize,
+        })
+    } else if (stationEntityKind) {
+        const iconSize = Math.round(size * (showQuantity ? 0.66 : 0.84))
+        const iconY = showQuantity ? Math.round(size * 0.12) : Math.round(height / 2 - iconSize / 2)
+        content = stationEntityIcon(stationEntityKind, {
+            x: (size - iconSize) / 2,
+            y: iconY,
+            size: iconSize,
         })
+    } else if (entitySlug) {
+        const iconSize = Math.round(size * (showQuantity ? 0.66 : 0.84))
+        const iconY = showQuantity ? Math.round(size * 0.12) : Math.round(height / 2 - iconSize / 2)
+        content = entityIcon(entitySlug, {
+            x: (size - iconSize) / 2,
+            y: iconY,
+            size: iconSize,
+        })
+    } else if (moduleSlug) {
+        const iconSize = Math.round(size * (showQuantity ? 0.66 : 0.84))
+        const iconY = showQuantity ? Math.round(size * 0.12) : Math.round(height / 2 - iconSize / 2)
+        content = moduleIcon(moduleSlug, {
+            x: (size - iconSize) / 2,
+            y: iconY,
+            size: iconSize,
+        })
+    } else if (props.resolved.abbreviation) {
+        content = showQuantity
+            ? text({
+                  x: cx,
+                  y: size * 0.45,
+                  value: props.resolved.abbreviation,
+                  size: Math.round(size * 0.28),
+                  weight: 700,
+                  anchor: 'middle',
+                  color: tokens.colors.text.primary,
+                  family: tokens.typography.display,
+              })
+            : text({
+                  x: cx,
+                  y: height / 2,
+                  value: props.resolved.abbreviation,
+                  size: Math.round(size * 0.36),
+                  weight: 700,
+                  anchor: 'middle',
+                  dominantBaseline: 'central',
+                  color: tokens.colors.text.primary,
+                  family: tokens.typography.display,
+              })
     } else if (props.resolved.category) {
-        const shape = categoryIconShapes[props.resolved.category]
-        const color = categoryColors[props.resolved.category]
-        const iconCy = size * 0.4
-        content = categoryIconPath({
-            shape,
-            cx,
-            cy: iconCy,
-            size: size * 0.32,
-            color,
-            strokeWidth: 1.5,
+        const iconSize = Math.round(size * (showQuantity ? 0.66 : 0.84))
+        const iconY = showQuantity ? Math.round(size * 0.12) : Math.round(height / 2 - iconSize / 2)
+        content = resourceIcon(props.resolved.category, {
+            x: (size - iconSize) / 2,
+            y: iconY,
+            size: iconSize,
         })
     } else if (props.resolved.icon) {
         content = text({
             x: cx,
-            y: size * 0.4,
+            y: showQuantity ? size * 0.4 : height / 2,
             value: props.resolved.icon,
-            size: Math.round(size * 0.44),
+            size: Math.round(size * (showQuantity ? 0.44 : 0.56)),
             weight: 400,
             anchor: 'middle',
             dominantBaseline: 'central',
@@ -72,21 +161,41 @@ function cellInner(props: ItemCellProps): string {
         })
     }
 
-    const qty = props.quantity ?? 0
     let quantityText = ''
-    if (qty > 1) {
-        const qtyFontSize = Math.max(9, Math.round(size * 0.22))
-        const qtyPad = Math.max(3, Math.round(size * 0.12))
-        quantityText = text({
-            x: size - qtyPad,
-            y: height - qtyPad,
-            value: String(qty),
-            size: qtyFontSize,
-            weight: 700,
-            anchor: 'end',
-            color: tokens.colors.text.primary,
-            family: tokens.typography.display,
+    if (showQuantity) {
+        const label = (props.quantityPrefix ?? '') + abbreviateQuantity(qty)
+        const fontSize = Math.max(8, Math.round(size * 0.2))
+        const charW = fontSize * 0.6
+        const padX = Math.max(2, Math.round(fontSize * 0.34))
+        const padY = Math.max(1, Math.round(fontSize * 0.18))
+        const margin = Math.max(2, Math.round(size * 0.06))
+        const plateW = Math.round(label.length * charW) + padX * 2
+        const plateH = fontSize + padY * 2
+        const plateRight = size - margin
+        const plateBottom = height - margin
+        const plate = el('rect', {
+            x: plateRight - plateW,
+            y: plateBottom - plateH,
+            width: plateW,
+            height: plateH,
+            rx: Math.round(plateH / 2),
+            ry: Math.round(plateH / 2),
+            fill: '#050c24',
+            'fill-opacity': 0.82,
         })
+        quantityText =
+            plate +
+            text({
+                x: plateRight - padX,
+                y: plateBottom - plateH / 2,
+                value: label,
+                size: fontSize,
+                weight: 700,
+                anchor: 'end',
+                dominantBaseline: 'central',
+                color: props.quantityColor ?? tokens.colors.text.primary,
+                family: tokens.typography.mono,
+            })
     }
 
     return border + content + quantityText