wgui: do not pass AttribPairs with empty values further, dash-frontend: xml refactor, use template children in various places, remove unused files

- All new layout xml files now are required to include this metadata
at the top, if they want to be parsed in the new layout v2 behavior:
```xml
<layout version="2">
    <!-- rest of the markup -->
</layout>
```

- Add path expansion using '@' for widget resources and includes
The '@' character is always expanded to the assets root directory
(builtin/internal), or the root xml directory (external).
Paths directing to the built-in resources like:
    `edit/mouse.svg`
are now required to be written as:
    `@/edit/mouse.svg`,
For example:
    ```xml
        <sprite src_builtin="@/edit/mouse.svg" />
    ```

- All paths without '/' at the start are now treated as relative
to the currently parsing XML (paths like `/usr/share/icons/...`
are still accessible)

- Add support for relative paths for widgets instantiated from
templates

- Rename `<theme>` to `<vars>`

Changes (dash-frontend):

- Adapt and refactor XML files

Changes (wayvr):

- Adapt and refactor XML files

dash-frontend/assets/gui/dashboard.xml

@@ -1,10 +1,10 @@
-<layout>
-  <theme>
+<layout version="2">
+  <vars>
     <var key="side_size" value="48" />
     <var key="top_size" value="40" />
     <var key="side_sprite_size" value="26" />
     <var key="side_button_size" value="48" />
-  </theme>
+  </vars>
 
   <template name="SideButton">
     <Button
@@ -41,12 +41,12 @@
           align_items="center"
           gap="4"
         >
-          <SideButton id="btn_side_home" src_builtin="dashboard/wayvr_dashboard_mono.svg" tooltip="HOME_SCREEN" tooltip_side="right" />
-          <SideButton id="btn_side_apps" src_builtin="dashboard/apps.svg" tooltip="APPLICATIONS" tooltip_side="right" />
-          <SideButton id="btn_side_games" src_builtin="dashboard/games.svg" tooltip="GAMES" tooltip_side="right" />
-          <SideButton id="btn_side_monado" src_builtin="dashboard/monado.svg" tooltip="MONADO_RUNTIME" tooltip_side="right" />
+          <SideButton id="btn_side_home" src_builtin="@/dashboard/wayvr_dashboard_mono.svg" tooltip="HOME_SCREEN" tooltip_side="right" />
+          <SideButton id="btn_side_apps" src_builtin="@/dashboard/apps.svg" tooltip="APPLICATIONS" tooltip_side="right" />
+          <SideButton id="btn_side_games" src_builtin="@/dashboard/games.svg" tooltip="GAMES" tooltip_side="right" />
+          <SideButton id="btn_side_monado" src_builtin="@/dashboard/monado.svg" tooltip="MONADO_RUNTIME" tooltip_side="right" />
           <rectangle height="2" color="outline" width="~side_sprite_size" />
-          <SideButton id="btn_side_settings" src_builtin="dashboard/settings.svg" tooltip="SETTINGS" tooltip_side="right" />
+          <SideButton id="btn_side_settings" src_builtin="@/dashboard/settings.svg" tooltip="SETTINGS" tooltip_side="right" />
         </rectangle>
       </div>
       <!-- REST -->
@@ -69,7 +69,7 @@
           <!-- Close button -->
           <Button position="absolute" id="btn_close" color="background_contrast" border_color="background_contrast" round="100%" width="~top_size" height="~top_size" tooltip="CLOSE_WINDOW" tooltip_side="left"
             hover_color="danger" hover_border_color="danger(rgb-mult-0.5)" >
-            <sprite src_builtin="dashboard/close.svg" width="32" height="32" />
+            <sprite src_builtin="@/dashboard/close.svg" width="32" height="32" />
           </Button>
         </div>
 
@@ -137,10 +137,10 @@
           <!-- Left bottom side -->
           <div margin_left="8">
             <Button id="btn_audio" color="background(transparent)" border_color="background(transparent)" tooltip="AUDIO.VOLUME" tooltip_side="top">
-              <sprite src_builtin="dashboard/volume.svg" width="24" height="24" margin="8" />
+              <sprite src_builtin="@/dashboard/volume.svg" width="24" height="24" margin="8" />
             </Button>
             <Button id="btn_recenter" color="background(transparent)" border_color="background(transparent)" tooltip="ACTIONS.RECENTER_PLAYSPACE" tooltip_side="top">
-              <sprite src_builtin="dashboard/recenter.svg" width="24" height="24" margin="8" />
+              <sprite src_builtin="@/dashboard/recenter.svg" width="24" height="24" margin="8" />
             </Button>
           </div>
 

dash-frontend/assets/gui/t_dropdown_button.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <macro name="dropdown_button"
     flex_direction="row"
     border="2"
@@ -17,7 +17,7 @@
         <div padding_top="4" padding_bottom="4">
           <rectangle width="2" height="100%" color="outline" />
         </div>
-        <sprite margin_left="-4" width="30" height="30" src_builtin="dashboard/down.svg" />
+        <sprite margin_left="-4" width="30" height="30" src_builtin="@/dashboard/down.svg" />
       </div>
     </Button>
   </template>

dash-frontend/assets/gui/t_group_box.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <macro name="group_box"
     flex_direction="column"
     align_items="baseline"
@@ -7,7 +7,13 @@
     border_color="outline"
     padding="12"
     gap="8"
-    round="8" />
+    round="8"/>
+  
+  <template name="GroupBox">
+    <rectangle macro="group_box">
+      <CHILDREN/>
+    </rectangle>
+  </template>
 
   <!-- src_builtin, text, translation -->
   <template name="GroupBoxTitle">

dash-frontend/assets/gui/t_loading.xml

@@ -1,8 +1,8 @@
-<layout>
+<layout version="2">
   <template name="LoadingWithText">
     <div id="root" width="100%" height="100%" align_items="center" justify_content="center">
       <div flex_direction="row" gap="8" align_items="center" >
-        <sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32" color="on_background"/>
+        <sprite id="sprite_loading" src_builtin="@/dashboard/loading.svg" width="32" height="32" color="on_background"/>
         <label translation="LOADING" weight="bold"/>
       </div>
     </div>
@@ -10,7 +10,7 @@
 
   <template name="LoadingWithoutText">
     <div id="root" width="100%" height="100%" align_items="center" justify_content="center">
-      <sprite id="sprite_loading" src_builtin="dashboard/loading.svg" width="32" height="32" color="on_background"/>
+      <sprite id="sprite_loading" src_builtin="@/dashboard/loading.svg" width="32" height="32" color="on_background"/>
     </div>
   </template>
 </layout>

dash-frontend/assets/gui/t_menu_button.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <macro name="home_button" round="8" hover_color="primary" hover_border_color="on_primary" />
 
   <template name="MenuButton">

dash-frontend/assets/gui/t_separator.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <template name="Separator">
     <rectangle width="100%" min_height="2" color="outline" />
   </template>

dash-frontend/assets/gui/tab/apps.xml

@@ -1,5 +1,5 @@
-<layout>
-  <include src="../t_group_box.xml" />
+<layout version="2">
+  <include src="@/gui/t_group_box.xml" />
 
   <!-- tooltip, src, src_ext, name -->
   <template name="AppEntry">
@@ -28,26 +28,26 @@
     <!--
     <div gap="4" align_items="center">
       <Button width="48" height="38">
-        <sprite src_builtin="dashboard/alphabetical.svg" width="24" height="24" />
+        <sprite src_builtin="@/dashboard/alphabetical.svg" width="24" height="24" />
       </Button>
       <Button width="48" height="38">
-        <sprite src_builtin="dashboard/category_search.svg" width="24" height="24" />
+        <sprite src_builtin="@/dashboard/category_search.svg" width="24" height="24" />
       </Button>
-      <sprite src_builtin="dashboard/search.svg" width="24" height="24" />
+      <sprite src_builtin="@/dashboard/search.svg" width="24" height="24" />
       <rectangle flex_grow="1" height="100%" color="#1d2e51" border_color="#294774" border="2" round="4" align_items="center" padding_left="12">
         <label text="Search" color="#FFFFFF88" weight="bold" />
       </rectangle>
     </div>
     -->
-    <rectangle macro="group_box">
+    <GroupBox>
       <div align_items="center" gap="8">
-        <sprite src_builtin="dashboard/heart_plus.svg" color="primary"  min_width="24" min_height="24"/>
+        <sprite src_builtin="@/dashboard/heart_plus.svg" color="primary"  min_width="24" min_height="24"/>
         <label translation="PINNED_APPS"/>
       </div>
       <div id="pinned_apps_parent" flex_direction="row" flex_wrap="wrap" gap="4">
         <!-- filled-in at runtime -->
       </div>
-    </rectangle>
+    </GroupBox>
     <div
       id="app_list_parent"
       flex_direction="row"

dash-frontend/assets/gui/tab/donate.xml

@@ -1,16 +1,16 @@
-<layout>
-  <include src="../t_separator.xml" />
+<layout version="2">
+  <include src="@/gui/t_separator.xml" />
 
   <template name="TierCell">
     <div gap="8" align_items="center">
-      <sprite width="28" height="28" src_builtin="dashboard/medal.svg" color="${color}"/>
+      <sprite width="28" height="28" src_builtin="@/dashboard/medal.svg" color="${color}"/>
       <label text="${text}" weight="bold" size="18" color="${color}" shadow="shadow"/>
     </div>
   </template>
 
   <template name="SupporterCell">
     <rectangle padding="8" color="background(transparent)" round="8" border="2" border_color="outline" gap="8" align_items="center" flex_direction="row" >
-      <sprite width="24" height="24" src_builtin="dashboard/person.svg"/>
+      <sprite width="24" height="24" src_builtin="@/dashboard/person.svg"/>
       <label text="${username}" weight="bold"/>
     </rectangle>
   </template>
@@ -32,14 +32,14 @@
   <elements>
     <div flex_direction="row" width="100%" min_height="100%" gap="16">
       <div macro="half">
-          <sprite color="#FFAAAA" src_builtin="dashboard/donate.svg" min_width="48" min_height="48"/>
+          <sprite color="#FFAAAA" src_builtin="@/dashboard/donate.svg" min_width="48" min_height="48"/>
         <div gap="16" align_items="center" width="100%">
           <label align="justified" wrap="1" size="15" translation="DONATE.DESCRIPTION" color="on_background"/>
         </div>
 
         <div flex_direction="column" gap="8" align_items="center">
           <Button id="btn_donate" tooltip="DONATE.BUTTON_TOOLTIP" align_self="baseline">
-            <image src_builtin="dashboard/opencollective_logo.svg" width="200" height="32" margin="8" margin_left="16" margin_right="16"/>
+            <image src_builtin="@/dashboard/opencollective_logo.svg" width="200" height="32" margin="8" margin_left="16" margin_right="16"/>
           </Button>
           <label text="opencollective.com/wayvr-org"/>
         </div>
@@ -47,8 +47,8 @@
         <label weight="bold" size="20" translation="DONATE.THANK_YOU_WAYVR" color="on_background"/>
 
         <div gap="32">
-          <Avatar icon="dashboard/avatars/galister.png" nickname="galister"/>
-          <Avatar icon="dashboard/avatars/oo8dev.png" nickname="oo8dev"/>
+          <Avatar icon="@/dashboard/avatars/galister.png" nickname="galister"/>
+          <Avatar icon="@/dashboard/avatars/oo8dev.png" nickname="oo8dev"/>
         </div>
       </div>
       <!-- vertical separator -->

dash-frontend/assets/gui/tab/games.xml

@@ -1,6 +1,6 @@
-<layout>
+<layout version="2">
   <elements>
     <div id="running_games_list_parent" align_self="center" />
     <div id="game_list_parent" align_items="center" flex_direction="column" gap="8" />
   </elements>
-</layout>
+</layout>

dash-frontend/assets/gui/tab/home.xml

@@ -1,5 +1,5 @@
-<layout>
-  <include src="../t_menu_button.xml" />
+<layout version="2">
+  <include src="@/gui/t_menu_button.xml" />
 
   <elements>
     <div
@@ -9,7 +9,7 @@
       flex_grow="1"
       gap="8"
       >
-      <image src_builtin="dashboard/splash.png" width="300" height="89" />
+      <image src_builtin="@/dashboard/splash.png" width="300" height="89" />
 
       <!-- supporters -->
       <Button
@@ -26,23 +26,23 @@
 
       <!-- main button list -->
       <div flex_direction="row" gap="8" margin_top="32">
-        <MenuButton id="btn_apps" icon="dashboard/apps.svg" translation="APPLICATIONS" />
-        <MenuButton id="btn_games" icon="dashboard/games.svg" translation="GAMES" />
-        <MenuButton id="btn_monado" icon="dashboard/monado.svg" text="Monado" />
-        <MenuButton id="btn_settings" icon="dashboard/settings.svg" translation="SETTINGS" />
+        <MenuButton id="btn_apps" icon="@/dashboard/apps.svg" translation="APPLICATIONS" />
+        <MenuButton id="btn_games" icon="@/dashboard/games.svg" translation="GAMES" />
+        <MenuButton id="btn_monado" icon="@/dashboard/monado.svg" text="Monado" />
+        <MenuButton id="btn_settings" icon="@/dashboard/settings.svg" translation="SETTINGS" />
       </div>
 
       <div gap="8">
         <Button id="btn_welcome_screen" macro="home_button" tooltip="APP_SETTINGS.SHOW_WELCOME_SCREEN">
-          <sprite src_builtin="dashboard/welcome.svg" width="32" height="32" margin="16" />
+          <sprite src_builtin="@/dashboard/welcome.svg" width="32" height="32" margin="16" />
         </Button>
 
         <Button id="btn_website" macro="home_button" tooltip_str="wayvr.org">
-          <sprite src_builtin="dashboard/globe.svg" width="32" height="32" margin="16" />
+          <sprite src_builtin="@/dashboard/globe.svg" width="32" height="32" margin="16" />
         </Button>
 
         <Button id="btn_donate" macro="home_button" tooltip="DONATE.SUPPORT_US">
-          <sprite src_builtin="dashboard/opencollective.svg" width="32" height="32" margin="16" />
+          <sprite src_builtin="@/dashboard/opencollective.svg" width="32" height="32" margin="16" />
         </Button>
       </div>
     </div>

dash-frontend/assets/gui/tab/monado.xml

@@ -1,10 +1,10 @@
-<layout>
+<layout version="2">
   <elements>
     <div gap="4">
       <Tabs id="tabs">
-        <Tab name="process_list" translation="PROCESS_LIST" sprite_src_builtin="dashboard/cpu.svg" />
-        <Tab name="general_settings" translation="GENERAL_SETTINGS" sprite_src_builtin="dashboard/settings.svg" />
-        <Tab name="debug_timings" translation="DEBUG_INFO" sprite_src_builtin="dashboard/not_a_bug.svg" />
+        <Tab name="process_list" translation="PROCESS_LIST" sprite_src_builtin="@/dashboard/cpu.svg" />
+        <Tab name="general_settings" translation="GENERAL_SETTINGS" sprite_src_builtin="@/dashboard/settings.svg" />
+        <Tab name="debug_timings" translation="DEBUG_INFO" sprite_src_builtin="@/dashboard/not_a_bug.svg" />
       </Tabs>
       <div gap="4" id="content" width="100%">
         <!-- filled-in at runtime -->

dash-frontend/assets/gui/tab/monado_tab_debug_timings.xml

@@ -1,5 +1,5 @@
-<layout>
-  <include src="../t_group_box.xml" />
+<layout version="2">
+  <include src="@/gui/t_group_box.xml" />
 
   <!-- name, limit_min, limit_max -->
   <template name="DebugGraph">
@@ -15,13 +15,13 @@
   </template>
 
   <elements>
-    <rectangle macro="group_box">
-      <GroupBoxTitle src_builtin="dashboard/apps.svg" text="Sessions" />
+    <GroupBox>
+      <GroupBoxTitle src_builtin="@/dashboard/apps.svg" text="Sessions" />
       <div id="session_list_parent" flex_wrap="wrap" flex_direction="row" gap="8" />
-      <GroupBoxTitle src_builtin="dashboard/not_a_bug.svg" text="Debug timings" />
+      <GroupBoxTitle src_builtin="@/dashboard/not_a_bug.svg" text="Debug timings" />
       <div id="timings_parent" flex_wrap="wrap" flex_direction="row" gap="8">
         <label text="Please select which session you want to monitor" />
       </div>
-    </rectangle>
+    </GroupBox>
   </elements>
-</layout>
+</layout>

dash-frontend/assets/gui/tab/monado_tab_general_settings.xml

@@ -1,56 +1,57 @@
-<layout>
-  <include src="../t_group_box.xml" />
+<layout version="2">
+  <include src="@/gui/t_group_box.xml" />
 
