fix: bind inspector props to resolve ownership_invalid_mutation warnings

src/lib/components/theme/ThemeBehaviorInspector.svelte

@@ -34,7 +34,7 @@
   import { SvelteSet } from 'svelte/reactivity';
 
   let {
-    behavior,
+    behavior = $bindable(),
     elements,
     groups = [],
     variables = [],

src/lib/components/theme/ThemeEditorWindow.svelte

@@ -335,12 +335,22 @@
     ...themeScriptInitialVariables(definition),
     ...themeClockValues(new Date(previewClock)),
   });
+  const selectedGroupIndex = $derived(
+    selectedGroupId
+      ? (definition.groups ?? []).findIndex((group) => group.id === selectedGroupId)
+      : -1
+  );
   const selectedGroup = $derived(
-    selectedGroupId ? groups.find((group) => group.id === selectedGroupId) : undefined
+    selectedGroupIndex >= 0 && definition.groups ? definition.groups[selectedGroupIndex] : undefined
+  );
+  const selectedBehaviorIndex = $derived(
+    selectedBehaviorId
+      ? (definition.behaviors ?? []).findIndex((behavior) => behavior.id === selectedBehaviorId)
+      : -1
   );
   const selectedBehavior = $derived(
-    selectedBehaviorId
+    selectedBehaviorIndex >= 0 && definition.behaviors
-      ? behaviors.find((behavior) => behavior.id === selectedBehaviorId)
+      ? definition.behaviors[selectedBehaviorIndex]
       : undefined
   );
   function buildLayerRows(includeCollapsed: boolean): LayerRow[] {
@@ -5114,10 +5124,10 @@
 
     <aside class="flex min-h-0 flex-col border-l border-theme-800 bg-theme-900/35">
       {#if leftTab === 'logic'}
-        {#if selectedBehavior}
+        {#if selectedBehavior && selectedBehaviorIndex >= 0 && definition.behaviors}
           <div class="min-h-0 flex-1 overflow-y-auto">
             <ThemeBehaviorInspector
-              behavior={selectedBehavior}
+              bind:behavior={definition.behaviors[selectedBehaviorIndex]}
               {elements}
               {groups}
               variables={scriptVariables}
@@ -5310,20 +5320,22 @@
           </Button>
         </div>
         <div class="min-h-0 flex-1 overflow-y-auto">
-          <ThemeGroupInspector
+          {#if selectedGroupIndex >= 0 && definition.groups}
-            group={selectedGroup}
+            <ThemeGroupInspector
-            {behaviors}
+              bind:group={definition.groups[selectedGroupIndex]}
-            {elements}
+              {behaviors}
-            {groups}
+              {elements}
-            variables={scriptVariables}
+              {groups}
-            focusToken={logicFocusKey === `group:${selectedGroup.id}` ? logicFocusToken : 0}
+              variables={scriptVariables}
-            onungroup={() => ungroupGroup()}
+              focusToken={logicFocusKey === `group:${selectedGroup.id}` ? logicFocusToken : 0}
-            onpickmask={pickGroupMask}
+              onungroup={() => ungroupGroup()}
-            onaddbehavior={createBehavior}
+              onpickmask={pickGroupMask}
-            ondeleterule={deleteBehavior}
+              onaddbehavior={createBehavior}
-          />
+              ondeleterule={deleteBehavior}
+            />
+          {/if}
         </div>
-      {:else if selectedElement}
+      {:else if selectedElement && selectedIndex >= 0 && definition.elements}
         <div class="flex shrink-0 items-center gap-1 border-b border-theme-800 p-2">
           <Button
             variant="secondary"
@@ -5366,7 +5378,7 @@
         </div>
         <div class="min-h-0 flex-1 overflow-y-auto">
           <ThemeElementInspector
-            element={selectedElement}
+            bind:element={definition.elements[selectedIndex]}
             {fontOptions}
             {elements}
             {behaviors}

src/lib/components/theme/ThemeElementInspector.svelte

@@ -43,7 +43,7 @@
   } from '@lucide/svelte';
 
   let {
-    element,
+    element = $bindable(),
     fontOptions,
     elements,
     behaviors,

src/lib/components/theme/ThemeGroupInspector.svelte

@@ -8,8 +8,8 @@
   import { Checkbox } from '$lib/components/ui/checkbox';
   import Input from '$lib/components/ui/input/input.svelte';
   import Label from '$lib/components/ui/label/label.svelte';
-  import Slider from '$lib/components/ui/slider/slider.svelte';
   import * as Select from '$lib/components/ui/select';
+  import Slider from '$lib/components/ui/slider/slider.svelte';
   import {
     type ThemeV2Behavior,
     type ThemeV2BehaviorTarget,
@@ -20,7 +20,7 @@
   import { Boxes, RefreshCw, Ungroup } from '@lucide/svelte';
 
   let {
-    group,
+    group = $bindable(),
     behaviors,
     elements,
     groups,