@dcl-regenesislabs/bevy-explorer-web 0.1.0-18229784557.commit-ef374b9

package/assets/ui/login.dui

@@ -0,0 +1,72 @@
+<!-- login dialog
+- @allow-reuse: bool
+- @reuse, @connect, @guest, @quit: On::<Click> functions
+-->
+<define-template id="login">
+    <fullscreen-block>
+        <bounds 
+            style="
+                flex-direction: column;
+                height: 80%;
+                max-height: 80%;
+                width: 80%;
+                max-width: 80vmin;
+                overflow-x: hidden;
+                overflow-y: hidden;
+                align-items: center;
+                justify-content: space-around;
+                padding: 4vmin;
+            "   
+            corner-size="4vmin"
+            blend-size="0.25vmin"
+            border-size="2vmin"
+            border-color="#1C298aff"
+            color="#aa1fc166"
+        >
+            <large-text style="margin: 2.8vmin; text-align: center; color: black;">Bevy Explorer</large-text>
+            <div style="align-self: center; height: 100%; min-height: 1%, background-color: #00ff00;"><div image="images/dcl-godot-bevy.png" /></div>
+            <small-text style="text-align: center; color: black;">Powered by</small-text>
+            <div image="images/dao_small.png" style="width: 28vmin; height: 4.2vmin; align-self: center;" />
+            <button id="reuse" label="Reuse Last Login" onclick="@reuse" enabled="@allow-reuse" />
+            <button id="connect" label="Connect External Wallet" onclick="@connect" />
+            <button id="guest" label="Play as Guest" onclick="@guest" />
+            <button id="quit" label="Quit" onclick="@quit" />
+        </bounds>
+    </fullscreen-block>
+</define-template>
+
+<!-- cancel login dialog
+- @buttons: Vec<Button>
+-->
+<define-template id="cancel-login">
+    <dialog title="Waiting for Signature" buttons="@buttons">
+        <div style="flex-direction: column; align-items: center;">
+            <div style="flex-direction: column; width: 100%;">
+                <med-text style="
+                    color: black;
+                    text-align: center;
+                    margin: 2.8vmin;
+                    "
+                    text="Please follow the instructions in your browser to connect your wallet to your Decentraland account"
+                />
+                <div style="flex-direction: row;">
+                    <med-text style="
+                        color: black;
+                        text-align: center;
+                        margin: 2.8vmin;
+                        "
+                        text="Connection code: "
+                    />
+                    <large-text style="
+                        color: black;
+                        text-align: center;
+                        margin: 2.8vmin;
+                        "
+                        text="@code"
+                    />
+                </div>
+            </div>
+            <spinner />
+        </div>
+    </dialog>
+</define-template>

package/assets/ui/map.dui

@@ -0,0 +1,8 @@
+<define-template id="map">
+    <div style="width: 100%; height: 100%; background-color: #1a1a1a;">
+        <div style="width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; border-color: red; border: 0px;" z-index="-1">
+            <div id="map-node" style="flex-grow: 1; overflow-x: hidden; overflow-y: hidden;">
+            </div>
+        </div>
+    </div>
+</define-template>

package/assets/ui/minimap.dui

@@ -0,0 +1,16 @@
+<define-template id="minimap">
+    <bounds 
+        style="flex-direction: column; left: 1vmin; top: 1vmin; width: 25vmin; overflow-x: hidden;"
+        corner-size="2vmin"
+        blend-size="0.25vmin"
+        border-size="1vmin"
+        border-color="#1C298aff"
+        color="#aa1fc166"
+    >
+        <div id="map-container" style="width: 100%; aspect-ratio: 1; overflow-x: hidden; overflow-y: hidden;" z-index="-1">
+            <bounds id="map-node" style="flex-grow: 1; overflow-x: hidden; overflow-y: hidden;" corner-size="2vmin" blend-size="0.5vmin" border-size="1vmin" border-color="#00000000"/>
+        </div>
+        <med-text id="title" style="left: 1vmin; margin: 1vmin;" text="" />
+        <med-text id="position" style="left: 1vmin; margin: 1vmin 1vmin 2vmin 1vmin;" text="" />
+    </bounds>
+</define-template>

package/assets/ui/motd.dui

