@health-samurai/react-components 0.0.0-alpha.13 → 0.0.0-alpha.15

package/dist/src/tokens.css

@@ -147,34 +147,50 @@
 	--corner-corner-m: 6px;
 	--corner-corner-l: 8px;
 	--corner-corner-xs: 2px;
-	--color-elements-readable: var(--color-neutral-900);
 	--color-cta: var(--color-brand-600);
 	--color-critical-default: var(--color-red-600);
-	--color-elements-disabled: var(--color-neutral-300);
-	--color-elements-assistive: var(--color-neutral-500);
-	--color-surface-0: var(--color-neutral-50);
-	--color-border-default: var(--color-neutral-200);
-	--color-surface-selected: var(--color-neutral-200);
 	--color-cta-hover: var(--color-brand-700);
 	--color-critical-hover: var(--color-red-700);
-	--color-surface-1: var(--color-neutral-100);
 	--color-border-XS-critical: var(--color-red-50);
 	--color-border-XS-critical-hover: var(--color-red-100);
 	--color-elements-green: var(--color-green-600);
 	--color-elements-yellow: var(--color-yellow-500);
 	--color-border-XS-regular: var(--color-blue-300);
 	--color-border-XS-regular-hover: var(--color-blue-400);
-	--color-separator: var(--color-neutral-200);
 	--color-surface-info: var(--color-blue-50);
 	--color-surface-warning: var(--color-yellow-50);
 	--color-surface-alert: var(--color-red-50);
 	--color-elements-warning: var(--color-yellow-700);
 	--color-code-red: var(--color-red-600);
 	--color-code-blue: var(--color-blue-500);
-	--color-elements-readable-inv: var(--color-neutral-50);
 	--color-logo-readable: var(--color-neutral-800);
 	--color-elements-links: var(--color-brand-600);
 	--color-elements-info: var(--color-brand-600);
 	--color-elements-alert: var(--color-red-600);
 	--color-illustrations-solid: var(--color-brand-600);
 }
