@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

package/dist/src/shadcn/components/ui/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/tree.tsx"],"sourcesContent":["import type { ItemInstance } from \"@headless-tree/core\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\ntype WithMeta = {\n\tmeta?: {\n\t\tlastNode?: boolean;\n\t};\n};\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeContextValue<T = any> {\n\tindent: number;\n\tcurrentItem?: ItemInstance<T>;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nconst TreeContext = React.createContext<TreeContextValue>({\n\tindent: 20,\n});\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction useTreeContext<T = any>() {\n\treturn React.useContext(TreeContext) as TreeContextValue<T>;\n}\n\ninterface TreeProps extends React.HTMLAttributes<HTMLDivElement> {\n\tindent?: number;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nfunction Tree({ indent = 20, tree, className, ...props }: TreeProps) {\n\tconst containerProps =\n\t\ttree && typeof tree.getContainerProps === \"function\"\n\t\t\t? tree.getContainerProps()\n\t\t\t: {};\n\tconst mergedProps = { ...props, ...containerProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-indent\": `${indent}px`,\n\t\t\"--border\": `var(--color-fg-disabled)`,\n\t} as React.CSSProperties;\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, tree }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"tree\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\"flex flex-col\", className)}\n\t\t\t\t{...otherProps}\n\t\t\t/>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemProps<T = any>\n\textends React.HTMLAttributes<HTMLButtonElement> {\n\titem: ItemInstance<T>;\n\tindent?: number;\n\tasChild?: boolean;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction TreeItem<T = any>({\n\titem,\n\tclassName,\n\tasChild,\n\tchildren,\n\t...props\n}: Omit<TreeItemProps<T>, \"indent\">) {\n\tconst { indent } = useTreeContext<T>();\n\n\tconst itemProps = typeof item.getProps === \"function\" ? item.getProps() : {};\n\tconst mergedProps = { ...props, ...itemProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-padding\": `${item.getItemMeta().level * indent}px`,\n\t} as React.CSSProperties;\n\n\tconst Comp = asChild ? Slot.Root : \"button\";\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, currentItem: item }}>\n\t\t\t<Comp\n\t\t\t\tdata-slot=\"tree-item\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"z-10 ps-(--tree-padding) outline-hidden select-none focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-focus={\n\t\t\t\t\ttypeof item.isFocused === \"function\"\n\t\t\t\t\t\t? item.isFocused() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-folder={\n\t\t\t\t\ttypeof item.isFolder === \"function\"\n\t\t\t\t\t\t? item.isFolder() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-selected={\n\t\t\t\t\ttypeof item.isSelected === \"function\"\n\t\t\t\t\t\t? item.isSelected() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-drag-target={\n\t\t\t\t\ttypeof item.isDragTarget === \"function\"\n\t\t\t\t\t\t? item.isDragTarget() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-search-match={\n\t\t\t\t\ttypeof item.isMatchingSearch === \"function\"\n\t\t\t\t\t\t? item.isMatchingSearch() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\taria-expanded={item.isExpanded()}\n\t\t\t\t{...otherProps}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemLabelProps<T = any>\n\textends React.HTMLAttributes<HTMLSpanElement> {\n\thideChevron?: boolean;\n\tdisableHover?: boolean;\n\titem?: ItemInstance<T>;\n\thorizontalLines?: boolean;\n}\n\nfunction TreeItemLabel<T>({\n\titem: propItem,\n\tchildren,\n\tclassName,\n\tdisableHover,\n\thorizontalLines,\n\thideChevron,\n\t...props\n}: TreeItemLabelProps<T & WithMeta>) {\n\tconst { currentItem } = useTreeContext<T & WithMeta>();\n\tconst item = propItem || currentItem;\n\n\tif (!item) {\n\t\tconsole.warn(\"TreeItemLabel: No item provided via props or context\");\n\t\treturn null;\n\t}\n\n\tconst data = item.getItemData?.();\n\tconst isLastNode = data?.meta?.lastNode;\n\tconst itemMeta = item.getItemMeta();\n\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"tree-item-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tree-item-label relative select-text cursor-pointer border-l-2 border-l-transparent in-focus-visible:ring-ring/50 bg-background text-text-secondary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\t\"in-data-[selected=true]:bg-bg-secondary hover:bg-bg-secondary hover:text-text-primary in-data-[selected=true]:text-text-primary\",\n\t\t\t\tdisableHover && \"text-text-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{item.isFolder() && (\n\t\t\t\t<ChevronDownIcon className=\"text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90 self-start mt-0.5\" />\n\t\t\t)}\n\t\t\t{!item.isFolder() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`w-5 min-w-5 h-px border-t mt-2.25 -ml-1 self-start`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{item.isFolder() && item.isExpanded() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-4.25 top-4 w-px min-h-full h-full border-l mt-2.25  self-start `}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-0 top-5.5 -m-1.75 border-t w-4 ${isLastNode ? \"h-full bg-inherit \" : \"\"} ${itemMeta.level === 0 ? \"hidden\" : \"\"}`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{children ||\n\t\t\t\t(typeof item.getItemName === \"function\" ? item.getItemName() : null)}\n\t\t</span>\n\t);\n}\n\nfunction TreeDragLine({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n\tconst { tree } = useTreeContext();\n\n\tif (!tree || typeof tree.getDragLineStyle !== \"function\") {\n\t\tconsole.warn(\n\t\t\t\"TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method\",\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst dragLine = tree.getDragLineStyle();\n\treturn (\n\t\t<div\n\t\t\tstyle={dragLine}\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Tree, TreeItem, TreeItemLabel, TreeDragLine, type ItemInstance };\n"],"names":["ChevronDownIcon","Slot","React","cn","TreeContext","createContext","indent","useTreeContext","useContext","Tree","tree","className","props","containerProps","getContainerProps","mergedProps","style","propStyle","otherProps","mergedStyle","Provider","value","div","data-slot","TreeItem","item","asChild","children","itemProps","getProps","getItemMeta","level","Comp","Root","currentItem","data-focus","isFocused","undefined","data-folder","isFolder","data-selected","isSelected","data-drag-target","isDragTarget","data-search-match","isMatchingSearch","aria-expanded","isExpanded","TreeItemLabel","propItem","disableHover","horizontalLines","hideChevron","console","warn","data","getItemData","isLastNode","meta","lastNode","itemMeta","span","getItemName","TreeDragLine","getDragLineStyle","dragLine"],"mappings":"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"}