@@ -0,0 +1,25 @@
+<define-template id="motd">
+    <dialog title="Bevy Explorer" buttons="@buttons">
+        <div style="flex-direction: column; align-items: center; justify-content: center; margin: 4vmin;">
+            <large-text text="Warning" />
+            <div style="flex-direction: column; align-items: center;">
+                <med-text text="Bevy Explorer is in early development. Please have fun and report any issues on " />
+                <div>
+                    <med-link label="github" color="#8888ff" href="https://github.com/decentraland/bevy-explorer/issues" />
+                    <med-text text=" or " />
+                    <med-link label="discord" color="#8888ff" href="https://discord.gg/ZmqVKQm2" />
+                </div>
+            </div>
+            <hr />
+            <div style="flex-direction: column;">
+                <med-text text="Latest Updates (2025-01-27)" />
+                <hr-thin />
+                <med-text text="• TextureCameras that can render to texture for display in-world or in ui" />
+                <med-text text="• Imposters for distant scenes" />
+                <med-text text="• mouse Drag events and additional pointer information" />
+                <med-text text="• Friends and social service features" />
+            </div>
+        </div>
+    </dialog>
+</define-template>
+

package/assets/ui/nft-dialog.dui

@@ -0,0 +1,29 @@
+<define-template id="nft-dialog">
+    <dialog title="@title" buttons="@buttons">
+        <vscroll>
+            <div style="width: 35vw; height: 35vw;">
+                <bounds style="width: 100%; height: 100%;"
+                    corner-size="1vmin"
+                    blend-size="0.25vmin"
+                    border-size="0.5vmin"
+                    border-color="#000000"
+                >
+                    <bounded style="width: 100%;" bound-image="@img" />
+                </bounds>
+            </div>
+            <div style="flex-direction: column; max-width: 30vw; margin: 2vmin;">
+                <hr />
+                <div style="flex-direction: column;">
+                    <med-text text="Creator: " />
+                    <med-text text="@creator" />
+                </div>
+                <hr />
+                <div style="flex-direction: column;">
+                    <med-text text="Description: " />
+                    <med-text text="@description" />
+                </div>
+                <hr />
+            </div>
+        </vscroll>
+    </dialog>
+</define-template>

package/assets/ui/oow.dui

@@ -0,0 +1,41 @@
+<define-template id="out-of-world">
+    <div focus="block" style="
+        position-type: absolute;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        background-color: #000000ee;
+    ">
+        <bounds 
+            style="
+                flex-direction: column;
+                height: 80%;
+                max-height: 80%;
+                width: 80%;
+                max-width: 80vmin;
+                overflow-x: hidden;
+                overflow-y: hidden;
+                align-items: center;
+                justify-content: space-around;
+                padding: 4vmin;
+            "   
+            corner-size="4vmin"
+            blend-size="0.25vmin"
+            border-size="2vmin"
+            border-color="#1C298aff"
+            color="#aa1fc166"
+        >
+            <div style="flex-direction: column; align-items: center;">
+                <med-text text="Loading " />
+                <large-text text="@title" id="title" />
+            </div>
+            <div>
+                <med-text text="waiting for ... " />
+                <med-text text="@load-state" id="load-state" />
+            </div>
+            <hr />
+            <button label="Change Realm" onclick="@cancel" />
+        </bounds>
+    </div>
+</define-template>

package/assets/ui/permissions-dialog.dui

@@ -0,0 +1,39 @@
+<define-template id="permission-dialog-wrapper">
+    <fullscreen-block>
+        <bounds 
+            style="
+                flex-direction: column;
+                overflow-x: hidden;
+                overflow-y: hidden;
+                align-items: center;
+                padding: 4vmin;
+                max-width: 90%;
+                max-height: 80%;
+            "
+            corner-size="4vmin"
+            blend-size="0.25vmin"
+            border-size="2vmin"
+            border-color="#1C298aff"
+            color="#aa1fc166"
+        >
+            <large-text style="margin: 2vmin; text-align: center; color: white;" text="@title" />
+            <hr />
+            <apply-children />
+            <hr />
+            <div style="width: 100%">
+                <space />
+                <div style="flex-direction: column">
+                    <button-set buttons="@buttons" />
+                    <combo-box options="@options" selected="0" onchanged="@option-changed" />
+                </div>
+                <button-set buttons="@buttons2" />
+            </div>
+        </bounds>
+    </fullscreen-block>
+</define-template>
+
+<define-template id="permission-text-dialog">
+    <permission-dialog-wrapper title="@title" buttons="@buttons" buttons2="@buttons2" options="@options" option-changed="@option-changed">
+        <med-text text="@body" />
+    </permission-dialog-wrapper>
+</define-template>

