Skip to content

feat(editors): Add @omniview/editors package with production-grade components #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
joshuapare merged 11 commits into from
Mar 10, 2026
Merged

feat(editors): Add @omniview/editors package with production-grade components #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8fa7672
feat(ui): Add @omniview/editors package with 6 editor components
joshuapare Mar 8, 2026
fb69440
feat(editors): Production-grade Terminal, circular ref safety, memoiz…
joshuapare Mar 8, 2026
2c58846
feat(editors): Monaco 0.52 downgrade, YAML schema completions, diagno…
joshuapare Mar 9, 2026
13620fb
feat(editors): Improve CommandPalette styling and test coverage
joshuapare Mar 9, 2026
5957b57
fix(base-ui): Update CommandList, Separator, and theme styles
joshuapare Mar 9, 2026
0d25cd7
feat(editors): Production-grade Terminal upgrade with xterm 6, full I…
joshuapare Mar 9, 2026
f880317
fix(editors): Address PR review feedback across all components
joshuapare Mar 9, 2026
1d6fc5c
fix(editors): Address second round of PR review feedback
joshuapare Mar 10, 2026
99a8f70
fix(editors): Address third round of PR review feedback
joshuapare Mar 10, 2026
e858514
fix(editors): Address fourth round of PR review feedback
joshuapare Mar 10, 2026
c8d2ec6
fix(editors): Address fifth round of PR review feedback
joshuapare Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/base-ui/src/components/command-list/CommandList.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
* --------------------------------------------------------------------------- */

