@shipload/item-renderer 1.0.0-next.19 → 1.0.0-next.20

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@shipload/item-renderer",
-    "version": "1.0.0-next.19",
+    "version": "1.0.0-next.20",
     "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.19",
+        "@shipload/sdk": "^1.0.0-next.20",
         "@wharfkit/antelope": "1.2.0"
     },
     "devDependencies": {

package/src/primitives/module-slot.ts

@@ -71,7 +71,7 @@ export function moduleSlot(props: ModuleSlotProps): string {
         )
     }
 
-    const accent = props.accentColor ?? tokens.colors.text.accent
+    const accent = props.accentColor ?? tokens.colors.accent.component
     const label = `${props.capability ?? 'Module'}: `
 
     const desc = props.description
@@ -89,7 +89,7 @@ export function moduleSlot(props: ModuleSlotProps): string {
                 value: label.trimEnd(),
                 size: tokens.typography.sizes.body,
                 weight: 600,
-                color: tokens.colors.text.primary,
+                color: accent,
             })
         )
     }
@@ -99,9 +99,9 @@ export function moduleSlot(props: ModuleSlotProps): string {
     const combined = label + descPlain
     const lines = wrapText({value: combined, charsPerLine: 36})
 
-    const highlightColor = tokens.colors.text.accent
+    const highlightColor = tokens.colors.text.primary
     const bodyColor = tokens.colors.text.secondary
-    const labelColor = tokens.colors.text.primary
+    const labelColor = accent
     const size = tokens.typography.sizes.body
     const fontFamily = escapeXml(tokens.typography.sans)
     const labelEnd = label.length

package/src/primitives/quantity-badge.ts

@@ -6,11 +6,19 @@ export interface QuantityBadgeProps {
     x: number
     y: number
     quantity: number
+    label?: string
+    tone: string
 }
 
-export function quantityBadge({x, y, quantity}: QuantityBadgeProps): string {
+export function quantityBadge({
+    x,
+    y,
+    quantity,
+    label: labelOverride,
+    tone,
+}: QuantityBadgeProps): string {
     if (quantity <= 0) return ''
-    const label = `×${quantity}`
+    const label = labelOverride ?? `×${quantity}`
     const w = label.length * 7 + 12
     const h = tokens.spacing.quantityBadgeHeight
     return (
@@ -21,7 +29,9 @@ export function quantityBadge({x, y, quantity}: QuantityBadgeProps): string {
             height: h,
             rx: h / 2,
             ry: h / 2,
-            fill: tokens.colors.text.accent,
+            fill: tokens.colors.surface.panel,
+            stroke: tone,
+            'stroke-width': 1.5,
         }) +
         text({
             x: x - w / 2,
@@ -30,7 +40,7 @@ export function quantityBadge({x, y, quantity}: QuantityBadgeProps): string {
             size: tokens.typography.sizes.label,
             weight: 700,
             family: tokens.typography.mono,
-            color: tokens.colors.surface.background,
+            color: tokens.colors.text.primary,
             anchor: 'middle',
         })
     )

package/src/primitives/span-paragraph.ts

@@ -43,7 +43,7 @@ export function spanParagraph(props: SpanParagraphProps): {svg: string; lineCoun
     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 highlightColor = props.highlightColor ?? tokens.colors.text.primary
     const size = props.fontSize ?? tokens.typography.sizes.body
 
     const plain = props.spans.map((s) => s.text).join('')

package/src/primitives/stat-bar.ts

@@ -59,13 +59,15 @@ export function statBar({
         const displayFraction = inverted ? 1 - clamped / 1023 : clamped / 1023
         const filled = Math.floor(width * displayFraction)
 
+        // value text = primary; identity color = bar + code + chrome
         labelOut += text({
             x: x + width,
             y: y - 6,
             value: String(clamped),
             size: tokens.typography.sizes.statValue,
             weight: 700,
-            color,
+            family: tokens.typography.mono,
+            color: tokens.colors.text.primary,
             anchor: 'end',
         })
 

package/src/primitives/text.ts

@@ -1,6 +1,14 @@
 import {el} from './svg.ts'
 import {tokens} from '../tokens/index.ts'
 
+export interface TextSpan {
+    value: string
+    size?: number
+    weight?: 400 | 600 | 700 | 500
+    color?: string
+    dx?: number
+}
+
 export interface TextProps {
     x: number
     y: number
@@ -12,9 +20,14 @@ export interface TextProps {
     anchor?: 'start' | 'middle' | 'end'
     letterSpacing?: number
     dominantBaseline?: 'auto' | 'middle' | 'central' | 'hanging' | 'text-top' | 'text-bottom'
+    // Optional trailing tspans that flow inline after value (no manual width math).
+    spans?: TextSpan[]
 }
 
 export function text(props: TextProps): string {
+    const body = props.spans?.length
+        ? escapeValue(props.value) + props.spans.map(renderSpan).join('')
+        : escapeValue(props.value)
     return el(
         'text',
         {
@@ -28,7 +41,20 @@ export function text(props: TextProps): string {
             'letter-spacing': props.letterSpacing,
             'dominant-baseline': props.dominantBaseline,
         },
-        escapeValue(props.value)
+        body
+    )
+}
+
+function renderSpan(span: TextSpan): string {
+    return el(
+        'tspan',
+        {
+            dx: span.dx,
+            'font-size': span.size,
+            'font-weight': span.weight,
+            fill: span.color,
+        },
+        escapeValue(span.value)
     )
 }
 

package/src/templates/_shared.ts

@@ -1,4 +1,5 @@
-import {formatMassScaled} from '@shipload/sdk'
+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'
@@ -16,12 +17,58 @@ export function shortCode(itemId: number): string {
     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

package/src/templates/component.ts

@@ -1,16 +1,8 @@
-import type {ResolvedItem, ResourceCategory} from '@shipload/sdk'
-import {
-    formatTier,
-    getRecipe,
-    getStatDefinitions,
-    categoryColors,
-    displayName,
-    formatLocation,
-} 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 {statBar} from '../primitives/stat-bar.ts'
 import {quantityBadge} from '../primitives/quantity-badge.ts'
 import {tokens} from '../tokens/index.ts'
@@ -19,10 +11,13 @@ import {
     formatMass,
     tierBorder,
     metaRowBlock,
+    titleText,
     BADGE_Y,
     HEADER_H,
     ICON_Y,
-    META_BLOCK_GAP,
+    STAT_BLOCK_GAP,
+    STAT_ROW_H,
+    BOTTOM_PAD,
 } from './_shared.ts'
 
 export interface RenderComponentOpts {
@@ -48,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 {
@@ -63,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 [
@@ -72,51 +70,44 @@ export function renderComponent(
                     label: def.label,
                     abbreviation: def.abbreviation,
                     value: null,
-                    color: categoryColors[category],
+                    color: identity,
                     inverted: def.inverted,
                 },
             ]
         })
     }
 
+    const quantity = Number(BigInt(item.quantity.toString()))
     const metaRows = [
-        {label: 'Type', value: `COMPONENT · ${formatTier(resolved.tier)}`},
-        {label: 'Mass', value: formatMass(resolved.mass)},
+        {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 + META_BLOCK_GAP
-    const statsH = rows.length * 26 + 8
-    const height = statsYStart + statsH + pad
+    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 + BADGE_Y, quantity})
+    const badge = quantityBadge({x: w - pad, y: pad + BADGE_Y, quantity, tone: identity})
 
     const icon = iconHex({
         x: pad,
         y: pad + ICON_Y,
-        color: tokens.colors.accent.component,
+        color: identity,
         code: shortCode(resolved.itemId),
     })
 
-    const name = text({
-        x: pad + 34,
-        y: pad + 22,
-        value: displayName(resolved),
-        size: tokens.typography.sizes.title,
-        weight: 700,
-        family: tokens.typography.display,
-    })
+    const name = titleText(pad + 34, pad + 22, resolved)
 
     const statsSvg = rows
         .map((row, i) =>
             statBar({
                 x: pad,
-                y: statsYStart + i * 26,
+                y: statsYStart + i * STAT_ROW_H,
                 width: innerW,
                 label: row.label,
                 abbreviation: row.abbreviation,

package/src/templates/module.ts

@@ -1,10 +1,9 @@
 import type {ResolvedItem} from '@shipload/sdk'
-import {describeModuleForItem, displayName, formatLocation, renderDescription} from '@shipload/sdk'
+import {describeModuleForItem, 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 {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'
@@ -13,17 +12,16 @@ import {
     formatMass,
     tierBorder,
     metaRowBlock,
+    titleText,
+    capabilityColor,
     BADGE_Y,
     HEADER_H,
     ICON_Y,
     META_BLOCK_GAP,
+    CAP_HEADER_H,
+    BODY_TAIL,
 } from './_shared.ts'
 
-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 interface RenderModuleOpts {
     mode?: 'values' | 'ranges'
     location?: {x: number; y: number}
@@ -40,13 +38,13 @@ export function renderModule(
     const innerW = w - pad * 2
 
     const group = resolved.attributes?.[0]
-    const attrs = group?.attributes ?? []
     const desc = mode === 'values' ? describeModuleForItem(resolved) : undefined
 
     const capabilityName = group?.capability ?? resolved.name.replace(/\s+T\d+$/i, '')
 
+    const quantity = Number(BigInt(item.quantity.toString()))
     const metaRows = [
-        {label: 'Mass', value: formatMass(resolved.mass)},
+        {label: 'Mass', value: formatMass(resolved.mass * Math.max(quantity, 1))},
         ...(opts?.location ? [{label: 'Location', value: formatLocation(opts.location)}] : []),
     ]
 
@@ -54,118 +52,54 @@ export function renderModule(
     const {svg: metaSvg, height: metaH} = metaRowBlock(pad, metaYStart, innerW, metaRows)
     const bodyYStart = metaYStart + metaH + META_BLOCK_GAP
 
-    let bodyHeight = 0
-    if (mode === 'ranges') {
-        bodyHeight = 20 + 8
-    } else if (desc && group) {
-        const plain = renderDescription(desc)
-            .map((s) => s.text)
-            .join('')
-        const lines = plain.split(/\s+/).reduce(
-            (acc, word) => {
-                const last = acc[acc.length - 1] ?? ''
-                if (last.length === 0) return [...acc.slice(0, -1), word]
-                if (last.length + 1 + word.length <= 36)
-                    return [...acc.slice(0, -1), `${last} ${word}`]
-                return [...acc, word]
-            },
-            ['']
-        )
-        const lineCount = lines.filter((l) => l.length > 0).length
-        bodyHeight = 20 + lineCount * 14 + 8
-    } else if (group && attrs.length > 0) {
-        const capHeaderH = 22
-        const attrsH = attrs.length * 18
-        bodyHeight = capHeaderH + attrsH + 8
-    }
-
-    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 + BADGE_Y, quantity})
-
     const iconColor = group ? capabilityColor(group.capability) : capabilityColor(capabilityName)
-    const icon = iconHex({
-        x: pad,
-        y: pad + ICON_Y,
-        color: iconColor,
-        code: shortCode(resolved.itemId),
-    })
 
-    const name = text({
-        x: pad + 34,
-        y: pad + 22,
-        value: displayName(resolved),
-        size: tokens.typography.sizes.title,
+    const capLabel = (group?.capability ?? capabilityName).toUpperCase()
+    const capHeader = text({
+        x: pad,
+        y: bodyYStart + 16,
+        value: capLabel,
+        size: tokens.typography.sizes.subtitle,
         weight: 700,
-        family: tokens.typography.display,
+        family: tokens.typography.sans,
+        color: iconColor,
+        letterSpacing: 1,
     })
 
-    let capSection = ''
-    if (mode === 'ranges') {
-        const accentColor = capabilityColor(capabilityName)
-        capSection = text({
-            x: pad,
-            y: bodyYStart + 16,
-            value: capabilityName.toUpperCase(),
-            size: tokens.typography.sizes.subtitle,
-            weight: 700,
-            family: tokens.typography.sans,
-            color: accentColor,
-            letterSpacing: 1,
-        })
-    } else if (desc && group) {
-        const accentColor = capabilityColor(group.capability)
-        const capHeader = text({
-            x: pad,
-            y: bodyYStart + 16,
-            value: group.capability.toUpperCase(),
-            size: tokens.typography.sizes.subtitle,
-            weight: 700,
-            family: tokens.typography.sans,
-            color: accentColor,
-            letterSpacing: 1,
-        })
+    let bodyHeight: number
+    let capSection: string
+    if (mode === 'values' && desc && group) {
         const spans = renderDescription(desc)
-        const {svg: paraSvg} = spanParagraph({
+        const {svg: paraSvg, lineCount} = spanParagraph({
             x: pad,
             y: bodyYStart + 36,
             spans,
             charsPerLine: 36,
             lineHeight: 14,
+            highlightColor: tokens.colors.text.primary,
         })
+        bodyHeight = CAP_HEADER_H + lineCount * 14 + BODY_TAIL
         capSection = capHeader + paraSvg
-    } else if (group && attrs.length > 0) {
-        const capY = bodyYStart + 22
-        const capHeader = text({
-            x: pad,
-            y: capY,
-            value: group.capability.toUpperCase(),
-            size: 10,
-            weight: 700,
-            family: tokens.typography.sans,
-            color: capabilityColor(group.capability),
-            letterSpacing: 0.8,
-        })
-
-        const attrRows = attrs
-            .map((attr, i) => {
-                const displayValue = String(attr.value)
-                return compactRow({
-                    x: pad,
-                    y: capY + 14 + i * 18,
-                    width: innerW,
-                    label: attr.label,
-                    value: displayValue,
-                })
-            })
-            .join('')
-
-        capSection = capHeader + attrRows
+    } else {
+        bodyHeight = CAP_HEADER_H + BODY_TAIL
+        capSection = capHeader
     }
 
+    const height = bodyYStart + bodyHeight + pad
+
+    const chrome = panel({width: w, height, borderColor: tierBorder(resolved.tier)})
+
+    const badge = quantityBadge({x: w - pad, y: pad + BADGE_Y, quantity, tone: iconColor})
+
+    const icon = iconHex({
+        x: pad,
+        y: pad + ICON_Y,
+        color: iconColor,
+        code: shortCode(resolved.itemId),
+    })
+
+    const name = titleText(pad + 34, pad + 22, resolved)
+
     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,18 +1,28 @@
 import type {ResolvedItem, ResolvedModuleSlot} from '@shipload/sdk'
-import {describeModuleForSlot, displayName, renderDescription} from '@shipload/sdk'
+import {baseName, describeModuleForSlot, renderDescription} from '@shipload/sdk'
 import type {CargoItem} from '../payload/codec.ts'
 import {renderShipPanel, type ShipPanelSlot} from './ship-panel.ts'
 
+function capabilityFromName(name: string): string {
+    return name.replace(/\s+T\d+\s*$/i, '').trim()
+}
+
 function slotToPanelSlot(slot: ResolvedModuleSlot): ShipPanelSlot {
     if (!slot.installed || !slot.attributes || !slot.name) {
         return {installed: false}
     }
+    const capability = capabilityFromName(slot.name)
     const desc = describeModuleForSlot(slot)
     if (desc) {
-        return {name: slot.name, installed: true, description: renderDescription(desc)}
+        return {
+            name: slot.name,
+            installed: true,
+            capability,
+            description: renderDescription(desc),
+        }
     }
     const shorthand = slot.attributes.map((a) => `${a.value} ${a.label.toLowerCase()}`).join(' · ')
-    return {name: slot.name, installed: true, description: shorthand}
+    return {name: slot.name, installed: true, capability, description: shorthand}
 }
 
 export interface RenderPackedEntityOpts {
@@ -28,7 +38,7 @@ export function renderPackedEntity(
     const quantity = Number(BigInt(item.quantity.toString()))
     const slots = (resolved.moduleSlots ?? []).map(slotToPanelSlot)
     return renderShipPanel({
-        name: `${displayName(resolved)} (Packed)`,
+        name: baseName(resolved),
         tier: resolved.tier,
         quantity,
         location: opts?.location,

package/src/templates/resource.ts

@@ -1,9 +1,8 @@
 import type {ResolvedItem} from '@shipload/sdk'
-import {getStatDefinitions, categoryColors, displayName, formatLocation} from '@shipload/sdk'
+import {getStatDefinitions, categoryColors, 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 {statBar} from '../primitives/stat-bar.ts'
 import {quantityBadge} from '../primitives/quantity-badge.ts'
 import {tokens} from '../tokens/index.ts'
@@ -12,10 +11,13 @@ import {
     formatMass,
     tierBorder,
     metaRowBlock,
+    titleText,
     BADGE_Y,
     HEADER_H,
     ICON_Y,
-    META_BLOCK_GAP,
+    STAT_BLOCK_GAP,
+    STAT_ROW_H,
+    BOTTOM_PAD,
 } from './_shared.ts'
 
 function categoryColor(category?: string): string {
@@ -71,42 +73,43 @@ export function renderResource(
     }
 
     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 = statsYStart + statsH + pad
+    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 identity = categoryColor(resolved.category)
+
     const quantity = Number(BigInt(item.quantity.toString()))
-    const badge = quantityBadge({x: w - pad, y: pad + BADGE_Y, quantity})
+    const badge = quantityBadge({
+        x: w - pad,
+        y: pad + BADGE_Y,
+        quantity,
+        label: formatMass(quantity * resolved.mass),
+        tone: identity,
+    })
 
     const icon = iconHex({
         x: pad,
         y: pad + ICON_Y,
-        color: categoryColor(resolved.category),
+        color: identity,
         code: shortCode(resolved.itemId),
     })
 
-    const name = text({
-        x: pad + 34,
-        y: pad + 22,
-        value: displayName(resolved),
-        size: tokens.typography.sizes.title,
-        weight: 700,
-        family: tokens.typography.display,
-    })
+    const name = titleText(pad + 34, pad + 22, resolved)
 
     const statsSvg = rows
         .map((row, i) =>
             statBar({
                 x: pad,
-                y: statsYStart + i * 26,
+                y: statsYStart + i * STAT_ROW_H,
                 width: innerW,
                 label: row.label,
                 abbreviation: row.abbreviation,

package/src/templates/ship-panel.ts

@@ -2,18 +2,29 @@ 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 {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'
+import {
+    tierBorder,
+    metaRowBlock,
+    titleParts,
+    capabilityColor,
+    BADGE_Y,
+    HEADER_H,
+    ICON_Y,
+    BOTTOM_PAD,
+} from './_shared.ts'
 
 const HULL_MASS_LABELS = new Set(['mass', 'capacity'])
 
+const ENTITY_COLOR = tokens.colors.brand.cyan
+
 export interface ShipPanelSlot {
     name?: string
     installed: boolean
+    capability?: string
     description?: string | TextSpan[]
 }
 
@@ -34,8 +45,7 @@ function formatHullValue(label: string, value: number): string {
 
 const MODULE_LABEL_PREFIX = (capability: string) => `${capability}: `
 
-function rowHeightFor(slot: ShipPanelSlot): number {
-    if (!slot.installed) return 24
+function lineCountFor(slot: ShipPanelSlot): number {
     const desc = slot.description
     const plain =
         typeof desc === 'string'
@@ -43,12 +53,25 @@ function rowHeightFor(slot: ShipPanelSlot): number {
             : Array.isArray(desc)
               ? desc.map((s) => s.text).join('')
               : ''
-    if (plain.length === 0) return 24
-    const combined = MODULE_LABEL_PREFIX(slot.name ?? 'Module') + plain
-    const lineCount = Math.max(1, wrapText({value: combined, charsPerLine: 36}).length)
+    if (plain.length === 0) return 0
+    const combined = MODULE_LABEL_PREFIX(slot.capability ?? slot.name ?? 'Module') + plain
+    return Math.max(1, wrapText({value: combined, charsPerLine: 36}).length)
+}
+
+function rowHeightFor(slot: ShipPanelSlot): number {
+    if (!slot.installed) return 24
+    const lineCount = lineCountFor(slot)
+    if (lineCount === 0) return 24
     return 10 + lineCount * 14
 }
 
+function contentBottomOffsetFor(slot: ShipPanelSlot): number {
+    if (!slot.installed) return 14
+    const lineCount = lineCountFor(slot)
+    if (lineCount === 0) return 14
+    return 9 + (lineCount - 1) * 14 + 5
+}
+
 export function renderShipPanel(props: ShipPanelProps): string {
     const w = tokens.spacing.panelWidth
     const pad = tokens.spacing.panelPadding
@@ -69,45 +92,47 @@ export function renderShipPanel(props: ShipPanelProps): string {
     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 = metaYStart + metaH + sectionGap + modulesHeight + pad
+    const slotsYStart = metaYStart + metaH + sectionGap
+
+    let y = slotsYStart
+    let modulesSvg = ''
+    let lastContentBottom = slotsYStart
+    props.slots.forEach((slot, i) => {
+        const accentColor = slot.installed
+            ? capabilityColor(slot.capability ?? slot.name ?? 'Module')
+            : ENTITY_COLOR
+        modulesSvg += moduleSlot({
+            x: pad,
+            y,
+            width: innerW,
+            installed: slot.installed,
+            capability: slot.capability ?? slot.name,
+            description: slot.description,
+            accentColor,
+        })
+        lastContentBottom = y + contentBottomOffsetFor(slot)
+        if (i < props.slots.length - 1) y += rowHeightFor(slot)
+    })
+
+    const height = lastContentBottom + BOTTOM_PAD
 
     const chrome = panel({width: w, height, borderColor: tierBorder(props.tier)})
 
     const icon = iconHex({
         x: pad,
         y: pad + ICON_Y,
-        color: tokens.colors.text.accent,
+        color: ENTITY_COLOR,
         code: 'SH',
     })
 
-    const name = text({
-        x: pad + 34,
-        y: pad + 22,
-        value: props.name,
-        size: tokens.typography.sizes.title,
-        weight: 700,
-        family: tokens.typography.display,
-    })
-
-    const badge = quantityBadge({x: w - pad, y: pad + BADGE_Y, quantity})
+    const name = titleParts(pad + 34, pad + 22, props.name, props.tier)
 
-    let y = metaYStart + metaH + sectionGap
-    let modulesSvg = ''
-    for (let i = 0; i < props.slots.length; i++) {
-        const slot = props.slots[i]!
-        modulesSvg += moduleSlot({
-            x: pad,
-            y,
-            width: innerW,
-            installed: slot.installed,
-            capability: slot.name,
-            description: slot.description,
-            accentColor: tokens.colors.brand.teal,
-        })
-        y += rowHeights[i]!
-    }
+    const badge = quantityBadge({
+        x: w - pad,
+        y: pad + BADGE_Y,
+        quantity,
+        tone: ENTITY_COLOR,
+    })
 
     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>`

package/src/tokens/colors.ts

@@ -10,7 +10,7 @@ export const colors = {
     text: {
         primary: '#e6e8ec',
         secondary: '#8f98a8',
-        muted: '#5b6373',
+        muted: '#7c8698',
         accent: '#f4c96b',
     },
     brand: {
@@ -27,7 +27,7 @@ export const colors = {
     },
     tier: tierColors,
     accent: {
-        component: '#8f98a8',
+        component: '#7E93C4',
     },
     capability: {
         engine: '#4a8abf',

package/src/primitives/compact-row.ts

@@ -1,38 +0,0 @@
-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',
-        })
-    )
-}