+
+/* Semantic tokens that need dark mode overrides — use @theme inline + :root so .dark can override */
+@theme inline {
+	--color-elements-readable: var(--hs-elements-readable);
+	--color-elements-readable-inv: var(--hs-elements-readable-inv);
+	--color-elements-assistive: var(--hs-elements-assistive);
+	--color-elements-disabled: var(--hs-elements-disabled);
+	--color-surface-0: var(--hs-surface-0);
+	--color-surface-1: var(--hs-surface-1);
+	--color-surface-selected: var(--hs-surface-selected);
+	--color-border-default: var(--hs-border-default);
+	--color-separator: var(--hs-separator);
+}
+
+:root {
+	--hs-elements-readable: var(--color-neutral-900);
+	--hs-elements-readable-inv: var(--color-neutral-50);
+	--hs-elements-assistive: var(--color-neutral-500);
+	--hs-elements-disabled: var(--color-neutral-300);
+	--hs-surface-0: var(--color-neutral-50);
+	--hs-surface-1: var(--color-neutral-100);
+	--hs-surface-selected: var(--color-neutral-200);
+	--hs-border-default: var(--color-neutral-200);
+	--hs-separator: var(--color-neutral-200);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@health-samurai/react-components",
-  "version": "0.0.0-alpha.13",
+  "version": "0.0.0-alpha.15",
   "type": "module",
   "files": [
     "dist",

package/src/components/code-editor/index.tsx

@@ -55,7 +55,7 @@ import {
 	type ViewUpdate,
 } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
-import { ChevronDown, ChevronUp, X } from "lucide-react";
+import { Braces, ChevronDown, ChevronUp, Terminal, X } from "lucide-react";
 import * as React from "react";
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -200,17 +200,21 @@ const errorTooltipHandler = EditorView.domEventHandlers({
 	},
 });
 
-const baseTheme = EditorView.baseTheme({
+const baseTheme = EditorView.theme({
 	"&": {
 		backgroundColor: "var(--color-bg-primary)",
 		height: "100%",
 		width: "100%",
 		fontSize: "14px",
-		paddingTop: "8px",
-		paddingBottom: "8px",
+	},
+	"&.cm-editor": {
+		paddingTop: "0 !important",
+		paddingBottom: "0 !important",
 	},
 	".cm-scroller": {
 		overflow: "auto",
+		paddingTop: "8px",
+		paddingBottom: "8px",
 	},
 	".cm-content": {
 		fontFamily: "var(--font-family-mono)",
@@ -219,6 +223,9 @@ const baseTheme = EditorView.baseTheme({
 	"&.cm-focused": {
 		outline: "none",
 	},
+	".cm-cursor, .cm-dropCursor": {
+		borderLeftColor: "var(--color-text-primary)",
+	},
 	".cm-gutter": {
 		fontFamily: "var(--font-family-mono)",
 	},
@@ -247,17 +254,62 @@ const baseTheme = EditorView.baseTheme({
 	},
 });
 
+const completionTheme = EditorView.theme({
+	".cm-tooltip.cm-tooltip-autocomplete > ul": {
+		maxHeight: "400px",
+	},
+	".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
+		display: "flex",
+		alignItems: "center",
+		gap: "8px",
+	},
+	".cm-completionLabel": {
+		flex: "1",
+		minWidth: "0",
+	},
+	".cm-completionDetail": {
+		color: "var(--color-text-tertiary)",
+		fontSize: "12px",
+		marginLeft: "auto",
+		whiteSpace: "nowrap",
+	},
+	".cm-completionInfo": {
+		backgroundColor: "var(--color-bg-primary)",
+		border: "1px solid var(--color-border-primary)",
+		borderRadius: "var(--radius-md)",
+		color: "var(--color-text-secondary)",
+		fontFamily: "var(--font-family-sans)",
+		fontSize: "12px",
+		padding: "8px 12px",
+		lineHeight: "1.4",
+		whiteSpace: "normal",
+		maxWidth: "300px",
+	},
+	".cm-completion-icon": {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "16px",
+		height: "16px",
+		flexShrink: "0",
+	},
+});
+
 const readOnlyTheme = EditorView.theme({
 	"&": {
 		backgroundColor: "var(--color-bg-secondary)",
 		height: "100%",
 		width: "100%",
 		fontSize: "14px",
-		paddingTop: "8px",
-		paddingBottom: "8px",
+	},
+	"&.cm-editor": {
+		paddingTop: "0 !important",
+		paddingBottom: "0 !important",
 	},
 	".cm-scroller": {
 		overflow: "auto",
+		paddingTop: "8px",
+		paddingBottom: "8px",
 	},
 	".cm-content": {
 		fontFamily: "var(--font-family-mono)",
@@ -534,20 +586,20 @@ const customSearchExtension = [
 ];
 
 const customHighlightStyle = HighlightStyle.define([
-	{ tag: tags.propertyName, color: "#EA4A35" },
-	{ tag: tags.string, color: "#405CBF" },
-	{ tag: tags.number, color: "#00A984" },
-	{ tag: tags.bool, color: "#569cd6" },
-	{ tag: tags.null, color: "#569cd6" },
-	{ tag: tags.keyword, color: "#569cd6" },
-	{ tag: tags.operatorKeyword, color: "#405CBF" },
-	{ tag: tags.controlKeyword, color: "#EA4A35" },
-	{ tag: tags.typeName, color: "#00A984" },
-	{ tag: tags.variableName, color: "#EA4A35" },
-	{ tag: tags.operator, color: "#405CBF" },
-	{ tag: tags.comment, color: "#00A984" },
-	{ tag: tags.lineComment, color: "#00A984" },
-	{ tag: tags.blockComment, color: "#00A984" },
+	{ tag: tags.propertyName, color: "var(--hs-syntax-property)" },
+	{ tag: tags.string, color: "var(--hs-syntax-string)" },
+	{ tag: tags.number, color: "var(--hs-syntax-number)" },
+	{ tag: tags.bool, color: "var(--hs-syntax-keyword)" },
+	{ tag: tags.null, color: "var(--hs-syntax-keyword)" },
+	{ tag: tags.keyword, color: "var(--hs-syntax-keyword)" },
+	{ tag: tags.operatorKeyword, color: "var(--hs-syntax-string)" },
+	{ tag: tags.controlKeyword, color: "var(--hs-syntax-property)" },
+	{ tag: tags.typeName, color: "var(--hs-syntax-number)" },
+	{ tag: tags.variableName, color: "var(--hs-syntax-property)" },
+	{ tag: tags.operator, color: "var(--hs-syntax-string)" },
+	{ tag: tags.comment, color: "var(--hs-syntax-comment)" },
+	{ tag: tags.lineComment, color: "var(--hs-syntax-comment)" },
+	{ tag: tags.blockComment, color: "var(--hs-syntax-comment)" },
 ]);
 
 const SQL_KEYWORDS = [
@@ -748,13 +800,27 @@ export function CodeEditor({
 					languageCompartment.current.of([]),
 					bracketMatching(),
 					closeBrackets(),
-					autocompletion(),
+					autocompletion({
+						icons: false,
+						maxRenderedOptions: 1000,
+						addToOptions: [{ render: renderCompletionIcon, position: 20 }],
+						optionClass: (_completion) =>
+							"!px-2 !py-1 rounded-md aria-selected:!bg-bg-quaternary aria-selected:!text-text-primary hover:!bg-bg-secondary flex items-center gap-2",
+						tooltipClass: (_state) =>
+							"!bg-bg-primary rounded-md p-2 shadow-md !border-border-primary !typo-body",
+						compareCompletions: (a, b) => {
+							const aIsProperty = a.type === "property" ? 0 : 1;
+							const bIsProperty = b.type === "property" ? 0 : 1;
+							return aIsProperty - bIsProperty;
+						},
+					}),
 					rectangularSelection(),
 					crosshairCursor(),
 					highlightActiveLine(),
 					highlightActiveLineGutter(),
 					highlightSelectionMatches(),
 					themeCompartment.current.of(baseTheme),
+					completionTheme,
 					keymap.of([
 						...closeBracketsKeymap,
 						...defaultKeymap,
@@ -908,6 +974,9 @@ const editorInputTheme = EditorView.theme({
 		fontSize: "var(--font-size-sm)",
 		color: "var(--color-text-primary)",
 	},
+	".cm-cursor, .cm-dropCursor": {
+		borderLeftColor: "var(--color-text-primary)",
+	},
 	"&.cm-editor.cm-focused": {
 		outline: "none",
 	},
@@ -942,10 +1011,18 @@ const editorInputTheme = EditorView.theme({
 	},
 });
 
+const KeywordIcon = () => <Terminal size={16} color="#717684" />;
+const OperatorIcon = () => <Braces size={16} color="#717684" />;
+
 function getCompletionIcon(completion: Completion): React.FC | null {
 	if (completion.type === "function") return SquareFunctionIcon;
+	if (completion.type === "keyword") return KeywordIcon;
+	if (completion.type === "operator") return OperatorIcon;
 	const detail = completion.detail;
-	if (!detail) return null;
+	if (!detail) {
+		if (completion.type === "variable") return SquareFunctionIcon;
+		return null;
+	}
 	const typeName = detail.replace(/\[\]$/, "");
 	if (!typeName) return null;
 	const firstChar = typeName[0];

package/src/components/fhir-structure-view.tsx

@@ -206,13 +206,13 @@ function FhirStructureView({
 	}, [tree]);
 
 	return (
-		<div className="h-fit w-fit min-h-0 min-w-0">
-			<div className="flex items-center gap-2 font-semibold text-xs text-text-secondary border-b py-2 bg-bg-primary sticky top-0 z-20">
-				<div className="min-w-[260px] w-[260px] ml-4">Name</div>
+		<div className="min-h-0 min-w-0">
+			<div className="flex items-center gap-2 font-semibold text-xs text-text-secondary border-b py-2 pl-[34px] bg-bg-primary sticky top-0 z-20">
+				<div className="min-w-[260px] w-[260px]">Name</div>
 				<div className="min-w-[60px] w-[60px]">Flags</div>
 				<div className="min-w-[50px] w-[50px]">Card.</div>
 				<div className="min-w-[200px] w-[200px]">Type</div>
-				<div className="min-w-[200px] w-[200px]">Description</div>
+				<div className="flex-1">Description</div>
 			</div>
 			<TreeView
 				focusedItem={null}