From 3f29f1a82dcd54f8230ff51a1cc83917538c14bf Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sat, 24 Feb 2024 19:21:14 +0400
Subject: [PATCH 01/38] WIP: rounded rectangle

---
 src/core/layers/rectangle.layer.ts | 16 ++++++-
 src/draw/draw-context.ts           | 76 ++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+), 1 deletion(-)

diff --git a/src/core/layers/rectangle.layer.ts b/src/core/layers/rectangle.layer.ts
index de4884d3..f34173a9 100644
--- a/src/core/layers/rectangle.layer.ts
+++ b/src/core/layers/rectangle.layer.ts
@@ -7,6 +7,7 @@ type TRectangleState = TLayerState & {
     p: number[]; // position [x, y]
     s: number[]; // size [w, h]
     f: boolean; // fill
+    r: number; // radius
 };
 
 export class RectangleLayer extends AbstractLayer {
@@ -36,6 +37,7 @@ export class RectangleLayer extends AbstractLayer {
     public position: Point = new Point();
     public size: Point = new Point();
     public fill: boolean = false;
+    public radius: number = 0;
 
     modifiers: TLayerModifiers = {
         x: {
@@ -79,6 +81,16 @@ export class RectangleLayer extends AbstractLayer {
             },
             type: TModifierType.number
         },
+        radius: {
+            getValue: () => this.radius,
+            setValue: (v: number) => {
+                this.radius = v;
+                this.updateBounds();
+                this.saveState();
+                this.draw();
+            },
+            type: TModifierType.number
+        },
         fill: {
             getValue: () => this.fill,
             setValue: (v: boolean) => {
@@ -221,13 +233,14 @@ export class RectangleLayer extends AbstractLayer {
         dc.clear();
         dc.ctx.fillStyle = this.color;
         dc.ctx.strokeStyle = this.color;
-        dc.rect(position, size, this.fill);
+        dc.pixelateRoundedRect(position, size, this.radius, this.fill);
     }
 
     saveState() {
         const state: TRectangleState = {
             p: this.position.xy,
             s: this.size.xy,
+            r: this.radius,
             n: this.name,
             i: this.index,
             g: this.group,
@@ -243,6 +256,7 @@ export class RectangleLayer extends AbstractLayer {
     loadState(state: TRectangleState) {
         this.position = new Point(state.p);
         this.size = new Point(state.s);
+        this.radius = state.r ?? 0;
         this.name = state.n;
         this.index = state.i;
         this.group = state.g;
diff --git a/src/draw/draw-context.ts b/src/draw/draw-context.ts
index 795ba242..9fc9e4a3 100644
--- a/src/draw/draw-context.ts
+++ b/src/draw/draw-context.ts
@@ -134,6 +134,82 @@ export class DrawContext {
         return this;
     }
 
+    pixelateCircleSection(
+        center: Point,
+        radius: number,
+        startAngle: number,
+        endAngle: number,
+        fill: boolean
+    ): DrawContext {
+        // arc pixelated
+        const xStart = center.x + radius * Math.cos(startAngle);
+        const yStart = center.y + radius * Math.sin(startAngle);
+        const xEnd = center.x + radius * Math.cos(endAngle);
+        const yEnd = center.y + radius * Math.sin(endAngle);
+        const xCenter = center.x;
+        const yCenter = center.y;
+        // this.pixelateLine(center, new Point(xStart, yStart), 1);
+        // this.pixelateLine(center, new Point(xEnd, yEnd), 1);
+        this.ctx.beginPath();
+        this.ctx.arc(xCenter, yCenter, radius, startAngle, endAngle);
+        if (fill) {
+            this.ctx.fill();
+        }
+        this.ctx.stroke();
+        this.ctx.closePath();
+        return this;
+    }
+
+    pixelateRoundedRect(position: Point, size: Point, radius: number, fill: boolean): DrawContext {
+        // using pixelateCircleSection
+        const topLeft = position.clone();
+        const topRight = position.clone().add(new Point(size.x, 0));
+        const bottomRight = position.clone().add(size);
+        const bottomLeft = position.clone().add(new Point(0, size.y));
+        this.pixelateCircleSection(
+            topLeft.clone().add(new Point(radius, radius)),
+            radius,
+            Math.PI,
+            Math.PI * 1.5,
+            fill
+        );
+        this.pixelateCircleSection(
+            topRight.clone().add(new Point(-radius, radius)),
+            radius,
+            Math.PI * 1.5,
+            Math.PI * 2,
+            fill
+        );
+        this.pixelateCircleSection(
+            bottomRight.clone().add(new Point(-radius, -radius)),
+            radius,
+            0,
+            Math.PI * 0.5,
+            fill
+        );
+        this.pixelateCircleSection(
+            bottomLeft.clone().add(new Point(radius, -radius)),
+            radius,
+            Math.PI * 0.5,
+            Math.PI,
+            fill
+        );
+        this.pixelateLine(topLeft.clone().add(new Point(radius, 0)), topRight.clone().add(new Point(-radius, 0)), 1);
+        this.pixelateLine(
+            topRight.clone().add(new Point(-1, radius)),
+            bottomRight.clone().add(new Point(-1, -radius)),
+            1
+        );
+        this.pixelateLine(
+            bottomRight.clone().add(new Point(-radius, -1)),
+            bottomLeft.clone().add(new Point(radius, -1)),
+            1
+        );
+        this.pixelateLine(bottomLeft.clone().add(new Point(0, -radius)), topLeft.clone().add(new Point(0, radius)), 1);
+
+        return this;
+    }
+
     pixelateEllipse(center: Point, radiusX: number, radiusY: number, fill: boolean): DrawContext {
         this.ctx.beginPath();
         for (let n = 0; n < radiusX; n++) {

From 2e8316d635f5ec44c124728ec905d76551f822c8 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Tue, 2 Apr 2024 15:15:14 +0400
Subject: [PATCH 02/38] Drawing method for rounded rect

---
 src/core/layers/rectangle.layer.ts |   2 +-
 src/draw/draw-context.ts           | 149 ++++++++++++++---------------
 2 files changed, 74 insertions(+), 77 deletions(-)

diff --git a/src/core/layers/rectangle.layer.ts b/src/core/layers/rectangle.layer.ts
index f34173a9..0521b660 100644
--- a/src/core/layers/rectangle.layer.ts
+++ b/src/core/layers/rectangle.layer.ts
@@ -84,7 +84,7 @@ export class RectangleLayer extends AbstractLayer {
         radius: {
             getValue: () => this.radius,
             setValue: (v: number) => {
-                this.radius = v;
+                this.radius = Math.min(v, Math.round(this.size.x / 2), Math.round(this.size.y / 2));
                 this.updateBounds();
                 this.saveState();
                 this.draw();
diff --git a/src/draw/draw-context.ts b/src/draw/draw-context.ts
index 9fc9e4a3..5169cb8c 100644
--- a/src/draw/draw-context.ts
+++ b/src/draw/draw-context.ts
@@ -122,91 +122,88 @@ export class DrawContext {
             }
         }
         this.ctx.fill();
-        if (!fill) {
-            this.ctx.save();
-            this.ctx.fillStyle = 'rgba(0,0,0,0)';
-            this.ctx.beginPath();
-            this.ctx.arc(center.x + 0.5, center.y + 0.5, radius + 0.5, 0, 2 * Math.PI);
-            this.ctx.fill();
-            this.ctx.restore();
-        }
         this.ctx.closePath();
         return this;
     }
 
-    pixelateCircleSection(
-        center: Point,
-        radius: number,
-        startAngle: number,
-        endAngle: number,
-        fill: boolean
-    ): DrawContext {
-        // arc pixelated
-        const xStart = center.x + radius * Math.cos(startAngle);
-        const yStart = center.y + radius * Math.sin(startAngle);
-        const xEnd = center.x + radius * Math.cos(endAngle);
-        const yEnd = center.y + radius * Math.sin(endAngle);
-        const xCenter = center.x;
-        const yCenter = center.y;
-        // this.pixelateLine(center, new Point(xStart, yStart), 1);
-        // this.pixelateLine(center, new Point(xEnd, yEnd), 1);
-        this.ctx.beginPath();
-        this.ctx.arc(xCenter, yCenter, radius, startAngle, endAngle);
-        if (fill) {
-            this.ctx.fill();
+    // draw pixelated corner with corner point, radius, and fill in quadrant
+    pixelateRectCorner(point: Point, radius: number, quadrant: number, fill: boolean): DrawContext {
+        const radiusPoint = new Point(radius);
+        switch (quadrant) {
+            case 1:
+                radiusPoint.multiply(-1, 1);
+                break;
+            case 2:
+                radiusPoint.multiply(-1, -1);
+                break;
+            case 3:
+                radiusPoint.multiply(1, -1);
+                break;
+        }
+        const center = point.clone().add(radiusPoint);
+        for (let n = 0; n < radius; n++) {
+            const x = n;
+            let y = Math.ceil(Math.sqrt(radius * radius - x * x));
+            const p1 = center.clone();
+            const p2 = center.clone();
+            const r = new Point(radius);
+            switch (quadrant) {
+                case 0:
+                    p1.add(-x, -y);
+                    p2.add(-y, -x);
+                    r.subtract(p2.x - point.x - 1, radius);
+                    break;
+                case 1:
+                    p1.add(x, -y);
+                    p2.add(y, -x);
+                    r.subtract(point.x - p2.x - 1, radius);
+                    break;
+                case 2:
+                    p1.add(x, y);
+                    p2.add(y, x);
+                    r.subtract(point.x - p2.x, radius).multiply(-1);
+                    break;
+                case 3:
+                    p1.add(-x, y);
+                    p2.add(-y, x);
+                    r.subtract(p2.x - point.x, radius).multiply(-1);
+                    break;
+            }
+            this.ctx.rect(p1.x, p1.y, 1, 1);
+            this.ctx.rect(p2.x, p2.y, 1, 1);
+            if (fill) {
+                this.ctx.rect(p1.x, p1.y, 1, r.x);
+                this.ctx.rect(p2.x, p2.y, r.y, 1);
+            }
         }
-        this.ctx.stroke();
-        this.ctx.closePath();
         return this;
     }
 
     pixelateRoundedRect(position: Point, size: Point, radius: number, fill: boolean): DrawContext {
-        // using pixelateCircleSection
-        const topLeft = position.clone();
-        const topRight = position.clone().add(new Point(size.x, 0));
-        const bottomRight = position.clone().add(size);
-        const bottomLeft = position.clone().add(new Point(0, size.y));
-        this.pixelateCircleSection(
-            topLeft.clone().add(new Point(radius, radius)),
-            radius,
-            Math.PI,
-            Math.PI * 1.5,
-            fill
-        );
-        this.pixelateCircleSection(
-            topRight.clone().add(new Point(-radius, radius)),
-            radius,
-            Math.PI * 1.5,
-            Math.PI * 2,
-            fill
-        );
-        this.pixelateCircleSection(
-            bottomRight.clone().add(new Point(-radius, -radius)),
-            radius,
-            0,
-            Math.PI * 0.5,
-            fill
-        );
-        this.pixelateCircleSection(
-            bottomLeft.clone().add(new Point(radius, -radius)),
-            radius,
-            Math.PI * 0.5,
-            Math.PI,
-            fill
-        );
-        this.pixelateLine(topLeft.clone().add(new Point(radius, 0)), topRight.clone().add(new Point(-radius, 0)), 1);
-        this.pixelateLine(
-            topRight.clone().add(new Point(-1, radius)),
-            bottomRight.clone().add(new Point(-1, -radius)),
-            1
-        );
-        this.pixelateLine(
-            bottomRight.clone().add(new Point(-radius, -1)),
-            bottomLeft.clone().add(new Point(radius, -1)),
-            1
-        );
-        this.pixelateLine(bottomLeft.clone().add(new Point(0, -radius)), topLeft.clone().add(new Point(0, radius)), 1);
-
+        this.ctx.beginPath();
+        if (fill) {
+            this.ctx.rect(position.x + radius, position.y, size.x - 2 * radius, size.y);
+            this.ctx.rect(position.x, position.y + radius, size.x, size.y - 2 * radius);
+        } else {
+            this.ctx.rect(position.x + radius, position.y, size.x - 2 * radius, 1);
+            this.ctx.rect(position.x + radius, position.y + size.y - 1, size.x - 2 * radius, 1);
+            this.ctx.rect(position.x, position.y + radius, 1, size.y - 2 * radius);
+            this.ctx.rect(position.x + size.x - 1, position.y + radius, 1, size.y - 2 * radius);
+        }
+        this.ctx.fill();
+        this.ctx.closePath();
+        this.ctx.beginPath();
+        this.pixelateRectCorner(position, radius, 0, fill);
+        this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y), radius, 1, fill);
+        this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y + size.y - 1), radius, 2, fill);
+        this.pixelateRectCorner(new Point(position.x, position.y + size.y - 1), radius, 3, fill);
+        this.ctx.fill();
+        this.ctx.save();
+        this.ctx.fillStyle = 'rgba(0,0,0,0)';
+        this.ctx.beginPath();
+        this.ctx.rect(position.x, position.y, size.x, size.y);
+        this.ctx.fill();
+        this.ctx.restore();
         return this;
     }
 

From a5b5dbbd3120790e35c961c45b3295f452f213e8 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Fri, 5 Apr 2024 00:23:13 +0400
Subject: [PATCH 03/38] Fix runded rect draw

---
 src/core/layers/rectangle.layer.ts |  2 +-
 src/core/point.ts                  |  9 ++++
 src/draw/draw-context.ts           | 84 ++++++++----------------------
 3 files changed, 32 insertions(+), 63 deletions(-)

diff --git a/src/core/layers/rectangle.layer.ts b/src/core/layers/rectangle.layer.ts
index 694ec895..2776017f 100644
--- a/src/core/layers/rectangle.layer.ts
+++ b/src/core/layers/rectangle.layer.ts
@@ -62,7 +62,7 @@ export class RectangleLayer extends AbstractLayer {
         radius: {
             getValue: () => this.radius,
             setValue: (v: number) => {
-                this.radius = Math.min(v, Math.round(this.size.x / 2), Math.round(this.size.y / 2));
+                this.radius = Math.max(0, Math.min(v, Math.round(this.size.x / 2), Math.round(this.size.y / 2)));
                 this.draw();
             },
             type: TModifierType.number
diff --git a/src/core/point.ts b/src/core/point.ts
index 02280ae8..4c25cb08 100644
--- a/src/core/point.ts
+++ b/src/core/point.ts
@@ -176,6 +176,15 @@ export class Point {
         this[y] = Math.ceil(this[y]);
         return this;
     }
+    swap(): Point {
+        const t = this[x];
+        this[x] = this[y];
+        this[y] = t;
+        return this;
+    }
+    sign(): [number, number] {
+        return [Math.sign(this[x]), Math.sign(this[y])];
+    }
     distanceTo(p: Point): number {
         return Math.hypot(this.x - p.x, this.y - p.y);
     }
diff --git a/src/draw/draw-context.ts b/src/draw/draw-context.ts
index 5169cb8c..0ae953c6 100644
--- a/src/draw/draw-context.ts
+++ b/src/draw/draw-context.ts
@@ -126,78 +126,38 @@ export class DrawContext {
         return this;
     }
 
-    // draw pixelated corner with corner point, radius, and fill in quadrant
     pixelateRectCorner(point: Point, radius: number, quadrant: number, fill: boolean): DrawContext {
-        const radiusPoint = new Point(radius);
-        switch (quadrant) {
-            case 1:
-                radiusPoint.multiply(-1, 1);
-                break;
-            case 2:
-                radiusPoint.multiply(-1, -1);
-                break;
-            case 3:
-                radiusPoint.multiply(1, -1);
-                break;
-        }
-        const center = point.clone().add(radiusPoint);
-        for (let n = 0; n < radius; n++) {
-            const x = n;
-            let y = Math.ceil(Math.sqrt(radius * radius - x * x));
-            const p1 = center.clone();
-            const p2 = center.clone();
-            const r = new Point(radius);
-            switch (quadrant) {
-                case 0:
-                    p1.add(-x, -y);
-                    p2.add(-y, -x);
-                    r.subtract(p2.x - point.x - 1, radius);
-                    break;
-                case 1:
-                    p1.add(x, -y);
-                    p2.add(y, -x);
-                    r.subtract(point.x - p2.x - 1, radius);
-                    break;
-                case 2:
-                    p1.add(x, y);
-                    p2.add(y, x);
-                    r.subtract(point.x - p2.x, radius).multiply(-1);
-                    break;
-                case 3:
-                    p1.add(-x, y);
-                    p2.add(-y, x);
-                    r.subtract(p2.x - point.x, radius).multiply(-1);
-                    break;
-            }
-            this.ctx.rect(p1.x, p1.y, 1, 1);
-            this.ctx.rect(p2.x, p2.y, 1, 1);
-            if (fill) {
-                this.ctx.rect(p1.x, p1.y, 1, r.x);
-                this.ctx.rect(p2.x, p2.y, r.y, 1);
-            }
+        const signs = new Point(quadrant == 0 || quadrant == 3 ? 1 : -1, quadrant == 0 || quadrant == 1 ? 1 : -1);
+        const center = point.clone().add(new Point(radius).multiply(signs));
+        this.ctx.beginPath();
+        for (let x = 0; x < radius; x++) {
+            let y = Math.sqrt(radius * radius - x * x);
+            let p = center.clone().subtract(new Point(x, y).multiply(signs)).round();
+            this.ctx.rect(p.x, p.y, 1, 1);
+            fill && this.ctx.fillRect(p.x, p.y, 1, signs.y * (radius - Math.abs(p.y - point.y)));
+            p = center.clone().subtract(new Point(y, x).multiply(signs)).round();
+            this.ctx.rect(p.x, p.y, 1, 1);
         }
+        this.ctx.fill();
         return this;
     }
 
     pixelateRoundedRect(position: Point, size: Point, radius: number, fill: boolean): DrawContext {
         this.ctx.beginPath();
+
+        this.ctx.rect(position.x + radius, position.y, size.x - 2 * radius, 1);
+        this.ctx.rect(position.x + radius, position.y + size.y - 1, size.x - 2 * radius, 1);
+        this.ctx.rect(position.x, position.y + radius, 1, size.y - 2 * radius);
+        this.ctx.rect(position.x + size.x - 1, position.y + radius, 1, size.y - 2 * radius);
         if (fill) {
-            this.ctx.rect(position.x + radius, position.y, size.x - 2 * radius, size.y);
-            this.ctx.rect(position.x, position.y + radius, size.x, size.y - 2 * radius);
-        } else {
-            this.ctx.rect(position.x + radius, position.y, size.x - 2 * radius, 1);
-            this.ctx.rect(position.x + radius, position.y + size.y - 1, size.x - 2 * radius, 1);
-            this.ctx.rect(position.x, position.y + radius, 1, size.y - 2 * radius);
-            this.ctx.rect(position.x + size.x - 1, position.y + radius, 1, size.y - 2 * radius);
+            this.ctx.fillRect(position.x + radius, position.y, size.x - 2 * radius, size.y);
+            this.ctx.fillRect(position.x, position.y + radius, size.x, size.y - 2 * radius);
         }
         this.ctx.fill();
-        this.ctx.closePath();
-        this.ctx.beginPath();
-        this.pixelateRectCorner(position, radius, 0, fill);
-        this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y), radius, 1, fill);
-        this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y + size.y - 1), radius, 2, fill);
-        this.pixelateRectCorner(new Point(position.x, position.y + size.y - 1), radius, 3, fill);
-        this.ctx.fill();
+        this.pixelateRectCorner(position, radius + 1, 0, fill);
+        this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y), radius + 1, 1, fill);
+        this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y + size.y - 1), radius + 1, 2, fill);
+        this.pixelateRectCorner(new Point(position.x, position.y + size.y - 1), radius + 1, 3, fill);
         this.ctx.save();
         this.ctx.fillStyle = 'rgba(0,0,0,0)';
         this.ctx.beginPath();

From 0c0e82e1e10a399fab97f72b68b32296cb7d79d9 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Fri, 5 Apr 2024 13:08:23 +0400
Subject: [PATCH 04/38] code generation for rounded rect

---
 src/platforms/templates/adafruit/default.pug  | 4 ++--
 src/platforms/templates/adafruit/inkplate.pug | 4 ++--
 src/platforms/templates/flipper/default.pug   | 4 ++--
 src/platforms/templates/u8g2/c_esp_idf.pug    | 4 ++--
 src/platforms/templates/u8g2/default.pug      | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/platforms/templates/adafruit/default.pug b/src/platforms/templates/adafruit/default.pug
index ae9ce604..efafd4f3 100644
--- a/src/platforms/templates/adafruit/default.pug
+++ b/src/platforms/templates/adafruit/default.pug
@@ -19,8 +19,8 @@ each layer in layers
         when 'line'
             | @!{layer.uid};!{pad}display.drawLine(!{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]}, !{packColor(layer.color)});
         when 'rect'
-            - var func = layer.fill ? 'fillRect' : 'drawRect'
-            | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}, !{packColor(layer.color)});
+            - var func = (layer.fill ? 'fill' : 'draw') + (layer.radius? 'Round' : '') + 'Rect'
+            | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''}, !{packColor(layer.color)});
         when 'circle'
             - var func = layer.fill ? 'fillCircle' : 'drawCircle'
             | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius}, !{packColor(layer.color)});
diff --git a/src/platforms/templates/adafruit/inkplate.pug b/src/platforms/templates/adafruit/inkplate.pug
index ae9ce604..efafd4f3 100644
--- a/src/platforms/templates/adafruit/inkplate.pug
+++ b/src/platforms/templates/adafruit/inkplate.pug
@@ -19,8 +19,8 @@ each layer in layers
         when 'line'
             | @!{layer.uid};!{pad}display.drawLine(!{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]}, !{packColor(layer.color)});
         when 'rect'
-            - var func = layer.fill ? 'fillRect' : 'drawRect'
-            | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}, !{packColor(layer.color)});
+            - var func = (layer.fill ? 'fill' : 'draw') + (layer.radius? 'Round' : '') + 'Rect'
+            | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''}, !{packColor(layer.color)});
         when 'circle'
             - var func = layer.fill ? 'fillCircle' : 'drawCircle'
             | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius}, !{packColor(layer.color)});
diff --git a/src/platforms/templates/flipper/default.pug b/src/platforms/templates/flipper/default.pug
index 2b1a970d..6cd49279 100644
--- a/src/platforms/templates/flipper/default.pug
+++ b/src/platforms/templates/flipper/default.pug
@@ -17,8 +17,8 @@ each layer in layers
         when 'line'
             | @!{layer.uid};canvas_draw_line(canvas, !{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]});
         when 'rect'
-            - var func = layer.fill ? 'canvas_draw_box' : 'canvas_draw_frame'
-            | @!{layer.uid};!{func}(canvas, !{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]});
+            - var func = `canvas_draw_${layer.radius? 'r_': ''}${layer.fill ? 'box' : 'frame'}`;
+            | @!{layer.uid};!{func}(canvas, !{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''});
         when 'circle'
             - var func = layer.fill ? 'canvas_draw_disc' : 'canvas_draw_circle'
             | @!{layer.uid};!{func}(canvas, !{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius});
diff --git a/src/platforms/templates/u8g2/c_esp_idf.pug b/src/platforms/templates/u8g2/c_esp_idf.pug
index 65b163fd..508a7d79 100644
--- a/src/platforms/templates/u8g2/c_esp_idf.pug
+++ b/src/platforms/templates/u8g2/c_esp_idf.pug
@@ -32,8 +32,8 @@ each layer in layers
         when 'line'
             | @!{layer.uid};!{pad}u8g2_DrawLine(&u8g2, !{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]});
         when 'rect'
-            - var func = layer.fill ? 'DrawBox' : 'DrawFrame'
-            | @!{layer.uid};!{pad}u8g2_!{func}(&u8g2, !{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]});
+            - var func = 'Draw' + (layer.radius? 'R': '') + (layer.fill ? 'Box' : 'Frame')
+            | @!{layer.uid};!{pad}u8g2_!{func}(&u8g2, !{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''});
         when 'circle'
             - var func = layer.fill ? 'DrawDisc' : 'DrawCircle'
             | @!{layer.uid};!{pad}u8g2_!{func}(&u8g2, !{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius});
diff --git a/src/platforms/templates/u8g2/default.pug b/src/platforms/templates/u8g2/default.pug
index f6f302dd..ac00b8bb 100644
--- a/src/platforms/templates/u8g2/default.pug
+++ b/src/platforms/templates/u8g2/default.pug
@@ -32,8 +32,8 @@ each layer in layers
         when 'line'
             | @!{layer.uid};!{pad}u8g2.drawLine(@x1:!{layer.p1[0]}, @y1:!{layer.p1[1]}, @x2:!{layer.p2[0]}, @y2:!{layer.p2[1]});
         when 'rect'
-            - var func = layer.fill ? 'drawBox' : 'drawFrame'
-            | @!{layer.uid};!{pad}u8g2.!{func}(@x:!{layer.position[0]}, @y:!{layer.position[1]}, @w:!{layer.size[0]}, @h:!{layer.size[1]});
+            - var func = 'draw' + (layer.radius? 'R': '') + (layer.fill ? 'Box' : 'Frame')
+            | @!{layer.uid};!{pad}u8g2.!{func}(@x:!{layer.position[0]}, @y:!{layer.position[1]}, @w:!{layer.size[0]}, @h:!{layer.size[1]}!{layer.radius? `, @r:${layer.radius}`: ''});
         when 'circle'
             - var func = layer.fill ? 'drawDisc' : 'drawCircle'
             | @!{layer.uid};!{pad}u8g2.!{func}(@x:!{layer.position[0] + layer.radius}, @y:!{layer.position[1] + layer.radius}, @r:!{layer.radius});

From a33daa3b847806d533b200db2e64b667ebdb5c3c Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Fri, 5 Apr 2024 13:11:26 +0400
Subject: [PATCH 05/38] Tests

---
 .../__snapshots__/adafruit.test.ts.snap       |  2 ++
 .../__snapshots__/adafruit_mono.test.ts.snap  |  2 ++
 .../__snapshots__/flipper.test.ts.snap        |  2 ++
 .../__snapshots__/inkplate.test.ts.snap       |  2 ++
 src/platforms/__snapshots__/u8g2.test.ts.snap |  6 +++++
 src/platforms/layers.mock.ts                  | 22 +++++++++++++++++++
 6 files changed, 36 insertions(+)

diff --git a/src/platforms/__snapshots__/adafruit.test.ts.snap b/src/platforms/__snapshots__/adafruit.test.ts.snap
index 3a5f2a46..070a9768 100644
--- a/src/platforms/__snapshots__/adafruit.test.ts.snap
+++ b/src/platforms/__snapshots__/adafruit.test.ts.snap
@@ -24,5 +24,7 @@ display.setCursor(3, 10);
 // Unknown layer type ellipse
 
 @rrsjcz4oz2ln6jx4y4;display.drawBitmap(0, 0, image_paint_0_bits, 128, 64, 0xF800);
+@njsoidnfijoinisn;display.fillRoundRect(10, 4, 12, 19, 3, 0x7E0);
+@jnijisniijaojosd;display.drawRoundRect(45, 20, 14, 12, 5, 0x7E0);
 "
 `;
diff --git a/src/platforms/__snapshots__/adafruit_mono.test.ts.snap b/src/platforms/__snapshots__/adafruit_mono.test.ts.snap
index b9a3aac0..867fabd3 100644
--- a/src/platforms/__snapshots__/adafruit_mono.test.ts.snap
+++ b/src/platforms/__snapshots__/adafruit_mono.test.ts.snap
@@ -24,5 +24,7 @@ display.setCursor(3, 10);
 // Unknown layer type ellipse
 
 @rrsjcz4oz2ln6jx4y4;display.drawBitmap(0, 0, image_paint_0_bits, 128, 64, 1);
+@njsoidnfijoinisn;display.fillRoundRect(10, 4, 12, 19, 3, 1);
+@jnijisniijaojosd;display.drawRoundRect(45, 20, 14, 12, 5, 1);
 "
 `;
diff --git a/src/platforms/__snapshots__/flipper.test.ts.snap b/src/platforms/__snapshots__/flipper.test.ts.snap
index 775b101e..8f1113ce 100644
--- a/src/platforms/__snapshots__/flipper.test.ts.snap
+++ b/src/platforms/__snapshots__/flipper.test.ts.snap
@@ -22,5 +22,7 @@ canvas_set_font(canvas, profont22);
 // Unknown layer type ellipse
 
 @rrsjcz4oz2ln6jx4y4;canvas_draw_xbm(canvas, 0, 0, 128, 64, image_1_bits);
+@njsoidnfijoinisn;canvas_draw_r_box(canvas, 10, 4, 12, 19, 3);
+@jnijisniijaojosd;canvas_draw_r_frame(canvas, 45, 20, 14, 12, 5);
 "
 `;
diff --git a/src/platforms/__snapshots__/inkplate.test.ts.snap b/src/platforms/__snapshots__/inkplate.test.ts.snap
index 5d6f5b6c..ea3b13cc 100644
--- a/src/platforms/__snapshots__/inkplate.test.ts.snap
+++ b/src/platforms/__snapshots__/inkplate.test.ts.snap
@@ -24,5 +24,7 @@ display.setCursor(3, 10);
 // Unknown layer type ellipse
 
 @rrsjcz4oz2ln6jx4y4;display.drawBitmap(0, 0, image_paint_0_bits, 128, 64, 0);
+@njsoidnfijoinisn;display.fillRoundRect(10, 4, 12, 19, 3, 0);
+@jnijisniijaojosd;display.drawRoundRect(45, 20, 14, 12, 5, 0);
 "
 `;
diff --git a/src/platforms/__snapshots__/u8g2.test.ts.snap b/src/platforms/__snapshots__/u8g2.test.ts.snap
index ae9300b2..84b7b99f 100644
--- a/src/platforms/__snapshots__/u8g2.test.ts.snap
+++ b/src/platforms/__snapshots__/u8g2.test.ts.snap
@@ -20,6 +20,8 @@ u8g2.setFont(u8g2_font_profont22_tr);
 @g7pk1wfbqqkln6jwxby;u8g2.drawFrame(@x:44, @y:29, @w:44, @h:28);
 @u9uidj9d90fu9sj9jj9;u8g2.drawEllipse(@x:15, @y:36, @rx:7, @ry:7);
 @rrsjcz4oz2ln6jx4y4;u8g2.drawXBM(@x:0, @y:0, @w:128, @h:64, @image:image_paint_0_bits);
+@njsoidnfijoinisn;u8g2.drawRBox(@x:10, @y:4, @w:12, @h:19, @r:3);
+@jnijisniijaojosd;u8g2.drawRFrame(@x:45, @y:20, @w:14, @h:12, @r:5);
 u8g2.sendBuffer();"
 `;
 
@@ -43,6 +45,8 @@ u8g2_SetFont(&u8g2, u8g2_font_profont22_tr);
 @g7pk1wfbqqkln6jwxby;u8g2_DrawFrame(&u8g2, 44, 29, 44, 28);
 @u9uidj9d90fu9sj9jj9;u8g2_DrawEllipse(&u8g2, 15, 36, 7, 7);
 @rrsjcz4oz2ln6jx4y4;u8g2_DrawXBM(&u8g2, 0, 0, 128, 64, image_paint_0_bits);
+@njsoidnfijoinisn;u8g2_DrawRBox(&u8g2, 10, 4, 12, 19, 3);
+@jnijisniijaojosd;u8g2_DrawRFrame(&u8g2, 45, 20, 14, 12, 5);
 u8g2_SendBuffer(&u8g2); "
 `;
 
@@ -66,5 +70,7 @@ u8g2.setFont(u8g2_font_profont22_tr);
 @g7pk1wfbqqkln6jwxby;u8g2.drawFrame(@x:44, @y:29, @w:44, @h:28);
 @u9uidj9d90fu9sj9jj9;u8g2.drawEllipse(@x:15, @y:36, @rx:7, @ry:7);
 @rrsjcz4oz2ln6jx4y4;u8g2.drawXBM(@x:0, @y:0, @w:128, @h:64, @image:image_paint_0_bits);
