@graffiti-garden/implementation-decentralized 0.0.3 → 0.0.5

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

@@ -34,6 +34,7 @@ import {
   MESSAGE_METADATA_KEY,
   MESSAGE_OBJECT_KEY,
   MESSAGE_TAGS_KEY,
+  type LabeledMessage,
   type MessageStream,
 } from "../1-services/4-inboxes";
 
@@ -131,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();
@@ -705,79 +708,87 @@ export class GraffitiDecentralized implements Graffiti {
     >(async (it, index) => indexedSingleEndpointQueryNext<Schema>(it, index));
     let active = indexedIteratorNexts.length;
 
-    while (active > 0) {
-      const next: IndexedSingleEndpointQueryResult<Schema> =
-        await Promise.race<any>(indexedIteratorNexts);
-      if (next.error !== undefined) {
-        // Remove it from the race
-        indexedIteratorNexts[next.index] = new Promise(() => {});
-        active--;
-        yield {
-          error: next.error,
-          origin: allInboxes[next.index].serviceEndpoint,
-        };
-      } else if (next.result.done) {
-        // Store the cursor for future use
-        const inbox = allInboxes[next.index];
-        cursors[inbox.serviceEndpoint] = next.result.value;
-        // Remove it from the race
-        indexedIteratorNexts[next.index] = new Promise(() => {});
-        active--;
-      } else {
-        // Re-arm the iterator
-        indexedIteratorNexts[next.index] =
-          indexedSingleEndpointQueryNext<Schema>(
-            iterators[next.index],
-            next.index,
-          );
-        const { object, tombstone, tags: receivedTags } = next.result.value;
-        if (tombstone) {
-          if (tombstones.get(object.url) === true) continue;
-          tombstones.set(object.url, true);
+    try {
+      while (active > 0) {
+        const next: IndexedSingleEndpointQueryResult<Schema> =
+          await Promise.race<any>(indexedIteratorNexts);
+        if (next.error !== undefined) {
+          // Remove it from the race
+          indexedIteratorNexts[next.index] = new Promise(() => {});
+          active--;
           yield {
-            tombstone,
-            object: { url: object.url },
+            error: next.error,
+            origin: allInboxes[next.index].serviceEndpoint,
           };
+        } else if (next.result.done) {
+          // Store the cursor for future use
+          const inbox = allInboxes[next.index];
+          cursors[inbox.serviceEndpoint] = next.result.value;
+          // Remove it from the race
+          indexedIteratorNexts[next.index] = new Promise(() => {});
+          active--;
         } else {
-          // Filter already seen
-          if (tombstones.get(object.url) === false) continue;
-
-          // Fill in the matched channels
-          const matchedTagIndices = tags.reduce<number[]>(
-            (acc, tag, tagIndex) => {
-              for (const receivedTag of receivedTags) {
-                if (
-                  tag.length === receivedTag.length &&
-                  tag.every((b, i) => receivedTag[i] === b)
-                ) {
-                  acc.push(tagIndex);
-                  break;
+          // Re-arm the iterator
+          indexedIteratorNexts[next.index] =
+            indexedSingleEndpointQueryNext<Schema>(
+              iterators[next.index],
+              next.index,
+            );
+          const { object, tombstone, tags: receivedTags } = next.result.value;
+          if (tombstone) {
+            if (tombstones.get(object.url) === true) continue;
+            tombstones.set(object.url, true);
+            yield {
+              tombstone,
+              object: { url: object.url },
+            };
+          } else {
+            // Filter already seen
+            if (tombstones.get(object.url) === false) continue;
+
+            // Fill in the matched channels
+            const matchedTagIndices = tags.reduce<number[]>(
+              (acc, tag, tagIndex) => {
+                for (const receivedTag of receivedTags) {
+                  if (
+                    tag.length === receivedTag.length &&
+                    tag.every((b, i) => receivedTag[i] === b)
+                  ) {
+                    acc.push(tagIndex);
+                    break;
+                  }
                 }
-              }
-              return acc;
-            },
-            [],
-          );
-          const matchedChannels = matchedTagIndices.map(
-            (index) => channels[index],
-          );
-          if (matchedChannels.length === 0) {
+                return acc;
+              },
+              [],
+            );
+            const matchedChannels = matchedTagIndices.map(
+              (index) => channels[index],
+            );
+            if (matchedChannels.length === 0) {
+              yield {
+                error: new Error(
+                  "Inbox returned object without matching channels",
+                ),
+                origin: allInboxes[next.index].serviceEndpoint,
+              };
+            }
+            tombstones.set(object.url, false);
             yield {
-              error: new Error(
-                "Inbox returned object without matching channels",
-              ),
-              origin: allInboxes[next.index].serviceEndpoint,
+              object: {
+                ...object,
+                channels: matchedChannels,
+              },
             };
           }
-          tombstones.set(object.url, false);
-          yield {
-            object: {
-              ...object,
-              channels: matchedChannels,
-            },
-          };
         }
       }
+    } finally {
+      await Promise.all(
+        iterators.map<Promise<void>>(async (it) => {
+          await it.return("");
+        }),
+      );
     }
 
     return {
@@ -785,8 +796,6 @@ export class GraffitiDecentralized implements Graffiti {
         channels,
         cursors,
       } satisfies infer_<typeof CursorSchema>),
-      continue: (session) =>
-        this.discoverMeta<Schema>(channels, schema, cursors, session),
     };
   }
 
@@ -795,6 +804,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,237 +1019,281 @@ export class GraffitiDecentralized implements Graffiti {
             inboxToken,
           ) as unknown as MessageStream<Schema>);
 
-    while (true) {
-      const itResult = await iterator.next();
-      // Return the cursor if done
-      if (itResult.done) return itResult.value;
+    const inFlight: Promise<SingleEndpointQueryResult<Schema> | void>[] = [];
+    let doneValue: string | null = null;
+
+    try {
+      while (true) {
+        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;
+          });
+
+          inFlight.push(processPromise);
+        }
 
-      const result = itResult.value;
+        const nextProcessedPromise = inFlight.shift();
 
-      const label = result.l;
-      // Anything invalid or unexpected, we can skip
+        if (!nextProcessedPromise) {
+          if (doneValue !== null) return doneValue;
+
+          throw new Error("Process queue empty but no return value");
+        }
+
+        const processed = await nextProcessedPromise;
+        if (processed) yield processed;
+      }
+    } finally {
+      await iterator.return("");
+    }
+  }
+
+  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 (
-        label !== MESSAGE_LABEL_VALID &&
-        label !== MESSAGE_LABEL_UNLABELED &&
-        label !== MESSAGE_LABEL_TRASH
+        !past ||
+        past[LABELED_MESSAGE_MESSAGE_KEY][MESSAGE_OBJECT_KEY].url !== object.url
       )
