@shipload/item-renderer 1.0.0-next.12 → 1.0.0-next.14

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@shipload/item-renderer",
-    "version": "1.0.0-next.12",
+    "version": "1.0.0-next.14",
     "description": "Deterministic SVG rendering for Shipload items",
     "homepage": "https://github.com/shipload/toolkit/tree/master/packages/item-renderer",
     "repository": {
@@ -45,7 +45,7 @@
         "fonts:copy": "bun run scripts/copy-fonts.ts"
     },
     "dependencies": {
-        "@shipload/sdk": "^1.0.0-next.12",
+        "@shipload/sdk": "^1.0.0-next.14",
         "@wharfkit/antelope": "1.2.0"
     },
     "devDependencies": {

package/src/index.ts

@@ -5,8 +5,18 @@ export const VERSION = '0.1.0'
 export {InvalidPayloadError, UnknownItemError, RenderError} from './errors.ts'
 
 // Payload
-export {encodePayload, decodePayload} from './payload/codec.ts'
-export type {CargoItem, CargoItemLike} from './payload/codec.ts'
+export {
+    encodeCargoItem,
+    decodeCargoItem,
+    encodeNftPayload,
+    decodeNftPayload,
+} from './payload/codec.ts'
+export type {
+    CargoItem,
+    CargoItemLike,
+    NftItemPayload,
+    NftItemPayloadLike,
+} from './payload/codec.ts'
 
 // Rendering
 export {renderItem, renderFromPayload, type RenderOptions} from './render.ts'

package/src/links.ts

@@ -1,24 +1,27 @@
 import type {CargoItem} from './payload/codec.ts'
-import {encodePayload} from './payload/codec.ts'
+import {encodeCargoItem, encodeNftPayload} from './payload/codec.ts'
 
 const DEFAULT_WEBSITE_BASE = 'https://shiploadgame.com'
 const DEFAULT_IMAGE_BASE = 'https://item.shiploadgame.com'
 
 export function linkToItemPage(item: CargoItem, baseUrl = DEFAULT_WEBSITE_BASE): string {
-    const payload = encodePayload(item)
+    const payload = encodeCargoItem(item)
     return `${baseUrl}/guide/item/${payload}`
 }
 
 export function linkToItemImage(
     item: CargoItem,
     ext: 'png' | 'svg',
-    baseUrl = DEFAULT_IMAGE_BASE
+    opts?: {location?: {x: number | bigint; y: number | bigint}; baseUrl?: string}
 ): string {
-    const payload = encodePayload(item)
-    return `${baseUrl}/item/${payload}.${ext}`
+    const payload = encodeNftPayload({item, location: opts?.location ?? null})
+    return `${opts?.baseUrl ?? DEFAULT_IMAGE_BASE}/item/${payload}.${ext}`
 }
 
-export function linkToItemSocial(item: CargoItem, baseUrl = DEFAULT_IMAGE_BASE): string {
-    const payload = encodePayload(item)
-    return `${baseUrl}/social/${payload}.png`
+export function linkToItemSocial(
+    item: CargoItem,
+    opts?: {location?: {x: number | bigint; y: number | bigint}; baseUrl?: string}
+): string {
+    const payload = encodeNftPayload({item, location: opts?.location ?? null})
+    return `${opts?.baseUrl ?? DEFAULT_IMAGE_BASE}/social/${payload}.png`
 }

package/src/meta.ts

@@ -32,7 +32,7 @@ export function itemPageMeta(
     return {
         title: `${displayName(resolved)} · Shipload Guide`,
         description: describeItem(resolved),
-        ogImage: linkToItemSocial(item, opts?.imageBaseUrl),
+        ogImage: linkToItemSocial(item, {baseUrl: opts?.imageBaseUrl}),
         ogImageWidth: SOCIAL_CARD_WIDTH,
         ogImageHeight: SOCIAL_CARD_HEIGHT,
     }

package/src/payload/codec.ts

@@ -6,13 +6,16 @@ import {base64UrlToBytes, bytesToBase64Url} from './base64url.ts'
 export type CargoItem = InstanceType<typeof ServerContract.Types.cargo_item>
 export type CargoItemLike = Parameters<typeof ServerContract.Types.cargo_item.from>[0]
 
-export function encodePayload(input: CargoItemLike): string {
+export type NftItemPayload = InstanceType<typeof ServerContract.Types.nft_item_payload>
+export type NftItemPayloadLike = Parameters<typeof ServerContract.Types.nft_item_payload.from>[0]
+
+export function encodeCargoItem(input: CargoItemLike): string {
     const item = ServerContract.Types.cargo_item.from(input)
     const bytes = Serializer.encode({object: item}).array
     return bytesToBase64Url(bytes)
 }
 
-export function decodePayload(input: string): CargoItem {
+export function decodeCargoItem(input: string): CargoItem {
     if (input.length === 0) throw new InvalidPayloadError('empty payload')
     const bytes = base64UrlToBytes(input)
     try {
@@ -24,3 +27,22 @@ export function decodePayload(input: string): CargoItem {
         throw new InvalidPayloadError(`cargo_item decode failed: ${(e as Error).message}`)
     }
 }
+
+export function encodeNftPayload(input: NftItemPayloadLike): string {
+    const payload = ServerContract.Types.nft_item_payload.from(input)
+    const bytes = Serializer.encode({object: payload}).array
+    return bytesToBase64Url(bytes)
+}
+
+export function decodeNftPayload(input: string): NftItemPayload {
+    if (input.length === 0) throw new InvalidPayloadError('empty payload')
+    const bytes = base64UrlToBytes(input)
+    try {
+        return Serializer.decode({
+            data: bytes,
+            type: ServerContract.Types.nft_item_payload,
+        }) as NftItemPayload
+    } catch (e) {
+        throw new InvalidPayloadError(`nft_item_payload decode failed: ${(e as Error).message}`)
+    }
+}

package/src/primitives/quantity-badge.ts

@@ -9,7 +9,7 @@ export interface QuantityBadgeProps {
 }
 
 export function quantityBadge({x, y, quantity}: QuantityBadgeProps): string {
-    if (quantity <= 1) return ''
+    if (quantity <= 0) return ''
     const label = `×${quantity}`
     const w = label.length * 7 + 12
     const h = tokens.spacing.quantityBadgeHeight

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,10 @@
+import {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 +15,64 @@ export function shortCode(itemId: number): string {
     const str = itemId.toString(10)
     return str.slice(-2).padStart(2, '0')
 }
+
+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 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,33 @@
 import type {ResolvedItem, ResourceCategory} from '@shipload/sdk'
-import {formatTier, getRecipe, getStatDefinitions, categoryColors} from '@shipload/sdk'
+import {
+    formatTier,
+    getRecipe,
+    getStatDefinitions,
+    categoryColors,
+    displayNameWithTier,
+    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,
+    BADGE_Y,
+    HEADER_H,
+    ICON_Y,
+    META_BLOCK_GAP,
+} from './_shared.ts'
 
 export interface RenderComponentOpts {
     mode?: 'values' | 'ranges'
+    location?: {x: number; y: number}
 }
 
 type StatRow = {
@@ -63,19 +79,26 @@ export function renderComponent(
         })
     }
 
-    const headerH = 48
-    const metaRowH = 28
+    const metaRows = [
+        {label: 'Type', value: `COMPONENT · ${formatTier(resolved.tier)}`},
+        {label: 'Mass', value: formatMass(resolved.mass)},
+        ...(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 + META_BLOCK_GAP
     const statsH = rows.length * 26 + 8
-    const height = headerH + metaRowH + 14 + statsH + pad
+    const height = statsYStart + statsH + 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})
 
     const icon = iconHex({
         x: pad,
-        y: pad + 4,
+        y: pad + ICON_Y,
         color: tokens.colors.accent.component,
         code: shortCode(resolved.itemId),
     })
@@ -83,51 +106,17 @@ export function renderComponent(
     const name = text({
         x: pad + 34,
         y: pad + 22,
-        value: resolved.name,
+        value: displayNameWithTier(resolved),
         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 statsSvg = rows
         .map((row, i) =>
             statBar({
                 x: pad,
-                y: sepY + 18 + i * 26,
+                y: statsYStart + i * 26,
                 width: innerW,
                 label: row.label,
                 abbreviation: row.abbreviation,
@@ -138,7 +127,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/module.ts

@@ -1,15 +1,28 @@
 import type {ResolvedItem} from '@shipload/sdk'
-import {describeModuleForItem, formatTier, renderDescription} from '@shipload/sdk'
+import {
+    describeModuleForItem,
+    displayNameWithTier,
+    formatLocation,
+    renderDescription,
+} 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 {compactRow} from '../primitives/compact-row.ts'
 import {quantityBadge} from '../primitives/quantity-badge.ts'
 import {spanParagraph} from '../primitives/span-paragraph.ts'
 import {tokens} from '../tokens/index.ts'
-import {shortCode, formatMass, tierBorder} from './_shared.ts'
+import {
+    shortCode,
+    formatMass,
+    tierBorder,
+    metaRowBlock,
+    BADGE_Y,
+    HEADER_H,
+    ICON_Y,
+    META_BLOCK_GAP,
+} from './_shared.ts'
 
 function capabilityColor(name: string): string {
     const key = name.toLowerCase().replace(/\s+/g, '') as keyof typeof tokens.colors.capability
@@ -18,6 +31,7 @@ function capabilityColor(name: string): string {
 
 export interface RenderModuleOpts {
     mode?: 'values' | 'ranges'
+    location?: {x: number; y: number}
 }
 
 export function renderModule(
@@ -36,9 +50,14 @@ export function renderModule(
 
     const capabilityName = group?.capability ?? resolved.name.replace(/\s+T\d+$/i, '')
 
-    const headerH = 48
-    const metaRowH = 28
-    const sepY = pad + headerH + metaRowH + 6
+    const metaRows = [
+        {label: 'Mass', value: formatMass(resolved.mass)},
+        ...(opts?.location ? [{label: 'Location', value: formatLocation(opts.location)}] : []),
+    ]
+
+    const metaYStart = pad + HEADER_H
+    const {svg: metaSvg, height: metaH} = metaRowBlock(pad, metaYStart, innerW, metaRows)
+    const bodyYStart = metaYStart + metaH + META_BLOCK_GAP
 
     let bodyHeight = 0
     if (mode === 'ranges') {
@@ -65,17 +84,17 @@ export function renderModule(
         bodyHeight = capHeaderH + attrsH + 8
     }
 
-    const height = headerH + metaRowH + 14 + bodyHeight + pad
+    const height = bodyYStart + bodyHeight + 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})
 
     const iconColor = group ? capabilityColor(group.capability) : capabilityColor(capabilityName)
     const icon = iconHex({
         x: pad,
-        y: pad + 4,
+        y: pad + ICON_Y,
         color: iconColor,
         code: shortCode(resolved.itemId),
     })
@@ -83,52 +102,18 @@ export function renderModule(
     const name = text({
         x: pad + 34,
         y: pad + 22,
-        value: resolved.name,
+        value: displayNameWithTier(resolved),
         size: tokens.typography.sizes.title,
         weight: 700,
         family: tokens.typography.display,
     })
 
-    const subtitleLabel = 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: `MODULE · ${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 sep = divider({x: pad, y: sepY, width: innerW})
-
     let capSection = ''
     if (mode === 'ranges') {
         const accentColor = capabilityColor(capabilityName)
         capSection = text({
             x: pad,
-            y: sepY + 16,
+            y: bodyYStart + 16,
             value: capabilityName.toUpperCase(),
             size: tokens.typography.sizes.subtitle,
             weight: 700,
@@ -140,7 +125,7 @@ export function renderModule(
         const accentColor = capabilityColor(group.capability)
         const capHeader = text({
             x: pad,
-            y: sepY + 16,
+            y: bodyYStart + 16,
             value: group.capability.toUpperCase(),
             size: tokens.typography.sizes.subtitle,
             weight: 700,
@@ -151,14 +136,14 @@ export function renderModule(
         const spans = renderDescription(desc)
         const {svg: paraSvg} = spanParagraph({
             x: pad,
-            y: sepY + 36,
+            y: bodyYStart + 36,
             spans,
             charsPerLine: 36,
             lineHeight: 14,
         })
         capSection = capHeader + paraSvg
     } else if (group && attrs.length > 0) {
-        const capY = sepY + 22
+        const capY = bodyYStart + 22
         const capHeader = text({
             x: pad,
             y: capY,
@@ -186,7 +171,7 @@ export function renderModule(
         capSection = capHeader + attrRows
     }
 
-    const inner = `${chrome}${icon}${name}${badge}${subtitleLabel}${subtitleValue}${massLabel}${massValue}${sep}${capSection}`
+    const inner = `${chrome}${icon}${name}${badge}${metaSvg}${capSection}`
 
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
 }

package/src/templates/packed-entity.ts

@@ -1,5 +1,5 @@
 import type {ResolvedItem, ResolvedModuleSlot} from '@shipload/sdk'
-import {describeModuleForSlot, renderDescription} from '@shipload/sdk'
+import {describeModuleForSlot, displayNameWithTier, renderDescription} from '@shipload/sdk'
 import type {CargoItem} from '../payload/codec.ts'
 import {renderShipPanel, type ShipPanelSlot} from './ship-panel.ts'
 
@@ -15,13 +15,23 @@ function slotToPanelSlot(slot: ResolvedModuleSlot): ShipPanelSlot {
     return {name: slot.name, installed: true, description: shorthand}
 }
 
-export function renderPackedEntity(item: CargoItem, resolved: ResolvedItem): string {
+export interface RenderPackedEntityOpts {
+    mode?: 'values' | 'ranges'
+    location?: {x: number; y: number}
+}
+
+export function renderPackedEntity(
+    item: CargoItem,
+    resolved: ResolvedItem,
+    opts?: RenderPackedEntityOpts
+): string {
     const quantity = Number(BigInt(item.quantity.toString()))
     const slots = (resolved.moduleSlots ?? []).map(slotToPanelSlot)
     return renderShipPanel({
-        name: `${resolved.name} (Packed)`,
+        name: `${displayNameWithTier(resolved)} (Packed)`,
         tier: resolved.tier,
         quantity,
+        location: opts?.location,
         attributes: resolved.attributes ?? [],
         slots,
     })

package/src/templates/resource.ts

@@ -1,22 +1,27 @@
 import type {ResolvedItem} from '@shipload/sdk'
-import {getStatDefinitions, categoryColors, displayName} from '@shipload/sdk'
+import {
+    getStatDefinitions,
+    categoryColors,
+    displayNameWithTier,
+    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'
-
-const CATEGORY_LABELS: Record<string, string> = {
-    ore: 'Ore',
-    crystal: 'Crystal',
-    gas: 'Gas',
-    regolith: 'Regolith',
-    biomass: 'Biomass',
-}
+import {
+    shortCode,
+    formatMass,
+    tierBorder,
+    metaRowBlock,
+    BADGE_Y,
+    HEADER_H,
+    ICON_Y,
+    META_BLOCK_GAP,
+} from './_shared.ts'
 
 function categoryColor(category?: string): string {
     if (!category) return tokens.colors.text.muted
@@ -26,6 +31,7 @@ function categoryColor(category?: string): string {
 
 export interface RenderResourceOpts {
     mode?: 'values' | 'ranges'
+    location?: {x: number; y: number}
 }
 
 type StatRow = {
@@ -69,19 +75,25 @@ export function renderResource(
         }))
     }
 
-    const headerH = 48
-    const metaRowH = 28
+    const metaRows = [
+        {label: 'Mass', value: formatMass(resolved.mass)},
+        ...(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 + META_BLOCK_GAP
     const statsH = rows.length * 26 + 8
-    const height = headerH + metaRowH + 14 + statsH + pad
+    const height = statsYStart + statsH + 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})
 
     const icon = iconHex({
         x: pad,
-        y: pad + 4,
+        y: pad + ICON_Y,
         color: categoryColor(resolved.category),
         code: shortCode(resolved.itemId),
     })
@@ -89,52 +101,17 @@ export function renderResource(
     const name = text({
         x: pad + 34,
         y: pad + 22,
-        value: displayName(resolved),
+        value: displayNameWithTier(resolved),
         size: tokens.typography.sizes.title,
         weight: 700,
         family: tokens.typography.display,
     })
 
-    const catLabel = resolved.category ? (CATEGORY_LABELS[resolved.category] ?? 'Item') : 'Item'
-    const catText = text({
-        x: pad,
-        y: pad + headerH + 4,
-        value: 'Category',
-        size: tokens.typography.sizes.body,
-        color: tokens.colors.text.secondary,
-    })
-    const catValue = text({
-        x: w - pad,
-        y: pad + headerH + 4,
-        value: catLabel,
-        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 statsSvg = rows
         .map((row, i) =>
             statBar({
                 x: pad,
-                y: sepY + 18 + i * 26,
+                y: statsYStart + i * 26,
                 width: innerW,
                 label: row.label,
                 abbreviation: row.abbreviation,
@@ -145,7 +122,7 @@ export function renderResource(
         )
         .join('')
 
-    const inner = `${chrome}${icon}${name}${badge}${catText}${catValue}${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/ship-panel.ts

@@ -1,12 +1,15 @@
 import type {TextSpan} from '@shipload/sdk'
+import {formatLocation, formatMassScaled} from '@shipload/sdk'
 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 {moduleSlot} from '../primitives/module-slot.ts'
 import {quantityBadge} from '../primitives/quantity-badge.ts'
 import {wrapText} from '../primitives/wrap.ts'
 import {tokens} from '../tokens/index.ts'
+import {tierBorder, metaRowBlock, BADGE_Y, HEADER_H, ICON_Y} from './_shared.ts'
+
+const HULL_MASS_LABELS = new Set(['mass', 'capacity'])
 
 export interface ShipPanelSlot {
     name?: string
@@ -18,16 +21,15 @@ export interface ShipPanelProps {
     name: string
     tier: number
     quantity?: number
+    location?: {x: number; y: number}
     attributes: {capability: string; attributes: {label: string; value: number}[]}[]
     slots: ShipPanelSlot[]
 }
 
-function formatNumber(n: number): string {
-    return n.toLocaleString('en-US')
-}
-
-function tierBorder(tier: number): string {
-    return tokens.colors.tier[tier] ?? tokens.colors.surface.panelBorder
+function formatHullValue(label: string, value: number): string {
+    return HULL_MASS_LABELS.has(label.toLowerCase())
+        ? formatMassScaled(value)
+        : value.toLocaleString('en-US')
 }
 
 const MODULE_LABEL_PREFIX = (capability: string) => `${capability}: `
@@ -54,22 +56,28 @@ export function renderShipPanel(props: ShipPanelProps): string {
     const quantity = props.quantity ?? 0
 
     const hullGroup = props.attributes?.find((g) => g.capability.toLowerCase() === 'hull')
-    const hullRows = hullGroup?.attributes ?? []
+    const hullAttrs = (hullGroup?.attributes ?? []).map((a) => ({
+        label: a.label,
+        value: formatHullValue(a.label, a.value),
+    }))
+    const metaRows = props.location
+        ? [{label: 'Location', value: formatLocation(props.location)}, ...hullAttrs]
+        : hullAttrs
 
-    const headerH = 48
-    const hullHeaderH = 20
-    const hullRowH = 22
     const sectionGap = 12
+
+    const metaYStart = pad + HEADER_H
+    const {svg: metaSvg, height: metaH} = metaRowBlock(pad, metaYStart, innerW, metaRows)
+
     const rowHeights = props.slots.map(rowHeightFor)
     const modulesHeight = rowHeights.reduce((a, b) => a + b, 0)
-    const height =
-        headerH + hullHeaderH + hullRows.length * hullRowH + sectionGap + modulesHeight + pad
+    const height = metaYStart + metaH + sectionGap + modulesHeight + pad
 
     const chrome = panel({width: w, height, borderColor: tierBorder(props.tier)})
 
     const icon = iconHex({
         x: pad,
-        y: pad + 4,
+        y: pad + ICON_Y,
         color: tokens.colors.text.accent,
         code: 'SH',
     })
@@ -83,47 +91,9 @@ export function renderShipPanel(props: ShipPanelProps): string {
         family: tokens.typography.display,
     })
 
-    const badge = quantityBadge({x: w - pad, y: pad, quantity})
-
-    const hullHeader = text({
-        x: pad,
-        y: pad + headerH,
-        value: 'HULL',
-        size: tokens.typography.sizes.subtitle,
-        weight: 700,
-        color: tokens.colors.text.secondary,
-        letterSpacing: 1,
-    })
-
-    let y = pad + headerH + 6
-    let hullSvg = ''
-    for (const row of hullRows) {
-        hullSvg +=
-            text({
-                x: pad,
-                y: y + 12,
-                value: row.label,
-                size: tokens.typography.sizes.body,
-                color: tokens.colors.text.secondary,
-            }) +
-            text({
-                x: w - pad,
-                y: y + 12,
-                value: formatNumber(row.value),
-                size: tokens.typography.sizes.body,
-                weight: 700,
-                anchor: 'end',
-            }) +
-            divider({
-                x: pad,
-                y: y + hullRowH - 4,
-                width: innerW,
-                color: tokens.colors.surface.panelBorderBright,
-            })
-        y += hullRowH
-    }
+    const badge = quantityBadge({x: w - pad, y: pad + BADGE_Y, quantity})
 
-    y += sectionGap
+    let y = metaYStart + metaH + sectionGap
     let modulesSvg = ''
     for (let i = 0; i < props.slots.length; i++) {
         const slot = props.slots[i]!
@@ -139,6 +109,6 @@ export function renderShipPanel(props: ShipPanelProps): string {
         y += rowHeights[i]!
     }
 
-    const inner = `${chrome}${icon}${name}${badge}${hullHeader}${hullSvg}${modulesSvg}`
+    const inner = `${chrome}${icon}${name}${badge}${metaSvg}${modulesSvg}`
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
 }