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

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/station-entity-icon.ts

@@ -0,0 +1,261 @@
+import {getPackedEntityType} from '@shipload/sdk'
+import {el, escapeXml} from './svg.ts'
+
+export const stationEntityIconKinds = [
+    'hub',
+    'warehouse',
+    'extractor',
+    'factory',
+    'mdriver',
+    'mcatcher',
+] as const
+
+export type StationEntityIconKind = (typeof stationEntityIconKinds)[number]
+
+export interface StationEntityIconSvgOpts {
+    size?: number
+    title?: string
+    className?: string
+}
+
+export interface StationEntityIconInlineOpts {
+    x: number
+    y: number
+    size: number
+}
+
+const stationEntityIconLabels: Record<StationEntityIconKind, string> = {
+    hub: 'Station Hub',
+    warehouse: 'Warehouse',
+    extractor: 'Extractor',
+    factory: 'Factory',
+    mdriver: 'Mass Driver',
+    mcatcher: 'Mass Catcher',
+}
+
+const stationEntityIconNames: Record<string, StationEntityIconKind> = {
+    hub: 'hub',
+    'station hub': 'hub',
+    warehouse: 'warehouse',
+    extractor: 'extractor',
+    'mining rig': 'extractor',
+    factory: 'factory',
+    mdriver: 'mdriver',
+    'meteor driver': 'mdriver',
+    'mass driver': 'mdriver',
+    mcatcher: 'mcatcher',
+    'meteor catcher': 'mcatcher',
+    'mass catcher': 'mcatcher',
+}
+
+const kindSet = new Set<string>(stationEntityIconKinds)
+
+function normalizeName(name: string): string {
+    return name
+        .trim()
+        .toLowerCase()
+        .replace(/\s*\(?t\d+\)?$/, '')
+}
+
+export function stationEntityIconLabelForKind(kind: StationEntityIconKind): string {
+    return stationEntityIconLabels[kind]
+}
+
+export function stationEntityIconKindForName(name: string): StationEntityIconKind | null {
+    return stationEntityIconNames[normalizeName(name)] ?? null
+}
+
+export function stationEntityIconKindForPackedItemId(
+    packedItemId: number
+): StationEntityIconKind | null {
+    const kind = getPackedEntityType(packedItemId)?.toString()
+    return kind && kindSet.has(kind) ? (kind as StationEntityIconKind) : null
+}
+
+const OUTLINE = '#070712'
+
+function wrap(children: string): string {
+    return el(
+        'g',
+        {
+            fill: 'none',
+            stroke: OUTLINE,
+            'stroke-width': 8,
+            'stroke-linejoin': 'round',
+            'stroke-linecap': 'round',
+        },
+        children
+    )
+}
+
+function hubIcon(): string {
+    return wrap(
+        [
+            '<path d="M128 18l36 22h42l10 10v42l22 36-22 36v42l-10 10h-42l-36 22-36-22H50l-10-10v-42l-22-36 22-36V50l10-10h42z" fill="#f7e8a8"/>',
+            '<path d="M128 31l31 20h36l8 8v36l20 33-20 33v36l-8 8h-36l-31 20-31-20H61l-8-8v-36l-20-33 20-33V59l8-8h36z" fill="#382f55"/>',
+            '<path d="M83 63h90l20 20v90l-20 20H83l-20-20V83z" fill="#4d406d"/>',
+            '<path d="M128 51l29 22 35 6-7 36 16 33-33 17-17 33-23-26-23 26-17-33-33-17 16-33-7-36 35-6z" fill="#312949"/>',
+            '<circle cx="128" cy="128" r="57" fill="#f8e7a8"/>',
+            '<circle cx="128" cy="128" r="43" fill="#dba92e"/>',
+            '<circle cx="128" cy="128" r="31" fill="#f3c53a" stroke-width="5"/>',
+            '<path d="M128 82l11 32 32-8-24 24 23 25-31-9-11 32-11-32-31 9 23-25-24-24 32 8z" fill="#fff7b8"/>',
+            '<path d="M104 42h48v19h-48zM104 195h48v19h-48zM42 104h19v48H42zM195 104h19v48h-19z" fill="#f2d784"/>',
+            '<path d="M113 50h30M113 204h30M50 113v30M204 113v30" stroke="#ffca22" stroke-width="7"/>',
+            '<path d="M80 80l11 11M176 80l-11 11M80 176l11-11M176 176l-11-11" stroke="#ffca22" stroke-width="7"/>',
+        ].join('')
+    )
+}
+
+function warehouseIcon(): string {
+    return wrap(
+        [
+            '<path d="M48 30h160l18 18v160l-18 18H48l-18-18V48z" fill="#f7e8a8"/>',
+            '<path d="M58 40h140l16 16v144l-16 16H58l-16-16V56z" fill="#362d53"/>',
+            '<path d="M77 59h42l10 10v54l-10 10H77l-10-10V69z" fill="#f28a15"/>',
+            '<path d="M137 59h42l10 10v54l-10 10h-42l-10-10V69z" fill="#f28a15"/>',
+            '<path d="M60 140h136l11 11v47l-11 11H60l-11-11v-47z" fill="#f28a15"/>',
+            '<path d="M67 151h122M67 165h122M67 179h122M67 193h122" stroke="#9b4d0f" stroke-width="5"/>',
+            '<path d="M128 44v95" stroke="#211c35" stroke-width="15"/>',
+            '<path d="M113 51h30M113 119h30M50 83v45M206 83v45M81 216h35M140 216h35" stroke="#ffb02d" stroke-width="7"/>',
+            '<path d="M91 79v35M108 79v35M151 79v35M168 79v35" stroke="#8c4510" stroke-width="6"/>',
+            '<path d="M75 126h106M75 139h106" stroke="#f7e8a8" stroke-width="7"/>',
+            '<path d="M87 151l-16 16M179 151l-16 16" stroke="#fff2bc" stroke-width="5"/>',
+        ].join('')
+    )
+}
+
+function extractorIcon(): string {
+    return wrap(
+        [
+            '<path d="M51 29h154l21 21v154l-21 21H51l-21-21V50z" fill="#f7e8a8"/>',
+            '<path d="M62 39h132l20 20v136l-20 20H62l-20-20V59z" fill="#332b50"/>',
+            '<path d="M72 63h51l10 10v82l-10 10H72l-10-10V73z" fill="#237e75"/>',
+            '<path d="M133 63h51l10 10v82l-10 10h-51l-10-10V73z" fill="#2b9389"/>',
+            '<path d="M70 92h55M70 122h55M133 92h55M133 122h55" stroke="#185b55" stroke-width="7"/>',
+            '<path d="M128 50v119" stroke="#211b35" stroke-width="14"/>',
+            '<path d="M74 54h108M65 164h126" stroke="#f7e8a8" stroke-width="7"/>',
+            '<path d="M60 36h136M60 220h136" stroke="#4b3f6c" stroke-width="12"/>',
+            '<path d="M31 88h37v71H31zM188 88h37v71h-37z" fill="#342d50"/>',
+            '<path d="M45 101h14v45H45zM197 101h14v45h-14z" fill="#23a89b"/>',
+            '<circle cx="128" cy="183" r="40" fill="#332b50"/>',
+            '<circle cx="128" cy="183" r="27" fill="#18a99d"/>',
+            '<circle cx="128" cy="183" r="16" fill="#14746d" stroke-width="4"/>',
+            '<path d="M101 161l12 12M155 161l-12 12M101 205l12-12M155 205l-12-12" stroke="#f7e8a8" stroke-width="7"/>',
+            '<path d="M114 38h28M119 127v31" stroke="#5ce9dc" stroke-width="6"/>',
+        ].join('')
+    )
+}
+
+function factoryIcon(): string {
+    return wrap(
+        [
+            '<circle cx="128" cy="128" r="104" fill="#f7e8a8"/>',
+            '<circle cx="128" cy="128" r="93" fill="#332b50"/>',
+            '<path d="M77 37h102l25 25v132l-25 25H77l-25-25V62z" fill="#433861"/>',
+            '<circle cx="128" cy="128" r="72" fill="#2b2541"/>',
+            '<path d="M128 72l13 19 23-2 3 24 21 13-13 21 8 22-24 8-10 22-21-13-21 13-10-22-24-8 8-22-13-21 21-13 3-24 23 2z" fill="#f6c51f"/>',
+            '<circle cx="128" cy="128" r="24" fill="#49405f"/>',
+            '<path d="M72 80h112l14 16v21H58V96zM58 158h140v21l-14 16H72z" fill="#e72c9a"/>',
+            '<path d="M58 91l-21 28v52l21 28M198 91l21 28v52l-21 28" stroke="#332b50" stroke-width="17"/>',
+            '<path d="M78 84l-30 65M178 84l30 65" stroke="#e72c9a" stroke-width="18"/>',
+            '<circle cx="55" cy="80" r="21" fill="#e72c9a"/>',
+            '<circle cx="201" cy="80" r="21" fill="#e72c9a"/>',
+            '<circle cx="55" cy="80" r="11" fill="#ffc51d"/>',
+            '<circle cx="201" cy="80" r="11" fill="#ffc51d"/>',
+            '<path d="M50 126l-9 22M206 126l9 22" stroke="#332b50" stroke-width="7"/>',
+            '<path d="M83 93l-15 15M95 93l-15 15M161 170l-15 15M173 170l-15 15" stroke="#ffe5a4" stroke-width="5"/>',
+        ].join('')
+    )
+}
+
+function mdriverIcon(): string {
+    return wrap(
+        [
+            '<path d="M48 28h160l20 20v160l-20 20H48l-20-20V48z" fill="#f7e8a8"/>',
+            '<path d="M59 39h138l18 18v142l-18 18H59l-18-18V57z" fill="#332b50"/>',
+            '<circle cx="128" cy="128" r="54" fill="#2a2342"/>',
+            '<circle cx="128" cy="128" r="27" fill="#18cfe5"/>',
+            '<path d="M52 63h42M162 193h42M52 193h42M162 63h42" stroke="#f7e8a8" stroke-width="7"/>',
+            '<path d="M31 128h194" stroke="#19162c" stroke-width="48"/>',
+            '<path d="M40 128h176" stroke="#20d8ec" stroke-width="30"/>',
+            '<path d="M56 128h144" stroke="#75eff8" stroke-width="13"/>',
+            '<path d="M38 128l42-42M176 170l42-42" stroke="#19162c" stroke-width="34"/>',
+            '<path d="M50 116l58-58M148 198l58-58" stroke="#332b50" stroke-width="26"/>',
+            '<path d="M84 94l89 89M82 162l89-89" stroke="#f7e8a8" stroke-width="9"/>',
+            '<path d="M96 102l64 64M96 154l64-64" stroke="#1f1a31" stroke-width="9"/>',
+            '<path d="M97 43h62M97 213h62M43 97v62M213 97v62" stroke="#20d8ec" stroke-width="7"/>',
+            '<path d="M70 68l-17 17M186 188l17-17" stroke="#ffffff" stroke-opacity=".65" stroke-width="5"/>',
+        ].join('')
+    )
+}
+
+function mcatcherIcon(): string {
+    return wrap(
+        [
+            '<path d="M38 61h180l-17 129-45 39H100l-45-39z" fill="#f7e8a8"/>',
+            '<path d="M49 72h158l-17 108-39 35h-46l-39-35z" fill="#332b50"/>',
+            '<path d="M61 73c7 58 36 88 67 88s60-30 67-88z" fill="#36ddeb"/>',
+            '<path d="M72 83c8 43 29 63 56 63s48-20 56-63" stroke="#90f6ff" stroke-width="10"/>',
+            '<path d="M65 64c24-29 102-29 126 0l-12 22c-26-18-76-18-102 0z" fill="#f7e8a8"/>',
+            '<path d="M74 76c21-19 87-19 108 0" stroke="#fff4bd" stroke-width="9"/>',
+            '<path d="M43 78l-18 55 24 67 40 29M213 78l18 55-24 67-40 29" stroke="#332b50" stroke-width="19"/>',
+            '<path d="M58 82v59M198 82v59" stroke="#8b45de" stroke-width="21"/>',
+            '<path d="M75 162l31 53M181 162l-31 53" stroke="#8b45de" stroke-width="25"/>',
+            '<path d="M109 174h38l12 23-12 32h-38l-12-32z" fill="#352a55"/>',
+            '<path d="M116 183h24v18h-24z" fill="#35ddeb"/>',
+            '<path d="M128 160v54" stroke="#35ddeb" stroke-width="8"/>',
+            '<path d="M79 169l12 11M177 169l-12 11" stroke="#58edf6" stroke-width="6"/>',
+            '<path d="M87 104c22 17 60 17 82 0" stroke="#bcfbff" stroke-opacity=".75" stroke-width="5"/>',
+        ].join('')
+    )
+}
+
+const iconBodies: Record<StationEntityIconKind, string> = {
+    hub: hubIcon(),
+    warehouse: warehouseIcon(),
+    extractor: extractorIcon(),
+    factory: factoryIcon(),
+    mdriver: mdriverIcon(),
+    mcatcher: mcatcherIcon(),
+}
+
+export function stationEntityIconBody(kind: StationEntityIconKind): string {
+    return iconBodies[kind]
+}
+
+export function stationEntityIcon(
+    kind: StationEntityIconKind,
+    opts: StationEntityIconInlineOpts
+): string {
+    const scale = opts.size / 256
+    return el(
+        'g',
+        {
+            transform: `translate(${opts.x} ${opts.y}) scale(${scale})`,
+            'data-station-entity': kind,
+        },
+        stationEntityIconBody(kind)
+    )
+}
+
+export function stationEntityIconSvg(
+    kind: StationEntityIconKind,
+    opts: StationEntityIconSvgOpts = {}
+): string {
+    const size = opts.size ?? 64
+    const title = opts.title ?? `${stationEntityIconLabels[kind]} entity icon`
+    const children = `<title>${escapeXml(title)}</title>${stationEntityIconBody(kind)}`
+    return el(
+        'svg',
+        {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: size,
+            height: size,
+            viewBox: '0 0 256 256',
+            role: 'img',
+            class: opts.className,
+            'aria-label': title,
+        },
+        children
+    )
+}

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)
     )
 }