-        continue;
+        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) {
+      // 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;
+      // Return the tombstone
+      return {
+        messageId,
+        tombstone: true,
+        object,
+        storageBucketKey,
+        allowedTickets,
+        tags: receivedTags,
+        announcements,
+      };
+    }
 
-      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]
+    // 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 (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 (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;
 
-      if (label === MESSAGE_LABEL_VALID) {
-        yield {
+      await this.objectEncoding.validate(
+        object,
+        receivedTags,
+        objectBytes,
+        privateObjectInfo,
+      );
+    } catch (e) {
+      validationError = e;
+    }
+
+    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,
+                tombstonedMessageId,
+                MESSAGE_LABEL_TRASH,
+                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,
         };
-        continue;
-      } else if (label === MESSAGE_LABEL_TRASH) {
-        // If it is simply trash, just continue.
-        if (!tombstonedMessageId) continue;
-
-        // Make sure the tombstone points to a real message
-        const past = await this.inboxes.get(
+      } else {
+        console.error("Recieved an incorrect tombstone object");
+        console.error(validationError);
+        this.inboxes.label(
           inboxEndpoint,
-          tombstonedMessageId,
+          messageId,
+          MESSAGE_LABEL_INVALID,
           inboxToken,
         );
-        if (
-          !past ||
-          past[LABELED_MESSAGE_MESSAGE_KEY][MESSAGE_OBJECT_KEY].url !==
-            object.url
-        )
-          continue;
-
-        // 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,
-            tombstonedMessageId,
-            MESSAGE_LABEL_TRASH,
-            inboxToken,
-          );
-        }
-
-        // Return the tombstone
-        yield {
+      }
+    } else {
+      if (validationError === undefined) {
+        this.inboxes.label(
+          inboxEndpoint,
+          messageId,
+          MESSAGE_LABEL_VALID,
+          inboxToken,
+        );
+        return {
           messageId,
-          tombstone: true,
           object,
           storageBucketKey,
-          allowedTickets,
           tags: receivedTags,
+          allowedTickets,
           announcements,
         };
-        continue;
-      }
-
-      // 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 (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 (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;
-
-        await this.objectEncoding.validate(
-          object,
-          receivedTags,
-          objectBytes,
-          privateObjectInfo,
+      } 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,
         );
-      } catch (e) {
-        validationError = e;
-      }
-
-      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,
-                  tombstonedMessageId,
-                  MESSAGE_LABEL_TRASH,
-                  inboxToken,
-                );
-              }
-
-              // Then, label the tombstone message as trash
-              this.inboxes.label(
-                inboxEndpoint,
-                messageId,
-                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,
-          );
-        }
       } 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 object");
+        console.error(validationError);
+        this.inboxes.label(
+          inboxEndpoint,
+          messageId,
+          MESSAGE_LABEL_INVALID,
+          inboxToken,
+        );
       }
     }
   }

package/dist/browser/style-3ALLGCD7-QNFKN6AK.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../node_modules/@graffiti-garden/modal/src/style.css"],
-  "sourcesContent": [".graffiti-modal {\n    --back: rgba(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    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-inline: clamp(1rem, 4dvw, 3rem);\n        padding-block: clamp(1rem, 4dvh, 3rem);\n        margin-inline: clamp(1rem, 4dvw, 3rem);\n        margin-block: clamp(1rem, 4dvh, 3rem);\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-height: 600px) {\n        main {\n            gap: 1em;\n        }\n\n        h1 {\n            font-size: 100%;\n        }\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\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"]
-}