codebay 0.5.0 → 0.7.0

package/.mochi/svelte-compile/{App-9qjy14bc.server.js → App-6rcf0d74.server.js}

@@ -19,7 +19,7 @@ import {
   Button,
   Toaster,
   dist_default
-} from "./chunk-dfe2km6a.js";
+} from "./chunk-q8rbesaw.js";
 import {
   HydratableBoundary,
   Icon,
@@ -31,16 +31,16 @@ import"./chunk-we0ggtws.js";
 
 // src/pages/App.svelte
 import"svelte/internal/flags/async";
-import * as $23 from "svelte/internal/server";
+import * as $24 from "svelte/internal/server";
 
 // src/components/AppShell.svelte
 import"svelte/internal/flags/async";
-import * as $22 from "svelte/internal/server";
+import * as $23 from "svelte/internal/server";
 import { SvelteSet } from "svelte/reactivity";
 
 // src/components/DashboardView.svelte
 import"svelte/internal/flags/async";
-import * as $19 from "svelte/internal/server";
+import * as $20 from "svelte/internal/server";
 
 // src/components/FolderBrowser.svelte
 import"svelte/internal/flags/async";
@@ -378,13 +378,27 @@ function InstanceCard($$renderer, $$props) {
       instance,
       editing,
       editingName = undefined,
+      pending = null,
       onact,
       onstartrename,
       oncommitrename,
       oncancelrename
     } = $$props;
     const canRebuild = $10.derived(() => instance.status === "running" || instance.status === "stopped" || instance.status === "error" && !!instance.container_id);
-    $$renderer2.push(`<li class="card panel svelte-13338y7"><div class="card-head svelte-13338y7">`);
+    const BUSY_LABEL = {
+      start: "Starting\u2026",
+      stop: "Stopping\u2026",
+      delete: "Deleting\u2026",
+      rebuild: "Rebuilding\u2026"
+    };
+    $$renderer2.push(`<li${$10.attr_class("card panel svelte-13338y7", undefined, { busy: !!pending })}${$10.attr("aria-busy", !!pending || undefined)}>`);
+    if (pending) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="busy-overlay svelte-13338y7" aria-live="polite"><span class="busy-label svelte-13338y7">${$10.escape(BUSY_LABEL[pending])}</span></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div class="card-head svelte-13338y7">`);
     Avatar($$renderer2, { id: instance.id, name: instance.name, interactive: true });
     $$renderer2.push(`<!----> `);
     if (editing) {
@@ -518,7 +532,7 @@ function InstanceCard($$renderer, $$props) {
 
 // src/components/TopBar.svelte
 import"svelte/internal/flags/async";
-import * as $18 from "svelte/internal/server";
+import * as $19 from "svelte/internal/server";
 
 // node_modules/@lucide/svelte/dist/icons/component.svelte
 import"svelte/internal/flags/async";
@@ -591,13 +605,34 @@ function Brand($$renderer, $$props) {
   });
 }
 
+// src/components/InstanceFilter.svelte
+import"svelte/internal/flags/async";
+import * as $14 from "svelte/internal/server";
+function InstanceFilter($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { value, onchange } = $$props;
+    const options = [
+      { value: "all", label: "All" },
+      { value: "active", label: "Active" },
+      { value: "stopped", label: "Stopped" }
+    ];
+    $$renderer2.push(`<div class="picker svelte-12yor8r" role="radiogroup" aria-label="Filter instances"><!--[-->`);
+    const each_array = $14.ensure_array_like(options);
+    for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+      let opt = each_array[$$index];
+      $$renderer2.push(`<button type="button"${$14.attr_class("segment svelte-12yor8r", undefined, { active: value === opt.value })} role="radio"${$14.attr("aria-checked", value === opt.value)}>${$14.escape(opt.label)}</button>`);
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+
 // src/components/SettingsCog.svelte
 import"svelte/internal/flags/async";
-import * as $15 from "svelte/internal/server";
+import * as $16 from "svelte/internal/server";
 
 // node_modules/@lucide/svelte/dist/icons/settings.svelte
 import"svelte/internal/flags/async";
-import * as $14 from "svelte/internal/server";
+import * as $15 from "svelte/internal/server";
 function Settings($$renderer, $$props) {
   let { $$slots, $$events, ...props } = $$props;
   const iconNode = [
@@ -609,12 +644,12 @@ function Settings($$renderer, $$props) {
     ],
     ["circle", { cx: "12", cy: "12", r: "3" }]
   ];
-  Icon($$renderer, $14.spread_props([{ name: "settings" }, props, { iconNode }]));
+  Icon($$renderer, $15.spread_props([{ name: "settings" }, props, { iconNode }]));
 }
 // src/components/SettingsCog.svelte
 function SettingsCog($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    $$renderer2.push(`<a class="cog svelte-1e745g8"${$15.attr("href", withPopupMarker("/settings"))} target="_blank" rel="noopener noreferrer" aria-label="Settings" title="Settings">`);
+    $$renderer2.push(`<a class="cog svelte-1e745g8"${$16.attr("href", withPopupMarker("/settings"))} target="_blank" rel="noopener noreferrer" aria-label="Settings" title="Settings">`);
     Settings($$renderer2, { size: 16 });
     $$renderer2.push(`<!----></a>`);
   });
@@ -622,11 +657,11 @@ function SettingsCog($$renderer, $$props) {
 
 // src/components/CredMenu.svelte
 import"svelte/internal/flags/async";
-import * as $17 from "svelte/internal/server";
+import * as $18 from "svelte/internal/server";
 
 // node_modules/@lucide/svelte/dist/icons/link.svelte
 import"svelte/internal/flags/async";
-import * as $16 from "svelte/internal/server";
+import * as $17 from "svelte/internal/server";
 function Link($$renderer, $$props) {
   let { $$slots, $$events, ...props } = $$props;
   const iconNode = [
@@ -643,17 +678,17 @@ function Link($$renderer, $$props) {
       }
     ]
   ];
-  Icon($$renderer, $16.spread_props([{ name: "link" }, props, { iconNode }]));
+  Icon($$renderer, $17.spread_props([{ name: "link" }, props, { iconNode }]));
 }
 // src/components/CredMenu.svelte
 function CredMenu($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let { auth } = $$props;
     let credOpen = false;
-    const authedCount = $17.derived(() => auth.filter((a) => a.available).length);
-    const credState = $17.derived(() => authedCount() === auth.length ? "ok" : authedCount() === 0 ? "error" : "warn");
+    const authedCount = $18.derived(() => auth.filter((a) => a.available).length);
+    const credState = $18.derived(() => authedCount() === auth.length ? "ok" : authedCount() === 0 ? "error" : "warn");
     const credIcon = { ok: Link, warn: Triangle_alert, error: X };
-    const CredIcon = $17.derived(() => credIcon[credState()]);
+    const CredIcon = $18.derived(() => credIcon[credState()]);
     function explainProvider(provider) {
       if (provider.available) {
         dist_default.success(`${provider.label} credentials come from ${provider.source}.`);
@@ -662,7 +697,7 @@ function CredMenu($$renderer, $$props) {
         dist_default.error(`No ${provider.label} credentials found${hint}.`);
       }
     }
-    $$renderer2.push(`<div class="cred-menu svelte-vongf9"><button${$17.attr_class(`cred ${credState()}`, "svelte-vongf9")}${$17.attr("aria-expanded", credOpen)} aria-haspopup="menu" aria-label="Credentials" title="Credentials">`);
+    $$renderer2.push(`<div class="cred-menu svelte-vongf9"><button${$18.attr_class(`cred ${credState()}`, "svelte-vongf9")}${$18.attr("aria-expanded", credOpen)} aria-haspopup="menu" aria-label="Credentials" title="Credentials">`);
     if (CredIcon()) {
       $$renderer2.push("<!--[-->");
       CredIcon()($$renderer2, { size: 16 });
@@ -675,10 +710,10 @@ function CredMenu($$renderer, $$props) {
     if (credOpen) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<div class="cred-dropdown panel svelte-vongf9" role="menu"><!--[-->`);
-      const each_array = $17.ensure_array_like(auth);
+      const each_array = $18.ensure_array_like(auth);
       for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
         let provider = each_array[$$index];
-        $$renderer2.push(`<button type="button" class="cred-row svelte-vongf9" role="menuitem"${$17.attr("title", provider.available ? `Credentials from ${provider.source}, copied into each new instance.` : `No credentials found on this computer${provider.hint ? ` \u2014 ${provider.hint}` : ""}.`)}><span${$17.attr_class(`dot ${provider.available ? "on" : "off"}`, "svelte-vongf9")}></span> <span class="cred-label">${$17.escape(provider.label)}</span> <span class="cred-state svelte-vongf9">${$17.escape(provider.available ? "Authorized" : "Not found")}</span></button>`);
+        $$renderer2.push(`<button type="button" class="cred-row svelte-vongf9" role="menuitem"${$18.attr("title", provider.available ? `Credentials from ${provider.source}, copied into each new instance.` : `No credentials found on this computer${provider.hint ? ` \u2014 ${provider.hint}` : ""}.`)}><span${$18.attr_class(`dot ${provider.available ? "on" : "off"}`, "svelte-vongf9")}></span> <span class="cred-label">${$18.escape(provider.label)}</span> <span class="cred-state svelte-vongf9">${$18.escape(provider.available ? "Authorized" : "Not found")}</span></button>`);
       }
       $$renderer2.push(`<!--]--></div>`);
     } else {
@@ -696,6 +731,8 @@ function TopBar($$renderer, $$props) {
     canDelete = false,
     ready = true,
     creating = false,
+    filter,
+    onFilter,
     onNew,
     onDeleteAll
   } = $$props;
@@ -718,6 +755,13 @@ function TopBar($$renderer, $$props) {
     $$renderer.push("<!--[-1-->");
   }
   $$renderer.push(`<!--]--> `);
+  if (filter && onFilter) {
+    $$renderer.push("<!--[0-->");
+    InstanceFilter($$renderer, { value: filter, onchange: onFilter });
+  } else {
+    $$renderer.push("<!--[-1-->");
+  }
+  $$renderer.push(`<!--]--> `);
   SettingsCog($$renderer, {});
   $$renderer.push(`<!----> `);
   CredMenu($$renderer, { auth });
@@ -739,7 +783,7 @@ function TopBar($$renderer, $$props) {
     onclick: onNew,
     disabled: !ready || creating,
     children: ($$renderer2) => {
-      $$renderer2.push(`<!---->${$18.escape(creating ? "Creating\u2026" : "New instance")}`);
+      $$renderer2.push(`<!---->${$19.escape(creating ? "Creating\u2026" : "New instance")}`);
     },
     $$slots: { default: true }
   });
