@xfey/tutti 0.1.31 → 0.1.33

package/dist/server-shell/local-console/session.js

@@ -0,0 +1,116 @@
+import { createHash, randomBytes, timingSafeEqual } from "node:crypto";
+export const LOCAL_CONSOLE_SESSION_COOKIE = "tutti_local_console_session";
+const ACCESS_TOKEN_TTL_MS = 60_000;
+const SESSION_TTL_MS = 12 * 60 * 60 * 1_000;
+function createSecret() {
+    return randomBytes(32).toString("base64url");
+}
+function hashSecret(value) {
+    return createHash("sha256").update(value).digest("base64url");
+}
+function secretEquals(value, expectedHash) {
+    const actual = Buffer.from(hashSecret(value));
+    const expected = Buffer.from(expectedHash);
+    return actual.length === expected.length && timingSafeEqual(actual, expected);
+}
+export class LocalConsoleSessionRegistry {
+    #accessTokens = new Map();
+    #sessions = new Map();
+    #now;
+    constructor(options = {}) {
+        this.#now = options.now ?? (() => new Date());
+    }
+    issueAccessToken(options) {
+        this.#purgeExpired();
+        const token = createSecret();
+        const expiresAt = this.#now().getTime() + ACCESS_TOKEN_TTL_MS;
+        this.#accessTokens.set(hashSecret(token), {
+            hash: hashSecret(token),
+            expiresAt,
+            currentDirectory: options.currentDirectory,
+        });
+        return { token, expires_at: new Date(expiresAt).toISOString() };
+    }
+    exchangeAccessToken(token) {
+        this.#purgeExpired();
+        const accessTokenHash = hashSecret(token);
+        const accessToken = this.#accessTokens.get(accessTokenHash);
+        if (accessToken === undefined ||
+            accessToken.expiresAt <= this.#now().getTime() ||
+            !secretEquals(token, accessToken.hash)) {
+            return null;
+        }
+        this.#accessTokens.delete(accessTokenHash);
+        const sessionToken = createSecret();
+        const expiresAt = this.#now().getTime() + SESSION_TTL_MS;
+        this.#sessions.set(hashSecret(sessionToken), {
+            hash: hashSecret(sessionToken),
+            csrfToken: createSecret(),
+            expiresAt,
+            currentDirectory: accessToken.currentDirectory,
+        });
+        const session = this.#sessions.get(hashSecret(sessionToken));
+        if (session === undefined) {
+            return null;
+        }
+        return {
+            sessionToken,
+            csrfToken: session.csrfToken,
+            expires_at: new Date(expiresAt).toISOString(),
+        };
+    }
+    readSession(token) {
+        this.#purgeExpired();
+        if (token === undefined || token.trim() === "") {
+            return null;
+        }
+        const session = this.#sessions.get(hashSecret(token));
+        if (session === undefined ||
+            session.expiresAt <= this.#now().getTime() ||
+            !secretEquals(token, session.hash)) {
+            return null;
+        }
+        return session;
+    }
+    #purgeExpired() {
+        const now = this.#now().getTime();
+        for (const [key, value] of this.#accessTokens) {
+            if (value.expiresAt <= now) {
+                this.#accessTokens.delete(key);
+            }
+        }
+        for (const [key, value] of this.#sessions) {
+            if (value.expiresAt <= now) {
+                this.#sessions.delete(key);
+            }
+        }
+    }
+}
+export function parseCookieHeader(header) {
+    if (header === undefined) {
+        return {};
+    }
+    const cookies = {};
+    for (const part of header.split(";")) {
+        const separator = part.indexOf("=");
+        if (separator <= 0) {
+            continue;
+        }
+        const name = part.slice(0, separator).trim();
+        const value = part.slice(separator + 1).trim();
+        if (name !== "") {
+            cookies[name] = value;
+        }
+    }
+    return cookies;
+}
+export function localConsoleSessionCookie(token, expiresAt) {
+    return [
+        `${LOCAL_CONSOLE_SESSION_COOKIE}=${token}`,
+        "Path=/",
+        "HttpOnly",
+        "SameSite=Strict",
+        `Expires=${new Date(expiresAt).toUTCString()}`,
+    ].join("; ");
+}
+//# sourceMappingURL=session.js.map

package/node_modules/@tutti/relay-client/dist/tunnel-types.d.ts

