@shipload/item-renderer 0.2.2 → 1.0.0-beta1

package/src/primitives/category-icon.ts

@@ -1,87 +1,110 @@
-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[] = []
-  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)}`)
-  }
-  return pts.join(' ')
+    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)}`
+        )
+    }
+    return pts.join(' ')
 }
 
 function diamondPoints(cx: number, cy: number, r: number): string {
-  return [
-    `${cx.toFixed(2)},${(cy - r).toFixed(2)}`,
-    `${(cx + r).toFixed(2)},${cy.toFixed(2)}`,
-    `${cx.toFixed(2)},${(cy + r).toFixed(2)}`,
-    `${(cx - r).toFixed(2)},${cy.toFixed(2)}`,
-  ].join(' ')
+    return [
+        `${cx.toFixed(2)},${(cy - r).toFixed(2)}`,
+        `${(cx + r).toFixed(2)},${cy.toFixed(2)}`,
+        `${cx.toFixed(2)},${(cy + r).toFixed(2)}`,
+        `${(cx - r).toFixed(2)},${cy.toFixed(2)}`,
+    ].join(' ')
 }
 
 function starPoints(cx: number, cy: number, r: number): 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)}`)
-  }
-  return pts.join(' ')
+    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)}`
+        )
+    }
+    return pts.join(' ')
 }
 
-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 }
-  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 })
-  }
-  const _exhaustive: never = shape
-  throw new Error(`Unknown CategoryIconShape: ${String(_exhaustive)}`)
+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}
+    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})
+    }
+    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 })
-  return el(
-    'svg',
-    {
-      xmlns: 'http://www.w3.org/2000/svg',
-      width: size,
-      height: size,
-      viewBox: `0 0 ${size} ${size}`,
-    },
-    inner,
-  )
+    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',
+        {
+            xmlns: 'http://www.w3.org/2000/svg',
+            width: size,
+            height: size,
+            viewBox: `0 0 ${size} ${size}`,
+        },
+        inner
+    )
 }

package/src/primitives/compact-row.ts

@@ -1,38 +1,38 @@
-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
-  return (
-    text({
-      x: p.x,
-      y: p.y,
-      value: p.label,
-      size: 11,
-      weight: 500,
-      family: tokens.typography.sans,
-      color: labelColor,
-    }) +
-    text({
-      x: p.x + p.width,
-      y: p.y,
-      value: p.value,
-      size: 11,
-      weight: 700,
-      family: tokens.typography.sans,
-      color: valueColor,
-      anchor: 'end',
-    })
-  )
+    const labelColor = p.labelColor ?? tokens.colors.text.secondary
+    const valueColor = p.valueColor ?? tokens.colors.text.primary
+    return (
+        text({
+            x: p.x,
+            y: p.y,
+            value: p.label,
+            size: 11,
+            weight: 500,
+            family: tokens.typography.sans,
+            color: labelColor,
+        }) +
+        text({
+            x: p.x + p.width,
+            y: p.y,
+            value: p.value,
+            size: 11,
+            weight: 700,
+            family: tokens.typography.sans,
+            color: valueColor,
+            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', {
-    x1: props.x,
-    x2: props.x + props.width,
-    y1: props.y,
-    y2: props.y,
-    stroke: props.color ?? tokens.colors.surface.panelBorder,
-    'stroke-width': 1,
-  })
+    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,
+    })
 }

package/src/primitives/icon-hex.ts

