@shipload/item-renderer 0.2.2 → 0.2.3

package/src/payload/codec.ts

@@ -1,26 +1,26 @@
-import { Serializer } from '@wharfkit/antelope'
-import { ServerContract } from '@shipload/sdk'
-import { InvalidPayloadError } from '../errors.ts'
-import { base64UrlToBytes, bytesToBase64Url } from './base64url.ts'
+import { Serializer } from "@wharfkit/antelope";
+import { ServerContract } from "@shipload/sdk";
+import { InvalidPayloadError } from "../errors.ts";
+import { base64UrlToBytes, bytesToBase64Url } from "./base64url.ts";
 
-export type CargoItem = InstanceType<typeof ServerContract.Types.cargo_item>
-export type CargoItemLike = Parameters<typeof ServerContract.Types.cargo_item.from>[0]
+export type CargoItem = InstanceType<typeof ServerContract.Types.cargo_item>;
+export type CargoItemLike = Parameters<typeof ServerContract.Types.cargo_item.from>[0];
 
 export function encodePayload(input: CargoItemLike): string {
-  const item = ServerContract.Types.cargo_item.from(input)
-  const bytes = Serializer.encode({ object: item }).array
-  return bytesToBase64Url(bytes)
+  const item = ServerContract.Types.cargo_item.from(input);
+  const bytes = Serializer.encode({ object: item }).array;
+  return bytesToBase64Url(bytes);
 }
 
 export function decodePayload(input: string): CargoItem {
-  if (input.length === 0) throw new InvalidPayloadError('empty payload')
-  const bytes = base64UrlToBytes(input)
+  if (input.length === 0) throw new InvalidPayloadError("empty payload");
+  const bytes = base64UrlToBytes(input);
   try {
     return Serializer.decode({
       data: bytes,
       type: ServerContract.Types.cargo_item,
-    }) as CargoItem
+    }) as CargoItem;
   } catch (e) {
-    throw new InvalidPayloadError(`cargo_item decode failed: ${(e as Error).message}`)
+    throw new InvalidPayloadError(`cargo_item decode failed: ${(e as Error).message}`);
   }
 }

package/src/primitives/category-icon.ts

@@ -1,28 +1,28 @@
-import type { CategoryIconShape } from '@shipload/sdk'
-import { el } from './svg.ts'
+import type { CategoryIconShape } from "@shipload/sdk";
+import { el } from "./svg.ts";
 
 export interface CategoryIconPathOpts {
-  shape: CategoryIconShape
-  cx: number
-  cy: number
-  size: number
-  color: string
-  strokeWidth?: number
+  shape: CategoryIconShape;
+  cx: number;
+  cy: number;
+  size: number;
+  color: string;
+  strokeWidth?: number;
 }
 
 export interface CategoryIconSvgOpts {
-  size?: number
-  color?: string
-  strokeWidth?: number
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
 }
 
 function hexPoints(cx: number, cy: number, r: number): string {
-  const pts: string[] = []
+  const pts: string[] = [];
   for (let i = 0; i < 6; i++) {
-    const angle = (Math.PI / 3) * i - Math.PI / 2
-    pts.push(`${(cx + r * Math.cos(angle)).toFixed(2)},${(cy + r * Math.sin(angle)).toFixed(2)}`)
+    const angle = (Math.PI / 3) * i - Math.PI / 2;
+    pts.push(`${(cx + r * Math.cos(angle)).toFixed(2)},${(cy + r * Math.sin(angle)).toFixed(2)}`);
   }
-  return pts.join(' ')
+  return pts.join(" ");
 }
 
 function diamondPoints(cx: number, cy: number, r: number): string {
@@ -31,57 +31,78 @@ function diamondPoints(cx: number, cy: number, r: number): string {
     `${(cx + r).toFixed(2)},${cy.toFixed(2)}`,
     `${cx.toFixed(2)},${(cy + r).toFixed(2)}`,
     `${(cx - r).toFixed(2)},${cy.toFixed(2)}`,
-  ].join(' ')
+  ].join(" ");
 }
 
 function starPoints(cx: number, cy: number, r: number): string {
-  const inner = r * 0.45
-  const pts: string[] = []
+  const inner = r * 0.45;
+  const pts: string[] = [];
   for (let i = 0; i < 10; i++) {
-    const angle = (Math.PI / 5) * i - Math.PI / 2
-    const radius = i % 2 === 0 ? r : inner
-    pts.push(`${(cx + radius * Math.cos(angle)).toFixed(2)},${(cy + radius * Math.sin(angle)).toFixed(2)}`)
+    const angle = (Math.PI / 5) * i - Math.PI / 2;
+    const radius = i % 2 === 0 ? r : inner;
+    pts.push(
+      `${(cx + radius * Math.cos(angle)).toFixed(2)},${(cy + radius * Math.sin(angle)).toFixed(2)}`,
+    );
   }
-  return pts.join(' ')
+  return pts.join(" ");
 }
 
