@iyexin/mio-cli 0.0.0-stage → 0.1.0

package/templates/web/src/main.ts

@@ -0,0 +1,158 @@
+import { Mio, app, clipboard, fs } from "@iyexin/mio-api";
+
+const el = <T extends HTMLElement>(selector: string): T => {
+  const node = document.querySelector<T>(selector);
+  if (!node) throw new Error(`Missing element: ${selector}`);
+  return node;
+};
+
+const output = el<HTMLPreElement>("#output");
+const logId = el<HTMLSpanElement>("#log-id");
+const bridgeStatus = el<HTMLSpanElement>("#bridge-status");
+const bridgeText = el<HTMLSpanElement>("#bridge-text");
+
+let callCounter = 0;
+
+function print(value: unknown, tone: "normal" | "error" = "normal", label?: string): void {
+  output.dataset.tone = tone;
+  output.textContent =
+    typeof value === "string" ? value : JSON.stringify(value, null, 2);
+  callCounter += 1;
+  logId.textContent = label ? `${label} · #${callCounter}` : `#${callCounter}`;
+}
+
+function setBridge(state: "pending" | "ready" | "error", label: string): void {
+  bridgeStatus.dataset.state = state;
+  bridgeText.textContent = label;
+}
+
+function describe(error: unknown): string {
+  if (error instanceof Error) {
+    const code = (error as Error & { code?: string }).code;
+    return code ? `${code}: ${error.message}` : error.message;
+  }
+  return String(error);
+}
+
+async function boot(): Promise<void> {
+  try {
+    await Mio.ready;
+    setBridge("ready", "connected");
+
+    const info = await app.info();
+    el("#app-name").textContent = info.name;
+    el("#spec-id").textContent = info.id;
+    el("#spec-version").textContent = info.version;
+    el("#spec-platform").textContent = info.platform;
+    el("#spec-api").textContent = `api ${info.apiVersion}`;
+    el("#spec-template").textContent = `template ${info.templateVersion}`;
+    el("#masthead-meta").textContent = `shell ${info.templateVersion}`;
+    document.title = info.name;
+
+    print(
+      {
+        bridge: "connected",
+        app: info.id,
+        platform: info.platform,
+        api: info.apiVersion,
+      },
+      "normal",
+      "ready",
+    );
+
+    await Mio.on("app.lifecycle", (event) => {
+      print({ event: "app.lifecycle", data: event }, "normal", "lifecycle");
+    });
+  } catch (error) {
+    setBridge("error", "unavailable");
+    print(describe(error), "error", "error");
+  }
+}
+
+const actions: Record<string, () => Promise<{ result: unknown; label: string }>> = {
+  async ping() {
+    return { label: "ping", result: await Mio.invoke("ping") };
+  },
+
+  async clipboard() {
+    const text = `Mio clipboard ${Date.now()}`;
+    await clipboard.writeText(text);
+    const readBack = await clipboard.readText();
+    return { label: "clipboard", result: { wrote: text.length, match: readBack === text } };
+  },
+
+  async write() {
+    const path = "notes/hello.txt";
+    const text = `Written at ${new Date().toISOString()}`;
+    await fs.writeText(path, text);
+    return {
+      label: "file",
+      result: {
+        path,
+        bytes: text.length,
+        exists: await fs.exists(path),
+        content: await fs.readText(path),
+      },
+    };
+  },
+
+  async binary() {
+    const size = 64 * 1024 * 1024;
+    const bytes = new Uint8Array(size);
+    crypto.getRandomValues(bytes.subarray(0, 65536));
+    for (let index = 65536; index < size; index += 1) {
+      bytes[index] = bytes[index % 65536]!;
+    }
+
+    const path = "blobs/round-trip.bin";
+    const started = performance.now();
+    await fs.writeBytes(path, bytes);
+    const readBack = await fs.readBytes(path);
+    const elapsedMs = Math.round(performance.now() - started);
+
+    let firstDifference = -1;
+    for (let index = 0; index < bytes.length; index += 1) {
+      if (bytes[index] !== readBack[index]) {
+        firstDifference = index;
+        break;
+      }
+    }
+
+    return {
+      label: "binary",
+      result: {
+        path,
+        written: bytes.length,
+        read: readBack.length,
+        identical: firstDifference === -1 && readBack.length === bytes.length,
+        firstDifference,
+        elapsedMs,
+      },
+    };
+  },
+};
+
+for (const button of document.querySelectorAll<HTMLButtonElement>("[data-action]")) {
+  button.addEventListener("click", async () => {
+    const action = button.dataset.action;
+    const run = action ? actions[action] : undefined;
+    if (!run) return;
+
+    const name = button.querySelector<HTMLSpanElement>(".call-name");
+    const original = name?.textContent ?? "";
+    button.disabled = true;
+    if (name) name.textContent = "Running…";
+
+    try {
+      const { result, label } = await run();
+      print(result, "normal", label);
+    } catch (error) {
+      print(describe(error), "error", action ?? "error");
+    } finally {
+      button.disabled = false;
+      if (name) name.textContent = original;
+    }
+  });
+}
+
+void boot();

package/templates/web/src/style.css

