updates

src/lib/components/FileUpload.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  const { fileSelected } = $props();
 
-  const dispatch = createEventDispatcher<{
-    fileSelected: { file: File; type: "xorb" | "shard" };
-  }>();
-
-  let xorbDragActive = false;
-  let shardDragActive = false;
+  let xorbDragActive = $state(false);
+  let shardDragActive = $state(false);
   let xorbFileInput: HTMLInputElement;
   let shardFileInput: HTMLInputElement;
 
@@ -49,7 +45,7 @@
   }
 
   function handleFile(file: File, type: "xorb" | "shard") {
-    dispatch("fileSelected", { file, type });
+    fileSelected({ file, type });
   }
 
   function openFileDialog(type: "xorb" | "shard") {
@@ -69,11 +65,11 @@
       <div
         class="upload-area xorb-area"
         class:drag-active={xorbDragActive}
-        on:dragover={(e) => handleDragOver(e, "xorb")}
-        on:dragleave={() => handleDragLeave("xorb")}
-        on:drop={(e) => handleDrop(e, "xorb")}
-        on:click={() => openFileDialog("xorb")}
-        on:keydown={(e) => e.key === "Enter" && openFileDialog("xorb")}
+        ondragover={(e) => handleDragOver(e, "xorb")}
+        ondragleave={() => handleDragLeave("xorb")}
+        ondrop={(e) => handleDrop(e, "xorb")}
+        onclick={() => openFileDialog("xorb")}
+        onkeydown={(e) => e.key === "Enter" && openFileDialog("xorb")}
         role="button"
         tabindex="0"
       >
@@ -92,11 +88,11 @@
       <div
         class="upload-area shard-area"
         class:drag-active={shardDragActive}
-        on:dragover={(e) => handleDragOver(e, "shard")}
-        on:dragleave={() => handleDragLeave("shard")}
-        on:drop={(e) => handleDrop(e, "shard")}
-        on:click={() => openFileDialog("shard")}
-        on:keydown={(e) => e.key === "Enter" && openFileDialog("shard")}
+        ondragover={(e) => handleDragOver(e, "shard")}
+        ondragleave={() => handleDragLeave("shard")}
+        ondrop={(e) => handleDrop(e, "shard")}
+        onclick={() => openFileDialog("shard")}
+        onkeydown={(e) => e.key === "Enter" && openFileDialog("shard")}
         role="button"
         tabindex="0"
       >
@@ -113,14 +109,14 @@
   <input
     bind:this={xorbFileInput}
     type="file"
-    on:change={(e) => handleFileInput(e, "xorb")}
+    onchange={(e) => handleFileInput(e, "xorb")}
     style="display: none;"
   />
 
   <input
     bind:this={shardFileInput}
     type="file"
-    on:change={(e) => handleFileInput(e, "shard")}
+    onchange={(e) => handleFileInput(e, "shard")}
     style="display: none;"
   />
 </div>

src/lib/components/ShardViewer.svelte

@@ -143,10 +143,10 @@
               <tr
                 class="file-row"
                 class:expanded={expandedFiles.has(fileIndex)}
-                on:click={() => toggleFileExpansion(fileIndex)}
+                onclick={() => toggleFileExpansion(fileIndex)}
                 role="button"
                 tabindex="0"
-                on:keydown={(e) =>
+                onkeydown={(e) =>
                   e.key === "Enter" && toggleFileExpansion(fileIndex)}
               >
                 <td class="hash" title={formatHash(fileInfo.header.file_hash)}>

src/lib/parsers.ts

@@ -6,7 +6,6 @@ import type {
   ChunkHeader,
   ShardData,
   MerkleHash,
-  HMACKey,
   MDBShardFileHeader,
   MDBShardFileFooter,
   FileDataSequenceHeader,
@@ -70,11 +69,11 @@ export class BinaryReader {
   }
 
   readHash(): MerkleHash {
-    return { data: this.readBytes(32) };
-  }
-
-  readHMACKey(): HMACKey {
-    return { data: this.readBytes(32) };
+    const u64_0 = this.readUint64LE();
+    const u64_1 = this.readUint64LE();
+    const u64_2 = this.readUint64LE();
+    const u64_3 = this.readUint64LE();
+    return { data: [u64_0, u64_1, u64_2, u64_3] };
   }
 
   readString(length: number): string {
@@ -108,25 +107,23 @@ function arraysEqual(a: Uint8Array, b: Uint8Array): boolean {
 }
 
 function isBookendHash(hash: MerkleHash): boolean {
-  // Bookend hash is all 0xFF bytes
-  return hash.data.every((byte) => byte === 0xff);
-}
-
-function reorderHash(hash: MerkleHash): Array<number> {
-  const data = new Array(32);
-  let start = 0;
-  for (let i = 0; i < 32; i++) {
-    if (i % 8 === 0) {
-      start += 8;
-    }
-    data.push(hash.data[start - (i % 8) - 1]);
-  }
-  return data;
+  // Bookend hash is all 0xFF bytes (all 64-bit values should be 0xFFFFFFFFFFFFFFFF)
+  return hash.data.every((value) => value === 0xffffffffffffffffn);
 }
 
-function formatHash(hash: MerkleHash): string {
-  return reorderHash(hash)
-    .map((b) => b.toString(16).padStart(2, "0"))
+export function formatHash(hash: MerkleHash): string {
+  // Convert each 64-bit integer to little-endian byte representation
+  return hash.data
+    .map((value) => {
+      // Convert bigint to 8 bytes in little-endian order
+      const bytes = [];
+      let temp = value;
+      for (let i = 0; i < 8; i++) {
+        bytes.push(Number(temp & 0xffn));
+        temp = temp >> 8n;
+      }
+      return bytes.map((b) => b.toString(16).padStart(2, "0")).join("");
+    })
     .join("");
 }
 
@@ -214,7 +211,7 @@ function parseShardFile(data: Uint8Array): ShardData {
   // Skip first buffer (48 bytes)
   reader.readBytes(48);
 
-  const chunk_hash_hmac_key = reader.readHMACKey();
+  const chunk_hash_hmac_key = reader.readHash();
   const shard_creation_timestamp = Number(reader.readUint64LE());
   const shard_key_expiry = Number(reader.readUint64LE());
 
@@ -408,5 +405,3 @@ export function formatHashShort(hash: MerkleHash): string {
   const fullHash = formatHash(hash);
   return fullHash.substring(0, 16) + "...";
 }
-
-export { formatHash };

src/lib/types.ts

@@ -1,11 +1,7 @@
 // Type definitions for xorb and shard file formats
 
 export interface MerkleHash {
-  data: Uint8Array; // 32 bytes
-}
-
-export interface HMACKey {
-  data: Uint8Array; // 32 bytes
+  data: [bigint, bigint, bigint, bigint]; // 4 x 64-bit unsigned integers (32 bytes total)
 }
 
 // === XORB Types ===
@@ -34,7 +30,7 @@ export interface MDBShardFileFooter {
   version: number;
   file_info_offset: number;
   cas_info_offset: number;
-  chunk_hash_hmac_key: HMACKey;
+  chunk_hash_hmac_key: MerkleHash;
   shard_creation_timestamp: number;
   shard_key_expiry: number;
   footer_offset: number;

src/routes/+page.svelte

@@ -9,21 +9,21 @@
   let parsedData: ParsedFileMetadata | null = null;
   let loading = false;
 
-  async function handleFileSelected(
-    event: CustomEvent<{ file: File; type: "xorb" | "shard" }>
-  ) {
+  async function handleFileSelected(event: {
+    file: File;
+    type: "xorb" | "shard";
+  }) {
     loading = true;
     parsedData = null;
 
     try {
-      const { file, type } = event.detail;
-      const result = await parseFile(file, type);
-      parsedData = result;
+      const { file, type } = event;
+      parsedData = await parseFile(file, type);
     } catch (error) {
       parsedData = {
-        type: event.detail.type,
-        filename: event.detail.file.name,
-        fileSize: event.detail.file.size,
+        type: event.type,
+        filename: event.file.name,
+        fileSize: event.file.size,
         data: {} as any,
         error:
           error instanceof Error ? error.message : "Unknown error occurred",
@@ -56,7 +56,7 @@
         structure
       </p>
       {#if parsedData}
-        <button class="reset-btn" on:click={resetView}>
+        <button class="reset-btn" onclick={resetView}>
           ← Upload New File
         </button>
       {/if}
@@ -84,7 +84,7 @@
         />
       {/if}
     {:else}
-      <FileUpload on:fileSelected={handleFileSelected} />
+      <FileUpload fileSelected={handleFileSelected} />
 
       <div class="info-section">
         <h2>Supported File Types</h2>