mioku-plugin-help 2.0.0 → 2.1.1

package/theme.ts

@@ -0,0 +1,138 @@
+/**
+ * Visual theme shared by the help and status panels.
+ *
+ * Both panels render the same visual system (760px wide, ACG background
+ * image, blurred glass shell, etc.), so they share a single `HelpTheme`
+ * object. Callers branch on `isNightMode` to pick the day/night variant.
+ */
+
+export interface HelpTheme {
+  isNightMode: boolean;
+  pageBg: string;
+  shellBg: string;
+  pageAccent: string;
+  pageGrid: string;
+  sceneOpacity: string;
+  sceneFilter: string;
+  sceneMask: string;
+  sceneGlow: string;
+  shellBorder: string;
+  shellShadow: string;
+  heroBg: string;
+  heroBorder: string;
+  heroGlow: string;
+  eyebrow: string;
+  title: string;
+  subtitle: string;
+  panelBg: string;
+  panelBorder: string;
+  panelShadow: string;
+  panelTitle: string;
+  panelDesc: string;
+  commandBg: string;
+  commandBorder: string;
+  commandTitle: string;
+  commandDesc: string;
+  tagBg: string;
+  tagBorder: string;
+  tagText: string;
+  emptyText: string;
+  footerBg: string;
+  footerBorder: string;
+  footerLabel: string;
+  footerText: string;
+  divider: string;
+}
+
+export const HELP_BACKGROUND_IMAGE_URL =
+  "https://uapis.cn/api/v1/random/image?category=acg&type=mb";
+
+export function getHelpTheme(isNightMode: boolean): HelpTheme {
+  if (isNightMode) {
+    return {
+      isNightMode: true,
+      pageBg: "linear-gradient(180deg, #07141c 0%, #0b1c25 52%, #102730 100%)",
+      shellBg: "rgba(6, 19, 25, 0.34)",
+      pageAccent:
+        "radial-gradient(circle at 18% 14%, rgba(76, 201, 191, 0.18), transparent 34%), radial-gradient(circle at 82% 10%, rgba(34, 211, 238, 0.12), transparent 28%), radial-gradient(circle at 50% 100%, rgba(45, 212, 191, 0.1), transparent 42%)",
+      pageGrid:
+        "linear-gradient(rgba(151, 214, 210, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(151, 214, 210, 0.04) 1px, transparent 1px)",
+      sceneOpacity: "0.48",
+      sceneFilter: "blur(1.5px) saturate(0.96) contrast(1.05) brightness(0.72)",
+      sceneMask:
+        "linear-gradient(180deg, rgba(3, 11, 15, 0.34), rgba(4, 16, 22, 0.2) 26%, rgba(4, 14, 20, 0.06) 52%, rgba(3, 10, 14, 0.4) 100%)",
+      sceneGlow:
+        "radial-gradient(circle at 24% 16%, rgba(126, 231, 221, 0.16), transparent 28%), radial-gradient(circle at 78% 10%, rgba(34, 211, 238, 0.14), transparent 26%)",
+      shellBorder: "rgba(116, 202, 200, 0.18)",
+      shellShadow: "0 32px 70px rgba(1, 11, 16, 0.45)",
+      heroBg:
+        "linear-gradient(135deg, rgba(16, 40, 50, 0.94), rgba(14, 32, 42, 0.88))",
+      heroBorder: "rgba(105, 196, 194, 0.24)",
+      heroGlow: "rgba(77, 217, 200, 0.16)",
+      eyebrow: "#7ee7dd",
+      title: "#ecfeff",
+      subtitle: "#b9d7d8",
+      panelBg: "rgba(12, 29, 38, 0.86)",
+      panelBorder: "rgba(105, 196, 194, 0.16)",
+      panelShadow: "0 18px 42px rgba(0, 0, 0, 0.22)",
+      panelTitle: "#f0fdff",
+      panelDesc: "#a8cdd0",
+      commandBg: "rgba(18, 41, 50, 0.92)",
+      commandBorder: "rgba(108, 185, 182, 0.14)",
+      commandTitle: "#83f0e1",
+      commandDesc: "#d8eeed",
+      tagBg: "rgba(25, 52, 62, 0.9)",
+      tagBorder: "rgba(125, 218, 211, 0.25)",
+      tagText: "#9af8eb",
+      emptyText: "#78999a",
+      footerBg: "rgba(10, 24, 32, 0.82)",
+      footerBorder: "rgba(105, 196, 194, 0.16)",
+      footerLabel: "#85aeb0",
+      footerText: "#dffcf8",
+      divider: "rgba(105, 196, 194, 0.18)",
+    };
+  }
+
+  return {
+    isNightMode: false,
+    pageBg: "linear-gradient(180deg, #eef6f7 0%, #f6fbfb 48%, #edf5f7 100%)",
+    shellBg: "rgba(255, 255, 255, 0.42)",
+    pageAccent:
+      "radial-gradient(circle at 12% 10%, rgba(45, 212, 191, 0.18), transparent 28%), radial-gradient(circle at 88% 0%, rgba(56, 189, 248, 0.14), transparent 24%), radial-gradient(circle at 50% 100%, rgba(13, 148, 136, 0.08), transparent 44%)",
+    pageGrid:
+      "linear-gradient(rgba(17, 94, 89, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 94, 89, 0.05) 1px, transparent 1px)",
+    sceneOpacity: "0.42",
+    sceneFilter: "blur(1.5px) saturate(0.98) contrast(1.02) brightness(1.03)",
+    sceneMask:
+      "linear-gradient(180deg, rgba(244, 250, 251, 0.4), rgba(244, 250, 251, 0.22) 30%, rgba(244, 250, 251, 0.04) 58%, rgba(237, 245, 247, 0.46) 100%)",
+    sceneGlow:
+      "radial-gradient(circle at 18% 14%, rgba(45, 212, 191, 0.14), transparent 28%), radial-gradient(circle at 82% 8%, rgba(56, 189, 248, 0.12), transparent 24%)",
+    shellBorder: "rgba(148, 196, 204, 0.62)",
+    shellShadow: "0 26px 60px rgba(12, 50, 59, 0.12)",
+    heroBg:
+      "linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 250, 249, 0.94))",
+    heroBorder: "rgba(148, 196, 204, 0.7)",
+    heroGlow: "rgba(45, 212, 191, 0.14)",
+    eyebrow: "#0f766e",
+    title: "#0f172a",
+    subtitle: "#335761",
+    panelBg: "rgba(255, 255, 255, 0.95)",
+    panelBorder: "rgba(148, 196, 204, 0.68)",
+    panelShadow: "0 16px 36px rgba(15, 61, 71, 0.08)",
+    panelTitle: "#102430",
+    panelDesc: "#4b6770",
+    commandBg: "rgba(244, 251, 251, 0.98)",
+    commandBorder: "rgba(185, 217, 221, 0.82)",
+    commandTitle: "#0f766e",
+    commandDesc: "#17353f",
+    tagBg: "rgba(237, 248, 249, 0.98)",
+    tagBorder: "rgba(148, 196, 204, 0.74)",
+    tagText: "#0d6a65",
+    emptyText: "#6f8b93",
+    footerBg: "rgba(255, 255, 255, 0.94)",
+    footerBorder: "rgba(148, 196, 204, 0.72)",
+    footerLabel: "#5b7680",
+    footerText: "#0f172a",
+    divider: "rgba(148, 196, 204, 0.78)",
+  };
+}