package/dist/src/typography.css

@@ -42,6 +42,18 @@ body {
 	font-weight: var(--font-weight-normal);
 	line-height: var(--font-leading-4);
 }
+.typo-body-xs {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-3);
+}
+.typo-label-xs {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-3);
+}
 
 .h1 {
 	font-size: var(--font-size-4xl);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@health-samurai/react-components",
-  "version": "0.0.0-alpha.4",
+  "version": "0.0.0-alpha.6",
   "type": "module",
   "files": [
     "dist",
@@ -20,13 +20,19 @@
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.8.1",
     "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/language": "^6.11.3",
     "@codemirror/lint": "^6.8.5",
     "@codemirror/search": "^6.5.11",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.1",
+    "@headless-tree/core": "^1.4.0",
+    "@headless-tree/react": "^1.4.0",
     "@hookform/resolvers": "^5.2.1",
+    "@lezer/common": "^1.2.3",
     "@lezer/highlight": "^1.2.1",
+    "@lezer/lr": "^1.4.2",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -53,6 +59,7 @@
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -61,6 +68,7 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.539.0",
     "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
     "react": "^19.1.0",
     "react-day-picker": "^9.8.1",
     "react-dom": "^19.1.0",
@@ -73,6 +81,7 @@
     "zod": "^4.0.17"
   },
   "devDependencies": {
+    "@lezer/generator": "^1.8.0",
     "@storybook/addon-docs": "^9.1.1",
     "@storybook/react-vite": "^9.1.1",
     "@swc/cli": "^0.7.8",
@@ -83,12 +92,14 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react-swc": "^3.10.2",
+    "chokidar": "^4.0.3",
     "storybook": "^9.1.1",
     "tailwindcss": "^4.1.11",
     "tsx": "^4.20.4",
     "tw-animate-css": "^1.3.6",
     "typescript": "~5.8.3",
-    "vite": "^7.0.4"
+    "vite": "^7.0.4",
+    "vitest": "^3.2.4"
   },
   "publishConfig": {
     "access": "public"

package/src/components/code-editor/http/grammar/http.grammar

@@ -0,0 +1,74 @@
+@top Http {
+    httpRequest
+}
+
+@tokens {
+    eof { @eof }
+
+    lf { $[\n] }
+    notLf { ![\n] }
+
+    cr { $[\r] }
+    notCr { ![\r] }
+
+    colon { $[:] }
+    notColon { ![:] }
+
+    space { $[ \t] }
+    notSpace { ![ \t] }
+
+    headerNameChar { ![\n\r \t:] }
+    headerNameText { headerNameChar+ }
+
+    headerValueFirstChar { ![\n\r \t] }
+    headerValueChar { ![\n\r] }
+    headerValueLastChar { headerValueFirstChar }
+    headerValueText { headerValueFirstChar headerValueChar* headerValueLastChar | headerValueFirstChar }
+
+    methodChar { ![\n\r \t] }
+    methodText { methodChar+ }
+
+    pathChar { ![\n\r] }
+    firstPathChar { ![\n\r \t] }
+    pathText { firstPathChar pathChar* }
+
+    crlf { (cr lf) | cr | lf }
+
+    bodyChar { _ }
+}
+
+HttpRequestMethod[group="Method"] {
+    methodText
+}
+
+HttpRequestPath {
+    pathText
+}
+
+httpRequestLine {
+    space* HttpRequestMethod space+ HttpRequestPath crlf
+}
+
+HttpHeaderName {
+    headerNameText
+}
+
+HttpHeaderValue {
+    headerValueText
+}
+
+HttpHeader {
+    space* HttpHeaderName space* colon space* HttpHeaderValue space* crlf
+}
+
+HttpHeaders {
+    HttpHeader+
+}
+
+HttpBody {
+    bodyChar*
+}
+
+httpRequest {
+    httpRequestLine HttpHeaders? crlf HttpBody
+}

package/src/components/code-editor/http/grammar/http.terms.ts

@@ -0,0 +1,9 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const Http = 1,
+	HttpRequestMethod = 2,
+	HttpRequestPath = 3,
+	HttpHeaders = 4,
+	HttpHeader = 5,
+	HttpHeaderName = 6,
+	HttpHeaderValue = 7,
+	HttpBody = 8;

package/src/components/code-editor/http/grammar/http.test.ts

@@ -0,0 +1,110 @@
+// Tests for lezer Http grammar
+
+import { testTree } from "@lezer/generator/test";
+import { parser } from "./http";
+
+type StackEntry = {
+	name: string;
+	from: number;
+	to: number;
+	value: string;
+	children: StackEntry[];
+	textNode?: boolean;
+};
+
+function parseHttp(input: string): StackEntry {
+	const stack: StackEntry[] = [];
+	parser.parse(input).iterate({
+		enter: (node) => {
+			const nodeName = node.type.name;
+			const nodeFrom = node.from;
+			const nodeTo = node.to;
+			const value = input.slice(nodeFrom, nodeTo);
+
+			stack.push({
+				name: nodeName,
+				from: nodeFrom,
+				to: nodeTo,
+				value: value,
+				children: [],
+			});
+		},
+
+		leave: () => {
+			const current = stack.pop();
+			if (current === undefined) {
+				throw "Stack underflow";
+			}
+
+			if (stack.length === 0) {
+				// Re-push root
+				stack.push(current);
+				return;
+			}
+
+			const parent = stack[stack.length - 1];
+			if (parent === undefined) {
+				throw "Impossible";
+			}
+
+			parent.children.push(current);
+		},
+	});
+
+	const res = stack.pop();
+	if (res === undefined) {
+		throw "Stack underflow";
+	}
+	return res;
+}
+
+type Tree = TreeNode | string;
+type TreeNode = {
+	name: string;
+	children: Tree[];
+};
+
+function transform(root: StackEntry): Tree {
+	const tree: Tree = {
+		name: root.name,
+		children: [],
+	};
+
+	let pos = root.from;
+	for (const child of root.children) {
+		if (pos < child.from) {
+			const prefix = root.value.slice(pos - root.from, child.from - root.from);
+			tree.children.push(prefix);
+		}
+
+		tree.children.push(transform(child));
+		pos = child.to;
+	}
+
+	if (pos < root.to) {
+		tree.children.push(root.value.slice(pos - root.from));
+	}
+
+	return tree;
+}
+
+const tree = parser.parse("GET /\nAccept: text/yaml\n\nhello: world");
+console.dir(parseHttp("GET /\nAccept: text/yaml\n\nhello: world\n\nagain"), {
+	depth: null,
+});
+console.dir(
+	transform(parseHttp("GET /\nAccept: text/yaml\n\nhello: world\n\nagain")),
+	{
+		depth: null,
+	},
+);
+console.log(tree);
+tree.iterate({
+	enter: (node) => {
+		console.log(`ENTER ${node.type.name}[${node.from}:${node.to}]`);
+	},
+	leave: (node) => {
+		console.log(`LEAVE ${node.type.name}[${node.from}:${node.to}]`);
+	},
+});
+testTree(tree, `Http`);

package/src/components/code-editor/http/grammar/http.ts

@@ -0,0 +1,21 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import { LRParser } from "@lezer/lr";
+export const parser = LRParser.deserialize({
+	version: 14,
+	states:
+		"'zOQOPOOOOOO'#Ce'#CeOQOPO'#CjOOOO'#C^'#C^OYOPO'#CjO_OQO'#CiQOOOOOOOOO-E6c-E6cOYOPO,59UOjOSO,59UOrOQO'#CaOOOO'#Cb'#CbOzOQO'#CaOOOO'#Cf'#CfO!SOQO'#C`O!_OWO,59TO!gOPO,59TOjOSO1G.pOOOO'#C_'#C_O!lOPO1G.pO!qOQO,58{O!qOQO,58{O!yO`O,58{OOOO-E6d-E6dOOOO'#Cg'#CgO#ROWO'#CdOOOO1G.o1G.oO!_OWO1G.oO#ZOPO7+$[OOOO7+$[7+$[O#`OQO1G.gO!yO`O1G.gO!yO`O1G.gOOOO'#Cc'#CcO#hOPO1G.gOOOO-E6e-E6eOOOO7+$Z7+$ZOOOO<<Gv<<GvO!yO`O7+$RO!yO`O7+$RO#pOPO7+$RO#pOPO7+$ROOOO7+$R7+$RO!yO`O<<GmO#xOPO<<GmO#xOPO<<GmOOOO<<Gm<<GmO$QOPOAN=XO$QOPOAN=XOOOOAN=XAN=XO$YOPOG22sOOOOG22sG22sOOOOLD(_LD(_",
+	stateData:
+		"$b~O_PO`RO~O_PO~O_POb_OcZO~O_POabO~O_POcZO~O_POdfO~O_POcZObSX~OfhO[WP~ObkO~ObmO~O_POdoO~O_POeqO~OfhO[WX~ObuO~O_POdvO~O_PObzO~O_POb!OO~O_POb!RO~O_POb!TO~O_POb!UO~O",
+	goto: "#|_PP`flosz!Y!`#i#oP#v#yQSORWQQcXRlaR`TT]T^S[T^RdYQrfSxopS|vwR!P{Qj_RtkQQOjVQXYaenpwy{}!Q!SQXSSYT^QaWQe[QndQpfQwoQyrQ{vQ}xQ!Q|R!S!PQ^TRg^Si_kRsiRUORTO",
+	nodeNames:
+		"⚠ Http HttpRequestMethod HttpRequestPath HttpHeaders HttpHeader HttpHeaderName HttpHeaderValue HttpBody",
+	maxTerm: 22,
+	nodeProps: [["group", 2, "Method"]],
+	skippedNodes: [0],
+	repeatNodeCount: 3,
+	tokenData:
+		"'xoR]OXzXY&VYZ&^Z]z]^&e^pzpq&Vq![z![!]&t!];'Sz;'S;=`'k;=`<%l's<%lOzo!XYfWcQe``PaSOX!wXY#rZ]!w^p!wpq#rq![!w![!]%W!];'S!w;'S;=`&P<%lO!wg#SYcQe``PaSOX!wXY#rZ]!w^p!wpq#rq![!w![!]%W!];'S!w;'S;=`&P<%lO!wd#wWaSOX$aXY#rZ]$a^p$apq#rq;'S$a;'S;=`%Q<%lO$ad$hWe`aSOX$aXY#rZ]$a^p$apq#rq;'S$a;'S;=`%Q<%lO$ad%TP;=`<%l$ae%aWe``PaSOX%WXY#rZ]%W^p%Wpq#rq;'S%W;'S;=`%y<%lO%We%|P;=`<%l%Wg&SP;=`<%l!wo&^OfW_gZ&eOfWbRZ&lPfWbRYZ&oR&tObRo'RWfWdQe``PaSOX%WXY#rZ]%W^p%Wpq#rq;'S%W;'S;=`%y<%lO%Wo'pPfW;=`<%lzW'xOfW",
+	tokenizers: [0, 1, 2, 3, 4],
+	topRules: { Http: [0, 1] },
+	tokenPrec: 0,
+});

package/src/components/code-editor/http/index.ts

@@ -0,0 +1,87 @@
+import {
+	foldInside,
+	foldNodeProp,
+	type Language,
+	LanguageSupport,
+	LRLanguage,
+} from "@codemirror/language";
+import { parseMixed } from "@lezer/common";
+import { styleTags, tags } from "@lezer/highlight";
+import type { LRParser } from "@lezer/lr";
+import { parser } from "./grammar/http";
+
+function makeParser(
+	bodyLanguages: (contentType: string) => Language | null,
+): LRParser {
+	return parser.configure({
+		props: [
+			styleTags({
+				HttpHeaderName: tags.variableName,
+				HttpHeaderValue: tags.attributeValue,
+			}),
+
+			foldNodeProp.add({
+				HttpHeaders: foldInside,
+			}),
+		],
+		wrap: parseMixed((node, input) => {
+			if (node.name !== "HttpBody") {
+				return null;
+			}
+
+			const headers = node.node.prevSibling;
+			if (headers?.name !== "HttpHeaders") {
+				return null;
+			}
+
+			let contentType: string | null = null;
+
+			for (
+				let child = headers.firstChild;
+				child !== null;
+				child = child.nextSibling
+			) {
+				const headerNameNode = child.getChild("HttpHeaderName");
+				if (headerNameNode === null) {
+					continue;
+				}
+
+				const headerName = input.read(headerNameNode.from, headerNameNode.to);
+				if (headerName.toLowerCase() !== "content-type") {
+					continue;
+				}
+
+				if (contentType !== null) {
+					// Disallow multiple content types
+					return null;
+				}
+
+				const headerValueNode = child.getChild("HttpHeaderValue");
+				if (headerValueNode === null) {
+					continue;
+				}
+
+				contentType = input.read(headerValueNode.from, headerValueNode.to);
+			}
+
+			if (contentType === null) {
+				return null;
+			}
+
+			const language = bodyLanguages(contentType);
+			if (language === null) {
+				return null;
+			}
+
+			return { parser: language.parser };
+		}),
+	});
+}
+
+function http(bodyLanguages: (contentType: string) => Language | null) {
+	const parser = makeParser(bodyLanguages);
+	const language = LRLanguage.define({ parser: parser });
+	return new LanguageSupport(language, []);
+}
+
+export { http };