deets

src/lib/components/PicletGenerator/PicletGenerator.svelte

@@ -335,7 +335,7 @@ Format your response EXACTLY as follows:
 {Include brand/model/landmark name when identifiable}
 
 # Variation
-{OPTIONAL: one distinctive attribute like "silver", "pro", "night", "gaming", or NONE if not applicable}
+{OPTIONAL: one distinctive attribute like "silver", "pro", "night", "gaming", OR use "canonical" if this is the standard/default version with no special variation}
 
 # Object Rarity
 {common, uncommon, rare, epic, or legendary based on object uniqueness}
@@ -645,7 +645,17 @@ Create a concise visual description (1-3 sentences, max 100 words). Focus only o
       console.log('- stats:', cleanStats);
       
       // Convert to PicletInstance format and save as caught
-      const picletInstance = await generatedDataToPicletInstance(picletData);
+      // Extract variation from objectAttributes (first attribute if any, otherwise undefined)
+      const variation = workflowState.objectAttributes && workflowState.objectAttributes.length > 0
+        ? workflowState.objectAttributes[0]
+        : undefined;
+
+      const picletInstance = await generatedDataToPicletInstance(
+        picletData,
+        workflowState.objectName,
+        variation,
+        workflowState.objectAttributes
+      );
       
       // Override the caught status to auto-capture scanned Piclets
       picletInstance.caught = true;

src/lib/components/Piclets/PicletCard.svelte

@@ -33,9 +33,9 @@
   </div>
   
   <div class="details-section">
-    <p class="nickname">{piclet.typeId}</p>
+    <p class="nickname">{piclet.nickname || piclet.objectName}</p>
     <div class="types-section">
-      <span class="type primary">{piclet.primaryType}</span>
+      <span class="type primary">{piclet.primaryType.toUpperCase()}</span>
     </div>
   </div>
 </button>

src/lib/db/piclets.ts

@@ -2,6 +2,7 @@ import { db } from './index';
 import type { PicletInstance } from './schema';
 import { PicletType } from '../types/picletTypes';
 import type { PicletStats } from '../types';
+import { generatePicletId } from '../utils/picletId';
 
 // Interface for generated piclet data (from PicletResult component)
 interface GeneratedPicletData {
@@ -19,6 +20,7 @@ interface GeneratedPicletData {
 export async function generatedDataToPicletInstance(
   data: GeneratedPicletData,
   objectName?: string,
+  variation?: string,
   attributes?: string[],
   visualDetails?: string
 ): Promise<Omit<PicletInstance, 'id'>> {
@@ -31,8 +33,9 @@ export async function generatedDataToPicletInstance(
   // Map tier from stats to discovery rarity
   let tier: string = stats.tier || 'common';
 
-  // Generate unique typeId
-  const typeId = `${objectName || stats.name}_${Date.now()}`;
+  // Generate typeId using normalized object name + variation (or just object if variation is "canonical")
+  const normalizedObjectName = objectName || stats.name;
+  const typeId = generatePicletId(normalizedObjectName, variation && variation !== 'canonical' ? variation : undefined);
 
   return {
     // Basic Info