-export function categoryIconPath({ shape, cx, cy, size, color, strokeWidth }: CategoryIconPathOpts): string {
-  const r = size / 2
-  const stroked = strokeWidth && strokeWidth > 0
+export function categoryIconPath({
+  shape,
+  cx,
+  cy,
+  size,
+  color,
+  strokeWidth,
+}: CategoryIconPathOpts): string {
+  const r = size / 2;
+  const stroked = strokeWidth && strokeWidth > 0;
   const shapeAttrs = stroked
-    ? { fill: 'none', stroke: color, 'stroke-width': strokeWidth, 'stroke-linejoin': 'round' as const }
-    : { fill: color }
+    ? {
+        fill: "none",
+        stroke: color,
+        "stroke-width": strokeWidth,
+        "stroke-linejoin": "round" as const,
+      }
+    : { fill: color };
   switch (shape) {
-    case 'hex':
-      return el('polygon', { points: hexPoints(cx, cy, r), ...shapeAttrs })
-    case 'diamond':
-      return el('polygon', { points: diamondPoints(cx, cy, r), ...shapeAttrs })
-    case 'star':
-      return el('polygon', { points: starPoints(cx, cy, r), ...shapeAttrs })
-    case 'circle':
-      return el('circle', { cx, cy, r, ...shapeAttrs })
-    case 'square':
-      return el('rect', { x: cx - r, y: cy - r, width: size, height: size, ...shapeAttrs })
+    case "hex":
+      return el("polygon", { points: hexPoints(cx, cy, r), ...shapeAttrs });
+    case "diamond":
+      return el("polygon", { points: diamondPoints(cx, cy, r), ...shapeAttrs });
+    case "star":
+      return el("polygon", { points: starPoints(cx, cy, r), ...shapeAttrs });
+    case "circle":
+      return el("circle", { cx, cy, r, ...shapeAttrs });
+    case "square":
+      return el("rect", { x: cx - r, y: cy - r, width: size, height: size, ...shapeAttrs });
   }
-  const _exhaustive: never = shape
-  throw new Error(`Unknown CategoryIconShape: ${String(_exhaustive)}`)
+  const _exhaustive: never = shape;
+  throw new Error(`Unknown CategoryIconShape: ${String(_exhaustive)}`);
 }
 
 export function categoryIconSvg(shape: CategoryIconShape, opts: CategoryIconSvgOpts = {}): string {
-  const size = opts.size ?? 16
-  const color = opts.color ?? '#ffffff'
-  const cx = size / 2
-  const cy = size / 2
-  const iconSize = size * 0.85
-  const inner = categoryIconPath({ shape, cx, cy, size: iconSize, color, strokeWidth: opts.strokeWidth })
+  const size = opts.size ?? 16;
+  const color = opts.color ?? "#ffffff";
+  const cx = size / 2;
+  const cy = size / 2;
+  const iconSize = size * 0.85;
+  const inner = categoryIconPath({
+    shape,
+    cx,
+    cy,
+    size: iconSize,
+    color,
+    strokeWidth: opts.strokeWidth,
+  });
   return el(
-    'svg',
+    "svg",
     {
-      xmlns: 'http://www.w3.org/2000/svg',
+      xmlns: "http://www.w3.org/2000/svg",
       width: size,
       height: size,
       viewBox: `0 0 ${size} ${size}`,
     },
     inner,
-  )
+  );
 }

package/src/primitives/compact-row.ts

