@flytedan/flytebot-design-system 0.48.0 → 0.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "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

@@ -859,6 +859,32 @@
   border-color: var(--border-strong);
   box-shadow: none;
 }
+/* MP-271 review (comment 2920, finding 3): an interactive Card (href/onClick) can no longer
+   render `action`/`footer` INSIDE the `<a>`/`<button>` — that was the only way this component
+   could ever produce a real `<button>` (or a link) nested inside a real `<a>`, which is invalid
+   HTML5 and double-fires clicks. `.fd-card-shell` is the plain, non-interactive wrapper Card
+   renders around the `<a>`/`<button>` only when it's interactive; `action` and `footer` become
+   its ordinary siblings, never its descendants, so nesting is impossible regardless of what a
+   caller puts in either slot. `footer` needs nothing extra (it was already the last thing
+   painted, so a sibling after the `<a>` lands in the exact same visual spot); `action` sits
+   inside the header row visually, so it's positioned back into that corner over the `<a>`,
+   given a higher stacking order so it stays independently clickable/focusable (the "stretched
+   link" technique's own z-index rule, applied to a real sibling instead of a pseudo-element). */
+.fd-card-shell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.fd-card-shell > .fd-card-interactive {
+  flex: 1 1 auto;
+}
+.fd-card-shell-action {
+  position: absolute;
+  top: 16px;
+  right: 18px;
+  z-index: 1;
+}
 /* The header degrades in two steps as the action slot needs more room than is left:
    first the title gives up ITS OWN spare width (ordinary flex-shrink) down to
    fd-card-head-title's min-width; once even that doesn't leave enough room for the
@@ -3430,6 +3456,21 @@
   grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min, 280px), 1fr));
   align-items: stretch;
 }
+/* MP-271 review (comment 2920, finding 2): CardGrid wraps every item in its own
+   `<div role="listitem">` rather than cloning `role` onto the child (a clone silently drops
+   an added prop on a Fragment child, and can't fix that). The wrapper is now the real grid
+   item that `align-items: stretch` above stretches to the row's height, so it has to pass
+   that height on to its own one real child the same way `.fd-card-body`'s `flex: 1 1 auto`
+   passes extra height down to `.fd-card-foot` — otherwise a stretched wrapper with an
+   un-stretched child inside it would look identical to no equal-height rows at all. */
+.fd-card-grid > [role="listitem"] {
+  display: flex;
+  min-width: 0;
+}
+.fd-card-grid > [role="listitem"] > * {
+  flex: 1 1 auto;
+  min-width: 0;
+}
 @media (max-width: 640px) {
   .fd-grid-stats {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
@@ -4181,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;