add delete functionality and normalize synthia

client.js

···
   let file
   let statusCode = Status.Success
 
+  if(request.method === 'DELETE') {
+    if(pathname.startsWith('/private/camera-roll')) {
+      return handleCameraRollDestroy(request)
+    }
+
+    if(pathname.startsWith('/private/sketch-pad')) {
+      return handleSketchPadDestroy(request)
+    }
+
+    if(pathname.startsWith('/private/time-machine')) {
+      return handleTimeMachineDestroy(request)
+    }
+  }
+
   if(request.method === 'POST') {
 
     if(pathname === '/plan98/subscribe') {
···
   }
 }
 
+async function handleTimeMachineDestroy(request) {
+  try {
+    const { pathname } = new URL(request.url);
+    // Delete the file
+    await Deno.remove(`./client${pathname}`);
 
+    return new Response('Time machine log deleted successfully', { status: 200 });
+  } catch (error) {
+    console.error('Error deleting time machine log:', error);
+    return new Response('Error saving time machine log', { status: 500 });
+  }
+}
+
+async function handleCameraRollDestroy(request) {
+  try {
+    const { pathname } = new URL(request.url);
+    // Delete the file
+    await Deno.remove(`./client${pathname}`);
+
+    return new Response('Picture deleted successfully', { status: 200 });
+  } catch (error) {
+    console.error('Error deleting picturee:', error);
+    return new Response('Error deleting picture', { status: 500 });
+  }
+}
+
+async function handleSketchPadDestroy(request) {
+  try {
+    const { pathname } = new URL(request.url);
+    // Delete the file
+    await Deno.remove(`./client${pathname}`);
+
+    return new Response('Sketch deleted successfully', { status: 200 });
+  } catch (error) {
+    console.error('Error deleting sketch:', error);
+    return new Response('Error deleting sketch', { status: 500 });
+  }
+}
 
 const byPath = (x) => x.path
 const byName = (x) => x.name

client/public/elves/paper-pocket.js

···
           </div>
         </div>
         <div class="selectbox-selector">
-          <div class="standard-button selectbox-view">
+          <div class="old-button selectbox-view">
             ${value}
           </div>
           <select data-settings name="${key}">
···
   return `
     <paper-pocket static="true">
       <div class="share-actions">
-        <a class="av-link-button standard-button -outlined -smol" target="_blank" href="/app/clip-board?q=${encodeURIComponent(operation)}">
+        <a class="old-button -smol" target="_blank" href="/app/clip-board?q=${encodeURIComponent(operation)}">
           clipboard
         </a>
-        <a class="av-link-button standard-button -outlined -smol" target="_blank" href="/app/time-machine?q=${encodeURIComponent(operation)}">
+        <a class="old-button -smol" target="_blank" href="/app/time-machine?q=${encodeURIComponent(operation)}">
           journal
         </a>
-        <a class="av-link-button standard-button -outlined -smol" target="_blank" href="/app/e-mail?q=${encodeURIComponent(operation)}">
+        <a class="old-button -smol" target="_blank" href="/app/e-mail?q=${encodeURIComponent(operation)}">
           email
         </a>
-        <a class="av-link-button standard-button -outlined -smol" target="_blank" href="/app/blue-sky?q=${encodeURIComponent(operation)}">
+        <a class="old-button -smol" target="_blank" href="/app/blue-sky?q=${encodeURIComponent(operation)}">
           bluesky
         </a>
-        <a class="av-link-button standard-button -outlined -smol" target="_blank" href="/app/cool-chat?q=${encodeURIComponent(operation)}">
+        <a class="old-button -smol" target="_blank" href="/app/cool-chat?q=${encodeURIComponent(operation)}">
           chat
         </a>
-        <a class="av-link-button standard-button -outlined -smol" target="_blank" href="/app/ur-shell?q=${encodeURIComponent(operation)}">
+        <a class="old-button -smol" target="_blank" href="/app/ur-shell?q=${encodeURIComponent(operation)}">
           shell
         </a>
       </div>
       <div class="search-bar">
         <input class="search-input" name="prompt" data-bind="synthia" value="${operation}" />
-        <button class="standard-button" data-search="${encodeURIComponent(operation)}">
+        <button class="old-button" data-search="${encodeURIComponent(operation)}">
           <sl-icon name="search"></sl-icon>
         </button>
       </div>
···
           return `
             <div class="av -chip">
               <div class="av-cta">
