@shipload/item-renderer 0.1.0

package/test/svg.test.ts

@@ -0,0 +1,28 @@
+import { expect, test } from 'bun:test'
+import { attr, el, escapeXml } from '../src/primitives/svg.ts'
+
+test('escapeXml escapes the five XML entity chars', () => {
+  expect(escapeXml(`5 > 3 & 2 < 4 "hi" 'yo'`)).toBe(
+    '5 &gt; 3 &amp; 2 &lt; 4 &quot;hi&quot; &apos;yo&apos;',
+  )
+})
+
+test('attr emits name=value pairs with quoted values', () => {
+  expect(attr({ width: 10, height: 20, fill: '#123456' }))
+    .toBe(' width="10" height="20" fill="#123456"')
+})
+
+test('attr drops undefined and null values', () => {
+  expect(attr({ width: 10, height: undefined, stroke: null as unknown as string }))
+    .toBe(' width="10"')
+})
+
+test('attr escapes special chars in values', () => {
+  expect(attr({ label: `ship "fast"` })).toBe(' label="ship &quot;fast&quot;"')
+})
+
+test('el builds self-closing and wrapping elements', () => {
+  expect(el('rect', { width: 10, height: 10 })).toBe('<rect width="10" height="10"/>')
+  expect(el('g', {}, '<rect/><rect/>')).toBe('<g><rect/><rect/></g>')
+  expect(el('text', { x: 5 }, 'hi')).toBe('<text x="5">hi</text>')
+})

package/test/templates-component.test.ts

@@ -0,0 +1,36 @@
+import { expect, test } from 'bun:test'
+import { resolveItem } from '@shipload/sdk'
+import { renderComponent } from '../src/templates/component.ts'
+import { FIXTURES } from './fixtures/cargo-items.ts'
+
+test('matches the committed Hull Plates snapshot', async () => {
+  const item = FIXTURES.hullPlates
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderComponent(item, resolved)
+  expect(svg).toMatchSnapshot('component-hull-plates.svg')
+})
+
+test('renderComponent ranges mode shows stat abbreviations with no values', () => {
+  const item = FIXTURES.hullPlates
+  const resolved = resolveItem(item.item_id)
+  const svg = renderComponent(item, resolved, { mode: 'ranges' })
+  expect(svg).toContain('STR')
+  expect(svg).toContain('DEN')
+  expect(svg).not.toMatch(/>\d{3}<\/text>/)
+  expect(svg).toContain('COMPONENT')
+  expect(svg).toContain('Mass')
+})
+
+test('renderComponent values mode (default) still shows concrete numbers', () => {
+  const item = FIXTURES.hullPlates
+  const resolved = resolveItem(item.item_id, item.stats)
+  const svg = renderComponent(item, resolved)
+  expect(svg).toMatch(/>\d+<\/text>/)
+})
+
+test('renderComponent ranges mode matches snapshot', () => {
+  const item = FIXTURES.hullPlates
+  const resolved = resolveItem(item.item_id)
+  const svg = renderComponent(item, resolved, { mode: 'ranges' })
+  expect(svg).toMatchSnapshot('component-ranges')
+})

package/test/templates-dispatch.test.ts

@@ -0,0 +1,35 @@
+import { test, expect } from 'bun:test'
+import { resolveItem } from '@shipload/sdk'
+import { renderByType } from '../src/templates/index.ts'
+import { FIXTURES } from './fixtures/cargo-items.ts'
+
+test('renderByType forwards mode=ranges to resource template', () => {
+  const item = FIXTURES.iron
+  const resolved = resolveItem(item.item_id)
+  const svg = renderByType(item, resolved, { mode: 'ranges' })
+  // No 3-digit stat values
+  expect(svg).not.toMatch(/>\d{3,}<\/text>/)
+})
+
+test('renderByType forwards mode=ranges to component template', () => {
+  const item = FIXTURES.hullPlates
+  const resolved = resolveItem(item.item_id)
+  const svg = renderByType(item, resolved, { mode: 'ranges' })
+  expect(svg).not.toMatch(/>\d{3,}<\/text>/)
+  expect(svg).toContain('COMPONENT')
+})
+
+test('renderByType forwards mode=ranges to module template', () => {
+  const item = FIXTURES.engineT1
+  const resolved = resolveItem(item.item_id)
+  const svg = renderByType(item, resolved, { mode: 'ranges' })
+  expect(svg).toContain('MODULE')
+})
+
+test('renderByType default mode is values (no opts)', () => {
+  const item = FIXTURES.iron
+  const resolved = resolveItem(item.item_id, item.stats)
+  const svg = renderByType(item, resolved)
+  // At least one numeric stat value
+  expect(svg).toMatch(/>\d+<\/text>/)
+})

