@multiplekex/shallot 0.1.12 → 0.2.0

package/src/standard/compute/index.ts

@@ -1,30 +1,25 @@
 import { resource, type Plugin, type State, type System } from "../../core";
 import { ComputeGraph, type ExecutionContext, type ResourceId } from "./graph";
-import { createTimingCollector, type FrameTiming } from "./timing";
 
-export * from "./graph";
-export * from "./inspect";
-export * from "./pass";
-export * from "./readback";
-export * from "./timing";
+export { ComputeGraph } from "./graph";
+export type {
+    ResourceId,
+    NodeId,
+    ResourceRef,
+    ExecutionContext,
+    ComputeNode,
+    ExecutionPlan,
+} from "./graph";
 
-const MIN_CANVAS_SIZE = 1;
-
-function syncCanvasSize(canvas: HTMLCanvasElement): void {
-    const dpr = window.devicePixelRatio || 1;
-    const rect = canvas.getBoundingClientRect();
-
-    const width = Math.max(MIN_CANVAS_SIZE, Math.floor(rect.width * dpr));
-    const height = Math.max(MIN_CANVAS_SIZE, Math.floor(rect.height * dpr));
+export { readBuffer, readFloat32, readUint32, StagingPool } from "./readback";
 
-    if (canvas.width !== width || canvas.height !== height) {
-        canvas.width = width;
-        canvas.height = height;
-    }
+export interface Canvas {
+    readonly element: HTMLCanvasElement;
+    readonly context: GPUCanvasContext;
+    readonly format: GPUTextureFormat;
 }
 
-let resizeObserver: ResizeObserver | null = null;
-let observedCanvas: HTMLCanvasElement | null = null;
+export const Canvas = resource<Canvas>("canvas");
 
 export function createEntityIdBuffer(device: GPUDevice, maxInstances: number): GPUBuffer {
     return device.createBuffer({
@@ -46,11 +41,21 @@ export async function requestGPU(): Promise<GPUDevice> {
 
     const maxTextureDimension2D = adapter.limits.maxTextureDimension2D;
 
-    return adapter.requestDevice({
+    const device = await adapter.requestDevice({
         requiredLimits: {
             maxTextureDimension2D,
         },
     });
+
+    device.lost.then((info) => {
+        console.error(`GPU device lost: ${info.reason}`, info.message);
+    });
+
+    device.onuncapturederror = (event) => {
+        console.error("GPU uncaptured error:", event.error);
+    };
+
+    return device;
 }
 
 export interface ComputeResources {
@@ -59,25 +64,41 @@ export interface ComputeResources {
     buffers: Map<ResourceId, GPUBuffer>;
 }
 
-export interface ComputeState {
+export interface Compute {
     readonly device: GPUDevice;
-    readonly context: GPUCanvasContext;
-    readonly format: GPUTextureFormat;
     readonly graph: ComputeGraph;
     readonly resources: ComputeResources;
-    lastFrameTiming: FrameTiming | null;
     frameIndex: number;
 }
 
-export const Compute = resource<ComputeState>("compute");
+export const Compute = resource<Compute>("compute");
+
+const MIN_CANVAS_SIZE = 1;
+
+function syncCanvasSize(canvas: HTMLCanvasElement): void {
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+
+    const width = Math.max(MIN_CANVAS_SIZE, Math.floor(rect.width * dpr));
+    const height = Math.max(MIN_CANVAS_SIZE, Math.floor(rect.height * dpr));
+
+    if (canvas.width !== width || canvas.height !== height) {
+        canvas.width = width;
+        canvas.height = height;
+    }
+}
+
+let resizeObserver: ResizeObserver | null = null;
+let observedCanvas: HTMLCanvasElement | null = null;
 
 export const ComputeSystem: System = {
     group: "draw",
 
     setup(state: State) {
-        if (!state.canvas) return;
+        const canvas = Canvas.from(state);
+        if (!canvas) return;
 
-        observedCanvas = state.canvas;
+        observedCanvas = canvas.element;
         syncCanvasSize(observedCanvas);
 
         resizeObserver = new ResizeObserver(() => {
@@ -88,21 +109,22 @@ export const ComputeSystem: System = {
 
     update(state: State) {
         const compute = Compute.from(state);
-        if (!compute) return;
+        const canvas = Canvas.from(state);
+        if (!compute || !canvas) return;
 
-        const { device, context, format, graph, resources } = compute;
+        const { device, graph, resources } = compute;
+        const { context, format } = canvas;
         const plan = graph.compile();
 
         if (plan.sorted.length === 0) return;
 
         const canvasTexture = context.getCurrentTexture();
         const canvasView = canvasTexture.createView();
-        const encoder = device.createCommandEncoder();
 
         const ctx: ExecutionContext = {
             device,
             queue: device.queue,
-            encoder,
+            encoder: null as unknown as GPUCommandEncoder,
             context,
             format,
             canvasView,
@@ -126,17 +148,20 @@ export const ComputeSystem: System = {
             },
         };
 
-        const collector = createTimingCollector();
+        let encoder = device.createCommandEncoder();
+        (ctx as { encoder: GPUCommandEncoder }).encoder = encoder;
 
         for (const node of plan.sorted) {
-            collector.beginNode(node.id);
             node.execute(ctx);
-            collector.endNode(node.id);
+
+            if (node.sync) {
+                device.queue.submit([encoder.finish()]);
+                encoder = device.createCommandEncoder();
+                (ctx as { encoder: GPUCommandEncoder }).encoder = encoder;
+            }
         }
 
         device.queue.submit([encoder.finish()]);
-
-        compute.lastFrameTiming = collector.finish(compute.frameIndex);
         compute.frameIndex++;
     },
 
@@ -150,24 +175,14 @@ export const ComputeSystem: System = {
 export const ComputePlugin: Plugin = {
     systems: [ComputeSystem],
 
-    async initialize(state: State) {
-        if (!state.canvas) {
-            throw new Error("ComputePlugin requires a canvas");
-        }
+    async initialize(state: State, onProgress?: (progress: number) => void) {
+        const canvas = Canvas.from(state);
+        if (!canvas) return;
 
         const device = await requestGPU();
+        const { context, format } = canvas;
 
-        const context = state.canvas.getContext("webgpu");
-        if (!context) {
-            throw new Error("Failed to get WebGPU context");
-        }
-
-        const format = navigator.gpu.getPreferredCanvasFormat();
-        context.configure({
-            device,
-            format,
-            alphaMode: "premultiplied",
-        });
+        context.configure({ device, format, alphaMode: "premultiplied" });
 
         const graph = new ComputeGraph();
         const resources: ComputeResources = {
@@ -176,14 +191,14 @@ export const ComputePlugin: Plugin = {
             buffers: new Map(),
         };
 
-        state.setResource(Compute, {
-            device,
-            context,
-            format,
-            graph,
-            resources,
-            lastFrameTiming: null,
-            frameIndex: 0,
-        });
+        state.setResource(Compute, { device, graph, resources, frameIndex: 0 });
+        onProgress?.(1);
     },
 };
+
+export function initCanvas(state: State, element: HTMLCanvasElement): void {
+    const context = element.getContext("webgpu")!;
+    const format = navigator.gpu.getPreferredCanvasFormat();
+    element.style.imageRendering = "pixelated";
+    state.setResource(Canvas, { element, context, format });
+}

package/src/standard/defaults.ts

@@ -1,12 +1,13 @@
-import type { Plugin } from "../core/types";
-import { StateBuilder } from "../core/builder";
+import { StateBuilder, type Plugin } from "../core/builder";
 import { TransformsPlugin } from "./transforms";
 import { InputPlugin } from "./input";
-import { canvasLoading } from "./loading";
-import { ComputePlugin } from "./compute";
+import { ComputePlugin, initCanvas } from "./compute";
 import { RenderPlugin } from "./render";
+import { ActivityPlugin, spinnerDark } from "./activity";
+import { shallotDark } from "./loading";
 
 export const DEFAULT_PLUGINS: readonly Plugin[] = [
+    ActivityPlugin,
     TransformsPlugin,
     InputPlugin,
     ComputePlugin,
@@ -14,4 +15,6 @@ export const DEFAULT_PLUGINS: readonly Plugin[] = [
 ];
 
 StateBuilder.defaultPlugins = DEFAULT_PLUGINS;
-StateBuilder.loading = canvasLoading;
+StateBuilder.initCanvas = initCanvas;
+StateBuilder.defaultLoading = shallotDark;
+ActivityPlugin.spinner = spinnerDark;

package/src/standard/index.ts

@@ -1,3 +1,4 @@
+export * from "./activity";
 export * from "./compute";
 export * from "./input";
 export * from "./tween";

package/src/standard/input/index.ts

@@ -1,28 +1,38 @@
-import {
-    resource,
-    type State,
-    type System,
-    type Plugin,
-    type InputState,
-    type MouseState,
-} from "../../core";
+import { resource, type State, type System, type Plugin } from "../../core";
+import { Canvas } from "../compute";
+
+export interface Mouse {
+    deltaX: number;
+    deltaY: number;
+    scroll: number;
+    left: boolean;
+    right: boolean;
+    middle: boolean;
+}
+
+export interface Inputs {
+    readonly mouse: Readonly<Mouse>;
+    isKeyDown(code: string): boolean;
+    isKeyPressed(code: string): boolean;
+    isKeyReleased(code: string): boolean;
+}
 
-export const Input = resource<InputState>("input");
+export const Inputs = resource<Inputs>("inputs");
 
 const keys = new Set<string>();
 const keysPressed = new Set<string>();
 const keysReleased = new Set<string>();
 
-const mouse: MouseState = {
+const mouse: Mouse = {
     deltaX: 0,
     deltaY: 0,
-    scrollDelta: 0,
+    scroll: 0,
     left: false,
     right: false,
     middle: false,
 };
 
-const inputState: InputState = {
+const inputs: Inputs = {
     mouse,
     isKeyDown: (code: string) => keys.has(code),
     isKeyPressed: (code: string) => keysPressed.has(code),
@@ -100,7 +110,7 @@ function handlePointerMove(e: PointerEvent): void {
 
 function handleWheel(e: WheelEvent): void {
     if (e.target !== canvas) return;
-    mouse.scrollDelta += e.deltaY;
+    mouse.scroll += e.deltaY;
     e.preventDefault();
 }
 
@@ -115,7 +125,7 @@ function resetFrameState(): void {
     keysReleased.clear();
     mouse.deltaX = 0;
     mouse.deltaY = 0;
-    mouse.scrollDelta = 0;
+    mouse.scroll = 0;
 }
 
 function clearAllState(): void {
@@ -124,7 +134,7 @@ function clearAllState(): void {
     keysReleased.clear();
     mouse.deltaX = 0;
     mouse.deltaY = 0;
-    mouse.scrollDelta = 0;
+    mouse.scroll = 0;
     mouse.left = false;
     mouse.right = false;
     mouse.middle = false;
@@ -138,8 +148,9 @@ export const InputSystem: System = {
     group: "simulation",
 
     setup(state: State) {
-        if (!state.canvas) return;
-        canvas = state.canvas;
+        const canvasRes = Canvas.from(state);
+        if (!canvasRes) return;
+        canvas = canvasRes.element;
         canvas.style.touchAction = "none";
 
         window.addEventListener("keydown", handleKeyDown);
@@ -151,7 +162,7 @@ export const InputSystem: System = {
         canvas.addEventListener("wheel", handleWheel, { passive: false });
         canvas.addEventListener("contextmenu", handleContextMenu);
 
-        state.setResource(Input, inputState);
+        state.setResource(Inputs, inputs);
     },
 
     dispose(state: State) {
@@ -168,7 +179,7 @@ export const InputSystem: System = {
         }
 
         clearAllState();
-        state.deleteResource(Input);
+        state.deleteResource(Inputs);
     },
 };
 

package/src/standard/loading/index.ts

@@ -1,4 +1,5 @@
-import type { Loading } from "../../core";
+import type { Loading } from "../../core/builder";
+export type { Loading };
 
 interface Theme {
     bg: string;
@@ -9,7 +10,7 @@ interface Theme {
 const dark: Theme = { bg: "#1a1a1a", track: "#333", bar: "#E8A86B" };
 const light: Theme = { bg: "#f5f5f5", track: "#ddd", bar: "#B87654" };
 
-const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80">
   <defs>
     <radialGradient id="baseGradient" cx="35%" cy="30%" r="70%" fx="25%" fy="20%">
       <stop offset="0%" stop-color="#F5D4B8"/>
@@ -17,14 +18,18 @@ const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
       <stop offset="100%" stop-color="#B87654"/>
     </radialGradient>
   </defs>
-  <g transform="rotate(35 40.0 40.0)">
-    <path d="M40.0,2 C44.0,10 66.0,28 66.0,46 C66.0,60 48.0,70 40.0,78 C32.0,70 14.0,60 14.0,46 C14.0,28 36.0,10 40.0,2 Z" fill="url(#baseGradient)"/>
-    <path d="M40.0,6 C37.0,14 22.0,28 20.0,44 C20.0,52 28.0,62 36.0,70 C34.0,58 26.0,46 26.0,38 C26.0,26 38.0,12 40.0,6 Z" fill="#B87654" opacity="0.45"/>
-    <path d="M40.0,6 C43.0,14 58.0,28 60.0,44 C60.0,52 52.0,62 44.0,70 C46.0,58 54.0,46 54.0,38 C54.0,26 42.0,12 40.0,6 Z" fill="#B87654" opacity="0.35"/>
-    <path d="M40.0,8 C40.0,20 40.0,50 40.0,72" stroke="#B87654" stroke-width="1" stroke-opacity="0.4" fill="none" stroke-linecap="round"/>
-    <path d="M40.0,78 C48.0,70 66.0,60 66.0,46 C61.0,58 44.0,70 40.0,73 Z" fill="#B87654"/>
-    <path d="M40.0,2 C36.0,10 14.0,28 14.0,46 C19.0,30 41.0,8 40.0,7 Z" fill="#F5D4B8" opacity="0.7"/>
-    <path d="M40.0,2 C44.0,10 66.0,28 66.0,46 C66.0,60 48.0,70 40.0,78 C32.0,70 14.0,60 14.0,46 C14.0,28 36.0,10 40.0,2 Z" fill="none" stroke="#6B4230" stroke-width="2"/>
+  <g id="Icon" transform="rotate(35 40 40)">
+    <path id="Background" d="M40,2 C44,10 66,28 66,46 C66,60 48,70 40,78 C32,70 14,60 14,46 C14,28 36,10 40,2 Z" fill="#E8A86B"/>
+    <path id="CloveLeft" d="M40,6 C37,14 22,28 20,44 C20,52 28,62 36,70 C34,58 26,46 26,38 C26,26 38,12 40,6 Z" fill="#D49560"/>
+    <path id="CloveRight" d="M40,6 C43,14 58,28 60,44 C60,52 52,62 44,70 C46,58 54,46 54,38 C54,26 42,12 40,6 Z" fill="#D49560"/>
+    <path id="CenterCrease" d="M40,8 C40,20 40,50 40,72" stroke="#6B4230" stroke-width="1" stroke-opacity="0.4" fill="none" stroke-linecap="round"/>
+    <path id="BottomEdge" d="M40,78 C48,70 66,60 66,46 C61,58 44,70 40,73 Z" fill="#D49560"/>
+    <path id="Outline" d="M40,2 C44,10 66,28 66,46 C66,60 48,70 40,78 C32,70 14,60 14,46 C14,28 36,10 40,2 Z" fill="none" stroke="#6B4230" stroke-width="2"/>
+  </g>
+  <g id="Text" transform="translate(80 59)">
+    <path d="M13.37 0.73Q10.88 0.73 8.47 0.07Q6.06 -0.58 4.02 -1.75Q1.97 -2.93 0.52 -4.52L5.54 -9.63Q6.96 -8.09 8.87 -7.26Q10.79 -6.44 13.05 -6.44Q14.62 -6.44 15.44 -6.89Q16.27 -7.34 16.27 -8.18Q16.27 -9.22 15.27 -9.77Q14.27 -10.32 12.7 -10.74Q11.14 -11.17 9.4 -11.7Q7.66 -12.24 6.08 -13.17Q4.5 -14.09 3.51 -15.73Q2.52 -17.37 2.52 -19.95Q2.52 -22.65 3.92 -24.66Q5.31 -26.68 7.86 -27.83Q10.41 -28.97 13.86 -28.97Q17.43 -28.97 20.49 -27.74Q23.55 -26.51 25.46 -24.04L20.42 -18.94Q19.08 -20.5 17.43 -21.16Q15.78 -21.81 14.18 -21.81Q12.67 -21.81 11.93 -21.36Q11.19 -20.91 11.19 -20.13Q11.19 -19.23 12.18 -18.7Q13.17 -18.18 14.73 -17.78Q16.3 -17.37 18.02 -16.81Q19.75 -16.24 21.32 -15.24Q22.88 -14.24 23.87 -12.59Q24.85 -10.93 24.85 -8.29Q24.85 -4.15 21.75 -1.71Q18.65 0.73 13.37 0.73Z M48.31 0V-16.04Q48.31 -18.27 46.95 -19.62Q45.59 -20.97 43.48 -20.97Q42.04 -20.97 40.93 -20.36Q39.82 -19.75 39.19 -18.63Q38.57 -17.52 38.57 -16.04L35.12 -17.72Q35.12 -21.05 36.53 -23.53Q37.93 -26.01 40.42 -27.39Q42.91 -28.77 46.15 -28.77Q49.45 -28.77 51.94 -27.39Q54.43 -26.01 55.81 -23.61Q57.19 -21.2 57.19 -18.04V0ZM29.7 0V-42.11H38.57V0Z M74.65 0.58Q70.76 0.58 67.7 -1.33Q64.64 -3.25 62.89 -6.55Q61.13 -9.86 61.13 -14.07Q61.13 -18.3 62.89 -21.62Q64.64 -24.94 67.7 -26.85Q70.76 -28.77 74.65 -28.77Q77.49 -28.77 79.78 -27.67Q82.07 -26.56 83.51 -24.62Q84.94 -22.68 85.14 -20.18V-8Q84.94 -5.51 83.52 -3.57Q82.1 -1.62 79.79 -0.52Q77.49 0.58 74.65 0.58ZM76.44 -7.42Q79.29 -7.42 81.03 -9.29Q82.77 -11.17 82.77 -14.09Q82.77 -16.07 81.98 -17.56Q81.2 -19.05 79.78 -19.91Q78.36 -20.76 76.47 -20.76Q74.62 -20.76 73.2 -19.91Q71.78 -19.05 70.95 -17.55Q70.12 -16.04 70.12 -14.09Q70.12 -12.15 70.93 -10.64Q71.75 -9.13 73.18 -8.28Q74.62 -7.42 76.44 -7.42ZM82.39 0V-7.57L83.72 -14.44L82.39 -21.26V-28.19H91.12V0Z M97.38 0V-42.11H106.26V0Z M112.52 0V-42.11H121.39V0Z M141.23 0.64Q136.85 0.64 133.36 -1.31Q129.86 -3.25 127.83 -6.61Q125.8 -9.98 125.8 -14.15Q125.8 -18.33 127.82 -21.63Q129.83 -24.94 133.33 -26.88Q136.82 -28.83 141.2 -28.83Q145.61 -28.83 149.09 -26.9Q152.57 -24.97 154.6 -21.65Q156.63 -18.33 156.63 -14.15Q156.63 -9.98 154.61 -6.61Q152.6 -3.25 149.12 -1.31Q145.64 0.64 141.23 0.64ZM141.2 -7.42Q143.12 -7.42 144.56 -8.27Q146.02 -9.11 146.81 -10.63Q147.61 -12.15 147.61 -14.12Q147.61 -16.1 146.78 -17.59Q145.96 -19.08 144.54 -19.92Q143.12 -20.76 141.2 -20.76Q139.34 -20.76 137.9 -19.91Q136.45 -19.05 135.63 -17.56Q134.82 -16.07 134.82 -14.09Q134.82 -12.15 135.63 -10.63Q136.45 -9.11 137.9 -8.27Q139.34 -7.42 141.2 -7.42Z M165.07 0V-39.85H173.94V0ZM158.69 -20.65V-28.19H180.32V-20.65Z" fill="#3D2415" transform="translate(2.5 3)"/>
+    <path d="M13.37 0.73Q10.88 0.73 8.47 0.07Q6.06 -0.58 4.02 -1.75Q1.97 -2.93 0.52 -4.52L5.54 -9.63Q6.96 -8.09 8.87 -7.26Q10.79 -6.44 13.05 -6.44Q14.62 -6.44 15.44 -6.89Q16.27 -7.34 16.27 -8.18Q16.27 -9.22 15.27 -9.77Q14.27 -10.32 12.7 -10.74Q11.14 -11.17 9.4 -11.7Q7.66 -12.24 6.08 -13.17Q4.5 -14.09 3.51 -15.73Q2.52 -17.37 2.52 -19.95Q2.52 -22.65 3.92 -24.66Q5.31 -26.68 7.86 -27.83Q10.41 -28.97 13.86 -28.97Q17.43 -28.97 20.49 -27.74Q23.55 -26.51 25.46 -24.04L20.42 -18.94Q19.08 -20.5 17.43 -21.16Q15.78 -21.81 14.18 -21.81Q12.67 -21.81 11.93 -21.36Q11.19 -20.91 11.19 -20.13Q11.19 -19.23 12.18 -18.7Q13.17 -18.18 14.73 -17.78Q16.3 -17.37 18.02 -16.81Q19.75 -16.24 21.32 -15.24Q22.88 -14.24 23.87 -12.59Q24.85 -10.93 24.85 -8.29Q24.85 -4.15 21.75 -1.71Q18.65 0.73 13.37 0.73Z M48.31 0V-16.04Q48.31 -18.27 46.95 -19.62Q45.59 -20.97 43.48 -20.97Q42.04 -20.97 40.93 -20.36Q39.82 -19.75 39.19 -18.63Q38.57 -17.52 38.57 -16.04L35.12 -17.72Q35.12 -21.05 36.53 -23.53Q37.93 -26.01 40.42 -27.39Q42.91 -28.77 46.15 -28.77Q49.45 -28.77 51.94 -27.39Q54.43 -26.01 55.81 -23.61Q57.19 -21.2 57.19 -18.04V0ZM29.7 0V-42.11H38.57V0Z M74.65 0.58Q70.76 0.58 67.7 -1.33Q64.64 -3.25 62.89 -6.55Q61.13 -9.86 61.13 -14.07Q61.13 -18.3 62.89 -21.62Q64.64 -24.94 67.7 -26.85Q70.76 -28.77 74.65 -28.77Q77.49 -28.77 79.78 -27.67Q82.07 -26.56 83.51 -24.62Q84.94 -22.68 85.14 -20.18V-8Q84.94 -5.51 83.52 -3.57Q82.1 -1.62 79.79 -0.52Q77.49 0.58 74.65 0.58ZM76.44 -7.42Q79.29 -7.42 81.03 -9.29Q82.77 -11.17 82.77 -14.09Q82.77 -16.07 81.98 -17.56Q81.2 -19.05 79.78 -19.91Q78.36 -20.76 76.47 -20.76Q74.62 -20.76 73.2 -19.91Q71.78 -19.05 70.95 -17.55Q70.12 -16.04 70.12 -14.09Q70.12 -12.15 70.93 -10.64Q71.75 -9.13 73.18 -8.28Q74.62 -7.42 76.44 -7.42ZM82.39 0V-7.57L83.72 -14.44L82.39 -21.26V-28.19H91.12V0Z M97.38 0V-42.11H106.26V0Z M112.52 0V-42.11H121.39V0Z M141.23 0.64Q136.85 0.64 133.36 -1.31Q129.86 -3.25 127.83 -6.61Q125.8 -9.98 125.8 -14.15Q125.8 -18.33 127.82 -21.63Q129.83 -24.94 133.33 -26.88Q136.82 -28.83 141.2 -28.83Q145.61 -28.83 149.09 -26.9Q152.57 -24.97 154.6 -21.65Q156.63 -18.33 156.63 -14.15Q156.63 -9.98 154.61 -6.61Q152.6 -3.25 149.12 -1.31Q145.64 0.64 141.23 0.64ZM141.2 -7.42Q143.12 -7.42 144.56 -8.27Q146.02 -9.11 146.81 -10.63Q147.61 -12.15 147.61 -14.12Q147.61 -16.1 146.78 -17.59Q145.96 -19.08 144.54 -19.92Q143.12 -20.76 141.2 -20.76Q139.34 -20.76 137.9 -19.91Q136.45 -19.05 135.63 -17.56Q134.82 -16.07 134.82 -14.09Q134.82 -12.15 135.63 -10.63Q136.45 -9.11 137.9 -8.27Q139.34 -7.42 141.2 -7.42Z M165.07 0V-39.85H173.94V0ZM158.69 -20.65V-28.19H180.32V-20.65Z" fill="none" stroke="#6B4230" stroke-width="3.5" stroke-linejoin="round"/>
+    <path d="M13.37 0.73Q10.88 0.73 8.47 0.07Q6.06 -0.58 4.02 -1.75Q1.97 -2.93 0.52 -4.52L5.54 -9.63Q6.96 -8.09 8.87 -7.26Q10.79 -6.44 13.05 -6.44Q14.62 -6.44 15.44 -6.89Q16.27 -7.34 16.27 -8.18Q16.27 -9.22 15.27 -9.77Q14.27 -10.32 12.7 -10.74Q11.14 -11.17 9.4 -11.7Q7.66 -12.24 6.08 -13.17Q4.5 -14.09 3.51 -15.73Q2.52 -17.37 2.52 -19.95Q2.52 -22.65 3.92 -24.66Q5.31 -26.68 7.86 -27.83Q10.41 -28.97 13.86 -28.97Q17.43 -28.97 20.49 -27.74Q23.55 -26.51 25.46 -24.04L20.42 -18.94Q19.08 -20.5 17.43 -21.16Q15.78 -21.81 14.18 -21.81Q12.67 -21.81 11.93 -21.36Q11.19 -20.91 11.19 -20.13Q11.19 -19.23 12.18 -18.7Q13.17 -18.18 14.73 -17.78Q16.3 -17.37 18.02 -16.81Q19.75 -16.24 21.32 -15.24Q22.88 -14.24 23.87 -12.59Q24.85 -10.93 24.85 -8.29Q24.85 -4.15 21.75 -1.71Q18.65 0.73 13.37 0.73Z M48.31 0V-16.04Q48.31 -18.27 46.95 -19.62Q45.59 -20.97 43.48 -20.97Q42.04 -20.97 40.93 -20.36Q39.82 -19.75 39.19 -18.63Q38.57 -17.52 38.57 -16.04L35.12 -17.72Q35.12 -21.05 36.53 -23.53Q37.93 -26.01 40.42 -27.39Q42.91 -28.77 46.15 -28.77Q49.45 -28.77 51.94 -27.39Q54.43 -26.01 55.81 -23.61Q57.19 -21.2 57.19 -18.04V0ZM29.7 0V-42.11H38.57V0Z M74.65 0.58Q70.76 0.58 67.7 -1.33Q64.64 -3.25 62.89 -6.55Q61.13 -9.86 61.13 -14.07Q61.13 -18.3 62.89 -21.62Q64.64 -24.94 67.7 -26.85Q70.76 -28.77 74.65 -28.77Q77.49 -28.77 79.78 -27.67Q82.07 -26.56 83.51 -24.62Q84.94 -22.68 85.14 -20.18V-8Q84.94 -5.51 83.52 -3.57Q82.1 -1.62 79.79 -0.52Q77.49 0.58 74.65 0.58ZM76.44 -7.42Q79.29 -7.42 81.03 -9.29Q82.77 -11.17 82.77 -14.09Q82.77 -16.07 81.98 -17.56Q81.2 -19.05 79.78 -19.91Q78.36 -20.76 76.47 -20.76Q74.62 -20.76 73.2 -19.91Q71.78 -19.05 70.95 -17.55Q70.12 -16.04 70.12 -14.09Q70.12 -12.15 70.93 -10.64Q71.75 -9.13 73.18 -8.28Q74.62 -7.42 76.44 -7.42ZM82.39 0V-7.57L83.72 -14.44L82.39 -21.26V-28.19H91.12V0Z M97.38 0V-42.11H106.26V0Z M112.52 0V-42.11H121.39V0Z M141.23 0.64Q136.85 0.64 133.36 -1.31Q129.86 -3.25 127.83 -6.61Q125.8 -9.98 125.8 -14.15Q125.8 -18.33 127.82 -21.63Q129.83 -24.94 133.33 -26.88Q136.82 -28.83 141.2 -28.83Q145.61 -28.83 149.09 -26.9Q152.57 -24.97 154.6 -21.65Q156.63 -18.33 156.63 -14.15Q156.63 -9.98 154.61 -6.61Q152.6 -3.25 149.12 -1.31Q145.64 0.64 141.23 0.64ZM141.2 -7.42Q143.12 -7.42 144.56 -8.27Q146.02 -9.11 146.81 -10.63Q147.61 -12.15 147.61 -14.12Q147.61 -16.1 146.78 -17.59Q145.96 -19.08 144.54 -19.92Q143.12 -20.76 141.2 -20.76Q139.34 -20.76 137.9 -19.91Q136.45 -19.05 135.63 -17.56Q134.82 -16.07 134.82 -14.09Q134.82 -12.15 135.63 -10.63Q136.45 -9.11 137.9 -8.27Q139.34 -7.42 141.2 -7.42Z M165.07 0V-39.85H173.94V0ZM158.69 -20.65V-28.19H180.32V-20.65Z" fill="#E8A86B"/>
   </g>
 </svg>`;
 
@@ -38,7 +43,7 @@ function createOverlay(canvas: HTMLCanvasElement, bg: string): HTMLDivElement {
         align-items: center;
         justify-content: center;
         background: ${bg};
-        z-index: 1000;
+        z-index: 10000;
     `;
 
     const parent = canvas.parentElement;
@@ -55,7 +60,7 @@ function createOverlay(canvas: HTMLCanvasElement, bg: string): HTMLDivElement {
 function createProgressBar(theme: Theme): { track: HTMLDivElement; bar: HTMLDivElement } {
     const track = document.createElement("div");
     track.style.cssText = `
-        width: 200px;
+        width: 228px;
         height: 4px;
         background: ${theme.track};
         border-radius: 2px;
@@ -84,7 +89,7 @@ function shallotLoading(canvas: HTMLCanvasElement, theme: Theme): Loading {
 
             const logo = document.createElement("div");
             logo.innerHTML = LOGO_SVG;
-            logo.style.cssText = "width: 64px; height: 64px; margin-bottom: 24px;";
+            logo.style.cssText = "width: 228px; height: 64px; margin-bottom: 24px;";
             overlay.appendChild(logo);
 
             const progressBar = createProgressBar(theme);