@@ -0,0 +1,389 @@
+:root {
+  --paper: #fbfaf7;
+  --ink: #17181a;
+  --ink-soft: #55585e;
+  --ink-faint: #8b8d92;
+  --rule: #e2dfd8;
+  --rule-strong: #cfcbc2;
+  --accent: #4e6b85;
+  --ok: #3d8b63;
+  --warn: #b2863f;
+  --err: #b04a42;
+
+  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: light;
+}
+
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 15px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+.frame {
+  width: min(760px, calc(100vw - 48px));
+  margin: 0 auto;
+  padding: 34px 0 64px;
+}
+
+/* ---------------- masthead ---------------- */
+
+.masthead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--rule);
+}
+
+.wordmark {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.34em;
+  text-indent: 0.34em;
+  color: var(--ink);
+}
+
+.masthead-meta {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-faint);
+  letter-spacing: 0.02em;
+}
+
+/* ---------------- intro ---------------- */
+
+.intro {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: end;
+  gap: 32px;
+  padding: 52px 0 44px;
+}
+
+.intro h1 {
+  margin: 0;
+  font-size: clamp(38px, 7.2vw, 58px);
+  font-weight: 600;
+  letter-spacing: -0.035em;
+  line-height: 1.02;
+}
+
+.lede {
+  margin: 16px 0 0;
+  max-width: 38ch;
+  color: var(--ink-soft);
+  font-size: 15px;
+}
+
+.mark {
+  width: 104px;
+  height: 104px;
+  display: block;
+  margin-bottom: 4px;
+}
+
+/* ---------------- spec strip ---------------- */
+
+.spec {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
+  margin: 0;
+  border-top: 1px solid var(--rule);
+  border-bottom: 1px solid var(--rule);
+}
+
+.spec-cell {
+  padding: 14px 0 15px;
+  min-width: 0;
+}
+
+.spec-cell + .spec-cell {
+  padding-left: 20px;
+  border-left: 1px solid var(--rule);
+}
+
+.spec dt {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  margin-bottom: 5px;
+}
+
+.spec dd {
+  margin: 0;
+  font-size: 13px;
+  color: var(--ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mono {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------------- status ---------------- */
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ink-faint);
+  flex: none;
+}
+
+.status[data-state="pending"] .status-dot {
+  background: var(--warn);
+}
+
+.status[data-state="ready"] .status-dot {
+  background: var(--ok);
+}
+
+.status[data-state="error"] .status-dot {
+  background: var(--err);
+}
+
+/* ---------------- calls ---------------- */
+
+.section-label {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  margin: 0;
+}
+
+.calls {
+  margin-top: 40px;
+}
+
+.call-list {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+  border-top: 1px solid var(--rule);
+}
+
+.call-list li {
+  border-bottom: 1px solid var(--rule);
+}
+
+.call-list button {
+  appearance: none;
+  display: grid;
+  grid-template-columns: 40px minmax(0, auto) 1fr 20px;
+  align-items: baseline;
+  gap: 16px;
+  width: 100%;
+  padding: 15px 8px 15px 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 130ms ease;
+}
+
+.call-list button:hover {
+  background: rgba(0, 0, 0, 0.022);
+}
+
+.call-list button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.call-list button[disabled] {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.num {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+.call-name {
+  font-size: 15px;
+  color: var(--ink);
+}
+
+.call-note {
+  font-size: 12.5px;
+  color: var(--ink-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.arrow {
+  justify-self: end;
+  color: var(--ink-faint);
+  transition:
+    transform 140ms ease,
+    color 140ms ease;
+}
+
+.call-list button:hover .arrow {
+  transform: translateX(3px);
+  color: var(--accent);
+}
+
+/* ---------------- log ---------------- */
+
+.log {
+  margin-top: 40px;
+}
+
+.log-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.log-id {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+#output {
+  margin: 0;
+  padding: 16px 18px;
+  min-height: 92px;
+  max-height: 240px;
+  overflow: auto;
+  background: #f4f2ee;
+  border: 1px solid var(--rule);
+  border-left: 2px solid var(--rule-strong);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  line-height: 1.7;
+  color: #2c2f33;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+#output[data-tone="error"] {
+  color: var(--err);
+  background: #fbf3f2;
+  border-left-color: var(--err);
+}
+
+/* ---------------- colophon ---------------- */
+
+.colophon {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 18px;
+  margin-top: 44px;
+  padding-top: 16px;
+  border-top: 1px solid var(--rule);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-faint);
+}
+
+/* ---------------- responsive ---------------- */
+
+@media (max-width: 640px) {
+  .frame {
+    width: calc(100vw - 36px);
+    padding-top: 24px;
+  }
+
+  .intro {
+    grid-template-columns: 1fr;
+    gap: 28px;
+    padding: 36px 0 32px;
+  }
+
+  .intro h1 {
+    font-size: clamp(34px, 11vw, 46px);
+  }
+
+  .mark {
+    width: 72px;
+    height: 72px;
+    order: -1;
+    margin: 0 0 4px;
+  }
+
+  .spec {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .spec-cell:nth-child(3) {
+    border-left: 0;
+    padding-left: 0;
+  }
+
+  .spec-cell:nth-child(n + 3) {
+    border-top: 1px solid var(--rule);
+  }
+
+  .call-list button {
+    grid-template-columns: 30px minmax(0, 1fr) 18px;
+    grid-template-areas:
+      "num  name arrow"
+      "num  note arrow";
+    row-gap: 2px;
+    column-gap: 12px;
+    padding: 14px 4px 14px 0;
+  }
+
+  .num {
+    grid-area: num;
+    align-self: start;
+    padding-top: 3px;
+  }
+
+  .call-name {
+    grid-area: name;
+  }
+
+  .call-note {
+    grid-area: note;
+    white-space: normal;
+  }
+
+  .arrow {
+    grid-area: arrow;
+    align-self: center;
+  }
+}

package/templates/web/vite.config.ts

@@ -0,0 +1,12 @@
+export default {
+  base: "./",
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+  server: {
+    watch: {
+      ignored: ["**/.mio/**", "**/build/**", "**/dist/**"],
+    },
+  },
+};