-                <a class="av-link-button standard-button -smol" target="_blank" href="${searchEngineMap[key].url}${encodeURIComponent(operation)}">
+                <a class="old-button -smol" target="_blank" href="${searchEngineMap[key].url}${encodeURIComponent(operation)}">
                   Ask
                 </a>
               </div>
···
         }).join('')}
         <div class="av -chip">
           <div class="av-cta">
-            <a class="av-link-button standard-button -smol" target="_blank" href="/app/js-repl?q=${encodeURIComponent(operation)}">
+            <a class="old-button -smol" target="_blank" href="/app/js-repl?q=${encodeURIComponent(operation)}">
               Run
             </a>
           </div>
···
 
         <div class="av -chip">
           <div class="av-cta">
-            <a class="av-link-button standard-button -smol" target="_blank" href="/app/luau-repl?q=${encodeURIComponent(operation)}">
+            <a class="old-button -smol" target="_blank" href="/app/luau-repl?q=${encodeURIComponent(operation)}">
               Run
             </a>
           </div>
···
       <div class="llm-grid">
         <div class="av -snapshot">
           <div class="av-cta">
-            <a class="av-link-button standard-button" target="_blank" href="/app/hello-ollama?model=llama3.2:3b&q=${encodeURIComponent(operation)}">
+            <a class="old-button" target="_blank" href="/app/hello-ollama?model=llama3.2:3b&q=${encodeURIComponent(operation)}">
               Ask
             </a>
           </div>
···
 
         <div class="av -snapshot">
           <div class="av-cta">
-            <a class="av-link-button standard-button" target="_blank" href="/app/hello-ollama?model=gemma3:1b&q=${encodeURIComponent(operation)}">
+            <a class="old-button" target="_blank" href="/app/hello-ollama?model=gemma3:1b&q=${encodeURIComponent(operation)}">
               Ask
             </a>
           </div>
···
 
         <div class="av -snapshot">
           <div class="av-cta">
-            <a class="av-link-button standard-button" target="_blank" href="/app/hello-ollama?model=mistral:7b&q=${encodeURIComponent(operation)}">
+            <a class="old-button" target="_blank" href="/app/hello-ollama?model=mistral:7b&q=${encodeURIComponent(operation)}">
               Ask
             </a>
           </div>
···
 
         <div class="av -snapshot">
           <div class="av-cta">
-            <a class="av-link-button standard-button" target="_blank" href="/app/hello-ollama?model=deepseek-r1:1.5b&q=${encodeURIComponent(operation)}">
+            <a class="old-button" target="_blank" href="/app/hello-ollama?model=deepseek-r1:1.5b&q=${encodeURIComponent(operation)}">
               Ask
             </a>
           </div>
···
                 ${list.map(({ label, url }) => {
                   return `
                     <div class="mega-footer-item">
-                      <a class="mega-footer-link standard-button" href="${url}">
+                      <a class="old-button old-button" href="${url}">
                         ${label}
                       </a>
                     </div>
···
           <div class="av-description">The end has come and it is time to face the music</div>
         </div>
         <div class="av-cta">
-          <a class="av-link-button standard-button" target="_blank" href="/app/paper-pocket?rom=final-boss">
+          <a class="old-button" target="_blank" href="/app/paper-pocket?rom=final-boss">
             Play
           </a>
         </div>

client/public/elves/time-machine.js

···
       </div>
 
       <div class="past-toggle-wrapper">
-        <button class="link-button" data-past-toggle>
+        <button class="standard-button" data-past-toggle>
           ${pastEnabled?'Hide Past':'View Past'}
         </button>
       </div>
···
   });
 }
 
-$.when('click', '[data-destroy]', async (event) => {
-  event.preventDefault()
-  const { destroy } = event.target.dataset
-})
+export function destroy(context) {
+  if(!context) return
+
+  const authorization = btoa(plan98.env.PLAN98_USERNAME + ':' + plan98.env.PLAN98_PASSWORD);
+
+  // Attempt to upload to server
+  fetch(`/private/time-machine${context.path}`, {
+      method: 'DELETE',
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Basic ${authorization}`
+      }
+  }).then(response => {
+    if (!response.ok) {
+      // Explicitly throw for non-200 responses
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    fate()
+  }).catch(error => {
+    console.warn(error);
+  });
+}
+
 
 $.when('submit', '[action="post"]', async (event) => {
   event.preventDefault()
···
     toast('Incomplete information, please try again.', { type: 'error' })
   }
 })
