Spec Sheet & Manufacturing

The Spec Sheet is a print ready summary of a ring's configuration: profile, dimensions, materials, diamonds, engraving, and pricing. It opens in a new browser tab and can be saved as PDF or printed directly.

The spec sheet is manufacturer-independent. Send it to any workshop, any CAD team, any CNC machine. No proprietary format or vendor-specific tooling required.

TIP

Dimensions on the spec sheet are computed from the actual 3D geometry, not from a size chart or lookup table. The width, height, and volume are exact values from the parametric model. Communicate this to your manufacturing partners so they know the numbers are geometry derived, not catalog approximations.

Quick Start

// Get all data needed for the spec sheet
const { snapshot, price, diamondSizeInfo, actualDimsMm } = api.getSpecSheetData('her');

// Open in a new window (built-in UI does this automatically)
import { renderSpecSheetHTML } from '@ijewel3d/common';

const html = renderSpecSheetHTML(specData, { accent: '#8B6914' });
const win = window.open('', '_blank');
win.document.write(html);
win.document.close();

The built-in UI includes a "View Spec Sheet" button below the price total that handles this automatically.

What's Included

Section	Details
Header	Logo, date, reference number
Profile	Cross section diagram with dimension lines
Dimensions	Width, height, ring size (US/EU/UK), inner diameter
Materials	Metal name(s), finish, color swatches, partition info
Edges	Edge type and side (if applied)
Top View	Birds eye diagram showing metal zones and diamond placement
Diamonds	Setting type, count, stone diameter, per-stone carats, total carat weight, span, band diagram
Engraving	Engraved text and font
Pricing	Full breakdown: metal cost, making charge, diamond cost, setting cost, finish surcharge, markup, total

Generating the Data

getSpecSheetData() bundles everything the spec sheet needs in a single call:

const data = api.getSpecSheetData('her');

// data.snapshot     → full RingSnapshot (profile, dimensions, materials, diamonds, etc.)
// data.price        → PriceBreakdown or null (if pricing not configured)
// data.diamondSizeInfo → { diameterMm, carats } or null (if no diamonds)
// data.actualDimsMm   → { widthMm, heightMm } (actual mm after multiplier)

Rendering Options

renderSpecSheetHTML() produces a complete standalone HTML document:

const html = renderSpecSheetHTML(specData, {
  accent: '#8B6914',           // accent color for diagrams and headings
  reference: 'ORDER-2024-001', // custom reference number
  logoUrl: '/my-logo.svg',     // custom logo (defaults to iJewel3D logo)
  themeVars: {                  // inject CSS custom properties
    '--rb-color-primary': '#8B6914',
  },
});

Option	Type	Default	Description
accent	string	#1a1a1a	Accent color for SVG diagrams and section titles
reference	string	Auto-generated	Reference number shown in the header (format: WBB-YYYYMMDD-001)
logoUrl	string	iJewel3D logo	URL to a custom logo image
themeVars	Record<string, string>	-	CSS custom properties injected into the document

Light accent colors

If the accent color is too light for the cream background, the renderer automatically falls back to #1a1a1a for readability.

SpecSheetData Type Reference

The full SpecSheetData interface accepted by both the React component and the HTML renderer:

interface SpecSheetData {
  bandName: string
  profile: { index: number; name: string }
  dimensions: { widthMm: number; heightMm: number; radiusMm: number }
  materials: {
    partition: number
    slots: { slot: number; metal: string; finish: string }[]
  }
  diamonds: {
    settingType: string
    count: number
    span?: string
    stoneSize?: number
    position?: number
    diameterMm?: number
    carats?: number
    totalCarats?: number
  } | null
  edge: { type: string; side: string }
  engraving: { text: string; font?: string } | null
  pricing: {
    volumeMm3: number
    weightGrams: number
    metalPrice: { name: string; totalUsd: number }
    makingCharge: { mode: string; percent: number; perGram: number; totalUsd: number }
    diamonds: { count: number; totalCarats: number; pricePerCarat: number; totalUsd: number } | null
    settingCost: { costPerStone: number; count: number; totalUsd: number } | null
    finishSurcharge: { name: string; totalUsd: number } | null
    subtotalUsd: number
    markupMultiplier: number
    totalUsd: number
  } | null
  actualWidthMm?: number
  actualHeightMm?: number
}

Building SpecSheetData Manually

If you're using the headless API and want full control, you can assemble SpecSheetData from individual API calls:

const snapshot = api.getSnapshot('her');
const price = api.getPrice('her');
const dims = api.getActualDimensionsMm('her');
const diamondInfo = snapshot.diamonds?.stoneSize
  ? api.getDiamondSizeInfo(snapshot.diamonds.stoneSize)
  : null;

const specData = {
  bandName: snapshot.bandName,
  profile: snapshot.profile,
  dimensions: snapshot.dimensions,
  materials: snapshot.materials,
  diamonds: snapshot.diamonds ? {
    ...snapshot.diamonds,
    diameterMm: diamondInfo?.diameterMm,
    carats: diamondInfo?.carats,
    totalCarats: diamondInfo
      ? diamondInfo.carats * snapshot.diamonds.count
      : undefined,
  } : null,
  edge: snapshot.edge,
  engraving: snapshot.engraving,
  pricing: price ? {
    volumeMm3: price.volumeMm3,
    weightGrams: price.weightGrams,
    metalPrice: price.metalPrice,
    makingCharge: price.makingCharge,
    diamonds: price.diamonds,
    settingCost: price.settingCost,
    finishSurcharge: price.finishSurcharge,
    subtotalUsd: price.totalBeforeRounding ?? price.totalUsd,
    markupMultiplier: price.markupMultiplier,
    totalUsd: price.totalUsd,
  } : null,
  actualWidthMm: dims.widthMm,
  actualHeightMm: dims.heightMm,
};

Diagrams

The spec sheet includes three SVG diagrams rendered inline:

Diagram	Shows
Profile Diagram	Cross section silhouette (D-Shape, Flat, Comfort, etc.) with width/height dimension lines
Top View Diagram	Birds eye ring view showing metal partition zones and diamond dot positions
Diamond Band Diagram	Flat band showing stone placement pattern for the active setting type

All diagrams use the accent color and adapt to the ring's actual configuration. They render as inline SVGs, with no external image dependencies.

Customizing the Header

The spec sheet header shows a logo, title, date, and reference number:

// Custom branding
const html = renderSpecSheetHTML(specData, {
  logoUrl: 'https://yourstore.com/logo.svg',
  reference: 'INV-2024-0042',
});

• Logo: Pass a URL to logoUrl. If omitted, the iJewel3D logo is used.
• Reference: Auto-generated as WBB-YYYYMMDD-001 if not provided. Pass your own order/invoice number for production use.
• Date: Always uses the current date when the sheet is generated.

React Component

For React-based integrations, the SpecSheet component can be rendered directly:

import { SpecSheet } from '@ijewel3d/ui';

<SpecSheet
  data={specData}
  accent="#8B6914"
  reference="ORDER-001"
  logoUrl="/logo.svg"
/>

This renders the same layout as the HTML version, using React components for the SVG diagrams.

Print & PDF

The spec sheet includes a toolbar (hidden when printing) with Download PDF and Print buttons. Both trigger the browser's print dialog. Use "Save as PDF" for PDF export.

The stylesheet includes @media print rules that:

• Hide the toolbar
• Use a cream background (#FAF9F6)
• Optimize layout for A4/Letter paper
• Ensure diagrams render cleanly in print