@shipload/item-renderer 0.2.3 → 1.0.0-beta1

package/src/primitives/panel.ts

@@ -1,24 +1,24 @@
-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", {
-    x: 0.5,
-    y: 0.5,
-    width: width - 1,
-    height: height - 1,
-    rx: r,
-    ry: r,
-    fill: tokens.colors.surface.panel,
-    stroke: borderColor ?? tokens.colors.surface.panelBorder,
-    "stroke-width": 1,
-  });
+    const {width, height, borderColor} = props
+    const r = tokens.spacing.cornerRadius
+    return el('rect', {
+        x: 0.5,
+        y: 0.5,
+        width: width - 1,
+        height: height - 1,
+        rx: r,
+        ry: r,
+        fill: tokens.colors.surface.panel,
+        stroke: borderColor ?? tokens.colors.surface.panelBorder,
+        'stroke-width': 1,
+    })
 }

package/src/primitives/quantity-badge.ts

@@ -1,37 +1,37 @@
-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;
-  return (
-    el("rect", {
-      x: x - w,
-      y,
-      width: w,
-      height: h,
-      rx: h / 2,
-      ry: h / 2,
-      fill: tokens.colors.text.accent,
-    }) +
-    text({
-      x: x - w / 2,
-      y: y + h / 2 + 4,
-      value: label,
-      size: tokens.typography.sizes.label,
-      weight: 700,
-      family: tokens.typography.mono,
-      color: tokens.colors.surface.background,
-      anchor: "middle",
-    })
-  );
+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
+    return (
+        el('rect', {
+            x: x - w,
+            y,
+            width: w,
+            height: h,
+            rx: h / 2,
+            ry: h / 2,
+            fill: tokens.colors.text.accent,
+        }) +
+        text({
+            x: x - w / 2,
+            y: y + h / 2 + 4,
+            value: label,
+            size: tokens.typography.sizes.label,
+            weight: 700,
+            family: tokens.typography.mono,
+            color: tokens.colors.surface.background,
+            anchor: 'middle',
+        })
+    )
 }

package/src/primitives/span-paragraph.ts

@@ -1,70 +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;");
+    return s
+        .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;
-  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 });
-  }
-  return out;
+    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})
+    }
+    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;
-  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 tspans = lineSpans
-        .map((s) => {
-          const fill = s.highlight ? highlightColor : bodyColor;
-          return `<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`;
+    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 tspans = lineSpans
+                .map((s) => {
+                    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,85 +1,85 @@
-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({
-  x,
-  y,
-  width,
-  label,
-  abbreviation,
-  value,
-  color,
-  inverted,
-}: StatBarProps): string {
-  const h = tokens.spacing.statBarHeight;
-
-  let labelOut =
-    text({
-      x,
-      y: y - 6,
-      value: abbreviation,
-      size: tokens.typography.sizes.label,
-      weight: 700,
-      family: tokens.typography.mono,
-      color,
-    }) +
-    text({
-      x: x + 22,
-      y: y - 6,
-      value: label,
-      size: tokens.typography.sizes.stat,
-      weight: 400,
-      color: tokens.colors.text.primary,
-    });
-
-  const track = el("rect", {
     x,
     y,
     width,
-    height: h,
-    rx: h / 2,
-    ry: h / 2,
-    fill: tokens.colors.surface.panelBorder,
-  });
+    label,
+    abbreviation,
+    value,
+    color,
+    inverted,
+}: StatBarProps): string {
+    const h = tokens.spacing.statBarHeight
+
+    let labelOut =
+        text({
+            x,
+            y: y - 6,
+            value: abbreviation,
+            size: tokens.typography.sizes.label,
+            weight: 700,
+            family: tokens.typography.mono,
+            color,
+        }) +
+        text({
+            x: x + 22,
+            y: y - 6,
+            value: label,
+            size: tokens.typography.sizes.stat,
+            weight: 400,
+            color: tokens.colors.text.primary,
+        })
+
+    const track = el('rect', {
+        x,
+        y,
+        width,
+        height: h,
+        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);
+    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)
 
-    labelOut += text({
-      x: x + width,
-      y: y - 6,
-      value: String(clamped),
-      size: tokens.typography.sizes.statValue,
-      weight: 700,
-      color,
-      anchor: "end",
-    });
+        labelOut += text({
+            x: x + width,
+            y: y - 6,
+            value: String(clamped),
+            size: tokens.typography.sizes.statValue,
+            weight: 700,
+            color,
+            anchor: 'end',
+        })
 
-    const bar = el("rect", {
-      x,
-      y,
-      width: filled,
-      height: h,
-      rx: h / 2,
-      ry: h / 2,
-      fill: color,
-    });
-    return labelOut + track + bar;
-  }
+        const bar = el('rect', {
+            x,
+            y,
+            width: filled,
+            height: h,
+            rx: h / 2,
+            ry: h / 2,
+            fill: color,
+        })
+        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;");
+    return input
+        .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 = "";
-  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}"`;
-  }
-  return 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}"`
+    }
+    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",
-    {
-      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,
-      fill: props.color ?? tokens.colors.text.primary,
-      "text-anchor": props.anchor,
-      "letter-spacing": props.letterSpacing,
-      "dominant-baseline": props.dominantBaseline,
-    },
-    escapeValue(props.value),
-  );
+    return el(
+        '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,
+            fill: props.color ?? tokens.colors.text.primary,
+            '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;");
+    return v
+        .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 = "";
-  for (const word of words) {
-    if (current.length === 0) {
-      current = word;
-      continue;
+export function wrapText({value, charsPerLine}: WrapProps): string[] {
+    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
+        }
+        if (current.length + 1 + word.length <= charsPerLine) {
+            current += ` ${word}`
+        } else {
+            lines.push(current)
+            current = word
+        }
     }
-    if (current.length + 1 + word.length <= charsPerLine) {
-      current += ` ${word}`;
-    } else {
-      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,29 +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);
+    return renderByType(item, resolved)
 }
 
 export async function renderFromPayload(
-  payload: string,
-  opts?: RenderOptions,
-): Promise<{ svg: string; item: ResolvedItem }> {
-  const cargoItem = decodePayload(payload);
-  let resolved: ResolvedItem;
-  try {
-    resolved = resolveItem(cargoItem.item_id, cargoItem.stats, cargoItem.modules);
-  } catch {
-    throw new UnknownItemError(Number(BigInt(cargoItem.item_id.toString())));
-  }
-  const svg = renderItem(cargoItem, resolved, opts);
-  return { svg, item: resolved };
+    payload: string,
+    opts?: RenderOptions
+): Promise<{svg: string; item: ResolvedItem}> {
+    const cargoItem = decodePayload(payload)
+    let resolved: ResolvedItem
+    try {
+        resolved = resolveItem(cargoItem.item_id, cargoItem.stats, cargoItem.modules)
+    } catch {
+        throw new UnknownItemError(Number(BigInt(cargoItem.item_id.toString())))
+    }
+    const svg = renderItem(cargoItem, resolved, opts)
+    return {svg, item: resolved}
 }

package/src/templates/_shared.ts

@@ -1,14 +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: number): string {
-  return tokens.colors.tier[tier] ?? tokens.colors.surface.panelBorder;
+    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')
 }