@shipload/item-renderer 0.2.1 → 0.2.3

package/src/primitives/span-paragraph.ts

@@ -1,72 +1,70 @@
-import { wrapText } from './wrap.ts'
-import { escapeXml as escapeAttr } from './svg.ts'
-import { tokens } from '../tokens/index.ts'
-import type { TextSpan } from '@shipload/sdk'
+import { wrapText } from "./wrap.ts";
+import { escapeXml as escapeAttr } from "./svg.ts";
+import { tokens } from "../tokens/index.ts";
+import type { TextSpan } from "@shipload/sdk";
 
 export interface SpanParagraphProps {
-  x: number
-  y: number
-  spans: TextSpan[]
-  charsPerLine?: number
-  lineHeight?: number
-  bodyColor?: string
-  highlightColor?: string
-  fontSize?: number
+  x: number;
+  y: number;
+  spans: TextSpan[];
+  charsPerLine?: number;
+  lineHeight?: number;
+  bodyColor?: string;
+  highlightColor?: string;
+  fontSize?: number;
 }
 
 function escapeXml(s: string): string {
   return s
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
 }
 
 function sliceSpans(spans: TextSpan[], start: number, end: number): TextSpan[] {
-  const out: TextSpan[] = []
-  let cursor = 0
+  const out: TextSpan[] = [];
+  let cursor = 0;
   for (const span of spans) {
-    const spanStart = cursor
-    const spanEnd = cursor + span.text.length
-    cursor = spanEnd
-    if (spanEnd <= start || spanStart >= end) continue
-    const sliceStart = Math.max(0, start - spanStart)
-    const sliceEnd = span.text.length - Math.max(0, spanEnd - end)
-    const txt = span.text.slice(sliceStart, sliceEnd)
-    if (txt.length === 0) continue
-    out.push(span.highlight ? { text: txt, highlight: true } : { text: txt })
+    const spanStart = cursor;
+    const spanEnd = cursor + span.text.length;
+    cursor = spanEnd;
+    if (spanEnd <= start || spanStart >= end) continue;
+    const sliceStart = Math.max(0, start - spanStart);
+    const sliceEnd = span.text.length - Math.max(0, spanEnd - end);
+    const txt = span.text.slice(sliceStart, sliceEnd);
+    if (txt.length === 0) continue;
+    out.push(span.highlight ? { text: txt, highlight: true } : { text: txt });
   }
-  return out
+  return out;
 }
 
