mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
fix: prevent cursor jumping during IME composition after @ mention (#2903)
* docs: update README skill and design system counts to 132/150 Fixes remaining 7 stale count references identified in #2186: - Line 3: intro paragraph (31→132, 72→150) - Line 33-34: shields.io badges (131→132, 149→150) - Line 68: feature comparison table Skills row (31→132) - Line 114-115: screenshot caption (72→150, ×2) - Line 876: user templates note (31→132) - Line 902: comparison table Skills row (31→132) Actual counts verified: - skills/: 132 (134 entries - AGENTS.md - README.md) - design-systems/: 150 (152 entries - _schema - AGENTS.md) * fix: deduplicate example cards by skill ID to prevent duplicate rendering Fixes #2889 The ExamplesTab component was rendering duplicate task-selection cards when rawSkills contained multiple entries with the same skill.id. This was particularly visible in the official xhs-white-editorial example flow. Solution: Add deduplication logic in the skills useMemo hook. After filtering out aggregatesExamples skills, we now use a Map to ensure each skill.id appears only once, keeping the first occurrence. This prevents duplicate cards from being rendered while preserving the existing filter and sort behavior downstream. * fix: prevent cursor jumping during IME composition after @ mention Fixes #2851 When using Chinese input method (IME) after typing @ in the chat composer, the cursor would jump to the previous character position, making it confusing and difficult to type Chinese text. Root cause: The handleChange function was detecting @ mentions and updating the mention state during IME composition events. This caused React to re-render and reset the cursor position while the user was still composing characters. Solution: Skip mention and slash-command detection when composingRef indicates an active IME composition session. The existing onCompositionStart/End handlers already track this state; we now respect it in handleChange. This fix applies to all IME-based input methods (Chinese, Japanese, Korean, etc.) and prevents cursor jumping when typing after @ or / triggers.
This commit is contained in:
Nicholas-Xiong
GitHub
parent
43eaa35335
commit
2c2900cfad
3 changed files with 23 additions and 12 deletions
16
README.md
16
README.md
|
|
@ -1,6 +1,6 @@
|
|||
# Open Design — the open-source Claude Design alternative
|
||||
|
||||
> **Open Design is the open-source, local-first alternative to [Claude Design][cd].** Web-deployable, BYOK at every layer — **16 coding-agent CLIs** auto-detected on your `PATH` (Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, Qoder CLI, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI) become the design engine, driven by **31 composable Skills** and **72 brand-grade Design Systems**. No CLI? An OpenAI-compatible BYOK proxy is the same loop minus the spawn.
|
||||
> **Open Design is the open-source, local-first alternative to [Claude Design][cd].** Web-deployable, BYOK at every layer — **16 coding-agent CLIs** auto-detected on your `PATH` (Claude Code, Codex, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen, Qoder CLI, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI) become the design engine, driven by **132 composable Skills** and **150 brand-grade Design Systems**. No CLI? An OpenAI-compatible BYOK proxy is the same loop minus the spawn.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> ### 🔥 `0.8.0-preview` is here. Design's old world ends here.
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
<a href="https://github.com/nexu-io/open-design/releases"><img alt="Latest release" src="https://img.shields.io/github/v/release/nexu-io/open-design?style=flat-square&color=blueviolet&label=release&include_prereleases&display_name=tag" /></a>
|
||||
<a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square" /></a>
|
||||
<a href="#supported-coding-agents"><img alt="Agents" src="https://img.shields.io/badge/agents-16%20CLIs%20%2B%20BYOK%20proxy-black?style=flat-square" /></a>
|
||||
<a href="#design-systems"><img alt="Design systems" src="https://img.shields.io/badge/design%20systems-149-orange?style=flat-square" /></a>
|
||||
<a href="#skills"><img alt="Skills" src="https://img.shields.io/badge/skills-131-teal?style=flat-square" /></a>
|
||||
<a href="#design-systems"><img alt="Design systems" src="https://img.shields.io/badge/design%20systems-150-orange?style=flat-square" /></a>
|
||||
<a href="#skills"><img alt="Skills" src="https://img.shields.io/badge/skills-132-teal?style=flat-square" /></a>
|
||||
<a href="https://discord.gg/qhbcCH8Am4"><img alt="Discord" src="https://img.shields.io/badge/discord-join-5865F2?style=flat-square&logo=discord&logoColor=white" /></a>
|
||||
<a href="https://x.com/nexudotio"><img alt="Follow @nexudotio on X" src="https://img.shields.io/badge/follow-%40nexudotio-1DA1F2?style=flat-square&logo=x&logoColor=white" /></a>
|
||||
<a href="QUICKSTART.md"><img alt="Quickstart" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat-square" /></a>
|
||||
|
|
@ -65,7 +65,7 @@ OD stands on four open-source shoulders:
|
|||
| **Coding-agent CLIs (16)** | Claude Code · Codex CLI · Devin for Terminal · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Qoder CLI · GitHub Copilot CLI · Hermes (ACP) · Kimi CLI (ACP) · Pi (RPC) · Kiro CLI (ACP) · Kilo (ACP) · Mistral Vibe CLI (ACP) · DeepSeek TUI — auto-detected on `PATH`, swap with one click |
|
||||
| **BYOK fallback** | Protocol-specific API proxy at `/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream` — paste `baseUrl` + `apiKey` + `model`, choose Anthropic / OpenAI / Azure OpenAI / Google Gemini / Ollama Cloud / SenseAudio, and the daemon normalizes SSE back to the same chat stream. SenseAudio chat additionally exposes `generate_image` and `generate_video` tools so the model can write rendered artifacts straight into the active project's folder. Internal-IP/SSRF blocked at the daemon edge. |
|
||||
| **Design systems built-in** | **129** — 2 hand-authored starters + 70 product systems (Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu, …) from [`awesome-design-md`][acd2], plus 57 design skills from [`awesome-design-skills`][ads] added directly under `design-systems/` |
|
||||
| **Skills built-in** | **31** — 27 in `prototype` mode (web-prototype, saas-landing, dashboard, mobile-app, gamified-app, social-carousel, magazine-poster, dating-web, sprite-animation, motion-frames, critique, tweaks, wireframe-sketch, pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, kanban-board, team-okrs, …) + 4 in `deck` mode (`guizang-ppt` · `simple-deck` · `replit-deck` · `weekly-update`). Grouped in the picker by `scenario`: design / marketing / operation / engineering / product / finance / hr / sale / personal. |
|
||||
| **Skills built-in** | **132** — 27 in `prototype` mode (web-prototype, saas-landing, dashboard, mobile-app, gamified-app, social-carousel, magazine-poster, dating-web, sprite-animation, motion-frames, critique, tweaks, wireframe-sketch, pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, kanban-board, team-okrs, …) + 4 in `deck` mode (`guizang-ppt` · `simple-deck` · `replit-deck` · `weekly-update`). Grouped in the picker by `scenario`: design / marketing / operation / engineering / product / finance / hr / sale / personal. |
|
||||
| **Media generation** | Image · video · audio surfaces ship alongside the design loop. **gpt-image-2** (Azure / OpenAI) for posters, avatars, infographics, illustrated maps · **Seedance 2.0** (ByteDance) for cinematic 15s text-to-video and image-to-video · **HyperFrames** ([heygen-com/hyperframes](https://github.com/heygen-com/hyperframes)) for HTML→MP4 motion graphics (product reveals, kinetic typography, data charts, social overlays, logo outros). **93** ready-to-replicate prompts gallery — 43 gpt-image-2 + 39 Seedance + 11 HyperFrames — under [`prompt-templates/`](prompt-templates/), with preview thumbnails and source attribution. Same chat surface as code; outputs a real `.mp4` / `.png` chip into the project workspace. |
|
||||
| **Visual directions** | 5 curated schools (Editorial Monocle · Modern Minimal · Warm Soft · Tech Utility · Brutalist Experimental) — each ships a deterministic OKLch palette + font stack ([`apps/daemon/src/prompts/directions.ts`](apps/daemon/src/prompts/directions.ts)) |
|
||||
| **Device frames** | iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome — pixel-accurate, shared across skills under [`assets/frames/`](assets/frames/) |
|
||||
|
|
@ -111,8 +111,8 @@ Linux AppImage packaging is available through the optional release lane and is c
|
|||
<sub><b>Sandboxed preview</b> — every <code><artifact></code> renders in a clean srcdoc iframe. Editable in place via the file workspace; downloadable as HTML, PDF, ZIP.</sub>
|
||||
</td>
|
||||
<td width="50%">
|
||||
<img src="docs/screenshots/06-design-systems-library.png" alt="06 · 72-system library" /><br/>
|
||||
<sub><b>72-system library</b> — every product system shows its 4-color signature. Click for the full <code>DESIGN.md</code>, swatch grid, and live showcase.</sub>
|
||||
<img src="docs/screenshots/06-design-systems-library.png" alt="06 · 150-system library" /><br/>
|
||||
<sub><b>150-system library</b> — every product system shows its 4-color signature. Click for the full <code>DESIGN.md</code>, swatch grid, and live showcase.</sub>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -873,7 +873,7 @@ The chat / artifact loop gets the spotlight, but a handful of less-visible capab
|
|||
|
||||
- **Claude Design ZIP import.** Drop an export from claude.ai onto the welcome dialog. `POST /api/import/claude-design` extracts it into a real `.od/projects/<id>/`, opens the entry file as a tab, and stages a continue-where-Anthropic-left-off prompt for your local agent. No re-prompting, no "ask the model to re-create what we just had". ([`apps/daemon/src/server.ts`](apps/daemon/src/server.ts) — `/api/import/claude-design`)
|
||||
- **Multi-provider BYOK proxy.** `POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream` takes `{ baseUrl, apiKey, model, messages }`, builds the provider-specific upstream request, normalizes SSE chunks into `delta/end/error`, and allows loopback local LLM providers while rejecting non-loopback private, link-local, CGNAT, multicast, reserved, and redirect targets to head off SSRF. OpenAI-compatible covers OpenAI, Azure AI Foundry `/openai/v1`, DeepSeek, Groq, MiMo, OpenRouter, Ollama, LM Studio, and self-hosted vLLM; Azure OpenAI adds deployment URL + `api-version`; Google uses Gemini `:streamGenerateContent`.
|
||||
- **User-saved templates.** Once you like a render, `POST /api/templates` snapshots the HTML + metadata into the SQLite `templates` table. The next project picks it from a "your templates" row in the picker — same surface as the shipped 31, but yours.
|
||||
- **User-saved templates.** Once you like a render, `POST /api/templates` snapshots the HTML + metadata into the SQLite `templates` table. The next project picks it from a "your templates" row in the picker — same surface as the shipped 132, but yours.
|
||||
- **Tab persistence.** Every project remembers its open files and active tab in the `tabs` table. Reopen the project tomorrow and the workspace looks exactly the way you left it.
|
||||
- **Artifact lint API.** `POST /api/artifacts/lint` runs structural checks on a generated artifact (broken `<artifact>` framing, missing required side files, stale palette tokens) and returns findings the agent can read back into its next turn. The five-dim self-critique uses this to ground its score in real evidence, not vibes.
|
||||
- **Sidecar protocol + desktop automation.** Daemon, web, and desktop processes carry typed five-field stamps (`app · mode · namespace · ipc · source`) and expose a JSON-RPC IPC channel at `/tmp/open-design/ipc/<namespace>/<app>.sock`. `tools-dev inspect desktop status \| eval \| screenshot` drives that channel, so headless E2E works against a real Electron shell without bespoke harnesses ([`packages/sidecar-proto/`](packages/sidecar-proto/), [`apps/desktop/src/main/`](apps/desktop/src/main/)).
|
||||
|
|
@ -899,7 +899,7 @@ The whole machinery below is the [`huashu-design`](https://github.com/alchaincyf
|
|||
| Form factor | Web (claude.ai) | Desktop (Electron) | **Web app + local daemon** |
|
||||
| Deployable on Vercel | ❌ | ❌ | **✅** |
|
||||
| Agent runtime | Bundled (Opus 4.7) | Bundled ([`pi-ai`][piai]) | **Delegated to user's existing CLI** |
|
||||
| Skills | Proprietary | 12 custom TS modules + `SKILL.md` | **31 file-based [`SKILL.md`][skill] bundles, droppable** |
|
||||
| Skills | Proprietary | 12 custom TS modules + `SKILL.md` | **132 file-based [`SKILL.md`][skill] bundles, droppable** |
|
||||
| Design system | Proprietary | `DESIGN.md` (v0.2 roadmap) | **`DESIGN.md` × 129 systems shipped** |
|
||||
| Provider flexibility | Anthropic only | 7+ via [`pi-ai`][piai] | **16 CLI adapters + OpenAI-compatible BYOK proxy** |
|
||||
| Init question form | ❌ | ❌ | **✅ Hard rule, turn 1** |
|
||||
|
|
|
|||
|
|
@ -1000,6 +1000,10 @@ export const ChatComposer = forwardRef<ChatComposerHandle, Props>(
|
|||
new RegExp(`(^|\\s)@${escapeRegExp(s.id)}(\\s|$)`).test(value),
|
||||
),
|
||||
);
|
||||
// Skip mention and slash detection during IME composition (e.g.,
|
||||
// Chinese, Japanese, Korean input) to prevent cursor jumping.
|
||||
// Issue #2851.
|
||||
if (composingRef.current) return;
|
||||
// Detect a fresh @ at start or after whitespace; capture the typed
|
||||
// query up to the cursor.
|
||||
const before = value.slice(0, cursor);
|
||||
|
|
|
|||
|
|
@ -127,10 +127,17 @@ export function ExamplesTab({ skills: rawSkills, onUsePrompt }: Props) {
|
|||
// them up front so every count, filter, and rendered card downstream
|
||||
// sees only the user-facing entries. The full listing is still passed
|
||||
// through for `findSkillById` lookups elsewhere in the app.
|
||||
const skills = useMemo(
|
||||
() => rawSkills.filter((s) => !s.aggregatesExamples),
|
||||
[rawSkills],
|
||||
);
|
||||
// Deduplicate by skill.id to prevent duplicate cards (issue #2889).
|
||||
const skills = useMemo(() => {
|
||||
const filtered = rawSkills.filter((s) => !s.aggregatesExamples);
|
||||
const seen = new Map<string, SkillSummary>();
|
||||
for (const skill of filtered) {
|
||||
if (!seen.has(skill.id)) {
|
||||
seen.set(skill.id, skill);
|
||||
}
|
||||
}
|
||||
return Array.from(seen.values());
|
||||
}, [rawSkills]);
|
||||
// Hold preview HTML per skill across re-renders so cards never re-flicker.
|
||||
const [previews, setPreviews] = useState<Record<string, string | null>>({});
|
||||
// Track per-skill fetch failures separately so the preview modal can show
|
||||
|
|
|
|||
Loading…
Reference in a new issue