From de947c827ad59db95d0e49d15b0cf72850a271c5 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 12 Feb 2026 19:57:42 -0500
Subject: [PATCH] ui(hosted_files): update clipping components and fix count
 reference bug

---
 .../ae_core/ae_comp__hosted_files_clip_video.svelte    | 10 +++++-----
 .../ae_core/ae_comp__hosted_files_clip_video_li.svelte |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte b/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
index 732cee76..8172e06f 100644
--- a/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
+++ b/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
@@ -191,7 +191,7 @@
     </h3>
 
     {#each Object.entries(hosted_file_obj_kv) as [hosted_file_id, hosted_file_obj]}
-        <div class="border border-gray-300 rounded-lg p-2 m-2">
+        <div class="border border-surface-500/20 rounded-lg p-2 m-2 preset-tonal-surface">
             <!-- Download Button (Standardized) -->
             <div
                 class="flex flex-row flex-wrap gap-1 justify-center items-center w-full"
@@ -272,7 +272,7 @@
                     <span class="text-xs font-bold w-32">New Filename:</span>
                     <input
                         type="text"
-                        class="input w-full text-sm"
+                        class="input w-full text-sm variant-filled-surface"
                         name="new_filename"
                         value={hosted_file_obj.filename}
                     />
@@ -300,7 +300,7 @@
                                   ].start_time
                                 : '00:00:00'}
                             placeholder="HH:MM:SS (00:01:30)"
-                            class="input w-32"
+                            class="input w-32 variant-filled-surface"
                         />
                     </label>
 
@@ -323,7 +323,7 @@
                                   ].end_time
                                 : '00:45:59'}
                             placeholder="HH:MM:SS (01:05:25)"
-                            class="input w-32"
+                            class="input w-32 variant-filled-surface"
                         />
                     </label>
 
@@ -382,7 +382,7 @@
 
                 <button
                     type="submit"
-                    class="btn btn-lg btn-primary preset-tonal-primary border border-primary-500"
+                    class="btn btn-lg btn-primary preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition-colors"
                     disabled={submit_status == 'clipping'}
                 >
                     <!-- {#await ae_promises[hosted_file_id]} -->
diff --git a/src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte b/src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte
index a23d1a1a..f2aed5e3 100644
--- a/src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte
+++ b/src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte
@@ -36,7 +36,7 @@
     let {
         log_lvl = 0,
         video_clip_file_kv = $bindable({}),
-        class_li_default = 'flex flex-row flex-wrap gap-2 items-center justify-center w-full max-w-2xl p-2 mx-auto my-1 border border-gray-300 rounded-lg',
+        class_li_default = 'flex flex-row flex-wrap gap-2 items-center justify-center w-full max-w-2xl p-2 mx-auto my-1 border border-surface-500/20 rounded-lg preset-tonal-surface',
         class_li = '',
         link_to_type,
         link_to_id
@@ -45,7 +45,7 @@
     let ae_promises: key_val = $state({});
 </script>
 
-<h3 class="h3">{Object.entries($ae_loc.files).length}× files clipped</h3>
+<h3 class="h3">{Object.entries(video_clip_file_kv).length}× files clipped</h3>
 <div class="{class_li_default} {class_li} ">
     {#each Object.entries(video_clip_file_kv) as [hosted_file_id, hosted_file_obj]}
         <AE_Comp_Hosted_Files_Download_Button