[minor] add no signs of life default error

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/toniq-nft-frame-mono-repo-root",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "private": true,
     "license": "MIT",
     "author": {

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/toniq-nft-frame-demo",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "private": true,
     "license": "MIT",
     "author": {

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/toniq-nft-frame-scripts",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile && npm run execute",

packages/tests/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/toniq-nft-frame-tests",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "private": true,
     "license": "MIT",
     "author": {

packages/toniq-nft-frame/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/toniq-nft-frame",
-    "version": "2.0.1",
+    "version": "2.1.0",
     "homepage": "https://github.com/Toniq-Labs/nft-frame",
     "bugs": {
         "url": "https://github.com/Toniq-Labs/nft-frame/issues"

packages/toniq-nft-frame/src/toniq-nft-frame/toniq-default-error.element.ts

@@ -0,0 +1,66 @@
+import {BioniqRobot100Icon, ToniqIcon} from '@toniq-labs/design-system';
+import {css, defineElementNoInputs, html} from 'element-vir';
+
+export const ToniqDefaultError = defineElementNoInputs({
+    tagName: 'toniq-default-error',
+    styles: css`
+        :host {
+            display: flex;
+            background-color: #f9f6fe;
+            color: #8a2be2;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            max-width: 100%;
+            max-height: 100%;
+            width: 100%;
+            height: 100%;
+            font-family: 'Inconsolata', monospace;
+            /**
+             * The size at which the image should suddenly take up the full container
+             */
+            --switch-at: 200px;
+        }
+
+        .icon-wrapper {
+            aspect-ratio: 1 / 1;
+            height: 100%;
+            max-width: 100%;
+        }
+
+        .wrapper {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            height: max(min(100%, var(--switch-at)), calc(100% - var(--switch-at)));
+        }
+
+        .description {
+            margin: 0;
+            position: absolute;
+            top: 100%;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 0 32px;
+        }
+
+        ${ToniqIcon} {
+            height: 100%;
+            width: 100%;
+        }
+    `,
+    renderCallback() {
+        return html`
+            <div class="wrapper">
+                <div class="icon-wrapper">
+                    <${ToniqIcon.assign({
+                        icon: BioniqRobot100Icon,
+                        fitContainer: true,
+                    })}></${ToniqIcon}>
+                </div>
+                <p class="description">This image shows no signs of life.</p>
+            </div>
+        `;
+    },
+});

packages/toniq-nft-frame/src/toniq-nft-frame/toniq-nft-frame.element.ts

@@ -18,6 +18,7 @@ import {toniqNftFrameTagName} from '../toniq-nft-frame-tag-name';
 import {Dimensions, clampDimensions, scaleToConstraints} from '../util/dimensions';
 import {MutatedClassesEnum} from './mutated-classes';
 import {shouldAllowInteraction} from './nft-interactions';
+import {ToniqDefaultError} from './toniq-default-error.element';
 import {defaultToniqNtState} from './toniq-nft-frame-state';
 
 export enum ToniqNftFrameSlotName {