@jxsuite/studio 4.0.0 → 5.0.0

package/dist/chunks/studio-cpvb2ed1.js

@@ -0,0 +1,1171 @@
+import {
+  html3
+} from "./studio-1k325pwf.js";
+import {
+  normalizeProjectPath,
+  showModal,
+  close2
+} from "./studio-5jy81t3s.js";
+import {
+  syncDeployChecklist
+} from "./studio-tb3ev01j.js";
+import {
+  effectScope,
+  effect,
+  reactive,
+  now,
+  notify2
+} from "./studio-p1dw8wfw.js";
+import {
+  setBottomTab
+} from "./studio-25hkdrkw.js";
+import {
+  REGION_ATTR,
+  overlayRegion,
+  registerSurface,
+  mountSurface,
+  whenReady,
+  layerHost2
+} from "./studio-erdatzvp.js";
+import {
+  registerPanel
+} from "./studio-26d7myd1.js";
+import {
+  peekUsages2,
+  loadUsages2,
+  usageHeadline2
+} from "./studio-81390n6f.js";
+// src/surfaces/panel-activity.json
+var panel_activity_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioPanelActivity",
+  $description: 'The Activity feed: one row per operation this session, newest last, drawn from the projection `panels/activity-panel.ts` hands in. A row is a glyph, a head line (what the operation is, who is running it, how long it has taken), the line it is doing now, the plan it declared, the log it captured and — only when the operation handed a callback over — its Cancel. Every conditional the row has is a boolean field on the projected item, because `$switch` over a value is the only conditional a document has and "is this entry cancellable" is a question the panel has already answered. Nothing here reads the activity store: the panel owns what an operation IS, and the surface owns what it looks like.',
+  tagName: "div",
+  attributes: {
+    part: "panel"
+  },
+  style: {
+    $description: "What `.activity-panel`, `.activity-actions`, `.activity-list`, `.activity-row`, `.activity-icon`, `.activity-body`, `.activity-head`, `.activity-title`, `.activity-source`, `.activity-duration`, `.activity-status`, `.activity-steps`, `.activity-step`, `.activity-step-icon`, `.activity-log-toggle` and `.activity-log` said in `styles/panels.css`, keyed on `part`. Two rules were DELETED rather than moved: `.activity-clear` and `.activity-cancel` drew a small bordered button by hand, and `jx-button` is that button — so the sizes, the border, the hover fill and the disabled state are the kit's now. Three token names changed meaning on the way: `--spectrum-font-size-50`, `--spectrum-font-size-75` and `--spectrum-corner-radius-75` resolve only inside `<sp-theme>`, and this document is mounted into the Bottom dock's body where that element is not an ancestor — every one of them would silently have taken its px fallback. They are the kit's own scale here (`--jx-text-sm`, `--jx-text-md`, `--jx-radius-xs`), which is the step each of them was. The `.activity-*` rules stay in the stylesheet regardless: `publish/deploy-checklist.ts` still draws the checklist above this feed in that same vocabulary, and it is a lit template until it converts.",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "8px",
+    minWidth: "0",
+    fontFamily: "var(--jx-font-sans)",
+    color: "var(--fg)",
+    '& [part="feed"]': {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      minWidth: "0"
+    },
+    '& [part="actions"]': {
+      display: "flex",
+      justifyContent: "flex-end"
+    },
+    '& [part="list"]': {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px",
+      margin: "0",
+      padding: "0",
+      listStyle: "none"
+    },
+    '& [part="row"]': {
+      $description: "The left border is the state, at 3px, which is the one thing that must be legible in a column of twenty rows without reading any of them. Its default is the dim foreground so a state nobody has a colour for still draws a border rather than a gap.",
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "8px",
+      padding: "6px 8px",
+      border: "1px solid var(--border)",
+      borderLeft: "3px solid var(--fg-dim)",
+      borderRadius: "var(--radius)",
+      background: "var(--bg-panel)",
+      color: "var(--fg)",
+      fontSize: "var(--jx-text-md)"
+    },
+    '& [part="row"][data-state="running"]': {
+      borderLeftColor: "var(--accent)"
+    },
+    '& [part="row"][data-state="done"]': {
+      borderLeftColor: "var(--success)"
+    },
+    '& [part="row"][data-state="failed"]': {
+      borderLeftColor: "var(--danger)"
+    },
+    '& [part="row"][data-state="cancelled"]': {
+      borderLeftColor: "var(--fg-dim)"
+    },
+    '& [part="icon"]': {
+      flex: "none",
+      width: "14px",
+      textAlign: "center",
+      fontWeight: "700",
+      lineHeight: "1.5"
+    },
+    '& [part="row"][data-state="running"] [part="icon"]': {
+      color: "var(--accent)"
+    },
+    '& [part="row"][data-state="done"] [part="icon"]': {
+      color: "var(--success)"
+    },
+    '& [part="row"][data-state="failed"] [part="icon"]': {
+      color: "var(--danger)"
+    },
+    '& [part="body"]': {
+      flex: "1",
+      minWidth: "0",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2px"
+    },
+    '& [part="head"]': {
+      display: "flex",
+      alignItems: "baseline",
+      gap: "8px",
+      minWidth: "0"
+    },
+    '& [part="row-title"]': {
+      fontWeight: "700",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    '& [part="source"], & [part="duration"]': {
+      flex: "none",
+      color: "var(--fg-dim)",
+      fontSize: "var(--jx-text-sm)"
+    },
+    '& [part="duration"]': {
+      $description: "Pushed to the far edge so a column of rows reads as a column of times.",
+      marginLeft: "auto"
+    },
+    '& [part="status"]': {
+      color: "var(--fg-dim)",
+      overflowWrap: "anywhere"
+    },
+    '& [part="steps"]': {
+      $description: 'The plan, declared up front, so "which of the three steps is this on" is answered by looking rather than by reading the status line and remembering what came before it.',
+      display: "flex",
+      flexDirection: "column",
+      gap: "1px",
+      margin: "2px 0 0",
+      padding: "0",
+      listStyle: "none",
+      fontSize: "var(--jx-text-sm)"
+    },
+    '& [part="step"]': {
+      display: "flex",
+      gap: "6px",
+      color: "var(--fg-dim)"
+    },
+    '& [part="step"][data-state="running"]': {
+      color: "var(--fg)"
+    },
+    '& [part="step"][data-state="done"] [part="step-icon"]': {
+      color: "var(--success)"
+    },
+    '& [part="step"][data-state="failed"] [part="step-icon"]': {
+      color: "var(--danger)"
+    },
+    '& [part="step-icon"]': {
+      flex: "none",
+      width: "10px",
+      textAlign: "center"
+    },
+    '& [part="log-toggle"]': {
+      $description: "A plain button rather than a kit one, and the one element here that is not the kit's. The control has to carry `aria-expanded` on the node the reader actually focuses, and a `jx-button` forwards a fixed set of ARIA properties to the control inside its shadow root — an attribute written on the host would name the wrapper and not the button. Its wording is the disclosure's whole state (`docs/studio/interface/problems-and-progress.md` calls it the Show log disclosure), so nothing else has to draw one.",
+      alignSelf: "flex-start",
+      padding: "0",
+      border: "none",
+      background: "none",
+      color: "var(--accent)",
+      font: "inherit",
+      fontSize: "var(--jx-text-sm)",
+      cursor: "pointer",
+      ":hover": {
+        textDecoration: "underline"
+      },
+      ":focus-visible": {
+        outline: "var(--jx-focus-ring)",
+        outlineOffset: "2px"
+      }
+    },
+    '& [part="log"]': {
+      $description: "The captured output the progress modal used to show once and then lose. It scrolls inside the row rather than growing it, so one 400-line `bun install` failure does not become the whole panel.",
+      maxHeight: "180px",
+      margin: "2px 0 0",
+      padding: "6px",
+      overflow: "auto",
+      borderRadius: "var(--jx-radius-xs)",
+      background: "var(--bg)",
+      color: "var(--fg-dim)",
+      fontFamily: "var(--font-mono)",
+      fontSize: "var(--jx-text-sm)",
+      whiteSpace: "pre-wrap"
+    },
+    '& [part="cancel"]': {
+      flex: "none"
+    },
+    '& [part="empty"]': {
+      $description: "The teaching empty state, drawn here rather than borrowed from `panels/empty-state.ts`: that helper is a lit template and a document cannot call one. What it says is what is kept — one sentence saying what the region is FOR, then where its content comes from — and this region's fill is an operation somebody else starts, so it offers no button.",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "8px",
+      padding: "24px",
+      textAlign: "center",
+      fontSize: "13px",
+      color: "var(--fg-dim)"
+    },
+    '& [part="empty-message"], & [part="empty-detail"]': {
+      margin: "0",
+      maxWidth: "34ch",
+      lineHeight: "1.5"
+    },
+    '& [part="empty-detail"]': {
+      fontSize: "var(--jx-text-sm)",
+      opacity: "0.8"
+    }
+  },
+  children: [
+    {
+      tagName: "div",
+      attributes: {
+        part: "feed-slot",
+        role: "none"
+      },
+      style: {
+        display: "contents"
+      },
+      $switch: {
+        $ref: "#/state/hasRows"
+      },
+      cases: {
+        true: {
+          tagName: "div",
+          attributes: {
+            part: "feed"
+          },
+          children: [
+            {
+              tagName: "div",
+              attributes: {
+                part: "actions-slot",
+                role: "none"
+              },
+              style: {
+                display: "contents"
+              },
+              $switch: {
+                $ref: "#/state/hasFinished"
+              },
+              cases: {
+                true: {
+                  tagName: "div",
+                  attributes: {
+                    part: "actions"
+                  },
+                  children: [
+                    {
+                      tagName: "jx-button",
+                      $props: {
+                        size: "sm",
+                        quiet: true
+                      },
+                      attributes: {
+                        part: "clear"
+                      },
+                      onclick: {
+                        $prototype: "Function",
+                        body: [
+                          {
+                            operator: "call",
+                            target: {
+                              $ref: "#/state/clearFinished"
+                            }
+                          }
+                        ]
+                      },
+                      children: [
+                        {
+                          tagName: "span",
+                          textContent: "${state.clearLabel}"
+                        }
+                      ]
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              tagName: "ul",
+              attributes: {
+                part: "list"
+              },
+              children: [
+                {
+                  $prototype: "Array",
+                  items: {
+                    $ref: "#/state/rows"
+                  },
+                  key: {
+                    $ref: "$map/item/id"
+                  },
+                  map: {
+                    tagName: "li",
+                    attributes: {
+                      part: "row",
+                      "data-state": "${$map.item.state}"
+                    },
+                    children: [
+                      {
+                        tagName: "span",
+                        attributes: {
+                          part: "icon",
+                          "aria-hidden": "true"
+                        },
+                        textContent: "${$map.item.icon}"
+                      },
+                      {
+                        tagName: "div",
+                        attributes: {
+                          part: "body"
+                        },
+                        children: [
+                          {
+                            tagName: "div",
+                            attributes: {
+                              part: "head"
+                            },
+                            children: [
+                              {
+                                tagName: "span",
+                                attributes: {
+                                  part: "row-title"
+                                },
+                                textContent: "${$map.item.title}"
+                              },
+                              {
+                                tagName: "span",
+                                attributes: {
+                                  part: "source-slot",
+                                  role: "none"
+                                },
+                                style: {
+                                  display: "contents"
+                                },
+                                $switch: {
+                                  $ref: "$map/item/hasSource"
+                                },
+                                cases: {
+                                  true: {
+                                    tagName: "span",
+                                    attributes: {
+                                      part: "source"
+                                    },
+                                    textContent: "${$map.item.source}"
+                                  }
+                                }
+                              },
+                              {
+                                tagName: "span",
+                                attributes: {
+                                  part: "duration"
+                                },
+                                textContent: "${$map.item.duration}"
+                              }
+                            ]
+                          },
+                          {
+                            tagName: "div",
+                            attributes: {
+                              part: "status-slot",
+                              role: "none"
+                            },
+                            style: {
+                              display: "contents"
+                            },
+                            $switch: {
+                              $ref: "$map/item/hasStatus"
+                            },
+                            cases: {
+                              true: {
+                                tagName: "div",
+                                attributes: {
+                                  part: "status"
+                                },
+                                textContent: "${$map.item.status}"
+                              }
+                            }
+                          },
+                          {
+                            tagName: "div",
+                            attributes: {
+                              part: "steps-slot",
+                              role: "none"
+                            },
+                            style: {
+                              display: "contents"
+                            },
+                            $switch: {
+                              $ref: "$map/item/hasSteps"
+                            },
+                            cases: {
+                              true: {
+                                tagName: "ol",
+                                attributes: {
+                                  part: "steps"
+                                },
+                                children: [
+                                  {
+                                    $prototype: "Array",
+                                    items: {
+                                      $ref: "$map/item/steps"
+                                    },
+                                    key: {
+                                      $ref: "$map/item/key"
+                                    },
+                                    map: {
+                                      tagName: "li",
+                                      attributes: {
+                                        part: "step",
+                                        "data-state": "${$map.item.state}"
+                                      },
+                                      children: [
+                                        {
+                                          tagName: "span",
+                                          attributes: {
+                                            part: "step-icon",
+                                            "aria-hidden": "true"
+                                          },
+                                          textContent: "${$map.item.icon}"
+                                        },
+                                        {
+                                          tagName: "span",
+                                          attributes: {
+                                            part: "step-label"
+                                          },
+                                          textContent: "${$map.item.label}"
+                                        }
+                                      ]
+                                    }
+                                  }
+                                ]
+                              }
+                            }
+                          },
+                          {
+                            tagName: "div",
+                            attributes: {
+                              part: "log-toggle-slot",
+                              role: "none"
+                            },
+                            style: {
+                              display: "contents"
+                            },
+                            $switch: {
+                              $ref: "$map/item/hasLog"
+                            },
+                            cases: {
+                              true: {
+                                tagName: "button",
+                                attributes: {
+                                  part: "log-toggle",
+                                  type: "button",
+                                  "aria-expanded": "${$map.item.expanded ? 'true' : 'false'}"
+                                },
+                                onclick: {
+                                  $prototype: "Function",
+                                  body: [
+                                    {
+                                      operator: "call",
+                                      target: {
+                                        $ref: "#/state/toggleLog"
+                                      },
+                                      value: [
+                                        {
+                                          $ref: "$map/item/id"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                textContent: "${$map.item.logLabel}"
+                              }
+                            }
+                          },
+                          {
+                            tagName: "div",
+                            attributes: {
+                              part: "log-slot",
+                              role: "none"
+                            },
+                            style: {
+                              display: "contents"
+                            },
+                            $switch: {
+                              $ref: "$map/item/showLog"
+                            },
+                            cases: {
+                              true: {
+                                tagName: "pre",
+                                attributes: {
+                                  part: "log"
+                                },
+                                textContent: "${$map.item.logText}"
+                              }
+                            }
+                          }
+                        ]
+                      },
+                      {
+                        tagName: "div",
+                        attributes: {
+                          part: "cancel-slot",
+                          role: "none"
+                        },
+                        style: {
+                          display: "contents"
+                        },
+                        $switch: {
+                          $ref: "$map/item/cancellable"
+                        },
+                        cases: {
+                          true: {
+                            tagName: "jx-button",
+                            $props: {
+                              size: "sm"
+                            },
+                            attributes: {
+                              part: "cancel",
+                              title: "Stop this operation"
+                            },
+                            onclick: {
+                              $prototype: "Function",
+                              body: [
+                                {
+                                  operator: "call",
+                                  target: {
+                                    $ref: "#/state/cancel"
+                                  },
+                                  value: [
+                                    {
+                                      $ref: "$map/item/id"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            children: [
+                              {
+                                tagName: "span",
+                                textContent: "Cancel"
+                              }
+                            ]
+                          }
+                        }
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        false: {
+          tagName: "div",
+          attributes: {
+            part: "empty"
+          },
+          children: [
+            {
+              tagName: "p",
+              attributes: {
+                part: "empty-message"
+              },
+              textContent: "Long operations show their progress, their log and their Cancel button here."
+            },
+            {
+              tagName: "p",
+              attributes: {
+                part: "empty-detail"
+              },
+              textContent: "Installs, clones, publishes and imports report here while they run."
+            }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// src/surfaces/panel-activity.ts
+registerSurface("panel-activity", panel_activity_default);
+var _container = null;
+var _scope = null;
+var _mount = null;
+var _handle = null;
+function write(scope, view) {
+  scope.rows = view.rows;
+  scope.hasRows = view.hasRows;
+  scope.hasFinished = view.hasFinished;
+  scope.clearLabel = view.clearLabel;
+}
+function standingIn(container) {
+  if (_container !== container) {
+    return false;
+  }
+  return _handle === null ? _mount !== null : _handle.root.parentNode === container;
+}
+function mountActivitySurface(container, deps) {
+  if (standingIn(container)) {
+    return;
+  }
+  disposeActivitySurface();
+  _container = container;
+  const scope = reactive({
+    cancel: deps.cancel,
+    clearFinished: deps.clearFinished,
+    clearLabel: "",
+    hasFinished: false,
+    hasRows: false,
+    rows: [],
+    toggleLog: deps.toggleLog
+  });
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      write(scope, deps.project());
+    });
+  });
+  const pending = mountSurface("panel-activity", scope, container);
+  _mount = pending;
+  pending.then((handle) => {
+    if (_mount === pending) {
+      _handle = handle;
+    } else {
+      handle.dispose();
+    }
+  });
+}
+function disposeActivitySurface() {
+  _scope?.stop();
+  _scope = null;
+  const pending = _mount;
+  _mount = null;
+  if (_handle) {
+    _handle.dispose();
+    _handle = null;
+  } else if (pending) {
+    pending.then((handle) => handle.dispose());
+  }
+  _container = null;
+}
+
+// src/panels/activity-panel.ts
+var activities = reactive([]);
+var MAX_FINISHED_ACTIVITIES = 20;
+var _cancels = new Map;
+var _seq = 0;
+function nextId() {
+  _seq += 1;
+  return `a${_seq}`;
+}
+function isFinished(entry) {
+  return entry.state !== "running";
+}
+function retireOldest() {
+  let excess = activities.filter((entry) => isFinished(entry)).length - MAX_FINISHED_ACTIVITIES;
+  while (excess > 0) {
+    const at = activities.findIndex((entry) => isFinished(entry));
+    if (at === -1) {
+      return;
+    }
+    _cancels.delete(activities[at].id);
+    activities.splice(at, 1);
+    excess -= 1;
+  }
+}
+function beginActivity(options) {
+  const entry = {
+    cancellable: options.cancel !== undefined,
+    endedAt: null,
+    expanded: false,
+    id: nextId(),
+    log: [],
+    startedAt: now(),
+    state: "running",
+    status: options.status ?? "",
+    steps: (options.steps ?? []).map((label) => ({ label, state: "pending" })),
+    title: options.title,
+    ...options.source === undefined ? {} : { source: options.source }
+  };
+  if (options.cancel) {
+    _cancels.set(entry.id, options.cancel);
+  }
+  activities.push(entry);
+  const live = activities.at(-1);
+  retireOldest();
+  const finish = (state, status) => {
+    if (isFinished(live)) {
+      return;
+    }
+    live.state = state;
+    live.endedAt = now();
+    if (status !== undefined) {
+      live.status = status;
+    }
+    for (const step of live.steps) {
+      step.state = step.state === "done" ? "done" : state === "done" ? "done" : "failed";
+    }
+    live.cancellable = false;
+    _cancels.delete(live.id);
+    retireOldest();
+  };
+  return {
+    done(status) {
+      finish("done", status);
+    },
+    entry: live,
+    fail(message, opts = {}) {
+      if (isFinished(live)) {
+        return;
+      }
+      const detail = live.log.join(`
+`);
+      finish("failed", message);
+      notify2.error(message, {
+        source: live.source ?? live.title,
+        ...detail === "" ? {} : { detail },
+        ...opts.action === undefined ? {} : { action: opts.action },
+        ...opts.path === undefined ? {} : { path: opts.path }
+      });
+    },
+    id: live.id,
+    log(chunk) {
+      const text = chunk.replace(/\s+$/, "");
+      if (text !== "") {
+        live.log.push(text);
+      }
+    },
+    setStatus(text) {
+      if (!isFinished(live)) {
+        live.status = text;
+      }
+    },
+    step(label) {
+      let at = live.steps.findIndex((step) => step.label === label);
+      if (at === -1) {
+        live.steps.push({ label, state: "pending" });
+        at = live.steps.length - 1;
+      }
+      for (const [index, step] of live.steps.entries()) {
+        step.state = index < at ? "done" : index === at ? "running" : step.state;
+      }
+      live.status = label;
+    }
+  };
+}
+function activityById(id) {
+  return activities.find((entry) => entry.id === id);
+}
+function runningActivities() {
+  return activities.filter((entry) => !isFinished(entry));
+}
+function cancelActivity(id) {
+  const entry = activityById(id);
+  const stop = _cancels.get(id);
+  if (!entry || !stop || isFinished(entry)) {
+    return false;
+  }
+  stop();
+  _cancels.delete(id);
+  entry.state = "cancelled";
+  entry.endedAt = now();
+  entry.cancellable = false;
+  entry.status = "Cancelled";
+  return true;
+}
+function clearFinishedActivities() {
+  const kept = activities.filter((entry) => !isFinished(entry));
+  const removed = activities.length - kept.length;
+  activities.splice(0, activities.length, ...kept);
+  return removed;
+}
+function activityIdleBlockers() {
+  return runningActivities().map((entry) => `activity: ${entry.title} — ${entry.status || "running"}`);
+}
+var STATE_ICON = {
+  cancelled: "⊘",
+  done: "✓",
+  failed: "✕",
+  running: "⋯"
+};
+var STEP_ICON = {
+  done: "✓",
+  failed: "✕",
+  pending: "·",
+  running: "⋯"
+};
+function activityDuration(entry, at = now()) {
+  const ms = Math.max(0, (entry.endedAt ?? at) - entry.startedAt);
+  if (ms < 1000) {
+    return `${ms}ms`;
+  }
+  const seconds = Math.round(ms / 1000);
+  return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+}
+function stepView(step, index) {
+  return {
+    icon: STEP_ICON[step.state],
+    key: `${index}:${step.label}`,
+    label: step.label,
+    state: step.state
+  };
+}
+function rowView(entry) {
+  const lines = entry.log.length;
+  return {
+    cancellable: entry.cancellable,
+    duration: activityDuration(entry),
+    expanded: entry.expanded,
+    hasLog: lines > 0,
+    hasSource: (entry.source ?? "") !== "",
+    hasStatus: entry.status !== "",
+    hasSteps: entry.steps.length > 0,
+    icon: STATE_ICON[entry.state],
+    id: entry.id,
+    logLabel: entry.expanded ? "Hide log" : `Show log (${lines} line(s))`,
+    logText: entry.log.join(`
+`),
+    showLog: entry.expanded && lines > 0,
+    source: entry.source ?? "",
+    state: entry.state,
+    status: entry.status,
+    steps: entry.steps.map((step, index) => stepView(step, index)),
+    title: entry.title
+  };
+}
+function activityView() {
+  const finished = activities.filter((entry) => isFinished(entry)).length;
+  return {
+    clearLabel: `Clear ${finished} finished`,
+    hasFinished: finished > 0,
+    hasRows: activities.length > 0,
+    rows: activities.map((entry) => rowView(entry))
+  };
+}
+var ACTIVITY_SURFACE = {
+  cancel: (id) => {
+    cancelActivity(id);
+  },
+  clearFinished: () => {
+    clearFinishedActivities();
+  },
+  project: activityView,
+  toggleLog: (id) => {
+    const entry = activityById(id);
+    if (entry) {
+      entry.expanded = !entry.expanded;
+    }
+  }
+};
+function renderActivityBody() {
+  return html3`<div data-deploy-checklist></div>
+    <div data-activity-surface></div>`;
+}
+function syncActivitySurface(host) {
+  const container = host.querySelector("[data-activity-surface]");
+  if (!container) {
+    disposeActivitySurface();
+    return;
+  }
+  mountActivitySurface(container, ACTIVITY_SURFACE);
+}
+function registerActivityPanel() {
+  registerPanel({
+    id: "activity",
+    title: "Activity",
+    level: "project",
+    dock: "bottom",
+    icon: "clock-counter-clockwise",
+    rail: false,
+    badge: () => runningActivities().length > 0 ? runningActivities().length : null,
+    render: () => renderActivityBody(),
+    afterRender: (_ctx, host) => {
+      syncDeployChecklist(host);
+      syncActivitySurface(host);
+    }
+  });
+}
+
+// src/files/media-usage.ts
+var NO_FILE = { message: "no media file to look for", status: "failed" };
+function mediaQuery(path) {
+  const normalized = normalizeProjectPath(path);
+  return normalized === "" ? null : { path: normalized };
+}
+function peekMediaUsages(path) {
+  const query = mediaQuery(path);
+  return query === null ? null : peekUsages2(query);
+}
+async function loadMediaUsages(path) {
+  const query = mediaQuery(path);
+  return query === null ? NO_FILE : loadUsages2(query);
+}
+function mediaUsageHeadline(state) {
+  if (state === null) {
+    return "Counting references…";
+  }
+  switch (state.status) {
+    case "unsupported": {
+      return null;
+    }
+    case "pending": {
+      return "Counting references…";
+    }
+    case "failed": {
+      return "Usage unknown";
+    }
+    default: {
+      return usageHeadline2(state.result);
+    }
+  }
+}
+// src/surfaces/progress-modal.json
+var progress_modal_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioProgressModal",
+  $description: "The one surface in Studio that blocks while it works: the operation's name, a spinner, the line under it, and the two ways out. A `jx-dialog`, so the platform owns modality, the backdrop, focus restoration and Escape — which is what retired the `sp-underlay` this surface used to paint beside itself, and with it the fixed box, the panel, the shadow and the `z-index: 1000` that box needed to climb back out from under its own scrim. The two answers are the dialog's own: confirm is `Run in the background`, which stops the BLOCKING and leaves the work running in Activity, and the secondary answer is Cancel, drawn only when the operation handed one over. It is the secondary rather than the cancel answer for a reason that is behavioural, not cosmetic: the platform raises one `cancel` for Escape, for a light dismissal and for the cancel button alike, and a surface that cannot tell them apart would stop a dependency install on a keystroke. Escape therefore means what confirm means — stop blocking, not stop working — and the answer that stops the work is a button and only a button.",
+  tagName: "jx-dialog",
+  $props: {
+    headline: {
+      $ref: "#/state/title"
+    },
+    confirmLabel: "Run in the background",
+    secondaryLabel: {
+      $ref: "#/state/cancelLabel"
+    },
+    cancelLabel: "",
+    size: "sm"
+  },
+  attributes: {
+    part: "progress"
+  },
+  onconfirm: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/background"
+        },
+        value: []
+      }
+    ]
+  },
+  onsecondary: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/cancel"
+        },
+        value: []
+      }
+    ]
+  },
+  oncancel: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/background"
+        },
+        value: []
+      }
+    ]
+  },
+  onclose: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/closed"
+        },
+        value: []
+      }
+    ]
+  },
+  style: {
+    $description: "What is left once `jx-dialog` has drawn the dialog. `.progress-modal` is gone rather than moved — it positioned a fixed box, painted its panel, border, radius and shadow, capped its height and then lifted itself above the scrim it rendered beside — and a modal `<dialog>` in the top layer is every one of those. `.progress-title` went the same way: the operation's name is the dialog's headline, which is also its accessible name, so nothing here draws a title.",
+    '& [part="row"]': {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--jx-space-4)"
+    },
+    '& [part="status"]': {
+      $description: "`anywhere`, because a status line is usually a path or a package spec with no space in it, and one of those would otherwise be the thing that decides how wide the dialog is. `min-width: 0` is what lets it wrap at all: a flex item's automatic minimum is its content, so without this the row refuses to shrink and the text overflows instead.",
+      minWidth: "0",
+      color: "var(--fg-dim)",
+      fontSize: "var(--jx-text-md)",
+      overflowWrap: "anywhere"
+    }
+  },
+  children: [
+    {
+      tagName: "div",
+      attributes: {
+        part: "row"
+      },
+      children: [
+        {
+          tagName: "jx-spinner",
+          attributes: {
+            part: "busy"
+          },
+          $props: {
+            size: "lg"
+          }
+        },
+        {
+          tagName: "span",
+          attributes: {
+            part: "status",
+            "aria-live": "polite"
+          },
+          textContent: "${state.status}"
+        }
+      ]
+    }
+  ]
+};
+
+// src/surfaces/progress-modal.ts
+registerSurface("progress-modal", progress_modal_default);
+function openProgressSurface(options) {
+  const slot = document.createElement("div");
+  slot.style.pointerEvents = "auto";
+  slot.setAttribute(REGION_ATTR, overlayRegion("modal", "progress"));
+  options.layer.append(slot);
+  let closed = false;
+  const scope = reactive({
+    background: () => {
+      options.onBackground();
+    },
+    cancel: () => {
+      options.onCancel();
+    },
+    cancelLabel: options.cancellable ? "Cancel" : "",
+    closed: () => {
+      options.onClosed();
+    },
+    status: options.status,
+    title: options.title
+  });
+  let mounted = null;
+  const ready = mountSurface("progress-modal", scope, slot).then(async (surface) => {
+    const element = surface.root;
+    if (closed) {
+      surface.dispose();
+      return element;
+    }
+    mounted = surface;
+    await whenReady(element);
+    if (closed) {
+      return element;
+    }
+    showModal(element);
+    return element;
+  });
+  return {
+    close() {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      const element = mounted?.root;
+      if (element instanceof HTMLElement) {
+        close2(element);
+      }
+      mounted?.dispose();
+      mounted = null;
+      slot.remove();
+    },
+    host: slot,
+    ready,
+    setStatus(text) {
+      scope.status = text;
+    }
+  };
+}
+
+// src/ui/progress-modal.ts
+function showProgressModal(opts) {
+  let closed = false;
+  const activity = beginActivity({
+    title: opts.title,
+    ...opts.status === undefined ? {} : { status: opts.status },
+    ...opts.source === undefined ? {} : { source: opts.source },
+    ...opts.cancel === undefined ? {} : { cancel: opts.cancel }
+  });
+  const close = () => {
+    if (closed) {
+      return;
+    }
+    closed = true;
+    surface.close();
+  };
+  const background = () => {
+    close();
+    setBottomTab("activity");
+  };
+  const surface = openProgressSurface({
+    cancellable: opts.cancel !== undefined,
+    layer: layerHost2("modal"),
+    onBackground: background,
+    onCancel: () => {
+      close();
+      opts.cancel?.();
+    },
+    onClosed: close,
+    status: opts.status ?? "",
+    title: opts.title
+  });
+  return {
+    activity,
+    done() {
+      activity.done();
+      close();
+    },
+    fail(message) {
+      const text = (message ?? "").trim();
+      if (text === "" || text.includes(`
+`)) {
+        activity.log(text);
+        activity.fail(`${opts.title} failed`);
+      } else {
+        activity.fail(text);
+      }
+      close();
+    },
+    log(chunk) {
+      activity.log(chunk);
+    },
+    setStatus(text) {
+      activity.setStatus(text);
+      if (!closed) {
+        surface.setStatus(text);
+      }
+    }
+  };
+}
+
+export { beginActivity, activityIdleBlockers, registerActivityPanel, showProgressModal, peekMediaUsages, loadMediaUsages, mediaUsageHeadline };
+
+//# debugId=0FE9D80FF9C2142764756E2164756E21
+//# sourceMappingURL=studio-cpvb2ed1.js.map