@shipload/item-renderer 0.2.1 → 0.2.3

package/src/templates/index.ts

@@ -1,13 +1,13 @@
-import type { ResolvedItem } from '@shipload/sdk'
-import type { CargoItem } from '../payload/codec.ts'
-import { RenderError } from '../errors.ts'
-import { renderResource } from './resource.ts'
-import { renderPackedEntity } from './packed-entity.ts'
-import { renderComponent } from './component.ts'
-import { renderModule } from './module.ts'
+import type { ResolvedItem } from "@shipload/sdk";
+import type { CargoItem } from "../payload/codec.ts";
+import { RenderError } from "../errors.ts";
+import { renderResource } from "./resource.ts";
+import { renderPackedEntity } from "./packed-entity.ts";
+import { renderComponent } from "./component.ts";
+import { renderModule } from "./module.ts";
 
 export interface RenderByTypeOpts {
-  mode?: 'values' | 'ranges'
+  mode?: "values" | "ranges";
 }
 
 export function renderByType(
@@ -16,15 +16,15 @@ export function renderByType(
   opts?: RenderByTypeOpts,
 ): string {
   switch (resolved.itemType) {
-    case 'resource':
-      return renderResource(item, resolved, opts)
-    case 'entity':
-      return renderPackedEntity(item, resolved)
-    case 'component':
-      return renderComponent(item, resolved, opts)
-    case 'module':
-      return renderModule(item, resolved, opts)
+    case "resource":
+      return renderResource(item, resolved, opts);
+    case "entity":
+      return renderPackedEntity(item, resolved);
+    case "component":
+      return renderComponent(item, resolved, opts);
+    case "module":
+      return renderModule(item, resolved, opts);
     default:
-      throw new RenderError(`unknown itemType '${String(resolved.itemType)}'`)
+      throw new RenderError(`unknown itemType '${String(resolved.itemType)}'`);
   }
 }

package/src/templates/item-cell.ts

@@ -1,28 +1,28 @@
-import type { ResolvedItem } from '@shipload/sdk'
-import { tierColors, categoryColors, categoryIconShapes } from '@shipload/sdk'
-import { el } from '../primitives/svg.ts'
-import { text } from '../primitives/text.ts'
-import { categoryIconPath } from '../primitives/category-icon.ts'
-import { tokens } from '../tokens/index.ts'
+import type { ResolvedItem } from "@shipload/sdk";
+import { tierColors, categoryColors, categoryIconShapes } from "@shipload/sdk";
+import { el } from "../primitives/svg.ts";
+import { text } from "../primitives/text.ts";
+import { categoryIconPath } from "../primitives/category-icon.ts";
+import { tokens } from "../tokens/index.ts";
 
 export interface ItemCellProps {
-  resolved: ResolvedItem
-  quantity?: number
-  size?: number
+  resolved: ResolvedItem;
+  quantity?: number;
+  size?: number;
 }
 
 export interface ItemCellGroupProps extends ItemCellProps {
-  x: number
-  y: number
+  x: number;
+  y: number;
 }
 
 function cellInner(props: ItemCellProps): string {
-  const size = props.size ?? 48
-  const height = Math.round(size * 1.25)
-  const r = Math.max(4, Math.round(size * 0.12))
-  const cx = size / 2
+  const size = props.size ?? 48;
+  const height = Math.round(size * 1.25);
+  const r = Math.max(4, Math.round(size * 0.12));
+  const cx = size / 2;
 
-  const border = el('rect', {
+  const border = el("rect", {
     x: 0.5,
     y: 0.5,
     width: size - 1,
@@ -30,28 +30,35 @@ function cellInner(props: ItemCellProps): string {
     rx: r,
     ry: r,
     fill: tokens.colors.surface.panel,
-    stroke: tierColors[props.resolved.tier],
-    'stroke-width': 1.5,
-  })
+    stroke: tierColors[props.resolved.tier] ?? tokens.colors.surface.panelBorder,
+    "stroke-width": 1.5,
+  });
 
-  let content = ''
+  let content = "";
   if (props.resolved.abbreviation) {
-    const iconCy = size * 0.45
+    const iconCy = size * 0.45;
     content = text({
       x: cx,
       y: iconCy,
       value: props.resolved.abbreviation,
       size: Math.round(size * 0.28),
       weight: 700,
-      anchor: 'middle',
+      anchor: "middle",
       color: tokens.colors.text.primary,
       family: tokens.typography.display,
-    })
+    });
   } else if (props.resolved.category) {
-    const shape = categoryIconShapes[props.resolved.category]
-    const color = categoryColors[props.resolved.category]
-    const iconCy = size * 0.4
-    content = categoryIconPath({ shape, cx, cy: iconCy, size: size * 0.32, color, strokeWidth: 1.5 })
+    const shape = categoryIconShapes[props.resolved.category];
+    const color = categoryColors[props.resolved.category];
+    const iconCy = size * 0.4;
+    content = categoryIconPath({
+      shape,
+      cx,
+      cy: iconCy,
+      size: size * 0.32,
+      color,
+      strokeWidth: 1.5,
+    });
   } else if (props.resolved.icon) {
     content = text({
       x: cx,
@@ -59,38 +66,38 @@ function cellInner(props: ItemCellProps): string {
       value: props.resolved.icon,
       size: Math.round(size * 0.44),
       weight: 400,
-      anchor: 'middle',
-      dominantBaseline: 'central',
+      anchor: "middle",
+      dominantBaseline: "central",
       color: tokens.colors.text.primary,
-    })
+    });
   }
 
