@phosart/devtool 0.3.4 → 0.3.6

package/build/server/chunks/{_layout.svelte-BLfVQZLo.js → _layout.svelte-BDbe1uM7.js}

@@ -1,15 +1,15 @@
-import { y as head, z as attr_style, A as escape_html, B as ensure_array_like, C as attr, E as attr_class, F as stringify, G as derived, I as fallback, J as bind_props, K as spread_props } from './root-CaUozMBL.js';
-import { p as page, i as invalidateAll } from './index-Dqoyt3qe.js';
-import { r as resolve } from './server2-BVjW8MLI.js';
-import { c as createSharedEpoch, a as createSharedGalleryOverrides } from './galleryoverride.svelte-BLb0HLfo.js';
-import { T as Tooltip, M as Modal } from './Modal-CIjCa_0v.js';
-import { s as setNavbarOpen, I as Icon } from './Icon-Bbbqk-yg.js';
-import { A as ActionButton } from './ActionButton-B4R2bBP0.js';
-import { T as TextInput } from './TextInput-Dnk-aR1D.js';
-import { E as Eye, T as TextBox } from './TextBox-fDrH7Jnv.js';
-import { C as Circle_x } from './circle-x-CvVNi5Cn.js';
-import './exports-Cj2LkLxl.js';
-import './routing-MUJ6-d6g.js';
+import { y as head, z as attr_style, A as attr_class, B as escape_html, C as ensure_array_like, E as attr, F as spread_props, G as stringify, I as derived, J as fallback, K as bind_props, L as await_block } from './root-BJkpA5AC.js';
+import { p as page, i as invalidateAll } from './index-D77ofXkh.js';
+import { r as resolve } from './server2-DfjGIwzU.js';
+import { c as createSharedEpoch, a as createSharedGalleryOverrides } from './galleryoverride.svelte-Cd7BCVl6.js';
+import { T as Tooltip, M as Modal } from './Modal-CYUca4C-.js';
+import { s as setNavbarOpen, I as Icon } from './Icon-QG3FDgpT.js';
+import { A as ActionButton } from './ActionButton-DvxyrR5s.js';
+import { T as TextInput } from './TextInput-DPhM0JMf.js';
+import { E as Eye, T as TextBox } from './TextBox-CbvouNLx.js';
+import { C as Circle_x } from './circle-x-DdnradHc.js';
+import './exports-BslKlSQ6.js';
+import './routing-BcpJutul.js';
 import './log-Dgdg632G.js';
 import 'tslog';
 import 'fuzzysort';
@@ -51,7 +51,15 @@ function element($$renderer, el) {
     $$renderer.push(`<span class="text-orange-700">${escape_html(el)}</span>`);
   } else {
     $$renderer.push("<!--[-1-->");
-    $$renderer.push(`<pre class="text-gray-800">${escape_html(JSON.stringify(el))}</pre>`);
+    const nativeError = typeof el === "object" && el && "nativeError" in el && "message" in el && typeof el.message === "string";
+    if (nativeError) {
+      $$renderer.push("<!--[0-->");
+      $$renderer.push(`<pre class="text-surface-contrast-5-950">${escape_html(el.message)}</pre>`);
+    } else {
+      $$renderer.push("<!--[-1-->");
+      $$renderer.push(`<pre class="text-surface-contrast-5-950">${escape_html(JSON.stringify(el))}</pre>`);
+    }
+    $$renderer.push(`<!--]-->`);
   }
   $$renderer.push(`<!--]-->`);
 }
@@ -143,6 +151,42 @@ function Circle($$renderer, $$props) {
   $$renderer.push(`<div${attr_class("circle svelte-1t51ygf", void 0, { "pause-animation": pause })}${attr_style(`--size: ${stringify(size)}${stringify(unit)}; --color: ${stringify(color)}; --duration: ${stringify(duration)}`)}></div>`);
   bind_props($$props, { color, unit, duration, size, pause });
 }