package/assets/ui/permissions.dui

@@ -0,0 +1,54 @@
+<define-template id="permissions-tab">
+    <div style="position-type: absolute; width: 100%; height: 100%; flex-grow: 1; flex-direction: row;">
+        <div style="flex-direction: column; width: 70%; height: 100%">
+            <div id="header">
+                <div style="width: 40%" />
+                <div style="flex-direction: column; width: 20%; align-self: center; align-items: center">
+                    <med-text text="Current Scene" style="color: black;  text-align: center" />
+                    <med-text text="@scene" style="color: white;  text-align: center" wrap="true" />
+                </div>
+                <div style="flex-direction: column; width: 20%; align-self: center; align-items: center">
+                    <med-text text="Current Realm" style="color: black; text-align: center" />
+                    <med-text text="@realm" style="color: white; text-align: center" wrap="true" />
+                </div>
+                <div style="flex-direction: column; width: 20%; align-self: center; align-items: center">
+                    <med-text style="color: black; text-align: center" text="Global" />
+                </div>
+            </div>
+            <hr />
+            <vscroll id="scrollable">
+                <div id="permissions-box" style="width: 100%; flex-direction: column; margin: 0px 2vmin 0px 0px;" />
+            </vscroll>
+        </div>
+        <div style="width: 30%; height: 100%; flex-direction: column;">
+            <hr />
+            <large-text text="Permission Info" />
+            <hr-thin />
+            <vscroll>
+                <div style="margin: 1vmin">
+                    <med-text text="Hover a permission to show a description" id="permission-description" style="color: black" />
+                </div>
+            </vscroll>
+        </div>
+    </div>
+</define-template>
+
+<define-template id="permission">
+    <div style="flex-direction: column; width: 100%;">
+        <div>
+            <div style="flex-direction: column; width: 40%; align-items: flex-end; justify-content: center;">
+                <med-text style="color: black; text-align: right;" text = "@permission-name" />
+            </div>
+            <div style="width: 20%; align-items: center; justify-content: center;">
+                <button image-width="5vmin" image-height="5vmin" img="@scene-image" onclick="@scene-click" enabled="@scene-enabled" />
+            </div>
+            <div style="width: 20%; align-items: center; justify-content: center;">
+                <button image-width="5vmin" image-height="5vmin" img="@realm-image" onclick="@realm-click" />
+            </div>
+            <div style="width: 20%; align-items: center; justify-content: center;">
+                <button image-width="5vmin" image-height="5vmin" img="@global-image" onclick="@global-click" />
+            </div>
+        </div>
+    </div>
+    <hr-thin />
+</define-template>

package/assets/ui/profile-detail.dui

@@ -0,0 +1,24 @@
+<define-template id="profile-detail">
+    <div style="flex-direction: row; width: 100%; height: 100%">
+        <div style="flex-direction: column; flex-grow: 0; flex-shrink: 1">
+            <vscroll>
+                <tab-group id="category-tabs" style="justify-content: center; flex-direction: column" tabs="@category-tabs" onchanged="@category-changed" toggle="false" />
+            </vscroll>
+        </div>
+        <div style="flex-grow: 1;">
+            <vscroll>
+                <div id="items" style="flex-direction: column; width: 100%; min-width: 100%; padding: 1vmin">
+                    <hr />
+                </div>
+            </vscroll>
+        </div>
+    </div>
+</define-template>
+
+<define-template id="profile-detail-category">
+    <div style="flex-direction: column; width: 100%">
+        <large-text text="@label" style="color: black" />
+        <text-entry id="entry" style="background-color: #000000aa; flex-grow: 1; min-height: '@min-height'" initial-text="@initial" onchanged="@onchanged" multi-line="@multi-line" />
+        <hr />
+    </div>
+</define-template>

package/assets/ui/profile.dui