+@njsoidnfijoinisn;u8g2.drawRBox(@x:10, @y:4, @w:12, @h:19, @r:3);
+@jnijisniijaojosd;u8g2.drawRFrame(@x:45, @y:20, @w:14, @h:12, @r:5);
 u8g2.sendBuffer();"
 `;
diff --git a/src/platforms/layers.mock.ts b/src/platforms/layers.mock.ts
index d9fa954f..29ca9628 100644
--- a/src/platforms/layers.mock.ts
+++ b/src/platforms/layers.mock.ts
@@ -158,6 +158,28 @@ export const layersMock: AbstractLayer[] = [
         rx: 7,
         ry: 7,
         f: false
+    },
+    {
+        n: 'box_njsoidnfijoinisn',
+        t: 'rect',
+        c: '#00FF00',
+        r: 3,
+        f: true,
+        i: 15,
+        p: [10, 4],
+        u: 'njsoidnfijoinisn',
+        s: [12, 19]
+    },
+    {
+        n: 'box_jnijisniijaojosd',
+        t: 'rect',
+        c: '#00FF00',
+        r: 5,
+        f: false,
+        i: 16,
+        p: [45, 20],
+        u: 'jnijisniijaojosd',
+        s: [14, 12]
     }
 ].map((l) => {
     const type: ELayerType = l.t as any;

From 5225ee6a27bf2e66aeb6ae2c9a83f750eec4c21d Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Fri, 5 Apr 2024 14:16:16 +0400
Subject: [PATCH 06/38] Fixed image dnd

---
 src/core/layers/icon.layer.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/core/layers/icon.layer.ts b/src/core/layers/icon.layer.ts
index f91138b0..e8ca5c35 100644
--- a/src/core/layers/icon.layer.ts
+++ b/src/core/layers/icon.layer.ts
@@ -39,13 +39,15 @@ export class IconLayer extends AbstractImageLayer {
             setValue: (v: HTMLImageElement) => {
                 this.imageName = v.dataset.name;
                 const [w, h] = [Number(v.dataset.w), Number(v.dataset.h)];
+                if (w && h) {
+                    this.size = new Point(w, h);
+                }
                 const buf = document.createElement('canvas');
                 const ctx = buf.getContext('2d');
-                buf.width = w;
-                buf.height = h;
+                buf.width = this.size.x;
+                buf.height = this.size.y;
                 ctx.drawImage(v, 0, 0);
-                this.data = addAlphaChannelToImageData(ctx.getImageData(0, 0, w, h), this.color);
-                this.size = new Point(w, h);
+                this.data = addAlphaChannelToImageData(ctx.getImageData(0, 0, this.size.x, this.size.y), this.color);
                 this.updateBounds();
                 this.applyColor();
                 this.draw();

From 2cf5634323bed0da52faded54f5f4e7d2213f821 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Thu, 18 Apr 2024 20:45:31 +0400
Subject: [PATCH 07/38] Fixed rectangle resizing

---
 src/core/layers/rectangle.layer.ts | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/core/layers/rectangle.layer.ts b/src/core/layers/rectangle.layer.ts
index 2776017f..f83e52b0 100644
--- a/src/core/layers/rectangle.layer.ts
+++ b/src/core/layers/rectangle.layer.ts
@@ -26,7 +26,6 @@ export class RectangleLayer extends AbstractLayer {
             getValue: () => this.position.x,
             setValue: (v: number) => {
                 this.position.x = v;
-
                 this.updateBounds();
                 this.draw();
             },
@@ -44,7 +43,7 @@ export class RectangleLayer extends AbstractLayer {
         w: {
             getValue: () => this.size.x,
             setValue: (v: number) => {
-                this.size.x = v;
+                this.size.x = Math.max(v, 1);
                 this.updateBounds();
                 this.draw();
             },
@@ -53,7 +52,7 @@ export class RectangleLayer extends AbstractLayer {
         h: {
             getValue: () => this.size.y,
             setValue: (v: number) => {
-                this.size.y = v;
+                this.size.y = Math.max(v, 1);
                 this.updateBounds();
                 this.draw();
             },
@@ -106,7 +105,9 @@ export class RectangleLayer extends AbstractLayer {
                 ),
             move: (offset: Point): void => {
                 this.position = this.editState.position.clone().subtract(0, offset.y);
-                this.size = new Point(this.editState.size.x - offset.x, this.editState.size.y + offset.y);
+                this.size = new Point(this.editState.size.x - offset.x, this.editState.size.y + offset.y).max(
+                    new Point(1)
+                );
             }
         },
         {
@@ -117,7 +118,10 @@ export class RectangleLayer extends AbstractLayer {
                     new Point(3)
                 ).subtract(1.5, 1.5, 0, 0),
             move: (offset: Point): void => {
-                this.size = this.editState.size.clone().subtract(offset);
+                this.size = this.editState.size
+                    .clone()
+                    .subtract(offset)
+                    .max(new Point(this.radius * 2));
             }
         },
         {
@@ -131,7 +135,10 @@ export class RectangleLayer extends AbstractLayer {
                 ),
             move: (offset: Point): void => {
                 this.position = this.editState.position.clone().subtract(offset.x, 0);
-                this.size = this.editState.size.clone().add(offset.x, -offset.y);
+                this.size = this.editState.size
+                    .clone()
+                    .add(offset.x, -offset.y)
+                    .max(new Point(this.radius * 2));
             }
         },
         {
@@ -140,7 +147,10 @@ export class RectangleLayer extends AbstractLayer {
                 new Rect(new Point(this.bounds.x, this.bounds.y), new Point(3)).subtract(1.5, 1.5, 0, 0),
             move: (offset: Point): void => {
                 this.position = this.editState.position.clone().subtract(offset);
-                this.size = this.editState.size.clone().add(offset);
+                this.size = this.editState.size
+                    .clone()
+                    .add(offset)
+                    .max(new Point(this.radius * 2));
             }
         }
     ];

From dff6a38809b94b8676550eaf459156008a74ea63 Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <m@ilin.pt>
Date: Thu, 18 Apr 2024 20:37:32 +0100
Subject: [PATCH 08/38] Add TFT_eSPI platform, minor fix for adafruit code
 template

---
 src/core/platforms.ts                         |  4 +-
 src/core/session.ts                           |  2 -
 src/editor/tools/circle.tool.ts               |  3 +-
 src/editor/tools/ellipse.tool.ts              |  3 +-
 .../__snapshots__/tft-espi.test.ts.snap       | 21 ++++++
 src/platforms/templates/adafruit/default.pug  | 12 +--
 src/platforms/templates/adafruit/inkplate.pug | 12 +--
 src/platforms/templates/tft-espi/default.pug  | 55 ++++++++++++++
 src/platforms/tft-espi.test.ts                | 10 +++
 src/platforms/tft-espi.ts                     | 73 +++++++++++++++++++
 10 files changed, 178 insertions(+), 17 deletions(-)
 create mode 100644 src/platforms/__snapshots__/tft-espi.test.ts.snap
 create mode 100644 src/platforms/templates/tft-espi/default.pug
 create mode 100644 src/platforms/tft-espi.test.ts
 create mode 100644 src/platforms/tft-espi.ts

diff --git a/src/core/platforms.ts b/src/core/platforms.ts
index 1a864981..4239fe53 100644
--- a/src/core/platforms.ts
+++ b/src/core/platforms.ts
@@ -2,6 +2,7 @@ import {AdafruitPlatform} from '../platforms/adafruit';
 import {AdafruitMonochromePlatform} from '../platforms/adafruit_mono';
 import {FlipperPlatform} from '../platforms/flipper';
 import {InkplatePlatform} from '../platforms/inkplate';
+import { TFTeSPIPlatform } from "../platforms/tft-espi";
 import {U8g2Platform} from '../platforms/u8g2';
 import {Uint32RawPlatform} from '../platforms/uint32-raw';
 
@@ -9,9 +10,10 @@ const platforms = {
     [U8g2Platform.id]: new U8g2Platform(),
     [AdafruitPlatform.id]: new AdafruitPlatform(),
     [AdafruitMonochromePlatform.id]: new AdafruitMonochromePlatform(),
+    [TFTeSPIPlatform.id]: new TFTeSPIPlatform(),
     [Uint32RawPlatform.id]: new Uint32RawPlatform(),
     [FlipperPlatform.id]: new FlipperPlatform(),
-    [InkplatePlatform.id]: new InkplatePlatform()
+    [InkplatePlatform.id]: new InkplatePlatform(),
 };
 
 export function getTemplates(platform: string): string[] {
diff --git a/src/core/session.ts b/src/core/session.ts
index 6f1fec44..8bbe64a8 100644
--- a/src/core/session.ts
+++ b/src/core/session.ts
@@ -320,8 +320,6 @@ export function saveLayers() {
     } else {
         localStorage.setItem(`${session.state.platform}_lopaka_layers`, packedSession);
     }
-    console.log('Saved session size', packedSession.length, 'bytes');
-    console.log('Saved session', packedSession);
 }
 
 export function useSession(id?: string) {
diff --git a/src/editor/tools/circle.tool.ts b/src/editor/tools/circle.tool.ts
index c02c48be..bfbafa9c 100644
--- a/src/editor/tools/circle.tool.ts
+++ b/src/editor/tools/circle.tool.ts
@@ -1,5 +1,6 @@
 import {AbstractLayer} from '../../core/layers/abstract.layer';
 import {CircleLayer} from '../../core/layers/circle.layer';
+import { TFTeSPIPlatform } from "../../platforms/tft-espi";
 import {U8g2Platform} from '../../platforms/u8g2';
 import {Uint32RawPlatform} from '../../platforms/uint32-raw';
 import {AbstractTool} from './abstract.tool';
@@ -13,6 +14,6 @@ export class CircleTool extends AbstractTool {
     }
 
     isSupported(platform: string): boolean {
-        return platform !== U8g2Platform.id && platform !== Uint32RawPlatform.id;
+        return ![U8g2Platform.id, Uint32RawPlatform.id, TFTeSPIPlatform.id].includes(platform);
     }
 }
diff --git a/src/editor/tools/ellipse.tool.ts b/src/editor/tools/ellipse.tool.ts
index 73864e2a..6b62b955 100644
--- a/src/editor/tools/ellipse.tool.ts
+++ b/src/editor/tools/ellipse.tool.ts
@@ -1,5 +1,6 @@
 import {AbstractLayer} from '../../core/layers/abstract.layer';
 import {EllipseLayer} from '../../core/layers/ellipse.layer';
+import { TFTeSPIPlatform } from "../../platforms/tft-espi";
 import {U8g2Platform} from '../../platforms/u8g2';
 import {Uint32RawPlatform} from '../../platforms/uint32-raw';
 import {AbstractTool} from './abstract.tool';
@@ -13,6 +14,6 @@ export class EllipseTool extends AbstractTool {
     }
 
     isSupported(platform: string): boolean {
-        return platform === U8g2Platform.id || platform === Uint32RawPlatform.id;
+        return [U8g2Platform.id, Uint32RawPlatform.id, TFTeSPIPlatform.id].includes(platform);
     }
 }
diff --git a/src/platforms/__snapshots__/tft-espi.test.ts.snap b/src/platforms/__snapshots__/tft-espi.test.ts.snap
new file mode 100644
index 00000000..eadc8bee
--- /dev/null
+++ b/src/platforms/__snapshots__/tft-espi.test.ts.snap
@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TFT_eSPI platform > generating source code 1`] = `
+"static const unsigned char PROGMEM image_paint_0_bits[] = {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00};
+@veqtjp8jf9ln6isyfz;tft.fillRect(107, 46, 18, 15, 0xF800);
+@utlxpqvhdxnln6it5pw;tft.fillRect(97, 2, 27, 11, 0x7E0);
+@eu6bpe0xpvvln6itc2e;tft.fillRect(106, 19, 19, 18, 0x1F);
+tft.setTextColor(0x0);
+@s3m4u762qpln6jvm90;tft.drawString(\\"Text\\", 3, 10);
+@b11j6xs5t46ln6jw96h;tft.drawLine(2, 16, 68, 16, 0xFFFF);
+@6n8rac0nxpcln6jwdwr;tft.drawPixel(62, 4, 0x0);
+@ema2hee85mln6jweht;tft.drawPixel(67, 8, 0x0);
+@j1ol1lo5nkln6jwfmg;tft.drawPixel(72, 12, 0x0);
+@6uf3k6wj82ln6jwi73;tft.drawCircle(20, 41, 12, 0x1F);
+@87y8hf8sh8dhf8d98sd;tft.fillEllipse(@x:21, @y:37, @rx:13, @ry:8, 0x1F);
+@aibkefmz3cln6jwlit;tft.fillCircle(17, 43, 3, 0xF800);
+@g7pk1wfbqqkln6jwxby;tft.drawRect(44, 29, 44, 28, 0x7E0);
+@u9uidj9d90fu9sj9jj9;tft.drawEllipse(@x:15, @y:36, @rx:7, @ry:7, 0x1F);
+@rrsjcz4oz2ln6jx4y4;tft.drawBitmap(0, 0, image_paint_0_bits, 128, 64, 0xF800);
+"
+`;
diff --git a/src/platforms/templates/adafruit/default.pug b/src/platforms/templates/adafruit/default.pug
index ae9ce604..c3008c04 100644
--- a/src/platforms/templates/adafruit/default.pug
+++ b/src/platforms/templates/adafruit/default.pug
@@ -8,8 +8,8 @@ each decl in declarations
 if settings.wrap
     | void draw(void) {
     |
-- var textColor = ''
-- var textSize = ''
+- var textColor = '#ffffff'
+- var textSize = '1'
 - var textWrap = true
 - var pad = settings.wrap ? '    ' : ''
 each layer in layers 
@@ -33,10 +33,10 @@ each layer in layers
                 - textSize = layer.scaleFactor
                 | !{pad}display.setTextSize(!{layer.scaleFactor});
                 |
-            if layer.wrap != textWrap
-                - textWrap = layer.wrap
-                | !{pad}display.setTextWrap(false);
-                |
+            //- if layer.wrap != textWrap
+            //-     - textWrap = layer.wrap
+            //-     | !{pad}display.setTextWrap(false);
+            //-     |
             | !{pad}display.setCursor(!{layer.position[0]}, !{layer.position[1] - layer.bounds[3]});
             | @!{layer.uid};!{pad}display.print("!{layer.text}");
         when 'paint'
diff --git a/src/platforms/templates/adafruit/inkplate.pug b/src/platforms/templates/adafruit/inkplate.pug
index ae9ce604..7f3a63cb 100644
--- a/src/platforms/templates/adafruit/inkplate.pug
+++ b/src/platforms/templates/adafruit/inkplate.pug
@@ -8,8 +8,8 @@ each decl in declarations
 if settings.wrap
     | void draw(void) {
     |
-- var textColor = ''
-- var textSize = ''
+- var textColor = '#000000'
+- var textSize = '1'
 - var textWrap = true
 - var pad = settings.wrap ? '    ' : ''
 each layer in layers 
@@ -33,10 +33,10 @@ each layer in layers
                 - textSize = layer.scaleFactor
                 | !{pad}display.setTextSize(!{layer.scaleFactor});
                 |
-            if layer.wrap != textWrap
-                - textWrap = layer.wrap
-                | !{pad}display.setTextWrap(false);
-                |
+            //- if layer.wrap != textWrap
+            //-     - textWrap = layer.wrap
+            //-     | !{pad}display.setTextWrap(false);
+            //-     |
             | !{pad}display.setCursor(!{layer.position[0]}, !{layer.position[1] - layer.bounds[3]});
             | @!{layer.uid};!{pad}display.print("!{layer.text}");
         when 'paint'
diff --git a/src/platforms/templates/tft-espi/default.pug b/src/platforms/templates/tft-espi/default.pug
new file mode 100644
index 00000000..3c70e17d
--- /dev/null
+++ b/src/platforms/templates/tft-espi/default.pug
@@ -0,0 +1,55 @@
+each decl in declarations 
+    if decl.type == 'bitmap'
+        | static const unsigned char PROGMEM !{decl.data.name}[] = {!{decl.data.value}};
+        |
+    else 
+        | !{decl}
+        |
+if settings.wrap
+    | void draw(void) {
+    |
+- var textColor = '#ffffff'
+- var textSize = '1'
+- var textWrap = true
+- var pad = settings.wrap ? '    ' : ''
+each layer in layers 
+    case layer.type
+        when 'dot'
+            | @!{layer.uid};!{pad}tft.drawPixel(!{layer.position[0]}, !{layer.position[1]}, !{packColor(layer.color)});
+        when 'line'
+            | @!{layer.uid};!{pad}tft.drawLine(!{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]}, !{packColor(layer.color)});
+        when 'rect'
+            - var func = layer.fill ? 'fillRect' : 'drawRect'
+            | @!{layer.uid};!{pad}tft.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}, !{packColor(layer.color)});
+        when 'circle'
+            - var func = layer.fill ? 'fillCircle' : 'drawCircle'
+            | @!{layer.uid};!{pad}tft.!{func}(!{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius}, !{packColor(layer.color)});
+        when 'ellipse'
+            - var func = layer.fill ? 'fillEllipse' : 'drawEllipse'
+            | @!{layer.uid};!{pad}tft.!{func}(@x:!{layer.position[0] + layer.rx}, @y:!{layer.position[1] + layer.ry}, @rx:!{layer.rx}, @ry:!{layer.ry}, !{packColor(layer.color)});
+        when 'string'
+            if layer.color != textColor
+                - textColor = layer.color
+                | !{pad}tft.setTextColor(!{packColor(layer.color)});
+                |
+            if layer.scaleFactor != textSize
+                - textSize = layer.scaleFactor
+                | !{pad}tft.setTextSize(!{layer.scaleFactor});
+                |
+            //- if layer.wrap != textWrap
+            //-     - textWrap = layer.wrap
+            //-     | !{pad}tft.setTextWrap(false);
+            //-     |
+            | @!{layer.uid};!{pad}tft.drawString("!{layer.text}", !{layer.position[0]}, !{layer.position[1] - layer.bounds[3]});
+        when 'paint'
+        when 'icon'
+            | @!{layer.uid};!{pad}tft.drawBitmap(!{layer.position[0]}, !{layer.position[1]}, !{layer.imageName}, !{layer.size[0]}, !{layer.size[1]}, !{packColor(layer.color)});
+        default 
+            |
+            | // Unknown layer type !{layer.type}
+            |
+    |
+    |
+if settings.wrap
+    | }
+    |
\ No newline at end of file
diff --git a/src/platforms/tft-espi.test.ts b/src/platforms/tft-espi.test.ts
new file mode 100644
index 00000000..397db000
--- /dev/null
+++ b/src/platforms/tft-espi.test.ts
@@ -0,0 +1,10 @@
+import {describe, expect, it} from 'vitest';
+import {layersMock} from './layers.mock';
+import { TFTeSPIPlatform } from "./tft-espi";
+
+describe('TFT_eSPI platform', () => {
+    it('generating source code', () => {
+        const platform = new TFTeSPIPlatform();
+        expect(platform.generateSourceCode(layersMock)).toMatchSnapshot();
+    });
+});
diff --git a/src/platforms/tft-espi.ts b/src/platforms/tft-espi.ts
new file mode 100644
index 00000000..83ec225b
--- /dev/null
+++ b/src/platforms/tft-espi.ts
@@ -0,0 +1,73 @@
+import { getLayerProperties } from "../core/decorators/mapping";
+import {AbstractImageLayer} from '../core/layers/abstract-image.layer';
+import {AbstractLayer} from '../core/layers/abstract.layer';
+import {fontTypes} from '../draw/fonts/fontTypes';
+import {imgDataToXBMP, packedHexColor565, toCppVariableName} from '../utils';
+import {Platform} from './platform';
+import defaultTemplate from './templates/tft-espi/default.pug';
+
+export class TFTeSPIPlatform extends Platform {
+    public static id = 'tft-espi';
+    protected name = 'TFT_eSPI';
+    protected description = 'TFT_eSPI';
+    protected fonts: TPlatformFont[] = [fontTypes['adafruit']];
+
+    constructor() {
+        super();
+        this.features.hasCustomFontSize = true;
+        this.features.hasRGBSupport = true;
+        this.features.defaultColor = '#FFFFFF';
+    }
+
+    protected templates = {
+        Default: {
+            template: defaultTemplate,
+            settings: {
+                wrap: false
+            }
+        }
+    };
+
+    generateSourceCode(layers: AbstractLayer[], ctx?: OffscreenCanvasRenderingContext2D): string {
+        const declarations: {type: string; data: any}[] = [];
+        const xbmps = [];
+        const xbmpsNames = [];
+        const layerData = layers
+            .sort((a: AbstractLayer, b: AbstractLayer) => a.index - b.index)
+            .map((layer) => {
+                const props = getLayerProperties(layer);
+                if (layer instanceof AbstractImageLayer) {
+                    const XBMP = imgDataToXBMP(layer.data, 0, 0, layer.size.x, layer.size.y, true).join(',');
+                    if (xbmps.includes(XBMP)) {
+                        props.imageName = xbmpsNames[xbmps.indexOf(XBMP)];
+                    } else {
+                        const name = layer.imageName ? toCppVariableName(layer.imageName) : 'paint';
+                        const nameRegexp = new RegExp(`${name}_?\d*`);
+                        const countWithSameName = xbmpsNames.filter((n) => nameRegexp.test(n)).length;
+                        const varName = `image_${name + (countWithSameName || name == 'paint' ? `_${countWithSameName}` : '')}_bits`;
+                        declarations.push({
+                            type: 'bitmap',
+                            data: {
+                                name: varName,
+                                value: XBMP
+                            }
+                        });
+                        xbmps.push(XBMP);
+                        xbmpsNames.push(varName);
+                        props.imageName = varName;
+                    }
+                }
+                return props;
+            });
+        const source = this.templates[this.currentTemplate].template({
+            declarations,
+            layers: layerData,
+            settings: Object.assign({}, this.settings, this.templates[this.currentTemplate].settings),
+            packColor: (color) => this.packColor(color)
+        });
+        return source;
+    }
+    protected packColor(color: string): string {
+        return packedHexColor565(color);
+    }
+}

From 5c705096a2429a0bb9cc60ecff1d52677c3ddf9b Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <m@ilin.pt>
Date: Thu, 18 Apr 2024 20:45:08 +0100
Subject: [PATCH 09/38] Update snapshots

---
 src/platforms/__snapshots__/adafruit.test.ts.snap      | 2 --
 src/platforms/__snapshots__/adafruit_mono.test.ts.snap | 2 --
 src/platforms/__snapshots__/inkplate.test.ts.snap      | 3 ---
 3 files changed, 7 deletions(-)

diff --git a/src/platforms/__snapshots__/adafruit.test.ts.snap b/src/platforms/__snapshots__/adafruit.test.ts.snap
index 3a5f2a46..7dcd1a26 100644
--- a/src/platforms/__snapshots__/adafruit.test.ts.snap
+++ b/src/platforms/__snapshots__/adafruit.test.ts.snap
@@ -6,8 +6,6 @@ exports[`Adafruit platform > generating source code 1`] = `
 @utlxpqvhdxnln6it5pw;display.fillRect(97, 2, 27, 11, 0x7E0);
 @eu6bpe0xpvvln6itc2e;display.fillRect(106, 19, 19, 18, 0x1F);
 display.setTextColor(0x0);
-display.setTextSize(1);
-display.setTextWrap(false);
 display.setCursor(3, 10);
 @s3m4u762qpln6jvm90;display.print(\\"Text\\");
 @b11j6xs5t46ln6jw96h;display.drawLine(2, 16, 68, 16, 0xFFFF);
diff --git a/src/platforms/__snapshots__/adafruit_mono.test.ts.snap b/src/platforms/__snapshots__/adafruit_mono.test.ts.snap
index b9a3aac0..25d7d2bc 100644
--- a/src/platforms/__snapshots__/adafruit_mono.test.ts.snap
+++ b/src/platforms/__snapshots__/adafruit_mono.test.ts.snap
@@ -6,8 +6,6 @@ exports[`Adafruit monochrome platform > generating source code 1`] = `
 @utlxpqvhdxnln6it5pw;display.fillRect(97, 2, 27, 11, 1);
 @eu6bpe0xpvvln6itc2e;display.fillRect(106, 19, 19, 18, 1);
 display.setTextColor(1);
-display.setTextSize(1);
-display.setTextWrap(false);
 display.setCursor(3, 10);
 @s3m4u762qpln6jvm90;display.print(\\"Text\\");
 @b11j6xs5t46ln6jw96h;display.drawLine(2, 16, 68, 16, 1);
diff --git a/src/platforms/__snapshots__/inkplate.test.ts.snap b/src/platforms/__snapshots__/inkplate.test.ts.snap
index 5d6f5b6c..eeba2c58 100644
--- a/src/platforms/__snapshots__/inkplate.test.ts.snap
+++ b/src/platforms/__snapshots__/inkplate.test.ts.snap
@@ -5,9 +5,6 @@ exports[`Inkplate  platform > generating source code 1`] = `
 @veqtjp8jf9ln6isyfz;display.fillRect(107, 46, 18, 15, 0);
 @utlxpqvhdxnln6it5pw;display.fillRect(97, 2, 27, 11, 0);
 @eu6bpe0xpvvln6itc2e;display.fillRect(106, 19, 19, 18, 0);
-display.setTextColor(0);
-display.setTextSize(1);
-display.setTextWrap(false);
 display.setCursor(3, 10);
 @s3m4u762qpln6jvm90;display.print(\\"Text\\");
 @b11j6xs5t46ln6jw96h;display.drawLine(2, 16, 68, 16, 0);

From 7c970065811a3dfc7591d228df80e9aeb5ef31f4 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Fri, 19 Apr 2024 03:34:59 +0400
Subject: [PATCH 10/38] Fix radius limit

---
 src/core/layers/rectangle.layer.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/core/layers/rectangle.layer.ts b/src/core/layers/rectangle.layer.ts
index f83e52b0..0bb8e127 100644
--- a/src/core/layers/rectangle.layer.ts
+++ b/src/core/layers/rectangle.layer.ts
@@ -43,7 +43,7 @@ export class RectangleLayer extends AbstractLayer {
         w: {
             getValue: () => this.size.x,
             setValue: (v: number) => {
-                this.size.x = Math.max(v, 1);
+                this.size.x = Math.max(v, this.radius * 2 + 2);
                 this.updateBounds();
                 this.draw();
             },
@@ -52,7 +52,7 @@ export class RectangleLayer extends AbstractLayer {
         h: {
             getValue: () => this.size.y,
             setValue: (v: number) => {
-                this.size.y = Math.max(v, 1);
+                this.size.y = Math.max(v, this.radius * 2 + 2);
                 this.updateBounds();
                 this.draw();
             },
@@ -61,7 +61,10 @@ export class RectangleLayer extends AbstractLayer {
         radius: {
             getValue: () => this.radius,
             setValue: (v: number) => {
-                this.radius = Math.max(0, Math.min(v, Math.round(this.size.x / 2), Math.round(this.size.y / 2)));
+                this.radius = Math.max(
+                    0,
+                    Math.min(v, Math.round(this.size.x / 2 - 1), Math.round(this.size.y / 2 - 1))
+                );
                 this.draw();
             },
             type: TModifierType.number
@@ -121,7 +124,7 @@ export class RectangleLayer extends AbstractLayer {
                 this.size = this.editState.size
                     .clone()
                     .subtract(offset)
-                    .max(new Point(this.radius * 2));
+                    .max(new Point(this.radius * 2 + 2));
             }
         },
         {
@@ -138,7 +141,7 @@ export class RectangleLayer extends AbstractLayer {
                 this.size = this.editState.size
                     .clone()
                     .add(offset.x, -offset.y)
-                    .max(new Point(this.radius * 2));
+                    .max(new Point(this.radius * 2 + 2));
             }
         },
         {
@@ -150,7 +153,7 @@ export class RectangleLayer extends AbstractLayer {
                 this.size = this.editState.size
                     .clone()
                     .add(offset)
-                    .max(new Point(this.radius * 2));
+                    .max(new Point(this.radius * 2 + 2));
             }
         }
     ];

From 2e9e1cd45b80ae25d0b87ac9cdbd62ebf3b1b18a Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Mon, 6 May 2024 06:53:06 +0900
Subject: [PATCH 11/38] Fixed edititng rounded rect

---
 src/core/layers/rectangle.layer.ts | 57 +++++++++++++++++++-----------
 src/draw/draw-context.ts           | 19 +++++-----
 2 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/src/core/layers/rectangle.layer.ts b/src/core/layers/rectangle.layer.ts
index 0bb8e127..22d8e334 100644
--- a/src/core/layers/rectangle.layer.ts
+++ b/src/core/layers/rectangle.layer.ts
@@ -21,6 +21,10 @@ export class RectangleLayer extends AbstractLayer {
 
     @mapping('f') public fill: boolean = false;
 
+    get minLen(): number {
+        return this.radius * 2 + 2;
+    }
+
     modifiers: TLayerModifiers = {
         x: {
             getValue: () => this.position.x,
@@ -43,7 +47,7 @@ export class RectangleLayer extends AbstractLayer {
         w: {
             getValue: () => this.size.x,
             setValue: (v: number) => {
-                this.size.x = Math.max(v, this.radius * 2 + 2);
+                this.size.x = Math.max(v, this.minLen);
                 this.updateBounds();
                 this.draw();
             },
@@ -52,7 +56,7 @@ export class RectangleLayer extends AbstractLayer {
         h: {
             getValue: () => this.size.y,
             setValue: (v: number) => {
-                this.size.y = Math.max(v, this.radius * 2 + 2);
+                this.size.y = Math.max(v, this.minLen);
                 this.updateBounds();
                 this.draw();
             },
@@ -107,10 +111,16 @@ export class RectangleLayer extends AbstractLayer {
                     0
                 ),
             move: (offset: Point): void => {
-                this.position = this.editState.position.clone().subtract(0, offset.y);
-                this.size = new Point(this.editState.size.x - offset.x, this.editState.size.y + offset.y).max(
-                    new Point(1)
-                );
+                const size = new Point(this.editState.size.x - offset.x, this.editState.size.y + offset.y);
+                const position = this.editState.position.clone().subtract(0, offset.y);
+                if (size.x != this.size.x && size.x >= this.minLen) {
+                    this.position.x = position.x;
+                    this.size.x = size.x;
+                }
+                if (size.y != this.size.y && size.y >= this.minLen) {
+                    this.position.y = position.y;
+                    this.size.y = size.y;
+                }
             }
         },
         {
@@ -121,10 +131,7 @@ export class RectangleLayer extends AbstractLayer {
                     new Point(3)
                 ).subtract(1.5, 1.5, 0, 0),
             move: (offset: Point): void => {
-                this.size = this.editState.size
-                    .clone()
-                    .subtract(offset)
-                    .max(new Point(this.radius * 2 + 2));
+                this.size = this.editState.size.clone().subtract(offset).max(new Point(this.minLen));
             }
         },
         {
@@ -137,11 +144,16 @@ export class RectangleLayer extends AbstractLayer {
                     0
                 ),
             move: (offset: Point): void => {
-                this.position = this.editState.position.clone().subtract(offset.x, 0);
-                this.size = this.editState.size
-                    .clone()
-                    .add(offset.x, -offset.y)
-                    .max(new Point(this.radius * 2 + 2));
+                const position = this.editState.position.clone().subtract(offset.x, 0);
+                const size = this.editState.size.clone().add(offset.x, -offset.y);
+                if (size.x != this.size.x && size.x >= this.minLen) {
+                    this.position.x = position.x;
+                    this.size.x = size.x;
+                }
+                if (size.y != this.size.y && size.y >= this.minLen) {
+                    this.position.y = position.y;
+                    this.size.y = size.y;
+                }
             }
         },
         {
@@ -149,11 +161,16 @@ export class RectangleLayer extends AbstractLayer {
             getRect: (): Rect =>
                 new Rect(new Point(this.bounds.x, this.bounds.y), new Point(3)).subtract(1.5, 1.5, 0, 0),
             move: (offset: Point): void => {
-                this.position = this.editState.position.clone().subtract(offset);
-                this.size = this.editState.size
-                    .clone()
-                    .add(offset)
-                    .max(new Point(this.radius * 2 + 2));
+                const position = this.editState.position.clone().subtract(offset);
+                const size = this.editState.size.clone().add(offset);
+                if (size.x != this.size.x && size.x >= this.minLen) {
+                    this.position.x = position.x;
+                    this.size.x = size.x;
+                }
+                if (size.y != this.size.y && size.y >= this.minLen) {
+                    this.size.y = size.y;
+                    this.position.y = position.y;
+                }
             }
         }
     ];
diff --git a/src/draw/draw-context.ts b/src/draw/draw-context.ts
index 0ae953c6..33a07169 100644
--- a/src/draw/draw-context.ts
+++ b/src/draw/draw-context.ts
@@ -129,7 +129,6 @@ export class DrawContext {
     pixelateRectCorner(point: Point, radius: number, quadrant: number, fill: boolean): DrawContext {
         const signs = new Point(quadrant == 0 || quadrant == 3 ? 1 : -1, quadrant == 0 || quadrant == 1 ? 1 : -1);
         const center = point.clone().add(new Point(radius).multiply(signs));
-        this.ctx.beginPath();
         for (let x = 0; x < radius; x++) {
             let y = Math.sqrt(radius * radius - x * x);
             let p = center.clone().subtract(new Point(x, y).multiply(signs)).round();
@@ -138,13 +137,11 @@ export class DrawContext {
             p = center.clone().subtract(new Point(y, x).multiply(signs)).round();
             this.ctx.rect(p.x, p.y, 1, 1);
         }
-        this.ctx.fill();
         return this;
     }
 
     pixelateRoundedRect(position: Point, size: Point, radius: number, fill: boolean): DrawContext {
         this.ctx.beginPath();
-
         this.ctx.rect(position.x + radius, position.y, size.x - 2 * radius, 1);
         this.ctx.rect(position.x + radius, position.y + size.y - 1, size.x - 2 * radius, 1);
         this.ctx.rect(position.x, position.y + radius, 1, size.y - 2 * radius);
@@ -153,17 +150,21 @@ export class DrawContext {
             this.ctx.fillRect(position.x + radius, position.y, size.x - 2 * radius, size.y);
             this.ctx.fillRect(position.x, position.y + radius, size.x, size.y - 2 * radius);
         }
-        this.ctx.fill();
         this.pixelateRectCorner(position, radius + 1, 0, fill);
         this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y), radius + 1, 1, fill);
         this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y + size.y - 1), radius + 1, 2, fill);
         this.pixelateRectCorner(new Point(position.x, position.y + size.y - 1), radius + 1, 3, fill);
-        this.ctx.save();
-        this.ctx.fillStyle = 'rgba(0,0,0,0)';
-        this.ctx.beginPath();
-        this.ctx.rect(position.x, position.y, size.x, size.y);
         this.ctx.fill();
-        this.ctx.restore();
+        if (fill) {
+            this.ctx.save();
+            this.ctx.fillStyle = 'rgba(0,0,0,0)';
+            this.ctx.beginPath();
+            this.ctx.arc(position.x + radius, position.y + radius, radius, Math.PI, 1.5 * Math.PI);
+            this.ctx.arc(position.x + size.x - radius, position.y + radius, radius, 1.5 * Math.PI, 2 * Math.PI);
+            this.ctx.arc(position.x + size.x - radius, position.y + size.y - radius, radius, 0, 0.5 * Math.PI);
+            this.ctx.arc(position.x + radius, position.y + size.y - radius, radius, 0.5 * Math.PI, Math.PI);
+            this.ctx.fill();
+        }
         return this;
     }
 

From aa84695e25342f26da9967e6d75d34a38b4ac166 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Mon, 6 May 2024 07:14:45 +0900
Subject: [PATCH 12/38] TFT espi support

---
 src/platforms/templates/tft-espi/default.pug | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/platforms/templates/tft-espi/default.pug b/src/platforms/templates/tft-espi/default.pug
index 3c70e17d..dec81709 100644
--- a/src/platforms/templates/tft-espi/default.pug
+++ b/src/platforms/templates/tft-espi/default.pug
@@ -19,8 +19,8 @@ each layer in layers
         when 'line'
             | @!{layer.uid};!{pad}tft.drawLine(!{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]}, !{packColor(layer.color)});
         when 'rect'
-            - var func = layer.fill ? 'fillRect' : 'drawRect'
-            | @!{layer.uid};!{pad}tft.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}, !{packColor(layer.color)});
+            - var func = (layer.fill ? 'fill' : 'draw') + (layer.radius? 'Round' : '') + 'Rect'
+            | @!{layer.uid};!{pad}tft.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''}, !{packColor(layer.color)});
         when 'circle'
             - var func = layer.fill ? 'fillCircle' : 'drawCircle'
             | @!{layer.uid};!{pad}tft.!{func}(!{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius}, !{packColor(layer.color)});

From 407854e25aeaed2176c65869d5fd2fee4ea8f90f Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Mon, 6 May 2024 07:15:26 +0900
Subject: [PATCH 13/38] Snapshot update

---
 src/platforms/__snapshots__/tft-espi.test.ts.snap | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/platforms/__snapshots__/tft-espi.test.ts.snap b/src/platforms/__snapshots__/tft-espi.test.ts.snap
index eadc8bee..4f4e8130 100644
--- a/src/platforms/__snapshots__/tft-espi.test.ts.snap
+++ b/src/platforms/__snapshots__/tft-espi.test.ts.snap
@@ -17,5 +17,7 @@ tft.setTextColor(0x0);
 @g7pk1wfbqqkln6jwxby;tft.drawRect(44, 29, 44, 28, 0x7E0);
 @u9uidj9d90fu9sj9jj9;tft.drawEllipse(@x:15, @y:36, @rx:7, @ry:7, 0x1F);
 @rrsjcz4oz2ln6jx4y4;tft.drawBitmap(0, 0, image_paint_0_bits, 128, 64, 0xF800);
+@njsoidnfijoinisn;tft.fillRoundRect(10, 4, 12, 19, 3, 0x7E0);
+@jnijisniijaojosd;tft.drawRoundRect(45, 20, 14, 12, 5, 0x7E0);
 "
 `;

