@graffiti-garden/implementation-decentralized 0.0.2 → 0.0.4

package/src/3-protocol/4-graffiti.ts

@@ -29,10 +29,12 @@ import { Authorization } from "../1-services/1-authorization";
 import { StorageBuckets } from "../1-services/3-storage-buckets";
 import {
   Inboxes,
+  LABELED_MESSAGE_LABEL_KEY,
   LABELED_MESSAGE_MESSAGE_KEY,
   MESSAGE_METADATA_KEY,
   MESSAGE_OBJECT_KEY,
   MESSAGE_TAGS_KEY,
+  type LabeledMessage,
   type MessageStream,
 } from "../1-services/4-inboxes";
 
@@ -130,6 +132,8 @@ export interface GraffitiDecentralizedOptions {
   defaultInboxEndpoints?: string[];
 }
 
+const CONCURRENCY = 16;
+
 export class GraffitiDecentralized implements Graffiti {
   protected readonly dids = new DecentralizedIdentifiers();
   protected readonly authorization = new Authorization();
@@ -239,11 +243,7 @@ export class GraffitiDecentralized implements Graffiti {
         ) as HTMLInputElement | null;
         input?.setAttribute("value", proposedHandle);
         input?.addEventListener("focus", () => input?.select());
-        new Promise<void>((r) => {
-          setTimeout(() => r(), 0);
-        }).then(() => {
-          input?.focus();
-        });
+        setTimeout(() => input?.focus(), 0);
 
         template
           ?.querySelector("#graffiti-login-handle-form")
@@ -293,13 +293,16 @@ export class GraffitiDecentralized implements Graffiti {
             e.preventDefault();
             this.login_("");
           });
-        new Promise<void>((r) => {
-          setTimeout(() => r(), 0);
-        }).then(() => {
-          (
-            template?.querySelector("#graffiti-login-new") as HTMLAnchorElement
-          )?.focus();
-        });
+
+        setTimeout(
+          () =>
+            (
+              template?.querySelector(
+                "#graffiti-login-new",
+              ) as HTMLAnchorElement
+            )?.focus(),
+          0,
+        );
       }
 
       const createUrl = new URL(this.identityCreatorEndpoint);
@@ -785,8 +788,6 @@ export class GraffitiDecentralized implements Graffiti {
         channels,
         cursors,
       } satisfies infer_<typeof CursorSchema>),
-      continue: (session) =>
-        this.discoverMeta<Schema>(channels, schema, cursors, session),
     };
   }
 
@@ -795,6 +796,7 @@ export class GraffitiDecentralized implements Graffiti {
     return this.discoverMeta<(typeof args)[1]>(channels, schema, {}, session);
   };
 
+  // @ts-ignore
   continueDiscover: Graffiti["continueDiscover"] = (...args) => {
     const [cursor, session] = args;
     // Extract the channels from the cursor
@@ -1009,189 +1011,277 @@ export class GraffitiDecentralized implements Graffiti {
             inboxToken,
           ) as unknown as MessageStream<Schema>);
 
