fix: androidTV scaling and navigation

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.33",
+	"version": "6.4.34",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@9.14.4",

src/lib/components/ui/checkbox/checkbox.svelte

@@ -3,6 +3,7 @@
   import Check from 'svelte-radix/Check.svelte'
   import Minus from 'svelte-radix/Minus.svelte'
 
+  import { keywrap } from '$lib/modules/navigate'
   import { cn } from '$lib/utils.js'
 
   type $$Props = CheckboxPrimitive.Props
@@ -11,6 +12,13 @@
   let className: $$Props['class'] = undefined
   export let checked: $$Props['checked'] = false
   export { className as class }
+
+  function check () {
+    const wr = keywrap(() => {
+      checked = !checked
+    })
+    return (e: unknown) => wr(e as KeyboardEvent)
+  }
 </script>
 
 <CheckboxPrimitive.Root
@@ -20,6 +28,7 @@
   )}
   bind:checked
   on:click
+  on:keydown={check()}
   {...$$restProps}
 >
   <CheckboxPrimitive.Indicator

src/lib/components/ui/extensions/extensions.svelte

@@ -48,8 +48,8 @@
 <Tabs.Root bind:value class='w-full'>
   <div class='flex justify-between items-center gap-3 sm:flex-row flex-col'>
     <Tabs.List class='grid w-full grid-cols-2 md:max-w-72'>
-      <Tabs.Trigger value='extensions'>Extensions</Tabs.Trigger>
-      <Tabs.Trigger value='repositories'>Repositories</Tabs.Trigger>
+      <Tabs.Trigger tabindex={0} value='extensions'>Extensions</Tabs.Trigger>
+      <Tabs.Trigger tabindex={0} value='repositories'>Repositories</Tabs.Trigger>
     </Tabs.List>
     <div class='flex items-center relative scale-parent md:max-w-72 w-full'>
       <Input
@@ -119,7 +119,7 @@
   <Tabs.Content value='repositories' tabindex={-1}>
     <div class='gap-3 flex py-3 sm:flex-row flex-col'>
       <Tooltip.Root>
-        <Tooltip.Trigger class='w-full'>
+        <Tooltip.Trigger class='w-full' tabindex={-1}>
           <Input class='bg-neutral-950' type='url' placeholder='https://example.com/manifest.json' bind:value={extensionInput} />
         </Tooltip.Trigger>
         <Tooltip.Content class='max-w-full w-52'>

src/lib/components/ui/player/options.svelte

@@ -212,7 +212,7 @@
               {#each videoFiles as file, i (i)}
                 <Tree.Item on:click={() => selectFile(file)}>
                   <Tooltip.Root>
-                    <Tooltip.Trigger class='text-ellipsis text-nowrap overflow-clip w-full'>
+                    <Tooltip.Trigger class='text-ellipsis text-nowrap overflow-clip w-full' tabindex={-1}>
                       {file.name}
                     </Tooltip.Trigger>
                     <Tooltip.Content>

src/routes/+layout.svelte

@@ -36,7 +36,7 @@
 </script>
 
 <svelte:head>
-  <meta name='viewport' content='width=device-width, initial-scale={SUPPORTS.isAndroid ? $settings.uiScale : 1}, user-scalable=0' />
+  <meta name='viewport' content='width=device-width, initial-scale={SUPPORTS.isAndroid ? $settings.uiScale / devicePixelRatio : 1}, maximum-scale=2, user-scalable=0' />
 </svelte:head>
 
 <div class='w-full h-full flex flex-col backface-hidden bg-black relative overflow-clip md:border-l-2 [border-image:linear-gradient(to_bottom,white_var(--progress),#2dcf58_var(--progress))_1] preserve-3d' bind:this={root} id='root' style:--progress='{100 - updateProgress}%'>