npm - @namewta/speculo - Versions diffs - 0.8.5 → 0.8.7 - Mend

@namewta/speculo 0.8.5 → 0.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/mountain.jpg ADDED Viewed

Binary file

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/workspace.jpg ADDED Viewed

Binary file

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/index.html ADDED Viewed

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>开源 UI 风格样板库</title>
+  <link rel="stylesheet" href="styles/base.css">
+  <link rel="stylesheet" href="styles/pages.css">
+</head>
+<body class="gallery-page">
+  <div class="gallery-shell">
+    <header class="gallery-topbar">
+      <div class="utility-mark"><i data-lucide="panels-top-left"></i></div>
+      <strong>UI 风格样板库</strong>
+      <span>基于 38 个开源项目的视觉与架构研究</span>
+      <a class="btn" href="../report/OPEN_SOURCE_UI_RESEARCH_2026.md" style="margin-left:auto"><i data-lucide="book-open"></i>研究报告</a>
+    </header>
+    <main class="gallery-main">
+      <section class="gallery-summary">
+        <div>
+          <h1>从布局、密度和交互出发比较八种产品风格</h1>
+          <p>每个样板都是独立 HTML，可直接打开、检查变量并作为原型起点。选择与你的任务模型最接近的一类，再调整品牌色，而不是只复制表面装饰。</p>
+        </div>
+        <div class="gallery-metrics" aria-label="样板库统计">
+          <div class="metric"><b>8</b><span>独立风格</span></div>
+          <div class="metric"><b>3</b><span>端类型</span></div>
+          <div class="metric"><b>38</b><span>研究项目</span></div>
+        </div>
+      </section>
+      <section class="style-grid" aria-label="风格页面">
+        <a class="style-card" href="01-dense-ide.html">
+          <div class="style-preview preview-ide"><div class="mini-app"><i class="mini-top"></i><i class="mini-rail"></i><i class="mini-side"></i><i class="mini-main"></i><i class="mini-right"></i><i class="mini-status"></i></div></div>
+          <div class="style-card-body"><span class="style-number">01 / cdesktop</span><h2>高密度 IDE</h2><p>方正、紧凑、多窗格。文件树、编辑器、diff 与终端同时可见。</p><div class="style-tags"><span>2-4px</span><span>12-13px</span><span>橙色强调</span></div></div>
+        </a>
+        <a class="style-card" href="02-monochrome-console.html">
+          <div class="style-preview preview-console"><div class="mini-app"><i class="mini-top"></i><i class="mini-rail"></i><i class="mini-side"></i><i class="mini-main"></i><i class="mini-right"></i><i class="mini-status"></i></div></div>
+          <div class="style-card-body"><span class="style-number">02 / Opcode</span><h2>单色桌面控制台</h2><p>近乎无品牌色，靠表面亮度和边框构建高可靠管理界面。</p><div class="style-tags"><span>4-12px</span><span>Inter</span><span>深色优先</span></div></div>
+        </a>
+        <a class="style-card" href="03-soft-personal-ai.html">
+          <div class="style-preview preview-soft"><div class="mini-app"><i class="mini-top"></i><i class="mini-rail"></i><i class="mini-side"></i><i class="mini-main"></i><i class="mini-right"></i><i class="mini-status"></i></div></div>
+          <div class="style-card-body"><span class="style-number">03 / CodePilot</span><h2>柔和个人 AI 桌面</h2><p>暖中性、浮动窗格、柔和阴影，适合个人助手与长期陪伴型工具。</p><div class="style-tags"><span>12-20px</span><span>OKLCH</span><span>平台材质</span></div></div>
+        </a>
+        <a class="style-card" href="04-responsive-web.html">
+          <div class="style-preview preview-web"><div class="mini-app"><i class="mini-top"></i><i class="mini-rail"></i><i class="mini-side"></i><i class="mini-main"></i><i class="mini-right"></i><i class="mini-status"></i></div></div>
+          <div class="style-card-body"><span class="style-number">04 / CloudCLI</span><h2>响应式 Web 工作台</h2><p>桌面保留三栏，窄屏重组为 drawer、全屏详情和底部导航。</p><div class="style-tags"><span>6-8px</span><span>PWA</span><span>安全区</span></div></div>
+        </a>
+        <a class="style-card" href="05-mobile-supervisor.html">
+          <div class="style-preview preview-mobile"><div class="mini-app"><i class="mini-top"></i><i class="mini-main"></i><i class="mini-status"></i></div></div>
+          <div class="style-card-body"><span class="style-number">05 / Happy</span><h2>移动监督与审批</h2><p>以 Agent 状态、权限批准、通知和短 follow-up 为移动端核心。</p><div class="style-tags"><span>16-24px</span><span>15-17px</span><span>触屏优先</span></div></div>
+        </a>
+        <a class="style-card" href="06-cross-platform-workspace.html">
+          <div class="style-preview preview-paseo"><div class="mini-app"><i class="mini-top"></i><i class="mini-rail"></i><i class="mini-side"></i><i class="mini-main"></i><i class="mini-right"></i><i class="mini-status"></i></div></div>
+          <div class="style-card-body"><span class="style-number">06 / Paseo</span><h2>多端 Agent 工作区</h2><p>统一 workspace、Agent、文件与终端对象，再按平台切换表现形态。</p><div class="style-tags"><span>4-8px</span><span>12/14/15px</span><span>状态色分层</span></div></div>
+        </a>
+        <a class="style-card" href="07-local-first-content.html">
+          <div class="style-preview preview-content"><div class="mini-app"><i class="mini-top"></i><i class="mini-rail"></i><i class="mini-side"></i><i class="mini-main"></i><i class="mini-right"></i><i class="mini-status"></i></div></div>
+          <div class="style-card-body"><span class="style-number">07 / Notesnook + Joplin</span><h2>Local-first 内容编辑器</h2><p>导航安静、正文优先，突出同步、离线、层级和长时间阅读。</p><div class="style-tags"><span>4-8px</span><span>17px 正文</span><span>暖灰</span></div></div>
+        </a>
+        <a class="style-card" href="08-media-first.html">
+          <div class="style-preview preview-media"><div class="mini-app"><i class="mini-top"></i><i class="mini-rail"></i><i class="mini-side"></i><i class="mini-main"></i><i class="mini-right"></i><i class="mini-status"></i></div></div>
+          <div class="style-card-body"><span class="style-number">08 / Immich</span><h2>媒体优先个人应用</h2><p>内容本身成为第一视觉信号，chrome 退后，状态与操作按需出现。</p><div class="style-tags"><span>沉浸网格</span><span>深色</span><span>渐进操作</span></div></div>
+        </a>
+      </section>
+    </main>
+  </div>
+  <script src="assets/lucide.js"></script>
+  <script src="scripts/gallery.js"></script>
+</body>
+</html>

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/package-lock.json ADDED Viewed