@@ -1,19 +1,19 @@
-import { text } from './text.ts'
-import { tokens } from '../tokens/index.ts'
+import { text } from "./text.ts";
+import { tokens } from "../tokens/index.ts";
 
 export interface CompactRowProps {
-  x: number
-  y: number
-  width: number
-  label: string
-  value: string
-  labelColor?: string
-  valueColor?: string
+  x: number;
+  y: number;
+  width: number;
+  label: string;
+  value: string;
+  labelColor?: string;
+  valueColor?: string;
 }
 
 export function compactRow(p: CompactRowProps): string {
-  const labelColor = p.labelColor ?? tokens.colors.text.secondary
-  const valueColor = p.valueColor ?? tokens.colors.text.primary
+  const labelColor = p.labelColor ?? tokens.colors.text.secondary;
+  const valueColor = p.valueColor ?? tokens.colors.text.primary;
   return (
     text({
       x: p.x,
@@ -32,7 +32,7 @@ export function compactRow(p: CompactRowProps): string {
       weight: 700,
       family: tokens.typography.sans,
       color: valueColor,
-      anchor: 'end',
+      anchor: "end",
     })
-  )
+  );
 }

package/src/primitives/divider.ts

@@ -1,20 +1,20 @@
-import { el } from './svg.ts'
-import { tokens } from '../tokens/index.ts'
+import { el } from "./svg.ts";
+import { tokens } from "../tokens/index.ts";
 
 export interface DividerProps {
-  x: number
-  y: number
-  width: number
-  color?: string
+  x: number;
+  y: number;
+  width: number;
+  color?: string;
 }
 
 export function divider(props: DividerProps): string {
-  return el('line', {
+  return el("line", {
     x1: props.x,
     x2: props.x + props.width,
     y1: props.y,
     y2: props.y,
     stroke: props.color ?? tokens.colors.surface.panelBorder,
-    'stroke-width': 1,
-  })
+    "stroke-width": 1,
+  });
 }

package/src/primitives/icon-hex.ts

@@ -1,20 +1,20 @@
-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 IconHexProps {
-  x: number
-  y: number
-  color: string
-  code: string
+  x: number;
+  y: number;
+  color: string;
+  code: string;
 }
 
 export function iconHex({ x, y, color, code }: IconHexProps): string {
-  const size = tokens.spacing.iconHexSize
-  const h = size
-  const w = size * 1.1547 // flat-top hex aspect
-  const cx = x + w / 2
-  const cy = y + h / 2
+  const size = tokens.spacing.iconHexSize;
+  const h = size;
+  const w = size * 1.1547; // flat-top hex aspect
+  const cx = x + w / 2;
+  const cy = y + h / 2;
   const points = [
     [cx - w / 2, cy],
     [cx - w / 4, cy - h / 2],
@@ -22,9 +22,11 @@ export function iconHex({ x, y, color, code }: IconHexProps): string {
     [cx + w / 2, cy],
     [cx + w / 4, cy + h / 2],
     [cx - w / 4, cy + h / 2],
-  ].map(([px, py]) => `${px?.toFixed(1)},${py?.toFixed(1)}`).join(' ')
+  ]
+    .map(([px, py]) => `${px?.toFixed(1)},${py?.toFixed(1)}`)
+    .join(" ");
   return (
-    el('polygon', { points, fill: 'none', stroke: color, 'stroke-width': 1.5 }) +
+    el("polygon", { points, fill: "none", stroke: color, "stroke-width": 1.5 }) +
     text({
       x: cx,
       y: cy + 3,
@@ -33,7 +35,7 @@ export function iconHex({ x, y, color, code }: IconHexProps): string {
       weight: 700,
       family: tokens.typography.mono,
       color,
-      anchor: 'middle',
+      anchor: "middle",
     })
-  )
+  );
 }

package/src/primitives/module-slot.ts

@@ -1,62 +1,62 @@
-import { el } from './svg.ts'
-import { text } from './text.ts'
-import { wrapText } from './wrap.ts'
-import { tokens } from '../tokens/index.ts'
-import type { TextSpan } from '@shipload/sdk'
+import { el } from "./svg.ts";
+import { text } from "./text.ts";
+import { wrapText } from "./wrap.ts";
+import { tokens } from "../tokens/index.ts";
+import type { TextSpan } from "@shipload/sdk";
 
 export interface ModuleSlotProps {
-  x: number
-  y: number
-  width: number
-  installed: boolean
-  capability?: string
-  description?: string | TextSpan[]
-  accentColor?: string
+  x: number;
+  y: number;
+  width: number;
+  installed: boolean;
+  capability?: string;
+  description?: string | TextSpan[];
+  accentColor?: string;
 }
 
 const EMPTY_DIAMOND = (cx: number, cy: number, color: string) =>