+    const inFlight: Promise<SingleEndpointQueryResult<Schema> | void>[] = [];
+    let doneValue: string | null = null;
+
     while (true) {
-      const itResult = await iterator.next();
-      // Return the cursor if done
-      if (itResult.done) return itResult.value;
+      while (doneValue === null && inFlight.length < CONCURRENCY) {
+        const itResult = await iterator.next();
+        if (itResult.done) {
+          doneValue = itResult.value;
+          break;
+        }
+
+        const processPromise = this.processOneLabeledMessage<Schema>(
+          inboxEndpoint,
+          itResult.value,
+          inboxToken,
+          recipient,
+        ).catch((e) => {
+          throw e;
+        });
 
-      const result = itResult.value;
+        inFlight.push(processPromise);
+      }
 
-      const label = result.l;
-      if (label !== MESSAGE_LABEL_VALID && label !== MESSAGE_LABEL_UNLABELED)
-        continue;
+      const nextProcessedPromise = inFlight.shift();
 
-      const messageId = result.id;
-      const { o: object, m: metadataBytes, t: receivedTags } = result.m;
+      if (!nextProcessedPromise) {
+        if (doneValue !== null) return doneValue;
 
-      let metadata: MessageMetadata;
-      try {
-        const metadataRaw = dagCborDecode(metadataBytes);
-        metadata = MessageMetadataSchema.parse(metadataRaw);
-      } catch (e) {
+        throw new Error("Process queue empty but no return value");
+      }
+
+      const processed = await nextProcessedPromise;
+      if (processed) yield processed;
+    }
+  }
+
+  protected async processOneLabeledMessage<Schema extends JSONSchema>(
+    inboxEndpoint: string,
+    result: LabeledMessage<Schema>,
+    inboxToken?: string | null,
+    recipient?: string | null,
+  ): Promise<SingleEndpointQueryResult<Schema> | void> {
+    const label = result.l;
+    // Anything invalid or unexpected, we can skip
+    if (
+      label !== MESSAGE_LABEL_VALID &&
+      label !== MESSAGE_LABEL_UNLABELED &&
+      label !== MESSAGE_LABEL_TRASH
+    )
+      return;
+
+    const messageId = result.id;
+    const { o: object, m: metadataBytes, t: receivedTags } = result.m;
+
+    let metadata: MessageMetadata;
+    try {
+      const metadataRaw = dagCborDecode(metadataBytes);
+      metadata = MessageMetadataSchema.parse(metadataRaw);
+    } catch (e) {
+      this.inboxes.label(
+        inboxEndpoint,
+        messageId,
+        MESSAGE_LABEL_INVALID,
+        inboxToken,
+      );
+      return;
+    }
+
+    const {
+      [MESSAGE_DATA_STORAGE_BUCKET_KEY]: storageBucketKey,
+      [MESSAGE_DATA_TOMBSTONED_MESSAGE_ID_KEY]: tombstonedMessageId,
+    } = metadata;
+
+    const allowedTickets =
+      MESSAGE_DATA_ALLOWED_TICKETS_KEY in metadata
+        ? metadata[MESSAGE_DATA_ALLOWED_TICKETS_KEY]
+        : undefined;
+    const announcements =
+      MESSAGE_DATA_ANNOUNCEMENTS_KEY in metadata
+        ? metadata[MESSAGE_DATA_ANNOUNCEMENTS_KEY]
+        : undefined;
+
+    if (label === MESSAGE_LABEL_VALID) {
+      return {
+        messageId,
+        object,
+        storageBucketKey,
+        allowedTickets,
+        tags: receivedTags,
+        announcements,
+      };
+    } else if (label === MESSAGE_LABEL_TRASH) {
+      // If it is simply trash, just continue.
+      if (!tombstonedMessageId) return;
+
+      // Make sure the tombstone points to a real message
+      const past = await this.inboxes.get(
+        inboxEndpoint,
+        tombstonedMessageId,
+        inboxToken,
+      );
+      if (
+        !past ||
+        past[LABELED_MESSAGE_MESSAGE_KEY][MESSAGE_OBJECT_KEY].url !== object.url
+      )
+        return;
+
+      // If the referred to message isn't labeled as trash, trash it
+      // This may happen if a trash message is processed on another
+      // device and the device cache is out of date.
+      if (past[LABELED_MESSAGE_LABEL_KEY] !== MESSAGE_LABEL_TRASH) {
+        // Label the message as trash
         this.inboxes.label(
           inboxEndpoint,
-          messageId,
-          MESSAGE_LABEL_INVALID,
+          tombstonedMessageId,
+          MESSAGE_LABEL_TRASH,
           inboxToken,
         );
-        continue;
       }
 
-      const {
-        [MESSAGE_DATA_STORAGE_BUCKET_KEY]: storageBucketKey,
-        [MESSAGE_DATA_TOMBSTONED_MESSAGE_ID_KEY]: tombstonedMessageId,
-      } = metadata;
-
-      const allowedTickets =
-        MESSAGE_DATA_ALLOWED_TICKETS_KEY in metadata
-          ? metadata[MESSAGE_DATA_ALLOWED_TICKETS_KEY]
-          : undefined;
-      const announcements =
-        MESSAGE_DATA_ANNOUNCEMENTS_KEY in metadata
-          ? metadata[MESSAGE_DATA_ANNOUNCEMENTS_KEY]
-          : undefined;
-
-      if (label === MESSAGE_LABEL_VALID) {
-        yield {
-          messageId,
-          object,
-          storageBucketKey,
-          allowedTickets,
-          tags: receivedTags,
-          announcements,
-        };
-        continue;
-      }
+      // Return the tombstone
+      return {
+        messageId,
+        tombstone: true,
+        object,
+        storageBucketKey,
+        allowedTickets,
+        tags: receivedTags,
+        announcements,
+      };
+    }
 
-      // Try to validate the object
-      let validationError: unknown | undefined = undefined;
-      try {
-        const actor = object.actor;
-        const actorDocument = await this.dids.resolve(actor);
-        const storageBucketService = actorDocument?.service?.find(
-          (service) =>
-            service.id === DID_SERVICE_ID_GRAFFITI_STORAGE_BUCKET &&
-            service.type === DID_SERVICE_TYPE_GRAFFITI_STORAGE_BUCKET,
+    // Otherwise, unlabeled: try to validate the object
+    let validationError: unknown | undefined = undefined;
+    try {
+      const actor = object.actor;
+      const actorDocument = await this.dids.resolve(actor);
+      const storageBucketService = actorDocument?.service?.find(
+        (service) =>
+          service.id === DID_SERVICE_ID_GRAFFITI_STORAGE_BUCKET &&
+          service.type === DID_SERVICE_TYPE_GRAFFITI_STORAGE_BUCKET,
+      );
+      if (!storageBucketService) {
+        throw new GraffitiErrorNotFound(
+          `Actor ${actor} has no storage bucket service`,
         );
-        if (!storageBucketService) {
-          throw new GraffitiErrorNotFound(
-            `Actor ${actor} has no storage bucket service`,
-          );
-        }
-        if (typeof storageBucketService.serviceEndpoint !== "string") {
-          throw new GraffitiErrorNotFound(
-            `Actor ${actor} does not have a valid storage bucket endpoint`,
-          );
-        }
-        const storageBucketEndpoint = storageBucketService.serviceEndpoint;
-
-        const objectBytes = await this.storageBuckets.get(
-          storageBucketEndpoint,
-          storageBucketKey,
-          MAX_OBJECT_SIZE_BYTES,
+      }
+      if (typeof storageBucketService.serviceEndpoint !== "string") {
+        throw new GraffitiErrorNotFound(
+          `Actor ${actor} does not have a valid storage bucket endpoint`,
         );
+      }
+      const storageBucketEndpoint = storageBucketService.serviceEndpoint;
 
-        if (MESSAGE_DATA_ALLOWED_TICKET_KEY in metadata && !recipient) {
-          throw new GraffitiErrorForbidden(
-            `Recipient is required when allowed ticket is present`,
-          );
-        }
-        const privateObjectInfo = allowedTickets
-          ? { allowedTickets }
-          : MESSAGE_DATA_ALLOWED_TICKET_KEY in metadata
-            ? {
-                recipient: recipient ?? "null",
-                allowedTicket: metadata[MESSAGE_DATA_ALLOWED_TICKET_KEY],
-                allowedIndex: metadata[MESSAGE_DATA_ALLOWED_TICKET_INDEX_KEY],
-              }
-            : undefined;
+      const objectBytes = await this.storageBuckets.get(
+        storageBucketEndpoint,
+        storageBucketKey,
+        MAX_OBJECT_SIZE_BYTES,
+      );
 
-        await this.objectEncoding.validate(
-          object,
-          receivedTags,
-          objectBytes,
-          privateObjectInfo,
+      if (MESSAGE_DATA_ALLOWED_TICKET_KEY in metadata && !recipient) {
+        throw new GraffitiErrorForbidden(
+          `Recipient is required when allowed ticket is present`,
         );
-      } catch (e) {
-        validationError = e;
       }
+      const privateObjectInfo = allowedTickets
+        ? { allowedTickets }
+        : MESSAGE_DATA_ALLOWED_TICKET_KEY in metadata
+          ? {
+              recipient: recipient ?? "null",
+              allowedTicket: metadata[MESSAGE_DATA_ALLOWED_TICKET_KEY],
+              allowedIndex: metadata[MESSAGE_DATA_ALLOWED_TICKET_INDEX_KEY],
+            }
+          : undefined;
 
-      if (tombstonedMessageId) {
-        if (validationError instanceof GraffitiErrorNotFound) {
-          // Not found == The tombstone is correct
-          this.inboxes
-            // Get the referenced message
-            .get(inboxEndpoint, tombstonedMessageId, inboxToken)
-            .then((result) => {
-              // Make sure that it actually references the object being deleted
-              if (
-                result &&
-                result[LABELED_MESSAGE_MESSAGE_KEY][MESSAGE_OBJECT_KEY].url ===
-                  object.url
-              ) {
-                // If it does, label the message as trash, it is no longer needed
-                this.inboxes.label(
-                  inboxEndpoint,
-                  tombstonedMessageId,
-                  MESSAGE_LABEL_TRASH,
-                  inboxToken,
-                );
-              }
+      await this.objectEncoding.validate(
+        object,
+        receivedTags,
+        objectBytes,
+        privateObjectInfo,
+      );
+    } catch (e) {
+      validationError = e;
+    }
 
-              // Then, label the tombstone message as trash
+    if (tombstonedMessageId) {
+      if (validationError instanceof GraffitiErrorNotFound) {
+        // Not found == The tombstone is correct
+        this.inboxes
+          // Get the referenced message
+          .get(inboxEndpoint, tombstonedMessageId, inboxToken)
+          .then((result) => {
+            if (
+              // Make sure that it actually references the object being deleted
+              result &&
+              result[LABELED_MESSAGE_MESSAGE_KEY][MESSAGE_OBJECT_KEY].url ===
+                object.url &&
+              // And that the object is not already marked as trash
+              result[LABELED_MESSAGE_LABEL_KEY] !== MESSAGE_LABEL_TRASH
+            ) {
+              // If valid but not yet trash, label the message as trash
               this.inboxes.label(
                 inboxEndpoint,
-                messageId,
+                tombstonedMessageId,
                 MESSAGE_LABEL_TRASH,
                 inboxToken,
               );
-            });
+            }
 
-          yield {
-            messageId,
-            tombstone: true,
-            object,
-            storageBucketKey,
-            allowedTickets,
-            tags: receivedTags,
-            announcements,
-          };
-        } else {
-          console.error("Recieved an incorrect object");
-          console.error(validationError);
-          this.inboxes.label(
-            inboxEndpoint,
-            messageId,
-            MESSAGE_LABEL_INVALID,
-            inboxToken,
-          );
-        }
+            // Then, label the tombstone message as trash
+            this.inboxes.label(
+              inboxEndpoint,
+              messageId,
+              MESSAGE_LABEL_TRASH,
+              inboxToken,
+            );
+          });
+
+        return {
+          messageId,
+          tombstone: true,
+          object,
+          storageBucketKey,
+          allowedTickets,
+          tags: receivedTags,
+          announcements,
+        };
       } else {
-        if (validationError === undefined) {
-          this.inboxes.label(
-            inboxEndpoint,
-            messageId,
-            MESSAGE_LABEL_VALID,
-            inboxToken,
-          );
-          yield {
-            messageId,
-            object,
-            storageBucketKey,
-            tags: receivedTags,
-            allowedTickets,
-            announcements,
-          };
-        } else {
-          console.error("Recieved an incorrect object");
-          console.error(validationError);
-          this.inboxes.label(
-            inboxEndpoint,
-            messageId,
-            MESSAGE_LABEL_INVALID,
-            inboxToken,
-          );
-        }
+        console.error("Recieved an incorrect tombstone object");
+        console.error(validationError);
+        this.inboxes.label(
+          inboxEndpoint,
+          messageId,
+          MESSAGE_LABEL_INVALID,
+          inboxToken,
+        );
+      }
+    } else {
+      if (validationError === undefined) {
+        this.inboxes.label(
+          inboxEndpoint,
+          messageId,
+          MESSAGE_LABEL_VALID,
+          inboxToken,
+        );
+        return {
+          messageId,
+          object,
+          storageBucketKey,
+          tags: receivedTags,
+          allowedTickets,
+          announcements,
+        };
+      } else if (validationError instanceof GraffitiErrorNotFound) {
+        // Item was deleted before we got a chance to
+        // validate it. Just label the message as trash.
+        this.inboxes.label(
+          inboxEndpoint,
+          messageId,
+          MESSAGE_LABEL_TRASH,
+          inboxToken,
+        );
+      } else {
+        console.error("Recieved an incorrect object");
+        console.error(validationError);
+        this.inboxes.label(
+          inboxEndpoint,
+          messageId,
+          MESSAGE_LABEL_INVALID,
+          inboxToken,
+        );
       }
     }
   }

package/src/3-protocol/login-dialog.html.ts

@@ -1,11 +1,11 @@
 export const template = `<template id="graffiti-login-welcome">
   <h1>
-    <a target="_blank" href="https://graffiti.garden">Graffiti<wbr> Log In</a>
+    <a target="_blank" href="https://graffiti.garden">Graffiti Log&nbsp;In</a>
   </h1>
 
   <ul>
-    <li><a type="button" id="graffiti-login-new">Create new Graffiti identity</a></li>
-    <li><button class="secondary" id="graffiti-login-existing">Use existing Graffiti identity</button></li>
+    <li><a type="button" id="graffiti-login-new">Create&nbsp;new Graffiti&nbsp;identity</a></li>
+    <li><button class="secondary" id="graffiti-login-existing">Use&nbsp;existing Graffiti&nbsp;identity</button></li>
   </ul>
 
   <aside>
@@ -15,12 +15,12 @@ export const template = `<template id="graffiti-login-welcome">
 </template>
 
 <template id="graffiti-login-handle">
-  <h1>
-    <a target="_blank" href="https://graffiti.garden">Graffiti<wbr> Log In</a>
-  </h1>
+<h1>
+  <a target="_blank" href="https://graffiti.garden">Graffiti Log&nbsp;In</a>
+</h1>
 
   <form id="graffiti-login-handle-form">
-    <label for="username">Enter your Graffiti handle:</label>
+    <label for="username">Graffiti handle:</label>
     <input
       type="text"
       name="username"
@@ -29,7 +29,7 @@ export const template = `<template id="graffiti-login-welcome">
       autocapitalize="none"
       spellcheck="false"
       inputmode="url"
-      placeholder="example.graffiti.actor"
+      placeholder="you.graffiti.actor"
       required
     >
     <button id="graffiti-login-handle-submit" type="submit">
@@ -38,6 +38,6 @@ export const template = `<template id="graffiti-login-welcome">
   </form>
 
   <p>
-    Don't have a Graffiti handle? <a id="graffiti-login-new">Create one</a>.
+    Don't&nbsp;have&nbsp;a Graffiti&nbsp;handle? <a id="graffiti-login-new">Create&nbsp;one</a>.
   </p>
 </template>`;

package/dist/browser/login-dialog.html-XUWYDNNI.js

@@ -1,44 +0,0 @@
-import"./chunk-RFBBAUMM.js";var t=`<template id="graffiti-login-welcome">
-  <h1>
-    <a target="_blank" href="https://graffiti.garden">Graffiti<wbr> Log In</a>
-  </h1>
-
-  <ul>
-    <li><a type="button" id="graffiti-login-new">Create new Graffiti identity</a></li>
-    <li><button class="secondary" id="graffiti-login-existing">Use existing Graffiti identity</button></li>
-  </ul>
-
-  <aside>
-    This application is built with
-    <a target="_blank" href="https://graffiti.garden">Graffiti</a>.
-  </aside>
-</template>
-
-<template id="graffiti-login-handle">
-  <h1>
-    <a target="_blank" href="https://graffiti.garden">Graffiti<wbr> Log In</a>
-  </h1>
-
-  <form id="graffiti-login-handle-form">
-    <label for="username">Enter your Graffiti handle:</label>
-    <input
-      type="text"
-      name="username"
-      id="username"
-      autocomplete="username"
-      autocapitalize="none"
-      spellcheck="false"
-      inputmode="url"
-      placeholder="example.graffiti.actor"
-      required
-    >
-    <button id="graffiti-login-handle-submit" type="submit">
-      Log In
-    </button>
-  </form>
-
-  <p>
-    Don't have a Graffiti handle? <a id="graffiti-login-new">Create one</a>.
-  </p>
-</template>`;export{t as template};
-//# sourceMappingURL=login-dialog.html-XUWYDNNI.js.map

package/dist/browser/login-dialog.html-XUWYDNNI.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/3-protocol/login-dialog.html.ts"],
-  "sourcesContent": ["export const template = `<template id=\"graffiti-login-welcome\">\n  <h1>\n    <a target=\"_blank\" href=\"https://graffiti.garden\">Graffiti<wbr> Log In</a>\n  </h1>\n\n  <ul>\n    <li><a type=\"button\" id=\"graffiti-login-new\">Create new Graffiti identity</a></li>\n    <li><button class=\"secondary\" id=\"graffiti-login-existing\">Use existing Graffiti identity</button></li>\n  </ul>\n\n  <aside>\n    This application is built with\n    <a target=\"_blank\" href=\"https://graffiti.garden\">Graffiti</a>.\n  </aside>\n</template>\n\n<template id=\"graffiti-login-handle\">\n  <h1>\n    <a target=\"_blank\" href=\"https://graffiti.garden\">Graffiti<wbr> Log In</a>\n  </h1>\n\n  <form id=\"graffiti-login-handle-form\">\n    <label for=\"username\">Enter your Graffiti handle:</label>\n    <input\n      type=\"text\"\n      name=\"username\"\n      id=\"username\"\n      autocomplete=\"username\"\n      autocapitalize=\"none\"\n      spellcheck=\"false\"\n      inputmode=\"url\"\n      placeholder=\"example.graffiti.actor\"\n      required\n    >\n    <button id=\"graffiti-login-handle-submit\" type=\"submit\">\n      Log In\n    </button>\n  </form>\n\n  <p>\n    Don't have a Graffiti handle? <a id=\"graffiti-login-new\">Create one</a>.\n  </p>\n</template>`;\n"],
-  "mappings": "4BAAO,IAAMA,EAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": ["template"]
-}

package/dist/browser/style-YUTCEBZV-RWYJV575.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../node_modules/@graffiti-garden/modal/src/style.css"],
-  "sourcesContent": [".graffiti-modal {\n    --back: rgb(26, 26, 26, 0.85);\n    --halfback: rgba(80, 80, 80, 0.85);\n    --halfback2: rgba(26, 26, 26, 0.85);\n    --hover: rgba(202, 122, 204, 0.3);\n    --frontfaded: rgba(190, 190, 190);\n    --front: rgba(240, 240, 240);\n    --emph: rgb(202, 122, 204);\n    --blurpix: 3px;\n    border-color: var(--emph);\n    box-sizing: border-box;\n    border-width: 2px;\n    padding: 0;\n    margin: 0;\n    border-radius: 1rem;\n    box-shadow: 0 0 2rem black;\n    overflow: hidden;\n    opacity: 0;\n    transition: opacity 0.3s;\n    pointer-events: none;\n    display: block;\n    min-width: 95dvw;\n    min-height: 95dvh;\n    height: 95dvh;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    font-family:\n        Inter,\n        -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        Roboto,\n        Oxygen,\n        Ubuntu,\n        Cantarell,\n        \"Fira Sans\",\n        \"Droid Sans\",\n        \"Helvetica Neue\",\n        sans-serif;\n    color: var(--front);\n    font-size: 150%;\n\n    * {\n        box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\n\n    ::selection {\n        background: rgba(202, 122, 204, 0.3);\n    }\n\n    :focus {\n        outline: 2px solid var(--front);\n    }\n\n    header {\n        width: 100%;\n        display: flex;\n        justify-content: flex-end;\n    }\n\n    main {\n        flex: 1;\n        max-width: 600px;\n        width: 100%;\n        gap: 2em;\n        padding-top: 4dvh;\n        padding-bottom: 4dvh;\n        margin-top: 4dvh;\n        margin-bottom: 4dvh;\n        margin-left: 4dvw;\n        margin-right: 4dvw;\n        padding-left: 4dvw;\n        padding-right: 4dvw;\n        background: var(--back);\n        border-radius: 1rem;\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n        scrollbar-color: var(--emph) rgba(0, 0, 0, 0);\n    }\n\n    ul {\n        list-style-type: none;\n        display: flex;\n        flex-direction: column;\n        gap: 0.5em;\n        align-items: stretch;\n        justify-content: stretch;\n    }\n\n    aside {\n        color: var(--frontfaded);\n    }\n\n    .secondary,\n    a:not([type=\"button\"]) {\n        color: var(--emph);\n    }\n\n    h1 {\n        font-size: 120%;\n        font-family:\n            Rock Salt,\n            cursive,\n            sans-serif;\n        letter-spacing: 0.1em;\n        text-align: center;\n        color: var(--front);\n    }\n\n    h1 a:not([type=\"button\"]) {\n        color: inherit;\n    }\n\n    h1 a:hover {\n        background: none;\n        color: inherit;\n    }\n\n    button,\n    input[type=\"submit\"],\n    input[type=\"text\"],\n    a[type=\"button\"] {\n        font-size: inherit;\n        width: 100%;\n        text-align: center;\n        display: block;\n        border-radius: 1rem;\n        border: 2px solid var(--emph);\n        padding: 1em;\n        padding-top: 0.5em;\n        padding-bottom: 0.5em;\n        transition: 0.1s;\n        text-overflow: ellipsis;\n        background: none;\n        line-height: 1.2em;\n    }\n\n    input[type=\"text\"] {\n        font-weight: 500;\n        background: var(--front);\n        text-align: left;\n        color: black;\n    }\n\n    header button {\n        border-radius: 0 0 0 1rem;\n        border-right: none;\n        border-top: none;\n        background-color: var(--halfback2);\n        width: fit-content;\n        position: relative;\n        overflow: hidden;\n    }\n\n    header button::before {\n        z-index: -1;\n        top: 0;\n        left: 0;\n        height: 100%;\n        position: absolute;\n        width: 100%;\n        content: \"\";\n        background-color: var(--back);\n    }\n\n    @media (max-width: 600px) {\n        main {\n            border-radius: 0;\n            margin: auto;\n            overflow: auto;\n        }\n\n        header button {\n            border-radius: 0;\n            border-left: none;\n            width: 100%;\n        }\n\n        html {\n            justify-content: safe center;\n        }\n    }\n\n    a {\n        text-decoration: none;\n    }\n\n    :is(button, ul a, input[type=\"submit\"]):hover {\n        cursor: pointer;\n        background: var(--hover);\n        color: var(--front);\n    }\n\n    a:hover {\n        text-decoration: underline;\n        cursor: pointer;\n    }\n\n    form {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        align-items: stretch;\n        gap: 0.5em;\n    }\n\n    iframe {\n        width: 100%;\n        height: 100%;\n        border: none;\n    }\n\n    :is(button, a[type=\"button\"], input[type=\"submit\"]).secondary {\n        color: rgb(244, 213, 244);\n        background: rgba(26, 26, 26, 0.6);\n    }\n\n    :is(button, a[type=\"button\"], input[type=\"submit\"]):not(.secondary) {\n        background: var(--hover);\n        color: white;\n    }\n\n    :is(button, a[type=\"button\"], input[type=\"submit\"]):hover {\n        background: rgba(202, 122, 204, 0.6);\n        color: white;\n        text-decoration: none;\n    }\n\n    h3 {\n        color: var(--frontfaded);\n    }\n\n    h2 {\n        text-align: center;\n        font-weight: 500;\n        font-size: 150%;\n        background: var(--halfback2);\n        padding: 1rem;\n        border-radius: 1rem;\n        border: 1px solid var(--frontfaded);\n        color: var(--front);\n    }\n\n    main > div {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: stretch;\n        gap: 0.5rem;\n    }\n}\n\n.graffiti-modal[open] {\n    pointer-events: inherit;\n    opacity: 1;\n}\n\n.graffiti-modal::backdrop {\n    background-color: black;\n    opacity: 0.5;\n}\n\n.graffiti-modal::before {\n    content: \"\";\n    position: fixed;\n    left: 0;\n    right: 0;\n    z-index: -1;\n    background-image: url(graffiti.jpg);\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-position: 50% 50%;\n    height: calc(100% + 2 * var(--blurpix));\n    width: calc(100% + 2 * var(--blurpix));\n    filter: blur(var(--blurpix));\n    margin: calc(-1 * var(--blurpix));\n}\n"],
-  "mappings": "4BAAA,IAAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;",
-  "names": ["style_default"]
-}