types

src/lib/components/PicletGenerator/PicletGenerator.svelte

@@ -637,16 +637,14 @@ 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
-      // Extract variation from objectAttributes (first attribute if any, otherwise undefined)
-      const variation = workflowState.objectAttributes && workflowState.objectAttributes.length > 0
-        ? workflowState.objectAttributes[0]
-        : undefined;
+      // Convert reactive Svelte state to plain values (removes Proxy wrapper for IndexedDB compatibility)
+      const plainAttributes = workflowState.objectAttributes ? [...workflowState.objectAttributes] : [];
 
       const picletInstance = await generatedDataToPicletInstance(
         picletData,
         workflowState.objectName || undefined,
-        variation,
-        workflowState.objectAttributes
+        plainAttributes,
+        workflowState.visualDetails || undefined
       );
 
       const picletId = await savePicletInstance(picletInstance);

src/lib/components/PicletGenerator/PicletResult.svelte

@@ -34,15 +34,13 @@
         };
         
         // Create piclet instance asynchronously with discovery data
-        const variation = workflowState.objectAttributes && workflowState.objectAttributes.length > 0
-          ? workflowState.objectAttributes[0]
-          : undefined;
+        // Convert reactive Svelte state to plain array
+        const plainAttributes = workflowState.objectAttributes ? [...workflowState.objectAttributes] : [];
 
         generatedDataToPicletInstance(
           picletData,
           workflowState.objectName || undefined,
-          variation,
-          workflowState.objectAttributes,
+          plainAttributes,
           workflowState.visualDetails || undefined
         ).then(instance => {
           picletInstance = { ...instance, id: 0 }; // Add temporary id for display

src/lib/db/piclets.ts

@@ -16,11 +16,16 @@ interface GeneratedPicletData {
   createdAt: Date;
 }
 
-// Convert generated piclet data to a PicletInstance
+/**
+ * Convert generated piclet data to a PicletInstance
+ * @param data - The generated piclet data with stats and images
+ * @param objectName - Optional normalized object name (e.g., "eiffel tower")
+ * @param attributes - Optional array of variation attributes (first item is the primary variation)
+ * @param visualDetails - Optional additional visual details
+ */
 export async function generatedDataToPicletInstance(
   data: GeneratedPicletData,
   objectName?: string,
-  variation?: string,
   attributes?: string[],
   visualDetails?: string
 ): Promise<Omit<PicletInstance, 'id'>> {
@@ -33,8 +38,10 @@ export async function generatedDataToPicletInstance(
   // Map tier from stats to discovery rarity
   let tier: string = stats.tier || 'common';
 
-  // Generate typeId using normalized object name + variation (or just object if variation is "canonical")
+  // Generate typeId using normalized object name + variation (first attribute if any)
+  // Variation is "canonical" if there are no attributes or if first attribute is "canonical"
   const normalizedObjectName = objectName || stats.name;
+  const variation = attributes && attributes.length > 0 ? attributes[0] : undefined;
   const typeId = generatePicletId(normalizedObjectName, variation && variation !== 'canonical' ? variation : undefined);
 
   return {