@namewta/speculo 0.8.6 → 0.8.7

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/data/projects.json

@@ -0,0 +1,253 @@
+{
+  "asOf": "2026-08-30",
+  "notes": "starsApprox is a dated, rounded snapshot; license is a research note, not legal advice",
+  "projects": [
+    {
+      "id": "supabase-studio",
+      "name": "Supabase Studio",
+      "repo": "https://github.com/supabase/supabase",
+      "category": "data-platform",
+      "starsApprox": 108600,
+      "license": "Apache-2.0",
+      "licenseClass": "open-source",
+      "frontend": ["React", "Next.js", "TanStack", "Tailwind CSS 4", "Radix", "Monaco"],
+      "layout": "product rail + module sidebar + data workspace + resizable panel",
+      "bestFor": ["design-system architecture", "data tools", "semantic themes"],
+      "detailReport": "research/data-dev-tools.md"
+    },
+    {
+      "id": "grafana",
+      "name": "Grafana",
+      "repo": "https://github.com/grafana/grafana",
+      "category": "observability",
+      "starsApprox": 76500,
+      "license": "AGPL-3.0-only",
+      "licenseClass": "copyleft",
+      "frontend": ["React 19", "Emotion", "Redux", "RxJS", "Grafana UI"],
+      "layout": "top bar + dockable mega menu + dashboard canvas",
+      "bestFor": ["dashboard density", "theme contracts", "plugin UI"],
+      "detailReport": "research/data-dev-tools.md"
+    },
+    {
+      "id": "metabase",
+      "name": "Metabase",
+      "repo": "https://github.com/metabase/metabase",
+      "category": "business-intelligence",
+      "starsApprox": 49000,
+      "license": "AGPL core; commercial enterprise directory",
+      "licenseClass": "mixed",
+      "frontend": ["React 18", "Mantine 8", "Redux Toolkit", "RTK Query", "CSS Modules"],
+      "layout": "app bar + collection sidebar + query and dashboard workspace",
+      "bestFor": ["accessible analytics", "theme migration", "command palette"],
+      "detailReport": "research/data-dev-tools.md"
+    },
+    {
+      "id": "dbeaver",
+      "name": "DBeaver Community",
+      "repo": "https://github.com/dbeaver/dbeaver",
+      "category": "database-client",
+      "starsApprox": 51600,
+      "license": "Apache-2.0 with separately licensed bundled components",
+      "licenseClass": "mixed",
+      "frontend": ["Java", "Eclipse RCP", "SWT", "JFace", "OSGi"],
+      "layout": "object tree + tabbed editors + docked auxiliary views",
+      "bestFor": ["desktop information density", "context actions", "multi-pane workflows"],
+      "detailReport": "research/data-dev-tools.md"
+    },
+    {
+      "id": "directus",
+      "name": "Directus",
+      "repo": "https://github.com/directus/directus",
+      "category": "data-cms",
+      "starsApprox": 35900,
+      "license": "MSCL-1.0-GPL",
+      "licenseClass": "source-available-restricted",
+      "frontend": ["Vue 3", "Vite", "Pinia", "Reka UI", "SCSS", "CodeMirror"],
+      "layout": "module rail + collection navigation + pluggable layouts + context sidebar",
+      "bestFor": ["schema-driven UI", "extension architecture", "multiple data views"],
+      "detailReport": "research/data-dev-tools.md"
+    },
+    {
+      "id": "appsmith",
+      "name": "Appsmith",
+      "repo": "https://github.com/appsmithorg/appsmith",
+      "category": "low-code",
+      "starsApprox": 40000,
+      "license": "Apache-2.0",
+      "licenseClass": "open-source",
+      "frontend": ["React 17", "Redux Saga", "styled-components", "CodeMirror", "ECharts"],
+      "layout": "entity tree + canvas + property inspector + debugger",
+      "bestFor": ["low-code editors", "property inspectors", "debug feedback"],
+      "detailReport": "research/data-dev-tools.md"
+    },
+    {
+      "id": "dbx",
+      "name": "DBX",
+      "repo": "https://github.com/t8y2/dbx",
+      "category": "database-client",
+      "starsApprox": 16300,
+      "license": "Apache-2.0",
+      "licenseClass": "open-source",
+      "frontend": ["Vue 3", "Tauri 2", "Vite 8", "Tailwind CSS 4", "Reka UI", "CodeMirror 6"],
+      "layout": "connection tree + tabs + editor/data workspace + resizable tool panels",
+      "bestFor": ["lightweight desktop apps", "database workspaces", "AI and MCP integration"],
+      "detailReport": "research/data-dev-tools.md"
+    },
+    {
+      "id": "plane",
+      "name": "Plane",
+      "repo": "https://github.com/makeplane/plane",
+      "category": "project-management",
+      "starsApprox": 58500,
+      "license": "AGPL-3.0",
+      "licenseClass": "copyleft",
+      "frontend": ["React", "React Router", "Vite", "MobX", "Tailwind CSS", "Propel"],
+      "layout": "resizable project sidebar + multi-view workspace + item detail",
+      "bestFor": ["dense work management", "list board gantt views", "peek sidebars"],
+      "detailReport": "research/productivity-collaboration.md"
+    },
+    {
+      "id": "appflowy",
+      "name": "AppFlowy",
+      "repo": "https://github.com/AppFlowy-IO/AppFlowy",
+      "category": "productivity",
+      "starsApprox": 76100,
+      "license": "AGPL-3.0",
+      "licenseClass": "copyleft",
+      "frontend": ["Flutter", "Dart", "BLoC", "GoRouter", "Rust core"],
+      "layout": "plugin workspace + document/database views + native responsive navigation",
+      "bestFor": ["local-first", "true cross-platform", "mobile task reflow"],
+      "detailReport": "research/productivity-collaboration.md"
+    },
+    {
+      "id": "twenty",
+      "name": "Twenty",
+      "repo": "https://github.com/twentyhq/twenty",
+      "category": "crm",
+      "starsApprox": 55900,
+      "license": "AGPL with Section 7 exception; mixed subdirectories",
+      "licenseClass": "mixed",
+      "frontend": ["React 19", "Jotai", "Linaria", "Apollo GraphQL", "Nx"],
+      "layout": "table or pipeline + record side panel + mobile navigation home",
+      "bestFor": ["metadata-driven business UI", "object tables", "record panels"],
+      "detailReport": "research/productivity-collaboration.md"
+    },
+    {
+      "id": "cal",
+      "name": "Cal.com / Cal.diy",
+      "repo": "https://github.com/calcom/cal.diy",
+      "category": "scheduling",
+      "starsApprox": 48000,
+      "license": "MIT",
+      "licenseClass": "open-source",
+      "frontend": ["Next.js 16", "React 18", "Tailwind CSS 4", "tRPC", "Prisma"],
+      "layout": "admin configuration shell + separate public booking flow",
+      "bestFor": ["admin and customer UI separation", "booking forms", "brand customization"],
+      "detailReport": "research/productivity-collaboration.md"
+    },
+    {
+      "id": "outline",
+      "name": "Outline",
+      "repo": "https://github.com/outline/outline",
+      "category": "knowledge-base",
+      "starsApprox": 40400,
+      "license": "BSL-1.1 with competitive Document Service restriction",
+      "licenseClass": "source-available-restricted",
+      "frontend": ["React 17", "MobX", "styled-components", "ProseMirror", "Yjs", "Vite"],
+      "layout": "document tree + focused editor + contextual collaboration tools",
+      "bestFor": ["low-distraction writing", "tree navigation", "command bars"],
+      "detailReport": "research/productivity-collaboration.md"
+    },
+    {
+      "id": "affine",
+      "name": "AFFiNE",
+      "repo": "https://github.com/toeverything/AFFiNE",
+      "category": "documents-whiteboard",
+      "starsApprox": 72000,
+      "license": "mixed by directory: MIT, MPL-2.0 and enterprise terms",
+      "licenseClass": "mixed",
+      "frontend": ["React 19", "Vite", "Electron", "Vanilla Extract", "Jotai", "Yjs"],
+      "layout": "page and edgeless dual modes + floating or resizable sidebars",
+      "bestFor": ["local-first editing", "multi-modal documents", "responsive sidebars"],
+      "detailReport": "research/productivity-collaboration.md"
+    },
+    {
+      "id": "penpot",
+      "name": "Penpot",
+      "repo": "https://github.com/penpot/penpot",
+      "category": "design-tool",
+      "starsApprox": 59000,
+      "license": "MPL-2.0",
+      "licenseClass": "weak-copyleft",
+      "frontend": ["ClojureScript", "React", "SCSS", "WebAssembly"],
+      "layout": "infinite canvas + left object/assets panels + right property inspector",
+      "bestFor": ["professional canvas tools", "native design tokens", "design-to-code handoff"],
+      "detailReport": "research/creative-ai-communication.md"
+    },
+    {
+      "id": "excalidraw",
+      "name": "Excalidraw",
+      "repo": "https://github.com/excalidraw/excalidraw",
+      "category": "whiteboard",
+      "starsApprox": 131000,
+      "license": "MIT",
+      "licenseClass": "open-source",
+      "frontend": ["React", "TypeScript", "SCSS", "Canvas", "Jotai"],
+      "layout": "full-screen canvas + floating tool islands + contextual properties",
+      "bestFor": ["low-learning-curve canvas", "context tools", "hand-drawn visual language"],
+      "detailReport": "research/creative-ai-communication.md"
+    },
+    {
+      "id": "open-webui",
+      "name": "Open WebUI",
+      "repo": "https://github.com/open-webui/open-webui",
+      "category": "ai-workbench",
+      "starsApprox": 150000,
+      "license": "custom Open WebUI license with branding restrictions",
+      "licenseClass": "source-available-restricted",
+      "frontend": ["Svelte 5", "SvelteKit", "TypeScript", "Tailwind CSS 4"],
+      "layout": "conversation sidebar + single-column chat + model tool and RAG workspaces",
+      "bestFor": ["AI conversation IA", "UI text scaling", "progressive model and tool controls"],
+      "detailReport": "research/creative-ai-communication.md"
+    },
+    {
+      "id": "chatwoot",
+      "name": "Chatwoot",
+      "repo": "https://github.com/chatwoot/chatwoot",
+      "category": "customer-support",
+      "starsApprox": 36000,
+      "license": "MIT community code; separately licensed enterprise directory",
+      "licenseClass": "mixed",
+      "frontend": ["Vue 3", "Vite", "Tailwind CSS 3", "Pinia", "Vuex"],
+      "layout": "navigation + queue list + conversation + customer context",
+      "bestFor": ["dense master-detail workspaces", "real-time status", "support context"],
+      "detailReport": "research/creative-ai-communication.md"
+    },
+    {
+      "id": "mattermost",
+      "name": "Mattermost",
+      "repo": "https://github.com/mattermost/mattermost",
+      "category": "team-communication",
+      "starsApprox": 39000,
+      "license": "mixed repository and distribution licenses",
+      "licenseClass": "mixed",
+      "frontend": ["React 18", "TypeScript", "Redux", "SCSS"],
+      "layout": "team rail + channel sidebar + message stream + resizable thread panel",
+      "bestFor": ["complex collaboration UI", "themes", "thread context"],
+      "detailReport": "research/creative-ai-communication.md"
+    },
+    {
+      "id": "hoppscotch",
+      "name": "Hoppscotch",
+      "repo": "https://github.com/hoppscotch/hoppscotch",
+      "category": "api-development",
+      "starsApprox": 80000,
+      "license": "MIT",
+      "licenseClass": "open-source",
+      "frontend": ["Vue 3", "TypeScript", "Vite", "Tailwind CSS 3", "RxJS"],
+      "layout": "protocol navigation + split request and response panes + collection sidebar",
+      "bestFor": ["API workflows", "resizable panes", "protocol-specific navigation"],
+      "detailReport": "research/creative-ai-communication.md"
+    }
+  ]
+}

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/reference/USAGE.md