-  const qty = props.quantity ?? 0
-  let quantityText = ''
+  const qty = props.quantity ?? 0;
+  let quantityText = "";
   if (qty > 1) {
-    const qtyFontSize = Math.max(9, Math.round(size * 0.22))
-    const qtyPad = Math.max(3, Math.round(size * 0.12))
+    const qtyFontSize = Math.max(9, Math.round(size * 0.22));
+    const qtyPad = Math.max(3, Math.round(size * 0.12));
     quantityText = text({
       x: size - qtyPad,
       y: height - qtyPad,
       value: String(qty),
       size: qtyFontSize,
       weight: 700,
-      anchor: 'end',
+      anchor: "end",
       color: tokens.colors.text.primary,
       family: tokens.typography.display,
-    })
+    });
   }
 
-  return border + content + quantityText
+  return border + content + quantityText;
 }
 
 export function itemCellGroup(props: ItemCellGroupProps): string {
-  return `<g transform="translate(${props.x}, ${props.y})">${cellInner(props)}</g>`
+  return `<g transform="translate(${props.x}, ${props.y})">${cellInner(props)}</g>`;
 }
 
 export function renderItemCell(props: ItemCellProps): string {
-  const size = props.size ?? 48
-  const height = Math.round(size * 1.25)
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${height}" viewBox="0 0 ${size} ${height}">${cellInner(props)}</svg>`
+  const size = props.size ?? 48;
+  const height = Math.round(size * 1.25);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${height}" viewBox="0 0 ${size} ${height}">${cellInner(props)}</svg>`;
 }

package/src/templates/module.ts

@@ -1,81 +1,83 @@
-import type { ResolvedItem } from '@shipload/sdk'
-import { describeModuleForItem, 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 { divider } from '../primitives/divider.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'
-import { shortCode, formatMass, tierBorder } from './_shared.ts'
+import type { ResolvedItem } from "@shipload/sdk";
+import { describeModuleForItem, formatTier, 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 { divider } from "../primitives/divider.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";
+import { shortCode, formatMass, tierBorder } 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
+  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'
+  mode?: "values" | "ranges";
 }
 
-export function renderModule(item: CargoItem, resolved: ResolvedItem, opts?: RenderModuleOpts): string {
-  const mode = opts?.mode ?? 'values'
-  const w = tokens.spacing.panelWidth
-  const pad = tokens.spacing.panelPadding
-  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 headerH = 48
-  const metaRowH = 28
-  const sepY = pad + headerH + metaRowH + 6
-
-  let bodyHeight = 0
-  if (mode === 'ranges') {
-    bodyHeight = 20 + 8
+export function renderModule(
+  item: CargoItem,
+  resolved: ResolvedItem,
+  opts?: RenderModuleOpts,
+): string {
+  const mode = opts?.mode ?? "values";
+  const w = tokens.spacing.panelWidth;
+  const pad = tokens.spacing.panelPadding;
+  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 headerH = 48;
+  const metaRowH = 28;
+  const sepY = pad + headerH + metaRowH + 6;
+
+  let bodyHeight = 0;
+  if (mode === "ranges") {
+    bodyHeight = 20 + 8;
   } else if (desc && group) {
     const plain = renderDescription(desc)
       .map((s) => s.text)
-      .join('')
+      .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 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
+      [""],
+    );
+    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 capHeaderH = 22;
+    const attrsH = attrs.length * 18;
+    bodyHeight = capHeaderH + attrsH + 8;
   }
 
-  const height = headerH + metaRowH + 14 + bodyHeight + pad
+  const height = headerH + metaRowH + 14 + bodyHeight + 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 iconColor = group ? capabilityColor(group.capability) : capabilityColor(capabilityName)
+  const iconColor = group ? capabilityColor(group.capability) : capabilityColor(capabilityName);
   const icon = iconHex({
     x: pad,
     y: pad + 4,
     color: iconColor,
     code: shortCode(resolved.itemId),
-  })
+  });
 
   const name = text({
     x: pad + 34,
@@ -84,46 +86,45 @@ export function renderModule(item: CargoItem, resolved: ResolvedItem, opts?: Ren
     size: tokens.typography.sizes.title,
     weight: 700,
     family: tokens.typography.display,
-  })
+  });
 
-  const tierNum = resolved.tier.replace(/^t/i, '')
   const subtitleLabel = 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: `MODULE · T${tierNum}`,