From bc65227000dd73fe2a4686907adc2a572df62816 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Tue, 21 May 2024 21:23:32 +0400
Subject: [PATCH 14/38] tailwind + daisyui

---
 package.json       |   4 +
 postcss.config.cjs |   6 +
 styles.css         |   7 +-
 tailwind.config.js |  42 ++++
 vite.config.ts     |   5 -
 yarn.lock          | 580 ++++++++++++++++++++++++++++++++++++++++++++-
 6 files changed, 629 insertions(+), 15 deletions(-)
 create mode 100644 postcss.config.cjs
 create mode 100644 tailwind.config.js

diff --git a/package.json b/package.json
index db0b3eec..21d1970e 100644
--- a/package.json
+++ b/package.json
@@ -32,14 +32,18 @@
     },
     "homepage": "https://github.com/sbrin/lopaka#readme",
     "devDependencies": {
+        "@tailwindcss/typography": "^0.5.13",
         "@vitejs/plugin-basic-ssl": "^1.0.1",
         "@vitejs/plugin-vue": "^4.3.4",
         "@vitest/coverage-v8": "^0.34.4",
         "@vitest/ui": "^0.34.4",
         "@vue/test-utils": "^2.4.1",
+        "autoprefixer": "^10.4.19",
+        "daisyui": "^4.11.1",
         "jsdom": "^22.1.0",
         "prettier": "^3.0.3",
         "probe-image-size": "^7.2.3",
+        "tailwindcss": "^3.4.3",
         "vite": "^4.4.9",
         "vitest": "^0.34.5"
     },
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 00000000..fe66dd61
--- /dev/null
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};
diff --git a/styles.css b/styles.css
index 394b1704..4ed78811 100644
--- a/styles.css
+++ b/styles.css
@@ -5,6 +5,11 @@
     font-style: normal;
 }
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
 :root {
     --primary-color: #ff8200;
     --secondary-color: #441f07;
@@ -33,7 +38,6 @@ body {
     visibility: hidden;
 }
 
-
 #lopaka_app {
     display: flex;
 }
@@ -44,7 +48,6 @@ body {
     align-items: center;
 }
 
-
 .title {
     margin: 0 0 8px 0;
     font-size: 32px;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..99b9fd05
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,42 @@
+const daisyui = require('daisyui');
+const typography = require('@tailwindcss/typography');
+// const tailwind_theme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    darkMode: 'class', // or 'media' or 'class'
+    theme: {
+        extend: {}
+    },
+    variants: {
+        extend: {}
+    },
+    plugins: [typography, daisyui],
+    corePlugins: {
+        preflight: false
+    },
+    daisyui: {
+        darkTheme: 'dark', // name of one of the included themes for dark mode
+        base: true, // applies background color and foreground color for root element by default
+        styled: true, // include daisyUI colors and design decisions for all components
+        utils: true, // adds responsive and modifier utility classes
+        prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+        logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+        themeRoot: ':root',
+        themes: [
+            {
+                lopaka: {
+                    primary: '#d97706',
+                    secondary: '#7dd3fc',
+                    accent: '#047857',
+                    neutral: '#1f2937',
+                    'base-100': '#111827',
+                    info: '#00c9ff',
+                    success: '#a0d100',
+                    warning: '#f59e0b',
+                    error: '#dc2626'
+                }
+            }
+        ]
+    }
+};
diff --git a/vite.config.ts b/vite.config.ts
index 46d71c09..e96021e3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,11 +19,6 @@ export default defineConfig({
             }
         }
     },