package/utils.ts

@@ -0,0 +1,129 @@
+/**
+ * Small cross-feature utilities used by both the help and status panels.
+ *
+ * Kept dependency-free and stateless so it can be imported from anywhere
+ * inside the plugin without creating a cycle.
+ */
+
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+
+/**
+ * Escape user-controlled text before embedding it in an HTML template.
+ * Covers the five characters that change HTML/attribute semantics.
+ */
+export function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;",
+  };
+  return String(text || "").replace(/[&<>"']/g, (match) => map[match]);
+}
+
+/**
+ * Day/night toggle based on local hour. 19:00–07:00 is night; matches the
+ * visual theme's two variants in `theme.ts`.
+ */
+export function checkNightMode(): boolean {
+  const hour = new Date().getHours();
+  return hour >= 19 || hour < 7;
+}
+
+/**
+ * Read a package's `version` field from a path. Returns "unknown" silently
+ * on any error (file not found, invalid JSON, missing field) so callers
+ * can render the footer without try/catch boilerplate.
+ */
+export async function getPackageVersion(
+  packageJsonPath: string,
+): Promise<string> {
+  try {
+    const content = await fs.readFile(packageJsonPath, "utf-8");
+    const pkg = JSON.parse(content);
+    return pkg.version || "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+/**
+ * Same as `getPackageVersion` but also verifies the package's `name`
+ * field. Used by `getRenderVersions` to make sure a stray `package.json`
+ * at the candidate path doesn't get reported as mioki/mioku.
+ */
+async function readNamedPackageVersion(
+  packageJsonPath: string,
+  expectedName: string,
+): Promise<string> {
+  try {
+    const content = await fs.readFile(packageJsonPath, "utf-8");
+    const pkg = JSON.parse(content) as { name?: unknown; version?: unknown };
+    if (pkg?.name === expectedName && typeof pkg.version === "string") {
+      return pkg.version;
+    }
+  } catch {
+    // fall through to "unknown"
+  }
+  return "unknown";
+}
+
+let renderVersionsCache: { miokiVersion: string; miokuVersion: string } | null = null;
+
+/**
+ * Read the installed `mioki` and `mioku` versions from the host project's
+ * `node_modules`.
+ *
+ * In a workspace (Bun / pnpm / yarn) `mioki` is hoisted under
+ * `mioku/node_modules/mioki` because mioki is a peer dep of mioku, so a
+ * bare `node_modules/mioki` lookup misses. We try the nested path first
+ * and fall back to the top-level install path. For `mioku` we look at
+ * the host's top-level and one level up (handles monorepo layouts where
+ * the plugin is loaded from a workspace root).
+ *
+ * Result is memoized — versions don't change at runtime, and the help
+ * setup, the help skill, and the status snapshot all ask for them.
+ */
+export async function getRenderVersions(): Promise<{
+  miokiVersion: string;
+  miokuVersion: string;
+}> {
+  if (renderVersionsCache) {
+    return renderVersionsCache;
+  }
+
+  const miokiCandidates = [
+    // Nested under mioku (the typical workspace case).
+    path.join(process.cwd(), "node_modules", "mioku", "node_modules", "mioki", "package.json"),
+    // Hoisted top-level (a single-package install).
+    path.join(process.cwd(), "node_modules", "mioki", "package.json"),
+  ];
+  const miokuCandidates = [
+    path.join(process.cwd(), "node_modules", "mioku", "package.json"),
+    path.join(process.cwd(), "..", "node_modules", "mioku", "package.json"),
+  ];
+
+  let miokiVersion = "unknown";
+  for (const candidate of miokiCandidates) {
+    const v = await readNamedPackageVersion(candidate, "mioki");
+    if (v !== "unknown") {
+      miokiVersion = v;
+      break;
+    }
+  }
+
+  let miokuVersion = "unknown";
+  for (const candidate of miokuCandidates) {
+    const v = await readNamedPackageVersion(candidate, "mioku");
+    if (v !== "unknown") {
+      miokuVersion = v;
+      break;
+    }
+  }
+
+  renderVersionsCache = { miokiVersion, miokuVersion };
+  return renderVersionsCache;
+}
+