-  <macro name="slider" width="100%" height="24"/>
+  <template name="CKRow">
+    <div gap="8" width="~s_width">
+      <CHILDREN/>
+    </div>
+  </template>
 
-  <theme>
+  <!-- title, id -->
+  <template name="CKSlider">
+    <div gap="8" flex_direction="column" width="100%">
+      <label text="${title}"/>
+      <Slider id="${id}" min_value="0" max_value="100" width="100%" height="24"/>
+    </div>
+  </template>
+
+  <!-- title, id -->
+  <template name="CKColSel">
+    <div gap="8" flex_direction="column" width="100%">
+      <label text="${title}"/>
+      <ColorSelector id="cs_keying" height="24" width="100%"/>
+    </div>
+  </template>
+
+  <vars>
     <var key="s_width" value="500"/>
-  </theme>
+  </vars>
 
   <elements>
     <div flex_direction="column" gap="8">
-      <rectangle macro="group_box">
-        <GroupBoxTitle src_builtin="dashboard/settings.svg" translation="GENERAL_SETTINGS" />
+      <!-- headset brightness -->
+      <GroupBox>
+        <GroupBoxTitle src_builtin="@/dashboard/settings.svg" translation="GENERAL_SETTINGS" />
 
         <label translation="DISPLAY_BRIGHTNESS" />
         <Slider id="slider_brightness" width="300" height="24" min_value="0" max_value="140" />
-      </rectangle>
-      <rectangle macro="group_box">
-        <GroupBoxTitle src_builtin="dashboard/settings.svg" translation="APP_SETTINGS.COLOR_KEYING" />
-        <div gap="8" width="~s_width">
-          <div gap="8" flex_direction="column" width="100%">
-            <label text="Color"/>
-            <ColorSelector id="cs_keying" height="24" width="100%"/>
-          </div>
+      </GroupBox>
 
-          <div gap="8" flex_direction="column" width="100%">
-            <label text="Despill"/>
-            <Slider id="slider_keying_despill" min_value="0" max_value="100" macro="slider"/>
-          </div>
-    
-          <div gap="8" flex_direction="column" width="100%">
-            <label text="Curve (0 = disabled)"/>
-            <Slider id="slider_keying_curve" min_value="0" max_value="100" macro="slider"/>
-          </div>
-        </div>
+      <!-- color keying -->
+      <GroupBox>
+        <GroupBoxTitle src_builtin="@/dashboard/settings.svg" translation="APP_SETTINGS.COLOR_KEYING" />
+        <CKRow>
+          <CKColSel title="Color" id="cs_keying"/>
+          <CKSlider title="Despill" id="slider_keying_despill"/>
+          <CKSlider title="Curve (0 = disabled)" id="slider_keying_curve"/>
+        </CKRow>
 
-        <div gap="8" width="~s_width">
-          <div gap="8" flex_direction="column" width="100%">
-            <label text="Hue range"/>
-            <Slider id="slider_keying_hue_range" min_value="0" max_value="100" macro="slider"/>
-          </div>
-    
-          <div gap="8" flex_direction="column" width="100%">
-            <label text="Saturation range"/>
-            <Slider id="slider_keying_saturation_range" min_value="0" max_value="100" macro="slider"/>
-          </div>
-
-          <div gap="8" flex_direction="column" width="100%">
-            <label text="Value range"/>
-            <Slider id="slider_keying_value_range" min_value="0" max_value="100" macro="slider"/>
-          </div>
-        </div>
-      </rectangle>
+        <CKRow>
+          <CKSlider title="Hue range" id="slider_keying_hue_range"/>
+          <CKSlider title="Saturation range" id="slider_keying_saturation_range"/>
+          <CKSlider title="Value range" id="slider_keying_value_range"/>
+        </CKRow>
+      </GroupBox>
     </div>
   </elements>
 </layout>

dash-frontend/assets/gui/tab/monado_tab_process_list.xml

@@ -1,5 +1,5 @@
-<layout>
-  <include src="../t_group_box.xml" />
+<layout version="2">
+  <include src="@/gui/t_group_box.xml" />
 
   <!-- key: str, value: str -->
   <template name="BoolFlag">
@@ -11,7 +11,7 @@
 
   <!-- name, checked, flag_* -->
   <template name="Cell">
-    <rectangle macro="group_box">
+    <GroupBox>
       <CheckBox id="checkbox" text="${name}" checked="${checked}" />
       <div flex_direction="row" gap="8" flex_wrap="wrap">
         <BoolFlag key="Active:" value="${flag_active}" />
@@ -21,15 +21,15 @@
         <BoolFlag key="Primary:" value="${flag_primary}" />
         <BoolFlag key="Visible:" value="${flag_visible}" />
       </div>
-    </rectangle>
+    </GroupBox>
   </template>
 
   <elements>
-    <rectangle macro="group_box">
-      <GroupBoxTitle src_builtin="dashboard/cpu.svg" translation="PROCESS_LIST" />
+    <GroupBox>
+      <GroupBoxTitle src_builtin="@/dashboard/cpu.svg" translation="PROCESS_LIST" />
       <div id="list_parent" flex_direction="column" gap="8">
         <!-- filled at runtime -->
       </div>
-    </rectangle>
+    </GroupBox>
   </elements>
-</layout>
+</layout>

dash-frontend/assets/gui/tab/settings.xml

@@ -1,6 +1,6 @@
-<layout>
-  <include src="../t_group_box.xml" />
-  <include src="../t_dropdown_button.xml" />
+<layout version="2">
+  <include src="@/gui/t_group_box.xml" />
+  <include src="@/gui/t_dropdown_button.xml" />
 
   <template name="SettingsGroupBox">
     <rectangle macro="group_box" id="${id}" flex_grow="1">
@@ -56,7 +56,7 @@
     <div id="${id}_root" flex_direction="row">
       <Button id="${id}" color="#AA3333" height="24" padding="4" margin_top="-2" margin_bottom="-2"
         hover_color="danger" hover_border_color="danger(rgb-mult-0.5)" >
-        <sprite src_builtin="dashboard/close.svg" height="20" width="20" />
+        <sprite src_builtin="@/dashboard/close.svg" height="20" width="20" />
       </Button>
       <div padding_left="8">
         <label align="left" text="${text}" weight="bold" overflow="hidden" />
@@ -69,15 +69,15 @@
   <elements>
     <div gap="4">
       <Tabs id="tabs">
-        <Tab macro="tab_style" name="look_and_feel" translation="APP_SETTINGS.LOOK_AND_FEEL" sprite_src_builtin="dashboard/palette.svg" />
-        <Tab macro="tab_style" name="skybox" translation="APP_SETTINGS.SKYBOX" sprite_src_builtin="dashboard/globe.svg" />
-        <Tab macro="tab_style" name="features" translation="APP_SETTINGS.FEATURES" sprite_src_builtin="dashboard/options.svg" />
-        <Tab macro="tab_style" name="controls" translation="APP_SETTINGS.CONTROLS" sprite_src_builtin="dashboard/controller.svg" />
-        <Tab macro="tab_style" name="space_drag" translation="APP_SETTINGS.SPACE_DRAG" sprite_src_builtin="dashboard/drag.svg" />
-        <Tab macro="tab_style" name="misc" translation="APP_SETTINGS.MISC" sprite_src_builtin="dashboard/blocks.svg" />
-        <Tab macro="tab_style" name="autostart_apps" translation="APP_SETTINGS.AUTOSTART_APPS" sprite_src_builtin="dashboard/apps.svg" />
-        <Tab macro="tab_style" name="statistics" translation="APP_SETTINGS.STATISTICS" sprite_src_builtin="dashboard/barchart.svg" />
-        <Tab macro="tab_style" name="troubleshooting" translation="APP_SETTINGS.TROUBLESHOOTING" sprite_src_builtin="dashboard/cpu.svg" />
+        <Tab macro="tab_style" name="look_and_feel" translation="APP_SETTINGS.LOOK_AND_FEEL" sprite_src_builtin="@/dashboard/palette.svg" />
+        <Tab macro="tab_style" name="skybox" translation="APP_SETTINGS.SKYBOX" sprite_src_builtin="@/dashboard/globe.svg" />
+        <Tab macro="tab_style" name="features" translation="APP_SETTINGS.FEATURES" sprite_src_builtin="@/dashboard/options.svg" />
+        <Tab macro="tab_style" name="controls" translation="APP_SETTINGS.CONTROLS" sprite_src_builtin="@/dashboard/controller.svg" />
+        <Tab macro="tab_style" name="space_drag" translation="APP_SETTINGS.SPACE_DRAG" sprite_src_builtin="@/dashboard/drag.svg" />
+        <Tab macro="tab_style" name="misc" translation="APP_SETTINGS.MISC" sprite_src_builtin="@/dashboard/blocks.svg" />
+        <Tab macro="tab_style" name="autostart_apps" translation="APP_SETTINGS.AUTOSTART_APPS" sprite_src_builtin="@/dashboard/apps.svg" />
+        <Tab macro="tab_style" name="statistics" translation="APP_SETTINGS.STATISTICS" sprite_src_builtin="@/dashboard/barchart.svg" />
+        <Tab macro="tab_style" name="troubleshooting" translation="APP_SETTINGS.TROUBLESHOOTING" sprite_src_builtin="@/dashboard/cpu.svg" />
       </Tabs>
       <div flex_wrap="wrap" justify_content="stretch" gap="4" id="settings_root" width="100%">
         <!-- filled-in at runtime -->

dash-frontend/assets/gui/tab/settings_tab_space_drag.xml

@@ -1,14 +1,14 @@
-<layout>
-  <include src="../t_group_box.xml" />
+<layout version="2">
+  <include src="@/gui/t_group_box.xml" />
 
   <elements>
     <div id="common_options_parent" flex_direction="column" gap="8"/>
-    <rectangle macro="group_box">
-      <GroupBoxTitle src_builtin="dashboard/gravity.svg" translation="APP_SETTINGS.SPACE_GRAVITY_GRAVITY" />
+    <GroupBox>
+      <GroupBoxTitle src_builtin="@/dashboard/gravity.svg" translation="APP_SETTINGS.SPACE_GRAVITY_GRAVITY" />
       <div id="gravity_enabled_parent"/>
       <div id="space_gravity_parent" flex_direction="column" gap="8">
         <!-- filled-in at runtime -->
       </div>
-    </rectangle>
+    </GroupBox>
   </elements>
 </layout>

dash-frontend/assets/gui/tab/welcome.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <template name="Pip">
     <rectangle id="pip" width="8" height="8" round="100%" color="${COLOR}"/>
   </template>
@@ -12,11 +12,11 @@
       <!-- Page buttons -->
       <div position="absolute" align_self="end" justify_self="end" width="100%" flex_direction="column" align_items="center" margin_bottom="8">
         <div flex_direction="row" gap="8" align_items="center">
-          <Button id="btn_prev" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_left.svg" />
+          <Button id="btn_prev" width="32" height="32" round="100%" sprite_src_builtin="@/dashboard/arrow_left.svg" />
           <div id="pips" gap="4" align_items="center">
             <!-- filled-in at runtime -->
           </div>
-          <Button id="btn_next" width="32" height="32" round="100%" sprite_src_builtin="dashboard/arrow_right.svg" />
+          <Button id="btn_next" width="32" height="32" round="100%" sprite_src_builtin="@/dashboard/arrow_right.svg" />
         </div>
       </div>
     </div>

dash-frontend/assets/gui/tab/welcome_common.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <!-- icon, title -->
   <template name="PageTitle">
     <div position="absolute" align_self="start" justify_self="center" width="100%" margin_top="16" gap="8" align_items="center" justify_content="center">
@@ -19,4 +19,13 @@
   <macro name="video_overlay_component" looping="1" width="100%" height="auto" max_height="100%" aspect_ratio="1.777777" position="relative"/>
 
   <macro name="video_overlay_content" new_pass="1" position="absolute" width="100%" height="100%" padding_bottom="32"/>
+
+  <!-- src_builtin, aspect_ratio -->
+  <template name="WelcomeVideo">
+    <Video macro="video_overlay_component" src_builtin="${src_builtin}" aspect_ratio="${aspect_ratio}">
+      <div macro="video_overlay_content">
+        <CHILDREN/>
+      </div>
+    </Video>
+  </template>
 </layout>

dash-frontend/assets/gui/tab/welcome_page_0.xml

@@ -1,6 +1,6 @@
-<layout>
+<layout version="2">
   <elements>
-    <image src_builtin="dashboard/splash.png" min_width="336" min_height="100" />
+    <image src_builtin="@/dashboard/splash.png" min_width="336" min_height="100" />
 
     <rectangle color="#FFFFFF11" width="100%" height="2"/>
       
@@ -10,12 +10,12 @@
     <label size="20" translation="WELCOME.GUIDE_INTRO"/>
 
     <div gap="4" align_items="center" margin_top="8">
-      <sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg" color="on_background"/>
+      <sprite min_width="16" min_height="16" src_builtin="@/dashboard/info.svg" color="on_background"/>
       <label wrap="1" size="14" translation="WELCOME.REPOSITION_THIS_WINDOW_BY_GRABBING"/>
     </div>
 
     <div gap="4" align_items="center">
-      <sprite min_width="16" min_height="16" src_builtin="dashboard/info.svg" color="on_background"/>
+      <sprite min_width="16" min_height="16" src_builtin="@/dashboard/info.svg" color="on_background"/>
       <label wrap="1" size="14" translation="WELCOME.LAST_PAGE_INFO"/>
     </div>
 

dash-frontend/assets/gui/tab/welcome_page_1.xml

@@ -1,15 +1,14 @@
-<layout>
+<layout version="2">
   <include src_builtin="welcome_common.xml"/>
   
   <elements>
     <rectangle color="#103142" width="100%" height="100%" position="absolute"/>
-    <Video macro="video_overlay_component" src_builtin="video/onboarding_watch.ivf" aspect_ratio="1.0">
-      <div macro="video_overlay_content">
-        <PageTitle icon="dashboard/watch.svg" translation="WELCOME.WATCH"/>
-        <div position="relative" align_self="end" padding="16">
-          <TextDesc translation="WELCOME.LOOK_AT_LEFT_WRIST"/>
-        </div>
+
+    <WelcomeVideo src_builtin="@/video/onboarding_watch.ivf" aspect_ratio="1.0">
+      <PageTitle icon="@/dashboard/watch.svg" translation="WELCOME.WATCH"/>
+      <div position="relative" align_self="end" padding="16">
+        <TextDesc translation="WELCOME.LOOK_AT_LEFT_WRIST"/>
       </div>
-    </Video>
+    </WelcomeVideo>
   </elements>
 </layout>

dash-frontend/assets/gui/tab/welcome_page_2.xml

@@ -1,14 +1,12 @@
-<layout>
+<layout version="2">
   <include src_builtin="welcome_common.xml"/>
   
   <elements>
-    <Video macro="video_overlay_component" src_builtin="video/onboarding_double_press.ivf">
-      <div macro="video_overlay_content">
-        <PageTitle icon="dashboard/panorama.svg" translation="WELCOME.WORKING_SET"/>
-        <div position="relative" align_self="end" padding="16">
-          <TextDesc translation="WELCOME.DOUBLE_PRESS_TO_TOGGLE"/>
-        </div>
+    <WelcomeVideo src_builtin="@/video/onboarding_double_press.ivf">
+      <PageTitle icon="@/dashboard/panorama.svg" translation="WELCOME.WORKING_SET"/>
+      <div position="relative" align_self="end" padding="16">
+        <TextDesc translation="WELCOME.DOUBLE_PRESS_TO_TOGGLE"/>
       </div>
-    </Video>
+    </WelcomeVideo>
   </elements>
 </layout>

dash-frontend/assets/gui/tab/welcome_page_3.xml

@@ -1,19 +1,17 @@
-<layout>
+<layout version="2">
   <include src_builtin="welcome_common.xml"/>
     
   <elements>
