@shipload/item-renderer 1.0.0-next.4 → 1.0.0-next.41

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 {
-    if (quantity <= 1) return ''
-    const label = `×${quantity}`
+export function quantityBadge({
+    x,
+    y,
+    quantity,
+    label: labelOverride,
+    tone,
+}: QuantityBadgeProps): string {
+    if (quantity <= 0) return ''
+    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/resource-icon.ts

@@ -0,0 +1,242 @@
+import {CATEGORY_LABELS, categoryColors, type ResourceCategory} from '@shipload/sdk'
+import {el, escapeXml} from './svg.ts'
+
+export const resourceIconCategories = [
+    'ore',
+    'crystal',
+    'gas',
+    'regolith',
+    'biomass',
+] as const satisfies readonly ResourceCategory[]
+
+export interface ResourceIconSvgOpts {
+    size?: number
+    title?: string
+    className?: string
+}
+
+export interface ResourceIconInlineOpts {
+    x: number
+    y: number
+    size: number
+}
+
+const OUTLINE = '#06142f'
+const HILITE = '#f7fbff'
+const OUTER_STROKE = 4
+const DETAIL_STROKE = 2.5
+
+function oreIcon(): string {
+    return [
+        el('path', {
+            d: 'M13 24 L25 11 L43 13 L55 27 L48 49 L27 56 L12 42 Z',
+            fill: categoryColors.ore,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+            'stroke-linejoin': 'round',
+        }),
+        el('path', {d: 'M25 11 L31 30 L13 24 Z', fill: '#e39a5e'}),
+        el('path', {d: 'M31 30 L43 13 L55 27 L41 32 Z', fill: '#b85b35'}),
+        el('path', {d: 'M31 30 L41 32 L48 49 L27 56 Z', fill: '#8f432e'}),
+        el('path', {
+            d: 'M31 30 L25 11 M31 30 L13 24 M31 30 L41 32 M41 32 L48 49 M31 30 L27 56',
+            fill: 'none',
+            stroke: OUTLINE,
+            'stroke-width': 1.5,
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round',
+            opacity: 0.28,
+        }),
+        el('path', {
+            d: 'M21 23 L27 18 M42 20 L48 27',
+            fill: 'none',
+            stroke: '#ffd29c',
+            'stroke-width': DETAIL_STROKE,
+            'stroke-linecap': 'round',
+            opacity: 0.72,
+        }),
+    ].join('')
+}
+
+function crystalIcon(): string {
+    return [
+        el('path', {
+            d: 'M32 6 L49 24 L39 58 L23 58 L14 25 Z',
+            fill: categoryColors.crystal,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+            'stroke-linejoin': 'round',
+        }),
+        el('path', {d: 'M32 6 L32 58 L14 25 Z', fill: '#1fb9e4'}),
+        el('path', {d: 'M32 6 L49 24 L32 58 Z', fill: '#8df0ff'}),
+        el('path', {d: 'M23 58 L32 32 L39 58 Z', fill: '#2f87d7', opacity: 0.72}),
+        el('path', {
+            d: 'M32 6 L32 58 M14 25 L32 32 L49 24 M23 58 L32 32 L39 58',
+            fill: 'none',
+            stroke: OUTLINE,
+            'stroke-width': 1.5,
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round',
+            opacity: 0.25,
+        }),
+        el('path', {
+            d: 'M25 20 L31 13 M38 19 L43 25',
+            fill: 'none',
+            stroke: HILITE,
+            'stroke-width': DETAIL_STROKE,
+            'stroke-linecap': 'round',
+            opacity: 0.78,
+        }),
+    ].join('')
+}
+
+function gasIcon(): string {
+    return [
+        el('circle', {
+            cx: 32,
+            cy: 32,
+            r: 23,
+            fill: categoryColors.gas,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+        }),
+        el('path', {
+            d: 'M17 33 C21 20 38 18 44 27 C51 38 37 51 25 43',
+            fill: 'none',
+            stroke: '#7a48d9',
+            'stroke-width': 7.5,
+            'stroke-linecap': 'round',
+        }),
+        el('path', {
+            d: 'M21 33 C25 25 36 25 39 31 C43 38 35 44 28 39',
+            fill: 'none',
+            stroke: '#f0d7ff',
+            'stroke-width': 5,
+            'stroke-linecap': 'round',
+        }),
+        el('circle', {
+            cx: 44,
+            cy: 18,
+            r: 5,
+            fill: '#f0d7ff',
+            stroke: OUTLINE,
+            'stroke-width': DETAIL_STROKE,
+        }),
+        el('circle', {
+            cx: 19,
+            cy: 47,
+            r: 4,
+            fill: '#f0d7ff',
+            stroke: OUTLINE,
+            'stroke-width': DETAIL_STROKE,
+        }),
+    ].join('')
+}
+
+function regolithIcon(): string {
+    return [
+        el('path', {
+            d: 'M16 14 H45 L54 25 V46 L43 55 H17 L9 43 V24 Z',
+            fill: categoryColors.regolith,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+            'stroke-linejoin': 'round',
+        }),
+        el('path', {d: 'M16 14 H45 L54 25 L34 28 Z', fill: '#dec59a'}),
+        el('path', {d: 'M9 43 L34 28 L43 55 H17 Z', fill: '#9e7c55', opacity: 0.78}),
+        el('path', {
+            d: 'M16 14 L34 28 L54 25 M34 28 L43 55 M34 28 L9 43',
+            fill: 'none',
+            stroke: OUTLINE,
+            'stroke-width': 1.5,
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round',
+            opacity: 0.25,
+        }),
+        el('circle', {cx: 25, cy: 28, r: 4, fill: '#806248', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {cx: 42, cy: 40, r: 5, fill: '#8b6a4d', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {
+            cx: 22,
+            cy: 44,
+            r: 3,
+            fill: '#e7d0a9',
+            stroke: OUTLINE,
+            'stroke-width': 1.25,
+        }),
+        el('path', {
+            d: 'M35 18 L45 23',
+            fill: 'none',
+            stroke: '#f0dbb7',
+            'stroke-width': DETAIL_STROKE,
+            'stroke-linecap': 'round',
+            opacity: 0.72,
+        }),
+    ].join('')
+}
+
+function biomassIcon(): string {
+    return [
+        el('path', {
+            d: 'M32 7 C37 14 42 17 50 16 C50 24 54 29 57 35 C51 39 48 44 47 52 C39 50 36 55 31 59 C27 52 21 50 13 53 C14 45 10 40 7 34 C13 29 14 23 12 16 C21 18 26 14 32 7 Z',
+            fill: categoryColors.biomass,
+            stroke: OUTLINE,
+            'stroke-width': OUTER_STROKE,
+            'stroke-linejoin': 'round',
+        }),
+        el('circle', {cx: 32, cy: 32, r: 13, fill: '#73ad49', stroke: OUTLINE, 'stroke-width': 2}),
+        el('circle', {cx: 27, cy: 28, r: 5, fill: '#a8db6f', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {cx: 38, cy: 34, r: 5, fill: '#2f6f35', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {cx: 30, cy: 41, r: 4, fill: '#89c85a', stroke: OUTLINE, 'stroke-width': 1.5}),
+        el('circle', {
+            cx: 40,
+            cy: 24,
+            r: 3,
+            fill: '#c9ef8a',
+            stroke: OUTLINE,
+            'stroke-width': 1.25,
+        }),
+    ].join('')
+}
+
+const iconBodies: Record<ResourceCategory, string> = {
+    ore: oreIcon(),
+    crystal: crystalIcon(),
+    gas: gasIcon(),
+    regolith: regolithIcon(),
+    biomass: biomassIcon(),
+}
+
+export function resourceIconBody(category: ResourceCategory): string {
+    return iconBodies[category]
+}
+
+export function resourceIcon(category: ResourceCategory, opts: ResourceIconInlineOpts): string {
+    const scale = opts.size / 64
+    return el(
+        'g',
+        {transform: `translate(${opts.x} ${opts.y}) scale(${scale})`, 'data-resource': category},
+        resourceIconBody(category)
+    )
+}
+
+export function resourceIconSvg(
+    category: ResourceCategory,
+    opts: ResourceIconSvgOpts = {}
+): string {
+    const size = opts.size ?? 64
+    const title = opts.title ?? `${CATEGORY_LABELS[category]} resource icon`
+    const children = `<title>${escapeXml(title)}</title>${resourceIconBody(category)}`
+    return el(
+        'svg',
+        {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: size,
+            height: size,
+            viewBox: '0 0 64 64',
+            role: 'img',
+            class: opts.className,
+            'aria-label': title,
+        },
+        children
+    )
+}

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

@@ -1,6 +1,7 @@
 import {el} from './svg.ts'
 import {text} from './text.ts'
 import {tokens} from '../tokens/index.ts'
+import {statStars, STAR_BLOCK_WIDTH} from './stat-stars.ts'
 
 export interface StatBarProps {
     x: number
@@ -11,6 +12,7 @@ export interface StatBarProps {
     value: number | null // 0..1023, or null for ranges mode (no value text, no fill)
     color: string
     inverted?: boolean
+    stars?: number // 0..3 per-stat rating; only drawn in values mode
 }
 
 export function statBar({
@@ -22,6 +24,7 @@ export function statBar({
     value,
     color,
     inverted,
+    stars,
 }: StatBarProps): string {
     const h = tokens.spacing.statBarHeight
 
@@ -59,16 +62,29 @@ export function statBar({
         const displayFraction = inverted ? 1 - clamped / 1023 : clamped / 1023
         const filled = Math.floor(width * displayFraction)
 
+        const VALUE_COL_W = 34 // room for up to 4 mono digits at size 14, anchored end
+
+        // 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',
         })
 
+        // stars sit immediately left of the reserved value column
+        if (stars !== undefined) {
+            labelOut += statStars({
+                x: x + width - VALUE_COL_W - STAR_BLOCK_WIDTH,
+                y: y - 6,
+                n: stars,
+            })
+        }
+
         const bar = el('rect', {
             x,
             y,

package/src/primitives/stat-stars.ts

@@ -0,0 +1,36 @@
+import {el} from './svg.ts'
+
+// 24×24 path, identical to the webapp ItemStatRow star.
+const STAR_PATH =
+    'M12 2.2l2.95 5.98 6.6.96-4.77 4.65 1.13 6.57L12 17.23 6.09 20.36l1.13-6.57L2.45 9.14l6.6-.96z'
+
+export const STAR_SIZE = 9
+export const STAR_GAP = 1
+export const MAX_STARS = 3
+export const STAR_BLOCK_WIDTH = MAX_STARS * STAR_SIZE + (MAX_STARS - 1) * STAR_GAP
+
+const ON_COLOR = '#ffce5c'
+const EMPTY_COLOR = 'rgba(255,255,255,0.16)'
+const SCALE = STAR_SIZE / 24
+
+export interface StatStarsProps {
+    x: number // left edge of the star block
+    y: number // vertical center the stars should sit on (text baseline)
+    n: number
+}
+
+// Draws MAX_STARS glyphs left-to-right starting at x; the first `n` are filled.
+export function statStars({x, y, n}: StatStarsProps): string {
+    const filled = Math.max(0, Math.min(MAX_STARS, Math.floor(n)))
+    const top = y - STAR_SIZE + 1 // center the glyph on the text baseline
+    let out = ''
+    for (let i = 0; i < MAX_STARS; i++) {
+        const gx = x + i * (STAR_SIZE + STAR_GAP)
+        out += el('path', {
+            d: STAR_PATH,
+            transform: `translate(${gx} ${top}) scale(${SCALE})`,
+            fill: i < filled ? ON_COLOR : EMPTY_COLOR,
+        })
+    }
+    return out
+}

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/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}
+}