-  el('polygon', {
+  el("polygon", {
     points: `${cx},${cy - 5} ${cx + 5},${cy} ${cx},${cy + 5} ${cx - 5},${cy}`,
-    fill: 'none',
+    fill: "none",
     stroke: color,
-    'stroke-width': 1,
-  })
+    "stroke-width": 1,
+  });
 
 const FILLED_DIAMOND = (cx: number, cy: number, color: string) =>
-  el('polygon', {
+  el("polygon", {
     points: `${cx},${cy - 5} ${cx + 5},${cy} ${cx},${cy + 5} ${cx - 5},${cy}`,
     fill: color,
-  })
+  });
 
 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 moduleSlot(props: ModuleSlotProps): string {
-  const iconX = props.x + 6
-  const iconY = props.y + 6
-  const textX = props.x + 20
+  const iconX = props.x + 6;
+  const iconY = props.y + 6;
+  const textX = props.x + 20;
 
   if (!props.installed) {
     return (
@@ -64,21 +64,21 @@ export function moduleSlot(props: ModuleSlotProps): string {
       text({
         x: textX,
         y: iconY + 3,
-        value: 'Empty module',
+        value: "Empty module",
         size: tokens.typography.sizes.body,
         color: tokens.colors.text.muted,
       })
-    )
+    );
   }
 
-  const accent = props.accentColor ?? tokens.colors.text.accent
-  const label = `${props.capability ?? 'Module'}: `
+  const accent = props.accentColor ?? tokens.colors.text.accent;
+  const label = `${props.capability ?? "Module"}: `;
 
-  const desc = props.description
+  const desc = props.description;
   const isEmpty =
     !desc ||
-    (typeof desc === 'string' && desc.length === 0) ||
-    (Array.isArray(desc) && desc.length === 0)
+    (typeof desc === "string" && desc.length === 0) ||
+    (Array.isArray(desc) && desc.length === 0);
 
   if (isEmpty) {
     return (
@@ -91,57 +91,57 @@ export function moduleSlot(props: ModuleSlotProps): string {
         weight: 600,
         color: tokens.colors.text.primary,
       })
-    )
+    );
   }
 
-  const descSpans: TextSpan[] = typeof desc === 'string' ? [{ text: desc }] : desc
-  const descPlain = descSpans.map((s) => s.text).join('')
-  const combined = label + descPlain
-  const lines = wrapText({ value: combined, charsPerLine: 36 })
+  const descSpans: TextSpan[] = typeof desc === "string" ? [{ text: desc }] : desc;
+  const descPlain = descSpans.map((s) => s.text).join("");
+  const combined = label + descPlain;
+  const lines = wrapText({ value: combined, charsPerLine: 36 });
 
-  const highlightColor = tokens.colors.text.accent
-  const bodyColor = tokens.colors.text.secondary
-  const labelColor = tokens.colors.text.primary
-  const size = tokens.typography.sizes.body
-  const fontFamily = escapeXml(tokens.typography.sans)
-  const labelEnd = label.length
+  const highlightColor = tokens.colors.text.accent;
+  const bodyColor = tokens.colors.text.secondary;
+  const labelColor = tokens.colors.text.primary;
+  const size = tokens.typography.sizes.body;
+  const fontFamily = escapeXml(tokens.typography.sans);
+  const labelEnd = label.length;
 