-    <Video macro="video_overlay_component" src_builtin="video/onboarding_laser_colors.ivf">
-      <div macro="video_overlay_content">
-        <PageTitle icon="dashboard/click.svg" translation="WELCOME.LASER_COLORS"/>
-        <div position="relative" flex_direction="row" gap="16" margin="16" align_self="end" justify_self="end" align_items="center">
-          <rectangle flex_direction="column" gap="8" padding="8" round="4" border_color="outline" border="2" >
-            <label size="12" weight="bold" color="#00FFFF" translation="WELCOME.REGULAR_MODE_BLUE_LASER"/>
-            <label size="12" weight="bold" color="#FFAA00" translation="WELCOME.RIGHT_CLICK_MODE_ORANGE_LASER"/>
-            <label size="12" weight="bold" color="#FF88FF" translation="WELCOME.MIDDLE_CLICK_MODE_PURPLE_LASER"/>
-          </rectangle>
-          <label wrap="1" size="18" width="450" weight="bold" color="#ffffff" shadow="#000000" translation="WELCOME.LASER_FUNCTIONALITY"/>
-        </div>
+    <WelcomeVideo src_builtin="@/video/onboarding_laser_colors.ivf">
+      <PageTitle icon="@/dashboard/click.svg" translation="WELCOME.LASER_COLORS"/>
+      <div position="relative" flex_direction="row" gap="16" margin="16" align_self="end" justify_self="end" align_items="center">
+        <rectangle flex_direction="column" gap="8" padding="8" round="4" border_color="outline" border="2" >
+          <label size="12" weight="bold" color="#00FFFF" translation="WELCOME.REGULAR_MODE_BLUE_LASER"/>
+          <label size="12" weight="bold" color="#FFAA00" translation="WELCOME.RIGHT_CLICK_MODE_ORANGE_LASER"/>
+          <label size="12" weight="bold" color="#FF88FF" translation="WELCOME.MIDDLE_CLICK_MODE_PURPLE_LASER"/>
+        </rectangle>
+        <label wrap="1" size="18" width="450" weight="bold" color="#ffffff" shadow="#000000" translation="WELCOME.LASER_FUNCTIONALITY"/>
       </div>
-    </Video>
+    </WelcomeVideo>
   </elements>
 </layout>

dash-frontend/assets/gui/tab/welcome_page_4.xml

@@ -1,20 +1,18 @@
-<layout>
+<layout version="2">
   <include src_builtin="welcome_common.xml"/>
   
   <elements>
     <rectangle color="#0A2939" width="100%" height="100%" position="absolute"/>
-    <Video macro="video_overlay_component" src_builtin="video/onboarding_center_marker.ivf" aspect_ratio="1.33333">
-      <div macro="video_overlay_content">
-        <PageTitle icon="dashboard/panorama.svg" translation="WELCOME.MOVING_YOUR_SET"/>
-        <div position="relative" align_self="end" padding="16" flex_direction="column" gap="4">
-          <label shadow="#000000" size="14" weight="bold" wrap="1" color="#aaffcc" translation="WELCOME.GRAB_ONE_HAND"/>
-          <label shadow="#000000" size="14" weight="bold" wrap="1" color="#ccaaff" translation="WELCOME.GRAB_BOTH_HANDS"/>
-          <div align_items="center" gap="8">
-            <sprite src_builtin="dashboard/info.svg" min_width="48" min_height="48" max_width="48" max_height="48" color="#ffff00"/>
-            <label shadow="#000000" size="16" weight="bold" wrap="1" color="#ffff00" translation="WELCOME.CENTER_MARKER"/>
-          </div>
+    <WelcomeVideo src_builtin="@/video/onboarding_center_marker.ivf" aspect_ratio="1.33333">
+      <PageTitle icon="@/dashboard/panorama.svg" translation="WELCOME.MOVING_YOUR_SET"/>
+      <div position="relative" align_self="end" padding="16" flex_direction="column" gap="4">
+        <label shadow="#000000" size="14" weight="bold" wrap="1" color="#aaffcc" translation="WELCOME.GRAB_ONE_HAND"/>
+        <label shadow="#000000" size="14" weight="bold" wrap="1" color="#ccaaff" translation="WELCOME.GRAB_BOTH_HANDS"/>
+        <div align_items="center" gap="8">
+          <sprite src_builtin="@/dashboard/info.svg" min_width="48" min_height="48" max_width="48" max_height="48" color="#ffff00"/>
+          <label shadow="#000000" size="16" weight="bold" wrap="1" color="#ffff00" translation="WELCOME.CENTER_MARKER"/>
         </div>
       </div>
-    </Video>
+    </WelcomeVideo>
   </elements>
 </layout>

dash-frontend/assets/gui/tab/welcome_page_5.xml

@@ -1,9 +1,9 @@
-<layout>
+<layout version="2">
   <include src_builtin="welcome_common.xml"/>
   
   <elements>
     <div flex_direction="row" align_items="center">
-      <image src_builtin="dashboard/check_3d.png" width="256" height="256"/>
+      <image src_builtin="@/dashboard/check_3d.png" width="256" height="256"/>
       <div flex_direction="column" gap="16" max_width="480">
         <TextDescBig translation="WELCOME.ALL_SET" color="tertiary"/>
         
@@ -12,14 +12,14 @@
         <label size="16" wrap="1" translation="WELCOME.BASICS"/>
         <label size="16" wrap="1" translation="WELCOME.FEATURES_DOCUMENTATION"/>
         <Button id="btn_wayvr_org" align_self="baseline" min_height="32">
-          <sprite src_builtin="dashboard/globe.svg" width="24" height="24" margin="8"/>
+          <sprite src_builtin="@/dashboard/globe.svg" width="24" height="24" margin="8"/>
           <label size="18" weight="bold" text="wayvr.org" margin_right="8" />
         </Button>
 
         <rectangle color="#FFFFFF33" width="100%" min_height="2"/>
         
         <Button id="btn_home_screen" min_height="48" >
-          <sprite src_builtin="dashboard/check.svg" width="32" height="32"  margin="8"/>
+          <sprite src_builtin="@/dashboard/check.svg" width="32" height="32"  margin="8"/>
           <label color="on_background" size="20" weight="bold" translation="WELCOME.FINISH_TUTORIAL" margin_right="8" />
         </Button>
       </div>

dash-frontend/assets/gui/view/app_launcher.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <template name="Subtext">
     <div flex_direction="row" gap="8" max_width="100%">
       <label weight="bold" text="${title}" wrap="1" />
@@ -10,8 +10,8 @@
     <sprite src_ext="${path}" width="96" height="96" />
   </template>
 
-  <include src="../t_separator.xml" />
-  <include src="../t_group_box.xml" />
+  <include src="@/gui/t_separator.xml" />
+  <include src="@/gui/t_group_box.xml" />
 
   <elements>
     <div flex_direction="row" gap="16" flex_grow="1">
@@ -45,15 +45,15 @@
         <CheckBox id="cb_autostart" translation="APP_LAUNCHER.AUTOSTART" align_self="baseline"/>
         <div flex_direction="row" align_items="end" justify_content="center" gap="8" margin_top="8">
           <Button id="btn_unpin" color="danger" padding_left="8" padding_right="8" round="8" min_height="40">
-            <sprite src_builtin="dashboard/heart_minus.svg" width="32" height="32" />
+            <sprite src_builtin="@/dashboard/heart_minus.svg" width="32" height="32" />
             <label translation="REMOVE_FROM_FAVOURITES" weight="bold" size="17" />
           </Button>
           <Button id="btn_pin" color="secondary" padding_left="8" padding_right="8" round="8" min_height="40" tooltip="ADD_TO_FAVOURITES_HINT">
-            <sprite src_builtin="dashboard/heart_plus.svg" width="32" height="32" />
+            <sprite src_builtin="@/dashboard/heart_plus.svg" width="32" height="32" />
             <label translation="ADD_TO_FAVOURITES" weight="bold" size="17" />
           </Button>
           <Button id="btn_launch" color="primary" padding_left="8" padding_right="8" round="8" min_width="200" min_height="40">
-            <sprite src_builtin="dashboard/play.svg" width="32" height="32" />
+            <sprite src_builtin="@/dashboard/play.svg" width="32" height="32" />
             <label translation="APP_LAUNCHER.LAUNCH" weight="bold" size="17" />
           </Button>
         </div>

dash-frontend/assets/gui/view/audio_settings.xml

@@ -1,9 +1,9 @@
-<layout>
-  <include src_builtin="../t_group_box.xml" />
+<layout version="2">
+  <include src_builtin="@/gui/t_group_box.xml" />
 
   <!-- device_name, device_icon -->
   <template name="DeviceSlider">
-    <rectangle macro="group_box">
+    <GroupBox>
       <div width="100%" align_items="center" justify_content="center" gap="8">
         <sprite src_builtin="${device_icon}" width="16" height="16" color="on_background" />
         <label text="${device_name}" margin_right="8" size="12" weight="bold" color="on_background" />
@@ -13,23 +13,23 @@
         <Button sprite_src_builtin="${volume_icon}" id="btn_mute" width="32" />
         <Slider id="slider" flex_grow="1" height="16" min_value="0" max_value="150" margin_left="8" />
       </div>
-    </rectangle>
+    </GroupBox>
   </template>
 
   <!-- card_name, profile_name -->
   <template name="Card">
-    <rectangle macro="group_box">
+    <GroupBox>
       <div width="100%" align_items="center" justify_content="center">
         <label text="${card_name}" size="12" weight="bold" color="on_background" />
       </div>
       <Button id="btn_card" text="${profile_name}" width="100%" height="32" />
-    </rectangle>
+    </GroupBox>
   </template>
 
   <template name="SelectAudioProfileText">
     <div align_items="center" gap="8">
       <Button width="48" height="32" id="btn_back">
-        <sprite src_builtin="dashboard/back.svg" width="24" height="24" color="on_background" />
+        <sprite src_builtin="@/dashboard/back.svg" width="24" height="24" color="on_background" />
       </Button>
       <label translation="AUDIO.SELECT_AUDIO_CARD_PROFILE" size="14" weight="bold" />
     </div>
@@ -55,16 +55,16 @@
       <div flex_direction="row" gap="4">
         <Button
           id="btn_auto"
-          sprite_src_builtin="dashboard/magic_wand.svg"
+          sprite_src_builtin="@/dashboard/magic_wand.svg"
           min_width="32"
           tooltip="AUDIO.AUTO_SWITCH_TO_VR_AUDIO"
           color="primary"
           sprite_color="on_primary"
           tooltip_side="right" />
 
-        <BottomButton id="btn_sinks" src_builtin="dashboard/volume.svg" translation="AUDIO.SPEAKERS" />
-        <BottomButton id="btn_sources" src_builtin="dashboard/microphone.svg" translation="AUDIO.MICROPHONES" />
-        <BottomButton id="btn_cards" src_builtin="dashboard/cpu.svg" translation="AUDIO.CARDS" />
+        <BottomButton id="btn_sinks" src_builtin="@/dashboard/volume.svg" translation="AUDIO.SPEAKERS" />
+        <BottomButton id="btn_sources" src_builtin="@/dashboard/microphone.svg" translation="AUDIO.MICROPHONES" />
+        <BottomButton id="btn_cards" src_builtin="@/dashboard/cpu.svg" translation="AUDIO.CARDS" />
       </div>
     </div>
   </elements>

dash-frontend/assets/gui/view/bindings.xml

@@ -1,8 +1,8 @@
-<layout>
-  <include src="../t_group_box.xml" />
+<layout version="2">
+  <include src="@/gui/t_group_box.xml" />
 
   <!-- used at runtime [!!!] -->
-  <include src="../t_dropdown_button.xml" />
+  <include src="@/gui/t_dropdown_button.xml" />
 
   <!-- id, min, max, step, value, value2, tooltip -->
   <template name="ThresholdSlider">
@@ -14,7 +14,7 @@
     <rectangle macro="group_box" id="${id}">
       <!-- top row -->
       <div flex_direction="row" gap="8" align_items="center">
-        <sprite src_builtin="dashboard/controller.svg" width="24" height="24" color="on_background"/>
+        <sprite src_builtin="@/dashboard/controller.svg" width="24" height="24" color="on_background"/>
         <label translation="${translation}" color="primary" weight="bold" size="14" />
       </div>
       <!-- filled-in at runtime -->
@@ -27,8 +27,8 @@
         <div id="list_parent" flex_direction="column" gap="6" width="100%"></div>
       </div>
       <rectangle color="background_contrast" flex_direction="row" gap="8" justify_content="end" padding="8">
-        <Button id="btn_cancel" sprite_src_builtin="dashboard/cancel.svg" min_width="100" height="32" translation="APP_SETTINGS.CANCEL" />
-        <Button id="btn_save" sprite_src_builtin="dashboard/check.svg" min_width="100" height="32" translation="APP_SETTINGS.SAVE" />
+        <Button id="btn_cancel" sprite_src_builtin="@/dashboard/cancel.svg" min_width="100" height="32" translation="APP_SETTINGS.CANCEL" />
+        <Button id="btn_save" sprite_src_builtin="@/dashboard/check.svg" min_width="100" height="32" translation="APP_SETTINGS.SAVE" />
       </rectangle>
     </div>
   </elements>

dash-frontend/assets/gui/view/color_palettes.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <template name="ColorPaletteButton">
     <Button id="${id}" width="350" flex_direction="column" justify_content="space_around" tooltip="${tooltip}" tooltip_side="bottom"
       color="${background}" hover_color="${background_variant}" border_color="${outline}" hover_border_color="${highlight}" padding="16" margin="4" >

dash-frontend/assets/gui/view/dialog_box.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <template name="DialogBoxButton">
     <Button id="btn" translation="CLOSE_WINDOW" align_self="start" sprite_src_builtin="${icon}"/>
   </template>

dash-frontend/assets/gui/view/download_file.xml

@@ -1,8 +1,8 @@
-<layout>
-  <include src="../t_separator.xml"/>
+<layout version="2">
+  <include src="@/gui/t_separator.xml"/>
 
   <template name="btn_close">
-    <Button id="btn" translation="CLOSE_WINDOW" align_self="start" sprite_src_builtin="dashboard/check.svg"/>
+    <Button id="btn" translation="CLOSE_WINDOW" align_self="start" sprite_src_builtin="@/dashboard/check.svg"/>
   </template>
   
   <elements>

dash-frontend/assets/gui/view/game_launcher.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <elements>
     <div flex_direction="row" gap="16" align_items="center">
       <div id="cover_art_parent" />
@@ -10,7 +10,7 @@
         </div>
         <label id="label_description" wrap="1" text="No description available" />
         <Button id="btn_launch" align_self="baseline" color="primary" border_color="primary(rgb-mult-0.5)" padding_top="4" padding_bottom="4" round="8" padding_right="12" min_width="200" min_height="40">
-          <sprite src_builtin="dashboard/play.svg" width="32" height="32" />
+          <sprite src_builtin="@/dashboard/play.svg" width="32" height="32" />
           <label text="Launch" weight="bold" size="17" />
         </Button>
       </div>

dash-frontend/assets/gui/view/game_list.xml

@@ -1,12 +1,12 @@
-<layout>
+<layout version="2">
   <elements>
     <div flex_direction="column" padding_top="8" padding_bottom="8">
       <div id="list_parent" gap="8" flex_direction="row" flex_wrap="wrap" justify_content="center" />
     </div>
     <div align_items="center" justify_content="center" gap="16">
-      <Button id="btn_prev" sprite_src_builtin="dashboard/arrow_left.svg" width="32" height="32" />
+      <Button id="btn_prev" sprite_src_builtin="@/dashboard/arrow_left.svg" width="32" height="32" />
       <label id="label_page" text="Page X" weight="bold" />
-      <Button id="btn_next" sprite_src_builtin="dashboard/arrow_right.svg" width="32" height="32" />
+      <Button id="btn_next" sprite_src_builtin="@/dashboard/arrow_right.svg" width="32" height="32" />
     </div>
   </elements>
-</layout>
+</layout>

dash-frontend/assets/gui/view/input_profiles.xml

@@ -1,8 +1,8 @@
-<layout>
+<layout version="2">
   <!-- id, text -->
   <template name="InputProfileButton">
     <Button id="${id}" width="350" gap="8" justify_content="start" >
-      <sprite margin_left="8" src_builtin="dashboard/controller.svg" min_width="24" min_height="24" />
+      <sprite margin_left="8" src_builtin="@/dashboard/controller.svg" min_width="24" min_height="24" />
       <label text="${text}" weight="bold"/>
     </Button>
   </template>

dash-frontend/assets/gui/view/popup_window.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <elements>
     <div
       consume_mouse_events="1"
@@ -23,7 +23,7 @@
         <div gap="16" align_items="center">
           <!-- Back button -->
           <Button id="but_back" width="48" height="48" color="on_background_contrast(transparent)" border_color="on_background_contrast(transparent)">
-            <sprite src_builtin="dashboard/back.svg" width="24" height="24" color="on_background_contrast" />
+            <sprite src_builtin="@/dashboard/back.svg" width="24" height="24" color="on_background_contrast" />
           </Button>
 
           <!-- Title -->

dash-frontend/assets/gui/view/remote_skymap_downloader.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
 
   <!--
   parameters:
@@ -12,7 +12,7 @@
     <Button id="button" sprite_src_builtin="${sprite}" text="${text}"/>
   </template>
 
