@flytedan/flytebot-design-system 0.48.1 → 0.49.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.48.1",
+  "version": "0.49.1",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",
@@ -56,6 +56,12 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.13",
+    "@lezer/highlight": "^1.2.4",
     "@phosphor-icons/web": "2.1.1"
   },
   "devDependencies": {

package/styles/components.css

@@ -4222,6 +4222,75 @@
   color: var(--code-pun);
 }
 
+/* ── MP-274: CodeEditor ──────────────────────────────────────────────────
+   Shares .fd-input's chrome (border, radius, focus ring, disabled tint) with
+   Input/Textarea, and .fd-code's border/background tokens, so it reads as a
+   form field AND a code surface rather than inventing a third look. CodeMirror
+   renders its own DOM into .fd-code-editor-host; every color it uses is a CSS
+   variable set on that DOM by CodeEditor.tsx's EditorView.theme, and the
+   .tok-* rules above (shared with CodeBlock) are the ones that actually paint
+   its syntax highlighting, so both components' SQL always looks identical in
+   light, dark and high-contrast. */
+.fd-code-editor {
+  padding: 0;
+  font-family: var(--font-mono);
+  background: var(--chat-code-bg);
+  overflow: hidden;
+}
+.fd-code-editor-host {
+  height: 100%;
+}
+.fd-code-editor-host .cm-editor {
+  height: 100%;
+}
+.fd-code-editor.fd-input-disabled .fd-code-editor-host {
+  opacity: 0.6;
+}
+.fd-code-editor-diagnostics {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.fd-code-editor-diag {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: var(--text-sm-size, 12.5px);
+  color: var(--text-2);
+}
+.fd-code-editor-diag i {
+  flex: none;
+}
+.fd-code-editor-diag.is-error {
+  color: var(--danger-text);
+}
+.fd-code-editor-diag.is-error i {
+  color: var(--danger-solid);
+}
+.fd-code-editor-diag.is-warning {
+  color: var(--warn-text);
+}
+.fd-code-editor-diag.is-warning i {
+  color: var(--warn-solid);
+}
+.fd-code-editor-diag.is-info {
+  color: var(--info-text);
+}
+.fd-code-editor-diag.is-info i {
+  color: var(--info-solid);
+}
+.fd-code-editor-diag-loc {
+  font-family: var(--font-mono);
+  font-weight: var(--w-semibold);
+  flex: none;
+}
+.fd-code-editor-hint {
+  color: var(--text-disabled);
+}
+
 .fd-diff-body {
   font-family: var(--font-mono);
   font-size: 12.5px;