@@ -0,0 +1,40 @@
+# 可复用 UI 基线
+
+`design-tokens.css` 是根据本研究的跨项目共性整理出的起点，不是任何单一产品的复制品。
+
+## 推荐层级
+
+1. **原始尺度**：字号、间距、圆角与中性色阶。
+2. **语义 token**：`surface`、`text`、`border`、`accent`、`danger` 等角色。
+3. **组件 token**：按钮高度、表格行高、侧栏宽度、弹层阴影。
+4. **业务 token**：任务状态、数据库对象类型、图表序列等领域语义。
+
+业务代码应尽量只消费第 2-4 层，不直接写颜色值。
+
+## 初始密度建议
+
+| 场景 | 正文字号 | 控件高度 | 表格行高 | 常用圆角 |
+|---|---:|---:|---:|---:|
+| 高密度开发/数据工具 | 13-14px | 28-32px | 32-36px | 4-6px |
+| 通用业务后台 | 14px | 32-36px | 36-40px | 6-8px |
+| 内容与协作产品 | 14-16px | 36-40px | 40-44px | 6-8px |
+| 触屏优先界面 | 16px | 44-48px | 44-52px | 8-12px |
+
+不要用缩小字体单独解决信息密度。优先减少重复标签、合并工具栏、使用渐进披露，并允许用户切换密度。
+
+## 布局基线
+
+- 全局图标栏：48-56px。
+- 展开侧栏：224-272px。
+- 顶栏：44-56px。
+- 属性检查器：288-360px，并允许拖动调整。
+- 阅读/表单内容：通常限制在 720-960px。
+- 数据表格、画布和仪表盘：使用可用宽度，不套普通内容最大宽度。
+
+## 使用前必须调整
+
+- 根据品牌对比度替换 `accent`，同时校验浅色、深色和高对比状态。
+- 根据目标输入设备选择控件高度；桌面鼠标密度不能直接用于移动触屏。
+- 对中英文混排测试字体回退、行高、数字等宽和长文本截断。
+- 为所有颜色状态增加非颜色线索，例如图标、文本或形状。
+- 用真实数据验证最长名称、空值、大数字、错误信息和权限状态。

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/reference/design-tokens.css