package/test/templates-item-cell.test.ts

@@ -0,0 +1,94 @@
+import { test, expect } from 'bun:test'
+import { resolveItem } from '@shipload/sdk'
+import { ITEM_HULL_PLATES, ITEM_ENGINE_T1, ITEM_SHIP_T1_PACKED } from '@shipload/sdk'
+import { renderItemCell, itemCellGroup } from '../src/templates/item-cell.ts'
+
+test('renderItemCell returns a self-contained <svg>', () => {
+  const resolved = resolveItem(ITEM_HULL_PLATES)
+  const svg = renderItemCell({ resolved, size: 48 })
+  expect(svg.startsWith('<svg ')).toBe(true)
+  expect(svg).toContain('viewBox="0 0 48 60"')
+  expect(svg.endsWith('</svg>')).toBe(true)
+})
+
+test('component cell renders abbreviation', () => {
+  const resolved = resolveItem(ITEM_HULL_PLATES)
+  const svg = renderItemCell({ resolved, size: 48 })
+  expect(svg).toContain('>HP<')
+})
+
+test('module cell renders abbreviation', () => {
+  const resolved = resolveItem(ITEM_ENGINE_T1)
+  const svg = renderItemCell({ resolved, size: 48 })
+  expect(svg).toContain('>EN<')
+})
+
+test('entity cell renders abbreviation', () => {
+  const resolved = resolveItem(ITEM_SHIP_T1_PACKED)
+  const svg = renderItemCell({ resolved, size: 48 })
+  expect(svg).toContain('>SH<')
+})
+
+test('resource cell renders category icon (no abbreviation)', () => {
+  const resolved = resolveItem(26)
+  const svg = renderItemCell({ resolved, size: 48 })
+  expect(svg).not.toMatch(/>[A-Z]{2,3}</)
+  expect(svg).toMatch(/<(polygon|circle|rect)\b/)
+})
+
+test('quantity renders as plain bold number when quantity > 1', () => {
+  const resolved = resolveItem(ITEM_HULL_PLATES)
+  const svg = renderItemCell({ resolved, quantity: 42, size: 48 })
+  expect(svg).toContain('>42<')
+  expect(svg).not.toContain('×')
+})
+
+test('no quantity text when quantity is 1 or omitted', () => {
+  const resolved = resolveItem(ITEM_HULL_PLATES)
+  const svgNoQty = renderItemCell({ resolved, size: 48 })
+  const svgOne = renderItemCell({ resolved, quantity: 1, size: 48 })
+  expect(svgNoQty).not.toContain('>1<')
+  expect(svgOne).not.toContain('>1<')
+})
+
+test('itemCellGroup returns <g> with translate, no <svg> wrapper', () => {
+  const resolved = resolveItem(ITEM_HULL_PLATES)
+  const g = itemCellGroup({ resolved, size: 48, x: 100, y: 200 })
+  expect(g.startsWith('<g ')).toBe(true)
+  expect(g).toContain('transform="translate(100, 200)"')
+  expect(g.startsWith('<svg')).toBe(false)
+})
+
+test('tier border uses SDK tierColors for the resolved tier', () => {
+  const resolved = resolveItem(ITEM_HULL_PLATES)
+  const svg = renderItemCell({ resolved, size: 48 })
+  expect(svg).toContain('#8b8b8b')
+})
+
+test('abbreviation cell uses proportional font size for different sizes', () => {
+  const resolved = resolveItem(ITEM_HULL_PLATES)
+  const svg28 = renderItemCell({ resolved, size: 28 })
+  const svg80 = renderItemCell({ resolved, size: 80 })
+  expect(svg28).toContain('font-size="8"')
+  expect(svg80).toContain('font-size="22"')
+})
+
+test('resource icon renders in stroke-only mode', () => {
+  const resolved = resolveItem(26)
+  const svg = renderItemCell({ resolved, size: 48 })
+  expect(svg).toContain('fill="none"')
+  expect(svg).toContain('stroke-width="1.5"')
+})
+
+test('matches golden SVG snapshot per itemType', () => {
+  const cases: [number, string][] = [
+    [26, 'item-cell-resource'],
+    [ITEM_HULL_PLATES, 'item-cell-component'],
+    [ITEM_ENGINE_T1, 'item-cell-module'],
+    [ITEM_SHIP_T1_PACKED, 'item-cell-entity'],
+  ]
+  for (const [id, name] of cases) {
+    const svg = renderItemCell({ resolved: resolveItem(id), quantity: 3, size: 48 })
+    expect(svg).toMatchSnapshot(name)
+  }
+})