@@ -0,0 +1,29 @@
+<define-template id="settings">
+    <div 
+        style="
+            position-type: absolute;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+            background-color: #aa1fc1ff;
+            align-items: center;
+        "
+        focus="block"
+    >
+        <div id="title-bar" style="width: 100%; height: auto;" z-index="100">
+            <button label-name="change-realm-button" label="@realm" onclick="@change-realm" />
+            <space />
+            <tab-group id="title-pages" tabs="@title-tabs" onchanged="@title-onchanged" initial="@title-initial" edge-scale="1px 1px -0px 1px" />
+            <space />
+            <div id="wallet">
+                <button id="connect-wallet-button" label="Connect wallet" onclick="@connect-wallet" />
+                <button img="images/redx.png" onclick="@close-settings" image-width="4.4vmin" image-height="4.4vmin" />
+            </div>
+        </div>
+        <hr-thin />
+        <div style="width: 100%; flex-grow: 1;">
+            <div id="settings-content" />
+        </div>
+    </div>
+</define-template>
+

package/assets/ui/spinner.dui

@@ -0,0 +1,3 @@
+<define-template id="spinner-base">
+    <div id="spinner" style="width: 4.7vmin; height: 4.7vmin; margin: 4.7vmin;" />
+</define-template>

package/assets/ui/toast.dui

@@ -0,0 +1,27 @@
+<define-template id="toaster">
+    <div style="position-type: absolute; left: 20%; right: 20%; top: 10%; max-width: 60%" z-index="11048578">
+        <space />
+        <div id="inner" style="flex-direction: column; justify-content: center;" />
+        <space />
+    </div>
+</define-template>
+
+<define-template id="toast">
+    <div>
+        <space />
+        <bounds 
+            style="
+                align-items: center;
+                padding: 0.75vmin 1.5vmin 0.75vmin 1.5vmin;
+            "
+            corner-size="2vmin"
+            blend-size="0.25vmin"
+            border-size="2vmin"
+            border-color="#1C298aff"
+            color="#aa1fc166"
+        >
+            <med-text text="@toast" />
+        </bounds>
+        <space />
+    </div>
+</define-template>

package/assets/ui/tracker.dui

@@ -0,0 +1,21 @@
+<define-template id="tracker">
+    <div style="flex-direction: column; width: 100%;">
+        <div style="flex-direction: row; width: 100%; align-content: space-between:">
+            <med-text id="stats" style="left: 1vmin; margin: 1vmin;" text="Scene Stats" />
+            <space />
+            <!-- <button img="images/redx.png" onclick="@toggle" image-width="3.5vmin" image-height="3.5vmin" /> -->
+        </div>
+        <div id="content" style="flex-direction: column; margin: 0px 2vmin 2vmin 2vmin;" />
+        <button label="Inspect" onclick="@inspect" enabled="@inspect-enabled" />
+    </div>
+</define-template>
+
+<define-template id="tracker-item">
+    <div style="flex-direction: column">
+        <div style="flex-direction: row">
+            <div style="align-content: center; max-width: 70%; width: 70%;"><small-text text="@label" /></div>
+            <div style="align-content: center; max-width: 30%; width: 30%; align-items: flex-end; justify-content: flex-end"><small-text text="@value" /></div>
+        </div>
+        <hr-thin />
+    </div>
+</define-template>

package/assets/ui/update.dui

@@ -0,0 +1,16 @@
+<define-template id="update-available">
+    <dialog title="Update Available" buttons="@buttons">
+        <div style="flex-direction: column; align-items: center; justify-content: center; margin: 4vmin; min-height: 0px;">
+            <vscroll>
+                <div style="flex-direction: column;">
+                    <med-text text="@body" />
+                </div>
+            </vscroll>
+            <hr />
+            <div>
+                <med-link label="Download" color="#8888ff" href="@download" />
+            </div>
+        </div>
+    </dialog>
+</define-template>
+

package/assets/ui/utils.dui