.Input {
padding: var(--ov-space-inline-xs, 2px);
border-bottom: 1px solid var(--ov-color-border-muted);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/base-ui/src/components/separator/Separator.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.Root {
--_ov-separator-color: color-mix(in srgb, var(--ov-color-fg-muted) 56%, transparent 44%);
--_ov-separator-color: var(--ov-color-border-default);
--_ov-separator-thickness: var(--ov-size-separator-thickness-md, 2px);
--_ov-separator-inset: var(--ov-size-separator-inset-md, 12px);
--_ov-separator-label-color: var(--ov-color-fg-muted);
Expand Down
303 changes: 303 additions & 0 deletions packages/base-ui/src/theme/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,46 @@
--ov-primitive-amber-500: #cf9030;
--ov-primitive-amber-600: #b17727;

--ov-primitive-red-300: #e89a9a;
--ov-primitive-red-400: #d97777;
--ov-primitive-red-500: #c45f5f;
--ov-primitive-red-600: #ad4f4f;

--ov-primitive-purple-300: #b89aee;
--ov-primitive-purple-400: #a67de8;
--ov-primitive-purple-500: #9363db;
--ov-primitive-purple-600: #7c4ec4;

--ov-primitive-cyan-300: #7ad4e8;
--ov-primitive-cyan-400: #5ac4db;
--ov-primitive-cyan-500: #3fb0c9;
--ov-primitive-cyan-600: #2e97ae;

--ov-primitive-blue-200: #a4bdf3;

--ov-primitive-coral-400: #ff7b72;
--ov-primitive-orange-300: #ffa657;
--ov-primitive-sky-200: #a5d6ff;
--ov-primitive-sky-300: #79c0ff;
--ov-primitive-lavender-300: #d2a8ff;

--ov-primitive-ansi-black: #3b4252;
--ov-primitive-ansi-red: #bf616a;
--ov-primitive-ansi-green: #a3be8c;
--ov-primitive-ansi-yellow: #ebcb8b;
--ov-primitive-ansi-blue: #81a1c1;
--ov-primitive-ansi-magenta: #b48ead;
--ov-primitive-ansi-cyan: #88c0d0;
--ov-primitive-ansi-white: #e5e9f0;
--ov-primitive-ansi-bright-black: #4c566a;
--ov-primitive-ansi-bright-red: #d08770;
--ov-primitive-ansi-bright-green: #a3be8c;
--ov-primitive-ansi-bright-yellow: #ebcb8b;
--ov-primitive-ansi-bright-blue: #81a1c1;
--ov-primitive-ansi-bright-magenta: #b48ead;
--ov-primitive-ansi-bright-cyan: #8fbcbb;
--ov-primitive-ansi-bright-white: #eceff4;

--ov-primitive-font-sans: 'Inter Variable', 'SF Pro Text', 'Segoe UI', -apple-system, sans-serif;
--ov-primitive-font-mono: 'JetBrains Mono Variable', 'SF Mono', 'Cascadia Mono', monospace;
--ov-primitive-font-size-11: 0.6875rem;
Expand Down Expand Up @@ -385,6 +421,94 @@
--ov-color-editor-group-header-bg: var(--ov-color-bg-surface-raised);
--ov-color-editor-group-drop-border: var(--ov-color-brand-400);
--ov-size-tab-height: 34px;

/* Editor tokens */
--ov-color-editor-bg: var(--ov-color-bg-base);
--ov-color-editor-fg: var(--ov-color-fg-default);
--ov-color-editor-cursor: var(--ov-color-accent-strong);
--ov-color-editor-selection-bg: var(--ov-color-accent-soft);
--ov-color-editor-selection-inactive-bg: rgb(161 169 182 / 0.1);
--ov-color-editor-line-highlight-bg: rgb(255 255 255 / 0.04);
--ov-color-editor-line-highlight-border: transparent;
--ov-color-editor-line-number: var(--ov-color-fg-subtle);
--ov-color-editor-line-number-active: var(--ov-color-fg-muted);
--ov-color-editor-whitespace: var(--ov-primitive-gray-400);
--ov-color-editor-indent-guide: var(--ov-primitive-gray-300);
--ov-color-editor-indent-guide-active: var(--ov-primitive-gray-500);
--ov-color-editor-ruler: var(--ov-primitive-gray-300);
--ov-color-editor-find-match-bg: rgb(207 144 48 / 0.35);
--ov-color-editor-find-match-border: var(--ov-color-warning);
--ov-color-editor-find-range-bg: rgb(207 144 48 / 0.15);
--ov-color-editor-link: var(--ov-color-brand-300);
--ov-color-editor-bracket-match-bg: rgb(90 127 226 / 0.2);
--ov-color-editor-bracket-match-border: var(--ov-color-brand-400);
--ov-color-editor-bracket-1: #ffd700;
--ov-color-editor-bracket-2: #da70d6;
--ov-color-editor-bracket-3: #179fff;
--ov-color-editor-bracket-4: #ffd700;
--ov-color-editor-bracket-5: #da70d6;
--ov-color-editor-bracket-6: #179fff;
--ov-color-gutter-bg: var(--ov-color-editor-bg);
--ov-color-gutter-added: var(--ov-color-success);
--ov-color-gutter-modified: var(--ov-color-info);
--ov-color-gutter-deleted: var(--ov-color-danger);
--ov-color-diff-insert-bg: var(--ov-color-success-soft);
--ov-color-diff-remove-bg: var(--ov-color-danger-soft);
--ov-color-minimap-bg: var(--ov-color-bg-surface);
--ov-color-minimap-selection: var(--ov-color-accent-soft);
--ov-color-minimap-error: var(--ov-color-danger);
--ov-color-minimap-warning: var(--ov-color-warning);
--ov-color-minimap-find-match: var(--ov-color-warning);

/* Terminal tokens */
--ov-color-terminal-bg: var(--ov-color-bg-inset);
--ov-color-terminal-fg: var(--ov-color-fg-default);
--ov-color-terminal-cursor: var(--ov-color-accent-strong);
--ov-color-terminal-selection-bg: var(--ov-color-accent-soft);
--ov-color-terminal-selection-fg: var(--ov-color-fg-default);
--ov-color-terminal-border: var(--ov-color-border-default);
--ov-color-ansi-black: var(--ov-primitive-ansi-black);
--ov-color-ansi-red: var(--ov-primitive-ansi-red);
--ov-color-ansi-green: var(--ov-primitive-ansi-green);
--ov-color-ansi-yellow: var(--ov-primitive-ansi-yellow);
--ov-color-ansi-blue: var(--ov-primitive-ansi-blue);
--ov-color-ansi-magenta: var(--ov-primitive-ansi-magenta);
--ov-color-ansi-cyan: var(--ov-primitive-ansi-cyan);
--ov-color-ansi-white: var(--ov-primitive-ansi-white);
--ov-color-ansi-bright-black: var(--ov-primitive-ansi-bright-black);
--ov-color-ansi-bright-red: var(--ov-primitive-ansi-bright-red);
--ov-color-ansi-bright-green: var(--ov-primitive-ansi-bright-green);
--ov-color-ansi-bright-yellow: var(--ov-primitive-ansi-bright-yellow);
--ov-color-ansi-bright-blue: var(--ov-primitive-ansi-bright-blue);
--ov-color-ansi-bright-magenta: var(--ov-primitive-ansi-bright-magenta);
--ov-color-ansi-bright-cyan: var(--ov-primitive-ansi-bright-cyan);
--ov-color-ansi-bright-white: var(--ov-primitive-ansi-bright-white);

/* Syntax highlighting tokens */
--ov-syntax-comment: #8b949e;
--ov-syntax-string: var(--ov-primitive-sky-200);
--ov-syntax-string-escape: var(--ov-primitive-sky-300);
--ov-syntax-number: var(--ov-primitive-sky-300);
--ov-syntax-keyword: var(--ov-primitive-coral-400);
--ov-syntax-keyword-control: var(--ov-primitive-coral-400);
--ov-syntax-keyword-operator: var(--ov-primitive-coral-400);
--ov-syntax-type: var(--ov-primitive-orange-300);
--ov-syntax-class: var(--ov-primitive-orange-300);
--ov-syntax-interface: var(--ov-primitive-orange-300);
--ov-syntax-function: var(--ov-primitive-lavender-300);
--ov-syntax-method: var(--ov-primitive-lavender-300);
--ov-syntax-variable: var(--ov-color-fg-default);
--ov-syntax-parameter: var(--ov-primitive-orange-300);
--ov-syntax-property: var(--ov-primitive-sky-300);
--ov-syntax-namespace: var(--ov-primitive-orange-300);
--ov-syntax-decorator: var(--ov-primitive-lavender-300);
--ov-syntax-regexp: var(--ov-primitive-sky-200);
--ov-syntax-operator: var(--ov-primitive-coral-400);
--ov-syntax-punctuation: #e6edf3;
--ov-syntax-style-comment: italic;
--ov-syntax-style-keyword: normal;
--ov-syntax-style-function: normal;
--ov-syntax-style-type: normal;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}

:root[data-ov-theme='light'] {
Expand Down Expand Up @@ -426,6 +550,71 @@
--ov-color-state-pressed: rgb(75 85 100 / 0.14);
--ov-color-state-selected: rgb(71 109 206 / 0.14);
--ov-color-state-focus-ring: #476dce;

/* Editor tokens — light */
--ov-color-editor-bg: var(--ov-color-bg-base);
--ov-color-editor-fg: var(--ov-color-fg-default);
--ov-color-editor-cursor: var(--ov-color-accent-strong);
--ov-color-editor-selection-bg: var(--ov-color-accent-soft);
--ov-color-editor-selection-inactive-bg: rgb(75 85 100 / 0.1);
--ov-color-editor-line-highlight-bg: rgb(0 0 0 / 0.04);
--ov-color-editor-line-highlight-border: transparent;
--ov-color-editor-line-number: var(--ov-color-fg-subtle);
--ov-color-editor-line-number-active: var(--ov-color-fg-muted);
--ov-color-editor-whitespace: #c8ced8;
--ov-color-editor-indent-guide: #d4d8de;
--ov-color-editor-indent-guide-active: #9ea6b3;
--ov-color-editor-ruler: #d4d8de;
--ov-color-editor-find-match-bg: rgb(148 98 33 / 0.3);
--ov-color-editor-find-match-border: var(--ov-color-warning);
--ov-color-editor-find-range-bg: rgb(148 98 33 / 0.12);
--ov-color-editor-link: var(--ov-color-brand-500);

/* Terminal tokens — light */
--ov-color-terminal-bg: var(--ov-color-bg-inset);
--ov-color-terminal-fg: var(--ov-color-fg-default);
--ov-color-terminal-cursor: var(--ov-color-accent-strong);
--ov-color-terminal-selection-bg: var(--ov-color-accent-soft);
--ov-color-terminal-selection-fg: var(--ov-color-fg-default);
--ov-color-terminal-border: var(--ov-color-border-default);
--ov-color-ansi-black: #3b4252;
--ov-color-ansi-red: #a3171a;
--ov-color-ansi-green: #2f7d4f;
--ov-color-ansi-yellow: #946221;
--ov-color-ansi-blue: #2560a8;
--ov-color-ansi-magenta: #7c3e8e;
--ov-color-ansi-cyan: #1a7d8d;
--ov-color-ansi-white: #4b5564;
--ov-color-ansi-bright-black: #6b7481;
--ov-color-ansi-bright-red: #c4554d;
--ov-color-ansi-bright-green: #2f9161;
--ov-color-ansi-bright-yellow: #b17727;
--ov-color-ansi-bright-blue: #476dce;
--ov-color-ansi-bright-magenta: #9363db;
--ov-color-ansi-bright-cyan: #2e97ae;
--ov-color-ansi-bright-white: #1b1d22;

/* Syntax highlighting tokens — light */
--ov-syntax-comment: #6a737d;
--ov-syntax-string: #032f62;
--ov-syntax-string-escape: #22863a;
--ov-syntax-number: #005cc5;
--ov-syntax-keyword: #d73a49;
--ov-syntax-keyword-control: #d73a49;
--ov-syntax-keyword-operator: #d73a49;
--ov-syntax-type: #e36209;
--ov-syntax-class: #e36209;
--ov-syntax-interface: #e36209;
--ov-syntax-function: #6f42c1;
--ov-syntax-method: #6f42c1;
--ov-syntax-variable: #1b1d22;
--ov-syntax-parameter: #e36209;
--ov-syntax-property: #005cc5;
--ov-syntax-namespace: #e36209;
--ov-syntax-decorator: #6f42c1;
--ov-syntax-regexp: #032f62;
--ov-syntax-operator: #d73a49;
--ov-syntax-punctuation: #24292e;
}

:root[data-ov-theme='high-contrast-dark'] {
Expand Down Expand Up @@ -466,6 +655,63 @@
--ov-color-state-pressed: rgb(255 255 255 / 0.24);
--ov-color-state-selected: rgb(127 179 255 / 0.34);
--ov-color-state-focus-ring: #ffffff;

/* Editor tokens — high-contrast dark */
--ov-color-editor-bg: #000000;
--ov-color-editor-fg: #ffffff;
--ov-color-editor-cursor: #ffffff;
--ov-color-editor-selection-bg: rgb(127 179 255 / 0.4);
--ov-color-editor-selection-inactive-bg: rgb(255 255 255 / 0.15);
--ov-color-editor-line-highlight-bg: rgb(255 255 255 / 0.08);
--ov-color-editor-line-highlight-border: #f0f0f0;
--ov-color-editor-line-number: #d7d7d7;
--ov-color-editor-line-number-active: #ffffff;

/* Terminal tokens — high-contrast dark */
--ov-color-terminal-bg: #000000;
--ov-color-terminal-fg: #ffffff;
--ov-color-terminal-cursor: #ffffff;
--ov-color-terminal-selection-bg: rgb(127 179 255 / 0.4);
--ov-color-terminal-selection-fg: #ffffff;
--ov-color-terminal-border: #f0f0f0;
--ov-color-ansi-black: #000000;
--ov-color-ansi-red: #ff9f9f;
--ov-color-ansi-green: #73ffa2;
--ov-color-ansi-yellow: #ffd27d;
--ov-color-ansi-blue: #a6c8ff;
--ov-color-ansi-magenta: #d2a8ff;
--ov-color-ansi-cyan: #7ad4e8;
--ov-color-ansi-white: #ffffff;
--ov-color-ansi-bright-black: #8d8d8d;
--ov-color-ansi-bright-red: #ffb3b3;
--ov-color-ansi-bright-green: #9dffbd;
--ov-color-ansi-bright-yellow: #ffe2a3;
--ov-color-ansi-bright-blue: #c8deff;
--ov-color-ansi-bright-magenta: #e3c8ff;
--ov-color-ansi-bright-cyan: #a4e5f2;
--ov-color-ansi-bright-white: #ffffff;

/* Syntax highlighting tokens — high-contrast dark */
--ov-syntax-comment: #bcbcbc;
--ov-syntax-string: #a5d6ff;
--ov-syntax-string-escape: #79c0ff;
--ov-syntax-number: #79c0ff;
--ov-syntax-keyword: #ff9f9f;
--ov-syntax-keyword-control: #ff9f9f;
--ov-syntax-keyword-operator: #ff9f9f;
--ov-syntax-type: #ffa657;
--ov-syntax-class: #ffa657;
--ov-syntax-interface: #ffa657;
--ov-syntax-function: #d2a8ff;
--ov-syntax-method: #d2a8ff;
--ov-syntax-variable: #ffffff;
--ov-syntax-parameter: #ffa657;
--ov-syntax-property: #79c0ff;
--ov-syntax-namespace: #ffa657;
--ov-syntax-decorator: #d2a8ff;
--ov-syntax-regexp: #a5d6ff;
--ov-syntax-operator: #ff9f9f;
--ov-syntax-punctuation: #ffffff;
}

:root[data-ov-theme='high-contrast-light'] {
Expand Down Expand Up @@ -506,6 +752,63 @@
--ov-color-state-pressed: rgb(0 0 0 / 0.14);
--ov-color-state-selected: rgb(0 74 215 / 0.2);
--ov-color-state-focus-ring: #000000;

/* Editor tokens — high-contrast light */
--ov-color-editor-bg: #ffffff;
--ov-color-editor-fg: #000000;
--ov-color-editor-cursor: #000000;
--ov-color-editor-selection-bg: rgb(0 74 215 / 0.25);
--ov-color-editor-selection-inactive-bg: rgb(0 0 0 / 0.1);
--ov-color-editor-line-highlight-bg: rgb(0 0 0 / 0.06);
--ov-color-editor-line-highlight-border: #000000;
--ov-color-editor-line-number: #2d2d2d;
--ov-color-editor-line-number-active: #000000;

/* Terminal tokens — high-contrast light */
--ov-color-terminal-bg: #f4f4f4;
--ov-color-terminal-fg: #000000;
--ov-color-terminal-cursor: #000000;
--ov-color-terminal-selection-bg: rgb(0 74 215 / 0.25);
--ov-color-terminal-selection-fg: #000000;
--ov-color-terminal-border: #000000;
--ov-color-ansi-black: #000000;
--ov-color-ansi-red: #8f0000;
--ov-color-ansi-green: #006b2f;
--ov-color-ansi-yellow: #8a3f00;
--ov-color-ansi-blue: #004ad7;
--ov-color-ansi-magenta: #6b20a8;
--ov-color-ansi-cyan: #006d7d;
--ov-color-ansi-white: #2d2d2d;
--ov-color-ansi-bright-black: #5c5c5c;
--ov-color-ansi-bright-red: #b30000;
--ov-color-ansi-bright-green: #008a3e;
--ov-color-ansi-bright-yellow: #a85400;
--ov-color-ansi-bright-blue: #1d4ed8;
--ov-color-ansi-bright-magenta: #7c3eb8;
--ov-color-ansi-bright-cyan: #0088a0;
--ov-color-ansi-bright-white: #000000;

/* Syntax highlighting tokens — high-contrast light */
--ov-syntax-comment: #5c5c5c;
--ov-syntax-string: #032f62;
--ov-syntax-string-escape: #006b2f;
--ov-syntax-number: #004ad7;
--ov-syntax-keyword: #8f0000;
--ov-syntax-keyword-control: #8f0000;
--ov-syntax-keyword-operator: #8f0000;
--ov-syntax-type: #8a3f00;
--ov-syntax-class: #8a3f00;
--ov-syntax-interface: #8a3f00;
--ov-syntax-function: #6b20a8;
--ov-syntax-method: #6b20a8;
--ov-syntax-variable: #000000;
--ov-syntax-parameter: #8a3f00;
--ov-syntax-property: #004ad7;
--ov-syntax-namespace: #8a3f00;
--ov-syntax-decorator: #6b20a8;
--ov-syntax-regexp: #032f62;
--ov-syntax-operator: #8f0000;
--ov-syntax-punctuation: #000000;
}

:root[data-ov-density='compact'] {
Expand Down
Loading