+    value: `MODULE · ${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 sep = divider({ x: pad, y: sepY, width: innerW })
+  const sep = divider({ x: pad, y: sepY, width: innerW });
 
-  let capSection = ''
-  if (mode === 'ranges') {
-    const accentColor = capabilityColor(capabilityName)
+  let capSection = "";
+  if (mode === "ranges") {
+    const accentColor = capabilityColor(capabilityName);
     capSection = text({
       x: pad,
       y: sepY + 16,
@@ -133,9 +134,9 @@ export function renderModule(item: CargoItem, resolved: ResolvedItem, opts?: Ren
       family: tokens.typography.sans,
       color: accentColor,
       letterSpacing: 1,
-    })
+    });
   } else if (desc && group) {
-    const accentColor = capabilityColor(group.capability)
+    const accentColor = capabilityColor(group.capability);
     const capHeader = text({
       x: pad,
       y: sepY + 16,
@@ -145,18 +146,18 @@ export function renderModule(item: CargoItem, resolved: ResolvedItem, opts?: Ren
       family: tokens.typography.sans,
       color: accentColor,
       letterSpacing: 1,
-    })
-    const spans = renderDescription(desc)
+    });
+    const spans = renderDescription(desc);
     const { svg: paraSvg } = spanParagraph({
       x: pad,
       y: sepY + 36,
       spans,
       charsPerLine: 36,
       lineHeight: 14,
-    })
-    capSection = capHeader + paraSvg
+    });
+    capSection = capHeader + paraSvg;
   } else if (group && attrs.length > 0) {
-    const capY = sepY + 22
+    const capY = sepY + 22;
     const capHeader = text({
       x: pad,
       y: capY,
@@ -166,25 +167,25 @@ export function renderModule(item: CargoItem, resolved: ResolvedItem, opts?: Ren
       family: tokens.typography.sans,
       color: capabilityColor(group.capability),
       letterSpacing: 0.8,
-    })
+    });
 
     const attrRows = attrs
       .map((attr, i) => {
-        const displayValue = String(attr.value)
+        const displayValue = String(attr.value);
         return compactRow({
           x: pad,
           y: capY + 14 + i * 18,
           width: innerW,
           label: attr.label,
           value: displayValue,
-        })
+        });
       })
-      .join('')
+      .join("");
 
-    capSection = capHeader + attrRows
+    capSection = capHeader + attrRows;
   }
 
-  const inner = `${chrome}${icon}${name}${badge}${subtitleLabel}${subtitleValue}${massLabel}${massValue}${sep}${capSection}`
+  const inner = `${chrome}${icon}${name}${badge}${subtitleLabel}${subtitleValue}${massLabel}${massValue}${sep}${capSection}`;
 
-  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>`;
 }

package/src/templates/packed-entity.ts

@@ -1,30 +1,28 @@
-import type { ResolvedItem, ResolvedModuleSlot } from '@shipload/sdk'
-import { describeModuleForSlot, renderDescription } from '@shipload/sdk'
-import type { CargoItem } from '../payload/codec.ts'
-import { renderShipPanel, type ShipPanelSlot } from './ship-panel.ts'
+import type { ResolvedItem, ResolvedModuleSlot } from "@shipload/sdk";
+import { describeModuleForSlot, renderDescription } from "@shipload/sdk";
+import type { CargoItem } from "../payload/codec.ts";
+import { renderShipPanel, type ShipPanelSlot } from "./ship-panel.ts";
 
 function slotToPanelSlot(slot: ResolvedModuleSlot): ShipPanelSlot {
   if (!slot.installed || !slot.attributes || !slot.name) {
-    return { installed: false }
+    return { installed: false };
   }
-  const desc = describeModuleForSlot(slot)
+  const desc = describeModuleForSlot(slot);
   if (desc) {
-    return { name: slot.name, installed: true, description: renderDescription(desc) }
+    return { name: slot.name, installed: true, description: renderDescription(desc) };
   }
-  const shorthand = slot.attributes
-    .map((a) => `${a.value} ${a.label.toLowerCase()}`)
-    .join(' · ')
-  return { name: slot.name, installed: true, description: shorthand }
+  const shorthand = slot.attributes.map((a) => `${a.value} ${a.label.toLowerCase()}`).join(" · ");
+  return { name: slot.name, installed: true, description: shorthand };
 }
 
 export function renderPackedEntity(item: CargoItem, resolved: ResolvedItem): string {
-  const quantity = Number(BigInt(item.quantity.toString()))
-  const slots = (resolved.moduleSlots ?? []).map(slotToPanelSlot)
+  const quantity = Number(BigInt(item.quantity.toString()));
+  const slots = (resolved.moduleSlots ?? []).map(slotToPanelSlot);
   return renderShipPanel({
     name: `${resolved.name} (Packed)`,
     tier: resolved.tier,
     quantity,
     attributes: resolved.attributes ?? [],
     slots,
-  })
+  });
 }