@@ -0,0 +1,40 @@
+<!-- add some space -->
+<define-template id="space">
+    <div style="flex-grow: 1;" />
+</define-template>
+
+<!-- horizontal rule -->
+<define-template id="hr">
+    <div style="width: 100%; height: 2.8vmin; min-height: 2.8vmin; border: 1.1vmin 0vmin 1.1vmin 0vmin;">
+        <div style="width: 100%; height: 100%; background-color: #00000044;" />
+    </div>
+</define-template>
+
+<!-- horizontal rule -->
+<define-template id="hr-thin">
+    <div style="width: 100%; height: 0.6vmin; min-height: 0.6vmin;">
+        <div style="width: 100%; height: 100%; background-color: #00000044;" />
+    </div>
+</define-template>
+
+<!-- horizontal rule -->
+<define-template id="vr">
+    <div style="height: 100%; width: 2.8vmin; min-width: 2.8vmin; border: 0 vmin 1.1vmin 0vmin 1.1vmin;">
+        <div style="width: 100%; height: 100%; background-color: #00000044;" />
+    </div>
+</define-template>
+
+<!-- horizontal rule -->
+<define-template id="vr-thin">
+    <div style="height: 100%; width: 0.6vmin; min-width: 0.6vmin;">
+        <div style="width: 100%; height: 100%; background-color: #00000044;" />
+    </div>
+</define-template>
+
+<!-- base for <link> -->
+<define-template id="link-base">
+    <div style="flex-direction: column">
+        <med-text id="label" text="@label" color="@color" />
+        <div id="line" style="width: 100%; height: 0.1vmin; flex-grow: 1" image="images/line.png" />
+    </div>
+</define-template>

package/assets/ui/wearables.dui