+
+$.when('click', '[data-destroy]', async (event) => {
+  event.preventDefault()
+  try {
+    destroy({ path: event.target.dataset.destroy })
+    hideModal()
+    toast('Destroyed!', { type: 'success' })
+  } catch(e) {
+    toast('Error!' + e.message, { type: 'error' })
+  }
+})
+
 
 $.when('click', '[data-view]', (event) => {
   event.preventDefault()
···
     top: 0;
     padding: .5rem;
     text-align: center;
+    z-index: 1;
   }
 
   & .era-label {
···
   }
 
   & .view-event {
-    border: 2px solid black;
-    background: linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05)), white;
+    border: 1px solid black;
+    background: white;
     border-radius: 3px;
     color: rgba(0,0,0,.85);
     padding: .5rem;
     font-weight: bold;
     display: inline-block;
     text-align: left;
+    transform: scale(.95);
+    transition: transform ease-in-out 100ms;
   }
 
   & .view-event img,
···
 
   & .view-event:hover,
   & .view-event:focus {
-    background: var(--root-theme, mediumseagreen);
     color: rgba(0,0,0,.85);
+    transform: scale(1);
   }
 
   & .view-event[data-show="${eventTypes.journal}"] {

client/public/styles/system.css

···
   position: relative;
 }
 
-.standard-button {
-  border: none;
-  border-radius: 3px;
-  border: 1px solid var(--root-theme, mediumseagreen);
-  background:
-    linear-gradient(335deg, var(--root-theme, mediumseagreen), rgba(0,0,0,.45) 20%, rgba(0,0,0,.75)),
-    linear-gradient(-65deg, rgba(255,255,255,.5), rgba(255,255,255,.15)),
-    var(--root-theme, mediumseagreen);
-  color: rgba(255,255,255,.85);
-  padding: .5rem;
-  font-weight: bold;
-  position: relative;
-}
-
-.standard-button:hover,
-.standard-button:focus {
-  color: rgba(255,255,255,.85);
-  background:
-    linear-gradient(335deg, var(--root-theme, mediumseagreen), rgba(255,255,255,.15) 20%, rgba(255,255,255,.25)),
-    linear-gradient(-65deg, rgba(0,0,0,.35), rgba(255,255,255,.35)),
-    var(--root-theme, mediumseagreen);
-}
-
-.standard-button.-clear {
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.standard-button.-outlined {
-  border: 1px solid var(--root-theme, mediumseagreen);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.standard-button.-small {
-  padding: .25rem .5rem;
-  font-size: 1rem;
-}
-
-.standard-button.-smol {
-  padding: 0 4px;
-  font-size: 1rem;
-  font-weight: normal;
-}
-
-.standard-input {
-  border: 1px solid rgba(0,0,0,.15);
-  border-radius: 3px;
-  color: rgba(0,0,0,.85);
-  padding: .5rem;
-}
-
-
-.old-button::after,
-.standard-button::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 10000;
-  background: var(--root-theme, transparent);
-  mix-blend-mode: soft-light;
-  opacity: .75;
-}
-
-
-.old-button,
-.old-button:link,
-.old-button:visited {
-  background: rgba(0,0,0,.1);
-  border: 2px solid;
-  border-top-color: rgba(255,255,255,.5);
-  border-left-color: rgba(255,255,255,.5);
-  border-bottom-color: rgba(0,0,0,.5);
-  border-right-color: rgba(0,0,0,.5);
-  text-decoration: none;
-  padding: .25rem .5rem;
-  color: rgba(0,0,0,.85);
-}
-
-.old-button:hover,
-.old-button:focus {
-  color: mediumseagreen;
-}
-
-.old-button:active {
-  text-decoration: none;
-  color: firebrick;
-  background: rgba(0,0,0,.8);
-  border-bottom-color: rgba(255,255,255,.5);
-  border-right-color: rgba(255,255,255,.5);
-  border-top-color: rgba(0,0,0,.5);
-  border-left-color: rgba(0,0,0,.5);
-}
-
-
-
 .mega-footer {
   padding: 1rem 0;
 }
···
   display: inline-block;
 }
 