package/test/templates-module.test.ts

@@ -0,0 +1,63 @@
+import { test, expect } from 'bun:test'
+import { resolveItem } from '@shipload/sdk'
+import { renderModule } from '../src/templates/module.ts'
+import { FIXTURES } from './fixtures/cargo-items.ts'
+
+const CASES = [
+  'engineT1',
+  'generatorT1',
+  'gathererT1',
+  'loaderT1',
+  'crafterT1',
+  'storageT1',
+  'haulerT1',
+] as const
+
+for (const name of CASES) {
+  test(`matches the committed ${name} snapshot`, async () => {
+    const item = FIXTURES[name]
+    const resolved = resolveItem(item.item_id, item.stats, item.modules)
+    const svg = renderModule(item, resolved)
+    expect(svg).toMatchSnapshot(`module-${name}.svg`)
+  })
+}
+
+test('Engine template embeds the narrative description', () => {
+  const item = FIXTURES.engineT1
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderModule(item, resolved)
+  expect(svg).toContain('generates')
+  expect(svg).toContain('thrust for travel')
+  expect(svg).toContain('while draining')
+  expect(svg).toContain('distance travelled')
+})
+
+test('Hauler template falls back to compact rows when description is null', () => {
+  const item = FIXTURES.haulerT1
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderModule(item, resolved)
+  expect(svg).toContain('Hauler')
+})
+
+test('renderModule ranges mode shows capability header without narrative or attribute values', () => {
+  const item = FIXTURES.engineT1
+  const resolved = resolveItem(item.item_id)
+  const svg = renderModule(item, resolved, { mode: 'ranges' })
+  expect(svg).toContain('ENGINE')
+  expect(svg).not.toMatch(/>\d{3,}<\/(text|tspan)>/)
+  expect(svg).toContain('MODULE')
+})
+
+test('renderModule values mode (default) still shows narrative', () => {
+  const item = FIXTURES.engineT1
+  const resolved = resolveItem(item.item_id, item.stats)
+  const svg = renderModule(item, resolved)
+  expect(svg).toMatch(/thrust|energy|generates/)
+})
+
+test('renderModule ranges mode matches snapshot', () => {
+  const item = FIXTURES.engineT1
+  const resolved = resolveItem(item.item_id)
+  const svg = renderModule(item, resolved, { mode: 'ranges' })
+  expect(svg).toMatchSnapshot('module-ranges')
+})

package/test/templates-packed-entity.test.ts

