Option Blocks

const blocks = await client.getOptionBlocks('proj_123');
blocks.forEach(b => {
  console.log(b.name, b.type, b.dropdownVariants?.length);
});

const block = await client.createOptionBlock('proj_123', {
  type: 'dropdown',
  name: 'Frame Color',
  dropdownVariants: [
    {
      id: crypto.randomUUID(),
      label: 'Matte Black',
      value: 'matte-black',
      targetPartNames: ['frame_body', 'frame_legs'],
      materialData: {
        baseColor: '#1a1a1a',
        metallic: 0.8,
        roughness: 0.4
      }
    },
    {
      id: crypto.randomUUID(),
      label: 'Chrome Silver',
      value: 'chrome-silver',
      targetPartNames: ['frame_body', 'frame_legs'],
      materialData: {
        baseColor: '#C0C0C0',
        metallic: 0.95,
        roughness: 0.05
      }
    }
  ],
  defaultDropdownValue: 'matte-black'
});

const block = await client.createOptionBlock('proj_123', {
  type: 'thumbnail-selector',
  name: 'Fabric',
  thumbnailStyle: 'grid',
  thumbnailSize: '60x60',
  thumbnailShape: 'rounded',
  labelPosition: 'below',
  dropdownVariants: [
    { id: crypto.randomUUID(), label: 'Linen', value: 'linen',
      thumbnailUrl: 'https://cdn.example.com/linen.jpg',
      materialData: { baseColor: '#f0e6d3', roughness: 0.9 } },
    { id: crypto.randomUUID(), label: 'Velvet', value: 'velvet',
      thumbnailUrl: 'https://cdn.example.com/velvet.jpg',
      materialData: { baseColor: '#2d1f4e', roughness: 0.95 } }
  ]
});

const block = await client.createOptionBlock('proj_123', {
  type: 'toggle-switch',
  name: 'Headrest',
  dropdownVariants: [
    { id: crypto.randomUUID(), label: 'Without', value: 'without',
      visibilityConfig: { targetObjectIds: ['model_headrest'], action: 'hide' } },
    { id: crypto.randomUUID(), label: 'With Headrest', value: 'with',
      visibilityConfig: { targetObjectIds: ['model_headrest'], action: 'show' } }
  ]
});

const block = await client.createOptionBlock('proj_123', {
  type: 'text-input',
  name: 'Custom Engraving',
  textInputTargets: [{
    id: crypto.randomUUID(),
    label: 'Engraving Text',
    targetPartName: 'nameplate',
    placeholder: 'Enter your text',
    maxLength: 30,
    fontFamily: 'Montserrat',
    fontSize: 36,
    fontColor: '#gold',
    textAlign: 'center',
    canvasWidth: 1024,
    canvasHeight: 256
  }]
});

// Auto-populates one swatch per material in the chosen category.
// Use this to expose large material libraries without authoring each variant by hand.
// Variants are synthesized at runtime as 'auto:{materialId}' — `dropdownVariants` stays empty.
// Pricing flows through the standard Pricing system (Price Group / Variable / Price Table /
// Unique Price) — link a pricing block to this option block to author per-material pricing.
const block = await client.createOptionBlock('proj_123', {
  type: 'select-material',
  name: 'Fabric',
  materialSource: 'category',          // ← opt into category mode
  materialCategoryId: 'cat_woods',     // ← owner-scoped category id
  materialCategoryName: 'Woods',
  // Target one or more 3D objects. Per-model parts: [] / omitted = every mesh in that model.
  categoryTargetObjectIds: ['model_main_roof', 'model_extra_roofs'],
  categoryTargetParts: {
    model_main_roof: ['part_01', 'part_02'],
    model_extra_roofs: []              // empty = all meshes in this object
  },
  categorySortOrder: 'name',           // 'name' | 'newest' | 'oldest'
  // Visual config (same as manual mode):
  thumbnailStyle: 'grid',
  thumbnailSize: '60x60',
  thumbnailShape: 'rounded',
  labelPosition: 'below'
});

// To switch back to manual authoring:
await client.updateOptionBlock('proj_123', block.id, {
  materialSource: 'manual'
});

const updated = await client.updateOptionBlock('proj_123', 'blk_001', {
  name: 'Updated Name',
  visible: false,
  dropdownVariants: [/* updated variants */]
});

const blocks = await client.reorderOptionBlocks('proj_123', {
  blockIds: ['blk_003', 'blk_001', 'blk_002']
});
console.log('New order:', blocks.map(b => b.name));