export/import

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import type { MonsterGeneratorProps, MonsterWorkflowState, CaptionType, CaptionLength, MonsterStats } from '$lib/types';
+  import type { PicletInstance } from '$lib/db/schema';
   import UploadStep from './UploadStep.svelte';
   import WorkflowProgress from './WorkflowProgress.svelte';
   import MonsterResult from './MonsterResult.svelte';
   import { makeWhiteTransparent } from '$lib/utils/imageProcessing';
   import { saveMonster } from '$lib/db/monsters';
+  import { extractPicletMetadata } from '$lib/services/picletMetadata';
+  import { savePicletInstance } from '$lib/db/piclets';
   
   interface Props extends MonsterGeneratorProps {}
   
@@ -79,6 +82,32 @@ Remember to base the stats on how unique/powerful the original object was. Commo
 
 Write your response within \`\`\`json\`\`\``;
 
+  async function importPiclet(picletData: PicletInstance) {
+    state.isProcessing = true;
+    state.currentStep = 'complete';
+    
+    try {
+      // Save the imported piclet
+      const savedId = await savePicletInstance(picletData);
+      
+      // Create a success state similar to generation
+      state.monsterImage = {
+        imageUrl: picletData.imageUrl,
+        imageData: picletData.imageData
+      };
+      
+      // Show import success
+      state.isProcessing = false;
+      alert(`Successfully imported ${picletData.nickname || picletData.typeId}!`);
+      
+      // Reset to allow another import/generation
+      setTimeout(() => reset(), 2000);
+    } catch (error) {
+      state.error = `Failed to import piclet: ${error}`;
+      state.isProcessing = false;
+    }
+  }
+
   async function handleImageSelected(file: File) {
     if (!joyCaptionClient || !rwkvClient || !fluxClient) {
       state.error = "Services not connected. Please wait...";
@@ -87,7 +116,16 @@ Write your response within \`\`\`json\`\`\``;
     
     state.userImage = file;
     state.error = null;
-    startWorkflow();
+    
+    // Check if this is a piclet card with metadata
+    const picletData = await extractPicletMetadata(file);
+    if (picletData) {
+      // Import existing piclet
+      await importPiclet(picletData);
+    } else {
+      // Generate new piclet
+      startWorkflow();
+    }
   }
   
   async function startWorkflow() {

src/lib/components/Piclets/PicletDetail.svelte

@@ -3,6 +3,7 @@
   import type { PicletInstance } from '$lib/db/schema';
   import { deletePicletInstance } from '$lib/db/piclets';
   import { uiStore } from '$lib/stores/ui';
+  import { downloadPicletCard } from '$lib/services/picletExport';
   
   interface Props {
     instance: PicletInstance;
@@ -14,6 +15,7 @@
   let showDeleteConfirm = $state(false);
   let selectedTab = $state<'about' | 'stats' | 'actions'>('about');
   let expandedMoves = $state(new Set<number>());
+  let isSharing = $state(false);
   
   onMount(() => {
     uiStore.openDetailPage();
@@ -53,6 +55,18 @@
     }
     expandedMoves = new Set(expandedMoves);
   }
+  
+  async function handleShare() {
+    isSharing = true;
+    try {
+      await downloadPicletCard(instance);
+    } catch (err) {
+      console.error('Failed to share piclet:', err);
+      alert('Failed to create shareable image');
+    } finally {
+      isSharing = false;
+    }
+  }
 </script>
 
 <div class="detail-page">
@@ -228,6 +242,9 @@
           <button class="btn btn-danger" onclick={handleDelete}>Yes, Release</button>
           <button class="btn btn-secondary" onclick={() => showDeleteConfirm = false}>Cancel</button>
         {:else}
+          <button class="btn btn-primary" onclick={handleShare} disabled={isSharing}>
+            {isSharing ? 'Creating...' : 'Share Piclet'}
+          </button>
           <button class="btn btn-danger" onclick={() => showDeleteConfirm = true}>Release Piclet</button>
         {/if}
       </div>
@@ -587,6 +604,18 @@
     transform: scale(0.95);
   }
   
+  .btn-primary {
+    background: #007bff;
+    color: white;
+    width: 100%;
+    margin-bottom: 8px;
+  }
+  
+  .btn-primary:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+  
   .btn-danger {
     background: #ff3b30;
     color: white;

src/lib/services/picletExport.ts

@@ -0,0 +1,114 @@
+import type { PicletInstance } from '$lib/db/schema';
+import { embedPicletMetadata } from './picletMetadata';
+
+/**
+ * Generates a shareable image of a piclet with embedded metadata
+ */
+export async function generateShareableImage(piclet: PicletInstance): Promise<Blob> {
+  // Create canvas
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('Could not create canvas context');
+  
+  // Set canvas size (square format for social media sharing)
+  const canvasSize = 800;
+  canvas.width = canvasSize;
+  canvas.height = canvasSize;
+  
+  // Fill background with a gradient
+  const gradient = ctx.createLinearGradient(0, 0, 0, canvasSize);
+  gradient.addColorStop(0, '#87CEEB'); // Sky blue
+  gradient.addColorStop(0.6, '#98D98E'); // Light green
+  gradient.addColorStop(1, '#567d46'); // Dark green
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, canvasSize, canvasSize);
+  
+  // Load and draw grass platform
+  const grassImg = await loadImage('/assets/grass.PNG');
+  const platformSize = 400;
+  const platformX = (canvasSize - platformSize) / 2;
+  const platformY = canvasSize - platformSize + 100;
+  ctx.drawImage(grassImg, platformX, platformY, platformSize, platformSize);
+  
+  // Load and draw piclet
+  const picletImg = await loadImage(piclet.imageData || piclet.imageUrl);
+  const picletSize = 300;
+  const picletX = (canvasSize - picletSize) / 2;
+  const picletY = platformY - picletSize + 100;
+  ctx.drawImage(picletImg, picletX, picletY, picletSize, picletSize);
+  
+  // Add piclet info text
+  ctx.fillStyle = 'white';
+  ctx.strokeStyle = 'black';
+  ctx.lineWidth = 4;
+  ctx.font = 'bold 48px Arial';
+  ctx.textAlign = 'center';
+  
+  const nameText = piclet.nickname || piclet.typeId;
+  const levelText = `Lv.${piclet.level}`;
+  
+  // Draw name with outline
+  ctx.strokeText(nameText, canvasSize / 2, 100);
+  ctx.fillText(nameText, canvasSize / 2, 100);
+  
+  // Draw level with outline
+  ctx.font = 'bold 36px Arial';
+  ctx.strokeText(levelText, canvasSize / 2, 150);
+  ctx.fillText(levelText, canvasSize / 2, 150);
+  
+  // Load and draw watermark
+  const logoImg = await loadImage('/assets/snap_logo.png');
+  const logoSize = 120;
+  ctx.globalAlpha = 0.7; // Semi-transparent
+  ctx.drawImage(logoImg, canvasSize - logoSize - 20, canvasSize - logoSize - 20, logoSize, logoSize);
+  ctx.globalAlpha = 1.0;
+  
+  // Get the image as blob
+  const blob = await canvasToBlob(canvas);
+  
+  // Embed metadata in the blob
+  return embedPicletMetadata(blob, piclet);
+}
+
+/**
+ * Downloads a piclet card image
+ */
+export async function downloadPicletCard(piclet: PicletInstance, filename?: string): Promise<void> {
+  const blob = await generateShareableImage(piclet);
+  const url = URL.createObjectURL(blob);
+  
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename || `Piclet_${piclet.nickname || piclet.typeId}_Lv${piclet.level}.png`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Helper to load an image
+ */
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+/**
+ * Convert canvas to blob
+ */
+function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error('Failed to create blob'));
+    }, 'image/png');
+  });
+}
+

