@wildwinter/app-shell 0.47.0 → 0.48.0

package/dist/index.cjs

@@ -464,7 +464,7 @@ function tagChips(holder, onChange) {
   wrap.append(input);
   return wrap;
 }
-function stageChips(holder, onChange) {
+function stageChips(holder, onChange, opts = {}) {
   const wrap = el("div", "shell-tags shell-stages");
   const input = el("input", "shell-tag-input");
   input.type = "text";
@@ -479,35 +479,79 @@ function stageChips(holder, onChange) {
     b.addEventListener("click", onClick);
     return b;
   };
+  const nameLabel = (chip2, v, i) => {
+    const label2 = el("span", "shell-tag-label", `${i + 1}. ${v}`);
+    label2.setAttribute("role", "button");
+    label2.tabIndex = 0;
+    label2.dataset["tip"] = `Rename ${v}`;
+    const edit = () => {
+      const field = el("input", "shell-tag-input shell-stage-rename");
+      field.type = "text";
+      field.value = v;
+      field.spellcheck = false;
+      field.setAttribute("aria-label", `Rename ${v}`);
+      let done = false;
+      const finish = (keep) => {
+        if (done) return;
+        done = true;
+        const to = field.value.trim();
+        const stages = holder.stages ?? [];
+        if (keep && to !== "" && to !== v && !stages.includes(to)) {
+          stages[stages.indexOf(v)] = to;
+          rebuild();
+          if (opts.onRename) opts.onRename(v, to);
+          else onChange?.();
+        } else {
+          rebuild();
+        }
+      };
+      field.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          finish(true);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          finish(false);
+        }
+      });
+      field.addEventListener("blur", () => finish(true));
+      label2.replaceWith(field);
+      chip2.classList.add("editing");
+      field.focus();
+      field.select();
+    };
+    label2.addEventListener("click", (e) => {
+      e.preventDefault();
+      edit();
+    });
+    label2.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        edit();
+      }
+    });
+    return label2;
+  };
+  const moved = () => {
+    rebuild();
+    onChange?.();
+    opts.onReorder?.();
+  };
   const rebuild = () => {
     for (const c of Array.from(wrap.children)) if (c !== input) c.remove();
     const stages = holder.stages ?? [];
     stages.forEach((v, i) => {
-      const chip2 = el("span", "shell-tag", `${i + 1}. ${v}`);
+      const chip2 = el("span", "shell-tag");
       chip2.dataset["stage"] = v;
       chip2.append(
-        control(
-          "back",
-          `Move ${v} earlier`,
-          i === 0,
-          () => {
-            if (moveItem(stages, i, -1)) {
-              rebuild();
-              onChange?.();
-            }
-          }
-        ),
-        control(
-          "forward",
-          `Move ${v} later`,
-          i === stages.length - 1,
-          () => {
-            if (moveItem(stages, i, 1)) {
-              rebuild();
-              onChange?.();
-            }
-          }
-        )
+        nameLabel(chip2, v, i),
+        control("back", `Move ${v} earlier`, i === 0, () => {
+          if (moveItem(stages, i, -1)) moved();
+        }),
+        control("forward", `Move ${v} later`, i === stages.length - 1, () => {
+          if (moveItem(stages, i, 1)) moved();
+        })
       );
       const x = el("button", "shell-tag-x", iconNode("close", CHIP_ICON));
       x.type = "button";
@@ -3193,7 +3237,21 @@ function mountPropertyList(host, decls, opts = {}) {
     }, false, true);
     const details = keep(opts.extraDetails?.(p, i));
     if (p.type === "enum" || p.type === "flags") details.push(labelled("Values", tagChips(p, refreshDefault)));
-    if (p.type === "quality") details.push(labelled("Stages (in order)", stageChips(p, refreshDefault)));
+    if (p.type === "quality") {
+      const note = el("p", "shell-stage-note");
+      const stages = stageChips(p, refreshDefault, {
+        onRename: (from, to) => {
+          if (p.default === from) p.default = to;
+          const fresh = defaultControl(p, changed, opts);
+          def.replaceWith(fresh);
+          def = fresh;
+          if (opts.onStageRename) opts.onStageRename(p, from, to);
+          else changed();
+        },
+        onReorder: () => opts.onStageReorder?.(p, note)
+      });
+      details.push(labelled("Stages (in order)", stages), note);
+    }
     if (opts.purpose !== false) {
       const purpose = el("input", "field set-purpose");
       purpose.type = "text";