-  <include src="../t_separator.xml"/>
+  <include src="@/gui/t_separator.xml"/>
 
   <elements>
     <div gap="8" flex_direction="column" min_width="100%" overflow_y="scroll">

dash-frontend/assets/gui/view/remote_skymap_list.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <elements>
     <div id="list" gap="8" flex_wrap="wrap" align_self="baseline">
       <!-- filled-in at runtime -->

dash-frontend/assets/gui/view/running_games_list.xml

@@ -1,20 +1,20 @@
-<layout>
-  <include src="../t_group_box.xml" />
+<layout version="2">
+  <include src="@/gui/t_group_box.xml" />
 
   <template name="RunningGameCell">
-    <rectangle macro="group_box" flex_direction="row">
-      <Button id="btn_stop" sprite_src_builtin="dashboard/remove_circle.svg" tooltip="PROCESS.STOP" />
-      <Button id="btn_kill" sprite_src_builtin="dashboard/knife.svg" tooltip="PROCESS.FORCE_KILL" />
+    <GroupBox>
+      <Button id="btn_stop" sprite_src_builtin="@/dashboard/remove_circle.svg" tooltip="PROCESS.STOP" />
+      <Button id="btn_kill" sprite_src_builtin="@/dashboard/knife.svg" tooltip="PROCESS.FORCE_KILL" />
       <label id="label_name" weight="bold" />
-    </rectangle>
+    </GroupBox>
   </template>
 
   <elements>
     <div align_items="center" gap="8">
-      <Button id="btn_refresh" tooltip="REFRESH" width="32" height="32" sprite_src_builtin="dashboard/refresh.svg" />
-      <sprite src_builtin="dashboard/cpu.svg" width="24" height="24" />
+      <Button id="btn_refresh" tooltip="REFRESH" width="32" height="32" sprite_src_builtin="@/dashboard/refresh.svg" />
+      <sprite src_builtin="@/dashboard/cpu.svg" width="24" height="24" />
       <label translation="GAME_LIST.RUNNING_GAMES_LIST" />
     </div>
     <div id="list_parent" gap="8" />
   </elements>
-</layout>
+</layout>

dash-frontend/assets/gui/view/skymap_list.xml

@@ -1,9 +1,9 @@
-<layout>
+<layout version="2">
   <elements>
     <div flex_direction="column" gap="8" width="100%" align_items="center">
       <div flex_direction="row" gap="4" align_self="end">
-        <Button id="btn_refresh" tooltip="RELOAD_FROM_DISK" width="32" height="32" sprite_src_builtin="dashboard/refresh.svg" />
-        <Button id="btn_download_skymaps" height="32" translation="APP_SETTINGS.BROWSE_ONLINE_CATALOG" sprite_src_builtin="dashboard/download.svg"/>
+        <Button id="btn_refresh" tooltip="RELOAD_FROM_DISK" width="32" height="32" sprite_src_builtin="@/dashboard/refresh.svg" />
+        <Button id="btn_download_skymaps" height="32" translation="APP_SETTINGS.BROWSE_ONLINE_CATALOG" sprite_src_builtin="@/dashboard/download.svg"/>
       </div>
       <div id="list_parent" gap="8" flex_direction="row" flex_wrap="wrap" />
     </div>

dash-frontend/assets/gui/view/skymap_list_cell.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
 
   <!--
   ids:

dash-frontend/assets/gui/view/window_list.xml

@@ -1,9 +0,0 @@
-<layout>
-  <include src="../t_group_box.xml" />
-
-  <elements>
-    <rectangle macro="group_box" flex_direction="row" align_items="center">
-      <div id="list_parent" gap="8" flex_direction="row" flex_wrap="wrap" flex_grow="1" />
-    </rectangle>
-  </elements>
-</layout>

dash-frontend/assets/gui/view/window_options.xml

@@ -1,16 +0,0 @@
-<layout>
-  <include src="../t_group_box.xml" />
-
-  <elements>
-    <div gap="16" flex_direction="column" width="100%" justify_self="center" align_items="center" justify_content="center">
-      <rectangle macro="group_box" align_items="center">
-        <div id="window_parent" />
-        <div gap="8">
-          <Button id="btn_show_hide" text="showhide" sprite_src_builtin="dashboard/eye.svg" />
-          <Button id="btn_close" translation="CLOSE_WINDOW" sprite_src_builtin="dashboard/remove_circle.svg" />
-          <Button id="btn_kill" translation="TERMINATE_PROCESS" sprite_src_builtin="dashboard/remove_circle.svg" />
-        </div>
-      </rectangle>
-    </div>
-  </elements>
-</layout>

dash-frontend/src/frontend.rs

