@graffiti-garden/implementation-decentralized 0.0.2 → 0.0.3

package/dist/esm/3-protocol/login-dialog.html.js.map

@@ -1,7 +1,7 @@
 {
   "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"],
+  "sourcesContent": ["export const template = `<template id=\"graffiti-login-welcome\">\n  <h1>\n    <a target=\"_blank\" href=\"https://graffiti.garden\">Graffiti Log&nbsp;In</a>\n  </h1>\n\n  <ul>\n    <li><a type=\"button\" id=\"graffiti-login-new\">Create&nbsp;new Graffiti&nbsp;identity</a></li>\n    <li><button class=\"secondary\" id=\"graffiti-login-existing\">Use&nbsp;existing Graffiti&nbsp;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 Log&nbsp;In</a>\n</h1>\n\n  <form id=\"graffiti-login-handle-form\">\n    <label for=\"username\">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=\"you.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&nbsp;have&nbsp;a Graffiti&nbsp;handle? <a id=\"graffiti-login-new\">Create&nbsp;one</a>.\n  </p>\n</template>`;\n"],
   "mappings": "AAAO,MAAM,WAAW;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;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graffiti-garden/implementation-decentralized",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A client for a decentralized implementation of the Graffiti API",
   "types": "./dist/index.d.ts",
   "module": "./dist/esm/index.js",
@@ -50,8 +50,8 @@
     "vitest": "^4.0.17"
   },
   "dependencies": {
-    "@graffiti-garden/api": "^1.1.0",
-    "@graffiti-garden/modal": "^1.0.1",
+    "@graffiti-garden/api": "^1.1.1",
+    "@graffiti-garden/modal": "^1.0.2",
     "@ipld/dag-cbor": "^9.2.5",
     "@noble/ed25519": "^3.0.0",
     "@noble/hashes": "^2.0.1",

package/src/1-services/4-inboxes-tests.ts

@@ -32,6 +32,7 @@ export function inboxTests(inboxEndpoint: string, inboxToken: string) {
 
       // Get the message back
       const message = await inboxes.get(inboxEndpoint, messageId, inboxToken);
+      assert(message !== null);
       expect(message.m).toEqual(sending);
       expect(message.l).toEqual(0);
 
@@ -62,6 +63,7 @@ export function inboxTests(inboxEndpoint: string, inboxToken: string) {
       expect(endResult2.done).toBe(true);
 
       const message2 = await inboxes.get(inboxEndpoint, messageId, inboxToken);
+      assert(message2 !== null);
       expect(message2.m).toEqual(sending);
       expect(message2.l).toEqual(42);
     });

package/src/1-services/4-inboxes.ts

@@ -7,6 +7,7 @@ import {
 import {
   compileGraffitiObjectSchema,
   GraffitiErrorCursorExpired,
+  GraffitiErrorNotFound,
 } from "@graffiti-garden/api";
 import {
   encode as dagCborEncode,
@@ -61,23 +62,32 @@ export class Inboxes {
     inboxUrl: string,
     messageId: string,
     inboxToken?: string | null,
-  ): Promise<LabeledMessageBase> {
+  ): Promise<LabeledMessageBase | null> {
     const messageCacheKey = getMessageCacheKey(inboxUrl, messageId);
     const cache = await this.cache;
     const cached = await cache.messages.get(messageCacheKey);
-    if (cached) return cached;
+    if (cached !== undefined) return cached;
 
     const url = `${inboxUrl}/message/${messageId}`;
-    const response = await fetchWithErrorHandling(url, {
-      method: "GET",
-      headers: {
-        ...(inboxToken
-          ? {
-              Authorization: `Bearer ${inboxToken}`,
-            }
-          : {}),
-      },
-    });
+    let response: Response | null = null;
+    try {
+      response = await fetchWithErrorHandling(url, {
+        method: "GET",
+        headers: {
+          ...(inboxToken
+            ? {
+                Authorization: `Bearer ${inboxToken}`,
+              }
+            : {}),
+        },
+      });
+    } catch (e) {
+      if (e instanceof GraffitiErrorNotFound) {
+        await cache.messages.set(messageCacheKey, null);
+        return null;
+      }
+      throw e;
+    }
 
     const blob = await response.blob();
     const cbor = dagCborDecode(await blob.arrayBuffer());
@@ -607,8 +617,8 @@ async function canUseIDB(): Promise<boolean> {
 
 type Cache = {
   messages: {
-    get(k: string): Promise<LabeledMessageBase | undefined>;
-    set(k: string, value: LabeledMessageBase): Promise<void>;
+    get(k: string): Promise<LabeledMessageBase | null | undefined>;
+    set(k: string, value: LabeledMessageBase | null): Promise<void>;
     del(k: string): Promise<void>;
   };
   messageIds: {
@@ -695,7 +705,7 @@ async function createCache(): Promise<Cache> {
     };
   }
 
-  const m = new Map<string, LabeledMessageBase>();
+  const m = new Map<string, LabeledMessageBase | null>();
   const q = new Map<string, CacheQueryValue>();
 
   return {

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

@@ -29,6 +29,7 @@ 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,
@@ -239,11 +240,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 +290,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);
@@ -1017,7 +1017,12 @@ export class GraffitiDecentralized implements Graffiti {
       const result = itResult.value;
 
       const label = result.l;
-      if (label !== MESSAGE_LABEL_VALID && label !== MESSAGE_LABEL_UNLABELED)
+      // Anything invalid or unexpected, we can skip
+      if (
+        label !== MESSAGE_LABEL_VALID &&
+        label !== MESSAGE_LABEL_UNLABELED &&
+        label !== MESSAGE_LABEL_TRASH
+      )
         continue;
 
       const messageId = result.id;
@@ -1061,9 +1066,50 @@ export class GraffitiDecentralized implements Graffiti {
           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(
+          inboxEndpoint,
+          tombstonedMessageId,
+          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 {
+          messageId,
+          tombstone: true,
+          object,
+          storageBucketKey,
+          allowedTickets,
+          tags: receivedTags,
+          announcements,
+        };
+        continue;
       }
 
-      // Try to validate the object
+      // Otherwise, unlabeled: try to validate the object
       let validationError: unknown | undefined = undefined;
       try {
         const actor = object.actor;
@@ -1123,13 +1169,15 @@ export class GraffitiDecentralized implements Graffiti {
             // Get the referenced message
             .get(inboxEndpoint, tombstonedMessageId, inboxToken)
             .then((result) => {
-              // Make sure that it actually references the object being deleted
               if (
+                // Make sure that it actually references the object being deleted
                 result &&
                 result[LABELED_MESSAGE_MESSAGE_KEY][MESSAGE_OBJECT_KEY].url ===
-                  object.url
+                  object.url &&
+                // And that the object is not already marked as trash
+                result[LABELED_MESSAGE_LABEL_KEY] !== MESSAGE_LABEL_TRASH
               ) {
-                // If it does, label the message as trash, it is no longer needed
+                // If valid but not yet trash, label the message as trash
                 this.inboxes.label(
                   inboxEndpoint,
                   tombstonedMessageId,

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"]
-}