@@ -1,39 +1,41 @@
-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 points = [
-    [cx - w / 2, cy],
-    [cx - w / 4, cy - h / 2],
-    [cx + w / 4, cy - h / 2],
-    [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(' ')
-  return (
-    el('polygon', { points, fill: 'none', stroke: color, 'stroke-width': 1.5 }) +
-    text({
-      x: cx,
-      y: cy + 3,
-      value: code,
-      size: 9,
-      weight: 700,
-      family: tokens.typography.mono,
-      color,
-      anchor: 'middle',
-    })
-  )
+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 points = [
+        [cx - w / 2, cy],
+        [cx - w / 4, cy - h / 2],
+        [cx + w / 4, cy - h / 2],
+        [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(' ')
+    return (
+        el('polygon', {points, fill: 'none', stroke: color, 'stroke-width': 1.5}) +
+        text({
+            x: cx,
+            y: cy + 3,
+            value: code,
+            size: 9,
+            weight: 700,
+            family: tokens.typography.mono,
+            color,
+            anchor: 'middle',
+        })
+    )
 }

package/src/primitives/module-slot.ts

@@ -1,147 +1,147 @@
-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', {
-    points: `${cx},${cy - 5} ${cx + 5},${cy} ${cx},${cy + 5} ${cx - 5},${cy}`,
-    fill: 'none',
-    stroke: color,
-    'stroke-width': 1,
-  })
+    el('polygon', {
+        points: `${cx},${cy - 5} ${cx + 5},${cy} ${cx},${cy + 5} ${cx - 5},${cy}`,
+        fill: 'none',
+        stroke: color,
+        'stroke-width': 1,
+    })
 
 const FILLED_DIAMOND = (cx: number, cy: number, color: string) =>
-  el('polygon', {
-    points: `${cx},${cy - 5} ${cx + 5},${cy} ${cx},${cy + 5} ${cx - 5},${cy}`,
-    fill: color,
-  })
+    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;')
+    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 moduleSlot(props: ModuleSlotProps): string {
-  const iconX = props.x + 6
-  const iconY = props.y + 6
-  const textX = props.x + 20
-
-  if (!props.installed) {
-    return (
-      EMPTY_DIAMOND(iconX, iconY, tokens.colors.surface.panelBorderBright) +
-      text({
-        x: textX,
-        y: iconY + 3,
-        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 desc = props.description
-  const isEmpty =
-    !desc ||
-    (typeof desc === 'string' && desc.length === 0) ||
-    (Array.isArray(desc) && desc.length === 0)
-
-  if (isEmpty) {
-    return (
-      FILLED_DIAMOND(iconX, iconY, accent) +
-      text({
-        x: textX,
-        y: iconY + 3,
-        value: label.trimEnd(),
-        size: tokens.typography.sizes.body,
-        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 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
-  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 tspans: string[] = []
-
-      if (lineStart < labelEnd) {
-        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)
-          for (const s of descSlice) {
-            const fill = s.highlight ? highlightColor : bodyColor
-            tspans.push(`<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`)
-          }
-        }
-      } else {
-        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>`)
-        }
-      }
-
-      return `<text x="${textX}" y="${y}" font-family="${fontFamily}" font-size="${size}">${tspans.join('')}</text>`
-    })
-    .join('')
-
-  return FILLED_DIAMOND(iconX, iconY, accent) + textBlocks
+    const iconX = props.x + 6
+    const iconY = props.y + 6
+    const textX = props.x + 20
+
+    if (!props.installed) {
+        return (
+            EMPTY_DIAMOND(iconX, iconY, tokens.colors.surface.panelBorderBright) +
+            text({
+                x: textX,
+                y: iconY + 3,
+                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 desc = props.description
+    const isEmpty =
+        !desc ||
+        (typeof desc === 'string' && desc.length === 0) ||
+        (Array.isArray(desc) && desc.length === 0)
+
+    if (isEmpty) {
+        return (
+            FILLED_DIAMOND(iconX, iconY, accent) +
+            text({
+                x: textX,
+                y: iconY + 3,
+                value: label.trimEnd(),
+                size: tokens.typography.sizes.body,
+                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 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
+    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 tspans: string[] = []
+
+            if (lineStart < labelEnd) {
+                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)
+                    for (const s of descSlice) {
+                        const fill = s.highlight ? highlightColor : bodyColor
+                        tspans.push(`<tspan fill="${fill}">${escapeXml(s.text)}</tspan>`)
+                    }
+                }
+            } else {
+                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>`)
+                }
+            }
+
+            return `<text x="${textX}" y="${y}" font-family="${fontFamily}" font-size="${size}">${tspans.join('')}</text>`
+        })
+        .join('')
+
+    return FILLED_DIAMOND(iconX, iconY, accent) + textBlocks
 }