@@ -0,0 +1,78 @@
+{
+  "name": "open-source-ui-style-gallery",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "open-source-ui-style-gallery",
+      "version": "1.0.0",
+      "devDependencies": {
+        "@playwright/test": "1.62.1"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz",
+      "integrity": "sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+      "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+      "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    }
+  }
+}

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/package.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "name": "open-source-ui-style-gallery",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Static HTML style gallery derived from open-source UI research",
+  "scripts": {
+    "test": "playwright test tests/gallery.spec.js --workers=4"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.62.1"
+  }
+}

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/screenshots/index-desktop.png ADDED Viewed

Binary file

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/scripts/gallery.js ADDED Viewed

@@ -0,0 +1,134 @@
+(function () {
+  const root = document.documentElement;
+  const body = document.body;
+  const savedTheme = localStorage.getItem("ui-gallery-theme");
+  const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
+    root.classList.add("dark");
+  }
+  function refreshIcons() {
+    if (window.lucide) {
+      window.lucide.createIcons({ attrs: { "aria-hidden": "true" } });
+    }
+  }
+  function updateThemeLabels() {
+    document.querySelectorAll("[data-theme-toggle]").forEach((button) => {
+      const dark = root.classList.contains("dark");
+      button.setAttribute("aria-label", dark ? "切换到浅色主题" : "切换到深色主题");
+      button.setAttribute("title", dark ? "浅色主题" : "深色主题");
+      button.innerHTML = `<i data-lucide="${dark ? "sun" : "moon"}"></i>`;
+    });
+    refreshIcons();
+  }
+  document.addEventListener("click", (event) => {
+    const themeButton = event.target.closest("[data-theme-toggle]");
+    if (themeButton) {
+      root.classList.toggle("dark");
+      localStorage.setItem("ui-gallery-theme", root.classList.contains("dark") ? "dark" : "light");
+      updateThemeLabels();
+      return;
+    }
+    const tokenButton = event.target.closest("[data-token-toggle]");
+    if (tokenButton) {
+      const drawer = document.querySelector(".token-drawer");
+      if (drawer) {
+        const open = drawer.classList.toggle("open");
+        tokenButton.setAttribute("aria-expanded", String(open));
+      }
+      return;
+    }
+    const drawerClose = event.target.closest("[data-token-close]");
+    if (drawerClose) {
+      document.querySelector(".token-drawer")?.classList.remove("open");
+      document.querySelector("[data-token-toggle]")?.setAttribute("aria-expanded", "false");
+      return;
+    }
+    const drawerButton = event.target.closest("[data-sidebar-toggle]");
+    if (drawerButton) {
+      const drawer = document.querySelector(".sidebar.drawer");
+      if (drawer) {
+        const open = drawer.classList.toggle("open");
+        drawerButton.setAttribute("aria-expanded", String(open));
+      }
+      return;
+    }
+    const densityButton = event.target.closest("[data-density]");
+    if (densityButton) {
+      const density = densityButton.dataset.density;
+      body.classList.remove("density-compact", "density-default", "density-comfortable");
+      body.classList.add(`density-${density}`);
+      document.querySelectorAll("[data-density]").forEach((button) => {
+        button.classList.toggle("active", button === densityButton);
+      });
+      return;
+    }
+    const tab = event.target.closest("[data-tab-target]");
+    if (tab) {
+      const group = tab.closest("[data-tabs]") || document;
+      group.querySelectorAll("[data-tab-target]").forEach((item) => item.classList.remove("active"));
+      tab.classList.add("active");
+      const target = tab.dataset.tabTarget;
+      document.querySelectorAll("[data-tab-panel]").forEach((panel) => {
+        panel.hidden = panel.dataset.tabPanel !== target;
+      });
+      return;
+    }
+    const navRow = event.target.closest(".nav-row");
+    if (navRow && !navRow.closest("a")) {
+      navRow.parentElement?.querySelectorAll(".nav-row").forEach((row) => row.classList.remove("active"));
+      navRow.classList.add("active");
+    }
+    const sendButton = event.target.closest("[data-send]");
+    if (sendButton) {
+      const composer = sendButton.closest(".composer") || document;
+      const textarea = composer.querySelector("textarea");
+      if (textarea && textarea.value.trim()) {
+        sendButton.innerHTML = '<i data-lucide="loader-circle"></i>';
+        sendButton.classList.add("is-loading");
+        textarea.value = "";
+        setTimeout(() => {
+          sendButton.innerHTML = '<i data-lucide="arrow-up"></i>';
+          sendButton.classList.remove("is-loading");
+          refreshIcons();
+        }, 900);
+        refreshIcons();
+      }
+    }
+    const approval = event.target.closest("[data-approval]");
+    if (approval) {
+      const card = approval.closest(".approval-card");
+      if (card) {
+        card.dataset.state = approval.dataset.approval;
+        card.querySelector(".approval-actions")?.remove();
+        const status = document.createElement("div");
+        status.className = `approval-result ${approval.dataset.approval}`;
+        status.textContent = approval.dataset.approval === "allow" ? "已允许本次操作" : "已拒绝操作";
+        card.appendChild(status);
+      }
+    }
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      document.querySelector(".token-drawer")?.classList.remove("open");
+      document.querySelector(".sidebar.drawer")?.classList.remove("open");
+    }
+  });
+  window.addEventListener("DOMContentLoaded", () => {
+    updateThemeLabels();
+    refreshIcons();
+  });
+})();