-export function spanParagraph(
-  props: SpanParagraphProps,
-): { svg: string; lineCount: number } {
-  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 size = props.fontSize ?? tokens.typography.sizes.body
+export function spanParagraph(props: SpanParagraphProps): { svg: string; lineCount: number } {
+  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 size = props.fontSize ?? tokens.typography.sizes.body;
 
-  const plain = props.spans.map((s) => s.text).join('')
-  const lines = wrapText({ value: plain, charsPerLine: chars })
+  const plain = props.spans.map((s) => s.text).join("");
+  const lines = wrapText({ value: plain, charsPerLine: chars });
 
-  let charOffset = 0
+  let charOffset = 0;
   const out = lines
     .map((line, i) => {
-      const lineStart = charOffset
-      const lineEnd = lineStart + line.length
-      charOffset = lineEnd + 1
-      const lineSpans = sliceSpans(props.spans, lineStart, lineEnd)
-      const y = props.y + i * lh
+      const lineStart = charOffset;
+      const lineEnd = lineStart + line.length;
+      charOffset = lineEnd + 1;
+      const lineSpans = sliceSpans(props.spans, lineStart, lineEnd);
+      const y = props.y + i * lh;
       const tspans = lineSpans
         .map((s) => {
-          const fill = s.highlight ? highlightColor : bodyColor
-          return `<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`
+          const fill = s.highlight ? highlightColor : bodyColor;
+          return `<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`;
         })
-        .join('')
-      return `<text x="${props.x}" y="${y}" font-family="${escapeAttr(tokens.typography.sans)}" font-size="${size}">${tspans}</text>`
+        .join("");
+      return `<text x="${props.x}" y="${y}" font-family="${escapeAttr(tokens.typography.sans)}" font-size="${size}">${tspans}</text>`;
     })
-    .join('')
-  return { svg: out, lineCount: lines.length }
+    .join("");
+  return { svg: out, lineCount: lines.length };
 }

package/src/primitives/stat-bar.ts

@@ -1,16 +1,16 @@
-import { el } from './svg.ts'
-import { text } from './text.ts'
-import { tokens } from '../tokens/index.ts'
+import { el } from "./svg.ts";
+import { text } from "./text.ts";
+import { tokens } from "../tokens/index.ts";
 
 export interface StatBarProps {
-  x: number
-  y: number
-  width: number
-  label: string
-  abbreviation: string
-  value: number | null // 0..1023, or null for ranges mode (no value text, no fill)
-  color: string
-  inverted?: boolean
+  x: number;
+  y: number;
+  width: number;
+  label: string;
+  abbreviation: string;
+  value: number | null; // 0..1023, or null for ranges mode (no value text, no fill)
+  color: string;
+  inverted?: boolean;
 }
 
 export function statBar({
@@ -23,7 +23,7 @@ export function statBar({
   color,
   inverted,
 }: StatBarProps): string {
-  const h = tokens.spacing.statBarHeight
+  const h = tokens.spacing.statBarHeight;
 
   let labelOut =
     text({
@@ -42,9 +42,9 @@ export function statBar({
       size: tokens.typography.sizes.stat,
       weight: 400,
       color: tokens.colors.text.primary,
-    })
+    });
 
-  const track = el('rect', {
+  const track = el("rect", {
     x,
     y,
     width,
@@ -52,12 +52,12 @@ export function statBar({
     rx: h / 2,
     ry: h / 2,
     fill: tokens.colors.surface.panelBorder,
-  })
+  });
 
   if (value !== null) {
-    const clamped = Math.max(0, Math.min(1023, value))
-    const displayFraction = inverted ? 1 - clamped / 1023 : clamped / 1023
-    const filled = Math.floor(width * displayFraction)
+    const clamped = Math.max(0, Math.min(1023, value));
+    const displayFraction = inverted ? 1 - clamped / 1023 : clamped / 1023;
+    const filled = Math.floor(width * displayFraction);
 
     labelOut += text({
       x: x + width,
@@ -66,10 +66,10 @@ export function statBar({
       size: tokens.typography.sizes.statValue,
       weight: 700,
       color,
-      anchor: 'end',
-    })
+      anchor: "end",
+    });
 
-    const bar = el('rect', {
+    const bar = el("rect", {
       x,
       y,
       width: filled,
@@ -77,9 +77,9 @@ export function statBar({
       rx: h / 2,
       ry: h / 2,
       fill: color,
-    })
-    return labelOut + track + bar
+    });
+    return labelOut + track + bar;
   }
 
-  return labelOut + track
+  return labelOut + track;
 }

package/src/primitives/svg.ts

@@ -1,25 +1,25 @@
 export function escapeXml(input: string): string {
   return input
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&apos;')
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&apos;");
 }
 
-export type AttrValue = string | number | null | undefined
+export type AttrValue = string | number | null | undefined;
 
 export function attr(attrs: Record<string, AttrValue>): string {
-  let out = ''
+  let out = "";
   for (const [k, v] of Object.entries(attrs)) {
-    if (v === undefined || v === null) continue
-    const value = typeof v === 'number' ? String(v) : escapeXml(v)
-    out += ` ${k}="${value}"`
+    if (v === undefined || v === null) continue;
+    const value = typeof v === "number" ? String(v) : escapeXml(v);
+    out += ` ${k}="${value}"`;
   }
-  return out
+  return out;
 }
 
 export function el(tag: string, attrs: Record<string, AttrValue>, children?: string): string {
-  if (children === undefined) return `<${tag}${attr(attrs)}/>`
-  return `<${tag}${attr(attrs)}>${children}</${tag}>`
+  if (children === undefined) return `<${tag}${attr(attrs)}/>`;
+  return `<${tag}${attr(attrs)}>${children}</${tag}>`;
 }

package/src/primitives/text.ts

@@ -1,42 +1,42 @@
-import { el } from './svg.ts'
-import { tokens } from '../tokens/index.ts'
+import { el } from "./svg.ts";
+import { tokens } from "../tokens/index.ts";
 
 export interface TextProps {
-  x: number
-  y: number
-  value: string
-  size?: number
-  weight?: 400 | 600 | 700 | 500
-  family?: string
-  color?: string
-  anchor?: 'start' | 'middle' | 'end'
-  letterSpacing?: number
-  dominantBaseline?: 'auto' | 'middle' | 'central' | 'hanging' | 'text-top' | 'text-bottom'
+  x: number;
+  y: number;
+  value: string;
+  size?: number;
+  weight?: 400 | 600 | 700 | 500;
+  family?: string;
+  color?: string;
+  anchor?: "start" | "middle" | "end";
+  letterSpacing?: number;
+  dominantBaseline?: "auto" | "middle" | "central" | "hanging" | "text-top" | "text-bottom";
 }
 
 export function text(props: TextProps): string {
   return el(
-    'text',
+    "text",
     {
       x: props.x,
       y: props.y,
-      'font-family': props.family ?? tokens.typography.sans,
-      'font-size': props.size ?? tokens.typography.sizes.body,
-      'font-weight': props.weight ?? 400,
+      "font-family": props.family ?? tokens.typography.sans,
+      "font-size": props.size ?? tokens.typography.sizes.body,
+      "font-weight": props.weight ?? 400,
       fill: props.color ?? tokens.colors.text.primary,
-      'text-anchor': props.anchor,
-      'letter-spacing': props.letterSpacing,
-      'dominant-baseline': props.dominantBaseline,
+      "text-anchor": props.anchor,
+      "letter-spacing": props.letterSpacing,
+      "dominant-baseline": props.dominantBaseline,
     },
     escapeValue(props.value),
-  )
+  );
 }
 
 function escapeValue(v: string): string {
   return v
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&apos;')
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&apos;");
 }

package/src/primitives/wrap.ts

@@ -1,24 +1,24 @@
 export interface WrapProps {
-  value: string
-  charsPerLine: number
+  value: string;
+  charsPerLine: number;
 }
 
 export function wrapText({ value, charsPerLine }: WrapProps): string[] {
-  const words = value.split(/\s+/).filter((w) => w.length > 0)
-  const lines: string[] = []
-  let current = ''
+  const words = value.split(/\s+/).filter((w) => w.length > 0);
+  const lines: string[] = [];
+  let current = "";
   for (const word of words) {
     if (current.length === 0) {
-      current = word
-      continue
+      current = word;
+      continue;
     }
     if (current.length + 1 + word.length <= charsPerLine) {
-      current += ` ${word}`
+      current += ` ${word}`;
     } else {
-      lines.push(current)
-      current = word
+      lines.push(current);
+      current = word;
     }
   }
-  if (current.length > 0) lines.push(current)
-  return lines
+  if (current.length > 0) lines.push(current);
+  return lines;
 }

package/src/render.ts

@@ -1,33 +1,29 @@
-import { resolveItem, type ResolvedItem } from '@shipload/sdk'
-import type { CargoItem } from './payload/codec.ts'
-import { decodePayload } from './payload/codec.ts'
-import { renderByType } from './templates/index.ts'
-import { UnknownItemError } from './errors.ts'
+import { resolveItem, type ResolvedItem } from "@shipload/sdk";
+import type { CargoItem } from "./payload/codec.ts";
+import { decodePayload } from "./payload/codec.ts";
+import { renderByType } from "./templates/index.ts";
+import { UnknownItemError } from "./errors.ts";
 
 export interface RenderOptions {
-  width?: number
-  theme?: 'dark' | 'light'
+  width?: number;
+  theme?: "dark" | "light";
 }
 
-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);
 }
 
 export async function renderFromPayload(
   payload: string,
   opts?: RenderOptions,
 ): Promise<{ svg: string; item: ResolvedItem }> {
-  const cargoItem = decodePayload(payload)
-  let resolved: ResolvedItem
+  const cargoItem = decodePayload(payload);
+  let resolved: ResolvedItem;
   try {
-    resolved = resolveItem(cargoItem.item_id, cargoItem.stats, cargoItem.modules)
+    resolved = resolveItem(cargoItem.item_id, cargoItem.stats, cargoItem.modules);
   } catch {
-    throw new UnknownItemError(Number(BigInt(cargoItem.item_id.toString())))
+    throw new UnknownItemError(Number(BigInt(cargoItem.item_id.toString())));
   }
-  const svg = renderItem(cargoItem, resolved, opts)
-  return { svg, item: resolved }
+  const svg = renderItem(cargoItem, resolved, opts);
+  return { svg, item: resolved };
 }

package/src/templates/_shared.ts

@@ -1,15 +1,14 @@
-import { tokens } from '../tokens/index.ts'
+import { tokens } from "../tokens/index.ts";
 
 export function formatMass(n: number): string {
-  return n.toLocaleString('en-US')
+  return n.toLocaleString("en-US");
 }
 
-export function tierBorder(tier: string): string {
-  const key = tier.toLowerCase() as keyof typeof tokens.colors.tier
-  return tokens.colors.tier[key] ?? tokens.colors.surface.panelBorder
+export function tierBorder(tier: number): string {
+  return tokens.colors.tier[tier] ?? tokens.colors.surface.panelBorder;
 }
 
 export function shortCode(itemId: number): string {
-  const str = itemId.toString(10)
-  return str.slice(-2).padStart(2, '0')
+  const str = itemId.toString(10);
+  return str.slice(-2).padStart(2, "0");
 }

package/src/templates/component.ts

@@ -1,78 +1,84 @@
-import type { ResolvedItem } from '@shipload/sdk'
-import { getComponentById, getStatDefinitions, categoryColors } from '@shipload/sdk'
-import type { CargoItem } from '../payload/codec.ts'
-import { panel } from '../primitives/panel.ts'
-import { iconHex } from '../primitives/icon-hex.ts'
-import { text } from '../primitives/text.ts'
-import { divider } from '../primitives/divider.ts'
-import { statBar } from '../primitives/stat-bar.ts'
-import { quantityBadge } from '../primitives/quantity-badge.ts'
-import { tokens } from '../tokens/index.ts'
-import { shortCode, formatMass, tierBorder } from './_shared.ts'
+import type { ResolvedItem, ResourceCategory } from "@shipload/sdk";
+import { formatTier, getRecipe, getStatDefinitions, categoryColors } from "@shipload/sdk";
+import type { CargoItem } from "../payload/codec.ts";
+import { panel } from "../primitives/panel.ts";
+import { iconHex } from "../primitives/icon-hex.ts";
+import { text } from "../primitives/text.ts";
+import { divider } from "../primitives/divider.ts";
+import { statBar } from "../primitives/stat-bar.ts";
+import { quantityBadge } from "../primitives/quantity-badge.ts";
+import { tokens } from "../tokens/index.ts";
+import { shortCode, formatMass, tierBorder } from "./_shared.ts";
 
 export interface RenderComponentOpts {
-  mode?: 'values' | 'ranges'
+  mode?: "values" | "ranges";
 }
 
 type StatRow = {
-  label: string
-  abbreviation: string
-  value: number | null
-  color: string
-  inverted?: boolean
-}
+  label: string;
+  abbreviation: string;
+  value: number | null;
+  color: string;
+  inverted?: boolean;
+};
 
 export function renderComponent(
   item: CargoItem,
   resolved: ResolvedItem,
   opts?: RenderComponentOpts,
 ): string {
-  const mode = opts?.mode ?? 'values'
-  const w = tokens.spacing.panelWidth
-  const pad = tokens.spacing.panelPadding
-  const innerW = w - pad * 2
+  const mode = opts?.mode ?? "values";
+  const w = tokens.spacing.panelWidth;
+  const pad = tokens.spacing.panelPadding;
+  const innerW = w - pad * 2;
 
-  let rows: StatRow[]
-  if (mode === 'values') {
-    rows = (resolved.stats ?? []).map(s => ({
+  let rows: StatRow[];
+  if (mode === "values") {
+    rows = (resolved.stats ?? []).map((s) => ({
       label: s.label,
       abbreviation: s.abbreviation,
       value: s.value,
       color: s.color,
       inverted: s.inverted,
-    }))
+    }));
   } else {
-    const comp = getComponentById(resolved.itemId)
-    rows = (comp?.stats ?? []).flatMap(stat => {
-      const defs = getStatDefinitions(stat.source)
-      const def = defs.find(d => d.key === stat.key)
-      if (!def) return []
-      return [{
-        label: def.label,
-        abbreviation: def.abbreviation,
-        value: null,
-        color: categoryColors[stat.source],
-        inverted: def.inverted,
-      }]
-    })
+    const recipe = getRecipe(resolved.itemId);
+    rows = (recipe?.statSlots ?? []).flatMap((slot) => {
+      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;
+      const def = getStatDefinitions(category)[src.statIndex];
+      if (!def) return [];
+      return [
+        {
+          label: def.label,
+          abbreviation: def.abbreviation,
+          value: null,
+          color: categoryColors[category],
+          inverted: def.inverted,
+        },
+      ];
+    });
   }
 
-  const headerH = 48
-  const metaRowH = 28
-  const statsH = rows.length * 26 + 8
-  const height = headerH + metaRowH + 14 + statsH + pad
+  const headerH = 48;
+  const metaRowH = 28;
+  const statsH = rows.length * 26 + 8;
+  const height = headerH + metaRowH + 14 + statsH + pad;
 
-  const chrome = panel({ width: w, height, borderColor: tierBorder(resolved.tier) })
+  const chrome = panel({ width: w, height, borderColor: tierBorder(resolved.tier) });
 
-  const quantity = Number(BigInt(item.quantity.toString()))
-  const badge = quantityBadge({ x: w - pad, y: pad, quantity })
+  const quantity = Number(BigInt(item.quantity.toString()));
+  const badge = quantityBadge({ x: w - pad, y: pad, quantity });
 
   const icon = iconHex({
     x: pad,
     y: pad + 4,
     color: tokens.colors.accent.component,
     code: shortCode(resolved.itemId),
-  })
+  });
 
   const name = text({
     x: pad + 34,
@@ -81,42 +87,41 @@ export function renderComponent(
     size: tokens.typography.sizes.title,
     weight: 700,
     family: tokens.typography.display,
-  })
+  });
 
-  const tierNum = resolved.tier.replace(/^t/i, '')
   const subtitleText = text({
     x: pad,
     y: pad + headerH + 4,
-    value: 'Type',
+    value: "Type",
     size: tokens.typography.sizes.body,
     color: tokens.colors.text.secondary,
-  })
+  });
   const subtitleValue = text({
     x: w - pad,
     y: pad + headerH + 4,
-    value: `COMPONENT · T${tierNum}`,
+    value: `COMPONENT · ${formatTier(resolved.tier)}`,
     size: tokens.typography.sizes.body,
     weight: 600,
-    anchor: 'end',
-  })
+    anchor: "end",
+  });
   const massLabel = text({
     x: pad,
     y: pad + headerH + metaRowH - 8,
-    value: 'Mass',
+    value: "Mass",
     size: tokens.typography.sizes.body,
     color: tokens.colors.text.secondary,
-  })
+  });
   const massValue = text({
     x: w - pad,
     y: pad + headerH + metaRowH - 8,
     value: formatMass(resolved.mass),
     size: tokens.typography.sizes.body,
     weight: 600,
-    anchor: 'end',
-  })
+    anchor: "end",
+  });
 
-  const sepY = pad + headerH + metaRowH + 6
-  const sep = divider({ x: pad, y: sepY, width: innerW })
+  const sepY = pad + headerH + metaRowH + 6;
+  const sep = divider({ x: pad, y: sepY, width: innerW });
 
   const statsSvg = rows
     .map((row, i) =>
@@ -131,9 +136,9 @@ export function renderComponent(
         inverted: row.inverted,
       }),
     )
-    .join('')
+    .join("");
 
-  const inner = `${chrome}${icon}${name}${badge}${subtitleText}${subtitleValue}${massLabel}${massValue}${sep}${statsSvg}`
+  const inner = `${chrome}${icon}${name}${badge}${subtitleText}${subtitleValue}${massLabel}${massValue}${sep}${statsSvg}`;
 
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${height}" viewBox="0 0 ${w} ${height}">${inner}</svg>`;
 }