-  let offset = 0
+  let offset = 0;
   const textBlocks = lines
     .map((line, i) => {
-      const lineStart = combined.indexOf(line, offset)
-      const lineEnd = lineStart + line.length
-      offset = lineEnd
-      const y = iconY + 3 + i * 14
+      const lineStart = combined.indexOf(line, offset);
+      const lineEnd = lineStart + line.length;
+      offset = lineEnd;
+      const y = iconY + 3 + i * 14;
 
-      const tspans: string[] = []
+      const tspans: string[] = [];
 
       if (lineStart < labelEnd) {
-        const labelSliceEnd = Math.min(lineEnd, labelEnd)
-        const labelText = combined.slice(lineStart, labelSliceEnd)
+        const labelSliceEnd = Math.min(lineEnd, labelEnd);
+        const labelText = combined.slice(lineStart, labelSliceEnd);
         if (labelText.length > 0) {
           tspans.push(
             `<tspan font-weight="600" fill="${labelColor}">${escapeXml(labelText)}</tspan>`,
-          )
+          );
         }
         if (lineEnd > labelEnd) {
-          const descSlice = sliceSpans(descSpans, 0, lineEnd - labelEnd)
+          const descSlice = sliceSpans(descSpans, 0, lineEnd - labelEnd);
           for (const s of descSlice) {
-            const fill = s.highlight ? highlightColor : bodyColor
-            tspans.push(`<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`)
+            const fill = s.highlight ? highlightColor : bodyColor;
+            tspans.push(`<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`);
           }
         }
       } else {
-        const descSlice = sliceSpans(descSpans, lineStart - labelEnd, lineEnd - labelEnd)
+        const descSlice = sliceSpans(descSpans, lineStart - labelEnd, lineEnd - labelEnd);
         for (const s of descSlice) {
-          const fill = s.highlight ? highlightColor : bodyColor
-          tspans.push(`<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`)
+          const fill = s.highlight ? highlightColor : bodyColor;
+          tspans.push(`<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`);
         }
       }
 
-      return `<text x="${textX}" y="${y}" font-family="${fontFamily}" font-size="${size}">${tspans.join('')}</text>`
+      return `<text x="${textX}" y="${y}" font-family="${fontFamily}" font-size="${size}">${tspans.join("")}</text>`;
     })
-    .join('')
+    .join("");
 
-  return FILLED_DIAMOND(iconX, iconY, accent) + textBlocks
+  return FILLED_DIAMOND(iconX, iconY, accent) + textBlocks;
 }

package/src/primitives/panel.ts

@@ -1,16 +1,16 @@
-import { el } from './svg.ts'
-import { tokens } from '../tokens/index.ts'
+import { el } from "./svg.ts";
+import { tokens } from "../tokens/index.ts";
 
 export interface PanelProps {
-  width: number
-  height: number
-  borderColor?: string
+  width: number;
+  height: number;
+  borderColor?: string;
 }
 
 export function panel(props: PanelProps): string {
-  const { width, height, borderColor } = props
-  const r = tokens.spacing.cornerRadius
-  return el('rect', {
+  const { width, height, borderColor } = props;
+  const r = tokens.spacing.cornerRadius;
+  return el("rect", {
     x: 0.5,
     y: 0.5,
     width: width - 1,
@@ -19,6 +19,6 @@ export function panel(props: PanelProps): string {
     ry: r,
     fill: tokens.colors.surface.panel,
     stroke: borderColor ?? tokens.colors.surface.panelBorder,
-    'stroke-width': 1,
-  })
+    "stroke-width": 1,
+  });
 }

package/src/primitives/quantity-badge.ts

@@ -1,20 +1,20 @@
-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 QuantityBadgeProps {
-  x: number
-  y: number
-  quantity: number
+  x: number;
+  y: number;
+  quantity: number;
 }
 
 export function quantityBadge({ x, y, quantity }: QuantityBadgeProps): string {
-  if (quantity <= 1) return ''
-  const label = `×${quantity}`
-  const w = label.length * 7 + 12
-  const h = tokens.spacing.quantityBadgeHeight
+  if (quantity <= 1) return "";
+  const label = `×${quantity}`;
+  const w = label.length * 7 + 12;
+  const h = tokens.spacing.quantityBadgeHeight;
   return (
-    el('rect', {
+    el("rect", {
       x: x - w,
       y,
       width: w,
@@ -31,7 +31,7 @@ export function quantityBadge({ x, y, quantity }: QuantityBadgeProps): string {
       weight: 700,
       family: tokens.typography.mono,
       color: tokens.colors.surface.background,
-      anchor: 'middle',
+      anchor: "middle",
     })
-  )
+  );
 }