+function Circle_alert($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["circle", { "cx": "12", "cy": "12", "r": "10" }],
+      ["line", { "x1": "12", "x2": "12", "y1": "8", "y2": "12" }],
+      [
+        "line",
+        { "x1": "12", "x2": "12.01", "y1": "16", "y2": "16" }
+      ]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "circle-alert" },
+      /**
+       * @component @name CircleAlert
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIgLz4KICA8bGluZSB4MT0iMTIiIHgyPSIxMiIgeTE9IjgiIHkyPSIxMiIgLz4KICA8bGluZSB4MT0iMTIiIHgyPSIxMi4wMSIgeTE9IjE2IiB5Mj0iMTYiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/circle-alert
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
 function Circle_check($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let { $$slots, $$events, ...props } = $$props;
@@ -318,6 +362,117 @@ function Hourglass($$renderer, $$props) {
     ]));
   });
 }
+function Laptop_minimal_check($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["path", { "d": "M2 20h20" }],
+      ["path", { "d": "m9 10 2 2 4-4" }],
+      [
+        "rect",
+        { "x": "3", "y": "4", "width": "18", "height": "12", "rx": "2" }
+      ]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "laptop-minimal-check" },
+      /**
+       * @component @name LaptopMinimalCheck
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMiAyMGgyMCIgLz4KICA8cGF0aCBkPSJtOSAxMCAyIDIgNC00IiAvPgogIDxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgcng9IjIiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/laptop-minimal-check
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Moon($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "path",
+        {
+          "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+        }
+      ]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "moon" },
+      /**
+       * @component @name Moon
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMjAuOTg1IDEyLjQ4NmE5IDkgMCAxIDEtOS40NzMtOS40NzJjLjQwNS0uMDIyLjYxNy40Ni40MDIuODAzYTYgNiAwIDAgMCA4LjI2OCA4LjI2OGMuMzQ0LS4yMTUuODI1LS4wMDQuODAzLjQwMSIgLz4KPC9zdmc+Cg==) - https://lucide.dev/icons/moon
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Sun($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["circle", { "cx": "12", "cy": "12", "r": "4" }],
+      ["path", { "d": "M12 2v2" }],
+      ["path", { "d": "M12 20v2" }],
+      ["path", { "d": "m4.93 4.93 1.41 1.41" }],
+      ["path", { "d": "m17.66 17.66 1.41 1.41" }],
+      ["path", { "d": "M2 12h2" }],
+      ["path", { "d": "M20 12h2" }],
+      ["path", { "d": "m6.34 17.66-1.41 1.41" }],
+      ["path", { "d": "m19.07 4.93-1.41 1.41" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "sun" },
+      /**
+       * @component @name Sun
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0IiAvPgogIDxwYXRoIGQ9Ik0xMiAydjIiIC8+CiAgPHBhdGggZD0iTTEyIDIwdjIiIC8+CiAgPHBhdGggZD0ibTQuOTMgNC45MyAxLjQxIDEuNDEiIC8+CiAgPHBhdGggZD0ibTE3LjY2IDE3LjY2IDEuNDEgMS40MSIgLz4KICA8cGF0aCBkPSJNMiAxMmgyIiAvPgogIDxwYXRoIGQ9Ik0yMCAxMmgyIiAvPgogIDxwYXRoIGQ9Im02LjM0IDE3LjY2LTEuNDEgMS40MSIgLz4KICA8cGF0aCBkPSJtMTkuMDcgNC45My0xLjQxIDEuNDEiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/sun
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
 function Timer($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let { $$slots, $$events, ...props } = $$props;
@@ -394,11 +549,28 @@ function Spinner($$renderer, $$props) {
 function _layout($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let { children, data } = $$props;
+    let isOnboarding = false;
+    let onboardSelection = "automatic";
     let sidebarOpen = { open: true };
     setNavbarOpen(sidebarOpen);
     let commitMessage = "";
     let logs = [];
     let gitStatus = null;
+    let runCloudflareOnboard = false;
+    let isCloudflareLoggedIn = null;
+    let cfProjects = void 0;
+    let newProjectName = "";
+    let createProjectError = "";
+    async function setupCloudflareOnboard() {
+      isCloudflareLoggedIn = fetch(resolve("/api/deploy/cloudflare/whoami")).then((res) => {
+        return res.status === 200;
+      });
+      cfProjects = fetch(resolve("/api/deploy/cloudflare/projects")).then((res) => {
+        return res.json();
+      });
+      runCloudflareOnboard = true;
+    }
+    let themeMode = null;
     const isServerDoingWork = derived(() => {
       const lastLog = logs[logs.length - 1] ?? null;
       const lastLogAsArray = logAsArray(lastLog);
@@ -499,7 +671,7 @@ function _layout($$renderer, $$props) {
     function gitPush($$renderer3, close) {
       ActionButton($$renderer3, {
         disabled: (gitStatus?.ahead ?? 0) == 0 && (gitStatus?.behind ?? 0) == 0 || (gitStatus?.conflicted.length ?? 0) > 0 || gitStatus?.tracking === null || gitStatus?.current === "HEAD",
-        class: "bg-gray-950 text-white",
+        class: "bg-gray-950 btn-sm text-white",
         action: async () => {
           await runDeploy([
             ...(gitStatus?.behind ?? 0) > 0 ? [
@@ -522,6 +694,12 @@ function _layout($$renderer, $$props) {
               step: "Update Status",
               run: async () => {
                 gitStatus = await fetchStatus();
+                await fetch(resolve("/api/deploy/config"), {
+                  body: JSON.stringify({ ...data.deploySettings, last_used: "Git" }),
+                  headers: { "Content-Type": "application/json" },
+                  method: "PUT"
+                });
+                await invalidateAll();
               }
             }
           ]);
@@ -534,7 +712,7 @@ function _layout($$renderer, $$props) {
     }
     function dlZip($$renderer3, close) {
       ActionButton($$renderer3, {
-        class: "preset-tonal-primary",
+        class: "preset-tonal-primary btn-sm",
         action: async () => {
           await runDeploy([
             {
@@ -556,6 +734,17 @@ function _layout($$renderer, $$props) {
                 a.click();
                 a.remove();
               }
+            },
+            {
+              step: "Update Status",
+              run: async () => {
+                await fetch(resolve("/api/deploy/config"), {
+                  body: JSON.stringify({ ...data.deploySettings, last_used: "ZIP" }),
+                  headers: { "Content-Type": "application/json" },
+                  method: "PUT"
+                });
+                await invalidateAll();
+              }
             }
           ]);
           close?.();
@@ -566,6 +755,45 @@ function _layout($$renderer, $$props) {
         }
       });
     }
+    function deployCf($$renderer3, close) {
+      ActionButton($$renderer3, {
+        class: "bg-orange-800 btn-sm text-white",
+        action: async () => {
+          if (!data.deploySettings.cloudflare_project_name) {
+            setupCloudflareOnboard();
+          } else {
+            await runDeploy([
+              {
+                step: "Ensure Logged In",
+                run: async () => {
+                  const res = await fetch(resolve("/api/deploy/cloudflare/whoami"));
+                  if (res.status === 403) {
+                    setupCloudflareOnboard();
+                    throw new Error("CloudFlare is not currently logged in");
+                  }
+                }
+              },
+              {
+                step: "Build project",
+                run: async () => {
+                  await fetchEnsureSuccess(resolve("/api/deploy/build"), { method: "POST" });
+                }
+              },
+              {
+                step: "Deploy project",
+                run: async () => {
+                  await fetchEnsureSuccess(resolve("/api/deploy/cloudflare/deploy"), { method: "POST" });
+                }
+              }
+            ]);
+            close?.();
+          }
+        },
+        children: ($$renderer4) => {
+          $$renderer4.push(`<i class="fa-brands fa-cloudflare"></i> CloudFlare`);
+        }
+      });
+    }
     let $$settled = true;
     let $$inner_renderer;
     function $$render_inner($$renderer3) {
@@ -805,19 +1033,13 @@ function _layout($$renderer, $$props) {
         }
         $$renderer3.push(`<!----></div>`);
       }
-      $$renderer3.push(`<!--]--> <div class="mt-4 mb-2 w-full border-b border-b-surface-600-400"></div> <div class="mb-2 flex items-center justify-center gap-2 font-light"><span>Deployment</span> `);
-      {
-        let tooltip = function($$renderer4) {
-          $$renderer4.push(`<div class="max-w-64"><p>Get your site live!</p></div>`);
-        }, children2 = function($$renderer4, attach) {
-          Circle_question_mark($$renderer4, { size: 16 });
-        };
-        Tooltip($$renderer3, { tooltip, children: children2 });
-      }
-      $$renderer3.push(`<!----></div> <div class="flex items-center justify-around">`);
-      if (data.gitAvailable) {
+      $$renderer3.push(`<!--]--> <div class="mt-4 mb-2 w-full border-b border-b-surface-600-400"></div> <div class="mb-2 flex items-center justify-center gap-2 font-light"><span>Deployment</span></div> <div class="flex items-center justify-around">`);
+      if (!data.deploySettings.last_used && data.gitAvailable || data.deploySettings.last_used === "Git") {
         $$renderer3.push("<!--[0-->");
         gitPush($$renderer3);
+      } else if (data.deploySettings.last_used === "CloudFlare") {
+        $$renderer3.push("<!--[1-->");
+        deployCf($$renderer3);
       } else {
         $$renderer3.push("<!--[-1-->");
         dlZip($$renderer3);
@@ -828,6 +1050,8 @@ function _layout($$renderer, $$props) {
           Ellipsis($$renderer4, {});
         }, children2 = function($$renderer4, close) {
           $$renderer4.push(`<div class="flex flex-col items-stretch justify-center">`);
+          deployCf($$renderer4, close);
+          $$renderer4.push(`<!----> `);
           gitPush($$renderer4, close);
           $$renderer4.push(`<!----> `);
           dlZip($$renderer4, close);
@@ -841,7 +1065,7 @@ function _layout($$renderer, $$props) {
           $$slots: { buttonContent: true, default: true }
         });
       }
-      $$renderer3.push(`<!----></div></div> <div class="grow"></div> `);
+      $$renderer3.push(`<!----></div></div> <div class="grow"></div> <div class="flex flex-row-reverse items-center gap-2">`);
       {
         let children2 = function($$renderer4, attach) {
           function loadingContent($$renderer5) {
@@ -870,7 +1094,13 @@ function _layout($$renderer, $$props) {
           children: children2
         });
       }
-      $$renderer3.push(`<!----> <div class="text-xs text-surface-700-300">© phosphoriteart ${escape_html((/* @__PURE__ */ new Date()).getFullYear())}</div></div> <div class="transition-all"${attr_style(`min-width: ${sidebarOpen.open ? "200px" : "0px"};`)}></div> <div class="flex grow flex-col" style="min-width: min(100vw, 500px);">`);
+      $$renderer3.push(`<!----> <div class="btn-group flex items-center preset-outlined-surface-600-400 p-1 text-xs"><button${attr_class("btn-icon btn btn-icon-sm", void 0, { "preset-tonal-surface": themeMode === "system" })}>`);
+      Laptop_minimal_check($$renderer3, {});
+      $$renderer3.push(`<!----></button> <button${attr_class("btn-icon btn btn-icon-sm", void 0, { "preset-tonal-surface": themeMode === "dark" })}>`);
+      Moon($$renderer3, {});
+      $$renderer3.push(`<!----></button> <button${attr_class("btn-icon btn btn-icon-sm", void 0, { "preset-tonal-surface": themeMode === "light" })}>`);
+      Sun($$renderer3, {});
+      $$renderer3.push(`<!----></button></div></div> <div class="text-xs text-surface-700-300">© phosphoriteart ${escape_html((/* @__PURE__ */ new Date()).getFullYear())}</div></div> <div class="transition-all"${attr_style(`min-width: ${sidebarOpen.open ? "200px" : "0px"};`)}></div> <div class="flex grow flex-col" style="min-width: min(100vw, 500px);">`);
       children?.($$renderer3);
       $$renderer3.push(`<!----> <div class="no-scrollbar h-5 max-h-5 min-h-5 w-full max-w-full overflow-scroll border-t-surface-500 bg-surface-100-900 text-[8pt] hover:h-32 hover:max-h-32 hover:min-h-32"><!--[-->`);
       const each_array_5 = ensure_array_like(logs);
@@ -990,6 +1220,198 @@ function _layout($$renderer, $$props) {
         },
         $$slots: { default: true }
       });
+      $$renderer3.push(`<!----> `);
+      {
+        let children2 = function($$renderer4, close) {
+          $$renderer4.push(`<div class="min-w-lg p-4"><p>In order to deploy to CloudFlare, we'll need to make sure you're logged in, then select a
+				project to deploy to.</p> <p>By default, your project will be available at <tt>&lt;project-name>.pages.dev</tt>.</p> `);
+          await_block(
+            $$renderer4,
+            isCloudflareLoggedIn,
+            () => {
+              Spinner($$renderer4, { loading: true });
+              $$renderer4.push(`<!----> <div class="my-4 flex items-center gap-2">`);
+              Hourglass($$renderer4, { class: "animate-pulse" });
+              $$renderer4.push(`<!----> <div>Loading login status...</div></div>`);
+            },
+            (isLoggedIn) => {
+              if (isLoggedIn === false) {
+                $$renderer4.push("<!--[0-->");
+                $$renderer4.push(`<div class="my-4 flex items-center gap-2"><div>`);
+                Circle_alert($$renderer4, { class: "fill-warning-300-700" });
+                $$renderer4.push(`<!----></div> <p>Click `);
+                ActionButton($$renderer4, {
+                  class: "preset-tonal-warning btn-sm",
+                  action: async () => {
+                    await fetch(resolve("/api/deploy/cloudflare/whoami"), { method: "POST" });
+                    await setupCloudflareOnboard();
+                  },
+                  children: ($$renderer5) => {
+                    $$renderer5.push(`<!---->here`);
+                  }
+                });
+                $$renderer4.push(`<!----> to log into CloudFlare. A new browser window will open.</p></div>`);
+              } else {
+                $$renderer4.push("<!--[-1-->");
+                $$renderer4.push(`<div class="my-4 flex items-center gap-2"><div>`);
+                Circle_check($$renderer4, { class: "fill-success-300-700" });
+                $$renderer4.push(`<!----></div> <p>Logged in!</p></div> `);
+                if (!data.deploySettings.cloudflare_project_name) {
+                  $$renderer4.push("<!--[0-->");
+                  $$renderer4.push(`<p>You also need to set up a Cloudflare Project to host your website.</p> <div>`);
+                  await_block(
+                    $$renderer4,
+                    cfProjects,
+                    () => {
+                      Spinner($$renderer4, { loading: true });
+                      $$renderer4.push(`<!----> <div class="my-4 flex items-center gap-2">`);
+                      Hourglass($$renderer4, { class: "animate-pulse" });
+                      $$renderer4.push(`<!----> <div>Loading project list...</div></div>`);
+                    },
+                    (projs) => {
+                      $$renderer4.push(`<p>You can use an existing project...</p> <ol class="list-disc pl-8"><!--[-->`);
+                      const each_array_7 = ensure_array_like(projs);
+                      for (let $$index_7 = 0, $$length = each_array_7.length; $$index_7 < $$length; $$index_7++) {
+                        let proj = each_array_7[$$index_7];
+                        $$renderer4.push(`<li>`);
+                        ActionButton($$renderer4, {
+                          action: async () => {
+                            await fetch(resolve("/api/deploy/config"), {
+                              body: JSON.stringify({
+                                ...data.deploySettings,
+                                last_used: "CloudFlare",
+                                cloudflare_project_name: proj["Project Name"]
+                              }),
+                              headers: { "Content-Type": "application/json" },
+                              method: "PUT"
+                            });
+                            await invalidateAll();
+                          },
+                          unstyled: true,
+                          class: "btn preset-outlined-surface-600-400 btn-sm text-sm",
+                          children: ($$renderer5) => {
+                            $$renderer5.push(`<!---->Use ${escape_html(proj["Project Name"])} (@ ${escape_html(proj["Project Domains"])})`);
+                          }
+                        });
+                        $$renderer4.push(`<!----></li>`);
+                      }
+                      $$renderer4.push(`<!--]--></ol> <div class="mt-2">or, you can create a new project:</div> <div class="flex items-center">`);
+                      TextInput($$renderer4, {
+                        label: "Project Name",
+                        get value() {
+                          return newProjectName;
+                        },
+                        set value($$value) {
+                          newProjectName = $$value;
+                          $$settled = false;
+                        }
+                      });
+                      $$renderer4.push(`<!----> `);
+                      ActionButton($$renderer4, {
+                        action: async () => {
+                          try {
+                            await fetchEnsureSuccess(resolve("/api/deploy/cloudflare/projects"), {
+                              method: "POST",
+                              body: JSON.stringify({ project_name: newProjectName }),
+                              headers: { "Content-Type": "application/json" }
+                            });
+                          } catch (e) {
+                            createProjectError = String(e);
+                            return;
+                          }
+                          await fetch(resolve("/api/deploy/config"), {
+                            body: JSON.stringify({
+                              ...data.deploySettings,
+                              last_used: "CloudFlare",
+                              cloudflare_project_name: newProjectName
+                            }),
+                            headers: { "Content-Type": "application/json" },
+                            method: "PUT"
+                          });
+                          await invalidateAll();
+                        },
+                        children: ($$renderer5) => {
+                          $$renderer5.push(`<!---->Create`);
+                        }
+                      });
+                      $$renderer4.push(`<!----> `);
+                      if (createProjectError) {
+                        $$renderer4.push("<!--[0-->");
+                        $$renderer4.push(`<div class="ml-4 text-error-600-400">${escape_html(createProjectError)}</div>`);
+                      } else {
+                        $$renderer4.push("<!--[-1-->");
+                      }
+                      $$renderer4.push(`<!--]--></div>`);
+                    }
+                  );
+                  $$renderer4.push(`<!--]--></div>`);
+                } else {
+                  $$renderer4.push("<!--[-1-->");
+                  $$renderer4.push(`<div class="my-4 flex items-center gap-2"><div>`);
+                  Circle_check($$renderer4, { class: "fill-success-300-700" });
+                  $$renderer4.push(`<!----></div> <p>Using project ${escape_html(data.deploySettings.cloudflare_project_name)}!</p></div> `);
+                  ActionButton($$renderer4, {
+                    class: "preset-tonal-success",
+                    action: async () => {
+                      close();
+                    },
+                    children: ($$renderer5) => {
+                      $$renderer5.push(`<!---->Close`);
+                    }
+                  });
+                  $$renderer4.push(`<!---->`);
+                }
+                $$renderer4.push(`<!--]-->`);
+              }
+              $$renderer4.push(`<!--]-->`);
+            }
+          );
+          $$renderer4.push(`<!--]--></div>`);
+        };
+        Modal($$renderer3, {
+          headless: true,
+          open: runCloudflareOnboard,
+          title: "Cloudflare Setup",
+          onClose: () => {
+            runCloudflareOnboard = false;
+            newProjectName = "";
+          },
+          children: children2,
+          $$slots: { default: true }
+        });
+      }
+      $$renderer3.push(`<!----> `);
+      {
+        let children2 = function($$renderer4, close) {
+          $$renderer4.push(`<div class="min-w-xl p-4"><h4 class="mb-4 h4">Welcome to @phosart/devtool!</h4> <p>Choose your preference:</p> <form class="flex flex-col space-y-2"><label class="flex items-center space-x-2"><input class="radio" type="radio" checked=""${attr("checked", onboardSelection === "automatic", true)} name="experience" value="automatic"/> <div class="m-2 max-w-md cursor-pointer rounded-2xl border border-surface-600-400 p-2 hover:bg-surface-100-900"><div class="mb-2 text-xl font-extralight italic">Automatic Categories</div> <div>As you upload your work, you may:</div> <ol class="ml-4 list-disc text-primary-900-100"><li>Organize art by tags</li> <li>Organize art by characters featured</li> <li>Organize art by the creating artists</li></ol> <div>And we'll automatically take care of creating categories for all of these</div></div></label> <label class="flex items-center space-x-2"><input class="radio" type="radio"${attr("checked", onboardSelection === "manual", true)} name="experience" value="manual"/> <div class="m-2 max-w-md cursor-pointer rounded-2xl border border-surface-600-400 p-2 hover:bg-surface-100-900"><div class="mb-2 text-xl font-extralight italic">Multigallery</div> <div>All of the above, and:</div> <ol class="ml-4 list-disc text-primary-900-100"><li>You can further organize your art into your own Galleries</li> <li>The automatic categorization above will automatically work across all galleries</li></ol></div></label></form> <div class="flex justify-end">`);
+          ActionButton($$renderer4, {
+            class: "btn preset-tonal-primary",
+            action: async () => {
+              window.localStorage.setItem("onboarding-done", "true");
+              {
+                await fetch(resolve("/api/gallery/[...gallerypath]/save", { gallerypath: "main.gallery" }), {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({ pieces: [] })
+                });
+                await invalidateAll();
+              }
+              close();
+            },
+            children: ($$renderer5) => {
+              $$renderer5.push(`<!---->Continue`);
+            }
+          });
+          $$renderer4.push(`<!----></div></div>`);
+        };
+        Modal($$renderer3, {
+          headless: true,
+          open: isOnboarding,
+          title: "Welcome!",
+          children: children2,
+          $$slots: { default: true }
+        });
+      }
       $$renderer3.push(`<!---->`);
     }
     do {
@@ -1002,4 +1424,4 @@ function _layout($$renderer, $$props) {
 }
 
 export { _layout as default };
-//# sourceMappingURL=_layout.svelte-BLfVQZLo.js.map
+//# sourceMappingURL=_layout.svelte-BDbe1uM7.js.map