src/lib/services/picletMetadata.ts

@@ -0,0 +1,280 @@
+import type { PicletInstance } from '$lib/db/schema';
+
+const METADATA_KEY = 'snaplings-piclet-v1';
+
+interface PicletMetadata {
+  version: 1;
+  data: Omit<PicletInstance, 'id' | 'rosterPosition' | 'isInRoster' | 'caughtAt'>;
+  checksum?: string;
+}
+
+/**
+ * Extract piclet metadata from a PNG image
+ */
+export async function extractPicletMetadata(file: File): Promise<PicletInstance | null> {
+  try {
+    const arrayBuffer = await file.arrayBuffer();
+    const bytes = new Uint8Array(arrayBuffer);
+    
+    // Check PNG signature
+    if (!isPNG(bytes)) {
+      return null;
+    }
+    
+    // Find tEXt chunks
+    const chunks = parsePNGChunks(bytes);
+    const textChunk = chunks.find(chunk => 
+      chunk.type === 'tEXt' && 
+      chunk.keyword === METADATA_KEY
+    );
+    
+    if (!textChunk || !textChunk.text) {
+      return null;
+    }
+    
+    // Parse metadata
+    const metadata: PicletMetadata = JSON.parse(textChunk.text);
+    
+    // Validate version
+    if (metadata.version !== 1) {
+      console.warn('Unsupported piclet metadata version:', metadata.version);
+      return null;
+    }
+    
+    // Create PicletInstance from metadata
+    const piclet: PicletInstance = {
+      ...metadata.data,
+      caughtAt: new Date(), // Use current date for import
+      isInRoster: false,
+      rosterPosition: undefined
+    };
+    
+    return piclet;
+  } catch (error) {
+    console.error('Failed to extract piclet metadata:', error);
+    return null;
+  }
+}
+
+/**
+ * Embed piclet metadata into a PNG image
+ */
+export async function embedPicletMetadata(imageBlob: Blob, piclet: PicletInstance): Promise<Blob> {
+  const arrayBuffer = await imageBlob.arrayBuffer();
+  const bytes = new Uint8Array(arrayBuffer);
+  
+  // Prepare metadata
+  const metadata: PicletMetadata = {
+    version: 1,
+    data: {
+      typeId: piclet.typeId,
+      nickname: piclet.nickname,
+      primaryTypeString: piclet.primaryTypeString,
+      secondaryTypeString: piclet.secondaryTypeString,
+      currentHp: piclet.maxHp, // Reset to full HP for sharing
+      maxHp: piclet.maxHp,
+      level: piclet.level,
+      xp: piclet.xp,
+      attack: piclet.attack,
+      defense: piclet.defense,
+      fieldAttack: piclet.fieldAttack,
+      fieldDefense: piclet.fieldDefense,
+      speed: piclet.speed,
+      baseHp: piclet.baseHp,
+      baseAttack: piclet.baseAttack,
+      baseDefense: piclet.baseDefense,
+      baseFieldAttack: piclet.baseFieldAttack,
+      baseFieldDefense: piclet.baseFieldDefense,
+      baseSpeed: piclet.baseSpeed,
+      moves: piclet.moves,
+      nature: piclet.nature,
+      bst: piclet.bst,
+      tier: piclet.tier,
+      role: piclet.role,
+      variance: piclet.variance,
+      imageUrl: piclet.imageUrl,
+      imageData: piclet.imageData,
+      imageCaption: piclet.imageCaption,
+      concept: piclet.concept,
+      imagePrompt: piclet.imagePrompt
+    }
+  };
+  
+  // Create tEXt chunk
+  const textChunk = createTextChunk(METADATA_KEY, JSON.stringify(metadata));
+  
+  // Insert chunk after IHDR
+  const newBytes = insertChunkAfterIHDR(bytes, textChunk);
+  
+  return new Blob([newBytes], { type: 'image/png' });
+}
+
+/**
+ * Check if bytes represent a PNG file
+ */
+function isPNG(bytes: Uint8Array): boolean {
+  const pngSignature = [137, 80, 78, 71, 13, 10, 26, 10];
+  if (bytes.length < 8) return false;
+  
+  for (let i = 0; i < 8; i++) {
+    if (bytes[i] !== pngSignature[i]) return false;
+  }
+  
+  return true;
+}
+
+/**
+ * Parse PNG chunks
+ */
+function parsePNGChunks(bytes: Uint8Array): any[] {
+  const chunks = [];
+  let pos = 8; // Skip PNG signature
+  
+  while (pos < bytes.length) {
+    // Read chunk length
+    const length = readUInt32BE(bytes, pos);
+    pos += 4;
+    
+    // Read chunk type
+    const type = String.fromCharCode(...bytes.slice(pos, pos + 4));
+    pos += 4;
+    
+    // Read chunk data
+    const data = bytes.slice(pos, pos + length);
+    pos += length;
+    
+    // Skip CRC
+    pos += 4;
+    
+    // Parse tEXt chunks
+    if (type === 'tEXt') {
+      const nullIndex = data.indexOf(0);
+      if (nullIndex !== -1) {
+        const keyword = String.fromCharCode(...data.slice(0, nullIndex));
+        const text = String.fromCharCode(...data.slice(nullIndex + 1));
+        chunks.push({ type, keyword, text });
+      }
+    } else {
+      chunks.push({ type, data });
+    }
+    
+    if (type === 'IEND') break;
+  }
+  
+  return chunks;
+}
+
+/**
+ * Create a tEXt chunk
+ */
+function createTextChunk(keyword: string, text: string): Uint8Array {
+  const keywordBytes = new TextEncoder().encode(keyword);
+  const textBytes = new TextEncoder().encode(text);
+  
+  // Create chunk data: keyword + null + text
+  const data = new Uint8Array(keywordBytes.length + 1 + textBytes.length);
+  data.set(keywordBytes);
+  data[keywordBytes.length] = 0; // null separator
+  data.set(textBytes, keywordBytes.length + 1);
+  
+  // Create full chunk: length + type + data + crc
+  const chunk = new Uint8Array(4 + 4 + data.length + 4);
+  
+  // Length
+  writeUInt32BE(chunk, 0, data.length);
+  
+  // Type: 'tEXt'
+  chunk[4] = 116; // t
+  chunk[5] = 69;  // E
+  chunk[6] = 88;  // X
+  chunk[7] = 116; // t
+  
+  // Data
+  chunk.set(data, 8);
+  
+  // CRC
+  const crc = calculateCRC(chunk.slice(4, 8 + data.length));
+  writeUInt32BE(chunk, 8 + data.length, crc);
+  
+  return chunk;
+}
+
+/**
+ * Insert chunk after IHDR
+ */
+function insertChunkAfterIHDR(bytes: Uint8Array, newChunk: Uint8Array): Uint8Array {
+  // Find IHDR chunk end
+  let ihdrEnd = 8; // PNG signature
+  ihdrEnd += 4; // IHDR length
+  ihdrEnd += 4; // IHDR type
+  const ihdrLength = readUInt32BE(bytes, 8);
+  ihdrEnd += ihdrLength; // IHDR data
+  ihdrEnd += 4; // IHDR CRC
+  
+  // Create new array
+  const result = new Uint8Array(bytes.length + newChunk.length);
+  
+  // Copy up to IHDR end
+  result.set(bytes.slice(0, ihdrEnd));
+  
+  // Insert new chunk
+  result.set(newChunk, ihdrEnd);
+  
+  // Copy rest
+  result.set(bytes.slice(ihdrEnd), ihdrEnd + newChunk.length);
+  
+  return result;
+}
+
+/**
+ * Read 32-bit unsigned integer (big endian)
+ */
+function readUInt32BE(bytes: Uint8Array, offset: number): number {
+  return (bytes[offset] << 24) | 
+         (bytes[offset + 1] << 16) | 
+         (bytes[offset + 2] << 8) | 
+         bytes[offset + 3];
+}
+
+/**
+ * Write 32-bit unsigned integer (big endian)
+ */
+function writeUInt32BE(bytes: Uint8Array, offset: number, value: number): void {
+  bytes[offset] = (value >>> 24) & 0xff;
+  bytes[offset + 1] = (value >>> 16) & 0xff;
+  bytes[offset + 2] = (value >>> 8) & 0xff;
+  bytes[offset + 3] = value & 0xff;
+}
+
+/**
+ * Calculate CRC32 for PNG chunk
+ */
+function calculateCRC(bytes: Uint8Array): number {
+  const crcTable = getCRCTable();
+  let crc = 0xffffffff;
+  
+  for (let i = 0; i < bytes.length; i++) {
+    crc = crcTable[(crc ^ bytes[i]) & 0xff] ^ (crc >>> 8);
+  }
+  
+  return crc ^ 0xffffffff;
+}
+
+/**
+ * Get CRC table (cached)
+ */
+let crcTable: Uint32Array | null = null;
+function getCRCTable(): Uint32Array {
+  if (crcTable) return crcTable;
+  
+  crcTable = new Uint32Array(256);
+  for (let i = 0; i < 256; i++) {
+    let c = i;
+    for (let j = 0; j < 8; j++) {
+      c = (c & 1) ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+    }
+    crcTable[i] = c;
+  }
+  
+  return crcTable;
+}