@@ -0,0 +1,145 @@
+/*
+ * Cross-project baseline synthesized by this research.
+ * These are recommendations, not copied tokens from any single product.
+ */
+
+:root {
+  color-scheme: light;
+
+  /* Typography */
+  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --text-11: 0.6875rem;
+  --text-12: 0.75rem;
+  --text-13: 0.8125rem;
+  --text-14: 0.875rem;
+  --text-16: 1rem;
+  --text-18: 1.125rem;
+  --text-20: 1.25rem;
+  --text-24: 1.5rem;
+  --leading-tight: 1.25;
+  --leading-ui: 1.43;
+  --leading-body: 1.6;
+
+  /* Spacing: 4px base, with 2px for optical correction */
+  --space-0-5: 0.125rem;
+  --space-1: 0.25rem;
+  --space-1-5: 0.375rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Stable UI geometry */
+  --control-xs: 1.5rem;
+  --control-sm: 1.75rem;
+  --control-md: 2rem;
+  --control-lg: 2.5rem;
+  --icon-sm: 0.875rem;
+  --icon-md: 1rem;
+  --icon-lg: 1.25rem;
+  --sidebar-icon-width: 3.25rem;
+  --sidebar-width: 15rem;
+  --inspector-width: 20rem;
+  --topbar-height: 3rem;
+  --content-max: 80rem;
+
+  /* Radius: quiet for work surfaces, larger only for overlays */
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-pill: 999px;
+
+  /* Neutral and semantic color roles */
+  --canvas: #f7f8fa;
+  --surface-1: #ffffff;
+  --surface-2: #f1f3f5;
+  --surface-3: #e9ecef;
+  --overlay: #ffffff;
+  --text-primary: #1f2328;
+  --text-secondary: #59636e;
+  --text-tertiary: #7d8590;
+  --text-disabled: #a7afb8;
+  --border-subtle: #e2e6ea;
+  --border-default: #cbd1d7;
+  --border-strong: #9aa3ad;
+
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --accent-subtle: #eff6ff;
+  --accent-contrast: #ffffff;
+  --success: #16803c;
+  --success-subtle: #ecfdf3;
+  --warning: #a15c00;
+  --warning-subtle: #fff8e6;
+  --danger: #c62f3d;
+  --danger-hover: #a92330;
+  --danger-subtle: #fff0f1;
+  --info: #1267a8;
+  --info-subtle: #edf7ff;
+
+  --hover: rgb(31 35 40 / 5%);
+  --selected: rgb(37 99 235 / 10%);
+  --pressed: rgb(31 35 40 / 10%);
+  --scrim: rgb(15 23 42 / 40%);
+  --focus-ring: 0 0 0 3px rgb(37 99 235 / 25%);
+  --shadow-popover: 0 8px 24px rgb(15 23 42 / 12%), 0 2px 6px rgb(15 23 42 / 8%);
+  --shadow-dialog: 0 20px 48px rgb(15 23 42 / 18%), 0 4px 12px rgb(15 23 42 / 10%);
+
+  --duration-fast: 100ms;
+  --duration-ui: 160ms;
+  --duration-panel: 220ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --canvas: #111315;
+  --surface-1: #181b1f;
+  --surface-2: #202429;
+  --surface-3: #292e34;
+  --overlay: #202429;
+  --text-primary: #f0f3f6;
+  --text-secondary: #b7c0ca;
+  --text-tertiary: #8c97a3;
+  --text-disabled: #626d78;
+  --border-subtle: #2d333b;
+  --border-default: #444c56;
+  --border-strong: #636e7b;
+
+  --accent: #6ea8fe;
+  --accent-hover: #91bdff;
+  --accent-subtle: #172a46;
+  --accent-contrast: #0f172a;
+  --success: #57c779;
+  --success-subtle: #173322;
+  --warning: #e3a438;
+  --warning-subtle: #382a13;
+  --danger: #ff7b86;
+  --danger-hover: #ff9aa3;
+  --danger-subtle: #3d1c21;
+  --info: #62b7ee;
+  --info-subtle: #152e3f;
+
+  --hover: rgb(255 255 255 / 6%);
+  --selected: rgb(110 168 254 / 14%);
+  --pressed: rgb(255 255 255 / 11%);
+  --scrim: rgb(0 0 0 / 60%);
+  --focus-ring: 0 0 0 3px rgb(110 168 254 / 30%);
+  --shadow-popover: 0 10px 30px rgb(0 0 0 / 38%), 0 2px 8px rgb(0 0 0 / 28%);
+  --shadow-dialog: 0 24px 56px rgb(0 0 0 / 48%), 0 4px 16px rgb(0 0 0 / 34%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration-ui: 0ms;
+    --duration-panel: 0ms;
+  }
+}