@@ -751,11 +795,24 @@ function DashboardView($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let { preflight, instances, loaded, pet } = $$props;
     let browserOpen = false;
+    let filter = "all";
     let creating = false;
     let actionError = null;
     let editingId = null;
     let editingName = "";
-    const ready = $19.derived(() => preflight.docker && preflight.cli);
+    let pending = {};
+    const ready = $20.derived(() => preflight.docker && preflight.cli);
+    const visible = $20.derived(() => instances.filter((i) => {
+      if (filter === "active")
+        return i.status === "running" || i.status === "creating";
+      if (filter === "stopped")
+        return i.status === "stopped" || i.status === "error";
+      return true;
+    }));
+    function clearPending(id) {
+      const { [id]: _, ...rest } = pending;
+      pending = rest;
+    }
     async function createFrom(sourcePath, opts) {
       browserOpen = false;
       creating = true;
@@ -774,10 +831,14 @@ function DashboardView($$renderer, $$props) {
         return;
       if (action === "rebuild" && !confirm("Recreate this container and re-run setup? The workspace is kept."))
         return;
+      const since = instances.find((i) => i.id === id)?.status;
+      if (since)
+        pending = { ...pending, [id]: { action, since } };
       try {
         await apiPost(`/api/instances/${id}/${action}`, undefined, `Failed to ${action}`);
       } catch (err) {
         actionError = err.message;
+        clearPending(id);
       }
     }
     function startRename(instance) {
@@ -822,6 +883,8 @@ function DashboardView($$renderer, $$props) {
         canDelete: instances.length > 0,
         ready: ready(),
         creating,
+        filter,
+        onFilter: (v) => filter = v,
         onNew: () => browserOpen = true,
         onDeleteAll: deleteAll
       });
@@ -849,7 +912,7 @@ function DashboardView($$renderer, $$props) {
       $$renderer3.push(`<!--]--> `);
       if (actionError) {
         $$renderer3.push("<!--[0-->");
-        $$renderer3.push(`<div class="banner error svelte-146pixd"><strong>Error.</strong> <span>${$19.escape(actionError)}</span></div>`);
+        $$renderer3.push(`<div class="banner error svelte-146pixd"><strong>Error.</strong> <span>${$20.escape(actionError)}</span></div>`);
       } else {
         $$renderer3.push("<!--[-1-->");
       }
@@ -871,15 +934,19 @@ function DashboardView($$renderer, $$props) {
           $$slots: { default: true }
         });
         $$renderer3.push(`<!----></div>`);
+      } else if (visible().length === 0) {
+        $$renderer3.push("<!--[2-->");
+        $$renderer3.push(`<div class="empty svelte-146pixd"><p class="empty-sub svelte-146pixd">No ${$20.escape(filter)} instances.</p></div>`);
       } else {
         $$renderer3.push("<!--[-1-->");
         $$renderer3.push(`<ul class="grid svelte-146pixd"><!--[-->`);
-        const each_array = $19.ensure_array_like(instances);
+        const each_array = $20.ensure_array_like(visible());
         for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
           let instance = each_array[$$index];
           InstanceCard($$renderer3, {
             instance,
             editing: editingId === instance.id,
+            pending: pending[instance.id]?.action ?? null,
             onact: (action) => act(instance.id, action),
             onstartrename: () => startRename(instance),
             oncommitrename: () => commitRename(instance.id),
@@ -915,7 +982,7 @@ function DashboardView($$renderer, $$props) {
 
 // src/components/IdeBar.svelte
 import"svelte/internal/flags/async";
-import * as $20 from "svelte/internal/server";
+import * as $21 from "svelte/internal/server";
 function IdeBar($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
@@ -934,10 +1001,10 @@ function IdeBar($$renderer, $$props) {
         if (running.length > 0) {
           $$renderer3.push("<!--[0-->");
           $$renderer3.push(`<nav class="tabs svelte-r39acv"><!--[-->`);
-          const each_array = $20.ensure_array_like(running);
+          const each_array = $21.ensure_array_like(running);
           for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
             let inst = each_array[$$index];
-            $$renderer3.push(`<div${$20.attr_class("tab svelte-r39acv", undefined, {
+            $$renderer3.push(`<div${$21.attr_class("tab svelte-r39acv", undefined, {
               active: inst.id === active,
               "attn-done": inst.id !== active && attention[inst.id] === "done",
               "attn-waiting": inst.id !== active && attention[inst.id] === "waiting"
@@ -946,12 +1013,12 @@ function IdeBar($$renderer, $$props) {
               $$renderer3.push("<!--[0-->");
               $$renderer3.push(`<div class="tab-label editing svelte-r39acv">`);
               Avatar($$renderer3, { id: inst.id, name: inst.name, scale: 4 });
-              $$renderer3.push(`<!----> <input class="tab-name-edit svelte-r39acv"${$20.attr("value", editingName)} autofocus=""/></div>`);
+              $$renderer3.push(`<!----> <input class="tab-name-edit svelte-r39acv"${$21.attr("value", editingName)} autofocus=""/></div>`);
             } else {
               $$renderer3.push("<!--[-1-->");
-              $$renderer3.push(`<button type="button" class="tab-label svelte-r39acv"${$20.attr("title", inst.name)}>`);
+              $$renderer3.push(`<button type="button" class="tab-label svelte-r39acv"${$21.attr("title", inst.name)}>`);
               Avatar($$renderer3, { id: inst.id, name: inst.name, scale: 4 });
-              $$renderer3.push(`<!----> <span class="tab-name svelte-r39acv">${$20.escape(inst.name)}</span></button>`);
+              $$renderer3.push(`<!----> <span class="tab-name svelte-r39acv">${$21.escape(inst.name)}</span></button>`);
             }
             $$renderer3.push(`<!--]--></div>`);
           }
@@ -959,19 +1026,19 @@ function IdeBar($$renderer, $$props) {
         } else {
           $$renderer3.push("<!--[-1-->");
         }
-        $$renderer3.push(`<!--]--> <a class="cog svelte-r39acv"${$20.attr("href", withPopupMarker("/settings"))} target="_blank" rel="noopener noreferrer" title="Settings" aria-label="Settings">`);
+        $$renderer3.push(`<!--]--> <a class="cog svelte-r39acv"${$21.attr("href", withPopupMarker("/settings"))} target="_blank" rel="noopener noreferrer" title="Settings" aria-label="Settings">`);
         Settings($$renderer3, { size: 18 });
         $$renderer3.push(`<!----></a>`);
       },
       $$slots: { default: true }
     });
-    $20.bind_props($$props, { editingName });
+    $21.bind_props($$props, { editingName });
   });
 }
 
 // src/components/IdeLoader.svelte
 import"svelte/internal/flags/async";
-import * as $21 from "svelte/internal/server";
+import * as $22 from "svelte/internal/server";
 function IdeLoader($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let { speed = 1, stalledAfterMs, onoverride } = $$props;
@@ -980,14 +1047,14 @@ function IdeLoader($$renderer, $$props) {
     const COLS = 22;
     const BASE_TICK_MS = 140;
     const FLIPS_PER_TICK = 7;
-    const tickMs = $21.derived(() => Math.max(20, BASE_TICK_MS / speed));
+    const tickMs = $22.derived(() => Math.max(20, BASE_TICK_MS / speed));
     const seed = () => Array.from({ length: ROWS }, () => Array.from({ length: COLS }, () => Math.random() < 0.5 ? 0 : 1));
     let grid = seed();
     $$renderer2.push(`<div class="loader svelte-w5e143"><div class="grid svelte-w5e143" aria-hidden="true"><!--[-->`);
-    const each_array = $21.ensure_array_like(grid);
+    const each_array = $22.ensure_array_like(grid);
     for (let i = 0, $$length = each_array.length;i < $$length; i++) {
       let row = each_array[i];
-      $$renderer2.push(`<div class="row svelte-w5e143">${$21.escape(row.join(""))}</div>`);
+      $$renderer2.push(`<div class="row svelte-w5e143">${$22.escape(row.join(""))}</div>`);
     }
     $$renderer2.push(`<!--]--></div> <div class="label svelte-w5e143">Loading editor<span class="dot svelte-w5e143">.</span><span class="dot svelte-w5e143">.</span><span class="dot svelte-w5e143">.</span></div> `);
     if (stalled) {
@@ -1022,7 +1089,7 @@ function AppShell($$renderer, $$props) {
     let livePreflight = preflight;
     let livePet = pet;
     let loaded = snapshot.length > 0;
-    const running = $22.derived(() => instances.filter((i) => i.status === "running"));
+    const running = $23.derived(() => instances.filter((i) => i.status === "running"));
     let attention = Object.fromEntries(snapshot.map((i) => [i.id, i.attention]));
     let editingId = null;
     let editingName = "";
@@ -1049,9 +1116,9 @@ function AppShell($$renderer, $$props) {
       }
     }
     let path = initialPath;
-    const onIde = $22.derived(() => path.startsWith("/ide"));
-    const requestedId = $22.derived(() => path.startsWith("/ide/") ? path.slice("/ide/".length) : "");
-    const active = $22.derived(() => onIde() ? running().some((i) => i.id === requestedId()) ? requestedId() : running()[0]?.id ?? "" : "");
+    const onIde = $23.derived(() => path.startsWith("/ide"));
+    const requestedId = $23.derived(() => path.startsWith("/ide/") ? path.slice("/ide/".length) : "");
+    const active = $23.derived(() => onIde() ? running().some((i) => i.id === requestedId()) ? requestedId() : running()[0]?.id ?? "" : "");
     function navigate(to) {
       if (to === path)
         return;
@@ -1067,7 +1134,7 @@ function AppShell($$renderer, $$props) {
     let $$settled = true;
     let $$inner_renderer;
     function $$render_inner($$renderer3) {
-      $$renderer3.push(`<div${$22.attr_class("app svelte-1duc7gd", undefined, { ide: onIde() })}>`);
+      $$renderer3.push(`<div${$23.attr_class("app svelte-1duc7gd", undefined, { ide: onIde() })}>`);
       if (onIde()) {
         $$renderer3.push("<!--[0-->");
         IdeBar($$renderer3, {
@@ -1091,16 +1158,16 @@ function AppShell($$renderer, $$props) {
         $$renderer3.push("<!--[-1-->");
         DashboardView($$renderer3, { preflight: livePreflight, instances, loaded, pet: livePet });
       }
-      $$renderer3.push(`<!--]--> <div${$22.attr_class("panes svelte-1duc7gd", undefined, { hidden: !onIde() })}><!--[-->`);
-      const each_array = $22.ensure_array_like(running());
+      $$renderer3.push(`<!--]--> <div${$23.attr_class("panes svelte-1duc7gd", undefined, { hidden: !onIde() })}><!--[-->`);
+      const each_array = $23.ensure_array_like(running());
       for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
         let inst = each_array[$$index];
         if (visited.has(inst.id)) {
           $$renderer3.push("<!--[0-->");
-          $$renderer3.push(`<div${$22.attr_class("pane svelte-1duc7gd", undefined, { active: inst.id === active() })}>`);
+          $$renderer3.push(`<div${$23.attr_class("pane svelte-1duc7gd", undefined, { active: inst.id === active() })}>`);
           if (mountable(inst.id)) {
             $$renderer3.push("<!--[0-->");
-            $$renderer3.push(`<iframe${$22.attr("src", ideUrl(inst))}${$22.attr("title", inst.name)} class="svelte-1duc7gd" onload="this.__e=event"></iframe>`);
+            $$renderer3.push(`<iframe${$23.attr("src", ideUrl(inst))}${$23.attr("title", inst.name)} class="svelte-1duc7gd" onload="this.__e=event"></iframe>`);
           } else {
             $$renderer3.push("<!--[-1-->");
           }
@@ -1153,7 +1220,7 @@ function App($$renderer, $$props) {
     let { preflight, initialPath, snapshot, pet } = $$props;
     if (true) {
       let failed = function($$renderer3, error) {
-        $$renderer3.push(`<mochi-island-failure data-component="AppShell"${$23.attr("data-message", error.message)}></mochi-island-failure>`);
+        $$renderer3.push(`<mochi-island-failure data-component="AppShell"${$24.attr("data-message", error.message)}></mochi-island-failure>`);
       };
       $$renderer2.push("<!--[0-->");
       $$renderer2.boundary({ failed }, ($$renderer3) => {
@@ -1161,7 +1228,7 @@ function App($$renderer, $$props) {
         {
           HydratableBoundary($$renderer3, {
             children: ($$renderer4) => {
-              $$renderer4.push(`<mochi-hydratable-island component-name="AppShell_2rtnxn6pgp2rh" component-url="__MOCHI_COMPONENT_URL__AppShell_2rtnxn6pgp2rh__"${$23.attr("props-ref", emitIslandProps({ preflight, initialPath, snapshot, pet }))}>`);
+              $$renderer4.push(`<mochi-hydratable-island component-name="AppShell_2rtnxn6pgp2rh" component-url="__MOCHI_COMPONENT_URL__AppShell_2rtnxn6pgp2rh__"${$24.attr("props-ref", emitIslandProps({ preflight, initialPath, snapshot, pet }))}>`);
               $$renderer4.push(`<!--[-->`);
               {
                 AppShell($$renderer4, { preflight, initialPath, snapshot, pet });

package/.mochi/svelte-compile/{Avatars-sq8mjn6k.server.js → Avatars-pzyz0tv3.server.js}

@@ -4,13 +4,14 @@ import {
   Avatar,
   Button,
   COLS,
+  GRAY,
   OFF,
   ON,
   ROWS,
   Toaster,
   avatars,
   dist_default
-} from "./chunk-dfe2km6a.js";
+} from "./chunk-q8rbesaw.js";
 import {
   HydratableBoundary,
   Icon,
@@ -20,11 +21,11 @@ import"./chunk-we0ggtws.js";
 
 // src/pages/Avatars.svelte
 import"svelte/internal/flags/async";
-import * as $7 from "svelte/internal/server";
+import * as $8 from "svelte/internal/server";
 
 // src/components/AvatarsView.svelte
 import"svelte/internal/flags/async";
-import * as $6 from "svelte/internal/server";
+import * as $7 from "svelte/internal/server";
 
 // src/components/AvatarEditor.svelte
 import"svelte/internal/flags/async";
@@ -91,6 +92,20 @@ function External_link($$renderer, $$props) {
   ];
   Icon($$renderer, $4.spread_props([{ name: "external-link" }, props, { iconNode }]));
 }
+// src/avatars/editor.ts
+var MODES = [
+  { id: "black", label: "Black" },
+  { id: "gray", label: "Gray" },
+  { id: "cycle", label: "Cycle" }
+];
+function nextValue(mode, current) {
+  if (mode === "black")
+    return current === ON ? OFF : ON;
+  if (mode === "gray")
+    return current === GRAY ? OFF : GRAY;
+  return current === OFF ? GRAY : current === GRAY ? ON : OFF;
+}
+
 // src/avatars/serialize.ts
 var REPO_URL = "https://github.com/khromov/codebay";
 function normalizeName(raw) {
@@ -101,7 +116,8 @@ function cellsToPixels(cells) {
   for (let r = 0;r < ROWS; r++) {
     let row = "";
     for (let c = 0;c < COLS; c++) {
-      row += cells[r * COLS + c] === ON ? "#" : ".";
+      const cell = cells[r * COLS + c];
+      row += cell === ON ? "#" : cell === GRAY ? "+" : ".";
     }
     rows.push(row);
   }
@@ -137,7 +153,7 @@ function toIssueUrl(art) {
     toModuleSource(art).trimEnd(),
     "```",
     "",
-    "_It should satisfy `src/avatars/avatars.test.ts`: exactly 8\xD78, only `#`/`.` pixels, unique name._"
+    "_It should satisfy `src/avatars/avatars.test.ts`: exactly 8\xD78, only `#`/`+`/`.` pixels, unique name._"
   ].join(`
 `);
   const params = new URLSearchParams({ title, body });
@@ -152,7 +168,18 @@ function AvatarEditor($$renderer, $$props) {
     let avatarName = "";
     const slug = $5.derived(() => normalizeName(avatarName));
     const art = $5.derived(() => ({ name: slug() || "my-avatar", pixels: cellsToPixels(cells) }));
-    const canContribute = $5.derived(() => slug().length > 0 && cells.some((c) => c === ON));
+    const canContribute = $5.derived(() => slug().length > 0 && cells.some((c) => c !== OFF));
+    let mode = "cycle";
+    let modeButtons = [];
+    function onModeKeydown(e, i) {
+      const dir = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+      if (dir === 0)
+        return;
+      e.preventDefault();
+      const next = (i + dir + MODES.length) % MODES.length;
+      mode = MODES[next].id;
+      modeButtons[next]?.focus();
+    }
     let gridEl = null;
     let painting = false;
     let paintValue = ON;
@@ -173,7 +200,7 @@ function AvatarEditor($$renderer, $$props) {
         return;
       e.currentTarget.setPointerCapture?.(e.pointerId);
       painting = true;
-      paintValue = cells[i] === ON ? OFF : ON;
+      paintValue = nextValue(mode, cells[i]);
       cells[i] = paintValue;
     }
     function onpointermove(e) {
@@ -190,7 +217,7 @@ function AvatarEditor($$renderer, $$props) {
       cells = Array(ROWS * COLS).fill(OFF);
     }
     function invert() {
-      cells = cells.map((c) => c === ON ? OFF : ON);
+      cells = cells.map((c) => c === ON ? OFF : c === OFF ? ON : c);
     }
     async function copyModule() {
       try {
@@ -210,13 +237,19 @@ function AvatarEditor($$renderer, $$props) {
     const each_array_1 = $5.ensure_array_like(cells);
     for (let i = 0, $$length = each_array_1.length;i < $$length; i++) {
       let cell = each_array_1[i];
-      $$renderer2.push(`<span${$5.attr_class("cell svelte-qu6vp4", undefined, { on: cell === ON })}></span>`);
+      $$renderer2.push(`<span${$5.attr_class("cell svelte-qu6vp4", undefined, { on: cell === ON, gray: cell === GRAY })}></span>`);
     }
     $$renderer2.push(`<!--]--></div></div> <div class="side svelte-qu6vp4"><div class="preview"><div class="preview-label svelte-qu6vp4">Preview</div> <div class="preview-row svelte-qu6vp4">`);
     Avatar($$renderer2, { art: art(), name: art().name, scale: 6 });
     $$renderer2.push(`<!----> `);
     Avatar($$renderer2, { art: art(), name: art().name, scale: 3 });
-    $$renderer2.push(`<!----></div></div> <label class="name-field svelte-qu6vp4"><span class="preview-label svelte-qu6vp4">Name</span> <input type="text"${$5.attr("value", avatarName)}${$5.attr("placeholder", namePlaceholder)} spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" maxlength="24" class="svelte-qu6vp4"/></label> <div class="tools svelte-qu6vp4">`);
+    $$renderer2.push(`<!----></div></div> <label class="name-field svelte-qu6vp4"><span class="preview-label svelte-qu6vp4">Name</span> <input type="text"${$5.attr("value", avatarName)}${$5.attr("placeholder", namePlaceholder)} spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" maxlength="24" class="svelte-qu6vp4"/></label> <div class="mode-field svelte-qu6vp4"><span class="preview-label svelte-qu6vp4">Mode</span> <div class="modes svelte-qu6vp4" role="radiogroup" aria-label="Drawing mode"><!--[-->`);
+    const each_array_2 = $5.ensure_array_like(MODES);
+    for (let i = 0, $$length = each_array_2.length;i < $$length; i++) {
+      let m = each_array_2[i];
+      $$renderer2.push(`<button type="button"${$5.attr_class("mode svelte-qu6vp4", undefined, { active: mode === m.id })} role="radio"${$5.attr("aria-checked", mode === m.id)}${$5.attr("tabindex", mode === m.id ? 0 : -1)}>${$5.escape(m.label)}</button>`);
+    }
+    $$renderer2.push(`<!--]--></div></div> <div class="tools svelte-qu6vp4">`);
     Button($$renderer2, {
       size: "sm",
       icon: Eraser,
@@ -265,6 +298,24 @@ function AvatarEditor($$renderer, $$props) {
   });
 }
 
+// node_modules/@lucide/svelte/dist/icons/bot.svelte
+import"svelte/internal/flags/async";
+import * as $6 from "svelte/internal/server";
+function Bot($$renderer, $$props) {
+  let { $$slots, $$events, ...props } = $$props;
+  const iconNode = [
+    ["path", { d: "M12 8V4H8" }],
+    [
+      "rect",
+      { width: "16", height: "12", x: "4", y: "8", rx: "2" }
+    ],
+    ["path", { d: "M2 14h2" }],
+    ["path", { d: "M20 14h2" }],
+    ["path", { d: "M15 13v2" }],
+    ["path", { d: "M9 13v2" }]
+  ];
+  Icon($$renderer, $6.spread_props([{ name: "bot" }, props, { iconNode }]));
+}
 // src/components/AvatarsView.svelte
 function AvatarsView($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
@@ -278,13 +329,22 @@ function AvatarsView($$renderer, $$props) {
     });
     $$renderer2.push(`<!----> <main class="content svelte-fkq7sr">`);
     AvatarEditor($$renderer2, { namePlaceholder });
-    $$renderer2.push(`<!----> <section class="catalog svelte-fkq7sr"><header class="svelte-fkq7sr"><h2 class="svelte-fkq7sr">The set</h2> <p class="svelte-fkq7sr">${$6.escape(avatars.length)} hand-crafted 8\xD78 sprites</p></header> <ul class="svelte-fkq7sr"><!--[-->`);
-    const each_array = $6.ensure_array_like(avatars);
+    $$renderer2.push(`<!----> <section class="catalog svelte-fkq7sr"><header class="svelte-fkq7sr"><h2 class="svelte-fkq7sr">The set</h2> <p class="svelte-fkq7sr">${$7.escape(avatars.length)} hand-crafted 8\xD78 sprites</p></header> <ul class="svelte-fkq7sr"><!--[-->`);
+    const each_array = $7.ensure_array_like(avatars);
     for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
       let art = each_array[$$index];
       $$renderer2.push(`<li class="svelte-fkq7sr">`);
       Avatar($$renderer2, { art, name: art.name, scale: 8, interactive: true });
-      $$renderer2.push(`<!----> <span class="label svelte-fkq7sr">${$6.escape(art.name)}</span></li>`);
+      $$renderer2.push(`<!----> <span class="label svelte-fkq7sr">`);
+      if (art.robot) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="robot-mark svelte-fkq7sr" title="AI-generated">`);
+        Bot($$renderer2, { size: 11 });
+        $$renderer2.push(`<!----></span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> ${$7.escape(art.name)}</span></li>`);
     }
     $$renderer2.push(`<!--]--></ul></section></main></div> `);
     Toaster($$renderer2, {
@@ -302,7 +362,7 @@ function Avatars($$renderer, $$props) {
     let { namePlaceholder } = $$props;
     if (true) {
       let failed = function($$renderer3, error) {
-        $$renderer3.push(`<mochi-island-failure data-component="AvatarsView"${$7.attr("data-message", error.message)}></mochi-island-failure>`);
+        $$renderer3.push(`<mochi-island-failure data-component="AvatarsView"${$8.attr("data-message", error.message)}></mochi-island-failure>`);
       };
       $$renderer2.push("<!--[0-->");
       $$renderer2.boundary({ failed }, ($$renderer3) => {
@@ -310,7 +370,7 @@ function Avatars($$renderer, $$props) {
         {
           HydratableBoundary($$renderer3, {
             children: ($$renderer4) => {
-              $$renderer4.push(`<mochi-hydratable-island component-name="AvatarsView_257s9yq1wwr4f" component-url="__MOCHI_COMPONENT_URL__AvatarsView_257s9yq1wwr4f__"${$7.attr("props-ref", emitIslandProps({ namePlaceholder }))}>`);
+              $$renderer4.push(`<mochi-hydratable-island component-name="AvatarsView_257s9yq1wwr4f" component-url="__MOCHI_COMPONENT_URL__AvatarsView_257s9yq1wwr4f__"${$8.attr("props-ref", emitIslandProps({ namePlaceholder }))}>`);
               $$renderer4.push(`<!--[-->`);
               {
                 AvatarsView($$renderer4, { namePlaceholder });