@@ -0,0 +1,134 @@
+<define-template id="wearables">
+    <div style="width: 100%; flex-grow: 1; flex-direction: row;">
+        <div id="background" style="position-type: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%; background-color: #cccccc;" image="images/backpack/Background.jpeg" />
+        <div style="position-type: absolute; left: -20%, width: 70%; min-width: 70%; max-width: 70%; height: 100%;">
+            <photobooth booth-instance="@booth-instance" />
+            <!-- <div style="width: 100%; height: 100%; background-color: white; flex-grow: 1;" /> -->
+        </div>
+        <div style="position-type: absolute; width: 70%; left: 30%; height: 100%; flex-grow: 1; flex-direction: column; background-color: #00000066;">
+            <!-- wearables tool bar -->
+            <div id="tools" style="width: 100%;">
+                <div style="align-items: center; flex-direction: column; width: 25%; flex-grow: 1; margin: 1vmin;">
+                    <med-text style="align-self: center;" text="show only collectibles" />
+                    <div style="width: 6.2vmin; height: 2.8vmin;"><toggle ontoggle="@only-collectibles" toggled="@only-collectibles-set" /></div>
+                </div>
+                <div style="align-items: center; flex-direction: column; width: 25%; flex-grow: 1; margin: 1vmin;">
+                    <med-text style="align-self: center;" text="collection" />
+                    <combo-box id="collections" style="align-self: center; height: 3vmin; width: 100%; background-color: #00000055;" empty-text="choose a collection" options="@collections" selected="@initial-collection" allow-null="true" disabled="true" />
+                </div>
+                <space />
+                <div style="align-items: center; flex-direction: column; width: 25%; flex-grow: 1; margin: 1vmin;">
+                    <med-text style="align-self: center;" text="sort by" />
+                    <combo-box style="align-self: center; height: 3vmin; width: 100%; background-color: #00000055;" options="@sort-by" selected="@initial-sort-by" onchanged="@sort-by-changed" allow-null="false" disabled="false" />
+                </div>
+                <div style="align-items: center; flex-direction: column; width: 25%; flex-grow: 1; margin: 1vmin;">
+                    <med-text style="align-self: center;" text="filter" />
+                    <text-entry style="align-self: center; height: 3vmin; width: 100%; background-color: #00000055;" hint-text="(type to filter)" initial-text="@initial-filter" onchanged="@filter-changed" />
+                </div>
+    
+            </div>
+            <hr-thin />
+            <!-- body -->
+            <div style="width: 100%; max-width: 100%; height: 10%; flex-grow: 1; flex-direction: row;">
+                <!-- categories -->
+                <div style="width: 30%; height: 100%; max-width: 30%;">
+                    <vscroll>
+                        <tab-group id="category-tabs" style="justify-content: center; flex-direction: row; flex-wrap: wrap" tabs="@category-tabs" onchanged="@category-changed" initial="@initial-category" toggle="true" />
+                    </vscroll>
+                </div>
+                <!-- content -->
+                <div style="width: 70%; flex-grow: 1;">
+                    <div style="width: 100%; height: 100%; flex-direction: column">
+                        <!-- items -->
+                        <div style="width: 100%; height: 70%">
+                            <vscroll>
+                                <div id="items" style="width: 100%; flex-wrap: wrap;"/>
+                            </vscroll>
+                        </div>
+                        <hr />
+                        <!-- selected -->
+                        <div id="selected-item" style="width: 100%; height: 30%;" /> 
+                    </div>
+                </div>
+            </div>
+            <!-- buttons -->
+            <!-- <div style="width: 100%; background-color: #0000ff44;">
+                <space />
+                <button-set buttons="@buttons" />
+            </div> -->
+        </div>
+    </div>
+</define-template>
+
+<define-template id="wearable-category">
+    <div style="width: 100%; height: 100%; flex-direction: row; border: 1vmin;">
+        <div style="width: 6vmin; height: 6vmin; min-width: 6vmin; min-height: 6vmin; ">
+            <div image="@category-img" />
+        </div>
+        <div style="width: 6vmin; height: 6vmin; min-width: 6vmin; min-height: 6vmin">
+            <nineslice id="button-background" slice-image="images/button.png" slice-border="37.5%" slice-color="#aaaaff" />
+            <div id="item-image" image="@wearable-img" />
+        </div>
+    </div>
+</define-template>
+
+<define-template id="wearable-items">
+    <tab-group style="justify-content: center; flex-direction: row; flex-wrap: wrap" tabs="@tabs" onchanged="@onchanged" initial="@initial" />
+</define-template>
+
+<define-template id="wearable-item">
+    <div style="width: 14vmin; height: 14vmin; min-width: 14vmin; min-height: 14vmin; padding: 0.2vmin; ">
+        <div id="rarity" style="position-type: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%;" image-color="@rarity-color" image="images/backpack/item_bg.png" />
+        <div image="@img" image-color="@img-color" />
+    </div>
+</define-template>
+
+<define-template id="wearable-item-pending">
+    <div style="width: 14vmin; height: 14vmin; min-width: 14vmin; min-height: 14vmin; margin: 0.6vmin;">
+        <div id="background" style="position-type: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%;" image="images/backpack/item_bg.png" />
+        <spinner />
+    </div>
+</define-template>
+
+<define-template id="wearable-selection">
+    <div style="width: 100%; height: 100%; flex-grow: 1;" interact="true" focus="block">
+        <div style="margin: 0.5vmin; position-type: absolute; top: -1vmin; right: 1vmin; left: 1vmin; bottom: 1vmin;"> 
+            <nineslice slice-image="images/button.png" slice-border="37.5%" slice-color="#bbbbbb" />
+            <div style="flex-direction: row; flex-grow: 1; margin: 2vmin; ">
+                <div style="height: 100%; max-width: 10vmin; aspect-ratio: 1;">
+                    <div style="position-type: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; width: 100%; height: 100%;" image-color="@rarity-color" image="images/backpack/item_bg.png" />
+                    <div image="@selection-image" />
+                </div>
+                <div style="flex-direction: column; height: 100%; flex-grow: 1;">
+                    <vscroll>
+                        <div style="flex-direction: column; flex-grow: 1;">
+                            <div style="flex-direction: column; width: 100%; height: auto; margin: 0vmin 1vmin 1vmin 1vmin; flex-grow: 1;">
+                                <large-text style="color: black; margin: 0vmin 1vmin 1vmin 1vmin;" text="@title" />
+                            </div>
+                            <div style="width: 100%; height: auto; margin: 1vmin; flex-grow: 1;">
+                                <med-text style="color: black; flex-grow: 1; width: 100%; margin: 1vmin;" text="@body" />
+                            </div>
+                            <div style="flex-direction: row; margin: 1vmin; align-items: center;">
+                                <med-text style="color: black;" text=" Hides: " />
+                                <div id="hides" style="flex-direction: row; flex-wrap: wrap;" />
+                            </div>
+                        </div>
+                    </vscroll>
+                </div>
+                <div style="flex-direction: column; align-items: center;">
+                    <button label="@label" onclick="@onclick" enabled="@enabled" />
+                    <div style="display: '@color-picker-display'; flex-direction: column; margin: 2vmin">
+                        <med-text style="color: black;" text="Color" />
+                        <color-picker style="display: '@color-picker-display';" color="@color" onchanged="@color-changed" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</define-template>
+
+<define-template id="wearable-hides">
+    <div style="width: 5vmin; aspect-ratio: 1;">
+        <div image="@img" style="background-color: black" />
+    </div>
+</define-template>