@jxsuite/studio 4.0.0 → 5.0.0

package/dist/chunks/studio-tb3ev01j.js

@@ -0,0 +1,763 @@
+import {
+  getPlatform2
+} from "./studio-6nzaktvy.js";
+import {
+  projectState
+} from "./studio-6ewqv390.js";
+import {
+  effectScope,
+  effect,
+  reactive,
+  shallowReactive
+} from "./studio-p1dw8wfw.js";
+import {
+  updateSiteConfig,
+  shell
+} from "./studio-25hkdrkw.js";
+import {
+  activeRegistry
+} from "./studio-5jy81t3s.js";
+import {
+  registerSurface,
+  mountSurface
+} from "./studio-erdatzvp.js";
+
+// ../create/scaffold.ts
+var CF_ADAPTERS = new Set(["cloudflare-pages", "cloudflare-workers"]);
+function buildWranglerJsonc({ slug, adapter }) {
+  const compatibilityDate = new Date().toISOString().slice(0, 10);
+  const config = adapter === "cloudflare-workers" ? {
+    assets: { binding: "ASSETS", directory: "./dist" },
+    compatibility_date: compatibilityDate,
+    compatibility_flags: ["nodejs_compat"],
+    main: "./dist/worker.js",
+    name: slug
+  } : {
+    compatibility_date: compatibilityDate,
+    compatibility_flags: ["nodejs_compat"],
+    name: slug,
+    pages_build_output_dir: "./dist"
+  };
+  return `${JSON.stringify(config, null, "\t")}
+`;
+}
+function updateWranglerConfig(existing, { slug, adapter }) {
+  if (!existing) {
+    return { content: buildWranglerJsonc({ adapter, slug }), patched: true };
+  }
+  let config;
+  try {
+    config = JSON.parse(existing);
+  } catch {
+    return { content: existing, patched: false };
+  }
+  config["name"] = slug;
+  if (adapter === "cloudflare-workers") {
+    delete config["pages_build_output_dir"];
+    config["main"] = "./dist/worker.js";
+    config["assets"] = { binding: "ASSETS", directory: "./dist" };
+  } else {
+    delete config["main"];
+    delete config["assets"];
+    config["pages_build_output_dir"] = "./dist";
+  }
+  return { content: `${JSON.stringify(config, null, "\t")}
+`, patched: true };
+}
+
+// src/publish/pages-service.ts
+function platformSupportsPublish() {
+  try {
+    return typeof getPlatform2().cfApi === "function";
+  } catch {
+    return false;
+  }
+}
+async function cfApi(path, init) {
+  const api = getPlatform2().cfApi;
+  if (!api) {
+    throw new Error("This platform cannot reach the Cloudflare API");
+  }
+  return await api(path, init);
+}
+async function listAccounts2() {
+  return cfApi("/accounts");
+}
+async function getPagesProject(accountId, projectName) {
+  try {
+    return await cfApi(`/accounts/${accountId}/pages/projects/${projectName}`);
+  } catch {
+    return null;
+  }
+}
+async function createPagesProject(opts) {
+  return cfApi(`/accounts/${opts.accountId}/pages/projects`, {
+    method: "POST",
+    body: {
+      name: opts.projectName,
+      production_branch: opts.productionBranch,
+      build_config: {
+        build_command: "bunx jx build",
+        destination_dir: "dist"
+      },
+      source: {
+        type: "github",
+        config: {
+          owner: opts.owner,
+          repo_name: opts.repo,
+          production_branch: opts.productionBranch,
+          deployments_enabled: true
+        }
+      }
+    }
+  });
+}
+async function latestDeployment(deploy) {
+  const deployments = await cfApi(`/accounts/${deploy.accountId}/pages/projects/${deploy.projectName}/deployments`);
+  const [latest] = deployments;
+  if (!latest) {
+    return null;
+  }
+  return {
+    id: latest.id,
+    url: latest.url,
+    environment: latest.environment,
+    stage: latest.latest_stage?.name ?? "unknown",
+    status: latest.latest_stage?.status ?? "unknown",
+    createdOn: latest.created_on
+  };
+}
+async function writeDeployConfig(config, deploy) {
+  const build = { ...config.build };
+  if (deploy === null) {
+    delete build.deploy;
+  } else {
+    build.deploy = deploy;
+  }
+  await updateSiteConfig({ build });
+  if (deploy !== null) {
+    const platform = getPlatform2();
+    let existing = null;
+    try {
+      existing = await platform.readFile("wrangler.jsonc");
+    } catch {
+      existing = null;
+    }
+    const adapter = build.adapter === "cloudflare-workers" ? "cloudflare-workers" : "cloudflare-pages";
+    const { content, patched } = updateWranglerConfig(existing, {
+      adapter,
+      slug: deploy.projectName
+    });
+    if (patched) {
+      await platform.writeFile("wrangler.jsonc", content);
+    }
+  }
+}
+async function connectDeploy(config, opts) {
+  const existing = await getPagesProject(opts.accountId, opts.projectName);
+  const project = existing ?? await createPagesProject(opts);
+  const deploy = {
+    provider: "cloudflare-pages",
+    accountId: opts.accountId,
+    projectName: opts.projectName,
+    ...project.subdomain ? { productionUrl: `https://${project.subdomain}` } : {}
+  };
+  await writeDeployConfig(config, deploy);
+  return deploy;
+}
+// src/surfaces/panel-deploy-checklist.json
+var panel_deploy_checklist_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioPanelDeployChecklist",
+  $description: "The deploy checklist, drawn above the Activity feed in the Bottom dock's Activity tab: what is MISSING before this project can ship, as one row with the chain of prerequisites under it. `publish/deploy-checklist.ts` owns the chain — which link is forged, which is merely unasked, and which command forges the next one — and hands this document a row, four steps and at most one action. Nothing here reads source control, the project config or the command registry. It draws in the Activity tab's own vocabulary because a deploy is an ordered list of stages that finish, which is exactly what a row of that feed already is; a fifth visual idiom for it would be a second design of a thing the tab has.",
+  tagName: "div",
+  attributes: {
+    part: "checklist"
+  },
+  style: {
+    $description: "What `.activity-list`, `.activity-row`, `.activity-row--running`, `.activity-row--done`, `.activity-icon`, `.activity-body`, `.activity-head`, `.activity-title`, `.activity-source`, `.activity-status`, `.activity-steps`, `.activity-step`, `.activity-step--done` and `.activity-step-icon` said in `styles/panels.css`, keyed on `part`. This is the LAST reader of those rules — `surfaces/panel-activity.json` carried its own copy when the feed converted, and left the stylesheet standing because this file still drew from it — so the whole `.problem-*, .activity-*` block is dead once this lands. Three token names could not travel: `--spectrum-font-size-50`, `--spectrum-font-size-75` and `--spectrum-corner-radius-75` resolve only inside `<sp-theme>`, and a document mounted into the dock body is outside it, so each would silently have taken its hard-coded px fallback. They are the kit's own scale here. One thing changed meaning on purpose: the step's `data-state` is the checklist's own three-valued state rather than the two CSS classes it used to collapse into, so `unknown` — \"nobody has asked\" — is a state the styling can tell apart from `todo` the day it should.",
+    display: "block",
+    minWidth: "0",
+    fontFamily: "var(--jx-font-sans)",
+    color: "var(--fg)",
+    '& [part="list"]': {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--jx-space-1)",
+      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 without reading the row. 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: "var(--jx-space-2)",
+      padding: "6px var(--jx-space-2)",
+      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="state-icon"]': {
+      $description: 'Named `state-icon` rather than `icon`: `jx-button` puts `part="icon"` on the glyph slot of every button it draws, and the action button below is inside this same light-DOM tree — a rule on the bare name would reach into the kit\'s own drawing and a devtools query could not tell the two apart.',
+      flex: "none",
+      width: "14px",
+      textAlign: "center",
+      fontWeight: "700",
+      lineHeight: "1.5"
+    },
+    '& [part="row"][data-state="running"] > [part="state-icon"]': {
+      color: "var(--accent)"
+    },
+    '& [part="row"][data-state="done"] > [part="state-icon"]': {
+      color: "var(--success)"
+    },
+    '& [part="row-body"]': {
+      flex: "1",
+      minWidth: "0",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: "2px"
+    },
+    '& [part="head"]': {
+      display: "flex",
+      alignItems: "baseline",
+      gap: "var(--jx-space-2)",
+      alignSelf: "stretch",
+      minWidth: "0"
+    },
+    '& [part="row-title"]': {
+      fontWeight: "700",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    '& [part="source"]': {
+      $description: "Pushed to the far edge, so the tab reads as a column of who raised what.",
+      flex: "none",
+      marginLeft: "auto",
+      color: "var(--fg-dim)",
+      fontSize: "var(--jx-text-sm)"
+    },
+    '& [part="summary"]': {
+      color: "var(--fg-dim)",
+      overflowWrap: "anywhere"
+    },
+    '& [part="steps"]': {
+      $description: 'The chain, declared up front, so "which link is missing" is answered by looking rather than by reading the summary 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="done"] > [part="step-icon"]': {
+      color: "var(--success)"
+    },
+    '& [part="step-icon"]': {
+      flex: "none",
+      width: "10px",
+      textAlign: "center"
+    },
+    '& [part="action"]': {
+      marginTop: "var(--jx-space-1)"
+    }
+  },
+  children: [
+    {
+      tagName: "div",
+      attributes: {
+        part: "body-slot",
+        role: "none"
+      },
+      style: {
+        display: "contents"
+      },
+      $switch: {
+        $ref: "#/state/hasProject"
+      },
+      cases: {
+        true: {
+          tagName: "ul",
+          attributes: {
+            part: "list"
+          },
+          children: [
+            {
+              tagName: "li",
+              attributes: {
+                part: "row",
+                "data-state": "${state.rowState}"
+              },
+              children: [
+                {
+                  tagName: "span",
+                  attributes: {
+                    part: "state-icon",
+                    "aria-hidden": "true"
+                  },
+                  textContent: "${state.rowIcon}"
+                },
+                {
+                  tagName: "div",
+                  attributes: {
+                    part: "row-body"
+                  },
+                  children: [
+                    {
+                      tagName: "div",
+                      attributes: {
+                        part: "head"
+                      },
+                      children: [
+                        {
+                          tagName: "span",
+                          attributes: {
+                            part: "row-title"
+                          },
+                          textContent: "Deploy checklist"
+                        },
+                        {
+                          tagName: "span",
+                          attributes: {
+                            part: "source"
+                          },
+                          textContent: "Publish"
+                        }
+                      ]
+                    },
+                    {
+                      tagName: "div",
+                      attributes: {
+                        part: "summary"
+                      },
+                      textContent: "${state.summary}"
+                    },
+                    {
+                      tagName: "ol",
+                      attributes: {
+                        part: "steps"
+                      },
+                      children: [
+                        {
+                          $prototype: "Array",
+                          items: {
+                            $ref: "#/state/steps"
+                          },
+                          key: {
+                            $ref: "$map/item/id"
+                          },
+                          map: {
+                            tagName: "li",
+                            attributes: {
+                              part: "step",
+                              "data-step": "${$map.item.id}",
+                              "data-state": "${$map.item.state}"
+                            },
+                            children: [
+                              {
+                                tagName: "span",
+                                attributes: {
+                                  part: "step-icon",
+                                  "aria-hidden": "true"
+                                },
+                                textContent: "${$map.item.icon}"
+                              },
+                              {
+                                tagName: "span",
+                                attributes: {
+                                  part: "step-text"
+                                },
+                                textContent: "${$map.item.text}"
+                              }
+                            ]
+                          }
+                        }
+                      ]
+                    },
+                    {
+                      tagName: "span",
+                      attributes: {
+                        part: "action-slot",
+                        role: "none"
+                      },
+                      style: {
+                        display: "contents"
+                      },
+                      $switch: {
+                        $ref: "#/state/hasAction"
+                      },
+                      cases: {
+                        true: {
+                          tagName: "jx-button",
+                          $description: "The recovery button wears the command's own title, so it reads as a verb rather than as a decoration, and a refused command is dimmed with the reason it names in its tooltip. A command the registry does not have, or whose `when` is false, draws NOTHING rather than a dead label — a surface may choose whether to show a command, never whether it exists (§12.4).",
+                          $props: {
+                            size: "sm",
+                            disabled: {
+                              $ref: "#/state/actionDisabled"
+                            }
+                          },
+                          attributes: {
+                            part: "action",
+                            title: "${state.actionTitle}"
+                          },
+                          onclick: {
+                            $prototype: "Function",
+                            body: [
+                              {
+                                operator: "call",
+                                target: {
+                                  $ref: "#/state/runAction"
+                                },
+                                value: []
+                              }
+                            ]
+                          },
+                          children: [
+                            {
+                              tagName: "span",
+                              textContent: "${state.actionLabel}"
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// src/surfaces/panel-deploy-checklist.ts
+registerSurface("panel-deploy-checklist", panel_deploy_checklist_default);
+var _container = null;
+var _scope = null;
+var _mount = null;
+var _handle = null;
+function write(scope, view) {
+  scope.hasProject = view.hasProject;
+  scope.rowState = view.rowState;
+  scope.rowIcon = view.rowIcon;
+  scope.summary = view.summary;
+  scope.steps = view.steps;
+  scope.hasAction = view.hasAction;
+  scope.actionLabel = view.actionLabel;
+  scope.actionTitle = view.actionTitle;
+  scope.actionDisabled = view.actionDisabled;
+}
+function standingIn(container) {
+  if (_container !== container) {
+    return false;
+  }
+  return _handle === null ? _mount !== null : _handle.root.parentNode === container;
+}
+function mountDeployChecklistSurface(container, deps) {
+  if (standingIn(container)) {
+    return;
+  }
+  disposeDeployChecklistSurface();
+  _container = container;
+  const scope = reactive({
+    actionDisabled: false,
+    actionLabel: "",
+    actionTitle: "",
+    hasAction: false,
+    hasProject: false,
+    rowIcon: "",
+    rowState: "running",
+    runAction: deps.runAction,
+    steps: [],
+    summary: ""
+  });
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      write(scope, deps.project());
+    });
+  });
+  const pending = mountSurface("panel-deploy-checklist", scope, container);
+  _mount = pending;
+  pending.then((handle) => {
+    if (_mount === pending) {
+      _handle = handle;
+    } else {
+      handle.dispose();
+    }
+  });
+}
+function disposeDeployChecklistSurface() {
+  _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/publish/deploy-checklist.ts
+function currentConfig() {
+  return projectState?.projectConfig ?? null;
+}
+function currentDeploy() {
+  return currentConfig()?.build?.deploy;
+}
+var _seen = shallowReactive({
+  asked: false,
+  observed: null
+});
+function noteDeployment(info) {
+  _seen.observed = info;
+  _seen.asked = true;
+}
+function repoStep() {
+  const { status } = shell.git;
+  if (status === null) {
+    return {
+      command: "git.init",
+      detail: "Source control has not reported on this project yet.",
+      id: "repo",
+      label: "Track this project with git",
+      state: "unknown"
+    };
+  }
+  return status.isRepo ? {
+    command: "git.init",
+    detail: `Tracked${status.branch ? ` — on branch ${status.branch}` : ""}.`,
+    id: "repo",
+    label: "Track this project with git",
+    state: "done"
+  } : {
+    command: "git.init",
+    detail: "A deploy ships what the repository holds, so the repository comes first.",
+    id: "repo",
+    label: "Track this project with git",
+    state: "todo"
+  };
+}
+function remoteStep() {
+  const { status } = shell.git;
+  if (status === null || !status.isRepo) {
+    return {
+      command: "git.createGithubRepository",
+      detail: "A remote is where the provider builds from.",
+      id: "remote",
+      label: "Push to a remote",
+      state: status === null ? "unknown" : "todo"
+    };
+  }
+  if ((status.remotes ?? []).length === 0) {
+    return {
+      command: "git.createGithubRepository",
+      detail: "This repository is local only — nothing outside this machine can build it.",
+      id: "remote",
+      label: "Push to a remote",
+      state: "todo"
+    };
+  }
+  return status.ahead > 0 ? {
+    command: "git.push",
+    detail: `${status.ahead} commit(s) are not on ${status.remotes[0]} yet, so a build would ship the older tree.`,
+    id: "remote",
+    label: "Push to a remote",
+    state: "todo"
+  } : {
+    command: "git.push",
+    detail: `Up to date with ${status.remotes[0]}.`,
+    id: "remote",
+    label: "Push to a remote",
+    state: "done"
+  };
+}
+function providerStep() {
+  const deploy = currentDeploy();
+  if (deploy) {
+    return {
+      command: "publish.setUp",
+      detail: `Cloudflare Pages project ${deploy.projectName}.`,
+      id: "provider",
+      label: "Connect a deploy provider",
+      state: "done"
+    };
+  }
+  return platformSupportsPublish() ? {
+    command: "publish.setUp",
+    detail: "Connecting one makes every commit build and publish on its own.",
+    id: "provider",
+    label: "Connect a deploy provider",
+    state: "todo"
+  } : {
+    command: "publish.setUp",
+    detail: "This platform cannot reach the Cloudflare API. Commit and push instead — your host " + "runs bunx jx build and serves dist/.",
+    id: "provider",
+    label: "Connect a deploy provider",
+    state: "unknown"
+  };
+}
+function deployedStep() {
+  if (!currentDeploy()) {
+    return {
+      command: "publish.deploy",
+      detail: "Nothing has been deployed, because no provider is connected.",
+      id: "deployed",
+      label: "Deploy",
+      state: "todo"
+    };
+  }
+  if (!_seen.asked) {
+    return {
+      command: "publish.deploy",
+      detail: "Cloudflare has not been asked yet, so this is not a claim that nothing shipped.",
+      id: "deployed",
+      label: "Deploy",
+      state: "unknown"
+    };
+  }
+  if (_seen.observed === null) {
+    return {
+      command: "publish.deploy",
+      detail: "Cloudflare reports no deployments for this project.",
+      id: "deployed",
+      label: "Deploy",
+      state: "todo"
+    };
+  }
+  const { observed } = _seen;
+  return observed.status === "success" ? {
+    command: "publish.deploy",
+    detail: `${observed.environment} — ${observed.url}`,
+    id: "deployed",
+    label: "Deploy",
+    state: "done"
+  } : {
+    command: "publish.deploy",
+    detail: `Last deployment ${observed.stage}: ${observed.status}.`,
+    id: "deployed",
+    label: "Deploy",
+    state: "todo"
+  };
+}
+function deployChecklist() {
+  return [repoStep(), remoteStep(), providerStep(), deployedStep()];
+}
+function nextDeployStep() {
+  return deployChecklist().find((step) => step.state !== "done") ?? null;
+}
+function deployStatusItem() {
+  if (!projectState) {
+    return null;
+  }
+  const next = nextDeployStep();
+  if (next) {
+    return { command: next.command, label: next.label, title: next.detail };
+  }
+  const url = currentDeploy()?.productionUrl;
+  return {
+    command: "publish.openDashboard",
+    label: "Deployed",
+    title: url ?? "Everything this project needs to ship is in place."
+  };
+}
+var STEP_ICON = {
+  done: "✓",
+  todo: "·",
+  unknown: "?"
+};
+function stepView(step) {
+  return {
+    icon: STEP_ICON[step.state],
+    id: step.id,
+    state: step.state,
+    text: step.state === "done" ? step.label : `${step.label} — ${step.detail}`
+  };
+}
+function actionView(step) {
+  const none = { actionDisabled: false, actionLabel: "", actionTitle: "", hasAction: false };
+  if (!step) {
+    return none;
+  }
+  const registry = activeRegistry();
+  const command = registry?.get(step.command);
+  if (!registry || !command || !registry.isVisible(step.command)) {
+    return none;
+  }
+  const reason = registry.disabledReason(step.command);
+  return {
+    actionDisabled: reason !== undefined,
+    actionLabel: command.title,
+    actionTitle: reason ? `${command.title} — requires ${reason}` : command.title,
+    hasAction: true
+  };
+}
+function deployChecklistView() {
+  if (!projectState) {
+    return {
+      actionDisabled: false,
+      actionLabel: "",
+      actionTitle: "",
+      hasAction: false,
+      hasProject: false,
+      rowIcon: "",
+      rowState: "running",
+      steps: [],
+      summary: ""
+    };
+  }
+  const steps = deployChecklist();
+  const next = steps.find((step) => step.state !== "done") ?? null;
+  return {
+    ...actionView(next),
+    hasProject: true,
+    rowIcon: next ? "⋯" : "✓",
+    rowState: next ? "running" : "done",
+    steps: steps.map((entry) => stepView(entry)),
+    summary: next ? next.detail : "Everything this project needs to ship is in place."
+  };
+}
+function runNextStep() {
+  const next = nextDeployStep();
+  if (!next) {
+    return;
+  }
+  activeRegistry()?.run(next.command);
+}
+var CHECKLIST_SURFACE = { project: deployChecklistView, runAction: runNextStep };
+function syncDeployChecklist(host) {
+  const container = host.querySelector("[data-deploy-checklist]");
+  if (!container) {
+    disposeDeployChecklistSurface();
+    return;
+  }
+  mountDeployChecklistSurface(container, CHECKLIST_SURFACE);
+}
+
+export { platformSupportsPublish, listAccounts2, latestDeployment, writeDeployConfig, connectDeploy, currentDeploy, noteDeployment, deployStatusItem, syncDeployChecklist };
+
+//# debugId=D0D91CF5DFF5DC8F64756E2164756E21
+//# sourceMappingURL=studio-tb3ev01j.js.map