brainerce 1.1.0 → 1.3.0

package/AI_BUILDER_PROMPT.md

@@ -563,16 +563,58 @@ const suggestions = await client.getSearchSuggestions('blue', 5);
 
 Products may have custom fields defined by the store owner (e.g., "Material", "Care Instructions", "Warranty").
 
+**Important:** Each metafield has a `type` field. When rendering, you **must** check `field.type` and render accordingly:
+
+| Type                               | Rendering                                               |
+| ---------------------------------- | ------------------------------------------------------- |
+| `IMAGE`                            | `<img>` thumbnail (value is URL)                        |
+| `GALLERY`                          | Row of `<img>` thumbnails (value is JSON array of URLs) |
+| `URL`                              | `<a>` clickable link                                    |
+| `COLOR`                            | Color swatch + hex value                                |
+| `BOOLEAN`                          | "Yes" / "No"                                            |
+| `DATE`                             | `new Date(value).toLocaleDateString()`                  |
+| `DATETIME`                         | `new Date(value).toLocaleString()`                      |
+| `TEXT`, `TEXTAREA`, `NUMBER`, etc. | Plain text                                              |
+
 ```typescript
 import { getProductMetafield, getProductMetafieldValue } from 'brainerce';
+import type { ProductMetafield } from 'brainerce';
 
 // Access metafields on a product
 const product = await client.getProductBySlug('blue-shirt');
 
-// Get all custom fields
-product.metafields?.forEach((field) => {
-  console.log(`${field.definitionName}: ${field.value}`);
-});
+// ⚠️ MUST render based on type! Don't just show field.value as text for all types.
+function MetafieldValue({ field }: { field: ProductMetafield }) {
+  switch (field.type) {
+    case 'IMAGE':
+      return field.value ? <img src={field.value} alt={field.definitionName} className="h-16 w-16 rounded object-cover" /> : <>-</>;
+    case 'GALLERY': {
+      let urls: string[] = [];
+      try { urls = JSON.parse(field.value); } catch { urls = field.value ? [field.value] : []; }
+      return <div className="flex gap-2">{urls.map((url, i) => <img key={i} src={url} className="h-16 w-16 rounded object-cover" />)}</div>;
+    }
+    case 'URL':
+      return field.value ? <a href={field.value} target="_blank" rel="noopener noreferrer">{field.value}</a> : <>-</>;
+    case 'COLOR':
+      return <span><span className="inline-block h-4 w-4 rounded-full border" style={{ backgroundColor: field.value }} /> {field.value}</span>;
+    case 'BOOLEAN':
+      return <>{field.value === 'true' ? 'Yes' : 'No'}</>;
+    case 'DATE':
+      return <>{field.value ? new Date(field.value).toLocaleDateString() : '-'}</>;
+    case 'DATETIME':
+      return <>{field.value ? new Date(field.value).toLocaleString() : '-'}</>;
+    default:
+      return <>{field.value || '-'}</>;
+  }
+}
+
+// Display in spec table
+{product.metafields?.map(mf => (
+  <tr key={mf.id}>
+    <td>{mf.definitionName}</td>
+    <td><MetafieldValue field={mf} /></td>
+  </tr>
+))}
 
 // Get specific field by key
 const material = getProductMetafieldValue(product, 'material');