@@ -34,11 +34,13 @@ export type RelayHostTunnelRequestHandler = (request: RelayHostTunnelRequest) =>
 export type RelayHostTunnelStreamRequestHandler = (request: RelayHostTunnelRequest, sink: RelayHostTunnelStreamSink) => Promise<void> | void;
 export type RelayHostTunnelWebSocketLike = {
     on(event: "open", listener: () => void): void;
+    on(event: "ping", listener: () => void): void;
     on(event: "message", listener: (data: unknown) => void): void;
     on(event: "close", listener: (code?: number, reason?: unknown) => void): void;
     on(event: "error", listener: (error: unknown) => void): void;
     send(data: string, callback?: (error?: Error) => void): void;
     close(code?: number, reason?: string): void;
+    terminate(): void;
 };
 export type RelayHostTunnelConnector = (options: {
     url: string;
@@ -58,6 +60,7 @@ export type ConnectRelayHostTunnelOptions = {
     relayProjectRef: RelayProjectRef;
     hostConnectionRef: HostConnectionRef;
     hostConnectionToken: string;
+    heartbeatIntervalMs: number;
     handleRequest: RelayHostTunnelRequestHandler;
     handleStreamRequest?: RelayHostTunnelStreamRequestHandler;
     connect?: RelayHostTunnelConnector;

package/node_modules/@tutti/relay-client/dist/tunnel.js

@@ -2,6 +2,7 @@ import { createRequire } from "node:module";
 import { redactAndTruncateText } from "@tutti/shared/utils";
 import { chunkToBase64, internalErrorResponse, parseHostRequestFrame, parseHostStreamCancelFrame, sendFrame, sendResponse, } from "./tunnel-frames.js";
 const loadNativeModule = createRequire(import.meta.url);
+const HOST_LIVENESS_INTERVAL_MULTIPLIER = 4;
 function defaultConnector(options) {
     const wsModule = loadNativeModule("ws");
     const WebSocketCtor = typeof wsModule === "function" ? wsModule : (wsModule.WebSocket ?? wsModule.default);
@@ -18,15 +19,23 @@ function tunnelUrl(options) {
     return url.toString();
 }
 export function connectRelayHostTunnel(options) {
+    if (!Number.isFinite(options.heartbeatIntervalMs) || options.heartbeatIntervalMs <= 0) {
+        throw new TypeError("Relay heartbeat interval must be a positive finite number");
+    }
     const socket = (options.connect ?? defaultConnector)({
         url: tunnelUrl(options),
         headers: {
             authorization: `Bearer ${options.hostConnectionToken}`,
         },
     });
+    const livenessTimeoutMs = options.heartbeatIntervalMs * HOST_LIVENESS_INTERVAL_MULTIPLIER;
     let resolveConnected;
     let rejectConnected;
     let connectedSettled = false;
+    let opened = false;
+    let ending = false;
+    let socketClosed = false;
+    let livenessTimer;
     const connected = new Promise((resolve, reject) => {
         resolveConnected = () => {
             connectedSettled = true;
@@ -42,10 +51,38 @@ export function connectRelayHostTunnel(options) {
         resolveClosed = resolve;
     });
     const streamControllers = new Map();
+    const clearLivenessDeadline = () => {
+        if (livenessTimer !== undefined) {
+            clearTimeout(livenessTimer);
+            livenessTimer = undefined;
+        }
+    };
+    const terminateSocket = () => {
+        if (ending || socketClosed) {
+            return;
+        }
+        ending = true;
+        clearLivenessDeadline();
+        socket.terminate();
+    };
+    const refreshLivenessDeadline = () => {
+        if (!opened || ending || socketClosed) {
+            return;
+        }
+        clearLivenessDeadline();
+        livenessTimer = setTimeout(terminateSocket, livenessTimeoutMs);
+        livenessTimer.unref?.();
+    };
     socket.on("open", () => {
+        opened = true;
+        refreshLivenessDeadline();
         resolveConnected();
     });
+    socket.on("ping", () => {
+        refreshLivenessDeadline();
+    });
     socket.on("message", (data) => {
+        refreshLivenessDeadline();
         const cancelRequestId = parseHostStreamCancelFrame(data);
         if (cancelRequestId !== null) {
             streamControllers.get(cancelRequestId)?.abort();
@@ -122,9 +159,19 @@ export function connectRelayHostTunnel(options) {
     socket.on("error", (error) => {
         if (!connectedSettled) {
             rejectConnected(error instanceof Error ? error : new Error("Relay host tunnel failed"));
+            return;
+        }
+        if (opened) {
+            terminateSocket();
         }
     });
     socket.on("close", (code, reason) => {
+        if (socketClosed) {
+            return;
+        }
+        socketClosed = true;
+        ending = true;
+        clearLivenessDeadline();
         for (const controller of streamControllers.values()) {
             controller.abort();
         }
@@ -148,6 +195,11 @@ export function connectRelayHostTunnel(options) {
         connected,
         closed,
         close: (code = 1000, reason = "closed") => {
+            if (ending || socketClosed) {
+                return;
+            }
+            ending = true;
+            clearLivenessDeadline();
             socket.close(code, reason);
         },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfey/tutti",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/web/assets/beethoven-symphony-5-opening-ypVy5SB4.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="1180" viewBox="0 0 2048 1180" role="img" aria-labelledby="title description">
+  <title id="title">Beethoven — Symphony No. 5 / Opening — rhythmic modules</title>
+  <desc id="description">Phrase windows become a balanced, deterministically scattered set of blocks, circles, steps, dots and stripes.</desc>
+  <rect width="100%" height="100%" fill="#F8FAF9" />
+  <rect data-role="module-stripe" x="1137.35" y="691.93" width="183.59" height="21.35" rx="0.00" fill="#F0F2F1" opacity="0.822" />
+  <rect data-role="module-stripe" x="1137.35" y="728.65" width="183.59" height="21.35" rx="0.00" fill="#F0F2F1" opacity="0.822" />
+  <rect data-role="module-stripe" x="1137.35" y="765.37" width="183.59" height="21.35" rx="0.00" fill="#F0F2F1" opacity="0.822" />
+  <rect data-role="module-stripe" x="1137.35" y="802.09" width="183.59" height="21.35" rx="0.00" fill="#F0F2F1" opacity="0.822" />
+  <rect data-role="module-stripe" x="1137.35" y="838.81" width="183.59" height="21.35" rx="0.00" fill="#F0F2F1" opacity="0.822" />
+  <rect data-role="module-square" x="66.89" y="6.71" width="242.63" height="242.63" rx="0.00" fill="#E7EBE9" opacity="0.807" />
+  <ellipse data-role="module-dot" cx="1576.58" cy="708.56" rx="14.07" ry="14.07" fill="#E7EBE9" opacity="0.819" />
+  <ellipse data-role="module-dot" cx="1636.88" cy="708.56" rx="14.07" ry="14.07" fill="#E7EBE9" opacity="0.819" />
+  <ellipse data-role="module-dot" cx="1697.17" cy="708.56" rx="14.07" ry="14.07" fill="#E7EBE9" opacity="0.819" />
+  <ellipse data-role="module-dot" cx="1576.58" cy="768.86" rx="14.07" ry="14.07" fill="#E7EBE9" opacity="0.819" />
+  <ellipse data-role="module-dot" cx="1636.88" cy="768.86" rx="14.07" ry="14.07" fill="#E7EBE9" opacity="0.819" />
+  <ellipse data-role="module-dot" cx="1697.17" cy="768.86" rx="14.07" ry="14.07" fill="#E7EBE9" opacity="0.819" />
+  <ellipse data-role="module-dot" cx="1576.58" cy="829.16" rx="14.07" ry="14.07" fill="#E7EBE9" opacity="0.819" />
+  <ellipse data-role="module-dot" cx="1636.88" cy="829.16" rx="14.07" ry="14.07" fill="#E7EBE9" opacity="0.819" />
+  <ellipse data-role="module-dot" cx="1697.17" cy="829.16" rx="14.07" ry="14.07" fill="#E7EBE9" opacity="0.819" />
+  <ellipse data-role="module-circle" cx="1957.82" cy="533.45" rx="137.05" ry="137.05" fill="#DFE4E2" opacity="0.805" />
+  <polygon data-role="module-step" points="912.72,246.39 912.72,85.98 1036.91,85.98 1036.91,-12.34 1171.45,-12.34 1171.45,246.39" fill="#F0F2F1" opacity="0.807" />
+  <ellipse data-role="module-dot" cx="571.69" cy="32.03" rx="14.30" ry="14.30" fill="#F0F2F1" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="632.99" cy="32.03" rx="14.30" ry="14.30" fill="#F0F2F1" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="694.29" cy="32.03" rx="14.30" ry="14.30" fill="#F0F2F1" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="571.69" cy="93.34" rx="14.30" ry="14.30" fill="#F0F2F1" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="632.99" cy="93.34" rx="14.30" ry="14.30" fill="#F0F2F1" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="694.29" cy="93.34" rx="14.30" ry="14.30" fill="#F0F2F1" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="571.69" cy="154.64" rx="14.30" ry="14.30" fill="#F0F2F1" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="632.99" cy="154.64" rx="14.30" ry="14.30" fill="#F0F2F1" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="694.29" cy="154.64" rx="14.30" ry="14.30" fill="#F0F2F1" opacity="0.808" />
+  <rect data-role="module-square" x="1762.53" y="948.05" width="241.91" height="241.91" rx="0.00" fill="#EDF0EE" opacity="0.796" />
+  <rect data-role="module-square" x="811.20" y="520.41" width="241.45" height="241.45" rx="0.00" fill="#DFE4E2" opacity="0.796" />
+  <rect data-role="module-square" x="319.82" y="722.09" width="283.55" height="283.55" rx="0.00" fill="#DFE4E2" opacity="0.808" />
+  <polygon data-role="module-step" points="1832.59,134.41 1981.10,134.41 1981.10,249.39 2072.12,249.39 2072.12,373.94 1832.59,373.94" fill="#F0F2F1" opacity="0.805" />
+  <ellipse data-role="module-circle" cx="526.42" cy="417.47" rx="116.56" ry="116.56" fill="#E7EBE9" opacity="0.800" />
+  <polygon data-role="module-step" points="1410.90,1221.55 1259.09,1221.55 1259.09,1104.01 1166.04,1104.01 1166.04,976.69 1410.90,976.69" fill="#EDF0EE" opacity="0.803" />
+  <ellipse data-role="module-circle" cx="1404.78" cy="511.10" rx="120.93" ry="120.93" fill="#DFE4E2" opacity="0.803" />
+  <polygon data-role="module-step" points="213.74,991.79 213.74,1133.02 104.41,1133.02 104.41,1219.58 -14.04,1219.58 -14.04,991.79" fill="#E7EBE9" opacity="0.799" />
+  <ellipse data-role="module-dot" cx="1372.88" cy="71.41" rx="15.67" ry="15.67" fill="#EDF0EE" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="1440.03" cy="71.41" rx="15.67" ry="15.67" fill="#EDF0EE" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="1507.18" cy="71.41" rx="15.67" ry="15.67" fill="#EDF0EE" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="1372.88" cy="138.55" rx="15.67" ry="15.67" fill="#EDF0EE" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="1440.03" cy="138.55" rx="15.67" ry="15.67" fill="#EDF0EE" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="1507.18" cy="138.55" rx="15.67" ry="15.67" fill="#EDF0EE" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="1372.88" cy="205.70" rx="15.67" ry="15.67" fill="#EDF0EE" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="1440.03" cy="205.70" rx="15.67" ry="15.67" fill="#EDF0EE" opacity="0.808" />
+  <ellipse data-role="module-dot" cx="1507.18" cy="205.70" rx="15.67" ry="15.67" fill="#EDF0EE" opacity="0.808" />
+  <rect data-role="module-stripe" x="8.18" y="441.70" width="22.25" height="229.64" rx="0.00" fill="#DFE4E2" opacity="0.802" />
+  <rect data-role="module-stripe" x="46.45" y="441.70" width="22.25" height="229.64" rx="0.00" fill="#DFE4E2" opacity="0.802" />
+  <rect data-role="module-stripe" x="84.73" y="441.70" width="22.25" height="229.64" rx="0.00" fill="#DFE4E2" opacity="0.802" />
+  <rect data-role="module-stripe" x="123.00" y="441.70" width="22.25" height="229.64" rx="0.00" fill="#DFE4E2" opacity="0.802" />
+  <rect data-role="module-stripe" x="161.27" y="441.70" width="22.25" height="229.64" rx="0.00" fill="#DFE4E2" opacity="0.802" />
+  <rect data-role="module-stripe" x="199.54" y="441.70" width="22.25" height="229.64" rx="0.00" fill="#DFE4E2" opacity="0.802" />
+  <rect data-role="module-stripe" x="746.51" y="966.35" width="24.83" height="213.57" rx="0.00" fill="#F0F2F1" opacity="0.819" />
+  <rect data-role="module-stripe" x="789.23" y="966.35" width="24.83" height="213.57" rx="0.00" fill="#F0F2F1" opacity="0.819" />
+  <rect data-role="module-stripe" x="831.94" y="966.35" width="24.83" height="213.57" rx="0.00" fill="#F0F2F1" opacity="0.819" />
+  <rect data-role="module-stripe" x="874.65" y="966.35" width="24.83" height="213.57" rx="0.00" fill="#F0F2F1" opacity="0.819" />
+  <rect data-role="module-stripe" x="917.37" y="966.35" width="24.83" height="213.57" rx="0.00" fill="#F0F2F1" opacity="0.819" />
+  <polygon data-role="edge-arc" points="0.00,1180.00 -0.00,822.29 23.40,823.05 46.69,825.35 69.79,829.16 92.58,834.48 114.98,841.27 136.89,849.52 158.21,859.18 178.86,870.21 198.73,882.57 217.76,896.21 235.86,911.06 252.94,927.06 268.94,944.14 283.79,962.24 297.43,981.27 309.79,1001.14 320.82,1021.79 330.48,1043.11 338.73,1065.02 345.52,1087.42 350.84,1110.21 354.65,1133.31 356.95,1156.60 357.71,1180.00" fill="#EDF0EE" opacity="0.640" />
+  <polygon data-role="edge-arc" points="2048.00,0.00 2048.00,381.79 2023.03,380.98 1998.17,378.53 1973.52,374.46 1949.18,368.79 1925.28,361.53 1901.89,352.73 1879.14,342.42 1857.10,330.64 1835.89,317.45 1815.58,302.90 1796.27,287.05 1778.03,269.97 1760.95,251.73 1745.10,232.42 1730.55,212.11 1717.36,190.90 1705.58,168.86 1695.27,146.11 1686.47,122.72 1679.21,98.82 1673.54,74.48 1669.47,49.83 1667.02,24.97 1666.21,0.00" fill="#DFE4E2" opacity="0.600" />
+</svg>

package/web/assets/beethoven-symphony-7-allegretto-B3bc-cZD.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="1180" viewBox="0 0 2048 1180" role="img" aria-labelledby="title description">
+  <title id="title">Beethoven — Symphony No. 7 / Allegretto — rhythmic modules</title>
+  <desc id="description">Phrase windows become a balanced, deterministically scattered set of blocks, circles, steps, dots and stripes.</desc>
+  <rect width="100%" height="100%" fill="#F8FAF9" />
+  <ellipse data-role="module-dot" cx="4.75" cy="147.17" rx="13.01" ry="13.01" fill="#F0F2F1" opacity="0.774" />
+  <ellipse data-role="module-dot" cx="60.50" cy="147.17" rx="13.01" ry="13.01" fill="#F0F2F1" opacity="0.774" />
+  <ellipse data-role="module-dot" cx="116.25" cy="147.17" rx="13.01" ry="13.01" fill="#F0F2F1" opacity="0.774" />
+  <ellipse data-role="module-dot" cx="4.75" cy="202.91" rx="13.01" ry="13.01" fill="#F0F2F1" opacity="0.774" />
+  <ellipse data-role="module-dot" cx="60.50" cy="202.91" rx="13.01" ry="13.01" fill="#F0F2F1" opacity="0.774" />
+  <ellipse data-role="module-dot" cx="116.25" cy="202.91" rx="13.01" ry="13.01" fill="#F0F2F1" opacity="0.774" />
+  <ellipse data-role="module-dot" cx="4.75" cy="258.66" rx="13.01" ry="13.01" fill="#F0F2F1" opacity="0.774" />
+  <ellipse data-role="module-dot" cx="60.50" cy="258.66" rx="13.01" ry="13.01" fill="#F0F2F1" opacity="0.774" />
+  <ellipse data-role="module-dot" cx="116.25" cy="258.66" rx="13.01" ry="13.01" fill="#F0F2F1" opacity="0.774" />
+  <ellipse data-role="module-circle" cx="125.52" cy="712.10" rx="117.81" ry="117.81" fill="#E7EBE9" opacity="0.781" />
+  <ellipse data-role="module-dot" cx="1026.73" cy="531.40" rx="11.45" ry="11.45" fill="#E7EBE9" opacity="0.777" />
+  <ellipse data-role="module-dot" cx="1075.79" cy="531.40" rx="11.45" ry="11.45" fill="#E7EBE9" opacity="0.777" />
+  <ellipse data-role="module-dot" cx="1124.86" cy="531.40" rx="11.45" ry="11.45" fill="#E7EBE9" opacity="0.777" />
+  <ellipse data-role="module-dot" cx="1026.73" cy="580.47" rx="11.45" ry="11.45" fill="#E7EBE9" opacity="0.777" />
+  <ellipse data-role="module-dot" cx="1075.79" cy="580.47" rx="11.45" ry="11.45" fill="#E7EBE9" opacity="0.777" />
+  <ellipse data-role="module-dot" cx="1124.86" cy="580.47" rx="11.45" ry="11.45" fill="#E7EBE9" opacity="0.777" />
+  <ellipse data-role="module-dot" cx="1026.73" cy="629.54" rx="11.45" ry="11.45" fill="#E7EBE9" opacity="0.777" />
+  <ellipse data-role="module-dot" cx="1075.79" cy="629.54" rx="11.45" ry="11.45" fill="#E7EBE9" opacity="0.777" />
+  <ellipse data-role="module-dot" cx="1124.86" cy="629.54" rx="11.45" ry="11.45" fill="#E7EBE9" opacity="0.777" />
+  <ellipse data-role="module-circle" cx="565.46" cy="889.20" rx="95.25" ry="95.25" fill="#EDF0EE" opacity="0.785" />
+  <ellipse data-role="module-circle" cx="563.71" cy="302.72" rx="99.85" ry="99.85" fill="#DFE4E2" opacity="0.779" />
+  <rect data-role="module-stripe" x="895.25" y="910.83" width="25.17" height="216.47" rx="0.00" fill="#E7EBE9" opacity="0.795" />
+  <rect data-role="module-stripe" x="938.54" y="910.83" width="25.17" height="216.47" rx="0.00" fill="#E7EBE9" opacity="0.795" />
+  <rect data-role="module-stripe" x="981.83" y="910.83" width="25.17" height="216.47" rx="0.00" fill="#E7EBE9" opacity="0.795" />
+  <rect data-role="module-stripe" x="1025.13" y="910.83" width="25.17" height="216.47" rx="0.00" fill="#E7EBE9" opacity="0.795" />
+  <rect data-role="module-stripe" x="1068.42" y="910.83" width="25.17" height="216.47" rx="0.00" fill="#E7EBE9" opacity="0.795" />
+  <rect data-role="module-square" x="1367.27" y="637.80" width="203.02" height="203.02" rx="0.00" fill="#EDF0EE" opacity="0.786" />
+  <rect data-role="module-square" x="615.21" y="113.67" width="202.07" height="202.07" rx="0.00" fill="#EDF0EE" opacity="0.796" />
+  <rect data-role="module-square" x="1786.35" y="974.13" width="233.20" height="233.20" rx="0.00" fill="#DFE4E2" opacity="0.785" />
+  <rect data-role="module-stripe" x="470.19" y="7.84" width="24.41" height="209.88" rx="0.00" fill="#E7EBE9" opacity="0.794" />
+  <rect data-role="module-stripe" x="512.17" y="7.84" width="24.41" height="209.88" rx="0.00" fill="#E7EBE9" opacity="0.794" />
+  <rect data-role="module-stripe" x="554.15" y="7.84" width="24.41" height="209.88" rx="0.00" fill="#E7EBE9" opacity="0.794" />
+  <rect data-role="module-stripe" x="596.12" y="7.84" width="24.41" height="209.88" rx="0.00" fill="#E7EBE9" opacity="0.794" />
+  <rect data-role="module-stripe" x="638.10" y="7.84" width="24.41" height="209.88" rx="0.00" fill="#E7EBE9" opacity="0.794" />
+  <polygon data-role="module-step" points="1516.11,329.09 1350.08,329.09 1350.08,200.56 1248.33,200.56 1248.33,61.31 1516.11,61.31" fill="#E7EBE9" opacity="0.794" />
+  <rect data-role="module-stripe" x="1876.23" y="246.53" width="22.63" height="194.65" rx="0.00" fill="#EDF0EE" opacity="0.789" />
+  <rect data-role="module-stripe" x="1915.16" y="246.53" width="22.63" height="194.65" rx="0.00" fill="#EDF0EE" opacity="0.789" />
+  <rect data-role="module-stripe" x="1954.09" y="246.53" width="22.63" height="194.65" rx="0.00" fill="#EDF0EE" opacity="0.789" />
+  <rect data-role="module-stripe" x="1993.02" y="246.53" width="22.63" height="194.65" rx="0.00" fill="#EDF0EE" opacity="0.789" />
+  <rect data-role="module-stripe" x="2031.95" y="246.53" width="22.63" height="194.65" rx="0.00" fill="#EDF0EE" opacity="0.789" />
+  <polygon data-role="module-step" points="228.37,1057.21 79.79,1057.21 79.79,942.18 -11.27,942.18 -11.27,817.57 228.37,817.57" fill="#DFE4E2" opacity="0.792" />
+  <ellipse data-role="module-dot" cx="1356.55" cy="1063.59" rx="10.33" ry="10.33" fill="#F0F2F1" opacity="0.778" />
+  <ellipse data-role="module-dot" cx="1400.83" cy="1063.59" rx="10.33" ry="10.33" fill="#F0F2F1" opacity="0.778" />
+  <ellipse data-role="module-dot" cx="1445.11" cy="1063.59" rx="10.33" ry="10.33" fill="#F0F2F1" opacity="0.778" />
+  <ellipse data-role="module-dot" cx="1356.55" cy="1107.87" rx="10.33" ry="10.33" fill="#F0F2F1" opacity="0.778" />
+  <ellipse data-role="module-dot" cx="1400.83" cy="1107.87" rx="10.33" ry="10.33" fill="#F0F2F1" opacity="0.778" />
+  <ellipse data-role="module-dot" cx="1445.11" cy="1107.87" rx="10.33" ry="10.33" fill="#F0F2F1" opacity="0.778" />
+  <ellipse data-role="module-dot" cx="1356.55" cy="1152.15" rx="10.33" ry="10.33" fill="#F0F2F1" opacity="0.778" />
+  <ellipse data-role="module-dot" cx="1400.83" cy="1152.15" rx="10.33" ry="10.33" fill="#F0F2F1" opacity="0.778" />
+  <ellipse data-role="module-dot" cx="1445.11" cy="1152.15" rx="10.33" ry="10.33" fill="#F0F2F1" opacity="0.778" />
+  <polygon data-role="edge-arc" points="0.00,1180.00 -0.00,842.60 22.07,843.33 44.04,845.49 65.82,849.09 87.32,854.10 108.45,860.51 129.12,868.29 149.23,877.40 168.70,887.81 187.45,899.47 205.39,912.33 222.46,926.33 238.58,941.42 253.67,957.54 267.67,974.61 280.53,992.55 292.19,1011.30 302.60,1030.77 311.71,1050.88 319.49,1071.55 325.90,1092.68 330.91,1114.18 334.51,1135.96 336.67,1157.93 337.40,1180.00" fill="#EDF0EE" opacity="0.640" />
+  <polygon data-role="edge-arc" points="2048.00,0.00 2048.00,364.65 2024.15,363.87 2000.40,361.53 1976.86,357.64 1953.62,352.22 1930.79,345.29 1908.46,336.89 1886.72,327.04 1865.68,315.79 1845.41,303.19 1826.02,289.29 1807.57,274.16 1790.16,257.84 1773.84,240.43 1758.71,221.98 1744.81,202.59 1732.21,182.32 1720.96,161.28 1711.11,139.54 1702.71,117.21 1695.78,94.38 1690.36,71.14 1686.47,47.60 1684.13,23.85 1683.35,0.00" fill="#DFE4E2" opacity="0.600" />
+</svg>

package/web/assets/dvorak-symphony-9-largo-BEgNL3HB.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="1180" viewBox="0 0 2048 1180" role="img" aria-labelledby="title description">
+  <title id="title">Dvořák — Symphony No. 9 / Largo — rhythmic modules</title>
+  <desc id="description">Phrase windows become a balanced, deterministically scattered set of blocks, circles, steps, dots and stripes.</desc>
+  <rect width="100%" height="100%" fill="#F8FAF9" />
+  <rect data-role="module-square" x="734.34" y="394.20" width="189.39" height="189.39" rx="0.00" fill="#F0F2F1" opacity="0.778" />
+  <rect data-role="module-stripe" x="1261.21" y="715.22" width="25.65" height="220.59" rx="0.00" fill="#F0F2F1" opacity="0.772" />
+  <rect data-role="module-stripe" x="1305.33" y="715.22" width="25.65" height="220.59" rx="0.00" fill="#F0F2F1" opacity="0.772" />
+  <rect data-role="module-stripe" x="1349.45" y="715.22" width="25.65" height="220.59" rx="0.00" fill="#F0F2F1" opacity="0.772" />
+  <rect data-role="module-stripe" x="1393.57" y="715.22" width="25.65" height="220.59" rx="0.00" fill="#F0F2F1" opacity="0.772" />
+  <rect data-role="module-stripe" x="1437.69" y="715.22" width="25.65" height="220.59" rx="0.00" fill="#F0F2F1" opacity="0.772" />
+  <ellipse data-role="module-circle" cx="92.51" cy="86.94" rx="128.49" ry="128.49" fill="#E7EBE9" opacity="0.767" />
+  <rect data-role="module-stripe" x="-36.14" y="795.14" width="25.70" height="221.05" rx="0.00" fill="#DFE4E2" opacity="0.781" />
+  <rect data-role="module-stripe" x="8.07" y="795.14" width="25.70" height="221.05" rx="0.00" fill="#DFE4E2" opacity="0.781" />
+  <rect data-role="module-stripe" x="52.28" y="795.14" width="25.70" height="221.05" rx="0.00" fill="#DFE4E2" opacity="0.781" />
+  <rect data-role="module-stripe" x="96.49" y="795.14" width="25.70" height="221.05" rx="0.00" fill="#DFE4E2" opacity="0.781" />
+  <rect data-role="module-stripe" x="140.70" y="795.14" width="25.70" height="221.05" rx="0.00" fill="#DFE4E2" opacity="0.781" />
+  <ellipse data-role="module-circle" cx="822.53" cy="920.14" rx="135.89" ry="135.89" fill="#F0F2F1" opacity="0.764" />
+  <polygon data-role="module-step" points="1383.27,386.80 1245.28,386.80 1245.28,279.98 1160.71,279.98 1160.71,164.25 1383.27,164.25" fill="#E7EBE9" opacity="0.777" />
+  <polygon data-role="module-step" points="1654.02,703.73 1654.02,569.62 1757.85,569.62 1757.85,487.43 1870.32,487.43 1870.32,703.73" fill="#E7EBE9" opacity="0.773" />
+  <ellipse data-role="module-dot" cx="592.14" cy="96.66" rx="14.16" ry="14.16" fill="#DFE4E2" opacity="0.764" />
+  <ellipse data-role="module-dot" cx="652.84" cy="96.66" rx="14.16" ry="14.16" fill="#DFE4E2" opacity="0.764" />
+  <ellipse data-role="module-dot" cx="713.54" cy="96.66" rx="14.16" ry="14.16" fill="#DFE4E2" opacity="0.764" />
+  <ellipse data-role="module-dot" cx="592.14" cy="157.35" rx="14.16" ry="14.16" fill="#DFE4E2" opacity="0.764" />
+  <ellipse data-role="module-dot" cx="652.84" cy="157.35" rx="14.16" ry="14.16" fill="#DFE4E2" opacity="0.764" />
+  <ellipse data-role="module-dot" cx="713.54" cy="157.35" rx="14.16" ry="14.16" fill="#DFE4E2" opacity="0.764" />
+  <ellipse data-role="module-dot" cx="592.14" cy="218.05" rx="14.16" ry="14.16" fill="#DFE4E2" opacity="0.764" />
+  <ellipse data-role="module-dot" cx="652.84" cy="218.05" rx="14.16" ry="14.16" fill="#DFE4E2" opacity="0.764" />
+  <ellipse data-role="module-dot" cx="713.54" cy="218.05" rx="14.16" ry="14.16" fill="#DFE4E2" opacity="0.764" />
+  <ellipse data-role="module-dot" cx="344.67" cy="651.92" rx="12.72" ry="12.72" fill="#F0F2F1" opacity="0.766" />
+  <ellipse data-role="module-dot" cx="399.20" cy="651.92" rx="12.72" ry="12.72" fill="#F0F2F1" opacity="0.766" />
+  <ellipse data-role="module-dot" cx="453.73" cy="651.92" rx="12.72" ry="12.72" fill="#F0F2F1" opacity="0.766" />
+  <ellipse data-role="module-dot" cx="344.67" cy="706.45" rx="12.72" ry="12.72" fill="#F0F2F1" opacity="0.766" />
+  <ellipse data-role="module-dot" cx="399.20" cy="706.45" rx="12.72" ry="12.72" fill="#F0F2F1" opacity="0.766" />
+  <ellipse data-role="module-dot" cx="453.73" cy="706.45" rx="12.72" ry="12.72" fill="#F0F2F1" opacity="0.766" />
+  <ellipse data-role="module-dot" cx="344.67" cy="760.98" rx="12.72" ry="12.72" fill="#F0F2F1" opacity="0.766" />
+  <ellipse data-role="module-dot" cx="399.20" cy="760.98" rx="12.72" ry="12.72" fill="#F0F2F1" opacity="0.766" />
+  <ellipse data-role="module-dot" cx="453.73" cy="760.98" rx="12.72" ry="12.72" fill="#F0F2F1" opacity="0.766" />
+  <ellipse data-role="module-circle" cx="1912.72" cy="156.82" rx="129.15" ry="129.15" fill="#DFE4E2" opacity="0.756" />
+  <polygon data-role="module-step" points="1747.33,961.00 1901.62,961.00 1901.62,1080.46 1996.18,1080.46 1996.18,1209.86 1747.33,1209.86" fill="#EDF0EE" opacity="0.789" />
+  <rect data-role="module-square" x="974.40" y="46.09" width="232.26" height="232.26" rx="0.00" fill="#EDF0EE" opacity="0.791" />
+  <rect data-role="module-square" x="299.88" y="414.22" width="217.38" height="217.38" rx="0.00" fill="#F0F2F1" opacity="0.788" />
+  <rect data-role="module-stripe" x="1729.70" y="315.79" width="25.15" height="216.28" rx="0.00" fill="#E7EBE9" opacity="0.789" />
+  <rect data-role="module-stripe" x="1772.96" y="315.79" width="25.15" height="216.28" rx="0.00" fill="#E7EBE9" opacity="0.789" />
+  <rect data-role="module-stripe" x="1816.21" y="315.79" width="25.15" height="216.28" rx="0.00" fill="#E7EBE9" opacity="0.789" />
+  <rect data-role="module-stripe" x="1859.47" y="315.79" width="25.15" height="216.28" rx="0.00" fill="#E7EBE9" opacity="0.789" />
+  <rect data-role="module-stripe" x="1902.72" y="315.79" width="25.15" height="216.28" rx="0.00" fill="#E7EBE9" opacity="0.789" />
+  <polygon data-role="edge-arc" points="2048.00,1180.00 1708.91,1180.00 1709.64,1157.82 1711.81,1135.74 1715.43,1113.85 1720.47,1092.24 1726.91,1071.00 1734.72,1050.24 1743.88,1030.03 1754.34,1010.46 1766.06,991.61 1778.98,973.58 1793.06,956.42 1808.23,940.23 1824.42,925.06 1841.58,910.98 1859.61,898.06 1878.46,886.34 1898.03,875.88 1918.24,866.72 1939.00,858.91 1960.24,852.47 1981.85,847.43 2003.74,843.81 2025.82,841.64 2048.00,840.91" fill="#EDF0EE" opacity="0.640" />
+  <polygon data-role="edge-arc" points="0.00,0.00 369.26,0.00 368.47,24.15 366.11,48.20 362.17,72.04 356.68,95.57 349.67,118.70 341.16,141.31 331.18,163.32 319.79,184.63 307.03,205.15 292.96,224.79 277.63,243.47 261.11,261.11 243.47,277.63 224.79,292.96 205.15,307.03 184.63,319.79 163.32,331.18 141.31,341.16 118.70,349.67 95.57,356.68 72.04,362.17 48.20,366.11 24.15,368.47 0.00,369.26" fill="#DFE4E2" opacity="0.600" />
+</svg>