@@ -0,0 +1,47 @@
+import { expect, test } from 'bun:test'
+import { resolveItem } from '@shipload/sdk'
+import { renderPackedEntity } from '../src/templates/packed-entity.ts'
+import { FIXTURES } from './fixtures/cargo-items.ts'
+
+test('renders Ship T1 with hull attributes and two modules', () => {
+  const item = FIXTURES.shipT1TwoModules
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderPackedEntity(item, resolved)
+  expect(svg).toContain('Ship T1 (Packed)')
+  expect(svg).toContain('HULL')
+  expect(svg).toContain('Mass')
+  expect(svg).toContain('Capacity')
+  expect(svg).toContain('Engine')
+  expect(svg).toContain('Generator')
+})
+
+test('renders empty-module rows when slots are unfilled', () => {
+  const item = FIXTURES.shipT1NoModules
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderPackedEntity(item, resolved)
+  expect(svg.match(/Empty module/g)?.length ?? 0).toBeGreaterThanOrEqual(1)
+})
+
+test('matches the committed Ship T1 (two modules) snapshot', async () => {
+  const item = FIXTURES.shipT1TwoModules
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderPackedEntity(item, resolved)
+  expect(svg).toMatchSnapshot('packed-entity-ship-t1-two-modules.svg')
+})
+
+test('matches the committed Ship T1 (only engine) snapshot', async () => {
+  const item = FIXTURES.shipT1OnlyEngine
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderPackedEntity(item, resolved)
+  expect(svg).toMatchSnapshot('packed-entity-ship-t1-only-engine.svg')
+})
+
+test('ship with two modules renders SDK-sourced narrative descriptions', () => {
+  const item = FIXTURES.shipT1TwoModules
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderPackedEntity(item, resolved)
+  expect(svg).toContain('Engine: ')
+  expect(svg).toContain('generates')
+  expect(svg).toContain('Generator: ')
+  expect(svg).toContain('holds')
+})

package/test/templates-resource.test.ts

@@ -0,0 +1,71 @@
+import { expect, test } from 'bun:test'
+import { resolveItem, getStatDefinitions } from '@shipload/sdk'
+import { renderResource } from '../src/templates/resource.ts'
+import { FIXTURES } from './fixtures/cargo-items.ts'
+
+test('renders Iron with category, mass, and three stat bars', () => {
+  const item = FIXTURES.iron
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderResource(item, resolved)
+  expect(svg).toContain('Iron')
+  expect(svg).toContain('Metals') // category label
+  expect(svg).toContain('30,000') // mass
+  expect(svg).toContain('STR') // strength abbreviation
+  expect(svg).toContain('TOL')
+  expect(svg).toContain('DEN')
+})
+
+test('renders quantity badge when stack > 1', () => {
+  const item = FIXTURES.ironStackOf50
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderResource(item, resolved)
+  expect(svg).toContain('×50')
+})
+
+test('does not render quantity badge when stack == 1', () => {
+  const item = FIXTURES.iron
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderResource(item, resolved)
+  expect(svg).not.toContain('×')
+})
+
+test('matches the committed Iron snapshot', async () => {
+  const item = FIXTURES.iron
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderResource(item, resolved)
+  expect(svg).toMatchSnapshot('resource-iron.svg')
+})
+
+test('matches the committed Helium snapshot', async () => {
+  const item = FIXTURES.helium
+  const resolved = resolveItem(item.item_id, item.stats, item.modules)
+  const svg = renderResource(item, resolved)
+  expect(svg).toMatchSnapshot('resource-helium.svg')
+})
+
+test('renderResource ranges mode shows stat abbreviations with no values', () => {
+  const item = FIXTURES.iron
+  const resolved = resolveItem(item.item_id)
+  const svg = renderResource(item, resolved, { mode: 'ranges' })
+  const defs = getStatDefinitions(resolved.category!)
+  for (const def of defs) {
+    expect(svg).toContain(def.abbreviation)
+  }
+  expect(svg).not.toMatch(/>\d{3}<\/text>/)
+  expect(svg).toContain('Category')
+  expect(svg).toContain('Mass')
+})
+
+test('renderResource values mode (default) still shows concrete numbers', () => {
+  const item = FIXTURES.iron
+  const resolved = resolveItem(item.item_id, item.stats)
+  const svg = renderResource(item, resolved)
+  expect(svg).toMatch(/>\d+<\/text>/)
+})
+
+test('renderResource ranges mode matches snapshot', () => {
+  const item = FIXTURES.iron
+  const resolved = resolveItem(item.item_id)
+  const svg = renderResource(item, resolved, { mode: 'ranges' })
+  expect(svg).toMatchSnapshot('resource-ranges')
+})

package/test/templates-ship-panel.test.ts