-.mega-footer-link:link {
+.old-button:link {
   display: inline-block;
 }
-.mega-footer-link:link,
-.mega-footer-link:visited {
+.old-button:link,
+.old-button:visited {
   background: rgba(0,0,0,.1);
   border: 2px solid;
   border-top-color: rgba(255,255,255,.5);
···
   color: rgba(0,0,0,.85);
 }
 
-.mega-footer-link:hover,
-.mega-footer-link:focus {
+.old-button:hover,
+.old-button:focus {
   background: rgba(0,0,0,.2);
 }
 
-.mega-footer-link:active {
+.old-button:active {
   text-decoration: none;
   background: rgba(0,0,0,.4);
   border-bottom-color: rgba(255,255,255,.5);
···
   border-radius: .5rem;
 }
 
-
-.av-link-button:link,
-.av-link-button:visited,
-.av-link-button:hover,
-.av-link-button:focus {
-  text-decoration: none;
-  color: white;
-  white-space: nowrap;
-  display: inline-block;
-}
-
 .av.-banner .av-cta {
   place-self: center;
 }
···
 .av-description {
   font-weight: 100;
 }
+
+.standard-button {
+  border: none;
+  border-radius: 3px;
+  border: 1px solid var(--root-theme, mediumseagreen);
+  background:
+    linear-gradient(335deg, var(--root-theme, mediumseagreen), rgba(0,0,0,.45) 20%, rgba(0,0,0,.75)),
+    linear-gradient(-65deg, rgba(255,255,255,.5), rgba(255,255,255,.15)),
+    var(--root-theme, mediumseagreen);
+  color: rgba(255,255,255,.85);
+  padding: .5rem;
+  font-weight: bold;
+  position: relative;
+}
+
+.standard-button:hover,
+.standard-button:focus {
+  color: rgba(255,255,255,.85);
+  background:
+    linear-gradient(335deg, var(--root-theme, mediumseagreen), rgba(255,255,255,.15) 20%, rgba(255,255,255,.25)),
+    linear-gradient(-65deg, rgba(0,0,0,.35), rgba(255,255,255,.35)),
+    var(--root-theme, mediumseagreen);
+}
+
+.standard-input {
+  border: 1px solid rgba(0,0,0,.15);
+  border-radius: 3px;
+  color: rgba(0,0,0,.85);
+  padding: .5rem;
+}
+
+
+.old-button::after,
+.standard-button::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10000;
+  background: var(--root-theme, transparent);
+  mix-blend-mode: soft-light;
+  opacity: .75;
+}
+
+
+.old-button,
+.old-button:link,
+.old-button:visited {
+  background: rgba(0,0,0,.1);
+  border: 2px solid;
+  border-top-color: rgba(255,255,255,.5);
+  border-left-color: rgba(255,255,255,.5);
+  border-bottom-color: rgba(0,0,0,.5);
+  border-right-color: rgba(0,0,0,.5);
+  text-decoration: none;
+  padding: .25rem .5rem;
+  color: rgba(0,0,0,.85);
+  position: relative;
+}
+
+.old-button:hover,
+.old-button:focus {
+  color: mediumseagreen;
+}
+
+.old-button:active {
+  text-decoration: none;
+  color: firebrick;
+  background: rgba(0,0,0,.8);
+  border-bottom-color: rgba(255,255,255,.5);
+  border-right-color: rgba(255,255,255,.5);
+  border-top-color: rgba(0,0,0,.5);
+  border-left-color: rgba(0,0,0,.5);
+}
+
+.standard-button.-clear {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.standard-button.-outlined,
+.old-button.-outlined {
+  border: 1px solid var(--root-theme, mediumseagreen);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.standard-button.-small {
+  padding: .25rem .5rem;
+  font-size: 1rem;
+}
+
+.standard-button.-smol,
+.old-button.-smol {
+  padding: 0 4px;
+  font-size: 1rem;
+  font-weight: normal;
+}
+
+