@@ -4,7 +4,7 @@ use chrono::Timelike;
 use glam::Vec2;
 use strum::EnumCount;
 use wgui::{
-	assets::{AssetPath, AssetProvider},
+	assets::{AssetPathRef, AssetProvider},
 	components::button::ComponentButton,
 	event::{CallbackDataCommon, StyleSetRequest},
 	font_config::WguiFontConfig,
@@ -151,7 +151,7 @@ impl<T: 'static> Frontend<T> {
 		let (layout, state) = wgui::parser::new_layout_from_assets(
 			&ParseDocumentParams {
 				globals: globals.clone(),
-				path: AssetPath::BuiltIn("gui/dashboard.xml"),
+				path: AssetPathRef::BuiltIn("gui/dashboard.xml"),
 				extra: Default::default(),
 			},
 			LayoutParams {
@@ -401,7 +401,10 @@ impl<T: 'static> Frontend<T> {
 				.cast_as::<WidgetSprite>(self.widgets.id_sprite_titlebar_icon)?;
 			sprite.set_content(
 				common.alterables,
-				Some(CustomGlyphData::from_assets(&self.globals, AssetPath::BuiltIn(icon))?),
+				Some(CustomGlyphData::from_assets(
+					&self.globals,
+					AssetPathRef::BuiltIn(icon),
+				)?),
 			);
 		}
 

dash-frontend/src/tab/apps.rs

@@ -1,6 +1,6 @@
 use std::{cell::RefCell, collections::VecDeque, marker::PhantomData, rc::Rc};
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::{ButtonClickCallback, ComponentButton},
 	globals::WguiGlobals,
 	i18n::Translation,
@@ -170,7 +170,7 @@ fn on_app_click(
 fn doc_params(globals: WguiGlobals) -> ParseDocumentParams<'static> {
 	ParseDocumentParams {
 		globals,
-		path: AssetPath::BuiltIn("gui/tab/apps.xml"),
+		path: AssetPathRef::BuiltIn("gui/tab/apps.xml"),
 		extra: Default::default(),
 	}
 }
@@ -359,7 +359,7 @@ fn mount_entry<T>(
 		params.insert(
 			"src",
 			if entry.icon_path.is_none() {
-				"dashboard/terminal.svg"
+				"@/dashboard/terminal.svg"
 			} else {
 				""
 			},

dash-frontend/src/tab/donate.rs

@@ -1,7 +1,7 @@
 use std::{marker::PhantomData, rc::Rc};
 
 use wgui::{
-	assets::AssetPath,
+	assets::{AssetPathRef},
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	layout::{Layout, WidgetID},
@@ -53,7 +53,7 @@ impl<T> Tab<T> for TabDonate<T> {
 fn doc_params(globals: &WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/tab/donate.xml"),
+		path: AssetPathRef::BuiltIn("gui/tab/donate.xml"),
 		extra: Default::default(),
 	}
 }

dash-frontend/src/tab/games.rs

@@ -1,7 +1,7 @@
 use std::marker::PhantomData;
 
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	layout::WidgetID,
 	parser::{Fetchable, ParseDocumentParams, ParserState},
 };
@@ -53,7 +53,7 @@ impl<T> TabGames<T> {
 		let state = wgui::parser::parse_from_assets(
 			&ParseDocumentParams {
 				globals: globals.clone(),
-				path: AssetPath::BuiltIn("gui/tab/games.xml"),
+				path: AssetPathRef::BuiltIn("gui/tab/games.xml"),
 				extra: Default::default(),
 			},
 			&mut frontend.layout,

dash-frontend/src/tab/home.rs

@@ -2,7 +2,7 @@ use std::{marker::PhantomData, rc::Rc};
 
 use wgui::{
 	animation::{Animation, AnimationEasing},
-	assets::AssetPath,
+	assets::AssetPathRef,
 	color::{WguiColor, WguiColorName, WguiNamedColor},
 	components::{ComponentTrait, button::ComponentButton},
 	event::CallbackDataCommon,
@@ -142,7 +142,7 @@ impl<T> TabHome<T> {
 		let state = wgui::parser::parse_from_assets(
 			&ParseDocumentParams {
 				globals: frontend.layout.state.globals.clone(),
-				path: AssetPath::BuiltIn("gui/tab/home.xml"),
+				path: AssetPathRef::BuiltIn("gui/tab/home.xml"),
 				extra: Default::default(),
 			},
 			&mut frontend.layout,

dash-frontend/src/tab/monado.rs

@@ -1,7 +1,7 @@
 use std::{collections::HashMap, marker::PhantomData, rc::Rc};
 
 use wgui::{
-	assets::AssetPath,
+	assets::{AssetPathRef},
 	components::{
 		bar_graph::{ComponentBarGraph, ValueCell},
 		button::ComponentButton,
@@ -229,7 +229,7 @@ impl<T> Tab<T> for TabMonado<T> {
 fn doc_params_monado(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/tab/monado.xml"),
+		path: AssetPathRef::BuiltIn("gui/tab/monado.xml"),
 		extra: Default::default(),
 	}
 }
@@ -237,7 +237,7 @@ fn doc_params_monado(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
 fn doc_params_tab_process_list(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/tab/monado_tab_process_list.xml"),
+		path: AssetPathRef::BuiltIn("gui/tab/monado_tab_process_list.xml"),
 		extra: Default::default(),
 	}
 }
@@ -245,7 +245,7 @@ fn doc_params_tab_process_list(globals: &'_ WguiGlobals) -> ParseDocumentParams<
 fn doc_params_tab_general_settings(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/tab/monado_tab_general_settings.xml"),
+		path: AssetPathRef::BuiltIn("gui/tab/monado_tab_general_settings.xml"),
 		extra: Default::default(),
 	}
 }
@@ -253,7 +253,7 @@ fn doc_params_tab_general_settings(globals: &'_ WguiGlobals) -> ParseDocumentPar
 fn doc_params_tab_debug_timings(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/tab/monado_tab_debug_timings.xml"),
+		path: AssetPathRef::BuiltIn("gui/tab/monado_tab_debug_timings.xml"),
 		extra: Default::default(),
 	}
 }

dash-frontend/src/tab/settings/mod.rs

@@ -2,7 +2,7 @@ use glam::Vec2;
 use std::{marker::PhantomData, rc::Rc, str::FromStr};
 use strum::{AsRefStr, EnumProperty, EnumString};
 use wgui::{
-	assets::AssetPath,
+	assets::{AssetPathRef},
 	color::WguiColorName,
 	components::tabs::ComponentTabs,
 	event::StyleSetRequest,
@@ -687,7 +687,7 @@ fn mount_requires_restart(layout: &mut Layout, parent: WidgetID) -> anyhow::Resu
 fn doc_params(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/tab/settings.xml"),
+		path: AssetPathRef::BuiltIn("gui/tab/settings.xml"),
 		extra: Default::default(),
 	}
 }
@@ -757,7 +757,7 @@ impl<T> TabSettings<T> {
 	pub fn new(frontend: &mut Frontend<T>, parent_id: WidgetID, data: &mut T) -> anyhow::Result<Self> {
 		let doc_params = ParseDocumentParams {
 			globals: frontend.layout.state.globals.clone(),
-			path: AssetPath::BuiltIn("gui/tab/settings.xml"),
+			path: AssetPathRef::BuiltIn("gui/tab/settings.xml"),
 			extra: Default::default(),
 		};
 

dash-frontend/src/tab/settings/tab_autostart_apps.rs

@@ -18,7 +18,7 @@ impl State {
 				par.mp,
 				par.id_parent,
 				"APP_SETTINGS.AUTOSTART_APPS",
-				"dashboard/apps.svg",
+				"@/dashboard/apps.svg",
 			)?;
 
 			// todo: prevent clone

dash-frontend/src/tab/settings/tab_controls.rs

@@ -62,7 +62,7 @@ fn create_input_profiles_button(
 	let mut params = TemplateParams::new();
 	params.insert("id", &id);
 	params.insert("translation", "APP_SETTINGS.INPUT_PROFILES");
-	params.insert("icon", "dashboard/controller.svg");
+	params.insert("icon", "@/dashboard/controller.svg");
 
 	mp.parser_state
 		.instantiate_template(mp.doc_params, "ButtonText", mp.layout, id_cell, params)?;
@@ -90,7 +90,7 @@ impl State {
 			par.mp,
 			par.id_parent,
 			"APP_SETTINGS.CONTROLS",
-			"dashboard/controller.svg",
+			"@/dashboard/controller.svg",
 		)?;
 		if par.feats.xr_backend.is_open_xr() {
 			create_input_profiles_button(par.mp, c, tasks.clone(), &popup)?;

dash-frontend/src/tab/settings/tab_features.rs

@@ -143,7 +143,12 @@ impl State {
 		let popup_download = PopupHolder::<views::download_file::View>::default();
 		let popup_dialog = PopupHolder::<views::dialog_box::View>::default();
 
-		let c = options_category(par.mp, par.id_parent, "APP_SETTINGS.FEATURES", "dashboard/options.svg")?;
+		let c = options_category(
+			par.mp,
+			par.id_parent,
+			"APP_SETTINGS.FEATURES",
+			"@/dashboard/options.svg",
+		)?;
 
 		if par.feats.whisper {
 			whisper_models_dropdown(par.mp, c)?;
@@ -213,12 +218,12 @@ impl State {
 				entries: vec![
 					views::dialog_box::ButtonEntry {
 						content: Translation::from_translation_key("APP_SETTINGS.CANCEL"),
-						icon: "dashboard/close.svg",
+						icon: "@/dashboard/close.svg",
 						action: ACTION_CANCEL,
 					},
 					views::dialog_box::ButtonEntry {
 						content: Translation::from_translation_key("DOWNLOAD"),
-						icon: "dashboard/download.svg",
+						icon: "@/dashboard/download.svg",
 						action: ACTION_DOWNLOAD,
 					},
 				],
@@ -254,12 +259,12 @@ impl State {
 				entries: vec![
 					views::dialog_box::ButtonEntry {
 						content: Translation::from_translation_key("APP_SETTINGS.CANCEL"),
-						icon: "dashboard/close.svg",
+						icon: "@/dashboard/close.svg",
 						action: ACTION_CANCEL,
 					},
 					views::dialog_box::ButtonEntry {
 						content: Translation::from_translation_key("REMOVE"),
-						icon: "dashboard/trash.svg",
+						icon: "@/dashboard/trash.svg",
 						action: ACTION_REMOVE,
 					},
 				],

dash-frontend/src/tab/settings/tab_look_and_feel.rs

@@ -60,7 +60,7 @@ impl State {
 			par.mp,
 			par.id_parent,
 			"APP_SETTINGS.LOOK_AND_FEEL",
-			"dashboard/palette.svg",
+			"@/dashboard/palette.svg",
 		)?;
 		create_color_palettes_button(par.mp, c, tasks.clone(), &popup)?;
 		options_dropdown::<wlx_common::locale::Language>(par.mp, c, &SettingType::Language)?;
@@ -100,7 +100,7 @@ fn create_color_palettes_button(
 	let mut params = TemplateParams::new();
 	params.insert("id", &id);
 	params.insert("translation", "APP_SETTINGS.COLOR_PALETTE");
-	params.insert("icon", "dashboard/palette.svg");
+	params.insert("icon", "@/dashboard/palette.svg");
 
 	mp.parser_state
 		.instantiate_template(mp.doc_params, "ButtonText", mp.layout, id_cell, params)?;

dash-frontend/src/tab/settings/tab_misc.rs

@@ -9,7 +9,7 @@ impl SettingsTab for State {}
 
 impl State {
 	pub fn mount(par: SettingsMountParams) -> anyhow::Result<State> {
-		let c = options_category(par.mp, par.id_parent, "APP_SETTINGS.MISC", "dashboard/blocks.svg")?;
+		let c = options_category(par.mp, par.id_parent, "APP_SETTINGS.MISC", "@/dashboard/blocks.svg")?;
 		options_dropdown::<wlx_common::config::InputEmulationMethod>(par.mp, c, &SettingType::InputEmulationMethod)?;
 		options_dropdown::<wlx_common::config::InputCaptureMethod>(par.mp, c, &SettingType::InputCaptureMethod)?;
 		options_dropdown::<wlx_common::config::CaptureMethod>(par.mp, c, &SettingType::CaptureMethod)?;

dash-frontend/src/tab/settings/tab_skybox.rs

@@ -1,4 +1,4 @@
-use wgui::{assets::AssetPath, i18n::Translation, layout::Layout, task::Tasks};
+use wgui::{assets::AssetPathRef, i18n::Translation, layout::Layout, task::Tasks};
 
 use crate::{
 	frontend::FrontendTasks,
@@ -37,7 +37,7 @@ impl SettingsTab for State {
 
 impl State {
 	pub fn mount(par: SettingsMountParams) -> anyhow::Result<Self> {
-		let id_category = options_category(par.mp, par.id_parent, "APP_SETTINGS.SKYBOX", "dashboard/globe.svg")?;
+		let id_category = options_category(par.mp, par.id_parent, "APP_SETTINGS.SKYBOX", "@/dashboard/globe.svg")?;
 		options_checkbox(par.mp, id_category, SettingType::UseSkybox)?;
 		options_checkbox(par.mp, id_category, SettingType::UsePassthrough)?;
 		options_slider_f32(par.mp, id_category, SettingType::GridOpacity, 0.0, 1.0, 0.05)?;
@@ -49,7 +49,7 @@ impl State {
 			id_parent: id_category,
 			layout: par.mp.layout,
 			content: Translation::from_translation_key("APP_SETTINGS.BROWSE_SKYMAPS"),
-			icon_builtin: AssetPath::BuiltIn("dashboard/globe.svg"),
+			icon_builtin: AssetPathRef::BuiltIn("dashboard/globe.svg"),
 			on_click: tasks.get_button_click_callback(Task::ShowSkymapList),
 		})?;
 

dash-frontend/src/tab/settings/tab_space_drag.rs

@@ -1,5 +1,5 @@
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	i18n::Translation,
 	layout::{Layout, LayoutTask, WidgetID},
 	parser::{Fetchable, ParseDocumentParams},
@@ -36,14 +36,14 @@ impl SettingsTab for State {
 
 impl State {
 	pub fn mount(par: SettingsMountParams) -> anyhow::Result<State> {
-		let c = options_category(par.mp, par.id_parent, "APP_SETTINGS.SPACE_DRAG", "dashboard/drag.svg")?;
+		let c = options_category(par.mp, par.id_parent, "APP_SETTINGS.SPACE_DRAG", "@/dashboard/drag.svg")?;
 
 		let globals = par.mp.layout.state.globals.clone();
 
 		let tab_state = wgui::parser::parse_from_assets(
 			&ParseDocumentParams {
 				globals,
-				path: AssetPath::BuiltIn("gui/tab/settings_tab_space_drag.xml"),
+				path: AssetPathRef::BuiltIn("gui/tab/settings_tab_space_drag.xml"),
 				extra: Default::default(),
 			},
 			par.mp.layout,
@@ -61,7 +61,7 @@ impl State {
 				par.mp,
 				c,
 				"APP_SETTINGS.RESET_PLAYSPACE",
-				"dashboard/refresh.svg",
+				"@/dashboard/refresh.svg",
 				super::Task::ResetPlayspace,
 			)?;
 
@@ -69,7 +69,7 @@ impl State {
 				par.mp,
 				c,
 				"APP_SETTINGS.SAVE_PLAYSPACE_CENTER",
-				"dashboard/recenter.svg",
+				"@/dashboard/recenter.svg",
 				super::Task::SavePlayspaceCenter,
 			)?;
 
@@ -77,7 +77,7 @@ impl State {
 				par.mp,
 				c,
 				"APP_SETTINGS.RESET_PLAYSPACE_CENTER",
-				"dashboard/trash.svg",
+				"@/dashboard/trash.svg",
 				super::Task::ResetPlayspaceCenter,
 			)?;
 

dash-frontend/src/tab/settings/tab_statistics.rs

@@ -83,7 +83,7 @@ impl State {
 			par.mp,
 			par.id_parent,
 			"APP_SETTINGS.STATISTICS",
-			"dashboard/barchart.svg",
+			"@/dashboard/barchart.svg",
 		)?;
 
 		let id_label_rotations = options_stat_row(par.mp, c, "APP_SETTINGS.ROTATIONS")?;

dash-frontend/src/tab/settings/tab_troubleshooting.rs

@@ -13,34 +13,34 @@ impl State {
 			par.mp,
 			par.id_parent,
 			"APP_SETTINGS.TROUBLESHOOTING",
-			"dashboard/cpu.svg",
+			"@/dashboard/cpu.svg",
 		)?;
 		options_danger_button(
 			par.mp,
 			c,
 			"APP_SETTINGS.CLEAR_PIPEWIRE_TOKENS",
-			"dashboard/display.svg",
+			"@/dashboard/display.svg",
 			Task::ClearPipewireTokens,
 		)?;
 		options_danger_button(
 			par.mp,
 			c,
 			"APP_SETTINGS.CLEAR_SAVED_STATE",
-			"dashboard/binary.svg",
+			"@/dashboard/binary.svg",
 			Task::ClearSavedState,
 		)?;
 		options_danger_button(
 			par.mp,
 			c,
 			"APP_SETTINGS.DELETE_ALL_CONFIGS",
-			"dashboard/circle.svg",
+			"@/dashboard/circle.svg",
 			Task::DeleteAllConfigs,
 		)?;
 		options_danger_button(
 			par.mp,
 			c,
 			"APP_SETTINGS.RESTART_SOFTWARE",
-			"dashboard/refresh.svg",
+			"@/dashboard/refresh.svg",
 			Task::RestartSoftware,
 		)?;
 		Ok(State {})

dash-frontend/src/tab/welcome.rs

@@ -1,7 +1,7 @@
 use std::{marker::PhantomData, rc::Rc};
 
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	layout::{Layout, WidgetID},
@@ -68,7 +68,7 @@ impl<T> Tab<T> for TabWelcome<T> {
 fn doc_params(globals: &WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/tab/welcome.xml"),
+		path: AssetPathRef::BuiltIn("gui/tab/welcome.xml"),
 		extra: Default::default(),
 	}
 }
@@ -135,7 +135,7 @@ impl<T> TabWelcome<T> {
 		let state = wgui::parser::parse_from_assets(
 			&ParseDocumentParams {
 				globals,
-				path: AssetPath::BuiltIn(&format!("gui/tab/welcome_page_{}.xml", self.current_page)),
+				path: AssetPathRef::BuiltIn(&format!("gui/tab/welcome_page_{}.xml", self.current_page)),
 				extra: Default::default(),
 			},
 			layout,

dash-frontend/src/util/popup_manager.rs

@@ -4,7 +4,7 @@ use std::{
 };
 
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	event::{EventAlterables, StyleSetRequest},
 	globals::WguiGlobals,
@@ -276,7 +276,7 @@ impl PopupManager {
 	) -> anyhow::Result<(PopupHandle, WidgetID /* content widget ID */)> {
 		let doc_params = &ParseDocumentParams {
 			globals: globals.clone(),
-			path: AssetPath::BuiltIn("gui/view/popup_window.xml"),
+			path: AssetPathRef::BuiltIn("gui/view/popup_window.xml"),
 			extra: Default::default(),
 		};
 		let state = wgui::parser::parse_from_assets(doc_params, layout, self.parent_id)?;

dash-frontend/src/util/wgui_simple.rs

@@ -1,7 +1,7 @@
 use glam::{Mat4, Vec2};
 use wgui::{
 	animation::{Animation, AnimationEasing},
-	assets::AssetPath,
+	assets::AssetPathRef,
 	color::WguiColorName,
 	components::{self, button::ButtonClickCallback},
 	i18n::Translation,
@@ -23,7 +23,7 @@ pub struct CreateButtonParams<'a> {
 	pub id_parent: WidgetID,
 	pub layout: &'a mut Layout,
 	pub content: Translation,
-	pub icon_builtin: AssetPath<'a>,
+	pub icon_builtin: AssetPathRef<'a>,
 	pub on_click: ButtonClickCallback,
 }
 
@@ -84,7 +84,12 @@ pub fn create_label_error(layout: &mut Layout, parent: WidgetID, content: String
 	Ok(())
 }
 
-pub fn create_icon(layout: &mut Layout, id_parent: WidgetID, size: Vec2, path: AssetPath) -> anyhow::Result<WidgetID> {
+pub fn create_icon(
+	layout: &mut Layout,
+	id_parent: WidgetID,
+	size: Vec2,
+	path: AssetPathRef,
+) -> anyhow::Result<WidgetID> {
 	let widget_sprite = WidgetSprite::create(WidgetSpriteParams {
 		color: Some(WguiColorName::OnBackground.into()),
 		glyph_data: Some(CustomGlyphData::from_assets(&layout.state.globals, path)?),
@@ -119,7 +124,7 @@ pub struct CreateLoadingParams<'a> {
 pub fn create_loading(par: CreateLoadingParams) -> anyhow::Result<WidgetID> {
 	let doc_params = ParseDocumentParams {
 		globals: par.layout.state.globals.clone(),
-		path: AssetPath::BuiltIn("gui/t_loading.xml"),
+		path: AssetPathRef::BuiltIn("gui/t_loading.xml"),
 		extra: Default::default(),
 	};
 

dash-frontend/src/views/app_launcher.rs

@@ -2,7 +2,7 @@ use std::{collections::HashMap, rc::Rc, str::FromStr};
 use strum::VariantNames;
 use wayvr_ipc::packet_client::{PositionMode, WvrProcessLaunchParams};
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::{
 		ComponentTrait, button::ComponentButton, checkbox::ComponentCheckbox, radio_group::ComponentRadioGroup,
 	},
@@ -100,7 +100,7 @@ impl View {
 	pub fn new(params: Params) -> anyhow::Result<Self> {
 		let doc_params = &ParseDocumentParams {
 			globals: params.globals.clone(),
-			path: AssetPath::BuiltIn("gui/view/app_launcher.xml"),
+			path: AssetPathRef::BuiltIn("gui/view/app_launcher.xml"),
 			extra: Default::default(),
 		};
 

dash-frontend/src/views/audio_settings.rs

@@ -1,7 +1,7 @@
 use std::rc::Rc;
 
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	color::{WguiColor, WguiColorName},
 	components::{
 		self,
@@ -124,7 +124,7 @@ fn mount_multi_selector(params: MultiSelectorParams) -> anyhow::Result<()> {
 			params.ess,
 			components::button::Params {
 				text: Some(Translation::from_raw_text(&cell.display_text)),
-				sprite_src: Some(AssetPath::BuiltIn(cell.icon_path)),
+				sprite_src: Some(AssetPathRef::BuiltIn(cell.icon_path)),
 				color,
 				..Default::default()
 			},
@@ -211,7 +211,7 @@ fn get_profile_display_name(profile_name: &str, card: &pactl_wrapper::Card) -> P
 		// fallback
 		return ProfileDisplayName {
 			name: profile_name.into(),
-			icon_path: "dashboard/binary.svg",
+			icon_path: "@/dashboard/binary.svg",
 			is_vr: false,
 		};
 	};
@@ -221,26 +221,26 @@ fn get_profile_display_name(profile_name: &str, card: &pactl_wrapper::Card) -> P
 
 	let prof = profile_name.to_lowercase();
 	if prof.contains("analog") {
-		out_icon_path = "dashboard/minijack.svg";
+		out_icon_path = "@/dashboard/minijack.svg";
 	} else if prof.contains("iec" /* digital */) {
-		out_icon_path = "dashboard/binary.svg";
+		out_icon_path = "@/dashboard/binary.svg";
 	} else if prof.contains("hdmi") {
-		out_icon_path = "dashboard/displayport.svg";
+		out_icon_path = "@/dashboard/displayport.svg";
 	} else if prof.contains("off") {
-		out_icon_path = "dashboard/sleep.svg";
+		out_icon_path = "@/dashboard/sleep.svg";
 	} else if prof.contains("input") {
-		out_icon_path = "dashboard/microphone.svg";
+		out_icon_path = "@/dashboard/microphone.svg";
 	} else {
-		out_icon_path = "dashboard/volume.svg"; // Default fallback
+		out_icon_path = "@/dashboard/volume.svg"; // Default fallback
 	}
 
 	// All ports are tied to this VR headset, assign all of them to the VR icon
 	if is_card_mentioning_hmd(card) {
 		if prof.contains("mic") {
 			// Probably microphone
-			out_icon_path = "dashboard/microphone.svg";
+			out_icon_path = "@/dashboard/microphone.svg";
 		} else {
-			out_icon_path = "dashboard/vr.svg";
+			out_icon_path = "@/dashboard/vr.svg";
 		}
 	}
 
@@ -266,11 +266,11 @@ fn get_profile_display_name(profile_name: &str, card: &pactl_wrapper::Card) -> P
 
 			if does_string_mention_hmd_sink(product_name) {
 				// VR icon
-				out_icon_path = "dashboard/vr.svg";
+				out_icon_path = "@/dashboard/vr.svg";
 				is_vr = true;
 			} else {
 				// Monitor icon
-				out_icon_path = "dashboard/displayport.svg";
+				out_icon_path = "@/dashboard/displayport.svg";
 			}
 
 			break;
@@ -291,7 +291,7 @@ fn get_profile_display_name(profile_name: &str, card: &pactl_wrapper::Card) -> P
 fn doc_params(globals: &WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/view/audio_settings.xml"),
+		path: AssetPathRef::BuiltIn("gui/view/audio_settings.xml"),
 		extra: Default::default(),
 	}
 }
@@ -776,9 +776,9 @@ impl View {
 			par.insert("device_icon", disp.icon_path);
 		} else {
 			let icon_path = if params.alt_desc.contains("WiVRn") {
-				"dashboard/wivrn_head_symbolic.svg"
+				"@/dashboard/wivrn_head_symbolic.svg"
 			} else {
-				"dashboard/binary.svg"
+				"@/dashboard/binary.svg"
 			};
 
 			par.insert("device_name", &params.alt_desc);
@@ -788,9 +788,9 @@ impl View {
 		par.insert(
 			"volume_icon",
 			if params.muted {
-				"dashboard/volume_off.svg"
+				"@/dashboard/volume_off.svg"
 			} else {
-				"dashboard/volume.svg"
+				"@/dashboard/volume.svg"
 			},
 		);
 

dash-frontend/src/views/bindings.rs

@@ -2,7 +2,7 @@ use glam::Vec2;
 use std::rc::Rc;
 use strum::EnumProperty;
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::{
 		button::{ButtonClickEvent, ComponentButton},
 		slider::ComponentSlider,
@@ -157,7 +157,7 @@ impl View {
 	pub fn new(params: Params) -> anyhow::Result<Self> {
 		let doc_params = &ParseDocumentParams {
 			globals: params.globals.clone(),
-			path: AssetPath::BuiltIn("gui/view/bindings.xml"),
+			path: AssetPathRef::BuiltIn("gui/view/bindings.xml"),
 			extra: Default::default(),
 		};
 
@@ -228,7 +228,7 @@ impl View {
 			parser_state: &mut self.parser_state,
 			doc_params: &ParseDocumentParams {
 				globals: self.globals.clone(),
-				path: AssetPath::BuiltIn("gui/view/bindings.xml"),
+				path: AssetPathRef::BuiltIn("gui/view/bindings.xml"),
 				extra: Default::default(),
 			},
 			layout,
@@ -501,7 +501,7 @@ fn subpath_dropdown(
 		mp.layout,
 		parent,
 		Vec2::new(32.0, 32.0),
-		AssetPath::BuiltIn(&format!("dashboard/hand_{}.svg", side.as_ref())),
+		AssetPathRef::BuiltIn(&format!("@/dashboard/hand_{}.svg", side.as_ref())),
 	)?;
 
 	let current_text = current

dash-frontend/src/views/color_palettes.rs

@@ -7,7 +7,7 @@ use crate::{
 use std::{rc::Rc, sync::Arc};
 use wgui::color::WguiColorName;
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	i18n::Translation,
@@ -93,7 +93,7 @@ impl View {
 	pub fn new(params: Params) -> anyhow::Result<Self> {
 		let doc_params = &ParseDocumentParams {
 			globals: params.globals.clone(),
-			path: AssetPath::BuiltIn("gui/view/color_palettes.xml"),
+			path: AssetPathRef::BuiltIn("gui/view/color_palettes.xml"),
 			extra: Default::default(),
 		};
 

dash-frontend/src/views/dialog_box.rs

@@ -4,7 +4,7 @@ use crate::{
 	views::{ViewTrait, ViewUpdateParams},
 };
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	i18n::Translation,
@@ -45,7 +45,7 @@ pub struct View {
 fn doc_params(globals: &WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/view/dialog_box.xml"),
+		path: AssetPathRef::BuiltIn("gui/view/dialog_box.xml"),
 		extra: Default::default(),
 	}
 }

dash-frontend/src/views/download_file.rs

@@ -10,7 +10,7 @@ use crate::{
 use glam::Vec2;
 use std::path::PathBuf;
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	i18n::Translation,
@@ -59,7 +59,7 @@ pub struct View {
 fn doc_params(globals: &WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/view/download_file.xml"),
+		path: AssetPathRef::BuiltIn("gui/view/download_file.xml"),
 		extra: Default::default(),
 	}
 }
@@ -92,7 +92,7 @@ impl ViewTrait for View {
 							par.layout,
 							self.id_loading_parent,
 							Vec2::splat(32.0),
-							AssetPath::BuiltIn("dashboard/check.svg"),
+							AssetPathRef::BuiltIn("@/dashboard/check.svg"),
 						)?;
 
 						// "Close window" button
@@ -114,7 +114,7 @@ impl ViewTrait for View {
 							par.layout,
 							self.id_loading_parent,
 							Vec2::splat(32.0),
-							AssetPath::BuiltIn("dashboard/error.svg"),
+							AssetPathRef::BuiltIn("@/dashboard/error.svg"),
 						)?;
 					}
 					Task::Close => {

dash-frontend/src/views/game_cover.rs

@@ -1,7 +1,7 @@
 use std::rc::Rc;
 
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::{
 		self,
 		button::ComponentButton,
@@ -311,7 +311,7 @@ impl ViewCommon {
 
 	fn get_placeholder_image(&mut self) -> anyhow::Result<&CustomGlyphData> {
 		if self.img_placeholder.is_none() {
-			let c = CustomGlyphData::from_assets(&self.globals, AssetPath::BuiltIn("dashboard/placeholder_cover.png"))?;
+			let c = CustomGlyphData::from_assets(&self.globals, AssetPathRef::BuiltIn("dashboard/placeholder_cover.png"))?;
 			self.img_placeholder = Some(c);
 		}
 

dash-frontend/src/views/game_launcher.rs

@@ -10,7 +10,7 @@ use crate::{
 	views::{ViewTrait, ViewUpdateParams, game_cover},
 };
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	i18n::Translation,
@@ -82,7 +82,7 @@ impl View {
 	pub fn new(params: Params) -> anyhow::Result<Self> {
 		let doc_params = &ParseDocumentParams {
 			globals: params.globals.clone(),
-			path: AssetPath::BuiltIn("gui/view/game_launcher.xml"),
+			path: AssetPathRef::BuiltIn("gui/view/game_launcher.xml"),
 			extra: Default::default(),
 		};
 

dash-frontend/src/views/game_list.rs

@@ -1,7 +1,7 @@
 use std::{collections::HashMap, rc::Rc};
 
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	i18n::Translation,
@@ -92,7 +92,7 @@ impl View {
 	pub fn new(params: Params) -> anyhow::Result<Self> {
 		let doc_params = &ParseDocumentParams {
 			globals: params.globals.clone(),
-			path: AssetPath::BuiltIn("gui/view/game_list.xml"),
+			path: AssetPathRef::BuiltIn("gui/view/game_list.xml"),
 			extra: Default::default(),
 		};
 

dash-frontend/src/views/input_profiles.rs

@@ -1,6 +1,6 @@
 use std::rc::Rc;
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	i18n::Translation,
@@ -59,7 +59,7 @@ impl View {
 	pub fn new(params: Params) -> anyhow::Result<Self> {
 		let doc_params = &ParseDocumentParams {
 			globals: params.globals.clone(),
-			path: AssetPath::BuiltIn("gui/view/input_profiles.xml"),
+			path: AssetPathRef::BuiltIn("gui/view/input_profiles.xml"),
 			extra: Default::default(),
 		};
 

dash-frontend/src/views/remote_skymap_downloader.rs

@@ -10,7 +10,7 @@ use crate::{
 };
 use anyhow::Context;
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	color::WguiColorName,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
@@ -78,8 +78,8 @@ fn mount_resolution_button(
 	t.insert(
 		"sprite",
 		match already_downloaded {
-			true => "dashboard/check.svg",
-			false => "dashboard/download.svg",
+			true => "@/dashboard/check.svg",
+			false => "@/dashboard/download.svg",
 		},
 	);
 	let data = parser_state.realize_template(doc_params, "ResolutionButton", layout, parent_id, t)?;
@@ -135,7 +135,7 @@ impl ViewTrait for View {
 fn doc_params(globals: &WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/view/remote_skymap_downloader.xml"),
+		path: AssetPathRef::BuiltIn("gui/view/remote_skymap_downloader.xml"),
 		extra: Default::default(),
 	}
 }
@@ -264,17 +264,17 @@ impl View {
 				entries: vec![
 					views::dialog_box::ButtonEntry {
 						content: Translation::from_translation_key("REMOVE"),
-						icon: "dashboard/trash.svg",
+						icon: "@/dashboard/trash.svg",
 						action: ACTION_REMOVE,
 					},
 					views::dialog_box::ButtonEntry {
 						content: Translation::from_translation_key("DOWNLOAD_AGAIN"),
-						icon: "dashboard/download.svg",
+						icon: "@/dashboard/download.svg",
 						action: ACTION_DOWNLOAD_AGAIN,
 					},
 					views::dialog_box::ButtonEntry {
 						content: Translation::from_translation_key("APPLY"),
-						icon: "dashboard/check.svg",
+						icon: "@/dashboard/check.svg",
 						action: ACTION_APPLY,
 					},
 				],

dash-frontend/src/views/remote_skymap_list.rs

@@ -2,7 +2,7 @@ use std::rc::Rc;
 
 use uuid::Uuid;
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	globals::WguiGlobals,
 	i18n::Translation,
 	layout::{Layout, WidgetID},
@@ -178,7 +178,7 @@ impl View {
 	) -> anyhow::Result<()> {
 		let doc_params = &ParseDocumentParams {
 			globals: self.globals.clone(),
-			path: AssetPath::BuiltIn("gui/view/remote_skymap_list.xml"),
+			path: AssetPathRef::BuiltIn("gui/view/remote_skymap_list.xml"),
 			extra: Default::default(),
 		};
 

dash-frontend/src/views/running_games_list.rs

@@ -1,5 +1,5 @@
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	event::StyleSetRequest,
 	globals::WguiGlobals,
@@ -44,7 +44,7 @@ pub struct View {
 fn doc_params(globals: WguiGlobals) -> ParseDocumentParams<'static> {
 	ParseDocumentParams {
 		globals,
-		path: AssetPath::BuiltIn("gui/view/running_games_list.xml"),
+		path: AssetPathRef::BuiltIn("gui/view/running_games_list.xml"),
 		extra: Default::default(),
 	}
 }

dash-frontend/src/views/skymap_list.rs

@@ -1,6 +1,6 @@
 use anyhow::Context;
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::ComponentButton,
 	globals::WguiGlobals,
 	i18n::Translation,
@@ -89,7 +89,7 @@ impl View {
 	pub fn new(params: Params) -> anyhow::Result<Self> {
 		let doc_params = &ParseDocumentParams {
 			globals: params.globals.clone(),
-			path: AssetPath::BuiltIn("gui/view/skymap_list.xml"),
+			path: AssetPathRef::BuiltIn("gui/view/skymap_list.xml"),
 			extra: Default::default(),
 		};
 
@@ -162,7 +162,7 @@ impl View {
 			if entry.is_downloaded(resolution).unwrap_or(false) {
 				entries.push(views::dialog_box::ButtonEntry {
 					content: Translation::from_raw_text(resolution.get_display_str()),
-					icon: "dashboard/globe.svg",
+					icon: "@/dashboard/globe.svg",
 					action: resolution.get_display_str_simple(),
 				});
 			}

dash-frontend/src/views/skymap_list_cell.rs

@@ -1,5 +1,5 @@
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::button::{ButtonClickCallback, ComponentButton},
 	event::EventAlterables,
 	globals::WguiGlobals,
@@ -37,7 +37,7 @@ pub struct View {
 fn doc_params(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
-		path: AssetPath::BuiltIn("gui/view/skymap_list_cell.xml"),
+		path: AssetPathRef::BuiltIn("gui/view/skymap_list_cell.xml"),
 		extra: Default::default(),
 	}
 }

uidev/assets/gui/anchor.xml

@@ -1,5 +1,5 @@
-<layout>
+<layout version="2">
   <elements>
     <!-- TODO -->
   </elements>
-</layout>
+</layout>

uidev/assets/gui/testbed.xml

@@ -1,9 +1,9 @@
-<layout>
-  <theme>
+<layout version="2">
+  <vars>
     <var key="aqua1" value="#00AAFF" />
     <var key="aqua2" value="#00CCFF" />
     <var key="aqua3" value="#00FFFF" />
-  </theme>
+  </vars>
 
   <elements>
     <rectangle width="750" height="550" color="#FFFFFF" flex_direction="column" overflow_y="scroll">
@@ -33,7 +33,7 @@
           </rectangle>
 
           <!-- Embed sprites -->
-          <sprite width="64" height="64" src="raster.png" />
+          <sprite width="64" height="64" src="@/raster.png" />
         </rectangle>
         <!-- 2/3 green rects -->
         <div flex_direction="column">

uidev/assets/gui/testbed/icons.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <elements>
     <sprite width="32" height="32" src="/usr/share/icons/nvtop.svg" />
     <sprite width="64" height="64" src="/usr/share/icons/nvtop.svg" />

uidev/assets/gui/various_widgets.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <macro name="rect"
     color="#000000aa"
     round="4" border="2"
@@ -18,6 +18,8 @@
     </context_menu>
   </blueprint>
 
+  <include src="various_widgets_inc.xml"/>
+
   <elements>
     <rectangle position="absolute" width="100%" height="100%" color="#1e3a3eee" />
     <div
@@ -26,11 +28,33 @@
       flex_direction="column"
       overflow_y="scroll">
 
+      <ElementWithChildren>
+        <label text="Foo bar"/>
+        <BoxRight>
+          <BoldText text="1"/>
+          <BoldText text="2"/>
+          <BoldText text="3"/>
+        </BoxRight>
+      </ElementWithChildren>
+
       <rectangle macro="rect">
         <label text="Raw text" color="#FFFFFF" />
         <label translation="TESTBED.HELLO_WORLD" color="#FFFFFF" />
+
+        <div>
+          <!-- find from expanded path -->
+          <sprite width="64" height="64" src="@/raster.png">
+            <label size="9" weight="bold" color="#000000" text="@/raster.png"/>
+          </sprite>
+
+          <!-- find from upper dir -->
+          <sprite width="64" height="64" src="../raster.png">
+            <label size="9" weight="bold" color="#000000" text="../raster.png"/>
+          </sprite>
+        </div>
       </rectangle>
 
+
       <rectangle macro="rect">
         <label id="label_current_option" text="Click any of these buttons" size="20" weight="bold" />
         <div gap="4">

uidev/assets/gui/various_widgets_inc.xml

@@ -0,0 +1,19 @@
+<layout version="2">
+  <!-- text -->
+  <template name="BoldText">
+    <label text="${text}" weight="bold"/>
+  </template>
+
+  <template name="BoxRight">
+    <div gap="16">
+      <CHILDREN/>
+    </div>
+  </template>
+
+  <!-- children support! -->
+  <template name="ElementWithChildren">
+    <rectangle color="#2299FF" padding="8" align_self="start" round="4" border="2" border_color="#ffffff" flex_direction="column">
+      <CHILDREN/>
+    </rectangle>
+  </template>
+</layout>

uidev/assets/gui/video.xml

@@ -1,24 +1,24 @@
-<layout>
-  <theme>
+<layout version="2">
+  <vars>
     <var key="width" value="426.666" />
     <var key="height" value="133.333" />
-  </theme>
+  </vars>
   <elements>
     <rectangle position="absolute" width="10000" height="10000" color="#112233"/>
     <div flex_direction="row">
       <div margin="16" gap="8" flex_direction="column" overflow_y="scroll" >
         <label text="640x200, looping"/>
-        <Video src_builtin="video.ivf" width="~width" height="~height" looping="1"/>
+        <Video src_builtin="@/video.ivf" width="~width" height="~height" looping="1"/>
         <label text="640x200, non-looping "/>
-        <Video src_builtin="video.ivf" width="~width" height="~height" looping="0"/>
+        <Video src_builtin="@/video.ivf" width="~width" height="~height" looping="0"/>
       </div>
       <div margin="16" gap="8" flex_direction="column" overflow_y="scroll" >
         <label text="640x200, looping, speed 2x"/>
-        <Video src_builtin="video.ivf" width="~width" height="~height" looping="1" speed="2"/>
+        <Video src_builtin="@/video.ivf" width="~width" height="~height" looping="1" speed="2"/>
         <label text="640x200, looping, speed 0.5x"/>
-        <Video src_builtin="video.ivf" width="~width" height="~height" looping="1" speed="0.5"/>
+        <Video src_builtin="@/video.ivf" width="~width" height="~height" looping="1" speed="0.5"/>
         <label text="640x200, looping, speed 4x"/>
-        <Video src_builtin="video.ivf" width="~width" height="~height" looping="1" speed="4"/>
+        <Video src_builtin="@/video.ivf" width="~width" height="~height" looping="1" speed="4"/>
       </div>
     </div>
   </elements>

uidev/src/testbed/testbed_any.rs

@@ -6,12 +6,12 @@ use crate::{
 };
 use glam::Vec2;
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	font_config::WguiFontConfig,
 	globals::WguiGlobals,
 	layout::{Layout, LayoutParams, LayoutUpdateParams},
 	palette::WguiColorPalette,
-	parser::{ParseDocumentParams, ParserState},
+	parser::{ParseDocumentExtra, ParseDocumentParams, ParserState},
 };
 use wlx_common::locale::WayVRLangProvider;
 
@@ -25,9 +25,9 @@ pub struct TestbedAny {
 impl TestbedAny {
 	pub fn new(assets: Box<assets::Asset>, name: &str) -> anyhow::Result<Self> {
 		let path = if name.ends_with(".xml") {
-			AssetPath::FileOrBuiltIn(name)
+			AssetPathRef::FileOrBuiltIn(name)
 		} else {
-			AssetPath::BuiltIn(&format!("gui/{name}.xml"))
+			AssetPathRef::BuiltIn(&format!("gui/{name}.xml"))
 		};
 
 		let lang_provider = WayVRLangProvider::default();
@@ -45,7 +45,10 @@ impl TestbedAny {
 			&ParseDocumentParams {
 				globals,
 				path,
-				extra: Default::default(),
+				extra: ParseDocumentExtra {
+					root_dir: Some(path.to_rc().strip_filename()),
+					..Default::default()
+				},
 			},
 			LayoutParams::default(),
 		)?;

uidev/src/testbed/testbed_generic.rs

@@ -6,7 +6,7 @@ use crate::{
 };
 use glam::Vec2;
 use wgui::{
-	assets::AssetPath,
+	assets::AssetPathRef,
 	components::{
 		Component,
 		button::{ButtonClickCallback, ComponentButton},
@@ -80,7 +80,7 @@ impl TestbedGeneric {
 	fn doc_params(globals: &'_ WguiGlobals, extra: ParseDocumentExtra) -> ParseDocumentParams<'_> {
 		ParseDocumentParams {
 			globals: globals.clone(),
-			path: AssetPath::BuiltIn("gui/various_widgets.xml"),
+			path: AssetPathRef::BuiltIn("gui/various_widgets.xml"),
 			extra,
 		}
 	}

wayvr/src/assets/gui/alttab-help.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <elements>
     <div interactable="0">
       <rectangle

wayvr/src/assets/gui/anchor.xml

@@ -1,5 +1,4 @@
-
-<layout>
+<layout version="2">
   <elements>
     <div width="192" height="192" padding="8">
       <rectangle

wayvr/src/assets/gui/decor.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <macro name="window_button" min_width="40" min_height="40" padding="4" align_items="center" />
   <macro name="window_button_icon" width="32" height="32" />
 
@@ -17,13 +17,13 @@
         <label id="title" text="~title" margin_left="8" color="on_background" size="22" weight="bold" />
         <div gap="4">
           <Button macro="window_button" _release="::EditToggle">
-            <sprite macro="window_button_icon" src="watch/edit.svg" />
+            <sprite macro="window_button_icon" src="@/watch/edit.svg" />
           </Button>
 
           <Button macro="window_button" _release="::DecorCloseWindow"
             color="danger" border_color="danger(rgb-mult-0.5)" 
             hover_color="danger(rgb-add-0.2)" hover_border_color="danger">
-            <sprite macro="window_button_icon" src="edit/close.svg" />
+            <sprite macro="window_button_icon" src="@/edit/close.svg" />
           </Button>
         </div>
 

wayvr/src/assets/gui/edit.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <macro name="button_style"
     margin="2" overflow="hidden" box_sizing="border_box" align_items="center" justify_content="center"
     border="2" round="50%" padding="8" gradient="vertical" tooltip_side="bottom" />
@@ -35,30 +35,30 @@
           <rectangle padding="16" gap="8" round="32" color="background(opacity-0.9)" border="2" border_color="outline" justify_content="center">
             <div flex_direction="column" gap="8">
               <div flex_direction="row" gap="4">
-                <TopButton sticky="0" id="top_lock" src="edit/lock_open.svg" tooltip="EDIT_MODE.LOCK_INTERACTION" press="::EditModeToggleLock" />
-                <TopButton sticky="1" id="top_grab" src="edit/disable-grab.svg" tooltip="EDIT_MODE.DISABLE_GRAB" press="::EditModeToggleGrab" />
-                <TopButton sticky="0" id="top_pos" src="edit/anchor.svg" tooltip="EDIT_MODE.POSITIONING" press="::EditModeTab pos" />
-                <TopButton sticky="0" id="top_alpha" src="edit/fade.svg" tooltip="EDIT_MODE.OPACITY" press="::EditModeTab alpha" />
-                <TopButton sticky="0" id="top_curve" src="edit/curve.svg" tooltip="EDIT_MODE.ADJUST_CURVATURE" press="::EditModeTab curve" />
-                <TopButton sticky="0" id="top_stereo" src="edit/3d.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.TITLE" press="::EditModeTab stereo" />
-                <TopButton sticky="0" id="top_mouse" src="edit/normal.svg" tooltip="EDIT_MODE.MOUSE.TITLE" press="::EditModeTab mouse" />
-                <!-- TopButton sticky="0" id="top_move" src="edit/move-all.svg" tooltip="EDIT_MODE.MOVE_PRESS_AND_DRAG" / -->
-                <!-- TopButton sticky="0" id="top_resize" src="edit/resize.svg" tooltip="EDIT_MODE.RESIZE_PRESS_AND_DRAG" / -->
-                <TopButtonDanger src="edit/delete.svg" tooltip="EDIT_MODE.DELETE" release="::EditModeDelete" />
+                <TopButton sticky="0" id="top_lock" src="@/edit/lock_open.svg" tooltip="EDIT_MODE.LOCK_INTERACTION" press="::EditModeToggleLock" />
+                <TopButton sticky="1" id="top_grab" src="@/edit/disable-grab.svg" tooltip="EDIT_MODE.DISABLE_GRAB" press="::EditModeToggleGrab" />
+                <TopButton sticky="0" id="top_pos" src="@/edit/anchor.svg" tooltip="EDIT_MODE.POSITIONING" press="::EditModeTab pos" />
+                <TopButton sticky="0" id="top_alpha" src="@/edit/fade.svg" tooltip="EDIT_MODE.OPACITY" press="::EditModeTab alpha" />
+                <TopButton sticky="0" id="top_curve" src="@/edit/curve.svg" tooltip="EDIT_MODE.ADJUST_CURVATURE" press="::EditModeTab curve" />
+                <TopButton sticky="0" id="top_stereo" src="@/edit/3d.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.TITLE" press="::EditModeTab stereo" />
+                <TopButton sticky="0" id="top_mouse" src="@/edit/normal.svg" tooltip="EDIT_MODE.MOUSE.TITLE" press="::EditModeTab mouse" />
+                <!-- TopButton sticky="0" id="top_move" src="@/edit/move-all.svg" tooltip="EDIT_MODE.MOVE_PRESS_AND_DRAG" / -->
+                <!-- TopButton sticky="0" id="top_resize" src="@/edit/resize.svg" tooltip="EDIT_MODE.RESIZE_PRESS_AND_DRAG" / -->
+                <TopButtonDanger src="@/edit/delete.svg" tooltip="EDIT_MODE.DELETE" release="::EditModeDelete" />
                 <div width="8" height="100%" />
-                <TopButtonTertiary src="edit/check.svg" tooltip="EDIT_MODE.LEAVE" press="::EditToggle" />
+                <TopButtonTertiary src="@/edit/check.svg" tooltip="EDIT_MODE.LEAVE" press="::EditToggle" />
               </div>
               <div id="tab_none" display="none" height="100">
                 <label align="center" translation="EDIT_MODE.HINT_POINT_WINDOW" />
               </div>
               <div id="tab_pos" display="none" height="100" flex_direction="column">
                 <div padding="8" gap="8" justify_content="center" align_items="center">
-                  <PosButton id="pos_static" src="edit/pin.svg" tooltip="EDIT_MODE.POS_STATIC" press="::EditModeSetPos static" />
-                  <PosButton id="pos_anchored" src="edit/anchor.svg" tooltip="EDIT_MODE.POS_ANCHORED" press="::EditModeSetPos anchored" />
-                  <PosButton id="pos_floating" src="edit/float.svg" tooltip="EDIT_MODE.POS_FLOATING" press="::EditModeSetPos floating" />
-                  <PosButton id="pos_hmd" src="watch/hmd.svg" tooltip="EDIT_MODE.POS_HMD" press="::EditModeSetPos hmd" />
-                  <PosButton id="pos_hand_l" src="watch/controller_l.svg" tooltip="EDIT_MODE.POS_HAND_L" press="::EditModeSetPos hand_l" />
-                  <PosButton id="pos_hand_r" src="watch/controller_r.svg" tooltip="EDIT_MODE.POS_HAND_R" press="::EditModeSetPos hand_r" />
+                  <PosButton id="pos_static" src="@/edit/pin.svg" tooltip="EDIT_MODE.POS_STATIC" press="::EditModeSetPos static" />
+                  <PosButton id="pos_anchored" src="@/edit/anchor.svg" tooltip="EDIT_MODE.POS_ANCHORED" press="::EditModeSetPos anchored" />
+                  <PosButton id="pos_floating" src="@/edit/float.svg" tooltip="EDIT_MODE.POS_FLOATING" press="::EditModeSetPos floating" />
+                  <PosButton id="pos_hmd" src="@/watch/hmd.svg" tooltip="EDIT_MODE.POS_HMD" press="::EditModeSetPos hmd" />
+                  <PosButton id="pos_hand_l" src="@/watch/controller_l.svg" tooltip="EDIT_MODE.POS_HAND_L" press="::EditModeSetPos hand_l" />
+                  <PosButton id="pos_hand_r" src="@/watch/controller_r.svg" tooltip="EDIT_MODE.POS_HAND_R" press="::EditModeSetPos hand_r" />
                 </div>
                 <div flex_direction="row" gap="8" justify_content="center" align_items="center">
                   <div id="pos_interpolation" gap="6">
@@ -74,11 +74,11 @@
               </div>
               <div id="tab_stereo" display="none" height="100" flex_direction="column">
                 <div padding="8" gap="8" justify_content="center" align_items="center">
-                  <PosButton id="stereo_none" src="edit/close.svg" tooltip="DISABLED" press="::EditModeSetStereo none" />
-                  <PosButton id="stereo_leftright" src="edit/3d_leftright.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.SPLIT_LEFT_RIGHT" press="::EditModeSetStereo leftright" />
-                  <PosButton id="stereo_rightleft" src="edit/3d_rightleft.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.SPLIT_RIGHT_LEFT" press="::EditModeSetStereo rightleft" />
-                  <PosButton id="stereo_topbottom" src="edit/3d_topbottom.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.SPLIT_TOP_BOTTOM" press="::EditModeSetStereo topbottom" />
-                  <PosButton id="stereo_bottomtop" src="edit/3d_bottomtop.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.SPLIT_BOTTOM_TOP" press="::EditModeSetStereo bottomtop" />
+                  <PosButton id="stereo_none" src="@/edit/close.svg" tooltip="DISABLED" press="::EditModeSetStereo none" />
+                  <PosButton id="stereo_leftright" src="@/edit/3d_leftright.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.SPLIT_LEFT_RIGHT" press="::EditModeSetStereo leftright" />
+                  <PosButton id="stereo_rightleft" src="@/edit/3d_rightleft.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.SPLIT_RIGHT_LEFT" press="::EditModeSetStereo rightleft" />
+                  <PosButton id="stereo_topbottom" src="@/edit/3d_topbottom.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.SPLIT_TOP_BOTTOM" press="::EditModeSetStereo topbottom" />
+                  <PosButton id="stereo_bottomtop" src="@/edit/3d_bottomtop.svg" tooltip="EDIT_MODE.STEREO_3D_MODE.SPLIT_BOTTOM_TOP" press="::EditModeSetStereo bottomtop" />
                 </div>
                 <div justify_content="center" align_items="center" flex_direction="row" gap="16">
                   <CheckBox id="stereo_full_frame_box" translation="EDIT_MODE.STEREO_3D_MODE.FULL_FRAME" tooltip_side="top" />
@@ -87,15 +87,15 @@
               </div>
               <div id="tab_mouse" display="none" height="100" flex_direction="column">
                 <div padding_left="8" padding_right="8" gap="8" justify_content="center" align_items="center">
-                  <PosButton id="mouse_default" src="edit/close.svg" tooltip="DEFAULT" press="::EditModeSetMouse default" />
-                  <PosButton id="mouse_normal" src="edit/normal.svg" tooltip="EDIT_MODE.MOUSE.NORMAL" press="::EditModeSetMouse normal" />
-                  <PosButton id="mouse_rotate90" src="edit/rotate90.svg" tooltip="EDIT_MODE.MOUSE.ROTATE90" press="::EditModeSetMouse rotate90" />
-                  <PosButton id="mouse_rotate180" src="edit/rotate180.svg" tooltip="EDIT_MODE.MOUSE.ROTATE180" press="::EditModeSetMouse rotate180" />
-                  <PosButton id="mouse_rotate270" src="edit/rotate270.svg" tooltip="EDIT_MODE.MOUSE.ROTATE270" press="::EditModeSetMouse rotate270" />
-                  <PosButton id="mouse_flipped" src="edit/flipped.svg" tooltip="EDIT_MODE.MOUSE.FLIPPED" press="::EditModeSetMouse flipped" />
-                  <PosButton id="mouse_flip90" src="edit/flip90.svg" tooltip="EDIT_MODE.MOUSE.FLIP90" press="::EditModeSetMouse flip90" />
-                  <PosButton id="mouse_flip180" src="edit/flip180.svg" tooltip="EDIT_MODE.MOUSE.FLIP180" press="::EditModeSetMouse flip180" />
-                  <PosButton id="mouse_flip270" src="edit/flip270.svg" tooltip="EDIT_MODE.MOUSE.FLIP270" press="::EditModeSetMouse flip270" />
+                  <PosButton id="mouse_default" src="@/edit/close.svg" tooltip="DEFAULT" press="::EditModeSetMouse default" />
+                  <PosButton id="mouse_normal" src="@/edit/normal.svg" tooltip="EDIT_MODE.MOUSE.NORMAL" press="::EditModeSetMouse normal" />
+                  <PosButton id="mouse_rotate90" src="@/edit/rotate90.svg" tooltip="EDIT_MODE.MOUSE.ROTATE90" press="::EditModeSetMouse rotate90" />
+                  <PosButton id="mouse_rotate180" src="@/edit/rotate180.svg" tooltip="EDIT_MODE.MOUSE.ROTATE180" press="::EditModeSetMouse rotate180" />
+                  <PosButton id="mouse_rotate270" src="@/edit/rotate270.svg" tooltip="EDIT_MODE.MOUSE.ROTATE270" press="::EditModeSetMouse rotate270" />
+                  <PosButton id="mouse_flipped" src="@/edit/flipped.svg" tooltip="EDIT_MODE.MOUSE.FLIPPED" press="::EditModeSetMouse flipped" />
+                  <PosButton id="mouse_flip90" src="@/edit/flip90.svg" tooltip="EDIT_MODE.MOUSE.FLIP90" press="::EditModeSetMouse flip90" />
+                  <PosButton id="mouse_flip180" src="@/edit/flip180.svg" tooltip="EDIT_MODE.MOUSE.FLIP180" press="::EditModeSetMouse flip180" />
+                  <PosButton id="mouse_flip270" src="@/edit/flip270.svg" tooltip="EDIT_MODE.MOUSE.FLIP270" press="::EditModeSetMouse flip270" />
                 </div>
                 <div justify_content="center" align_items="center">
                   <label align="center" translation="EDIT_MODE.MOUSE.WRONG_SCREEN_SELECTION_HELP" />
@@ -123,7 +123,7 @@
         <div width="100%" justify_content="end" flex_direction="row">
           <div>
             <Button id="resize_corner" macro="button_style" tooltip="EDIT_MODE.RESIZE_CORNER" tooltip_side="left" _press="::EditModeResizeStart" _release="::EditModeResizeStop">
-              <sprite width="48" height="48" src="edit/resize-corner.svg" />
+              <sprite width="48" height="48" src="@/edit/resize-corner.svg" />
             </Button>
           </div>
         </div>

wayvr/src/assets/gui/grab-help.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <elements>
     <div interactable="0">
       <rectangle
@@ -10,15 +10,15 @@
 
         <div flex_direction="row" padding="8" justify_content="space_between">
           <div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
-            <sprite src="grab-help/controller-grip-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" color="primary" />
+            <sprite src="@/grab-help/controller-grip-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" color="primary" />
             <label wrap="1" size="25" padding_left="16" padding_right="16" translation="GRAB.ADJUST_DISTANCE" align="center" />
           </div>
           <div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
-            <sprite src="grab-help/controller-grip-trigger-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" color="primary" />
+            <sprite src="@/grab-help/controller-grip-trigger-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" color="primary" />
             <label wrap="1" size="25" padding_left="16" padding_right="16" translation="GRAB.ADJUST_SIZE" align="center" />
           </div>
           <div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
-            <sprite src="grab-help/controller-grip-b.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" color="primary" />
+            <sprite src="@/grab-help/controller-grip-b.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" color="primary" />
             <label wrap="1" size="25" padding_left="16" padding_right="16" translation="GRAB.UNRESTRICTED_MOVEMENT" align="center" />
           </div>
         </div>

wayvr/src/assets/gui/keyboard.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <macro name="keycap_rect"
     margin="2" width="100%" overflow="hidden" box_sizing="border_box"
     border_color="outline" border="2" round="6" color="background_variant" color2="background" gradient="vertical"
@@ -13,9 +13,9 @@
     width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}"
   />
 
-  <theme>
+  <vars>
     <var key="text_size" value="20" />
-  </theme>
+  </vars>
 
   <template name="VerticalSeparator">
     <rectangle width="2" height="100%" color="primary" />
@@ -28,7 +28,7 @@
   <template name="KeySpecial">
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect">
-        <sprite color="on_background" width="24" height="24" src="keyboard/${text}.svg" />
+        <sprite color="on_background" width="24" height="24" src="@/keyboard/${text}.svg" />
       </rectangle>
     </div>
   </template>
@@ -127,7 +127,7 @@
   <!-- A screen with a shortened connector name, e.g. "H1" for HDMI-A-1 or "D2" for DP-2 -->
   <template name="Screen">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_screen" _press_right="::OverlayToggle ${name}">
-      <sprite width="38" height="38" src_builtin="edit/screen.svg" />
+      <sprite width="38" height="38" src_builtin="@/edit/screen.svg" />
       <div position="absolute" margin_top="-7" margin_left="-1">
         <label text="${display}" size="~text_size" weight="bold" parent_color="background" />
       </div>
@@ -160,7 +160,7 @@
 
   <template name="Mirror">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_mirror" _press_right="::OverlayToggle ${name}">
-      <sprite width="38" height="38" src_builtin="edit/mirror.svg" />
+      <sprite width="38" height="38" src_builtin="@/edit/mirror.svg" />
       <div position="absolute" margin_top="5" margin_left="13">
         <label text="${display}" size="20" weight="bold" parent_color="background" />
       </div>
@@ -170,7 +170,7 @@
   <!-- mirror with a different icon -->
   <template name="Passthru">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_mirror" _press_right="::OverlayToggle ${name}">
-      <sprite width="38" height="38" src_builtin="icons/landscape.svg" />
+      <sprite width="38" height="38" src_builtin="@/icons/landscape.svg" />
       <div position="absolute" margin_top="5" margin_left="13">
         <label text="${display}" size="20" weight="bold" parent_color="background" />
       </div>
@@ -200,7 +200,7 @@
 
   <template name="Set">
     <Button macro="button_style" id="set_${idx}" _press="::SetSwitch ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="bottom">
-      <sprite width="38" height="38" src_builtin="watch/set2.svg" />
+      <sprite width="38" height="38" src_builtin="@/watch/set2.svg" />
       <div position="absolute" margin_top="10" margin_left="-7">
         <label text="${display}" size="20" weight="bold" parent_color="background" />
       </div>
@@ -220,7 +220,7 @@
       <rectangle macro="bg_rect" padding="10" align_items="center" justify_content="space_between">
         <div gap="10">
           <Button macro="button_style" id="btn_dashboard" _press="::DashToggle">
-            <sprite width="38" height="38" src="watch/wayvr_dashboard_mono.svg"  />
+            <sprite width="38" height="38" src="@/watch/wayvr_dashboard_mono.svg"  />
           </Button>
           <VerticalSeparator />
           <div id="panels_root" gap="6">
@@ -231,7 +231,7 @@
         </div>
         <div id="tray_root" flex_direction="row" gap="10">
           <Button macro="button_style" _press="::ContextMenuOpen menu_burger">
-            <sprite width="38" height="38" src_builtin="keyboard/burger.svg" />
+            <sprite width="38" height="38" src_builtin="@/keyboard/burger.svg" />
           </Button>
 
           <VerticalSeparator />

wayvr/src/assets/gui/screencast.xml

@@ -1,8 +1,8 @@
-<layout>
+<layout version="2">
   <elements>
     <rectangle width="1280" height="720" padding="10" align_items="center" justify_content="space_evenly" flex_direction="column" color="background" color2="background_variant" border="2" border_color="primary" gradient="radial">
       <div width="100%" align_items="center">
-        <label width="100%" id="status" color="secondary" text="" size="36" align="center" />
+        <label width="100%" id="status" color="secondary" text=" " size="36" align="center" />
       </div>
       <div width="100%" align_items="center" flex_direction="column" gap="16">
         <div width="100%" align_items="center">

wayvr/src/assets/gui/toast.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <elements>
     <div interactable="0">
       <rectangle
@@ -10,7 +10,7 @@
 
         <!-- Toast title -->
         <div flex_direction="row" align_items="center" gap="8">
-          <sprite src="icons/bell.svg" color="primary" min_width="32" min_height="32" max_width="32" max_height="32" flex_grow="1" />
+          <sprite src="@/icons/bell.svg" color="primary" min_width="32" min_height="32" max_width="32" max_height="32" flex_grow="1" />
           <label wrap="1" id="toast_title" color="primary" weight="bold" size="25" padding_left="16" padding_right="16" />
         </div>
 

wayvr/src/assets/gui/watch.xml

@@ -1,11 +1,11 @@
-<layout>
-  <theme>
+<layout version="2">
+  <vars>
     <var key="clock0_size" value="46" />
     <var key="clock0_date_size" value="16" />
     <var key="clock0_dow_size" value="16" />
     <var key="clock_alt_size" value="24" />
     <var key="clock_alt_tz_size" value="14" />
-  </theme>
+  </vars>
 
   <macro name="decorative_rect"
     padding="8" color="background"
@@ -21,21 +21,21 @@
   </template>
 
   <template name="Hmd">
-    <Device idx="${idx}" src="watch/hmd.svg" />
+    <Device idx="${idx}" src="@/watch/hmd.svg" />
   </template>
   <template name="LeftHand">
-    <Device idx="${idx}" src="watch/controller_l.svg" />
+    <Device idx="${idx}" src="@/watch/controller_l.svg" />
   </template>
   <template name="RightHand">
-    <Device idx="${idx}" src="watch/controller_r.svg" />
+    <Device idx="${idx}" src="@/watch/controller_r.svg" />
   </template>
   <template name="Tracker">
-    <Device idx="${idx}" src="watch/track.svg" />
+    <Device idx="${idx}" src="@/watch/track.svg" />
   </template>
 
   <template name="Screen">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
-      <sprite width="38" height="38" src_builtin="edit/screen.svg" />
+      <sprite width="38" height="38" src_builtin="@/edit/screen.svg" />
       <div position="absolute" margin_top="-7" margin_left="-1">
         <label text="${display}" size="18" weight="bold" parent_color="background" />
       </div>
@@ -43,12 +43,12 @@
   </template>
   <template name="Panel">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
-      <sprite width="38" height="38" src_builtin="edit/panel.svg" />
+      <sprite width="38" height="38" src_builtin="@/edit/panel.svg" />
     </Button>
   </template>
   <template name="Mirror">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
-      <sprite width="38" height="38" src_builtin="edit/mirror.svg" />
+      <sprite width="38" height="38" src_builtin="@/edit/mirror.svg" />
       <div position="absolute" margin_top="5" margin_left="13">
         <label text="${display}" size="20" weight="bold" parent_color="background" />
       </div>
@@ -56,7 +56,7 @@
   </template>
   <template name="Passthru">
     <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
-      <sprite width="38" height="38" src_builtin="icons/landscape.svg" />
+      <sprite width="38" height="38" src_builtin="@/icons/landscape.svg" />
       <div position="absolute" margin_top="5" margin_left="13">
         <label text="${display}" size="20" weight="bold" parent_color="background" />
       </div>
@@ -70,7 +70,7 @@
     
   <template name="Set">
     <Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="top">
-      <sprite width="38" height="38" src_builtin="watch/set2.svg" />
+      <sprite width="38" height="38" src_builtin="@/watch/set2.svg" />
       <div position="absolute" margin_top="9">
         <label text="${display}" size="24" weight="bold" parent_color="background" />
       </div>
@@ -131,18 +131,18 @@
           <div flex_direction="column" gap="8">
             <div gap="8">
               <Button id="btn_keyboard" macro="button_style" _press="::OverlayToggle kbd" tooltip="EDIT_MODE.KEYBOARD" tooltip_side="left">
-                <sprite src_builtin="watch/keyboard.svg" width="40" height="40" />
+                <sprite src_builtin="@/watch/keyboard.svg" width="40" height="40" />
               </Button>
               <Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="left">
-                <sprite width="40" height="40" src="watch/edit.svg" />
+                <sprite width="40" height="40" src="@/watch/edit.svg" />
               </Button>
             </div>
             <div gap="8">
               <Button macro="button_style" _press="::PlayspaceRecenter" tooltip="WATCH.RECENTER" tooltip_side="left">
-                <sprite width="40" height="40" src="watch/recenter.svg" />
+                <sprite width="40" height="40" src="@/watch/recenter.svg" />
               </Button>
               <Button macro="button_style" _press="::PlayspaceFixFloor" tooltip="WATCH.FIX_FLOOR" tooltip_side="left">
-                <sprite width="40" height="40" src="watch/fix-floor.svg" />
+                <sprite width="40" height="40" src="@/watch/fix-floor.svg" />
               </Button>
             </div>
           </div>
@@ -152,7 +152,7 @@
         <div flex_direction="row" gap="8">
           <div gap="4">
             <Button id="btn_dashboard" macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top">
-              <sprite width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
+              <sprite width="40" height="40" src="@/watch/wayvr_dashboard_mono.svg" />
             </Button>
           </div>
           <VerticalSeparator />

wayvr/src/assets/gui/whisper.xml

@@ -1,4 +1,4 @@
-<layout>
+<layout version="2">
   <macro name="button_style" border="2" round="6"
     align_items="center" justify_content="center" padding="6" width="64" height="64" overflow="visible" />
 
@@ -19,28 +19,28 @@
               </div>
               <rectangle display="none" position="absolute" id="rect_vu_meter" width="50%" height="8" color="#00FF00" align_self="end" round="4"/>
             </div>
-            <sprite width="38" height="38" src="icons/mic.svg"  />
+            <sprite width="38" height="38" src="@/icons/mic.svg"  />
           </Button>
           <VerticalSeparator />
           <Button macro="button_style" _press="::WhisperPaste" tooltip="WHISPER.PASTE" tooltip_side="right">
-            <sprite width="38" height="38" src_builtin="icons/paste.svg" />
+            <sprite width="38" height="38" src_builtin="@/icons/paste.svg" />
           </Button>
           <Button macro="button_style" _press="::WhisperPasteAndGo" tooltip="WHISPER.PASTE_AND_GO" tooltip_side="right">
-            <sprite width="38" height="38" src_builtin="icons/paste-go.svg" />
+            <sprite width="38" height="38" src_builtin="@/icons/paste-go.svg" />
           </Button>
           <VerticalSeparator />
           <Button macro="button_style" _press="::SendKey Return down" _release="::SendKey Return up" tooltip="WHISPER.ENTER_KEY" tooltip_side="right">
-            <sprite width="38" height="38" src_builtin="keyboard/return.svg" />
+            <sprite width="38" height="38" src_builtin="@/keyboard/return.svg" />
           </Button>
           <VerticalSeparator />
           <Button macro="button_style" _press="::WhisperSendOSC" tooltip="WHISPER.SEND_OSC" id="btn_osc_send" tooltip_side="right">
-            <sprite width="38" height="38" src_builtin="icons/chat.svg" />
+            <sprite width="38" height="38" src_builtin="@/icons/chat.svg" />
           </Button>
         </div>
         <div gap="8">
           <Button macro="button_style" _press="::WhisperUnloadAndClose" tooltip="WHISPER.UNLOAD_AND_CLOSE" tooltip_side="left"
             hover_color="danger" hover_border_color="danger(rgb-mult-0.5)">
-            <sprite width="38" height="38" src_builtin="edit/close.svg" />
+            <sprite width="38" height="38" src_builtin="@/edit/close.svg" />
           </Button>
         </div>
       </rectangle>

wayvr/src/gui/panel/mod.rs

@@ -16,7 +16,7 @@ use idmap::IdMap;
 use label::setup_custom_label;
 use std::{cell::RefCell, collections::HashMap, rc::Rc};
 use wgui::{
-    assets::AssetPath,
+    assets::AssetPathRef,
     components::{
         button::ComponentButton, checkbox::ComponentCheckbox, radio_group::ComponentRadioGroup,
         slider::ComponentSlider,
@@ -129,9 +129,9 @@ impl<S: 'static> GuiPanel<S> {
         let doc_params = wgui::parser::ParseDocumentParams {
             globals: app.wgui_globals.clone(),
             path: if params.external_xml {
-                AssetPath::File(path)
+                AssetPathRef::File(path)
             } else {
-                AssetPath::FileOrBuiltIn(path)
+                AssetPathRef::FileOrBuiltIn(path)
             },
             extra: wgui::parser::ParseDocumentExtra {
                 on_custom_attribs: Some(on_custom_attrib_inner.clone()),
@@ -462,21 +462,21 @@ impl<S: 'static> OverlayBackend for GuiPanel<S> {
 fn log_missing_attrib(parser_state: &ParserState, tag_name: &str, attrib: &str) {
     log::warn!(
         "{:?}: <{tag_name}> is missing \"{attrib}\"",
-        parser_state.path.get_path_buf().display()
+        parser_state.xml_path.get_path().display()
     );
 }
 
 fn log_invalid_attrib(parser_state: &ParserState, tag_name: &str, attrib: &str, value: &str) {
     log::warn!(
         "{:?}: <{tag_name}> value for \"{attrib}\" is invalid: {value}",
-        parser_state.path.get_path_buf().display()
+        parser_state.xml_path.get_path().display()
     );
 }
 
 fn log_cmd_missing_arg(parser_state: &ParserState, tag_name: &str, attrib: &str, command: &str) {
     log::warn!(
         "{:?}: <{tag_name}> \"{attrib}\": \"{command}\" has missing arguments",
-        parser_state.path.get_path_buf().display()
+        parser_state.xml_path.get_path().display()
     );
 }
 
@@ -489,7 +489,7 @@ fn log_cmd_invalid_arg(
 ) {
     log::warn!(
         "{:?}: <{tag_name}> \"{attrib}\": \"{command}\" has invalid argument: {arg}",
-        parser_state.path.get_path_buf().display()
+        parser_state.xml_path.get_path().display()
     );
 }
 
@@ -521,7 +521,7 @@ pub fn apply_custom_command<T>(
             if let Ok(pair) = panel.parser_state.fetch_widget(com.state, element) {
                 let data = CustomGlyphData::from_assets(
                     &app.wgui_globals,
-                    wgui::assets::AssetPath::File(path),
+                    wgui::assets::AssetPathRef::File(path),
                 )
                 .context("Could not load content from supplied path.")?;
 

wayvr/src/gui/panel/overlay_list.rs

@@ -73,7 +73,7 @@ impl OverlayList {
                             let icon: Rc<str> = if let Some(icon) = meta.icon.as_ref() {
                                 icon.to_string().into()
                             } else {
-                                "edit/panel.svg".into()
+                                "@/edit/panel.svg".into()
                             };
 
                             params.insert_rc("icon", icon);

wayvr/src/overlays/custom.rs

@@ -1,6 +1,5 @@
-use std::{sync::Arc, time::Duration};
-
 use glam::{Affine3A, Quat, Vec3, vec3};
+use std::{sync::Arc, time::Duration};
 use wgui::globals::expand_env_vars;
 use wlx_common::{
     overlays::{BackendAttrib, BackendAttribValue},

wayvr/src/overlays/keyboard/builder.rs

@@ -16,7 +16,7 @@ use glam::{FloatExt, Mat4, Vec2, vec2, vec3};
 use smallvec::{SmallVec, smallvec};
 use wgui::{
     animation::{Animation, AnimationEasing},
-    assets::AssetPath,
+    assets::AssetPathRef,
     color::{WguiColor, WguiColorName},
     event::{self, CallbackMetadata, EventListenerKind},
     layout::{LayoutUpdateParams, WidgetID},
@@ -41,7 +41,7 @@ const PIXELS_PER_UNIT: f32 = 60.;
 fn new_doc_params(panel: &mut GuiPanel<KeyboardState>) -> ParseDocumentParams<'static> {
     ParseDocumentParams {
         globals: panel.layout.state.globals.clone(),
-        path: AssetPath::FileOrBuiltIn("gui/keyboard.xml"),
+        path: AssetPathRef::FileOrBuiltIn("gui/keyboard.xml"),
         extra: panel.doc_extra.take().unwrap_or_default(),
     }
 }

wayvr/src/overlays/screen/x11.rs

@@ -51,7 +51,7 @@ pub fn create_screen_renderer_x11pw(
         .session
         .pw_tokens
         .arc_get(display_name)
-        .map(|x| x.to_string().into());
+        .map(|x| x.clone().into());
 
     if token.is_some() {
         log::info!("Found existing Pipewire token for display {display_name}");

wayvr/src/overlays/watch.rs

@@ -1,16 +1,3 @@
-use std::time::Duration;
-
-use glam::{Affine3A, Quat, Vec3, vec3};
-use wgui::{
-    assets::AssetPath,
-    components::button::ComponentButton,
-    parser::{Fetchable, ParseDocumentParams},
-};
-use wlx_common::{
-    common::LeftRight,
-    windowing::{OverlayWindowState, Positioning},
-};
-
 use crate::{
     gui::{
         panel::{
@@ -22,9 +9,19 @@ use crate::{
     state::AppState,
     windowing::{Z_ORDER_WATCH, backend::OverlayEventData, window::OverlayWindowConfig},
 };
+use glam::{Affine3A, Quat, Vec3, vec3};
+use std::time::Duration;
+use wgui::{
+    assets::AssetPathRef,
+    components::button::ComponentButton,
+    parser::{Fetchable, ParseDocumentParams},
+};
+use wlx_common::{
+    common::LeftRight,
+    windowing::{OverlayWindowState, Positioning},
+};
 
 pub const WATCH_NAME: &str = "watch";
-
 pub const WATCH_POS: Vec3 = vec3(-0.03, -0.01, 0.125);
 pub const WATCH_ROT: Quat = Quat::from_xyzw(-0.707_106_6, 0.000_796_361_8, 0.707_106_6, 0.0);
 
@@ -50,7 +47,7 @@ pub fn create_watch(app: &mut AppState) -> anyhow::Result<OverlayWindowConfig> {
 
     let doc_params = ParseDocumentParams {
         globals: panel.layout.state.globals.clone(),
-        path: AssetPath::FileOrBuiltIn(watch_xml),
+        path: AssetPathRef::FileOrBuiltIn(watch_xml),
         extra: panel.doc_extra.take().unwrap_or_default(),
     };
 

wayvr/src/overlays/whisper.rs

@@ -378,7 +378,7 @@ pub fn create_whisper(app: &mut AppState) -> anyhow::Result<OverlayWindowConfig>
     let mut panel = GuiPanel::new_from_template(app, xml, state, params)?;
     panel.extra_attribs.insert(
         BackendAttrib::Icon,
-        BackendAttribValue::Icon("icons/mic.svg".into()),
+        BackendAttribValue::Icon("@/icons/mic.svg".into()),
     );
     let id_label_transcription = panel.parser_state.get_widget_id("transcription")?;
     panel.state.id_label_progress = panel.parser_state.get_widget_id("label_progress")?;