-    resolve: {
-        alias: {
-            vue: 'vue/dist/vue.esm-bundler.js'
-        }
-    },
     build: {
         assetsInlineLimit: 0,
         sourcemap: true,
diff --git a/yarn.lock b/yarn.lock
index e79d099d..3cd13bf8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
@@ -297,6 +302,15 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
 "@jridgewell/resolve-uri@^3.1.0":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
@@ -307,6 +321,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
 "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
@@ -320,6 +339,14 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@jridgewell/trace-mapping@^0.3.24":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -426,6 +453,16 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
+"@tailwindcss/typography@^0.5.13":
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.13.tgz#cd788a4fa4d0ca2506e242d512f377b22c1f7932"
+  integrity sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -708,6 +745,24 @@ ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
 asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -728,6 +783,18 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
+autoprefixer@^10.4.19:
+  version "10.4.19"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.19.tgz#ad25a856e82ee9d7898c59583c1afeb3fa65f89f"
+  integrity sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==
+  dependencies:
+    browserslist "^4.23.0"
+    caniuse-lite "^1.0.30001599"
+    fraction.js "^4.3.7"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 babel-walk@3.0.0-canary-5:
   version "3.0.0-canary-5"
   resolved "https://registry.yarnpkg.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz#f66ecd7298357aee44955f235a6ef54219104b11"
@@ -745,6 +812,11 @@ base64-arraybuffer@^1.0.2:
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
   integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
 
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -767,6 +839,23 @@ braces@^3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.23.0:
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
+  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
+  dependencies:
+    caniuse-lite "^1.0.30001587"
+    electron-to-chromium "^1.4.668"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
+
 cac@^6.7.14:
   version "6.7.14"
   resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
@@ -783,6 +872,16 @@ call-bind@^1.0.2:
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.1"
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599:
+  version "1.0.30001620"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz#78bb6f35b8fe315b96b8590597094145d0b146b4"
+  integrity sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==
+
 chai@^4.3.10:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.4.1.tgz#3603fa6eba35425b0f2ac91a009fe924106e50d1"
@@ -810,6 +909,21 @@ check-error@^1.0.3:
   dependencies:
     get-func-name "^2.0.2"
 
+chokidar@^3.5.3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -834,6 +948,11 @@ commander@^10.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
   integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -860,6 +979,13 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+copy-anything@^2.0.1:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
+  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
+  dependencies:
+    is-what "^3.14.1"
+
 cross-spawn@^7.0.0:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -869,6 +995,19 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-selector-tokenizer@^0.8:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
+  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 cssstyle@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-3.0.0.tgz#17ca9c87d26eac764bb8cfd00583cff21ce0277a"
@@ -881,6 +1020,21 @@ csstype@^3.1.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+culori@^3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
+  integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
+
+daisyui@^4.11.1:
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.11.1.tgz#9216de97107bffe2b7c6e4dfa28dbe7147e89e9d"
+  integrity sha512-obT9CUbQdW6eoHwSeT5VwaRrWlwrM4OT5qlfdJ0oQlSIEYhwnEl2+L2fwu5PioLbitwuMdYC2X8I1cyy8Pf6LQ==
+  dependencies:
+    css-selector-tokenizer "^0.8"
+    culori "^3"
+    picocolors "^1"
+    postcss-js "^4"
+
 data-urls@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-4.0.0.tgz#333a454eca6f9a5b7b0f1013ff89074c3f522dd4"
@@ -937,11 +1091,21 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 diff-sequences@^29.4.3:
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
   integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 doctypes@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
@@ -969,6 +1133,11 @@ editorconfig@^1.0.3:
     minimatch "9.0.1"
     semver "^7.5.3"
 
+electron-to-chromium@^1.4.668:
+  version "1.4.776"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.776.tgz#1580009f42f9f2ffc1b238e3d8d6e6baa7ca1682"
+  integrity sha512-s694bi3+gUzlliqxjPHpa9NRTlhzTgB34aan+pVKZmOTGy2xoZXl+8E1B8i5p5rtev3PKMK/H4asgNejC+YHNg==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -984,6 +1153,13 @@ entities@^4.4.0, entities@^4.5.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
+errno@^0.1.1:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
 es-define-property@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
@@ -1053,6 +1229,11 @@ esbuild@^0.19.3:
     "@esbuild/win32-ia32" "0.19.12"
     "@esbuild/win32-x64" "0.19.12"
 
+escalade@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+
 estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
@@ -1069,6 +1250,11 @@ fast-glob@^3.3.0:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
@@ -1088,6 +1274,13 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 flatted@^3.2.7:
   version "3.2.9"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf"
@@ -1110,6 +1303,11 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+fraction.js@^4.3.7:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1141,13 +1339,31 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@^10.3.10:
+  version "10.3.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.15.tgz#e72bc61bc3038c90605f5dd48543dc67aaf3b50d"
+  integrity sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.3.6"
+    minimatch "^9.0.1"
+    minipass "^7.0.4"
+    path-scurry "^1.11.0"
+
 glob@^10.3.3:
   version "10.3.10"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
@@ -1178,6 +1394,11 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
+graceful-fs@^4.1.2:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
@@ -1243,7 +1464,7 @@ https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
-iconv-lite@0.6.3:
+iconv-lite@0.6.3, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -1257,6 +1478,11 @@ iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -1275,6 +1501,13 @@ ini@^1.3.4:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-core-module@^2.13.0:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
@@ -1300,7 +1533,7 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-glob@^4.0.1:
+is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -1330,6 +1563,11 @@ is-regex@^1.0.3:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-what@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -1366,7 +1604,7 @@ istanbul-reports@^3.1.5:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-jackspeak@^2.3.5:
+jackspeak@^2.3.5, jackspeak@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
   integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
@@ -1375,6 +1613,11 @@ jackspeak@^2.3.5:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
+jiti@^1.21.0:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
+
 js-beautify@^1.14.9:
   version "1.14.11"
   resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.14.11.tgz#57b17e009549ac845bdc58eddf8e1862e311314e"
@@ -1432,11 +1675,53 @@ jstransformer@1.0.0:
     is-promise "^2.0.0"
     promise "^7.0.1"
 
+less@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450"
+  integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^3.1.0"
+    source-map "~0.6.0"
+
+lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lilconfig@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.1.tgz#9d8a246fa753106cfc205fd2d77042faca56e5e3"
+  integrity sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
 local-pkg@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.4.3.tgz#0ff361ab3ae7f1c19113d9bb97b98b905dbc4963"
   integrity sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -1449,6 +1734,11 @@ loupe@^2.3.6:
   dependencies:
     get-func-name "^2.0.1"
 
+lru-cache@^10.2.0:
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.2.tgz#48206bc114c1252940c41b25b41af5b545aca878"
+  integrity sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -1468,6 +1758,14 @@ magic-string@^0.30.1, magic-string@^0.30.6:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
 make-dir@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e"
@@ -1488,6 +1786,14 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+micromatch@^4.0.5:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.6.tgz#ab4e37c42726b9cd788181ba4a2a4fead8e394a3"
+  integrity sha512-Y4Ypn3oujJYxJcMacVgcs92wofTHxp9FzfDpQON4msDefoC0lb3ETvQLOdLcbhSwU1bz8HrL/1sygfBIHudrkQ==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^4.0.2"
+
 mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -1500,6 +1806,11 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
+mime@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
 minimatch@9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
@@ -1526,6 +1837,11 @@ minimatch@^9.0.1:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
   integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
 
+minipass@^7.0.4:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.1.tgz#f7f85aff59aa22f110b20e27692465cf3bf89481"
+  integrity sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==
+
 mlly@^1.2.0, mlly@^1.4.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.5.0.tgz#8428a4617d54cc083d3009030ac79739a0e5447a"
@@ -1556,6 +1872,15 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -1570,6 +1895,19 @@ needle@^2.5.2:
     iconv-lite "^0.4.4"
     sax "^1.2.4"
 
+needle@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-3.3.1.tgz#63f75aec580c2e77e209f3f324e2cdf3d29bd049"
+  integrity sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==
+  dependencies:
+    iconv-lite "^0.6.3"
+    sax "^1.2.4"
+
+node-releases@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
+  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
+
 nopt@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-7.2.0.tgz#067378c68116f602f552876194fd11f1292503d7"
@@ -1577,16 +1915,31 @@ nopt@^7.2.0:
   dependencies:
     abbrev "^2.0.0"
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
 nwsapi@^2.2.4:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
   integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
 
-object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -1606,6 +1959,11 @@ pako@^2.1.0:
   resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
   integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
 
+parse-node-version@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
 parse5@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
@@ -1636,6 +1994,14 @@ path-scurry@^1.10.1:
     lru-cache "^9.1.1 || ^10.0.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
+path-scurry@^1.11.0:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
 pathe@^1.1.0, pathe@^1.1.1, pathe@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
@@ -1646,16 +2012,41 @@ pathval@^1.1.1:
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
   integrity sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==
 
+picocolors@^1, picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
 pkg-types@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.0.3.tgz#988b42ab19254c01614d13f4f65a2cfc7880f868"
@@ -1665,6 +2056,67 @@ pkg-types@^1.0.3:
     mlly "^1.2.0"
     pathe "^1.1.0"
 
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4, postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+  dependencies:
+    postcss-selector-parser "^6.0.11"
+
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^6.0.11:
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
+  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^8.4.23:
+  version "8.4.38"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
+  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.2.0"
+
 postcss@^8.4.27, postcss@^8.4.33, postcss@^8.4.35:
   version "8.4.35"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
@@ -1709,6 +2161,11 @@ proto-list@~1.2.1:
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
   integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
 
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@@ -1837,6 +2294,20 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
@@ -1847,7 +2318,7 @@ resize-observer-polyfill@^1.5.1:
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
-resolve@^1.15.1:
+resolve@^1.1.7, resolve@^1.15.1, resolve@^1.22.2:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -1919,6 +2390,11 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
+semver@^5.6.0:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
 semver@^7.5.3:
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
@@ -1979,7 +2455,12 @@ source-map-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-source-map@^0.6.1:
+source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
+source-map@^0.6.1, source-map@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -2042,6 +2523,19 @@ strip-literal@^1.0.1:
   dependencies:
     acorn "^8.10.0"
 
+sucrase@^3.32.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
@@ -2059,6 +2553,34 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tailwindcss@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.3.tgz#be48f5283df77dfced705451319a5dffb8621519"
+  integrity sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.0"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.0"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
@@ -2068,6 +2590,20 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 tinybench@^2.5.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.6.0.tgz#1423284ee22de07c91b3752c048d2764714b341b"
@@ -2122,6 +2658,16 @@ tr46@^4.1.1:
   dependencies:
     punycode "^2.3.0"
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+tslib@^2.3.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 type-detect@^4.0.0, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
@@ -2147,6 +2693,14 @@ universalify@^0.2.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
   integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
 
+update-browserslist-db@^1.0.13:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz#f6d489ed90fb2f07d67784eb3f53d7891f736356"
+  integrity sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==
+  dependencies:
+    escalade "^3.1.2"
+    picocolors "^1.0.1"
+
 url-parse@^1.5.3:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
@@ -2155,6 +2709,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
 v8-to-istanbul@^9.1.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz#2ed7644a245cddd83d4e087b9b33b3e62dfd10ad"
@@ -2363,6 +2922,11 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^2.3.4:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.2.tgz#7a2b30f2243a5fc299e1f14ca58d475ed4bc5362"
+  integrity sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==
+
 yocto-queue@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"

From 79a956bb6d0517d6f92ac7a77e627b460eea21d0 Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <m@ilin.pt>
Date: Tue, 21 May 2024 20:06:41 +0100
Subject: [PATCH 15/38] Refactor CSS, test daisyUI

---
 index.html                       | 171 +++++++++++++++++++++++++++++++
 src/components/App.vue           |   1 -
 src/components/fui/FuiCode.vue   |  23 ++++-
 src/components/fui/FuiLayers.vue |  47 +++++++++
 styles.css                       |  84 ++-------------
 tailwind.config.js               |   9 +-
 6 files changed, 252 insertions(+), 83 deletions(-)

diff --git a/index.html b/index.html
index 4b01c653..a76f0cdd 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,177 @@
     </head>
 
     <body>
+        <div class="font-sans">
+            <div class="rounded-box bg-base-100 border-base-content/5 text-base-content not-prose grid gap-3 border p-6">
+                <div class="grid grid-cols-2 gap-2 md:grid-cols-4">
+                    <button class="btn">Default</button>
+                    <button class="btn btn-primary">Primary</button>
+                    <button class="btn btn-secondary">Secondary</button>
+                    <button class="btn btn-accent">Accent</button>
+                    <button class="btn btn-info">Info</button>
+                    <button class="btn btn-success">Success</button>
+                    <button class="btn btn-warning">Warning</button>
+                    <button class="btn btn-error">Error</button>
+                </div>
+                <div class="grid grid-cols-2 place-items-center gap-2 md:grid-cols-4">
+                    <span class="badge">Default</span>
+                    <span class="badge badge-primary">Primary</span>
+                    <span class="badge badge-secondary">Secondary</span>
+                    <span class="badge badge-accent">Accent</span>
+                    <span class="badge badge-info">Info</span>
+                    <span class="badge badge-success">Success</span>
+                    <span class="badge badge-warning">Warning</span>
+                    <span class="badge badge-error">Error</span>
+                </div>
+                <div class="flex flex-col gap-3">
+                    <div class="flex flex-col gap-3 md:flex-row">
+                        <div class="md:w-1/2">
+                            <div class="tabs tabs-lifted">
+                                <button class="tab">Tab</button>
+                                <button class="tab tab-active">Tab</button>
+                                <button class="tab">Tab</button>
+                            </div>
+                            <div class="flex flex-col">
+                                <span class="link">I &#39;m a simple link</span>
+                                <span class="link link-primary">I &#39;m a simple link</span>
+                                <span class="link link-secondary">I &#39;m a simple link</span>
+                                <span class="link link-accent">I &#39;m a simple link</span>
+                            </div>
+                        </div>
+                        <div class="flex flex-col gap-3 md:w-1/2">
+                            <progress value="20" max="100" class="progress">Default</progress>
+                            <progress value="25" max="100" class="progress progress-primary">Primary</progress>
+                            <progress value="30" max="100" class="progress progress-secondary">Secondary</progress>
+                            <progress value="40" max="100" class="progress progress-accent">Accent</progress>
+                            <progress value="45" max="100" class="progress progress-info">Info</progress>
+                            <progress value="55" max="100" class="progress progress-success">Success</progress>
+                            <progress value="70" max="100" class="progress progress-warning">Warning</progress>
+                            <progress value="90" max="100" class="progress progress-error">Error</progress>
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-3 md:flex-row">
+                        <div class="stats bg-base-300 border-base-300 border md:w-1/2">
+                            <div class="stat">
+                                <div class="stat-title">Total Page Views</div>
+                                <div class="stat-value">89,400</div>
+                                <div class="stat-desc">21% more than last month</div>
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap items-center justify-center gap-3 md:w-1/2">
+                            <div class="radial-progress" style="--value:60;--size:3.5rem">60%</div>
+                            <div class="radial-progress" style="--value:75;--size:3.5rem">75%</div>
+                            <div class="radial-progress" style="--value:90;--size:3.5rem">90%</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-3">
+                    <div class="flex flex-col gap-3 md:flex-row">
+                        <div class="md:w-1/2">
+                            <div>
+                                <input type="checkbox" class="toggle" checked>
+                                <input type="checkbox" class="toggle toggle-primary" checked>
+                                <input type="checkbox" class="toggle toggle-secondary" checked>
+                                <input type="checkbox" class="toggle toggle-accent" checked>
+                            </div>
+                            <div>
+                                <input type="checkbox" class="checkbox" checked>
+                                <input type="checkbox" class="checkbox checkbox-primary" checked>
+                                <input type="checkbox" class="checkbox checkbox-secondary" checked>
+                                <input type="checkbox" class="checkbox checkbox-accent" checked>
+                            </div>
+                            <div>
+                                <input type="radio" name="radio-1" class="radio" checked>
+                                <input type="radio" name="radio-1" class="radio radio-primary">
+                                <input type="radio" name="radio-1" class="radio radio-secondary">
+                                <input type="radio" name="radio-1" class="radio radio-accent">
+                            </div>
+                        </div>
+                        <div class="md:w-1/2">
+                            <input type="range" min="0" max="100" value="90" class="range range-xs">
+                            <input type="range" min="0" max="100" value="70" class="range range-xs range-primary">
+                            <input type="range" min="0" max="100" value="50" class="range range-xs range-secondary">
+                            <input type="range" min="0" max="100" value="40" class="range range-xs range-accent">
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-3 md:flex-row">
+                        <div class="flex flex-col gap-3 md:w-1/2">
+                            <input type="text" placeholder="Default" class="input input-bordered w-full">
+                            <input type="text" placeholder="Primary" class="input input-primary input-bordered w-full">
+                            <input type="text" placeholder="Secondary" class="input input-secondary input-bordered w-full">
+                            <input type="text" placeholder="Accent" class="input input-accent input-bordered w-full">
+                        </div>
+                        <div class="flex flex-col gap-3 md:w-1/2">
+                            <input type="text" placeholder="Info" class="input input-info input-bordered w-full">
+                            <input type="text" placeholder="Success" class="input input-success input-bordered w-full">
+                            <input type="text" placeholder="Warning" class="input input-warning input-bordered w-full">
+                            <input type="text" placeholder="Error" class="input input-error input-bordered w-full">
+                        </div>
+                    </div>
+                    <div class="navbar bg-neutral text-neutral-content rounded-box">
+                        <div class="flex-none">
+                            <button class="btn btn-square btn-ghost">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="flex-1">
+                            <button class="btn btn-ghost text-xl">daisyUI</button>
+                        </div>
+                    </div>
+                    <div class="flex gap-3">
+                        <div class="flex flex-grow flex-col gap-3">
+                            <div class="text-4xl font-bold">Text Size 1</div>
+                            <div class="text-3xl font-bold">Text Size 2</div>
+                            <div class="text-2xl font-bold">Text Size 3</div>
+                            <div class="text-xl font-bold">Text Size 4</div>
+                            <div class="text-lg font-bold">Text Size 5</div>
+                            <div class="text-sm font-bold">Text Size 6</div>
+                            <div class="text-xs font-bold">Text Size 7</div>
+                        </div>
+                        <ul class="steps steps-vertical">
+                            <li class="step step-primary">Step 1</li>
+                            <li class="step step-primary">Step 2</li>
+                            <li class="step">Step 3</li>
+                            <li class="step">Step 4</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-3">
+                    <div class="alert">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        <span>12 unread messages. Tap to see.</span>
+                    </div>
+                    <div class="alert alert-info">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        <span>New software update available.</span>
+                    </div>
+                    <div class="alert alert-success">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        <span>Your purchase has been confirmed!</span>
+                    </div>
+                    <div class="alert alert-warning">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                        </svg>
+                        <span>Warning: Invalid email address!</span>
+                    </div>
+                    <div class="alert alert-error">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                        <span>Error! Task failed successfully.</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+  
         <div id="lopaka_app"></div>
         <script type="module" src="/src/app.ts"></script>
     </body>
diff --git a/src/components/App.vue b/src/components/App.vue
index 633af6b7..a13aecf6 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -230,7 +230,6 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
 </template>
 <style lang="css">
 .fui-editor {
-    background: var(--bg-color);
     margin: 0 auto;
     position: relative;
     box-sizing: border-box;
diff --git a/src/components/fui/FuiCode.vue b/src/components/fui/FuiCode.vue
index 8cd23d62..54c2f30f 100644
--- a/src/components/fui/FuiCode.vue
+++ b/src/components/fui/FuiCode.vue
@@ -97,7 +97,28 @@ const debouncedChange = debounce(() => onChange(), 500);
     </div>
     <!-- <textarea class="fui-code" v-model="content" readonly></textarea> -->
 </template>
-<style lang="css">
+<style lang="css" scoped>
+.fui-code {
+    background: var(--primary-color);
+    border: 2px solid var(--border-dark-color);
+    border-radius: 0 10px 10px 10px;
+    border-top: 0;
+    margin: 0 0 8px 0;
+    padding: 8px;
+    height: 350px;
+    color: var(--secondary-color);
+    text-transform: none;
+    overflow: auto;
+    white-space: pre;
+}
+
+.fui-code:focus {
+    outline: none;
+}
+
+.fui-code pre {
+    margin: 0;
+}
 .ace_cursor {
     opacity: 0 !important;
 }
diff --git a/src/components/fui/FuiLayers.vue b/src/components/fui/FuiLayers.vue
index 39b478a0..5aad4b30 100644
--- a/src/components/fui/FuiLayers.vue
+++ b/src/components/fui/FuiLayers.vue
@@ -76,4 +76,51 @@ function getLayerListItem(layer: UnwrapRef<AbstractLayer>) {
     padding: 0 0 8px 0;
     overflow-y: auto;
 }
+
+
+.layer {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    height: 20px;
+    padding: 2px 0 2px 8px;
+    margin-bottom: 1px;
+    border-radius: 4px;
+    justify-content: space-between;
+}
+
+.layer:hover {
+    background-color: var(--secondary-color);
+}
+
+.layer:hover .layer__remove {
+    display: block;
+}
+
+.layer__name {
+    max-width: 132px;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.layer_ignored {
+    color: #999;
+}
+
+.layer_selected .layer__name:before {
+    display: inline-block;
+    content: '';
+    background: var(--success-color);
+    transform: translateY(-4px);
+    width: 4px;
+    height: 4px;
+    margin-right: 4px;
+}
+
+.layer__remove {
+    display: none;
+    color: var(--danger-color);
+    margin: 0 8px;
+    padding-bottom: 4px;
+}
 </style>
diff --git a/styles.css b/styles.css
index 4ed78811..d15a2347 100644
--- a/styles.css
+++ b/styles.css
@@ -10,7 +10,7 @@
 @tailwind utilities;
 @tailwind variants;
 
-:root {
+/* :root {
     --primary-color: #ff8200;
     --secondary-color: #441f07;
     --bg-color: #1c0e02;
@@ -25,19 +25,21 @@
 h1,
 h2,
 h3 {
-    /* font-family: "helvB08_tr"; */
     font-weight: normal;
 }
 
 body {
     margin: 0;
     padding: 0;
-    background: var(--bg-color);
     color: var(--primary-color);
     font-family: 'haxrcorp4089_tr';
     visibility: hidden;
 }
 
+a {
+    color: var(--primary-color);
+}
+
 #lopaka_app {
     display: flex;
 }
@@ -51,7 +53,6 @@ body {
 .title {
     margin: 0 0 8px 0;
     font-size: 32px;
-    /* font-family: "helvB08_tr"; */
     font-weight: normal;
 }
 
@@ -67,74 +68,6 @@ body {
     margin: 0 8px 8px 0;
 }
 
-.layer {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    height: 20px;
-    padding: 2px 0 2px 8px;
-    margin-bottom: 1px;
-    border-radius: 4px;
-    justify-content: space-between;
-}
-
-.layer:hover {
-    background-color: var(--secondary-color);
-}
-
-.layer:hover .layer__remove {
-    display: block;
-}
-
-.layer__name {
-    max-width: 132px;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.layer_ignored {
-    color: #999;
-}
-
-.layer_selected .layer__name:before {
-    display: inline-block;
-    content: '';
-    background: var(--success-color);
-    transform: translateY(-4px);
-    width: 4px;
-    height: 4px;
-    margin-right: 4px;
-}
-
-.layer__remove {
-    display: none;
-    color: var(--danger-color);
-    margin: 0 8px;
-    padding-bottom: 4px;
-}
-
-.fui-code {
-    background: var(--primary-color);
-    border: 2px solid var(--border-dark-color);
-    border-radius: 0 10px 10px 10px;
-    border-top: 0;
-    margin: 0 0 8px 0;
-    padding: 8px;
-    height: 350px;
-    color: var(--secondary-color);
-    text-transform: none;
-    overflow: auto;
-    white-space: pre;
-}
-
-.fui-code:focus {
-    outline: none;
-}
-
-.fui-code pre {
-    margin: 0;
-}
-
 .fui-tabs {
     display: flex;
 }
@@ -196,10 +129,6 @@ body {
     font-size: 24px;
 }
 
-a {
-    color: var(--primary-color);
-}
-
 .fui-form-column {
     margin-left: 16px;
 }
@@ -211,7 +140,6 @@ a {
 }
 .fui-form-label {
     font-size: 24px;
-    /* padding: 0 8px 4px 0; */
 }
 .fui-form-header {
     font-size: 32px;
@@ -228,4 +156,4 @@ a {
     order: -1;
     padding: 0 10px 0 0;
     width: 12px;
-}
+} */
diff --git a/tailwind.config.js b/tailwind.config.js
index 99b9fd05..d82f1184 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,11 +26,14 @@ module.exports = {
         themes: [
             {
                 lopaka: {
-                    primary: '#d97706',
+                    primary: '#FF8200',
+                    neutral: '#441F07',
+                    'base-100': '#120800', // bg
+                    "base-200": "#441F07", // default button
+                    "base-300": "#FF8200", // default tabs
+                    "base-content": "#f3f4f6",
                     secondary: '#7dd3fc',
                     accent: '#047857',
-                    neutral: '#1f2937',
-                    'base-100': '#111827',
                     info: '#00c9ff',
                     success: '#a0d100',
                     warning: '#f59e0b',

From 295d07118106a1b5ad434c3250446841925d53cd Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Tue, 21 May 2024 23:58:05 +0400
Subject: [PATCH 16/38] Fix theme

---
 tailwind.config.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index d82f1184..8cca7211 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,12 +26,13 @@ module.exports = {
         themes: [
             {
                 lopaka: {
+                    ...require('daisyui/src/theming/themes').dark,
                     primary: '#FF8200',
                     neutral: '#441F07',
                     'base-100': '#120800', // bg
-                    "base-200": "#441F07", // default button
-                    "base-300": "#FF8200", // default tabs
-                    "base-content": "#f3f4f6",
+                    'base-200': '#441F07', // default button
+                    'base-300': '#FF8200', // default tabs
+                    'base-content': '#f3f4f6',
                     secondary: '#7dd3fc',
                     accent: '#047857',
                     info: '#00c9ff',

From b98db802ac3ab6fc362cd644c98060497f5e7a3d Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Wed, 22 May 2024 00:13:24 +0400
Subject: [PATCH 17/38] Fix tw config

---
 tailwind.config.js | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 8cca7211..6754505a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,29 +4,11 @@ const typography = require('@tailwindcss/typography');
 
 module.exports = {
     content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-    darkMode: 'class', // or 'media' or 'class'
-    theme: {
-        extend: {}
-    },
-    variants: {
-        extend: {}
-    },
     plugins: [typography, daisyui],
-    corePlugins: {
-        preflight: false
-    },
     daisyui: {
-        darkTheme: 'dark', // name of one of the included themes for dark mode
-        base: true, // applies background color and foreground color for root element by default
-        styled: true, // include daisyUI colors and design decisions for all components
-        utils: true, // adds responsive and modifier utility classes
-        prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
-        logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
-        themeRoot: ':root',
         themes: [
             {
                 lopaka: {
-                    ...require('daisyui/src/theming/themes').dark,
                     primary: '#FF8200',
                     neutral: '#441F07',
                     'base-100': '#120800', // bg

From 65b7bf67f3a4f1aebf649e13ab71ac619c1d034c Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <m@ilin.pt>
Date: Tue, 21 May 2024 21:31:19 +0100
Subject: [PATCH 18/38] Remove test markup, return css TODO: fix inputs

---
 index.html | 171 -----------------------------------------------------
 styles.css |   7 ++-
 2 files changed, 5 insertions(+), 173 deletions(-)

diff --git a/index.html b/index.html
index a76f0cdd..4b01c653 100644
--- a/index.html
+++ b/index.html
@@ -12,177 +12,6 @@
     </head>
 
     <body>
-        <div class="font-sans">
-            <div class="rounded-box bg-base-100 border-base-content/5 text-base-content not-prose grid gap-3 border p-6">
-                <div class="grid grid-cols-2 gap-2 md:grid-cols-4">
-                    <button class="btn">Default</button>
-                    <button class="btn btn-primary">Primary</button>
-                    <button class="btn btn-secondary">Secondary</button>
-                    <button class="btn btn-accent">Accent</button>
-                    <button class="btn btn-info">Info</button>
-                    <button class="btn btn-success">Success</button>
-                    <button class="btn btn-warning">Warning</button>
-                    <button class="btn btn-error">Error</button>
-                </div>
-                <div class="grid grid-cols-2 place-items-center gap-2 md:grid-cols-4">
-                    <span class="badge">Default</span>
-                    <span class="badge badge-primary">Primary</span>
-                    <span class="badge badge-secondary">Secondary</span>
-                    <span class="badge badge-accent">Accent</span>
-                    <span class="badge badge-info">Info</span>
-                    <span class="badge badge-success">Success</span>
-                    <span class="badge badge-warning">Warning</span>
-                    <span class="badge badge-error">Error</span>
-                </div>
-                <div class="flex flex-col gap-3">
-                    <div class="flex flex-col gap-3 md:flex-row">
-                        <div class="md:w-1/2">
-                            <div class="tabs tabs-lifted">
-                                <button class="tab">Tab</button>
-                                <button class="tab tab-active">Tab</button>
-                                <button class="tab">Tab</button>
-                            </div>
-                            <div class="flex flex-col">
-                                <span class="link">I &#39;m a simple link</span>
-                                <span class="link link-primary">I &#39;m a simple link</span>
-                                <span class="link link-secondary">I &#39;m a simple link</span>
-                                <span class="link link-accent">I &#39;m a simple link</span>
-                            </div>
-                        </div>
-                        <div class="flex flex-col gap-3 md:w-1/2">
-                            <progress value="20" max="100" class="progress">Default</progress>
-                            <progress value="25" max="100" class="progress progress-primary">Primary</progress>
-                            <progress value="30" max="100" class="progress progress-secondary">Secondary</progress>
-                            <progress value="40" max="100" class="progress progress-accent">Accent</progress>
-                            <progress value="45" max="100" class="progress progress-info">Info</progress>
-                            <progress value="55" max="100" class="progress progress-success">Success</progress>
-                            <progress value="70" max="100" class="progress progress-warning">Warning</progress>
-                            <progress value="90" max="100" class="progress progress-error">Error</progress>
-                        </div>
-                    </div>
-                    <div class="flex flex-col gap-3 md:flex-row">
-                        <div class="stats bg-base-300 border-base-300 border md:w-1/2">
-                            <div class="stat">
-                                <div class="stat-title">Total Page Views</div>
-                                <div class="stat-value">89,400</div>
-                                <div class="stat-desc">21% more than last month</div>
-                            </div>
-                        </div>
-                        <div class="flex flex-wrap items-center justify-center gap-3 md:w-1/2">
-                            <div class="radial-progress" style="--value:60;--size:3.5rem">60%</div>
-                            <div class="radial-progress" style="--value:75;--size:3.5rem">75%</div>
-                            <div class="radial-progress" style="--value:90;--size:3.5rem">90%</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex flex-col gap-3">
-                    <div class="flex flex-col gap-3 md:flex-row">
-                        <div class="md:w-1/2">
-                            <div>
-                                <input type="checkbox" class="toggle" checked>
-                                <input type="checkbox" class="toggle toggle-primary" checked>
-                                <input type="checkbox" class="toggle toggle-secondary" checked>
-                                <input type="checkbox" class="toggle toggle-accent" checked>
-                            </div>
-                            <div>
-                                <input type="checkbox" class="checkbox" checked>
-                                <input type="checkbox" class="checkbox checkbox-primary" checked>
-                                <input type="checkbox" class="checkbox checkbox-secondary" checked>
-                                <input type="checkbox" class="checkbox checkbox-accent" checked>
-                            </div>
-                            <div>
-                                <input type="radio" name="radio-1" class="radio" checked>
-                                <input type="radio" name="radio-1" class="radio radio-primary">
-                                <input type="radio" name="radio-1" class="radio radio-secondary">
-                                <input type="radio" name="radio-1" class="radio radio-accent">
-                            </div>
-                        </div>
-                        <div class="md:w-1/2">
-                            <input type="range" min="0" max="100" value="90" class="range range-xs">
-                            <input type="range" min="0" max="100" value="70" class="range range-xs range-primary">
-                            <input type="range" min="0" max="100" value="50" class="range range-xs range-secondary">
-                            <input type="range" min="0" max="100" value="40" class="range range-xs range-accent">
-                        </div>
-                    </div>
-                    <div class="flex flex-col gap-3 md:flex-row">
-                        <div class="flex flex-col gap-3 md:w-1/2">
-                            <input type="text" placeholder="Default" class="input input-bordered w-full">
-                            <input type="text" placeholder="Primary" class="input input-primary input-bordered w-full">
-                            <input type="text" placeholder="Secondary" class="input input-secondary input-bordered w-full">
-                            <input type="text" placeholder="Accent" class="input input-accent input-bordered w-full">
-                        </div>
-                        <div class="flex flex-col gap-3 md:w-1/2">
-                            <input type="text" placeholder="Info" class="input input-info input-bordered w-full">
-                            <input type="text" placeholder="Success" class="input input-success input-bordered w-full">
-                            <input type="text" placeholder="Warning" class="input input-warning input-bordered w-full">
-                            <input type="text" placeholder="Error" class="input input-error input-bordered w-full">
-                        </div>
-                    </div>
-                    <div class="navbar bg-neutral text-neutral-content rounded-box">
-                        <div class="flex-none">
-                            <button class="btn btn-square btn-ghost">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex-1">
-                            <button class="btn btn-ghost text-xl">daisyUI</button>
-                        </div>
-                    </div>
-                    <div class="flex gap-3">
-                        <div class="flex flex-grow flex-col gap-3">
-                            <div class="text-4xl font-bold">Text Size 1</div>
-                            <div class="text-3xl font-bold">Text Size 2</div>
-                            <div class="text-2xl font-bold">Text Size 3</div>
-                            <div class="text-xl font-bold">Text Size 4</div>
-                            <div class="text-lg font-bold">Text Size 5</div>
-                            <div class="text-sm font-bold">Text Size 6</div>
-                            <div class="text-xs font-bold">Text Size 7</div>
-                        </div>
-                        <ul class="steps steps-vertical">
-                            <li class="step step-primary">Step 1</li>
-                            <li class="step step-primary">Step 2</li>
-                            <li class="step">Step 3</li>
-                            <li class="step">Step 4</li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="flex flex-col gap-3">
-                    <div class="alert">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
-                        <span>12 unread messages. Tap to see.</span>
-                    </div>
-                    <div class="alert alert-info">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
-                        <span>New software update available.</span>
-                    </div>
-                    <div class="alert alert-success">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
-                        <span>Your purchase has been confirmed!</span>
-                    </div>
-                    <div class="alert alert-warning">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-                        </svg>
-                        <span>Warning: Invalid email address!</span>
-                    </div>
-                    <div class="alert alert-error">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
-                        <span>Error! Task failed successfully.</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-  
         <div id="lopaka_app"></div>
         <script type="module" src="/src/app.ts"></script>
     </body>
diff --git a/styles.css b/styles.css
index d15a2347..6a2720f3 100644
--- a/styles.css
+++ b/styles.css
@@ -10,7 +10,7 @@
 @tailwind utilities;
 @tailwind variants;
 
-/* :root {
+:root {
     --primary-color: #ff8200;
     --secondary-color: #441f07;
     --bg-color: #1c0e02;
@@ -151,9 +151,12 @@ a {
     padding: 8px;
     color: var(--primary-color);
     box-sizing: border-box;
+    font-family: sans-serif;
+    font-size: small;
 }
 .fui-form-checkbox {
     order: -1;
     padding: 0 10px 0 0;
+    height: 12px;
     width: 12px;
-} */
+}

From aa61a68e0a546806f8a13f56a0562a8d3699b29e Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <m@ilin.pt>
Date: Wed, 22 May 2024 13:47:04 +0100
Subject: [PATCH 19/38] Fix styles, refactor inputs

---
 src/components/fui/FuiCodeSettings.vue | 32 +++++++++---------
 src/components/fui/FuiIcons.vue        |  2 ++
 src/components/fui/FuiInspector.vue    | 46 ++++++++++++++------------
 src/components/fui/FuiLayers.vue       |  4 +--
 styles.css                             |  3 +-
 5 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/components/fui/FuiCodeSettings.vue b/src/components/fui/FuiCodeSettings.vue
index d3e96b8f..8a983e11 100644
--- a/src/components/fui/FuiCodeSettings.vue
+++ b/src/components/fui/FuiCodeSettings.vue
@@ -39,26 +39,26 @@ const LABELS = {
 </script>
 <template>
     <div class="code-settings" v-if="platform !== Uint32RawPlatform.id">
-        <div class="title" v-if="Object.keys(templates).length > 1 || Object.keys(settings).length">Settings:</div>
-        <div class="fui-select" v-if="Object.keys(templates).length > 1">
-            <label for="template" class="fui-form-label">Code style:</label>
-            <select id="template" class="fui-select__select fui-form-input" v-model="template" @change="changeTemplate">
-                <option v-for="(item, idx) in Object.keys(templates)" :key="idx" :value="item">
-                    {{ templates[item].name }}
-                </option>
-            </select>
-        </div>
-        <div v-for="(value, key) in settings" class="code-settings-row">
-            <div class="fui-form-checkbox">
-                <input
+        <div class="title" v-if="Object.keys(templates).length > 1 || Object.keys(settings).length">Code settings:</div>
+        <div class="font-mono">
+            <div class="fui-select label" v-if="Object.keys(templates).length > 1">
+                <label for="template" class="label-text">Code style:</label>
+                <select id="template" class="fui-select__select fui-form-input" v-model="template" @change="changeTemplate">
+                    <option v-for="(item, idx) in Object.keys(templates)" :key="idx" :value="item">
+                        {{ templates[item].name }}
+                    </option>
+                </select>
+            </div>
+            <div v-for="(value, key) in settings" class="form-control">
+                <label class="label cursor-pointer justify-start">
+                    <input class="checkbox checkbox-sm checkbox-primary"
                     type="checkbox"
-                    :id="'settings_' + key"
-                    class="fui-form-input"
                     :checked="value"
                     @change="setSetting($event, key)"
-                />
+                    />
+                    <span class="label-text ml-2">{{ LABELS[key] ?? key }}</span>
+                </label>
             </div>
-            <label :for="'settings_' + key" class="fui-form-label">{{ LABELS[key] ?? key }}</label>
         </div>
     </div>
 </template>
diff --git a/src/components/fui/FuiIcons.vue b/src/components/fui/FuiIcons.vue
index cae1e198..5ae57c69 100644
--- a/src/components/fui/FuiIcons.vue
+++ b/src/components/fui/FuiIcons.vue
@@ -154,5 +154,7 @@ function iconDragStart(e: DragEvent) {
     border: 1px solid var(--border-dark-color);
     border-radius: 4px;
     text-align: center;
+    height: 18px;
+    line-height: 18px;
 }
 </style>
diff --git a/src/components/fui/FuiInspector.vue b/src/components/fui/FuiInspector.vue
index 773c2ede..604c0eb4 100644
--- a/src/components/fui/FuiInspector.vue
+++ b/src/components/fui/FuiInspector.vue
@@ -102,7 +102,13 @@ const LABELS = {
     fill: 'Filled',
     color: 'Color',
     overlay: 'Overlay',
-    radius: 'Radius'
+    radius: 'Radius',
+    radiusX: 'RX',
+    radiusY: 'RY',
+    x: "X",
+    y: "Y",
+    w: "W",
+    h: "H",
 };
 </script>
 <template>
@@ -130,20 +136,32 @@ const LABELS = {
             <option>#FFFFFF</option>
         </datalist>
         <div class="title inspector__title">{{ activeLayer.name }}</div>
-        <div class="inspector-panel">
+        <div class="inspector-panel font-mono">
             <template v-for="(param, name) in params">
                 <div
-                    class="inspector-panel__param"
+                    class="flex pb-2"
                     v-if="param.type !== TModifierType.image"
                     :class="{
-                        'inspector-panel__param_row': [TModifierType.boolean].includes(param.type),
+                        'flex-col items-start': ![TModifierType.boolean, TModifierType.number].includes(param.type),
+                        'flex-row items-center': [TModifierType.boolean, TModifierType.number].includes(param.type),
                         'inspector-panel__param_wide': [TModifierType.color, TModifierType.string].includes(param.type)
                     }"
                 >
-                    <label class="fui-form-label" :for="`inspector_${param.type}_${name}`">
+                    <input
+                        v-if="param.type == TModifierType.boolean"
+                        :disabled="session.state.isPublic"
+                        class="checkbox checkbox-sm checkbox-primary mr-1"
+                        type="checkbox"
+                        :checked="param.getValue()"
+                        @change="onChange($event, param)"
+                        :readonly="!param.setValue"
+                        :id="`inspector_${param.type}_${name}`"
+                        :key="updates + '_' + name"
+                    />
+                    <label class="label label-text pr-2" :for="`inspector_${param.type}_${name}`">
                         {{ LABELS[name] ?? name }}
                     </label>
-                    <div v-if="param.type == TModifierType.number">
+                    <div v-if="param.type == TModifierType.number" class="w-20">
                         <input
                             :disabled="session.state.isPublic"
                             class="inspector__input fui-form-input"
@@ -163,19 +181,6 @@ const LABELS = {
                             :readonly="!param.setValue"
                         />
                     </template>
-                    <div v-else-if="param.type == TModifierType.boolean" class="fui-form-checkbox">
-                        <input
-                            :disabled="session.state.isPublic"
-                            class="inspector__input fui-form-input"
-                            type="checkbox"
-                            :checked="param.getValue()"
-                            @change="onChange($event, param)"
-                            :readonly="!param.setValue"
-                            :id="`inspector_${param.type}_${name}`"
-                            :key="updates + '_' + name"
-                        />
-                    </div>
-
                     <div v-else-if="param.type == TModifierType.color">
                         <div class="color-palette" v-if="palette.length" :key="updates + '_' + name">
                             <div
@@ -248,7 +253,6 @@ const LABELS = {
 .inspector-panel__param {
     flex: 0 0 calc(50% - 4px);
     display: flex;
-    flex-direction: column;
     align-items: flex-start;
     margin-bottom: 8px;
     font-size: var(--input-font-size);
@@ -266,8 +270,6 @@ const LABELS = {
 
 .inspector__title {
     overflow: hidden;
-    margin-top: 8px;
-    width: 150px;
 }
 
 .inspector__input {
diff --git a/src/components/fui/FuiLayers.vue b/src/components/fui/FuiLayers.vue
index 5aad4b30..78dce384 100644
--- a/src/components/fui/FuiLayers.vue
+++ b/src/components/fui/FuiLayers.vue
@@ -82,7 +82,7 @@ function getLayerListItem(layer: UnwrapRef<AbstractLayer>) {
     display: flex;
     align-items: center;
     cursor: pointer;
-    height: 20px;
+    height: 24px;
     padding: 2px 0 2px 8px;
     margin-bottom: 1px;
     border-radius: 4px;
@@ -121,6 +121,6 @@ function getLayerListItem(layer: UnwrapRef<AbstractLayer>) {
     display: none;
     color: var(--danger-color);
     margin: 0 8px;
-    padding-bottom: 4px;
+    height: 32px;
 }
 </style>
diff --git a/styles.css b/styles.css
index 6a2720f3..94ed7925 100644
--- a/styles.css
+++ b/styles.css
@@ -51,7 +51,6 @@ a {
 }
 
 .title {
-    margin: 0 0 8px 0;
     font-size: 32px;
     font-weight: normal;
 }
@@ -78,7 +77,7 @@ a {
     border-bottom: 0;
     border-radius: 6px 6px 0 0;
     color: var(--primary-color);
-    height: 24px;
+    height: 32px;
     vertical-align: middle;
     text-transform: uppercase;
     font-family: 'haxrcorp4089_tr';

From 1e6cc06567e0696e8fc22eeaa0198d32d64b187c Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Wed, 22 May 2024 16:53:26 +0400
Subject: [PATCH 20/38] Fix dot layer

---
 src/core/layers/dot.layer.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/core/layers/dot.layer.ts b/src/core/layers/dot.layer.ts
index 00c39e66..6eda615c 100644
--- a/src/core/layers/dot.layer.ts
+++ b/src/core/layers/dot.layer.ts
@@ -14,6 +14,7 @@ export class DotLayer extends RectangleLayer {
         delete this.modifiers.w;
         delete this.modifiers.h;
         delete this.modifiers.fill;
+        delete this.modifiers.radius;
         if (!this.features.hasRGBSupport) {
             delete this.modifiers.color;
         }
@@ -38,6 +39,16 @@ export class DotLayer extends RectangleLayer {
         this.draw();
     }
 
+    draw(): void {
+        const {dc, position, size} = this;
+        dc.clear();
+        dc.ctx.fillStyle = this.color;
+        dc.ctx.strokeStyle = this.color;
+        dc.ctx.beginPath();
+        dc.ctx.rect(position.x, position.y, size.x, size.y);
+        dc.ctx.fill();
+    }
+
     updateBounds(): void {
         this.bounds = new Rect(this.position, this.size.clone());
     }

From 0f13979f56e7527032e1864806c3f99ffe5f217a Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <m@ilin.pt>
Date: Wed, 22 May 2024 14:45:36 +0100
Subject: [PATCH 21/38] Fix input label hover

---
 src/components/fui/FuiInspector.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/fui/FuiInspector.vue b/src/components/fui/FuiInspector.vue
index 604c0eb4..55f3ccc9 100644
--- a/src/components/fui/FuiInspector.vue
+++ b/src/components/fui/FuiInspector.vue
@@ -158,7 +158,7 @@ const LABELS = {
                         :id="`inspector_${param.type}_${name}`"
                         :key="updates + '_' + name"
                     />
-                    <label class="label label-text pr-2" :for="`inspector_${param.type}_${name}`">
+                    <label class="label label-text pr-2 cursor-pointer" :for="`inspector_${param.type}_${name}`">
                         {{ LABELS[name] ?? name }}
                     </label>
                     <div v-if="param.type == TModifierType.number" class="w-20">
@@ -169,6 +169,7 @@ const LABELS = {
                             :value="param.getValue()"
                             @change="onChange($event, param)"
                             :readonly="!param.setValue"
+                            :id="`inspector_${param.type}_${name}`"
                         />
                     </div>
                     <template v-else-if="param.type == TModifierType.string">

From e4f03d44387a543f5120b44e914600a52c08709c Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <m@ilin.pt>
Date: Fri, 31 May 2024 12:37:05 +0100
Subject: [PATCH 22/38] Fix  u8g2 for arduino to use drawXBMP with progmem

---
 src/platforms/__snapshots__/u8g2.test.ts.snap | 50 +++++++++++++++++++
 src/platforms/templates/u8g2/default.pug      |  3 +-
 src/platforms/u8g2.test.ts                    |  4 +-
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/platforms/__snapshots__/u8g2.test.ts.snap b/src/platforms/__snapshots__/u8g2.test.ts.snap
index 84b7b99f..8d014db5 100644
--- a/src/platforms/__snapshots__/u8g2.test.ts.snap
+++ b/src/platforms/__snapshots__/u8g2.test.ts.snap
@@ -1,5 +1,55 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`U8g2 platform > generating source code: Arduino (Cpp) 1`] = `
+"static const unsigned char image_paint_0_bits[] = {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00};
+u8g2.clearBuffer();
+u8g2.setFontMode(1);
+u8g2.setBitmapMode(1);
+@veqtjp8jf9ln6isyfz;u8g2.drawBox(@x:107, @y:46, @w:18, @h:15);
+@utlxpqvhdxnln6it5pw;u8g2.drawBox(@x:97, @y:2, @w:27, @h:11);
+@eu6bpe0xpvvln6itc2e;u8g2.drawBox(@x:106, @y:19, @w:19, @h:18);
+u8g2.setFont(u8g2_font_profont22_tr);
+@s3m4u762qpln6jvm90;u8g2.drawStr(@x:3, @y:11, @text:\\"Text\\");
+@b11j6xs5t46ln6jw96h;u8g2.drawLine(@x1:2, @y1:16, @x2:68, @y2:16);
+@6n8rac0nxpcln6jwdwr;u8g2.drawPixel(@x:62, @y:4);
+@ema2hee85mln6jweht;u8g2.drawPixel(@x:67, @y:8);
+@j1ol1lo5nkln6jwfmg;u8g2.drawPixel(@x:72, @y:12);
+@6uf3k6wj82ln6jwi73;u8g2.drawCircle(@x:20, @y:41, @r:12);
+@87y8hf8sh8dhf8d98sd;u8g2.drawFilledEllipse(@x:21, @y:37, @rx:13, @ry:8);
+@aibkefmz3cln6jwlit;u8g2.drawDisc(@x:17, @y:43, @r:3);
+@g7pk1wfbqqkln6jwxby;u8g2.drawFrame(@x:44, @y:29, @w:44, @h:28);
+@u9uidj9d90fu9sj9jj9;u8g2.drawEllipse(@x:15, @y:36, @rx:7, @ry:7);
+@rrsjcz4oz2ln6jx4y4;u8g2.drawXBM(@x:0, @y:0, @w:128, @h:64, @image:image_paint_0_bits);
+@njsoidnfijoinisn;u8g2.drawRBox(@x:10, @y:4, @w:12, @h:19, @r:3);
+@jnijisniijaojosd;u8g2.drawRFrame(@x:45, @y:20, @w:14, @h:12, @r:5);
+u8g2.sendBuffer();"
+`;
+
+exports[`U8g2 platform > generating source code: Arduino (Cpp) Progmem 1`] = `
+"static const unsigned char image_paint_0_bits[] U8X8_PROGMEM = {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00};
+u8g2.clearBuffer();
+u8g2.setFontMode(1);
+u8g2.setBitmapMode(1);
+@veqtjp8jf9ln6isyfz;u8g2.drawBox(@x:107, @y:46, @w:18, @h:15);
+@utlxpqvhdxnln6it5pw;u8g2.drawBox(@x:97, @y:2, @w:27, @h:11);
+@eu6bpe0xpvvln6itc2e;u8g2.drawBox(@x:106, @y:19, @w:19, @h:18);
+u8g2.setFont(u8g2_font_profont22_tr);
+@s3m4u762qpln6jvm90;u8g2.drawStr(@x:3, @y:11, @text:\\"Text\\");
+@b11j6xs5t46ln6jw96h;u8g2.drawLine(@x1:2, @y1:16, @x2:68, @y2:16);
+@6n8rac0nxpcln6jwdwr;u8g2.drawPixel(@x:62, @y:4);
+@ema2hee85mln6jweht;u8g2.drawPixel(@x:67, @y:8);
+@j1ol1lo5nkln6jwfmg;u8g2.drawPixel(@x:72, @y:12);
+@6uf3k6wj82ln6jwi73;u8g2.drawCircle(@x:20, @y:41, @r:12);
+@87y8hf8sh8dhf8d98sd;u8g2.drawFilledEllipse(@x:21, @y:37, @rx:13, @ry:8);
+@aibkefmz3cln6jwlit;u8g2.drawDisc(@x:17, @y:43, @r:3);
+@g7pk1wfbqqkln6jwxby;u8g2.drawFrame(@x:44, @y:29, @w:44, @h:28);
+@u9uidj9d90fu9sj9jj9;u8g2.drawEllipse(@x:15, @y:36, @rx:7, @ry:7);
+@rrsjcz4oz2ln6jx4y4;u8g2.drawXBMP(@x:0, @y:0, @w:128, @h:64, @image:image_paint_0_bits);
+@njsoidnfijoinisn;u8g2.drawRBox(@x:10, @y:4, @w:12, @h:19, @r:3);
+@jnijisniijaojosd;u8g2.drawRFrame(@x:45, @y:20, @w:14, @h:12, @r:5);
+u8g2.sendBuffer();"
+`;
+
 exports[`U8g2 platform > generating source code: Arduino/Esp32 (Cpp) 1`] = `
 "static const unsigned char image_paint_0_bits[] = {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00};
 u8g2.clearBuffer();
diff --git a/src/platforms/templates/u8g2/default.pug b/src/platforms/templates/u8g2/default.pug
index ac00b8bb..c31baa48 100644
--- a/src/platforms/templates/u8g2/default.pug
+++ b/src/platforms/templates/u8g2/default.pug
@@ -48,7 +48,8 @@ each layer in layers
             | @!{layer.uid};!{pad}u8g2.drawStr(@x:!{layer.position[0]}, @y:!{layer.position[1]}, @text:"!{layer.text}");
         when 'paint'
         when 'icon'
-            | @!{layer.uid};!{pad}u8g2.drawXBM(@x:!{layer.position[0]}, @y:!{layer.position[1]}, @w:!{layer.size[0]}, @h:!{layer.size[1]}, @image:!{layer.imageName});
+            - var func = settings.progmem ? 'drawXBMP' : 'drawXBM'
+            | @!{layer.uid};!{pad}u8g2.!{func}(@x:!{layer.position[0]}, @y:!{layer.position[1]}, @w:!{layer.size[0]}, @h:!{layer.size[1]}, @image:!{layer.imageName});
         default 
             |
             | // Unknown layer type !{layer.type}
diff --git a/src/platforms/u8g2.test.ts b/src/platforms/u8g2.test.ts
index 45753a31..6030f8b9 100644
--- a/src/platforms/u8g2.test.ts
+++ b/src/platforms/u8g2.test.ts
@@ -3,12 +3,12 @@ import {layersMock} from './layers.mock';
 import {U8g2Platform} from './u8g2';
 
 describe('U8g2 platform', () => {
-    it('generating source code: arduino', () => {
+    it('generating source code: Arduino (Cpp) Progmem', () => {
         const platform = new U8g2Platform();
         platform.setTemplate('arduino');
         expect(platform.generateSourceCode(layersMock)).toMatchSnapshot();
     });
-    it('generating source code: Arduino/Esp32 (Cpp)', () => {
+    it('generating source code: Arduino (Cpp)', () => {
         const platform = new U8g2Platform();
         platform.setTemplate('arduino');
         platform.getTemplates().arduino.settings.progmem = false;

From a1df28c010e0fd40fe9add249bb6e644f1ee9f2a Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Fri, 1 Mar 2024 19:53:14 +0400
Subject: [PATCH 23/38] Image import wizard

---
 src/components/fui/FuiFile.vue         |  34 +++--
 src/components/fui/FuiImportWizard.vue | 172 +++++++++++++++++++++++++
 src/core/session.ts                    |  14 ++
 src/draw/virtual-screen.ts             |   5 +
 src/editor/plugins/select.plugin.ts    |  51 +++++---
 src/utils.ts                           |  90 +++++++++++++
 styles.css                             |   1 +
 7 files changed, 339 insertions(+), 28 deletions(-)
 create mode 100644 src/components/fui/FuiImportWizard.vue

diff --git a/src/components/fui/FuiFile.vue b/src/components/fui/FuiFile.vue
index 171e8634..75695abc 100644
--- a/src/components/fui/FuiFile.vue
+++ b/src/components/fui/FuiFile.vue
@@ -2,6 +2,7 @@
 import {defineProps, ref, toRefs} from 'vue';
 import {useSession} from '../../core/session';
 import {loadImageAsync, logEvent, readFileAsync, readTextFileAsync} from '../../utils';
+import FuiImportWizard from './FuiImportWizard.vue';
 
 const props = defineProps<{
     title: string;
@@ -16,6 +17,8 @@ const fileInput = ref(null);
 const session = useSession();
 const {customImages} = toRefs(session.state);
 const fileLoadedCounter = ref(0);
+const openWizard = ref(false);
+const wizardRef = ref(null);
 
 async function onFileChange(e) {
     const file = e.target.files[0];
@@ -26,15 +29,8 @@ async function onFileChange(e) {
         const name = file.name.substr(0, file.name.lastIndexOf('.')) || file.name; // remove file extension
         const fileResult = await readFileAsync(file);
         const image = await loadImageAsync(fileResult);
-
-        customImages.value.push({
-            name: name,
-            width: image.width,
-            height: image.height,
-            image: image,
-            isCustom: true
-        });
-        emit('setActiveTab', 'images');
+        openWizard.value = true;
+        wizardRef.value.setImage(image, name);
     } else {
         const fileResult = await readTextFileAsync(file);
         session.importCode(fileResult);
@@ -43,6 +39,19 @@ async function onFileChange(e) {
     resetFileInput();
 }
 
+function saveImage(image: HTMLImageElement, name: string) {
+    customImages.value.push({
+        name: name,
+        width: image.width,
+        height: image.height,
+        image: image,
+        isCustom: true
+    });
+    emit('updateFuiImages', customImages.value);
+    emit('setActiveTab', 'images');
+    openWizard.value = false;
+}
+
 function resetFileInput() {
     fileInput.value = null;
     fileLoadedCounter.value++;
@@ -51,6 +60,13 @@ function resetFileInput() {
 </script>
 <template>
     <label class="button" :class="{button_active: active}">
+        <FuiImportWizard
+            v-if="type == 'image'"
+            ref="wizardRef"
+            :visible="openWizard"
+            @onClose="() => (openWizard = false)"
+            @onSave="saveImage"
+        />
         <input
             type="file"
             style="position: fixed; top: -100%"
diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
new file mode 100644
index 00000000..6a9de936
--- /dev/null
+++ b/src/components/fui/FuiImportWizard.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import {Teleport, reactive, ref, toRefs, watch} from 'vue';
+import {processImage, imageDataToImage, imageToImageData} from '../../utils';
+const props = defineProps<{
+    visible: boolean;
+}>();
+
+const emit = defineEmits(['onClose', 'onSave']);
+const canvasRef = ref(null);
+const imageName = ref('');
+const options = reactive({
+    dither: true,
+    invert: false,
+    width: 0,
+    height: 0,
+    proportion: 1,
+    alpha: true,
+    palette: ['#000000', '#FFFFFF']
+});
+const {dither, invert, width, height, proportion} = toRefs(options);
+const scale = ref(1);
+const scales = [1, 2, 3, 4, 5];
+let image, imageData;
+
+watch(width, (val, oldVal) => {
+    if (oldVal && val && proportion.value && val !== oldVal) {
+        height.value = Math.round(val / proportion.value);
+    }
+});
+
+watch(height, (val, oldVal) => {
+    if (oldVal && val && proportion.value && val !== oldVal) {
+        width.value = Math.round(val * proportion.value);
+    }
+});
+
+function setImage(sourvceImage: HTMLImageElement, name: string) {
+    imageName.value = name;
+    imageData = imageToImageData(sourvceImage);
+    image = sourvceImage;
+    options.width = image.width;
+    options.height = image.height;
+    options.proportion = image.width / image.height;
+    preview();
+}
+
+function preview() {
+    const canvas = canvasRef.value;
+    const ctx = canvas.getContext('2d');
+    canvas.width = options.width;
+    canvas.height = options.height;
+    canvas.style.width = options.width * scale.value + 'px';
+    canvas.style.height = options.height * scale.value + 'px';
+    // const imageData = processImage(image, options);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.putImageData(processImage(imageData, options), 0, 0);
+}
+
+function cancel() {
+    emit('onClose');
+}
+
+function save() {
+    imageDataToImage(processImage(imageData, options)).then((img) => {
+        emit('onSave', img, imageName.value);
+    });
+}
+
+defineExpose({
+    setImage
+});
+</script>
+<template>
+    <Teleport to="body">
+        <div class="fui-import-wizard-dialog" :class="{visible}">
+            <div class="fui-form-row fui-form-header">Image preview</div>
+            <div class="fui-form-row fui-import-wizard-canvas-wrapper" style="width: 400px; height: 300px">
+                <canvas ref="canvasRef" style="width: 100%; height: 100%"></canvas>
+            </div>
+            <div class="fui-form-row">
+                <!-- image name -->
+                <label class="fui-form-label fui-form-column" for="image-name">
+                    Name:
+                    <input class="fui-form-input" type="text" v-model="imageName" id="image-name" />
+                </label>
+                <label class="fui-form-label fui-form-column" for="image-zoom">Zoom:</label>
+                <select id="image-zoom" class="fui-select__select fui-form-input" v-model="scale">
+                    <option v-for="(p, idx) in scales" :key="idx" :value="p">{{ p * 100 }}%</option>
+                </select>
+            </div>
+
+            <div class="fui-form-row">
+                <label class="fui-form-label fui-form-column" for="image-width">
+                    Width:
+                    <input
+                        class="fui-form-input fui-form-input__size"
+                        type="number"
+                        v-model="options.width"
+                        id="image-width"
+                    />
+                </label>
+
+                <label class="fui-form-label fui-form-column" for="image-height">
+                    Height:
+                    <input
+                        class="fui-form-input fui-form-input__size"
+                        type="number"
+                        min="1"
+                        v-model="options.height"
+                        id="image-height"
+                    />
+                </label>
+            </div>
+            <div class="fui-form-row">
+                <!-- dither -->
+                <label class="fui-form-label fui-form-column" for="image-dithering">
+                    Dithering:
+                    <input class="fui-form-checkbox" type="checkbox" v-model="options.dither" id="image-dithering" />
+                </label>
+
+                <!-- invert -->
+                <label class="fui-form-label fui-form-column" for="image-invert">
+                    Inverting:
+                    <input class="fui-form-checkbox" type="checkbox" v-model="options.invert" id="image-invert" />
+                </label>
+            </div>
+
+            <div class="buttons-bottom">
+                <button class="button button_danger fui-display-custom-dialog__cancel" @click="cancel">Cancel</button>
+                <button class="button fui-display-custom-dialog__save" @click="preview">Preview</button>
+                <button class="button fui-display-custom-dialog__save" @click="save">Import</button>
+            </div>
+        </div>
+    </Teleport>
+</template>
+<style lang="css" scoped>
+.fui-import-wizard-dialog {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    padding: 10px;
+    z-index: 100;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 600px;
+}
+.fui-import-wizard-canvas-wrapper {
+    max-width: 600px;
+    max-height: 400px;
+    overflow: auto;
+    position: relative;
+}
+.fui-import-wizard-canvas-wrapper canvas {
+    position: absolute;
+    background-color: black;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    image-rendering: pixelated;
+}
+.fui-import-wizard-dialog.visible {
+    display: flex;
+}
+</style>
diff --git a/src/core/session.ts b/src/core/session.ts
index 8bbe64a8..2bb53439 100644
--- a/src/core/session.ts
+++ b/src/core/session.ts
@@ -111,6 +111,20 @@ export class Session {
         layer.draw();
         this.virtualScreen.redraw();
     };
+    grab = (position: Point, size: Point) => {
+        const layer = new PaintLayer(this.getPlatformFeatures());
+        this.addLayer(layer);
+        const ctx = layer.getBuffer().getContext('2d');
+        ctx.drawImage(this.virtualScreen.canvas, position.x, position.y, size.x, size.y, 0, 0, size.x, size.y);
+        layer.recalculate();
+        layer.position = position.clone();
+        layer.applyColor();
+        layer.stopEdit();
+        layer.selected = true;
+        layer.draw();
+        this.virtualScreen.redraw();
+        return layer;
+    };
     addLayer = (layer: AbstractLayer, saveHistory: boolean = true) => {
         const {display, scale, layers} = this.state;
         layer.resize(display, scale);
diff --git a/src/draw/virtual-screen.ts b/src/draw/virtual-screen.ts
index 2e94ce70..3a3a9dbb 100644
--- a/src/draw/virtual-screen.ts
+++ b/src/draw/virtual-screen.ts
@@ -197,6 +197,11 @@ export class VirtualScreen {
         }
     }
 
+    public grab(position: Point, size: Point): ImageData {
+        const data = this.canvasContext.getImageData(position.x, position.y, size.x, size.y);
+        return data;
+    }
+
     public clear() {
         if (!this.canvas) return;
         this.ctx.clearRect(0, 0, this.screen.width, this.screen.height);
diff --git a/src/editor/plugins/select.plugin.ts b/src/editor/plugins/select.plugin.ts
index 42c3e457..ffd9dc32 100644
--- a/src/editor/plugins/select.plugin.ts
+++ b/src/editor/plugins/select.plugin.ts
@@ -11,6 +11,7 @@ export class SelectPlugin extends AbstractEditorPlugin {
     selectionElement: HTMLElement;
     firstPoint: Point = null;
     selectionRect: Rect = null;
+    grabMode: boolean = false;
 
     constructor(
         protected session: Session,
@@ -24,27 +25,34 @@ export class SelectPlugin extends AbstractEditorPlugin {
 
     onMouseDown(point: Point, event: MouseEvent): void {
         this.foreign = false;
+        this.grabMode = false;
         const {layers, scale, display} = this.session.state;
         const {activeTool} = this.session.editor.state;
         if (!activeTool) {
-            const hovered = layers.filter((l) => l.contains(point)).sort((a, b) => b.index - a.index);
-            if (hovered.length) {
-                // if there is a hovered layer
-                const upperLayer = hovered[0];
-                // add or remove from selection if ctrl or cmd is pressed
-                if (event.ctrlKey || event.metaKey) {
-                    upperLayer.selected = !upperLayer.selected;
-                } else if (!upperLayer.selected) {
-                    // if layer is not selected, select it and unselect others
-                    this.session.state.layers.forEach((l) => (l.selected = false));
-                    upperLayer.selected = true;
-                }
-            } else {
-                // if there is no hovered layer, start box selection
+            if (event.altKey) {
                 this.captured = true;
+                this.grabMode = true;
                 this.firstPoint = point.clone();
+            } else {
+                const hovered = layers.filter((l) => l.contains(point)).sort((a, b) => b.index - a.index);
+                if (hovered.length) {
+                    // if there is a hovered layer
+                    const upperLayer = hovered[0];
+                    // add or remove from selection if ctrl or cmd is pressed
+                    if (event.ctrlKey || event.metaKey) {
+                        upperLayer.selected = !upperLayer.selected;
+                    } else if (!upperLayer.selected) {
+                        // if layer is not selected, select it and unselect others
+                        this.session.state.layers.forEach((l) => (l.selected = false));
+                        upperLayer.selected = true;
+                    }
+                } else {
+                    // if there is no hovered layer, start box selection
+                    this.captured = true;
+                    this.firstPoint = point.clone();
+                }
+                this.session.editor.selectionUpdate();
             }
-            this.session.editor.selectionUpdate();
         }
     }
 
@@ -88,10 +96,15 @@ export class SelectPlugin extends AbstractEditorPlugin {
             this.selectionElement.style.display = 'none';
             const position = this.firstPoint.clone().min(point);
             const size = point.clone().subtract(this.firstPoint).abs();
-            if (size.x < 2 && size.y < 2) {
-                layers.filter((l) => l.selected).forEach((l) => (l.selected = false));
-                this.session.editor.selectionUpdate();
-                return;
+            if (this.grabMode) {
+                this.session.grab(position, size);
+            } else {
+                if (size.x < 2 && size.y < 2) {
+                    layers.filter((l) => l.selected).forEach((l) => (l.selected = false));
+                    this.session.editor.selectionUpdate();
+                    return;
+                }
+                layers.forEach((l) => (l.selected = new Rect(position, size).intersect(l.bounds)));
             }
             layers.forEach((l) => (l.selected = this.intersect(l, position, size)));
         } else if (!this.foreign) {
diff --git a/src/utils.ts b/src/utils.ts
index dc89d020..d5a4f13c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -161,6 +161,20 @@ export function imageToImageData(img: HTMLImageElement): ImageData {
     return ctx.getImageData(0, 0, img.width, img.height);
 }
 
+export async function imageDataToImage(imgData: ImageData): Promise<HTMLImageElement> {
+    const canvas = document.createElement('canvas');
+    canvas.width = imgData.width;
+    canvas.height = imgData.height;
+    const ctx = canvas.getContext('2d');
+    ctx.putImageData(imgData, 0, 0);
+    const img = new Image();
+    img.src = canvas.toDataURL('image/png');
+    await new Promise((resolve) => {
+        img.onload = resolve;
+    });
+    return img;
+}
+
 export function imgDataToXBMP(
     imgData: ImageData,
     xStart: number,
@@ -424,3 +438,79 @@ export function downloadImage(data: ImageData, name: string) {
     a.download = name;
     a.click();
 }
+
+export function processImage(data: ImageData, options: any, color: string = '#FFFFFF') {
+    data = scaleImageData(data, options.width, options.height);
+    if (options.dither) {
+        data = floydSteinbergDithering(data, options.palette);
+    }
+    if (options.alpha) {
+        data = addAlphaChannelToImageData(data, color);
+    }
+    if (options.invert) {
+        data = invertImageData(data, color);
+    }
+    return data;
+}
+
+export function scaleImageData(data: ImageData, width: number, height: number) {
+    // scaling with nearest neighbor algorithm
+    const newData = new Uint8ClampedArray(width * height * 4);
+    const xRatio = data.width / width;
+    const yRatio = data.height / height;
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const index = (Math.floor(y * yRatio) * data.width + Math.floor(x * xRatio)) * 4;
+            const newIndex = (y * width + x) * 4;
+            newData[newIndex] = data.data[index];
+            newData[newIndex + 1] = data.data[index + 1];
+            newData[newIndex + 2] = data.data[index + 2];
+            newData[newIndex + 3] = data.data[index + 3];
+        }
+    }
+    return new ImageData(newData, width, height);
+}
+
+export function floydSteinbergDithering(data: ImageData, palette: string[]) {
+    const newData = new Uint8ClampedArray(data.data.length);
+    const colors = palette.map((c) => hexToRgb(c));
+    for (let y = 0; y < data.height; y++) {
+        for (let x = 0; x < data.width; x++) {
+            const index = (y * data.width + x) * 4;
+            const [r, g, b] = Array.from(data.data.slice(index, index + 3));
+            let min = 255 * 3;
+            let index2 = 0;
+            for (let j = 0; j < colors.length; j++) {
+                const [r2, g2, b2] = Object.values(colors[j]);
+                const d = Math.pow(r - r2, 2) + Math.pow(g - g2, 2) + Math.pow(b - b2, 2);
+                if (d < min) {
+                    min = d;
+                    index2 = j;
+                }
+            }
+            const [r2, g2, b2] = Object.values(colors[index2]);
+            newData[index] = r2;
+            newData[index + 1] = g2;
+            newData[index + 2] = b2;
+            newData[index + 3] = data.data[index + 3];
+            const er = r - r2;
+            const eg = g - g2;
+            const eb = b - b2;
+            const d1 = (y * data.width + x + 1) * 4;
+            const d2 = ((y + 1) * data.width + x - 1) * 4;
+            const d3 = (y * data.width + x) * 4;
+            const d4 = ((y + 1) * data.width + x) * 4;
+            if (x < data.width - 1) {
+                data.data[d1] += (er * 7) / 16;
+                data.data[d1 + 1] += (eg * 7) / 16;
+                data.data[d1 + 2] += (eb * 7) / 16;
+            }
+            if (y < data.height - 1 && x > 0) {
+                data.data[d2] += (er * 3) / 16;
+                data.data[d2 + 1] += (eg * 3) / 16;
+                data.data[d2 + 2] += (eb * 3) / 16;
+            }
+        }
+    }
+    return new ImageData(newData, data.width, data.height);
+}
diff --git a/styles.css b/styles.css
index 94ed7925..ed6fcfc4 100644
--- a/styles.css
+++ b/styles.css
@@ -98,6 +98,7 @@ a {
     height: 32px;
     display: flex;
     justify-content: space-between;
+    gap: 8px;
 }
 
 .fui-settings {

From 60f6aca8863490bc4a0d94d8a868181be606a25b Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Fri, 1 Mar 2024 22:43:11 +0400
Subject: [PATCH 24/38] Black color for custom image preview

---
 src/components/fui/FuiImportWizard.vue  |  4 ++--
 src/core/layers/abstract-image.layer.ts | 11 ++---------
 src/utils.ts                            | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index 6a9de936..4e399d0d 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {Teleport, reactive, ref, toRefs, watch} from 'vue';
-import {processImage, imageDataToImage, imageToImageData} from '../../utils';
+import {processImage, imageDataToImage, imageToImageData, applyColor} from '../../utils';
 const props = defineProps<{
     visible: boolean;
 }>();
@@ -61,7 +61,7 @@ function cancel() {
 }
 
 function save() {
-    imageDataToImage(processImage(imageData, options)).then((img) => {
+    imageDataToImage(applyColor(processImage(imageData, options), '#000000')).then((img) => {
         emit('onSave', img, imageName.value);
     });
 }
diff --git a/src/core/layers/abstract-image.layer.ts b/src/core/layers/abstract-image.layer.ts
index 5ca21295..29a15d1a 100644
--- a/src/core/layers/abstract-image.layer.ts
+++ b/src/core/layers/abstract-image.layer.ts
@@ -1,5 +1,6 @@
 import {TPlatformFeatures} from '../../platforms/platform';
 import {
+    applyColor,
     downloadImage,
     flipImageDataByX,
     flipImageDataByY,
@@ -104,15 +105,7 @@ export abstract class AbstractImageLayer extends AbstractLayer {
     ];
 
     applyColor() {
-        const color = hexToRgb(this.color);
-        this.data.data.forEach((v, i) => {
-            if (i % 4 === 3 && v !== 0) {
-                this.data.data[i - 3] = color.r;
-                this.data.data[i - 2] = color.g;
-                this.data.data[i - 1] = color.b;
-                return v;
-            }
-        });
+        this.data = applyColor(this.data, this.color);
     }
 
     recalculate() {
diff --git a/src/utils.ts b/src/utils.ts
index d5a4f13c..7f9f2d62 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -427,6 +427,21 @@ export function invertImageData(data: ImageData, hexColor: string): ImageData {
     return new ImageData(newData, data.width, data.height);
 }
 
+export function applyColor(image: ImageData, hex: string) {
+    const color = hexToRgb(hex);
+    const newData = new Uint8ClampedArray(image.data.length);
+    image.data.forEach((v, i) => {
+        if (i % 4 === 3 && v !== 0) {
+            newData[i - 3] = color.r;
+            newData[i - 2] = color.g;
+            newData[i - 1] = color.b;
+            newData[i] = v;
+            return v;
+        }
+    });
+    return new ImageData(newData, image.width, image.height);
+}
+
 export function downloadImage(data: ImageData, name: string) {
     const a = document.createElement('a');
     const canvas = document.createElement('canvas');

From 236659d88f273b8f2bdaa8621ec2084f7a4251f3 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sat, 2 Mar 2024 00:10:23 +0400
Subject: [PATCH 25/38] preview auto update

---
 src/components/fui/FuiImportWizard.vue  | 39 ++++++++++++++++---------
 src/core/layers/abstract-image.layer.ts |  1 -
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index 4e399d0d..05ee508a 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {Teleport, reactive, ref, toRefs, watch} from 'vue';
+import {Teleport, nextTick, reactive, ref, toRefs, watch} from 'vue';
 import {processImage, imageDataToImage, imageToImageData, applyColor} from '../../utils';
 const props = defineProps<{
     visible: boolean;
@@ -17,29 +17,47 @@ const options = reactive({
     alpha: true,
     palette: ['#000000', '#FFFFFF']
 });
-const {dither, invert, width, height, proportion} = toRefs(options);
+const {proportion} = toRefs(options);
+
+const width = ref(0);
+const height = ref(0);
+
 const scale = ref(1);
 const scales = [1, 2, 3, 4, 5];
 let image, imageData;
 
 watch(width, (val, oldVal) => {
-    if (oldVal && val && proportion.value && val !== oldVal) {
-        height.value = Math.round(val / proportion.value);
+    if (oldVal && val && proportion.value && val !== oldVal && val < 1000) {
+        options.width = val;
+        nextTick(() => {
+            height.value = Math.round(val / proportion.value);
+            options.height = height.value;
+        });
     }
 });
 
 watch(height, (val, oldVal) => {
-    if (oldVal && val && proportion.value && val !== oldVal) {
-        width.value = Math.round(val * proportion.value);
+    if (oldVal && val && proportion.value && val !== oldVal && val < 1000) {
+        options.height = val;
+        nextTick(() => {
+            width.value = Math.round(val * proportion.value);
+            options.width = width.value;
+        });
     }
 });
 
+watch([options, scale], () => {
+    preview();
+});
+
 function setImage(sourvceImage: HTMLImageElement, name: string) {
     imageName.value = name;
     imageData = imageToImageData(sourvceImage);
     image = sourvceImage;
     options.width = image.width;
     options.height = image.height;
+    width.value = image.width;
+    height.value = image.height;
     options.proportion = image.width / image.height;
     preview();
 }
@@ -92,12 +110,7 @@ defineExpose({
             <div class="fui-form-row">
                 <label class="fui-form-label fui-form-column" for="image-width">
                     Width:
-                    <input
-                        class="fui-form-input fui-form-input__size"
-                        type="number"
-                        v-model="options.width"
-                        id="image-width"
-                    />
+                    <input class="fui-form-input fui-form-input__size" type="number" v-model="width" id="image-width" />
                 </label>
 
                 <label class="fui-form-label fui-form-column" for="image-height">
@@ -106,7 +119,7 @@ defineExpose({
                         class="fui-form-input fui-form-input__size"
                         type="number"
                         min="1"
-                        v-model="options.height"
+                        v-model="height"
                         id="image-height"
                     />
                 </label>
diff --git a/src/core/layers/abstract-image.layer.ts b/src/core/layers/abstract-image.layer.ts
index 29a15d1a..fa00edb9 100644
--- a/src/core/layers/abstract-image.layer.ts
+++ b/src/core/layers/abstract-image.layer.ts
@@ -4,7 +4,6 @@ import {
     downloadImage,
     flipImageDataByX,
     flipImageDataByY,
-    hexToRgb,
     invertImageData,
     rotateImageData
 } from '../../utils';

From 152473bc129c3f562bb094ebd12f5bc5b657e00b Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sat, 2 Mar 2024 00:50:39 +0400
Subject: [PATCH 26/38] Reset image size and fit to screen

---
 src/components/fui/FuiImportWizard.vue | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index 05ee508a..b27e5755 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import {Teleport, nextTick, reactive, ref, toRefs, watch} from 'vue';
 import {processImage, imageDataToImage, imageToImageData, applyColor} from '../../utils';
+import {useSession} from '../../core/session';
 const props = defineProps<{
     visible: boolean;
 }>();
 
 const emit = defineEmits(['onClose', 'onSave']);
+const {display} = toRefs(useSession().state);
 const canvasRef = ref(null);
 const imageName = ref('');
 const options = reactive({
@@ -69,11 +71,18 @@ function preview() {
     canvas.height = options.height;
     canvas.style.width = options.width * scale.value + 'px';
     canvas.style.height = options.height * scale.value + 'px';
-    // const imageData = processImage(image, options);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.putImageData(processImage(imageData, options), 0, 0);
 }
 
+function fitToScreen() {
+    if (display.value.x > display.value.y) {
+        height.value = Math.min(display.value.y, image.height);
+    } else {
+        width.value = Math.min(display.value.x, image.width);
+    }
+}
+
 function cancel() {
     emit('onClose');
 }
@@ -123,6 +132,18 @@ defineExpose({
                         id="image-height"
                     />
                 </label>
+                <!-- reset -->
+                <button
+                    class="button"
+                    style="margin-left: 8px"
+                    @click="
+                        width = image.width;
+                        height = image.height;
+                    "
+                >
+                    Reset
+                </button>
+                <button class="button" style="margin-left: 8px" @click="fitToScreen">Fit to screen size</button>
             </div>
             <div class="fui-form-row">
                 <!-- dither -->

From 38932d67ae90ccc11509134ec8bb832e32af8dd9 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sat, 2 Mar 2024 03:42:17 +0400
Subject: [PATCH 27/38] rescale algorithms

---
 src/components/fui/FuiImportWizard.vue |  31 +++-
 src/core/layers/icon.layer.ts          |   2 +-
 src/utils.ts                           | 198 ++++++++++++++++++++-----
 3 files changed, 192 insertions(+), 39 deletions(-)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index b27e5755..4e6473a2 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -13,6 +13,7 @@ const imageName = ref('');
 const options = reactive({
     dither: true,
     invert: false,
+    resampling: 'nearest',
     width: 0,
     height: 0,
     proportion: 1,
@@ -26,6 +27,17 @@ const height = ref(0);
 
 const scale = ref(1);
 const scales = [1, 2, 3, 4, 5];
+const resamplingTypes = [
+    'none',
+    'nearest',
+    'bilinear',
+    'spline',
+    'lanczos',
+    'gaussian',
+    'mitchell',
+    'mitchell-netravali',
+    'catmull-rom'
+];
 let image, imageData;
 
 watch(width, (val, oldVal) => {
@@ -132,6 +144,15 @@ defineExpose({
                         id="image-height"
                     />
                 </label>
+            </div>
+            <div class="fui-form-row">
+                <!-- resampling type select -->
+                <label class="fui-form-label fui-form-column" for="image-resampling">Resampling algorithm:</label>
+                <select id="image-resampling" class="fui-select__select fui-form-input" v-model="options.resampling">
+                    <option v-for="(p, idx) in resamplingTypes" :key="idx" :value="p">{{ p }}</option>
+                </select>
+            </div>
+            <div class="fui-form-row">
                 <!-- reset -->
                 <button
                     class="button"
@@ -141,9 +162,9 @@ defineExpose({
                         height = image.height;
                     "
                 >
-                    Reset
+                    Reset size
                 </button>
-                <button class="button" style="margin-left: 8px" @click="fitToScreen">Fit to screen size</button>
+                <button class="button" style="margin-left: 8px" @click="fitToScreen">Fit to screen</button>
             </div>
             <div class="fui-form-row">
                 <!-- dither -->
@@ -203,4 +224,10 @@ defineExpose({
 .fui-import-wizard-dialog.visible {
     display: flex;
 }
+.fui-import-wizard-canvas-crop {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+}
 </style>
diff --git a/src/core/layers/icon.layer.ts b/src/core/layers/icon.layer.ts
index e8ca5c35..4ffdd940 100644
--- a/src/core/layers/icon.layer.ts
+++ b/src/core/layers/icon.layer.ts
@@ -1,5 +1,5 @@
 import {TPlatformFeatures} from '../../platforms/platform';
-import {addAlphaChannelToImageData, inverImageDataWithAlpha} from '../../utils';
+import {addAlphaChannelToImageData} from '../../utils';
 import {Point} from '../point';
 import {AbstractImageLayer} from './abstract-image.layer';
 import {EditMode, TLayerModifiers, TModifierType} from './abstract.layer';
diff --git a/src/utils.ts b/src/utils.ts
index 7f9f2d62..56c0687e 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,13 @@
 import {decode, encode} from 'base64-arraybuffer';
 import pako from 'pako';
+
+type RGBColor = {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+};
+
 function bitswap(b) {
     b = ((b & 0xf0) >> 4) | ((b & 0x0f) << 4);
     b = ((b & 0xcc) >> 2) | ((b & 0x33) << 2);
@@ -49,7 +57,7 @@ export async function loadImageDataAsync(src): Promise<ImageData> {
     return ctx.getImageData(0, 0, img.width, img.height);
 }
 
-export function hexToRgb(hexColor: string) {
+export function hexToRgb(hexColor: string): RGBColor {
     const hex = hexColor.replace('#', '');
     const r = parseInt(hex.substring(0, 2), 16);
     const g = parseInt(hex.substring(2, 4), 16);
@@ -82,18 +90,12 @@ export function packColor565(hexColor: string) {
 export function addAlphaChannelToImageData(data: ImageData, color: string) {
     const newData = new Uint8ClampedArray(data.width * data.height * 4);
     const rgb = hexToRgb(color);
-    const colors = new Map<string, number>();
+    // const colors = new Map<string, number>();
     let hasAlphaChannel = false;
     for (let i = 0; i < data.data.length; i += 4) {
         if (data.data[i + 3] == 0) {
             hasAlphaChannel = true;
-        } else {
-            const hexColor = rgbToHex(Array.from(data.data.slice(i, i + 3)));
-            if (colors.has(hexColor)) {
-                colors.set(hexColor, colors.get(hexColor) + 1);
-            } else {
-                colors.set(hexColor, 1);
-            }
+            break;
         }
     }
     if (hasAlphaChannel) {
@@ -111,12 +113,14 @@ export function addAlphaChannelToImageData(data: ImageData, color: string) {
             }
         }
     } else {
-        // get main color and set alpha for all other colors
-        const sortedColors = Array.from(colors).sort((a, b) => b[1] - a[1]);
-        const alphaColor = sortedColors[0][0];
+        // alpha channnel color is white by default, else just invert
+        const alphaColor = {r: 255, g: 255, b: 255};
         for (let i = 0; i < data.data.length; i += 4) {
-            const hexColor = rgbToHex(Array.from(data.data.slice(i, i + 3)));
-            if (hexColor != alphaColor && data.data[i + 3] > 175) {
+            // if color is closest to alphaColor or alpha is more than 50%
+            if (
+                data.data[i + 3] > 175 &&
+                !isAlphaColor(alphaColor, [data.data[i], data.data[i + 1], data.data[i + 2]])
+            ) {
                 newData[i] = rgb.r;
                 newData[i + 1] = rgb.g;
                 newData[i + 2] = rgb.b;
@@ -132,26 +136,8 @@ export function addAlphaChannelToImageData(data: ImageData, color: string) {
     return new ImageData(newData, data.width, data.height);
 }
 
-export function inverImageDataWithAlpha(imgData: ImageData) {
-    const data = imgData.data;
-    for (let i = 0; i < data.length; i += 4) {
-        let [r, g, b, a] = [data[i], data[i + 1], data[i + 2], data[i + 3]];
-        // if alpha more than 50%
-        if (r + g + b > 255 / 2 || a < 255 / 2) {
-            // transparent
-            a = 0;
-            r = g = b = 0;
-        } else {
-            // white pixels
-            r = g = b = 255;
-            a = 255;
-        }
-        data[i] = r;
-        data[i + 1] = g;
-        data[i + 2] = b;
-        data[i + 3] = a;
-    }
-    return imgData;
+function isAlphaColor(alpha: RGBColor, color: number[]) {
+    return Math.abs(alpha.r - color[0]) < 15 && Math.abs(alpha.g - color[1]) < 15 && Math.abs(alpha.b - color[2]) < 15;
 }
 
 export function imageToImageData(img: HTMLImageElement): ImageData {
@@ -455,7 +441,35 @@ export function downloadImage(data: ImageData, name: string) {
 }
 
 export function processImage(data: ImageData, options: any, color: string = '#FFFFFF') {
-    data = scaleImageData(data, options.width, options.height);
+    switch (options.resampling) {
+        case 'nearest':
+            data = resampleNearest(data, options.width, options.height);
+            break;
+        case 'bilinear':
+            data = resampleBilinear(data, options.width, options.height);
+            break;
+        case 'lanczos':
+            data = resampleWithFilter(data, options.width, options.height, lanczosFilter);
+            break;
+        case 'gaussian':
+            data = resampleWithFilter(data, options.width, options.height, gaussianFilter);
+            break;
+        case 'mitchell':
+            data = resampleWithFilter(data, options.width, options.height, mitchellFilter);
+            break;
+        case 'mitchell-netravali':
+            data = resampleWithFilter(data, options.width, options.height, mitchellNetravaliFilter);
+            break;
+        case 'catmull-rom':
+            data = resampleWithFilter(data, options.width, options.height, catmullRomFilter);
+            break;
+        case 'bspline':
+            data = resampleWithFilter(data, options.width, options.height, bsplineFilter);
+            break;
+        default:
+            data = scaleImage(data, options.width, options.height);
+            break;
+    }
     if (options.dither) {
         data = floydSteinbergDithering(data, options.palette);
     }
@@ -468,7 +482,62 @@ export function processImage(data: ImageData, options: any, color: string = '#FF
     return data;
 }
 
-export function scaleImageData(data: ImageData, width: number, height: number) {
+export function grayscale(data: ImageData) {
+    const newData = new Uint8ClampedArray(data.data.length);
+    for (let i = 0; i < data.data.length; i += 4) {
+        const avg = (data.data[i] + data.data[i + 1] + data.data[i + 2]) / 3;
+        newData[i] = avg;
+        newData[i + 1] = avg;
+        newData[i + 2] = avg;
+        newData[i + 3] = data.data[i + 3];
+    }
+    return new ImageData(newData, data.width, data.height);
+}
+
+export function scaleImage(data: ImageData, width: number, height: number) {
+    const canvas = new OffscreenCanvas(data.width, data.height);
+    const ctx = canvas.getContext('2d');
+    ctx.putImageData(data, 0, 0);
+    const canvas2 = new OffscreenCanvas(width, height);
+    const ctx2 = canvas2.getContext('2d');
+    ctx2.imageSmoothingEnabled = false;
+    ctx2.drawImage(canvas, 0, 0, width, height);
+    return ctx2.getImageData(0, 0, width, height);
+}
+
+export function resampleBilinear(data: ImageData, width: number, height: number) {
+    // scaling with bilinear interpolation
+    const newData = new Uint8ClampedArray(width * height * 4);
+    const xRatio = data.width / width;
+    const yRatio = data.height / height;
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const px = x * xRatio;
+            const py = y * yRatio;
+            const x1 = Math.floor(px);
+            const x2 = Math.ceil(px);
+            const y1 = Math.floor(py);
+            const y2 = Math.ceil(py);
+            const dx = px - x1;
+            const dy = py - y1;
+            const index1 = (y1 * data.width + x1) * 4;
+            const index2 = (y1 * data.width + x2) * 4;
+            const index3 = (y2 * data.width + x1) * 4;
+            const index4 = (y2 * data.width + x2) * 4;
+            const newIndex = (y * width + x) * 4;
+            for (let j = 0; j < 4; j++) {
+                newData[newIndex + j] =
+                    data.data[index1 + j] * (1 - dx) * (1 - dy) +
+                    data.data[index2 + j] * dx * (1 - dy) +
+                    data.data[index3 + j] * (1 - dx) * dy +
+                    data.data[index4 + j] * dx * dy;
+            }
+        }
+    }
+    return new ImageData(newData, width, height);
+}
+
+export function resampleNearest(data: ImageData, width: number, height: number) {
     // scaling with nearest neighbor algorithm
     const newData = new Uint8ClampedArray(width * height * 4);
     const xRatio = data.width / width;
@@ -486,6 +555,63 @@ export function scaleImageData(data: ImageData, width: number, height: number) {
     return new ImageData(newData, width, height);
 }
 
+export function resampleWithFilter(data: ImageData, width: number, height: number, filter: Function) {
+    const newData = new Uint8ClampedArray(width * height * 4);
+    const xRatio = data.width / width;
+    const yRatio = data.height / height;
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            let r = 0,
+                g = 0,
+                b = 0,
+                a = 0;
+            for (let j = Math.floor(y * yRatio); j < Math.ceil(y * yRatio + 1); j++) {
+                for (let i = Math.floor(x * xRatio); i < Math.ceil(x * xRatio + 1); i++) {
+                    if (i >= 0 && i < data.width && j >= 0 && j < data.height) {
+                        const index = (j * data.width + i) * 4;
+                        const dx = Math.abs(x * xRatio - i);
+                        const dy = Math.abs(y * yRatio - j);
+                        const weight = filter(dx) * filter(dy);
+                        r += data.data[index] * weight;
+                        g += data.data[index + 1] * weight;
+                        b += data.data[index + 2] * weight;
+                        a += data.data[index + 3] * weight;
+                    }
+                }
+            }
+            const newIndex = (y * width + x) * 4;
+            newData[newIndex] = r;
+            newData[newIndex + 1] = g;
+            newData[newIndex + 2] = b;
+            newData[newIndex + 3] = a;
+        }
+    }
+    return new ImageData(newData, width, height);
+}
+
+function mitchellFilter(x) {
+    return x < 1 ? (16 + x * x * (21 * x - 36)) / 18 : x < 2 ? (32 + x * (-60 + x * (36 - 7 * x))) / 18 : 0;
+}
+
+function catmullRomFilter(x) {
+    return x < 1 ? 0.5 * (2 + x * x * (-5 + 3 * x)) : x < 2 ? 0.5 * (4 + x * (-8 + x * (5 - x))) : 0;
+}
+function gaussianFilter(x) {
+    return Math.exp(-2 * x * x);
+}
+
+function mitchellNetravaliFilter(x) {
+    return x < 1 ? (21 + x * x * (30 * x - 36)) / 18 : x < 2 ? (39 + x * (-54 + x * (27 - 5 * x))) / 18 : 0;
+}
+
+function bsplineFilter(x) {
+    return x < 1 ? (4 + x * x * (-6 + 3 * x)) / 6 : x < 2 ? (8 + x * (-12 + x * (6 - x))) / 6 : 0;
+}
+
+function lanczosFilter(x) {
+    return x == 0 ? 1 : (Math.sin(Math.PI * x) * Math.sin((Math.PI * x) / 3)) / ((Math.PI * x * (Math.PI * x)) / 3);
+}
+
 export function floydSteinbergDithering(data: ImageData, palette: string[]) {
     const newData = new Uint8ClampedArray(data.data.length);
     const colors = palette.map((c) => hexToRgb(c));

From 763b267043bc7627ee8d0601ebd46461e76fdaf8 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sat, 2 Mar 2024 04:07:08 +0400
Subject: [PATCH 28/38] image brightness

---
 src/components/fui/FuiImportWizard.vue | 13 +++++++++++++
 src/utils.ts                           | 14 ++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index 4e6473a2..adcd4053 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -16,6 +16,7 @@ const options = reactive({
     resampling: 'nearest',
     width: 0,
     height: 0,
+    brightness: 0,
     proportion: 1,
     alpha: true,
     palette: ['#000000', '#FFFFFF']
@@ -167,6 +168,18 @@ defineExpose({
                 <button class="button" style="margin-left: 8px" @click="fitToScreen">Fit to screen</button>
             </div>
             <div class="fui-form-row">
+                <!-- brightness -->
+                <label class="fui-form-label fui-form-column" for="image-brightness">
+                    Brightness:
+                    <input
+                        class="fui-form-input fui-form-input__size"
+                        type="number"
+                        min="-100"
+                        max="100"
+                        v-model="options.brightness"
+                        id="image-brightness"
+                    />
+                </label>
                 <!-- dither -->
                 <label class="fui-form-label fui-form-column" for="image-dithering">
                     Dithering:
diff --git a/src/utils.ts b/src/utils.ts
index 56c0687e..fd8722fb 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -441,6 +441,9 @@ export function downloadImage(data: ImageData, name: string) {
 }
 
 export function processImage(data: ImageData, options: any, color: string = '#FFFFFF') {
+    if (options.brightness) {
+        data = imageBrightness(data, options.brightness);
+    }
     switch (options.resampling) {
         case 'nearest':
             data = resampleNearest(data, options.width, options.height);
@@ -482,6 +485,17 @@ export function processImage(data: ImageData, options: any, color: string = '#FF
     return data;
 }
 
+export function imageBrightness(data: ImageData, brightness: number) {
+    const newData = new Uint8ClampedArray(data.data.length);
+    for (let i = 0; i < data.data.length; i += 4) {
+        newData[i] = Math.min(255, data.data[i] + brightness);
+        newData[i + 1] = Math.min(255, data.data[i + 1] + brightness);
+        newData[i + 2] = Math.min(255, data.data[i + 2] + brightness);
+        newData[i + 3] = data.data[i + 3];
+    }
+    return new ImageData(newData, data.width, data.height);
+}
+
 export function grayscale(data: ImageData) {
     const newData = new Uint8ClampedArray(data.data.length);
     for (let i = 0; i < data.data.length; i += 4) {

From b27d9eb8d43e18f6c5765a8b4788bc32aae29c7d Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sat, 2 Mar 2024 04:09:42 +0400
Subject: [PATCH 29/38] Image contrast

---
 src/components/fui/FuiImportWizard.vue | 13 +++++++++++++
 src/utils.ts                           | 13 +++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index adcd4053..0e7b47ba 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -17,6 +17,7 @@ const options = reactive({
     width: 0,
     height: 0,
     brightness: 0,
+    contrast: 0,
     proportion: 1,
     alpha: true,
     palette: ['#000000', '#FFFFFF']
@@ -180,6 +181,18 @@ defineExpose({
                         id="image-brightness"
                     />
                 </label>
+                <!-- contrast -->
+                <label class="fui-form-label fui-form-column" for="image-contrast">
+                    Contrast:
+                    <input
+                        class="fui-form-input fui-form-input__size"
+                        type="number"
+                        min="-100"
+                        max="100"
+                        v-model="options.contrast"
+                        id="image-contrast"
+                    />
+                </label>
                 <!-- dither -->
                 <label class="fui-form-label fui-form-column" for="image-dithering">
                     Dithering:
diff --git a/src/utils.ts b/src/utils.ts
index fd8722fb..721badd3 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -441,8 +441,8 @@ export function downloadImage(data: ImageData, name: string) {
 }
 
 export function processImage(data: ImageData, options: any, color: string = '#FFFFFF') {
-    if (options.brightness) {
-        data = imageBrightness(data, options.brightness);
+    if (options.brightness || options.contrast) {
+        data = imageBrightnessAndContrast(data, options.brightness, options.contrast);
     }
     switch (options.resampling) {
         case 'nearest':
@@ -485,12 +485,13 @@ export function processImage(data: ImageData, options: any, color: string = '#FF
     return data;
 }
 
-export function imageBrightness(data: ImageData, brightness: number) {
+export function imageBrightnessAndContrast(data: ImageData, brightness: number, contrast: number) {
+    const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
     const newData = new Uint8ClampedArray(data.data.length);
     for (let i = 0; i < data.data.length; i += 4) {
-        newData[i] = Math.min(255, data.data[i] + brightness);
-        newData[i + 1] = Math.min(255, data.data[i + 1] + brightness);
-        newData[i + 2] = Math.min(255, data.data[i + 2] + brightness);
+        newData[i] = factor * (data.data[i] - 128) + 128 + brightness;
+        newData[i + 1] = factor * (data.data[i + 1] - 128) + 128 + brightness;
+        newData[i + 2] = factor * (data.data[i + 2] - 128) + 128 + brightness;
         newData[i + 3] = data.data[i + 3];
     }
     return new ImageData(newData, data.width, data.height);

From 23671d574c7812c7241f1b25e5b8673154689f79 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sat, 2 Mar 2024 04:10:29 +0400
Subject: [PATCH 30/38] reset import options

---
 src/components/fui/FuiImportWizard.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index 0e7b47ba..b995720e 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -67,6 +67,14 @@ watch([options, scale], () => {
 });
 
 function setImage(sourvceImage: HTMLImageElement, name: string) {
+    // reset options
+    options.brightness = 0;
+    options.contrast = 0;
+    options.dither = true;
+    options.invert = false;
+    options.resampling = 'nearest';
+    scale.value = 1;
+
     imageName.value = name;
     imageData = imageToImageData(sourvceImage);
     image = sourvceImage;

From cd4f1c73dcec036b2d01b45ff8aa0fca939c4bfd Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sat, 2 Mar 2024 14:53:31 +0400
Subject: [PATCH 31/38] Invert pallete

---
 src/components/fui/FuiImportWizard.vue | 52 +++++++++++++++++++++-----
 src/utils.ts                           |  6 ++-
 2 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index b995720e..9396ed4c 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {Teleport, nextTick, reactive, ref, toRefs, watch} from 'vue';
-import {processImage, imageDataToImage, imageToImageData, applyColor} from '../../utils';
+import {processImage, imageDataToImage, imageToImageData, applyColor, debounce} from '../../utils';
 import {useSession} from '../../core/session';
 const props = defineProps<{
     visible: boolean;
@@ -13,6 +13,7 @@ const imageName = ref('');
 const options = reactive({
     dither: true,
     invert: false,
+    invertPalette: false,
     resampling: 'nearest',
     width: 0,
     height: 0,
@@ -62,8 +63,9 @@ watch(height, (val, oldVal) => {
     }
 });
 
+const debouncedPreview = debounce(preview, 250);
 watch([options, scale], () => {
-    preview();
+    debouncedPreview();
 });
 
 function setImage(sourvceImage: HTMLImageElement, name: string) {
@@ -74,15 +76,22 @@ function setImage(sourvceImage: HTMLImageElement, name: string) {
     options.invert = false;
     options.resampling = 'nearest';
     scale.value = 1;
-
+    //
     imageName.value = name;
     imageData = imageToImageData(sourvceImage);
     image = sourvceImage;
-    options.width = image.width;
-    options.height = image.height;
-    width.value = image.width;
-    height.value = image.height;
+
     options.proportion = image.width / image.height;
+    if (display.value.x > display.value.y) {
+        options.height = Math.min(display.value.y, image.height);
+        options.width = Math.round(options.height * options.proportion);
+    } else {
+        options.height = Math.round(options.width / options.proportion);
+        options.width = Math.min(display.value.x, image.width);
+    }
+    width.value = options.width;
+    height.value = options.height;
+    scale.value = 2;
     preview();
 }
 
@@ -124,7 +133,7 @@ defineExpose({
         <div class="fui-import-wizard-dialog" :class="{visible}">
             <div class="fui-form-row fui-form-header">Image preview</div>
             <div class="fui-form-row fui-import-wizard-canvas-wrapper" style="width: 400px; height: 300px">
-                <canvas ref="canvasRef" style="width: 100%; height: 100%"></canvas>
+                <canvas ref="canvasRef" class="grid"></canvas>
             </div>
             <div class="fui-form-row">
                 <!-- image name -->
@@ -201,12 +210,23 @@ defineExpose({
                         id="image-contrast"
                     />
                 </label>
+            </div>
+            <div class="fui-form-row">
                 <!-- dither -->
                 <label class="fui-form-label fui-form-column" for="image-dithering">
                     Dithering:
                     <input class="fui-form-checkbox" type="checkbox" v-model="options.dither" id="image-dithering" />
                 </label>
-
+                <!-- invert palette -->
+                <label class="fui-form-label fui-form-column" for="image-invert-palette">
+                    Invert palette:
+                    <input
+                        class="fui-form-checkbox"
+                        type="checkbox"
+                        v-model="options.invertPalette"
+                        id="image-invert-palette"
+                    />
+                </label>
                 <!-- invert -->
                 <label class="fui-form-label fui-form-column" for="image-invert">
                     Inverting:
@@ -216,13 +236,25 @@ defineExpose({
 
             <div class="buttons-bottom">
                 <button class="button button_danger fui-display-custom-dialog__cancel" @click="cancel">Cancel</button>
-                <button class="button fui-display-custom-dialog__save" @click="preview">Preview</button>
                 <button class="button fui-display-custom-dialog__save" @click="save">Import</button>
             </div>
         </div>
     </Teleport>
 </template>
 <style lang="css" scoped>
+.grid {
+    position: relative;
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-image: linear-gradient(to right, #000000 0.1px, transparent 0.5px),
+            linear-gradient(to bottom, #000000 0.1px, transparent 0.5px);
+        background-size: v-bind(scale) + 'px ' + v-bind(scale) + 'px';
+        opacity: 0.6;
+        z-index: 1;
+    }
+}
 .fui-import-wizard-dialog {
     display: none;
     position: fixed;
diff --git a/src/utils.ts b/src/utils.ts
index 721badd3..db2b1152 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -441,6 +441,7 @@ export function downloadImage(data: ImageData, name: string) {
 }
 
 export function processImage(data: ImageData, options: any, color: string = '#FFFFFF') {
+    data = grayscale(data);
     if (options.brightness || options.contrast) {
         data = imageBrightnessAndContrast(data, options.brightness, options.contrast);
     }
@@ -474,7 +475,10 @@ export function processImage(data: ImageData, options: any, color: string = '#FF
             break;
     }
     if (options.dither) {
-        data = floydSteinbergDithering(data, options.palette);
+        data = floydSteinbergDithering(
+            data,
+            options.invertPalette ? options.palette.slice(0).reverse() : options.palette
+        );
     }
     if (options.alpha) {
         data = addAlphaChannelToImageData(data, color);

From 24c4c950fb74545e3755b97445815e29ac3af61b Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sun, 3 Mar 2024 13:45:14 +0400
Subject: [PATCH 32/38] Image crop

---
 src/components/fui/FuiFile.vue         |  18 +-
 src/components/fui/FuiImportWizard.vue | 250 +++++++++++++++++++++----
 src/utils.ts                           |  19 +-
 3 files changed, 238 insertions(+), 49 deletions(-)

diff --git a/src/components/fui/FuiFile.vue b/src/components/fui/FuiFile.vue
index 75695abc..a85e811b 100644
--- a/src/components/fui/FuiFile.vue
+++ b/src/components/fui/FuiFile.vue
@@ -39,14 +39,16 @@ async function onFileChange(e) {
     resetFileInput();
 }
 
-function saveImage(image: HTMLImageElement, name: string) {
-    customImages.value.push({
-        name: name,
-        width: image.width,
-        height: image.height,
-        image: image,
-        isCustom: true
-    });
+function saveImage(image: HTMLImageElement, name: string, width: number, height: number) {
+    const nameRegex = new RegExp(`^${name}(_\\d+)?$`);
+    const founded = customImages.value.filter((item) => nameRegex.test(item.name));
+    if (founded.length > 0) {
+        const last = founded[founded.length - 1];
+        const lastNumber = last.name.match(/_(\d+)$/);
+        const number = lastNumber ? parseInt(lastNumber[1]) + 1 : 1;
+        name = `${name}_${number}`;
+    }
+    customImages.value.push({name, width, height, image, isCustom: true});
     emit('updateFuiImages', customImages.value);
     emit('setActiveTab', 'images');
     openWizard.value = false;
diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index 9396ed4c..f6f9f8a8 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import {Teleport, nextTick, reactive, ref, toRefs, watch} from 'vue';
-import {processImage, imageDataToImage, imageToImageData, applyColor, debounce} from '../../utils';
+import {Teleport, computed, nextTick, reactive, ref, toRefs, watch} from 'vue';
+import {processImage, imageDataToImage, imageToImageData, applyColor, cropImage, debounce} from '../../utils';
 import {useSession} from '../../core/session';
+import {Rect} from '../../core/rect';
+import {Point} from '../../core/point';
 const props = defineProps<{
     visible: boolean;
 }>();
@@ -28,6 +30,8 @@ const {proportion} = toRefs(options);
 const width = ref(0);
 const height = ref(0);
 
+const layerSize = ref(new Rect());
+
 const scale = ref(1);
 const scales = [1, 2, 3, 4, 5];
 const resamplingTypes = [
@@ -63,24 +67,71 @@ watch(height, (val, oldVal) => {
     }
 });
 
+const gridSize = computed(() => {
+    return `${scale.value}px ${scale.value}px`;
+});
+
 const debouncedPreview = debounce(preview, 250);
-watch([options, scale], () => {
+
+watch(options, () => {
     debouncedPreview();
 });
 
+watch(scale, () => {
+    preview();
+});
+
+function startCrop(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const pointType = target.classList[0] == 'crop' ? 'center' : Array.from(target.classList)[0].replace('crop-', '');
+    const rect = layerSize.value.clone();
+    const startPoint = new Point(event.clientX, event.clientY);
+    const startRect = layerSize.value.clone();
+    const mouseMove = (e: MouseEvent) => {
+        const delta = new Point(e.clientX, e.clientY).subtract(startPoint).divide(scale.value);
+        if (pointType == 'center') {
+            rect.x = startRect.x + delta.x;
+            rect.y = startRect.y + delta.y;
+        } else if (pointType === 'se') {
+            rect.w = startRect.w + delta.x;
+            rect.h = startRect.h + delta.y;
+        } else if (pointType === 'nw') {
+            rect.x = startRect.x + delta.x;
+            rect.y = startRect.y + delta.y;
+            rect.w = startRect.w - delta.x;
+            rect.h = startRect.h - delta.y;
+        } else if (pointType === 'ne') {
+            rect.y = startRect.y + delta.y;
+            rect.w = startRect.w + delta.x;
+            rect.h = startRect.h - delta.y;
+        } else if (pointType === 'sw') {
+            rect.x = startRect.x + delta.x;
+            rect.w = startRect.w - delta.x;
+            rect.h = startRect.h + delta.y;
+        }
+
+        // limit crop rect to image size
+        if (rect.x >= 0 && rect.x + rect.w <= options.width) {
+            layerSize.value.x = Math.ceil(rect.x);
+            layerSize.value.w = Math.floor(rect.w);
+        }
+        if (rect.y >= 0 && rect.y + rect.h <= options.height) {
+            layerSize.value.y = Math.ceil(rect.y);
+            layerSize.value.h = Math.floor(rect.h);
+        }
+    };
+    const mouseUp = () => {
+        window.removeEventListener('mousemove', mouseMove);
+        window.removeEventListener('mouseup', mouseUp);
+    };
+    window.addEventListener('mousemove', mouseMove);
+    window.addEventListener('mouseup', mouseUp);
+}
+
 function setImage(sourvceImage: HTMLImageElement, name: string) {
-    // reset options
-    options.brightness = 0;
-    options.contrast = 0;
-    options.dither = true;
-    options.invert = false;
-    options.resampling = 'nearest';
-    scale.value = 1;
-    //
     imageName.value = name;
     imageData = imageToImageData(sourvceImage);
     image = sourvceImage;
-
     options.proportion = image.width / image.height;
     if (display.value.x > display.value.y) {
         options.height = Math.min(display.value.y, image.height);
@@ -89,6 +140,10 @@ function setImage(sourvceImage: HTMLImageElement, name: string) {
         options.height = Math.round(options.width / options.proportion);
         options.width = Math.min(display.value.x, image.width);
     }
+    layerSize.value.w = options.width;
+    layerSize.value.h = options.height;
+    layerSize.value.x = 0;
+    layerSize.value.y = 0;
     width.value = options.width;
     height.value = options.height;
     scale.value = 2;
@@ -96,6 +151,7 @@ function setImage(sourvceImage: HTMLImageElement, name: string) {
 }
 
 function preview() {
+    if (!imageData) return;
     const canvas = canvasRef.value;
     const ctx = canvas.getContext('2d');
     canvas.width = options.width;
@@ -114,13 +170,35 @@ function fitToScreen() {
     }
 }
 
+function resetSize() {
+    width.value = image.width;
+    height.value = image.height;
+    preview();
+}
+
+function reset() {
+    options.brightness = 0;
+    options.contrast = 0;
+    options.dither = true;
+    options.invert = false;
+    options.resampling = 'nearest';
+    layerSize.value.w = options.width;
+    layerSize.value.h = options.height;
+    layerSize.value.x = 0;
+    layerSize.value.y = 0;
+    image = null;
+    imageData = null;
+}
+
 function cancel() {
     emit('onClose');
 }
 
 function save() {
-    imageDataToImage(applyColor(processImage(imageData, options), '#000000')).then((img) => {
-        emit('onSave', img, imageName.value);
+    const imgData = applyColor(cropImage(processImage(imageData, options), layerSize.value.clone().round()), '#000000');
+    imageDataToImage(imgData).then((img) => {
+        emit('onSave', img, imageName.value, imgData.width, imgData.height);
+        reset();
     });
 }
 
@@ -133,7 +211,24 @@ defineExpose({
         <div class="fui-import-wizard-dialog" :class="{visible}">
             <div class="fui-form-row fui-form-header">Image preview</div>
             <div class="fui-form-row fui-import-wizard-canvas-wrapper" style="width: 400px; height: 300px">
-                <canvas ref="canvasRef" class="grid"></canvas>
+                <div class="canvasContainer grid" :style="{width: width * scale + 'px', height: height * scale + 'px'}">
+                    <canvas ref="canvasRef"></canvas>
+                    <div
+                        class="crop"
+                        @mousedown="startCrop"
+                        :style="{
+                            width: scale * layerSize.w + 'px',
+                            height: scale * layerSize.h + 'px',
+                            left: scale * layerSize.x + 'px',
+                            top: scale * layerSize.y + 'px'
+                        }"
+                    >
+                        <div class="crop-nw"></div>
+                        <div class="crop-ne"></div>
+                        <div class="crop-sw"></div>
+                        <div class="crop-se"></div>
+                    </div>
+                </div>
             </div>
             <div class="fui-form-row">
                 <!-- image name -->
@@ -164,6 +259,50 @@ defineExpose({
                     />
                 </label>
             </div>
+
+            <div class="fui-form-row">
+                <label class="fui-form-label fui-form-column" for="layer-width">
+                    Layer width:
+                    <input
+                        class="fui-form-input fui-form-input__size"
+                        type="number"
+                        v-model="layerSize.w"
+                        id="layer-width"
+                    />
+                </label>
+
+                <label class="fui-form-label fui-form-column" for="layer-height">
+                    Layer height:
+                    <input
+                        class="fui-form-input fui-form-input__size"
+                        type="number"
+                        min="1"
+                        v-model="layerSize.h"
+                        id="layer-height"
+                    />
+                </label>
+
+                <label class="fui-form-label fui-form-column" for="layer-x">
+                    Layer X:
+                    <input
+                        class="fui-form-input fui-form-input__size"
+                        type="number"
+                        v-model="layerSize.x"
+                        id="layer-x"
+                    />
+                </label>
+
+                <label class="fui-form-label fui-form-column" for="layer-y">
+                    Layer Y:
+                    <input
+                        class="fui-form-input fui-form-input__size"
+                        type="number"
+                        v-model="layerSize.y"
+                        id="layer-y"
+                    />
+                </label>
+            </div>
+
             <div class="fui-form-row">
                 <!-- resampling type select -->
                 <label class="fui-form-label fui-form-column" for="image-resampling">Resampling algorithm:</label>
@@ -173,16 +312,7 @@ defineExpose({
             </div>
             <div class="fui-form-row">
                 <!-- reset -->
-                <button
-                    class="button"
-                    style="margin-left: 8px"
-                    @click="
-                        width = image.width;
-                        height = image.height;
-                    "
-                >
-                    Reset size
-                </button>
+                <button class="button" style="margin-left: 8px" @click="resetSize">Reset size</button>
                 <button class="button" style="margin-left: 8px" @click="fitToScreen">Fit to screen</button>
             </div>
             <div class="fui-form-row">
@@ -242,18 +372,8 @@ defineExpose({
     </Teleport>
 </template>
 <style lang="css" scoped>
-.grid {
-    position: relative;
-    &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-image: linear-gradient(to right, #000000 0.1px, transparent 0.5px),
-            linear-gradient(to bottom, #000000 0.1px, transparent 0.5px);
-        background-size: v-bind(scale) + 'px ' + v-bind(scale) + 'px';
-        opacity: 0.6;
-        z-index: 1;
-    }
+.fui-form-input__size {
+    width: 60px;
 }
 .fui-import-wizard-dialog {
     display: none;
@@ -279,13 +399,15 @@ defineExpose({
     overflow: auto;
     position: relative;
 }
+.fui-import-wizard-canvas-wrapper .canvasContainer,
 .fui-import-wizard-canvas-wrapper canvas {
-    position: absolute;
+    /* position: absolute; */
     background-color: black;
-    left: 50%;
+    /* left: 50%;
     top: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%); */
     image-rendering: pixelated;
+    margin: auto;
 }
 .fui-import-wizard-dialog.visible {
     display: flex;
@@ -296,4 +418,52 @@ defineExpose({
     overflow: hidden;
     position: relative;
 }
+.grid {
+    position: relative;
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-image: linear-gradient(to right, #999999 0.1px, transparent 0.5px),
+            linear-gradient(to bottom, #999999 0.1px, transparent 0.5px);
+        background-size: v-bind(gridSize);
+        opacity: 0.6;
+        z-index: 1;
+    }
+}
+.crop {
+    position: absolute;
+    border: 1px solid #2196f3;
+    z-index: 3;
+    box-shadow: 0 0 0 9999px rgb(0 0 0 / 77%);
+}
+.crop .crop-nw,
+.crop .crop-ne,
+.crop .crop-sw,
+.crop .crop-se {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    z-index: 2;
+}
+.crop .crop-nw {
+    top: 0;
+    left: 0;
+    cursor: nw-resize;
+}
+.crop .crop-ne {
+    top: 0;
+    right: 0;
+    cursor: ne-resize;
+}
+.crop .crop-sw {
+    bottom: 0;
+    left: 0;
+    cursor: sw-resize;
+}
+.crop .crop-se {
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+}
 </style>
diff --git a/src/utils.ts b/src/utils.ts
index db2b1152..37fcaf05 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,7 @@
 import {decode, encode} from 'base64-arraybuffer';
 import pako from 'pako';
+import {Rect} from './core/rect';
+import {UnwrapRef} from 'vue';
 
 type RGBColor = {
     r: number;
@@ -483,7 +485,7 @@ export function processImage(data: ImageData, options: any, color: string = '#FF
     if (options.alpha) {
         data = addAlphaChannelToImageData(data, color);
     }
-    if (options.invert) {
+    if (!options.invert) {
         data = invertImageData(data, color);
     }
     return data;
@@ -513,6 +515,21 @@ export function grayscale(data: ImageData) {
     return new ImageData(newData, data.width, data.height);
 }
 
+export function cropImage(data: ImageData, rect: UnwrapRef<Rect>) {
+    const newData = new Uint8ClampedArray(rect.w * rect.h * 4);
+    for (let y = rect.y; y < rect.y + rect.h; y++) {
+        for (let x = rect.x; x < rect.x + rect.w; x++) {
+            const index = (y * data.width + x) * 4;
+            const newIndex = ((y - rect.y) * rect.w + (x - rect.x)) * 4;
+            newData[newIndex] = data.data[index];
+            newData[newIndex + 1] = data.data[index + 1];
+            newData[newIndex + 2] = data.data[index + 2];
+            newData[newIndex + 3] = data.data[index + 3];
+        }
+    }
+    return new ImageData(newData, rect.w, rect.h);
+}
+
 export function scaleImage(data: ImageData, width: number, height: number) {
     const canvas = new OffscreenCanvas(data.width, data.height);
     const ctx = canvas.getContext('2d');

From 0e14dc2ffe1ac225c85e24f82a7b4914aef4ef41 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Sun, 3 Mar 2024 15:42:06 +0400
Subject: [PATCH 33/38] grayscale optional

---
 src/components/fui/FuiImportWizard.vue | 6 ++++++
 src/utils.ts                           | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index f6f9f8a8..1bbeb84c 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -15,6 +15,7 @@ const imageName = ref('');
 const options = reactive({
     dither: true,
     invert: false,
+    grayscale: false,
     invertPalette: false,
     resampling: 'nearest',
     width: 0,
@@ -342,6 +343,11 @@ defineExpose({
                 </label>
             </div>
             <div class="fui-form-row">
+                <!-- grayscalte first -->
+                <label class="fui-form-label fui-form-column" for="image-grayscale">
+                    Grayscale before:
+                    <input class="fui-form-checkbox" type="checkbox" v-model="options.grayscale" id="image-grayscale" />
+                </label>
                 <!-- dither -->
                 <label class="fui-form-label fui-form-column" for="image-dithering">
                     Dithering:
diff --git a/src/utils.ts b/src/utils.ts
index 37fcaf05..5394fe12 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -443,7 +443,9 @@ export function downloadImage(data: ImageData, name: string) {
 }
 
 export function processImage(data: ImageData, options: any, color: string = '#FFFFFF') {
-    data = grayscale(data);
+    if (options.grayscale) {
+        data = grayscale(data);
+    }
     if (options.brightness || options.contrast) {
         data = imageBrightnessAndContrast(data, options.brightness, options.contrast);
     }

From abffdb7cb33d1c92c3ea717bc0052b31ad59c6c8 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Mon, 4 Mar 2024 00:08:15 +0400
Subject: [PATCH 34/38] Removed debugger

---
 src/core/session.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/core/session.ts b/src/core/session.ts
index 2bb53439..79047fdc 100644
--- a/src/core/session.ts
+++ b/src/core/session.ts
@@ -19,6 +19,7 @@ import {TextLayer} from './layers/text.layer';
 import platforms from './platforms';
 import {Point} from './point';
 import {paramsToState} from './decorators/mapping';
+import { iconsList } from '../icons/icons';
 
 const sessions = new Map<string, UnwrapRef<Session>>();
 let currentSessionId = null;
@@ -31,6 +32,7 @@ type TSessionState = {
     scale: Point;
     lock: boolean;
     customImages: TLayerImageData[];
+    icons: 
     isPublic: boolean;
 };
 
@@ -62,6 +64,7 @@ export class Session {
         layers: [],
         scale: new Point(4, 4),
         customImages: [],
+        icons: iconsList,
         isPublic: false
     });
 

From 955130c99c07c9196ac8d905ccd7c2057e86fcd5 Mon Sep 17 00:00:00 2001
From: deadlink <deadlink182@gmail.com>
Date: Mon, 4 Mar 2024 01:12:28 +0400
Subject: [PATCH 35/38] fix

---
 src/core/session.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/core/session.ts b/src/core/session.ts
index 79047fdc..126d928a 100644
--- a/src/core/session.ts
+++ b/src/core/session.ts
@@ -19,7 +19,7 @@ import {TextLayer} from './layers/text.layer';
 import platforms from './platforms';
 import {Point} from './point';
 import {paramsToState} from './decorators/mapping';
-import { iconsList } from '../icons/icons';
+import {iconsList} from '../icons/icons';
 
 const sessions = new Map<string, UnwrapRef<Session>>();
 let currentSessionId = null;
@@ -32,7 +32,6 @@ type TSessionState = {
     scale: Point;
     lock: boolean;
     customImages: TLayerImageData[];
-    icons: 
     isPublic: boolean;
 };
 

From 013425dfc0092c89c29f7e5ff1bf0ce179f233c0 Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <m@ilin.pt>
Date: Thu, 6 Jun 2024 12:59:12 +0100
Subject: [PATCH 36/38] Import wizard redesign

---
 src/components/fui/FuiImportWizard.vue | 339 +++++++++++++------------
 1 file changed, 178 insertions(+), 161 deletions(-)

diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index 1bbeb84c..d61b5641 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -4,6 +4,7 @@ import {processImage, imageDataToImage, imageToImageData, applyColor, cropImage,
 import {useSession} from '../../core/session';
 import {Rect} from '../../core/rect';
 import {Point} from '../../core/point';
+import FuiButton from "./FuiButton.vue";
 const props = defineProps<{
     visible: boolean;
 }>();
@@ -209,170 +210,186 @@ defineExpose({
 </script>
 <template>
     <Teleport to="body">
-        <div class="fui-import-wizard-dialog" :class="{visible}">
-            <div class="fui-form-row fui-form-header">Image preview</div>
-            <div class="fui-form-row fui-import-wizard-canvas-wrapper" style="width: 400px; height: 300px">
-                <div class="canvasContainer grid" :style="{width: width * scale + 'px', height: height * scale + 'px'}">
-                    <canvas ref="canvasRef"></canvas>
-                    <div
-                        class="crop"
-                        @mousedown="startCrop"
-                        :style="{
-                            width: scale * layerSize.w + 'px',
-                            height: scale * layerSize.h + 'px',
-                            left: scale * layerSize.x + 'px',
-                            top: scale * layerSize.y + 'px'
-                        }"
-                    >
-                        <div class="crop-nw"></div>
-                        <div class="crop-ne"></div>
-                        <div class="crop-sw"></div>
-                        <div class="crop-se"></div>
+        <div class="modal  font-sans text-white" v-show="visible" :class="{ 'opacity-100': visible}">
+            <div class="modal-box mb-40 border border-primary max-w-none w-[56rem] pointer-events-auto">
+                <div class="grid grid-cols-[60%_auto] grid-rows-3 grid-rows-[auto_1fr_auto]">
+                    <div class="flex flex-row">
+                        <label class="label" for="image-name">
+                            Name:
+                            <input class="input input-sm input-bordered ml-2" type="text" v-model="imageName" id="image-name" />
+                        </label>
+                        <label class="label" for="image-zoom">Zoom:
+                            <select id="image-zoom" class="select select-bordered select-sm ml-2" v-model="scale">
+                                <option v-for="(p, idx) in scales" :key="idx" :value="p">{{ p * 100 }}%</option>
+                            </select>
+                        </label>
                     </div>
-                </div>
-            </div>
-            <div class="fui-form-row">
-                <!-- image name -->
-                <label class="fui-form-label fui-form-column" for="image-name">
-                    Name:
-                    <input class="fui-form-input" type="text" v-model="imageName" id="image-name" />
-                </label>
-                <label class="fui-form-label fui-form-column" for="image-zoom">Zoom:</label>
-                <select id="image-zoom" class="fui-select__select fui-form-input" v-model="scale">
-                    <option v-for="(p, idx) in scales" :key="idx" :value="p">{{ p * 100 }}%</option>
-                </select>
-            </div>
-
-            <div class="fui-form-row">
-                <label class="fui-form-label fui-form-column" for="image-width">
-                    Width:
-                    <input class="fui-form-input fui-form-input__size" type="number" v-model="width" id="image-width" />
-                </label>
-
-                <label class="fui-form-label fui-form-column" for="image-height">
-                    Height:
-                    <input
-                        class="fui-form-input fui-form-input__size"
-                        type="number"
-                        min="1"
-                        v-model="height"
-                        id="image-height"
-                    />
-                </label>
-            </div>
-
-            <div class="fui-form-row">
-                <label class="fui-form-label fui-form-column" for="layer-width">
-                    Layer width:
-                    <input
-                        class="fui-form-input fui-form-input__size"
-                        type="number"
-                        v-model="layerSize.w"
-                        id="layer-width"
-                    />
-                </label>
-
-                <label class="fui-form-label fui-form-column" for="layer-height">
-                    Layer height:
-                    <input
-                        class="fui-form-input fui-form-input__size"
-                        type="number"
-                        min="1"
-                        v-model="layerSize.h"
-                        id="layer-height"
-                    />
-                </label>
-
-                <label class="fui-form-label fui-form-column" for="layer-x">
-                    Layer X:
-                    <input
-                        class="fui-form-input fui-form-input__size"
-                        type="number"
-                        v-model="layerSize.x"
-                        id="layer-x"
-                    />
-                </label>
+                    <div class="row-span-2">
+                        <div class="flex form-control flex-row gap-4">
+                            <label class="label" for="image-width">
+                                Width:
+                                <input
+                                    class="input input-sm input-bordered w-20 ml-2"
+                                    type="number"
+                                    v-model="width"
+                                    id="image-width"
+                                />
+                            </label>
+                            
+                            <label class="label" for="image-height">
+                                Height:
+                                <input
+                                class="input input-sm input-bordered w-20 ml-2"
+                                type="number"
+                                min="1"
+                                v-model="height"
+                                id="image-height"
+                                />
+                            </label>
+                        </div>
+                        <div class="form-control flex flex-row gap-4">
+                            <FuiButton @click="resetSize">Reset size</FuiButton>
+                            <FuiButton @click="fitToScreen">Fit to screen</FuiButton>
+                        </div>
+                        <div class="form-control flex flex-row gap-4">
+                            <label class="label" for="layer-width">
+                                Crop W:
+                                <input
+                                    class="input input-sm input-bordered w-20 ml-2"
+                                    type="number"
+                                    v-model="layerSize.w"
+                                    id="layer-width"
+                                />
+                            </label>
 
-                <label class="fui-form-label fui-form-column" for="layer-y">
-                    Layer Y:
-                    <input
-                        class="fui-form-input fui-form-input__size"
-                        type="number"
-                        v-model="layerSize.y"
-                        id="layer-y"
-                    />
-                </label>
-            </div>
+                            <label class="label" for="layer-height">
+                                Crop H:
+                                <input
+                                    class="input input-sm input-bordered w-20 ml-2"
+                                    type="number"
+                                    min="1"
+                                    v-model="layerSize.h"
+                                    id="layer-height"
+                                />
+                            </label>
+                        </div>
+                        <div class="form-control flex flex-row gap-4">
+                            <label class="label" for="layer-x">
+                                Crop X:
+                                <input
+                                    class="input input-sm input-bordered w-20 ml-2"
+                                    type="number"
+                                    v-model="layerSize.x"
+                                    id="layer-x"
+                                />
+                            </label>
 
-            <div class="fui-form-row">
-                <!-- resampling type select -->
-                <label class="fui-form-label fui-form-column" for="image-resampling">Resampling algorithm:</label>
-                <select id="image-resampling" class="fui-select__select fui-form-input" v-model="options.resampling">
-                    <option v-for="(p, idx) in resamplingTypes" :key="idx" :value="p">{{ p }}</option>
-                </select>
-            </div>
-            <div class="fui-form-row">
-                <!-- reset -->
-                <button class="button" style="margin-left: 8px" @click="resetSize">Reset size</button>
-                <button class="button" style="margin-left: 8px" @click="fitToScreen">Fit to screen</button>
-            </div>
-            <div class="fui-form-row">
-                <!-- brightness -->
-                <label class="fui-form-label fui-form-column" for="image-brightness">
-                    Brightness:
-                    <input
-                        class="fui-form-input fui-form-input__size"
-                        type="number"
-                        min="-100"
-                        max="100"
-                        v-model="options.brightness"
-                        id="image-brightness"
-                    />
-                </label>
-                <!-- contrast -->
-                <label class="fui-form-label fui-form-column" for="image-contrast">
-                    Contrast:
-                    <input
-                        class="fui-form-input fui-form-input__size"
-                        type="number"
-                        min="-100"
-                        max="100"
-                        v-model="options.contrast"
-                        id="image-contrast"
-                    />
-                </label>
-            </div>
-            <div class="fui-form-row">
-                <!-- grayscalte first -->
-                <label class="fui-form-label fui-form-column" for="image-grayscale">
-                    Grayscale before:
-                    <input class="fui-form-checkbox" type="checkbox" v-model="options.grayscale" id="image-grayscale" />
-                </label>
-                <!-- dither -->
-                <label class="fui-form-label fui-form-column" for="image-dithering">
-                    Dithering:
-                    <input class="fui-form-checkbox" type="checkbox" v-model="options.dither" id="image-dithering" />
-                </label>
-                <!-- invert palette -->
-                <label class="fui-form-label fui-form-column" for="image-invert-palette">
-                    Invert palette:
-                    <input
-                        class="fui-form-checkbox"
-                        type="checkbox"
-                        v-model="options.invertPalette"
-                        id="image-invert-palette"
-                    />
-                </label>
-                <!-- invert -->
-                <label class="fui-form-label fui-form-column" for="image-invert">
-                    Inverting:
-                    <input class="fui-form-checkbox" type="checkbox" v-model="options.invert" id="image-invert" />
-                </label>
-            </div>
+                            <label class="label" for="layer-y">
+                                Crop Y:
+                                <input
+                                    class="input input-sm input-bordered w-20 ml-2"
+                                    type="number"
+                                    v-model="layerSize.y"
+                                    id="layer-y"
+                                />
+                            </label>
+                        </div>
 
-            <div class="buttons-bottom">
-                <button class="button button_danger fui-display-custom-dialog__cancel" @click="cancel">Cancel</button>
-                <button class="button fui-display-custom-dialog__save" @click="save">Import</button>
+                        <div class="form-control flex flex-row">
+                            <!-- resampling type select -->
+                            <label class="label w-full" for="image-resampling">
+                                <div class="w-1/3">Resampling</div>
+                                <select
+                                    id="image-resampling"
+                                    class="select select-sm select-bordered ml-2 w-2/3"
+                                    v-model="options.resampling"
+                                >
+                                    <option v-for="(p, idx) in resamplingTypes" :key="idx" :value="p">{{ p }}</option>
+                                </select>
+                            </label>
+                        </div>
+                        <div class="form-control flex flex-row">
+                            <!-- brightness -->
+                            <label class="label w-full" for="image-brightness">
+                                <div class="w-1/3">Brightness</div>
+                                <input
+                                    class="range range-sm range-primary ml-2 w-2/3"
+                                    type="range"
+                                    min="-100"
+                                    max="100"
+                                    step="10"
+                                    v-model="options.brightness"
+                                    id="image-brightness"
+                                />
+                                <span class="ml-2 w-10">{{ options.brightness }}%</span>
+                            </label>
+                        </div>
+                        <div class="form-control flex flex-row">
+                            <!-- contrast -->
+                            <label class="label w-full" for="image-contrast">
+                                <div class="w-1/3">Contrast</div>
+                                <input
+                                    class="range range-sm range-primary ml-2 w-2/3"
+                                    type="range"
+                                    min="-100"
+                                    max="100"
+                                    step="10"
+                                    v-model="options.contrast"
+                                    id="image-contrast"
+                                />
+                                <span class="ml-2 w-10">{{ options.contrast }}%</span>
+                            </label>
+                        </div>
+                        <div class="form-control flex gap-0">
+                            <!-- grayscalte first -->
+                            <label class="cursor-pointer label">
+                                <span class="">Grayscale first</span> 
+                                <input type="checkbox" class="toggle toggle-primary" v-model="options.grayscale" />
+                            </label>
+                            <!-- dither -->
+                            <label class="cursor-pointer label">
+                                <span class="">Dithering</span> 
+                                <input type="checkbox" class="toggle toggle-primary" v-model="options.dither" />
+                            </label>
+                            <!-- invert palette -->
+                            <label class="cursor-pointer label">
+                                <span class="">Invert palette</span> 
+                                <input type="checkbox" class="toggle toggle-primary" v-model="options.invertPalette" />
+                            </label>
+                            <!-- invert -->
+                            <label class="cursor-pointer label">
+                                <span class="">Invert result</span> 
+                                <input type="checkbox" class="toggle toggle-primary" v-model="options.invert" />
+                            </label>
+                        </div>
+                    </div>
+                    <div class="mr-4">
+                        <div class="fui-import-wizard-canvas-wrapper" style="width: 100%; height: 100%">
+                            <div class="canvasContainer fui-grid" :style="{width: width * scale + 'px', height: height * scale + 'px'}">
+                                <canvas ref="canvasRef"></canvas>
+                                <div
+                                    class="crop"
+                                    @mousedown="startCrop"
+                                    :style="{
+                                        width: scale * layerSize.w + 'px',
+                                        height: scale * layerSize.h + 'px',
+                                        left: scale * layerSize.x + 'px',
+                                        top: scale * layerSize.y + 'px'
+                                    }"
+                                >
+                                    <div class="crop-nw"></div>
+                                    <div class="crop-ne"></div>
+                                    <div class="crop-sw"></div>
+                                    <div class="crop-se"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-span-2 flex flex-row justify-between mt-4">
+                        <button class="button button_danger fui-display-custom-dialog__cancel" @click="cancel">Cancel</button>
+                        <button class="button fui-display-custom-dialog__save" @click="save">Import</button>
+                    </div>
+                </div>
             </div>
         </div>
     </Teleport>
@@ -424,7 +441,7 @@ defineExpose({
     overflow: hidden;
     position: relative;
 }
-.grid {
+.fui-grid {
     position: relative;
     &::after {
         content: '';

From 72773ba31a604c100bc09880d981cbb922b44cbd Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <milin@evolution.com>
Date: Tue, 18 Jun 2024 19:36:49 +0100
Subject: [PATCH 37/38] Refactor markup to fit taiwind and daisyUI design
 guides

---
 README.md                                     |   8 +-
 public/assets/icons/Circle.svg                |   3 +
 public/assets/icons/Code.svg                  |   5 +
 public/assets/icons/Default.svg               |   3 +
 public/assets/icons/Draw.svg                  |   4 +
 public/assets/icons/Image.svg                 |   5 +
 public/assets/icons/Line.svg                  |   3 +
 public/assets/icons/Rectangle.svg             |   3 +
 public/assets/icons/Text.svg                  |   3 +
 public/assets/icons/Things.svg                |   9 ++
 public/assets/icons/Tree.svg                  |   6 +
 public/assets/icons/cog.svg                   |   4 +
 public/assets/icons/layers.svg                |   3 +
 public/assets/icons/menu.svg                  |   5 +
 public/assets/icons/projects.svg              |   8 +
 src/components/App.vue                        | 151 ++++++++++--------
 src/components/fui/FuiButton.vue              |  67 +-------
 src/components/fui/FuiCodeSettings.vue        |   2 +-
 src/components/fui/FuiFile.vue                |   2 +-
 src/components/fui/FuiIcons.vue               |   2 +-
 src/components/fui/FuiImportWizard.vue        |  43 +++--
 src/components/fui/FuiInspector.vue           |   9 +-
 src/components/fui/FuiLayers.vue              |  16 +-
 .../FuiDisplayCustomDialog.vue                |  35 ++--
 .../fui/FuiSelectDisplay/FuiSelectDisplay.vue |   7 +-
 src/components/fui/FuiSelectPlatform.vue      |   2 +-
 src/components/fui/FuiSelectScale.vue         |   2 +-
 src/components/fui/FuiTools.vue               |   2 +-
 src/core/layers/abstract-image.layer.ts       |   2 +-
 src/core/session.ts                           |   9 +-
 src/platforms/adafruit.ts                     |   4 +-
 src/platforms/adafruit_mono.ts                |   2 +-
 src/platforms/u8g2.ts                         |  15 +-
 src/utils.ts                                  |   4 +-
 styles.css                                    |  27 +---
 tailwind.config.js                            |  14 +-
 36 files changed, 262 insertions(+), 227 deletions(-)
 create mode 100644 public/assets/icons/Circle.svg
 create mode 100644 public/assets/icons/Code.svg
 create mode 100644 public/assets/icons/Default.svg
 create mode 100644 public/assets/icons/Draw.svg
 create mode 100644 public/assets/icons/Image.svg
 create mode 100644 public/assets/icons/Line.svg
 create mode 100644 public/assets/icons/Rectangle.svg
 create mode 100644 public/assets/icons/Text.svg
 create mode 100644 public/assets/icons/Things.svg
 create mode 100644 public/assets/icons/Tree.svg
 create mode 100644 public/assets/icons/cog.svg
 create mode 100644 public/assets/icons/layers.svg
 create mode 100644 public/assets/icons/menu.svg
 create mode 100644 public/assets/icons/projects.svg

diff --git a/README.md b/README.md
index 8a785dc1..112e2086 100644
--- a/README.md
+++ b/README.md
@@ -26,11 +26,17 @@ Draw any graphics and use generated code in your Arduino, ESP32 or STM32project!
 * use custom images
 * auto-generate XBMP graphics
 * move, resize, edit elements
-* u8g2, AdafruitGFX, raw Uint32, FlipperZero export
 * generate the source code in C/C++
 * FlipperZero live preview
 * select zoom scale
 
+## Supported platforms
+* u8g2
+* AdafruitGFX
+* FlipperZero
+* Inkplate
+* raw Uint32 byte array
+
 
 
 ## Cloud App (no registation required)
diff --git a/public/assets/icons/Circle.svg b/public/assets/icons/Circle.svg
new file mode 100644
index 00000000..c46aae78
--- /dev/null
+++ b/public/assets/icons/Circle.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="8.5" stroke="#FE8A2C"/>
+</svg>
diff --git a/public/assets/icons/Code.svg b/public/assets/icons/Code.svg
new file mode 100644
index 00000000..1680f69c
--- /dev/null
+++ b/public/assets/icons/Code.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 9H8.5V14.5L7 16L8.5 17.5V23H11" stroke="#FF8200"/>
+<path d="M21 23L23.5 23L23.5 17.5L25 16L23.5 14.5L23.5 9L21 9" stroke="#FF8200"/>
+<path d="M16.1983 11.6C16.7103 11.6 17.1503 11.668 17.5183 11.804C17.8863 11.932 18.2463 12.132 18.5983 12.404L18.0103 13.088C17.5223 12.68 16.9423 12.476 16.2703 12.476C15.5263 12.476 14.9183 12.748 14.4463 13.292C13.9823 13.828 13.7503 14.684 13.7503 15.86C13.7503 17.028 13.9783 17.884 14.4343 18.428C14.8903 18.972 15.4983 19.244 16.2583 19.244C16.6743 19.244 17.0303 19.184 17.3263 19.064C17.6223 18.944 17.9063 18.776 18.1783 18.56L18.7183 19.232C18.1023 19.832 17.2783 20.132 16.2463 20.132C15.5663 20.132 14.9543 19.968 14.4103 19.64C13.8663 19.304 13.4383 18.816 13.1263 18.176C12.8143 17.536 12.6583 16.764 12.6583 15.86C12.6583 14.964 12.8143 14.196 13.1263 13.556C13.4463 12.908 13.8743 12.42 14.4103 12.092C14.9543 11.764 15.5503 11.6 16.1983 11.6Z" fill="#FF8200"/>
+</svg>
diff --git a/public/assets/icons/Default.svg b/public/assets/icons/Default.svg
new file mode 100644
index 00000000..a0949ca8
--- /dev/null
+++ b/public/assets/icons/Default.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3749 23.6869L13.7497 24.0178L13.3749 23.6869C13.07 24.0323 12.5 23.8167 12.5 23.356V10.4801C12.5 10.0301 13.048 9.80915 13.3602 10.1333L22.0089 19.1147C22.3148 19.4323 22.0897 19.9615 21.6488 19.9615H17.34C16.9098 19.9615 16.5002 20.1463 16.2155 20.4689L13.3749 23.6869Z" stroke="#FE8A2C"/>
+</svg>
diff --git a/public/assets/icons/Draw.svg b/public/assets/icons/Draw.svg
new file mode 100644
index 00000000..b41f16f8
--- /dev/null
+++ b/public/assets/icons/Draw.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17L8.63246 21.1026C8.37187 21.8844 9.11561 22.6281 9.89737 22.3675L14 21M10 17L20.2929 6.70711C20.6834 6.31658 21.3166 6.31658 21.7071 6.70711L24.2929 9.29289C24.6834 9.68342 24.6834 10.3166 24.2929 10.7071L14 21M10 17H11C11.5523 17 12 17.4477 12 18V18C12 18.5523 12.4477 19 13 19V19C13.5523 19 14 19.4477 14 20V21" stroke="#FE8A2C"/>
+<path d="M8.5 23C7.83333 23 7.83333 22 8.5 22C9.16667 22 9.16667 23 8.5 23Z" fill="#FE8A2C" stroke="#FE8A2C"/>
+</svg>
diff --git a/public/assets/icons/Image.svg b/public/assets/icons/Image.svg
new file mode 100644
index 00000000..3c454246
--- /dev/null
+++ b/public/assets/icons/Image.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="7.5" y="7.5" width="17" height="17" stroke="#FE8A2C"/>
+<path d="M7.5 20C9.1 17.6 11.6667 14.6667 13 13L15.5 15.75L18 18.5L21 16L24.5 19" stroke="#FE8A2C" stroke-linejoin="round"/>
+<circle cx="19.5" cy="11.5" r="2" stroke="#FE8A2C"/>
+</svg>
diff --git a/public/assets/icons/Line.svg b/public/assets/icons/Line.svg
new file mode 100644
index 00000000..fafe3341
--- /dev/null
+++ b/public/assets/icons/Line.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="8.64645" y1="22.6464" x2="22.6464" y2="8.64645" stroke="#FE8A2C"/>
+</svg>
diff --git a/public/assets/icons/Rectangle.svg b/public/assets/icons/Rectangle.svg
new file mode 100644
index 00000000..b8d721ba
--- /dev/null
+++ b/public/assets/icons/Rectangle.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6.5" y="9.5" width="19" height="13" stroke="#FE8A2C"/>
+</svg>
diff --git a/public/assets/icons/Text.svg b/public/assets/icons/Text.svg
new file mode 100644
index 00000000..0e6dc0ef
--- /dev/null
+++ b/public/assets/icons/Text.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.47749 20H8.27721L11.7488 10.5455H12.9306L16.4022 20H15.2019L12.3766 12.0412H12.3028L9.47749 20ZM9.92068 16.3068H14.7587V17.3224H9.92068V16.3068ZM19.8138 20.1662C19.3645 20.1662 18.9567 20.0816 18.5904 19.9123C18.2242 19.7399 17.9333 19.4922 17.7179 19.169C17.5025 18.8428 17.3948 18.4489 17.3948 17.9872C17.3948 17.581 17.4748 17.2517 17.6348 16.9993C17.7948 16.7438 18.0087 16.5438 18.2765 16.3991C18.5443 16.2545 18.8397 16.1468 19.1629 16.076C19.4891 16.0021 19.8169 15.9437 20.1462 15.9006C20.577 15.8452 20.9264 15.8036 21.1941 15.7759C21.4649 15.7451 21.6619 15.6944 21.785 15.6236C21.9112 15.5528 21.9743 15.4297 21.9743 15.2543V15.2173C21.9743 14.7618 21.8497 14.4079 21.6004 14.1555C21.3542 13.9032 20.9802 13.777 20.4786 13.777C19.9584 13.777 19.5506 13.8909 19.2552 14.1186C18.9597 14.3464 18.752 14.5895 18.632 14.848L17.5979 14.4787C17.7825 14.0478 18.0287 13.7124 18.3365 13.4723C18.6474 13.2292 18.9859 13.0599 19.3521 12.9645C19.7215 12.866 20.0846 12.8168 20.4416 12.8168C20.6694 12.8168 20.931 12.8445 21.2264 12.8999C21.525 12.9522 21.8127 13.0614 22.0897 13.2276C22.3698 13.3938 22.6021 13.6446 22.7868 13.9801C22.9715 14.3156 23.0638 14.7649 23.0638 15.3281V20H21.9743V19.0398H21.9189C21.845 19.1937 21.7219 19.3583 21.5496 19.5337C21.3772 19.7092 21.1479 19.8584 20.8617 19.9815C20.5755 20.1046 20.2262 20.1662 19.8138 20.1662ZM19.98 19.1875C20.4109 19.1875 20.774 19.1029 21.0695 18.9336C21.368 18.7643 21.5927 18.5458 21.7435 18.2781C21.8974 18.0103 21.9743 17.7287 21.9743 17.4332V16.4361C21.9281 16.4915 21.8266 16.5423 21.6696 16.5884C21.5157 16.6315 21.3372 16.67 21.1341 16.7038C20.9341 16.7346 20.7386 16.7623 20.5478 16.7869C20.3601 16.8085 20.2077 16.8269 20.0908 16.8423C19.8076 16.8793 19.543 16.9393 19.2967 17.0224C19.0536 17.1024 18.8566 17.224 18.7058 17.3871C18.5581 17.5471 18.4842 17.7656 18.4842 18.0426C18.4842 18.4212 18.6243 18.7074 18.9043 18.9013C19.1875 19.0921 19.546 19.1875 19.98 19.1875Z" fill="#FE8A2C"/>
+</svg>
diff --git a/public/assets/icons/Things.svg b/public/assets/icons/Things.svg
new file mode 100644
index 00000000..9891ac8e
--- /dev/null
+++ b/public/assets/icons/Things.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="21" cy="10" r="3.5" stroke="#FF8200"/>
+<path d="M11.4427 24.0806C11.2554 24.4375 10.7446 24.4375 10.5573 24.0806L7.88138 18.9824C7.70664 18.6494 7.9481 18.25 8.32411 18.25L13.6759 18.25C14.0519 18.25 14.2934 18.6494 14.1186 18.9824L11.4427 24.0806Z" stroke="#FF8200"/>
+<path d="M8.91238 14H7.7476L10.3648 6.72727H11.6325L14.2497 14H13.085L11.0289 8.0483H10.972L8.91238 14ZM9.10769 11.152H12.8861V12.0753H9.10769V11.152Z" fill="#FF8200"/>
+<path d="M21 16L21 24" stroke="#FF8200" stroke-linecap="round"/>
+<path d="M17 20H25" stroke="#FF8200" stroke-linecap="round"/>
+<path d="M18 17L24 23" stroke="#FF8200" stroke-linecap="round"/>
+<path d="M24 17L18 23" stroke="#FF8200" stroke-linecap="round"/>
+</svg>
diff --git a/public/assets/icons/Tree.svg b/public/assets/icons/Tree.svg
new file mode 100644
index 00000000..560f3529
--- /dev/null
+++ b/public/assets/icons/Tree.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="7.5" y="14.5" width="6" height="5" stroke="#FF8200"/>
+<path d="M13.5 17H16M18.5 11.5H16V17M18.5 22.5H16V17" stroke="#FF8200"/>
+<rect x="18.5" y="8.5" width="6" height="5" stroke="#FF8200"/>
+<rect x="18.5" y="19.5" width="6" height="5" stroke="#FF8200"/>
+</svg>
diff --git a/public/assets/icons/cog.svg b/public/assets/icons/cog.svg
new file mode 100644
index 00000000..4a5c695a
--- /dev/null
+++ b/public/assets/icons/cog.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7392 24.883L22.3117 22.785C22.4779 22.6874 22.5989 22.5271 22.6479 22.3398C22.6971 22.1522 22.6701 21.9528 22.5734 21.7853L21.6011 20.103C21.7524 19.8951 21.8881 19.6851 22.011 19.4684C22.134 19.2518 22.245 19.0275 22.3462 18.7906L24.2774 18.7836C24.4697 18.7829 24.6539 18.7051 24.7894 18.5676C24.9249 18.4299 25.0007 18.2437 25 18.0497L24.9848 13.8816C24.9841 13.6877 24.907 13.5019 24.7705 13.3654C24.6346 13.2294 24.4509 13.1531 24.2596 13.1531C24.2587 13.1531 24.2576 13.1531 24.2568 13.1531L22.3234 13.1608C22.1198 12.7001 21.8675 12.2643 21.5691 11.8574L22.5303 10.1644C22.7292 9.81393 22.6087 9.36716 22.261 9.16674L18.6733 7.09658C18.5064 7.00027 18.3085 6.97482 18.1227 7.0255C17.9371 7.07641 17.7791 7.19951 17.6837 7.36788L16.7223 9.0611C16.2241 9.00815 15.7221 9.00971 15.2256 9.06569L14.2525 7.38066C14.1557 7.21299 13.9967 7.09104 13.8109 7.0415C13.6249 6.99209 13.427 7.01907 13.2608 7.11665L9.68819 9.21475C9.34219 9.418 9.22502 9.86557 9.42654 10.2145L10.3987 11.8975C10.2483 12.1041 10.1128 12.3141 9.9894 12.5315C9.86603 12.7489 9.75502 12.9729 9.65444 13.2086L7.72242 13.2161C7.32192 13.2177 6.99855 13.5462 7 13.9499L7.01517 18.118C7.01593 18.3119 7.093 18.4977 7.22955 18.6343C7.3654 18.7703 7.54903 18.8465 7.7404 18.8465C7.74129 18.8465 7.74223 18.8465 7.74312 18.8465L9.67716 18.8392C9.88041 19.2996 10.1326 19.7354 10.4314 20.1427L9.47033 21.8356C9.37481 22.004 9.34946 22.2035 9.39983 22.3907C9.4503 22.5777 9.57243 22.737 9.73944 22.8334L13.3272 24.9034C13.4408 24.9689 13.5646 25 13.6868 25C13.9384 25 14.183 24.8679 14.317 24.632L15.2782 22.9388C15.7774 22.992 16.2794 22.9903 16.7744 22.9342L17.7476 24.6191C17.8445 24.7867 18.0034 24.9087 18.1894 24.9582C18.3751 25.0076 18.573 24.9807 18.7392 24.883ZM17.7798 21.7696C17.6249 21.5014 17.3185 21.3613 17.0171 21.4193C16.3665 21.5447 15.6844 21.5467 15.0222 21.4258C14.7197 21.3705 14.416 21.5131 14.2633 21.782L13.4181 23.2712L11.0893 21.9274L11.9346 20.4383C12.0873 20.1695 12.0553 19.8328 11.855 19.5982C11.4133 19.0809 11.0749 18.4961 10.8495 17.8602C10.7463 17.5693 10.4729 17.3751 10.1666 17.3751C10.1658 17.3751 10.1648 17.3751 10.1639 17.3751L8.46304 17.3815L8.45309 14.6755L10.1538 14.669C10.461 14.6677 10.7342 14.4716 10.8356 14.1792C10.9522 13.8429 11.0872 13.5415 11.2483 13.258C11.4095 12.974 11.5987 12.7041 11.8269 12.433C12.0258 12.1967 12.0552 11.8598 11.9007 11.5921L11.0449 10.1104L13.3639 8.74832L14.2196 10.2296C14.3742 10.4972 14.6792 10.6381 14.981 10.5802C15.6356 10.4556 16.3182 10.4534 16.9778 10.5741C17.2798 10.63 17.5842 10.4868 17.7368 10.218L18.5822 8.72885L20.9111 10.0726L20.0657 11.5617C19.9132 11.8305 19.9451 12.167 20.1453 12.4017C20.5863 12.9185 20.9249 13.5036 21.1515 14.1408C21.2549 14.4314 21.5282 14.6251 21.8342 14.6251C21.8352 14.6251 21.8362 14.6251 21.8371 14.6251L23.5369 14.6183L23.5469 17.3239L21.8473 17.33C21.5404 17.3312 21.2674 17.527 21.1657 17.819C21.0473 18.1584 20.9122 18.4603 20.7523 18.7421C20.5923 19.0239 20.4026 19.2944 20.1722 19.569C19.9741 19.8053 19.9449 20.1418 20.0994 20.409L20.9551 21.8896L18.6359 23.2514L17.7798 21.7696Z" fill="#FF8200"/>
+<path d="M19.4042 17.9641C19.9247 17.0475 20.0598 15.9813 19.7849 14.9621C19.51 13.9429 18.8576 13.0925 17.9484 12.5679C17.3556 12.2258 16.6828 12.0449 16.003 12.0449C14.5985 12.0449 13.2929 12.8077 12.5958 14.0356C11.5216 15.9281 12.1747 18.3488 14.0517 19.4318C14.6446 19.7739 15.3173 19.9547 15.9971 19.9547C17.4016 19.9548 18.7072 19.192 19.4042 17.9641ZM18.1454 17.2378C17.7061 18.0117 16.8828 18.4925 15.997 18.4925C15.5695 18.4925 15.1459 18.3784 14.7721 18.1628C13.5892 17.4802 13.1776 15.9547 13.8546 14.7619C14.294 13.9881 15.1173 13.5072 16.003 13.5072C16.4305 13.5072 16.8541 13.6213 17.2279 13.8371C17.801 14.1677 18.212 14.7035 18.3854 15.3458C18.5585 15.9882 18.4734 16.6601 18.1454 17.2378Z" fill="#FF8200"/>
+</svg>
diff --git a/public/assets/icons/layers.svg b/public/assets/icons/layers.svg
new file mode 100644
index 00000000..a8d4c433
--- /dev/null
+++ b/public/assets/icons/layers.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6111 19.5882L8.94444 13.2353H11.6667L12.5556 15.3529M11.6111 19.5882H24.0556L22.3333 15.3529H12.5556M11.6111 19.5882L10.7963 17.6471H8L10.6667 24H23.1111L21.2095 19.5732L11.6111 19.5882ZM12.5556 15.3529L9.88889 9H22.3333L25 15.3529H12.5556Z" stroke="#FF8200"/>
+</svg>
diff --git a/public/assets/icons/menu.svg b/public/assets/icons/menu.svg
new file mode 100644
index 00000000..c14ec613
--- /dev/null
+++ b/public/assets/icons/menu.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="7.5" y="8.5" width="17" height="3" stroke="#FE8A2C"/>
+<rect x="7.5" y="20.5" width="17" height="3" stroke="#FE8A2C"/>
+<rect x="7.5" y="14.5" width="17" height="3" stroke="#FE8A2C"/>
+</svg>
diff --git a/public/assets/icons/projects.svg b/public/assets/icons/projects.svg
new file mode 100644
index 00000000..4469370b
--- /dev/null
+++ b/public/assets/icons/projects.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12.5" y="8.5" width="12" height="3" stroke="#FE8A2C"/>
+<rect x="12.5" y="20.5" width="12" height="3" stroke="#FE8A2C"/>
+<rect x="12.5" y="14.5" width="12" height="3" stroke="#FE8A2C"/>
+<rect x="6.5" y="8.5" width="3" height="3" stroke="#FE8A2C"/>
+<rect x="6.5" y="20.5" width="3" height="3" stroke="#FE8A2C"/>
+<rect x="6.5" y="14.5" width="3" height="3" stroke="#FE8A2C"/>
+</svg>
diff --git a/src/components/App.vue b/src/components/App.vue
index a13aecf6..7f044e5b 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {ShallowRef, computed, onMounted, ref, toRefs, watch} from 'vue';
+import {ShallowRef, computed, onBeforeUnmount, onMounted, ref, toRefs, watch} from 'vue';
 import {IconLayer} from '../core/layers/icon.layer';
 import {Point} from '../core/point';
 import {loadLayers, saveLayers, useSession} from '../core/session';
@@ -24,7 +24,8 @@ let fuiImages = {},
     imageDataCache = {};
 
 const fuiCanvas = ref(null),
-    activeTab = ref('code');
+    activeTab = ref('code'),
+    currentHash = ref(window.location.hash);
 const session = useSession();
 const {editor, virtualScreen, state} = session;
 const {platform, customImages} = toRefs(state);
@@ -37,6 +38,8 @@ const isSerialSupported = computed(() => window.navigator.serial !== undefined);
 const flipperPreviewBtnText = computed(() => (flipper.value ? 'Disconnect' : 'Live View'));
 const showCopyCode = computed(() => updates.value && session.state.layers.length > 0);
 
+const isNotIframe = window.top === window.self;
+
 const flipper: ShallowRef<FlipperRPC> = ref(null);
 
 watch(
@@ -137,7 +140,7 @@ onMounted(() => {
 });
 
 window.addEventListener('message', async (event) => {
-    if (event.data && event.data.target === 'lopaka_app') {
+    if (event.data?.target === 'lopaka_app') {
         console.log('CHILD', event.data);
         switch (event.data.type) {
             case 'loadProject':
@@ -145,92 +148,102 @@ window.addEventListener('message', async (event) => {
                 // move to session and provider
                 session.unlock();
                 session.setIsPublic(!!event.data.payload.isPublic);
-                await session.setPlatform(event.data.payload.library);
+                await session.setPlatform(event.data.payload.library, false, event.data.payload.layers);
                 const displayArr = event.data.payload.display.split('×').map((n) => parseInt(n));
                 session.setDisplay(new Point(displayArr[0], displayArr[1]));
-                loadLayers(event.data.payload.layers ?? []);
                 loadCustomImages(event.data.payload.images);
                 break;
+            case 'keydownParent':
+                const parentKeyEvent = new KeyboardEvent('keydown', {code: event.data.payload});
+                editor.handleEvent(parentKeyEvent);
+                break;
         }
     }
 });
 navigator.serial?.addEventListener('disconnect', flipperDisconnect);
 </script>
 <template>
-    <div class="fui-editor" v-if="platform">
-        <div class="fui-editor__left">
-            <FuiLayers v-show="!isEmpty">
-                <FuiButton v-if="!session.state.isPublic" @click="resetScreen" small danger v-show="!isEmpty">
-                    clear
-                </FuiButton>
-            </FuiLayers>
-        </div>
-        <div class="fui-editor__top">
-            <div class="fui-editor-header">
-                <FuiSelectPlatform></FuiSelectPlatform>
-                <FuiSelectDisplay></FuiSelectDisplay>
-                <FuiSelectScale></FuiSelectScale>
-                <FuiButton
-                    v-if="isFlipper && isSerialSupported"
-                    @click="toggleFlipperPreview"
-                    title="Connect your Flipper to USB port"
-                >
-                    {{ flipperPreviewBtnText }}
-                </FuiButton>
+    <div class="grid grid-flow-col justify-start">
+        <Sections />
+        <div class="fui-editor" v-show="platform && ['#editor', ''].includes(currentHash)">
+            <div class="fui-editor__left">
+                <FuiLayers v-show="!isEmpty"></FuiLayers>
             </div>
-            <FuiTools v-if="!session.state.isPublic"></FuiTools>
-        </div>
-        <div class="fui-editor__main">
-            <div class="fui-editor__canvas">
-                <FuiCanvas ref="fuiCanvas" />
+            <div class="font-sans">
+                <div class="flex flex-row text-sm justify-center">
+                    <template v-if="isNotIframe">
+                        <FuiSelectPlatform></FuiSelectPlatform>
+                        <FuiSelectDisplay></FuiSelectDisplay>
+                    </template>
+                    <FuiSelectScale></FuiSelectScale>
+                    <FuiButton
+                        v-if="isFlipper && isSerialSupported"
+                        @click="toggleFlipperPreview"
+                        title="Connect your Flipper to USB port"
+                    >
+                        {{ flipperPreviewBtnText }}
+                    </FuiButton>
+                </div>
+                <FuiTools v-if="!session.state.isPublic"></FuiTools>
             </div>
-        </div>
-        <div class="fui-editor__main-right">
-            <FuiInspector />
-        </div>
-        <div class="fui-editor__bottom">
-            <div class="fui-editor__tabs">
-                <div v-if="!session.state.isPublic" class="fui-editor-header">
-                    <FuiTabs :active-tab="activeTab" @set-active-tab="setactiveTab"></FuiTabs>
+            <div></div>
+            <div class="fui-editor__main" v-if="platform">
+                <div class="fui-editor__canvas">
+                    <FuiCanvas ref="fuiCanvas" />
                 </div>
-                <FuiIcons
-                    v-show="activeTab === 'images'"
-                    :fui-images="fuiImages"
-                    :custom-images="customImages"
-                    @prepare-images="prepareImages"
-                    @icon-clicked="addImageToCanvas"
-                    @clean-custom-icons="cleanCustomIcons"
-                    ref="fuiIconsList"
-                ></FuiIcons>
-                <FuiCode v-show="activeTab === 'code'"></FuiCode>
-                <div class="buttons-bottom">
-                    <div>
-                        <FuiFile
-                            style="margin-right: 8px"
-                            v-if="!session.state.isPublic"
-                            type="code"
-                            title="import code"
-                            @set-active-tab="setactiveTab"
-                        ></FuiFile>
-                        <FuiFile
-                            v-if="!session.state.isPublic"
-                            type="image"
-                            title="import image"
-                            @set-active-tab="setactiveTab"
-                        ></FuiFile>
+            </div>
+            <div class="fui-editor__main-right">
+                <FuiInspector />
+            </div>
+            <div class="fui-editor__bottom">
+                <div class="fui-editor__tabs">
+                    <div v-if="!session.state.isPublic">
+                        <FuiTabs :active-tab="activeTab" @set-active-tab="setactiveTab"></FuiTabs>
+                    </div>
+                    <FuiIcons
+                        v-show="activeTab === 'images'"
+                        :fui-images="fuiImages"
+                        :custom-images="customImages"
+                        @prepare-images="prepareImages"
+                        @icon-clicked="addImageToCanvas"
+                        @clean-custom-icons="cleanCustomIcons"
+                        ref="fuiIconsList"
+                    ></FuiIcons>
+                    <FuiCode v-show="activeTab === 'code'"></FuiCode>
+                    <div class="buttons-bottom">
+                        <div>
+                            <FuiFile
+                                style="margin-right: 8px"
+                                v-if="!session.state.isPublic"
+                                type="code"
+                                title="import code"
+                                @set-active-tab="setactiveTab"
+                            ></FuiFile>
+                            <FuiFile
+                                v-if="!session.state.isPublic"
+                                type="image"
+                                title="import image"
+                                @set-active-tab="setactiveTab"
+                            ></FuiFile>
+                        </div>
+                        <FuiButton @click="copyCode" v-show="showCopyCode">copy code</FuiButton>
                     </div>
-                    <FuiButton @click="copyCode" v-show="showCopyCode">copy code</FuiButton>
                 </div>
             </div>
-        </div>
-        <div class="fui-editor__bottom-right">
-            <FuiEditorSettings />
+            <div class="fui-editor__bottom-right">
+                <FuiEditorSettings />
+            </div>
         </div>
     </div>
 </template>
 <style lang="css">
 .fui-editor {
     margin: 0 auto;
+    font-family: 'haxrcorp4089_tr';
+    grid-template-columns: 150px auto 240px;
+    width: -moz-fit-content;
+    width: fit-content;
+
     position: relative;
     box-sizing: border-box;
 
@@ -245,12 +258,12 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
     grid-area: 1 / 1 / 5 / 2;
 }
 .fui-editor__top {
-    grid-area: 1 / 2 / 2 / 4;
+    grid-area: 1 / 2 / 4;
 }
 .fui-editor__main {
     min-width: var(--main-width);
     grid-area: 2 / 2 / 3 / 3;
-    min-height: 400px;
+    min-height: 300px;
 }
 .fui-editor__main-right {
     grid-area: 2 / 3 / 3 / 4;
diff --git a/src/components/fui/FuiButton.vue b/src/components/fui/FuiButton.vue
index bcba065c..2d5332cf 100644
--- a/src/components/fui/FuiButton.vue
+++ b/src/components/fui/FuiButton.vue
@@ -3,73 +3,22 @@ import {computed, defineProps} from 'vue';
 
 const props = defineProps<{
     active?: boolean;
-    small?: boolean;
+    filled?: boolean;
     danger?: boolean;
+    success?: boolean;
     isIcon?: boolean;
 }>();
 
 const classNames = computed(() => ({
-    button_active: props.active,
-    button_small: props.small,
-    button_danger: props.danger,
-    button_icon: props.isIcon,
+    'btn-outline': !props.active && !props.filled,
+    'btn-error': props.danger,
+    'btn-success': props.success,
+    'btn-square text-2xl align-top': props.isIcon
 }));
-
 </script>
 <template>
-    <div class="button" :class="classNames">
+    <div class="btn btn-sm btn-primary font-sans uppercase leading-none" :class="classNames">
         <slot></slot>
     </div>
 </template>
-<style lang="css">
-
-.button {
-  display: inline-block;
-  background: var(--secondary-color);
-  border: 2px solid var(--primary-color);
-  border-radius: 6px;
-  color: var(--primary-color);
-  height: 32px;
-  vertical-align: middle;
-  text-transform: uppercase;
-  font-family: 'haxrcorp4089_tr';
-  font-size: 32px;
-  padding: 3px 12px 4px 12px;
-  cursor: pointer;
-  box-sizing: border-box;
-  line-height: 22px;
-}
-
-.button:hover,
-.button_active {
-  background-color: var(--primary-color);
-  color: var(--secondary-color);
-}
-
-.button_danger {
-  color: var(--danger-color);
-  border-color: var(--danger-color);
-}
-
-.button_danger:hover {
-  background-color: var(--danger-color);
-}
-
-a.button {
-  text-decoration: none;
-  text-wrap: nowrap;
-}
-
-.button_small {
-    font-size: 20px;
-    height: 24px;
-    line-height: 14px;
-}
-
-.button_icon {
-    padding: 3px 8px 4px 8px;
-    line-height: 24px;
-    font-family: 'haxrcorp4089_tr', monospace;
-    font-size: 32px;
-}
-</style>
+<style lang="css"></style>
diff --git a/src/components/fui/FuiCodeSettings.vue b/src/components/fui/FuiCodeSettings.vue
index 8a983e11..6c0a0000 100644
--- a/src/components/fui/FuiCodeSettings.vue
+++ b/src/components/fui/FuiCodeSettings.vue
@@ -40,7 +40,7 @@ const LABELS = {
 <template>
     <div class="code-settings" v-if="platform !== Uint32RawPlatform.id">
         <div class="title" v-if="Object.keys(templates).length > 1 || Object.keys(settings).length">Code settings:</div>
-        <div class="font-mono">
+        <div class="font-sans">
             <div class="fui-select label" v-if="Object.keys(templates).length > 1">
                 <label for="template" class="label-text">Code style:</label>
                 <select id="template" class="fui-select__select fui-form-input" v-model="template" @change="changeTemplate">
diff --git a/src/components/fui/FuiFile.vue b/src/components/fui/FuiFile.vue
index a85e811b..5a80136f 100644
--- a/src/components/fui/FuiFile.vue
+++ b/src/components/fui/FuiFile.vue
@@ -61,7 +61,7 @@ function resetFileInput() {
 }
 </script>
 <template>
-    <label class="button" :class="{button_active: active}">
+    <label class="btn btn-sm btn-outline btn-primary uppercase font-sans overflow-hidden">
         <FuiImportWizard
             v-if="type == 'image'"
             ref="wizardRef"
diff --git a/src/components/fui/FuiIcons.vue b/src/components/fui/FuiIcons.vue
index 5ae57c69..441bd6b4 100644
--- a/src/components/fui/FuiIcons.vue
+++ b/src/components/fui/FuiIcons.vue
@@ -107,7 +107,7 @@ function iconDragStart(e: DragEvent) {
     border-top: 0;
     margin: 0 0 8px 0;
     padding: 16px;
-    height: 256px;
+    height: 350px;
     color: var(--secondary-color);
 }
 
diff --git a/src/components/fui/FuiImportWizard.vue b/src/components/fui/FuiImportWizard.vue
index d61b5641..b5bb4a19 100644
--- a/src/components/fui/FuiImportWizard.vue
+++ b/src/components/fui/FuiImportWizard.vue
@@ -4,7 +4,7 @@ import {processImage, imageDataToImage, imageToImageData, applyColor, cropImage,
 import {useSession} from '../../core/session';
 import {Rect} from '../../core/rect';
 import {Point} from '../../core/point';
-import FuiButton from "./FuiButton.vue";
+import FuiButton from './FuiButton.vue';
 const props = defineProps<{
     visible: boolean;
 }>();
@@ -210,15 +210,21 @@ defineExpose({
 </script>
 <template>
     <Teleport to="body">
-        <div class="modal  font-sans text-white" v-show="visible" :class="{ 'opacity-100': visible}">
+        <div class="modal font-sans text-white" v-show="visible" :class="{'opacity-100': visible}">
             <div class="modal-box mb-40 border border-primary max-w-none w-[56rem] pointer-events-auto">
                 <div class="grid grid-cols-[60%_auto] grid-rows-3 grid-rows-[auto_1fr_auto]">
                     <div class="flex flex-row">
                         <label class="label" for="image-name">
                             Name:
-                            <input class="input input-sm input-bordered ml-2" type="text" v-model="imageName" id="image-name" />
+                            <input
+                                class="input input-sm input-bordered ml-2"
+                                type="text"
+                                v-model="imageName"
+                                id="image-name"
+                            />
                         </label>
-                        <label class="label" for="image-zoom">Zoom:
+                        <label class="label" for="image-zoom">
+                            Zoom:
                             <select id="image-zoom" class="select select-bordered select-sm ml-2" v-model="scale">
                                 <option v-for="(p, idx) in scales" :key="idx" :value="p">{{ p * 100 }}%</option>
                             </select>
@@ -235,15 +241,15 @@ defineExpose({
                                     id="image-width"
                                 />
                             </label>
-                            
+
                             <label class="label" for="image-height">
                                 Height:
                                 <input
-                                class="input input-sm input-bordered w-20 ml-2"
-                                type="number"
-                                min="1"
-                                v-model="height"
-                                id="image-height"
+                                    class="input input-sm input-bordered w-20 ml-2"
+                                    type="number"
+                                    min="1"
+                                    v-model="height"
+                                    id="image-height"
                                 />
                             </label>
                         </div>
@@ -343,29 +349,32 @@ defineExpose({
                         <div class="form-control flex gap-0">
                             <!-- grayscalte first -->
                             <label class="cursor-pointer label">
-                                <span class="">Grayscale first</span> 
+                                <span class="">Grayscale first</span>
                                 <input type="checkbox" class="toggle toggle-primary" v-model="options.grayscale" />
                             </label>
                             <!-- dither -->
                             <label class="cursor-pointer label">
-                                <span class="">Dithering</span> 
+                                <span class="">Dithering</span>
                                 <input type="checkbox" class="toggle toggle-primary" v-model="options.dither" />
                             </label>
                             <!-- invert palette -->
                             <label class="cursor-pointer label">
-                                <span class="">Invert palette</span> 
+                                <span class="">Invert palette</span>
                                 <input type="checkbox" class="toggle toggle-primary" v-model="options.invertPalette" />
                             </label>
                             <!-- invert -->
                             <label class="cursor-pointer label">
-                                <span class="">Invert result</span> 
+                                <span class="">Invert result</span>
                                 <input type="checkbox" class="toggle toggle-primary" v-model="options.invert" />
                             </label>
                         </div>
                     </div>
                     <div class="mr-4">
                         <div class="fui-import-wizard-canvas-wrapper" style="width: 100%; height: 100%">
-                            <div class="canvasContainer fui-grid" :style="{width: width * scale + 'px', height: height * scale + 'px'}">
+                            <div
+                                class="canvasContainer fui-grid"
+                                :style="{width: width * scale + 'px', height: height * scale + 'px'}"
+                            >
                                 <canvas ref="canvasRef"></canvas>
                                 <div
                                     class="crop"
@@ -386,8 +395,8 @@ defineExpose({
                         </div>
                     </div>
                     <div class="col-span-2 flex flex-row justify-between mt-4">
-                        <button class="button button_danger fui-display-custom-dialog__cancel" @click="cancel">Cancel</button>
-                        <button class="button fui-display-custom-dialog__save" @click="save">Import</button>
+                        <FuiButton @click="cancel" :danger="true">Cancel</FuiButton>
+                        <FuiButton @click="save" :success="true">Import</FuiButton>
                     </div>
                 </div>
             </div>
diff --git a/src/components/fui/FuiInspector.vue b/src/components/fui/FuiInspector.vue
index 55f3ccc9..ffa3a6be 100644
--- a/src/components/fui/FuiInspector.vue
+++ b/src/components/fui/FuiInspector.vue
@@ -136,7 +136,7 @@ const LABELS = {
             <option>#FFFFFF</option>
         </datalist>
         <div class="title inspector__title">{{ activeLayer.name }}</div>
-        <div class="inspector-panel font-mono">
+        <div class="inspector-panel">
             <template v-for="(param, name) in params">
                 <div
                     class="flex pb-2"
@@ -158,7 +158,7 @@ const LABELS = {
                         :id="`inspector_${param.type}_${name}`"
                         :key="updates + '_' + name"
                     />
-                    <label class="label label-text pr-2 cursor-pointer" :for="`inspector_${param.type}_${name}`">
+                    <label class="label label-text pr-2 cursor-pointer font-mono" :for="`inspector_${param.type}_${name}`">
                         {{ LABELS[name] ?? name }}
                     </label>
                     <div v-if="param.type == TModifierType.number" class="w-20">
@@ -220,10 +220,9 @@ const LABELS = {
         </div>
         <template v-if="!session.state.isPublic">
             <div class="title inspector__title" v-if="actions.length">Image operations</div>
-            <div class="inspector-actions">
-                <div class="inspector-action-button" v-for="action in actions">
+            <div class="flex flex-row gap-2 flex-wrap">
+                <div class="font-lg" v-for="action in actions">
                     <FuiButton
-                        :disabled="session.state.isPublic"
                         @click="onAction(action)"
                         :title="action.title"
                         :isIcon="true"
diff --git a/src/components/fui/FuiLayers.vue b/src/components/fui/FuiLayers.vue
index 78dce384..dc24259d 100644
--- a/src/components/fui/FuiLayers.vue
+++ b/src/components/fui/FuiLayers.vue
@@ -44,12 +44,18 @@ function getLayerListItem(layer: UnwrapRef<AbstractLayer>) {
 }
 </script>
 <template>
-    <div class="layers">
-        <h2 class="title">
+    <div class="">
+        <div class="font-sans mt-1">
             Layers
             <slot></slot>
-        </h2>
-        <VueDraggable class="layers__list" v-model="layers" item-key="id" @start="drag = true" @end="drag = false">
+        </div>
+        <VueDraggable
+            class="layers__list text-primary"
+            v-model="layers"
+            item-key="id"
+            @start="drag = true"
+            @end="drag = false"
+        >
             <template #item="{element}">
                 <div class="layer" :class="classNames(element)" @click="setActive(element)">
                     <div class="layer__name">
@@ -68,7 +74,6 @@ function getLayerListItem(layer: UnwrapRef<AbstractLayer>) {
     </div>
 </template>
 <style lang="css" scoped>
-
 .layers__list {
     font-size: 24px;
     overflow: hidden;
@@ -77,7 +82,6 @@ function getLayerListItem(layer: UnwrapRef<AbstractLayer>) {
     overflow-y: auto;
 }
 
-
 .layer {
     display: flex;
     align-items: center;
diff --git a/src/components/fui/FuiSelectDisplay/FuiDisplayCustomDialog.vue b/src/components/fui/FuiSelectDisplay/FuiDisplayCustomDialog.vue
index 374d7cd2..f4730454 100644
--- a/src/components/fui/FuiSelectDisplay/FuiDisplayCustomDialog.vue
+++ b/src/components/fui/FuiSelectDisplay/FuiDisplayCustomDialog.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import {ref, toRefs} from 'vue';
 import {useSession} from '../../../core/session';
-import { Point } from "../../../core/point";
+import {Point} from '../../../core/point';
+import FuiButton from '../FuiButton.vue';
 
 const session = useSession();
 const {setDisplay, saveDisplayCustom} = session;
@@ -17,27 +18,39 @@ function cancelPopup() {
 }
 
 function setCustomDisplay() {
-    emit('setCustomDisplay')
+    emit('setCustomDisplay');
     const displayCustom = new Point(customWidth.value || 1, customHeight.value || 1);
     setDisplay(displayCustom, true);
     saveDisplayCustom(true);
 }
-
 </script>
 <template>
     <div class="fui-display-custom-dialog">
-        <div class="fui-form-row fui-form-header">Set display size</div>
+        <div class="font-bold text-lg pb-4">Set display size</div>
         <div class="fui-form-row">
-            <label class="fui-form-label fui-form-column" for="displayCustomWidth">Width:
-                <input class="fui-form-input fui-form-input__size"  type="number" v-model="customWidth" id="displayCustomWidth"/>
+            <label class="fui-form-label fui-form-column" for="displayCustomWidth">
+                Width:
+                <input
+                    class="fui-form-input fui-form-input__size"
+                    type="number"
+                    v-model="customWidth"
+                    id="displayCustomWidth"
+                />
             </label>
-            <label class="fui-form-label fui-form-column"  for="displayCustomWidth">Height:
-                <input class="fui-form-input fui-form-input__size"  type="number" min="1" v-model="customHeight" id="displayCustomHeight"/>
+            <label class="fui-form-label fui-form-column" for="displayCustomWidth">
+                Height:
+                <input
+                    class="fui-form-input fui-form-input__size"
+                    type="number"
+                    min="1"
+                    v-model="customHeight"
+                    id="displayCustomHeight"
+                />
             </label>
         </div>
         <div class="buttons-bottom">
-            <button class="button button_danger fui-display-custom-dialog__cancel" @click="cancelPopup">Cancel</button>
-            <button class="button fui-display-custom-dialog__save" @click="setCustomDisplay">Save</button>
+            <FuiButton @click="cancelPopup">Cancel</FuiButton>
+            <FuiButton @click="setCustomDisplay" :success="true">Save</FuiButton>
         </div>
     </div>
 </template>
@@ -45,4 +58,4 @@ function setCustomDisplay() {
 .fui-form-input__size {
     width: 68px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/fui/FuiSelectDisplay/FuiSelectDisplay.vue b/src/components/fui/FuiSelectDisplay/FuiSelectDisplay.vue
index c451831c..3844b10c 100644
--- a/src/components/fui/FuiSelectDisplay/FuiSelectDisplay.vue
+++ b/src/components/fui/FuiSelectDisplay/FuiSelectDisplay.vue
@@ -51,8 +51,8 @@ function setCustomDisplay() {
     <div class="fui-displays fui-select">
         <label for="display-size" class="fui-select__label">Display:</label>
         <div v-if="isDisplayCustom" class="custom-value">
-            <a @click="enablePopup" href="#">Custom {{ display.x }}x{{ display.y }}</a>
-            <span @click="resetDisplay" class="custom-value__reset" title="Reset display">×</span>
+            <span @click="enablePopup" class="link link-primary">Custom {{ display.x }}x{{ display.y }}</span>
+            <span @click="resetDisplay" class="text-lg text-error pl-1 cursor-pointer" title="Reset display">×</span>
         </div>
         <select
             v-else
@@ -62,7 +62,7 @@ function setCustomDisplay() {
             :value="selectedDisplay"
         >
             <option key="custom" value="custom">Custom...</option>
-            <option v-for="(item, idx) in displays" :key="idx" :value="idx">{{ item.x }}x{{ item.y }}</option>
+            <option v-for="(item, idx) in displays" :key="idx" :value="idx">{{ item.x }}×{{ item.y }}</option>
         </select>
     </div>
     <FuiPopup v-if="showCustomDisplayPopup">
@@ -78,7 +78,6 @@ function setCustomDisplay() {
     align-items: center;
 }
 .custom-value {
-    font-size: 24px;
     margin-left: 8px;
 }
 .custom-value * {
diff --git a/src/components/fui/FuiSelectPlatform.vue b/src/components/fui/FuiSelectPlatform.vue
index 2a313adc..b3cd8222 100644
--- a/src/components/fui/FuiSelectPlatform.vue
+++ b/src/components/fui/FuiSelectPlatform.vue
@@ -11,7 +11,7 @@ watch(platform, (val) => {
 </script>
 <template>
     <div class="fui-select fui-platforms">
-        <label for="library" class="fui-select__label">Library:</label>
+        <label for="library" class="fui-select__label pr-2">Library:</label>
         <select id="library" class="fui-select__select fui-form-input" v-model="platform">
             <option v-for="(p, idx) in session.platforms" :key="idx" :value="idx">
                 {{ p.getName() }}
diff --git a/src/components/fui/FuiSelectScale.vue b/src/components/fui/FuiSelectScale.vue
index a85691ff..0fe49f31 100644
--- a/src/components/fui/FuiSelectScale.vue
+++ b/src/components/fui/FuiSelectScale.vue
@@ -14,7 +14,7 @@ watch(selectedScale, (val) => {
 </script>
 <template>
     <div class="fui-select">
-        <label for="canvas-scale" class="fui-select__label">Scale:</label>
+        <label for="canvas-scale" class="fui-select__label pr-2">Scale:</label>
         <select id="canvas-scale" class="fui-select__select fui-form-input" v-model="selectedScale">
             <option v-for="(item, idx) in scales" :key="idx" :value="item">{{ item }}%</option>
         </select>
diff --git a/src/components/fui/FuiTools.vue b/src/components/fui/FuiTools.vue
index 71eb89f2..0c667c24 100644
--- a/src/components/fui/FuiTools.vue
+++ b/src/components/fui/FuiTools.vue
@@ -22,7 +22,7 @@ function isActive(name: string) {
 }
 </script>
 <template>
-    <div class="tools">
+    <div class="flex flex-row justify-center mt-4">
         <FuiButton class="tools__btn" @click="setActive(null, true)" :active="activeTool == null">select</FuiButton>
         <FuiButton
             v-for="(tool, idx) in tools"
diff --git a/src/core/layers/abstract-image.layer.ts b/src/core/layers/abstract-image.layer.ts
index fa00edb9..816de789 100644
--- a/src/core/layers/abstract-image.layer.ts
+++ b/src/core/layers/abstract-image.layer.ts
@@ -95,7 +95,7 @@ export abstract class AbstractImageLayer extends AbstractLayer {
             }
         },
         {
-            label: 'Download',
+            label: '↓',
             title: 'Download image',
             action: () => {
                 downloadImage(this.data, this.imageName ?? 'image_' + this.index);
diff --git a/src/core/session.ts b/src/core/session.ts
index 126d928a..16595955 100644
--- a/src/core/session.ts
+++ b/src/core/session.ts
@@ -178,23 +178,24 @@ export class Session {
         localStorage.setItem('lopaka_scale', `${scale}`);
         isLogged && logEvent('select_scale', scale);
     };
-    setPlatform = async (name: string, isLogged?: boolean): Promise<void> => {
+    setPlatform = async (name: string, isLogged?: boolean, layers?): Promise<void> => {
         this.state.platform = name;
         const fonts = this.platforms[name].getFonts();
         this.lock();
         this.editor.clear();
-        const layersToload = JSON.parse(localStorage.getItem(`${name}_lopaka_layers`));
+        let layersToload =
+            window.top === window.self ? JSON.parse(localStorage.getItem(`${name}_lopaka_layers`)) : layers;
         return this.loadFontsForLayers(
             layersToload ? layersToload.filter((l) => l.type == 'string').map((l) => l.f) : [fonts[0].name]
         ).then(() => {
             this.editor.font = getFont(fonts[0].name);
             this.unlock();
+            loadLayers(layersToload ?? []);
             if (window.top === window.self) {
-                loadLayers(layersToload ?? []);
                 localStorage.setItem('lopaka_library', name);
+                isLogged && logEvent('select_library', name);
             }
             this.virtualScreen.redraw(false);
-            isLogged && logEvent('select_library', name);
         });
     };
 
diff --git a/src/platforms/adafruit.ts b/src/platforms/adafruit.ts
index 006b5369..329e3ab3 100644
--- a/src/platforms/adafruit.ts
+++ b/src/platforms/adafruit.ts
@@ -10,8 +10,8 @@ import defaultTemplate from './templates/adafruit/default.pug';
 
 export class AdafruitPlatform extends Platform {
     public static id = 'adafruit_gfx';
-    protected name = 'Adafruit GFX';
-    protected description = 'Adafruit GFX';
+    protected name = 'AdafruitGFX Color';
+    protected description = 'Adafruit GFX Colored';
     protected fonts: TPlatformFont[] = [fontTypes['adafruit']];
     protected parser: AdafruitParser = new AdafruitParser();
 
diff --git a/src/platforms/adafruit_mono.ts b/src/platforms/adafruit_mono.ts
index 11339895..47c7e52d 100644
--- a/src/platforms/adafruit_mono.ts
+++ b/src/platforms/adafruit_mono.ts
@@ -2,7 +2,7 @@ import {AdafruitPlatform} from './adafruit';
 
 export class AdafruitMonochromePlatform extends AdafruitPlatform {
     public static id = 'adafruit_gfx_mono';
-    protected name = 'Adafruit GFX Monochrome';
+    protected name = 'AdafruitGFX Mono';
     protected description = 'Adafruit GFX Monochrome';
 
     constructor() {
diff --git a/src/platforms/u8g2.ts b/src/platforms/u8g2.ts
index 975ba1db..4f30a78e 100644
--- a/src/platforms/u8g2.ts
+++ b/src/platforms/u8g2.ts
@@ -9,17 +9,6 @@ import {Platform} from './platform';
 import cEspIdfTemplate from './templates/u8g2/c_esp_idf.pug';
 import defaultTemplate from './templates/u8g2/default.pug';
 
-// for backwards compatibility
-// TODO: remove after 15.04.2024
-const oldFontNames = {
-    f4x6_tr: '4x6',
-    '5x8_tr': '5x8',
-    haxrcorp4089_tr: 'haxcorp4089',
-    helvB08_tr: 'helvb08',
-    '6x10_tr': '6x10',
-    profont22_tr: 'profont22'
-};
-
 export class U8g2Platform extends Platform {
     public static id = 'u8g2';
     protected name = 'U8g2';
@@ -54,7 +43,7 @@ export class U8g2Platform extends Platform {
     }
 
     generateSourceCode(layers: AbstractLayer[], ctx?: OffscreenCanvasRenderingContext2D): string {
-        const declarations: {type: string; data: any}[] = [];
+        const declarations: { type: string; data: any }[] = [];
         const xbmps = [];
         const xbmpsNames = [];
         const layerData = layers
@@ -82,7 +71,7 @@ export class U8g2Platform extends Platform {
                         props.imageName = varName;
                     }
                 } else if (layer instanceof TextLayer) {
-                    const fontName = `u8g2_font_${oldFontNames[layer.font.name] ?? layer.font.name}`;
+                    const fontName = `u8g2_font_${layer.font.name}`;
                     props.fontName = `${fontName}_tr`;
                 }
                 return props;
diff --git a/src/utils.ts b/src/utils.ts
index 5394fe12..92b26b71 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -306,8 +306,8 @@ export function postParentMessage(type, data) {
     }
 }
 
-export function logEvent(event_name: string, option?: string) {
-    window.gtag &&
+export function logEvent(event_name: string, option?: string | number) {
+    import.meta.env.PROD && window.gtag &&
         gtag('event', event_name, {
             app_name: 'lopaka',
             option: option
diff --git a/styles.css b/styles.css
index ed6fcfc4..299ff791 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
 @font-face {
     font-family: 'haxrcorp4089_tr';
     src: url('fonts/haxrcorp4089.ttf');
@@ -19,7 +21,7 @@
     --danger-color: #eb4e27;
     --success-color: #cddc39;
     --input-font-size: 18px;
-    --main-width: 830px;
+    --main-width: 760px;
 }
 
 h1,
@@ -29,21 +31,13 @@ h3 {
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    color: var(--primary-color);
-    font-family: 'haxrcorp4089_tr';
-    visibility: hidden;
+    font-family: Roboto, 'PT Sans', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 a {
     color: var(--primary-color);
 }
 
-#lopaka_app {
-    display: flex;
-}
-
 .fui-editor__center {
     display: flex;
     flex-direction: column;
@@ -98,7 +92,6 @@ a {
     height: 32px;
     display: flex;
     justify-content: space-between;
-    gap: 8px;
 }
 
 .fui-settings {
@@ -116,7 +109,7 @@ a {
 .fui-editor-header {
     display: flex;
     width: 100%;
-    justify-content: flex-start;
+    justify-content: center;
 }
 
 .fui-select {
@@ -125,10 +118,6 @@ a {
     align-items: center;
 }
 
-.fui-select__label {
-    font-size: 24px;
-}
-
 .fui-form-column {
     margin-left: 16px;
 }
@@ -138,12 +127,6 @@ a {
 .fui-form-column:first-child {
     margin: 0;
 }
-.fui-form-label {
-    font-size: 24px;
-}
-.fui-form-header {
-    font-size: 32px;
-}
 .fui-form-input {
     background-color: var(--secondary-color);
     border: none;
diff --git a/tailwind.config.js b/tailwind.config.js
index 6754505a..4daa14e7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,14 +15,20 @@ module.exports = {
                     'base-200': '#441F07', // default button
                     'base-300': '#FF8200', // default tabs
                     'base-content': '#f3f4f6',
-                    secondary: '#7dd3fc',
+                    secondary: '#5f2f0d',
                     accent: '#047857',
                     info: '#00c9ff',
                     success: '#a0d100',
                     warning: '#f59e0b',
-                    error: '#dc2626'
-                }
+                    error: '#dc2626',
+                },
             }
-        ]
+        ],
+    },
+    theme: {
+        fontFamily: {
+            'sans': 'Roboto, "PT Sans", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans"',
+            'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New','monospace'],
+        },
     }
 };

From 87d613597e6984de8db535d703a3eb0637ccea91 Mon Sep 17 00:00:00 2001
From: Mikahil Ilin <milin@evolution.com>
Date: Tue, 18 Jun 2024 19:36:49 +0100
Subject: [PATCH 38/38] Refactor markup to fit taiwind and daisyUI design
 guides

---
 src/components/App.vue                        |  2 +-
 src/components/fui/FuiButton.test.ts          |  2 +-
 src/components/fui/FuiButton.vue              |  4 +-
 .../FuiDisplayCustomDialog.test.ts            |  7 ++-
 .../FuiDisplayCustomDialog.test.ts.snap       | 14 ++++--
 .../fui/__snapshots__/FuiButton.test.ts.snap  |  6 +--
 src/platforms/__snapshots__/u8g2.test.ts.snap | 50 -------------------
 7 files changed, 19 insertions(+), 66 deletions(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index 7f044e5b..77b98faf 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -165,7 +165,7 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
 <template>
     <div class="grid grid-flow-col justify-start">
         <Sections />
-        <div class="fui-editor" v-show="platform && ['#editor', ''].includes(currentHash)">
+        <div class="fui-editor" v-if="platform">
             <div class="fui-editor__left">
                 <FuiLayers v-show="!isEmpty"></FuiLayers>
             </div>
diff --git a/src/components/fui/FuiButton.test.ts b/src/components/fui/FuiButton.test.ts
index e18066b5..3768bd00 100644
--- a/src/components/fui/FuiButton.test.ts
+++ b/src/components/fui/FuiButton.test.ts
@@ -9,7 +9,7 @@ describe('FuiButton', () => {
                 default: 'Test'
             }
         });
-        expect(wrapper.find('.button').exists()).toBe(true);
+        expect(wrapper.find('.btn.btn-primary').exists()).toBe(true);
         expect(wrapper.element).toMatchSnapshot();
     });
 
diff --git a/src/components/fui/FuiButton.vue b/src/components/fui/FuiButton.vue
index 2d5332cf..2534fdf4 100644
--- a/src/components/fui/FuiButton.vue
+++ b/src/components/fui/FuiButton.vue
@@ -17,8 +17,8 @@ const classNames = computed(() => ({
 }));
 </script>
 <template>
-    <div class="btn btn-sm btn-primary font-sans uppercase leading-none" :class="classNames">
+    <button class="btn btn-sm btn-primary font-sans uppercase leading-none" :class="classNames">
         <slot></slot>
-    </div>
+    </button>
 </template>
 <style lang="css"></style>
diff --git a/src/components/fui/FuiSelectDisplay/FuiDisplayCustomDialog.test.ts b/src/components/fui/FuiSelectDisplay/FuiDisplayCustomDialog.test.ts
index 88b7f4b0..b2e3f733 100644
--- a/src/components/fui/FuiSelectDisplay/FuiDisplayCustomDialog.test.ts
+++ b/src/components/fui/FuiSelectDisplay/FuiDisplayCustomDialog.test.ts
@@ -6,16 +6,15 @@ describe('FuiDisplayCustomDialog', () => {
     it('renders a popup element', () => {
         const wrapper = mount(FuiDisplayCustomDialog, {
             customWidth: 123,
-            customHeight: 123,
+            customHeight: 123
         });
         expect(wrapper.find('.fui-display-custom-dialog').exists()).toBe(true);
         expect(wrapper.element).toMatchSnapshot();
     });
 
-
     it('emits a cancelPopup event when clicked cancel', async () => {
         const wrapper = mount(FuiDisplayCustomDialog);
-        const cancelButton = wrapper.find('.fui-display-custom-dialog__cancel');
+        const cancelButton = wrapper.find('.btn.btn-outline');
         expect(cancelButton.exists()).toBe(true);
 
         await cancelButton.trigger('click');
@@ -24,7 +23,7 @@ describe('FuiDisplayCustomDialog', () => {
 
     it('emits a setCustomDisplay event when clicked save', async () => {
         const wrapper = mount(FuiDisplayCustomDialog);
-        const saveButton = wrapper.find('.fui-display-custom-dialog__save');
+        const saveButton = wrapper.find('.btn.btn-success');
         expect(saveButton.exists()).toBe(true);
 
         await saveButton.trigger('click');
diff --git a/src/components/fui/FuiSelectDisplay/__snapshots__/FuiDisplayCustomDialog.test.ts.snap b/src/components/fui/FuiSelectDisplay/__snapshots__/FuiDisplayCustomDialog.test.ts.snap
index 11e56f3a..5130c143 100644
--- a/src/components/fui/FuiSelectDisplay/__snapshots__/FuiDisplayCustomDialog.test.ts.snap
+++ b/src/components/fui/FuiSelectDisplay/__snapshots__/FuiDisplayCustomDialog.test.ts.snap
@@ -6,7 +6,7 @@ exports[`FuiDisplayCustomDialog > renders a popup element 1`] = `
   data-v-519941f7=""
 >
   <div
-    class="fui-form-row fui-form-header"
+    class="font-bold text-lg pb-4"
     data-v-519941f7=""
   >
     Set display size
@@ -20,7 +20,7 @@ exports[`FuiDisplayCustomDialog > renders a popup element 1`] = `
       data-v-519941f7=""
       for="displayCustomWidth"
     >
-      Width: 
+       Width: 
       <input
         class="fui-form-input fui-form-input__size"
         data-v-519941f7=""
@@ -33,7 +33,7 @@ exports[`FuiDisplayCustomDialog > renders a popup element 1`] = `
       data-v-519941f7=""
       for="displayCustomWidth"
     >
-      Height: 
+       Height: 
       <input
         class="fui-form-input fui-form-input__size"
         data-v-519941f7=""
@@ -48,16 +48,20 @@ exports[`FuiDisplayCustomDialog > renders a popup element 1`] = `
     data-v-519941f7=""
   >
     <button
-      class="button button_danger fui-display-custom-dialog__cancel"
+      class="btn btn-sm btn-primary font-sans uppercase leading-none btn-outline"
       data-v-519941f7=""
     >
+      
       Cancel
+      
     </button>
     <button
-      class="button fui-display-custom-dialog__save"
+      class="btn btn-sm btn-primary font-sans uppercase leading-none btn-outline btn-success"
       data-v-519941f7=""
     >
+      
       Save
+      
     </button>
   </div>
 </div>
diff --git a/src/components/fui/__snapshots__/FuiButton.test.ts.snap b/src/components/fui/__snapshots__/FuiButton.test.ts.snap
index 698022e3..d12b8e97 100644
--- a/src/components/fui/__snapshots__/FuiButton.test.ts.snap
+++ b/src/components/fui/__snapshots__/FuiButton.test.ts.snap
@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FuiButton > renders a button element 1`] = `
-<div
-  class="button"
+<button
+  class="btn btn-sm btn-primary font-sans uppercase leading-none btn-outline"
 >
   
   Test
   
-</div>
+</button>
 `;
diff --git a/src/platforms/__snapshots__/u8g2.test.ts.snap b/src/platforms/__snapshots__/u8g2.test.ts.snap
index 8d014db5..78a47d29 100644
--- a/src/platforms/__snapshots__/u8g2.test.ts.snap
+++ b/src/platforms/__snapshots__/u8g2.test.ts.snap
@@ -50,31 +50,6 @@ u8g2.setFont(u8g2_font_profont22_tr);
 u8g2.sendBuffer();"
 `;
 
-exports[`U8g2 platform > generating source code: Arduino/Esp32 (Cpp) 1`] = `
-"static const unsigned char image_paint_0_bits[] = {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00};
-u8g2.clearBuffer();
-u8g2.setFontMode(1);
-u8g2.setBitmapMode(1);
-@veqtjp8jf9ln6isyfz;u8g2.drawBox(@x:107, @y:46, @w:18, @h:15);
-@utlxpqvhdxnln6it5pw;u8g2.drawBox(@x:97, @y:2, @w:27, @h:11);
-@eu6bpe0xpvvln6itc2e;u8g2.drawBox(@x:106, @y:19, @w:19, @h:18);
-u8g2.setFont(u8g2_font_profont22_tr);
-@s3m4u762qpln6jvm90;u8g2.drawStr(@x:3, @y:11, @text:\\"Text\\");
-@b11j6xs5t46ln6jw96h;u8g2.drawLine(@x1:2, @y1:16, @x2:68, @y2:16);
-@6n8rac0nxpcln6jwdwr;u8g2.drawPixel(@x:62, @y:4);
-@ema2hee85mln6jweht;u8g2.drawPixel(@x:67, @y:8);
-@j1ol1lo5nkln6jwfmg;u8g2.drawPixel(@x:72, @y:12);
-@6uf3k6wj82ln6jwi73;u8g2.drawCircle(@x:20, @y:41, @r:12);
-@87y8hf8sh8dhf8d98sd;u8g2.drawFilledEllipse(@x:21, @y:37, @rx:13, @ry:8);
-@aibkefmz3cln6jwlit;u8g2.drawDisc(@x:17, @y:43, @r:3);
-@g7pk1wfbqqkln6jwxby;u8g2.drawFrame(@x:44, @y:29, @w:44, @h:28);
-@u9uidj9d90fu9sj9jj9;u8g2.drawEllipse(@x:15, @y:36, @rx:7, @ry:7);
-@rrsjcz4oz2ln6jx4y4;u8g2.drawXBM(@x:0, @y:0, @w:128, @h:64, @image:image_paint_0_bits);
-@njsoidnfijoinisn;u8g2.drawRBox(@x:10, @y:4, @w:12, @h:19, @r:3);
-@jnijisniijaojosd;u8g2.drawRFrame(@x:45, @y:20, @w:14, @h:12, @r:5);
-u8g2.sendBuffer();"
-`;
-
 exports[`U8g2 platform > generating source code: Esp-Idf (C) 1`] = `
 "static const uint8_t image_paint_0_bits[] = {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00};
 u8g2_ClearBuffer(&u8g2); 
@@ -99,28 +74,3 @@ u8g2_SetFont(&u8g2, u8g2_font_profont22_tr);
 @jnijisniijaojosd;u8g2_DrawRFrame(&u8g2, 45, 20, 14, 12, 5);
 u8g2_SendBuffer(&u8g2); "
 `;
-
-exports[`U8g2 platform > generating source code: arduino 1`] = `
-"static const unsigned char image_paint_0_bits[] U8X8_PROGMEM = {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00};
-u8g2.clearBuffer();
-u8g2.setFontMode(1);
-u8g2.setBitmapMode(1);
-@veqtjp8jf9ln6isyfz;u8g2.drawBox(@x:107, @y:46, @w:18, @h:15);
-@utlxpqvhdxnln6it5pw;u8g2.drawBox(@x:97, @y:2, @w:27, @h:11);
-@eu6bpe0xpvvln6itc2e;u8g2.drawBox(@x:106, @y:19, @w:19, @h:18);
-u8g2.setFont(u8g2_font_profont22_tr);
-@s3m4u762qpln6jvm90;u8g2.drawStr(@x:3, @y:11, @text:\\"Text\\");
-@b11j6xs5t46ln6jw96h;u8g2.drawLine(@x1:2, @y1:16, @x2:68, @y2:16);
-@6n8rac0nxpcln6jwdwr;u8g2.drawPixel(@x:62, @y:4);
-@ema2hee85mln6jweht;u8g2.drawPixel(@x:67, @y:8);
-@j1ol1lo5nkln6jwfmg;u8g2.drawPixel(@x:72, @y:12);
-@6uf3k6wj82ln6jwi73;u8g2.drawCircle(@x:20, @y:41, @r:12);
-@87y8hf8sh8dhf8d98sd;u8g2.drawFilledEllipse(@x:21, @y:37, @rx:13, @ry:8);
-@aibkefmz3cln6jwlit;u8g2.drawDisc(@x:17, @y:43, @r:3);
-@g7pk1wfbqqkln6jwxby;u8g2.drawFrame(@x:44, @y:29, @w:44, @h:28);
-@u9uidj9d90fu9sj9jj9;u8g2.drawEllipse(@x:15, @y:36, @rx:7, @ry:7);
-@rrsjcz4oz2ln6jx4y4;u8g2.drawXBM(@x:0, @y:0, @w:128, @h:64, @image:image_paint_0_bits);
-@njsoidnfijoinisn;u8g2.drawRBox(@x:10, @y:4, @w:12, @h:19, @r:3);
-@jnijisniijaojosd;u8g2.drawRFrame(@x:45, @y:20, @w:14, @h:12, @r:5);
-u8g2.sendBuffer();"
-`;