@@ -0,0 +1,87 @@
+import { test, expect } from 'bun:test'
+import { renderShipPanel } from '../src/templates/ship-panel.ts'
+
+test('renderShipPanel with empty slots renders empty module rows', () => {
+  const svg = renderShipPanel({
+    name: 'Ship T1 (Packed)',
+    tier: 't1',
+    attributes: [{
+      capability: 'Hull',
+      attributes: [
+        { label: 'Mass', value: 100 },
+        { label: 'Capacity', value: 5000 },
+      ],
+    }],
+    slots: [
+      { installed: false },
+      { installed: false },
+      { installed: false },
+    ],
+  })
+  expect(svg).toContain('Ship T1 (Packed)')
+  expect(svg).toContain('HULL')
+  expect(svg).toContain('Mass')
+  expect(svg).toContain('Capacity')
+  expect((svg.match(/Empty module/g) ?? []).length).toBe(3)
+})
+
+test('renderShipPanel with installed slots + string descriptions', () => {
+  const svg = renderShipPanel({
+    name: 'Ship T1 (Packed)',
+    tier: 't1',
+    attributes: [{
+      capability: 'Hull',
+      attributes: [{ label: 'Mass', value: 100 }],
+    }],
+    slots: [
+      { name: 'Engine', installed: true, description: 'generates 500 thrust for travel' },
+      { name: 'Generator', installed: true, description: 'holds 1000 energy' },
+    ],
+  })
+  expect(svg).toContain('Engine:')
+  expect(svg).toContain('generates 500 thrust')
+  expect(svg).toContain('Generator:')
+  expect(svg).toContain('holds 1000 energy')
+})
+
+test('renderShipPanel with TextSpan[] descriptions preserves highlights', () => {
+  const svg = renderShipPanel({
+    name: 'Ship T1 (Packed)',
+    tier: 't1',
+    attributes: [{
+      capability: 'Hull',
+      attributes: [{ label: 'Mass', value: 100 }],
+    }],
+    slots: [
+      {
+        name: 'Engine',
+        installed: true,
+        description: [
+          { text: 'generates ' },
+          { text: '700', highlight: true },
+          { text: ' thrust for travel' },
+        ],
+      },
+    ],
+  })
+  expect(svg).toContain('>700<')
+  expect(svg).toContain('generates')
+})
+
+test('renderShipPanel mixed slots (installed + empty)', () => {
+  const svg = renderShipPanel({
+    name: 'Ship T1 (Packed)',
+    tier: 't1',
+    attributes: [{
+      capability: 'Hull',
+      attributes: [{ label: 'Mass', value: 100 }],
+    }],
+    slots: [
+      { name: 'Engine', installed: true, description: 'generates 500 thrust' },
+      { installed: false },
+      { installed: false },
+    ],
+  })
+  expect(svg).toContain('Engine:')
+  expect((svg.match(/Empty module/g) ?? []).length).toBe(2)
+})

package/test/tokens.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from 'bun:test'
+import { tierColors as sdkTierColors } from '@shipload/sdk'
+import { tokens } from '../src/tokens/index.ts'
+
+test('colors include all resource categories', () => {
+  for (const cat of ['metal', 'gas', 'mineral', 'organic', 'precious']) {
+    expect(tokens.colors.category).toHaveProperty(cat)
+    expect(tokens.colors.category[cat as keyof typeof tokens.colors.category]).toMatch(/^#[0-9a-f]{6}$/i)
+  }
+})
+
+test('colors.tier is sourced from SDK tierColors', () => {
+  expect(tokens.colors.tier).toEqual(sdkTierColors)
+})
+
+test('colors include all tiers t1..t5 with SDK values', () => {
+  expect(tokens.colors.tier.t1).toBe('#8b8b8b')
+  expect(tokens.colors.tier.t2).toBe('#4ade80')
+  expect(tokens.colors.tier.t3).toBe('#818cf8')
+  expect(tokens.colors.tier.t4).toBe('#c084fc')
+  expect(tokens.colors.tier.t5).toBe('#fbbf24')
+})
+
+test('typography names three font stacks', () => {
+  expect(tokens.typography.display).toContain('Orbitron')
+  expect(tokens.typography.sans).toContain('Inter')
+  expect(tokens.typography.mono).toContain('JetBrains Mono')
+})
+
+test('spacing has a default panel width', () => {
+  expect(tokens.spacing.panelWidth).toBe(280)
+})

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "experimentalDecorators": true,
+    "types": ["bun-types"]
+  },
+  "include": ["src", "test", "scripts"]
+}