@conciv/ui-kit-tap 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 aidx contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+# @conciv/ui-kit-tap
+
+TipTap-based rich-text primitives for conciv (SolidJS, shadow-DOM-safe): a mention composer
+built on `@tiptap/core` and the shared `@conciv/ui-kit-system` tokens. Each primitive is
+viewable in Storybook.
+
+Part of [conciv](https://github.com/conciv-dev/conciv). It ships as a dependency of the
+umbrella package — install that:
+
+```sh
+npm install -D @conciv/it
+```

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { MentionField, type MentionItem, type MentionSegment, type MentionFieldApi } from './mention-field.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAC,MAAM,oBAAoB,CAAA"}

package/dist/index.js

@@ -0,0 +1,146 @@
+import { className as e, createComponent as t, delegateEvents as n, effect as r, insert as i, memo as a, setAttribute as o, setStyleProperty as s, template as c, use as l } from "solid-js/web";
+import { For as u, Show as d, createSignal as f, onCleanup as p, onMount as m } from "solid-js";
+import { Editor as h } from "@tiptap/core";
+import { Document as g } from "@tiptap/extension-document";
+import { Paragraph as _ } from "@tiptap/extension-paragraph";
+import { Text as v } from "@tiptap/extension-text";
+import { HardBreak as y } from "@tiptap/extension-hard-break";
+import { Mention as b } from "@tiptap/extension-mention";
+import { Avatar as x } from "@conciv/ui-kit-system";
+//#region src/mention-field.tsx
+var S = /*#__PURE__*/ c("<div><div class=\"min-h-7 max-h-32 overflow-auto bg-pw-sunken text-[0.8125rem] text-pw-text rounded-pw-md [border:1px_solid_var(--pw-line)] px-2 py-1.5 [outline:none] focus-within:[border-color:var(--pw-accent-line)] [&amp;_.tiptap]:[outline:none] [&amp;_[data-mention]]:text-pw-accent-hi [&amp;_[data-mention]]:bg-pw-accent-08 [&amp;_[data-mention]]:rounded-pw-sm [&amp;_[data-mention]]:px-0.5\">"), C = /*#__PURE__*/ c("<span class=\"pointer-events-none absolute left-2 top-1.5 text-[0.8125rem] text-pw-text-3 select-none\">"), w = /*#__PURE__*/ c("<ul role=listbox aria-label=\"Mention a participant\"class=\"fixed z-[2147483647] min-w-44 max-h-56 overflow-auto rounded-pw-md bg-pw-panel text-pw-text border border-pw-line shadow-pw-lg p-1\">"), T = /*#__PURE__*/ c("<li role=option class=\"flex items-center gap-2 px-2 py-1.5 rounded-pw-sm text-[0.8125rem] cursor-pointer aria-selected:bg-pw-fill\">"), E = (e) => {
+	let t = [], n = (e) => {
+		if (!e) return;
+		let n = t.at(-1);
+		n && n.type === "text" ? n.text += e : t.push({
+			type: "text",
+			text: e
+		});
+	}, r = (e) => (e ?? []).forEach((e) => {
+		e.type === "text" ? n(e.text ?? "") : e.type === "mention" ? t.push({
+			type: "mention",
+			id: String(e.attrs?.id ?? ""),
+			label: String(e.attrs?.label ?? e.attrs?.id ?? "")
+		}) : e.type === "hardBreak" && n("\n");
+	}), i = e.content ?? [];
+	return i.forEach((e, t) => {
+		r(e.content), t < i.length - 1 && n("\n");
+	}), t;
+};
+function D(n) {
+	let c, D, [O, k] = f(!0), [A, j] = f(null), [M, N] = f(0), P = () => {
+		!D || D.isEmpty || (n.onSubmit(E(D.getJSON())), D.commands.clearContent(), k(!0), n.onEmptyChange?.(!0));
+	};
+	return m(() => {
+		c && (D = new h({
+			element: c,
+			editorProps: {
+				attributes: {
+					role: "textbox",
+					"aria-label": n.ariaLabel ?? "Message",
+					"aria-multiline": "true"
+				},
+				handleKeyDown: (e, t) => t.key === "Enter" && !t.shiftKey && !A() ? (t.preventDefault(), P(), !0) : !1
+			},
+			onUpdate: ({ editor: e }) => {
+				k(e.isEmpty), n.onEmptyChange?.(e.isEmpty);
+			},
+			extensions: [
+				g,
+				_,
+				v,
+				y,
+				b.configure({
+					HTMLAttributes: { "data-mention": "" },
+					suggestion: {
+						char: "@",
+						items: ({ query: e }) => n.items(e),
+						render: () => ({
+							onStart: (e) => {
+								j({
+									items: e.items,
+									command: e.command,
+									rect: e.clientRect?.() ?? null
+								}), N(0);
+							},
+							onUpdate: (e) => j({
+								items: e.items,
+								command: e.command,
+								rect: e.clientRect?.() ?? null
+							}),
+							onExit: () => j(null),
+							onKeyDown: ({ event: e }) => {
+								let t = A();
+								if (!t || t.items.length === 0) return !1;
+								if (e.key === "ArrowDown") return N((M() + 1) % t.items.length), !0;
+								if (e.key === "ArrowUp") return N((M() - 1 + t.items.length) % t.items.length), !0;
+								if (e.key === "Enter" || e.key === "Tab") {
+									let e = t.items[M()];
+									return e && t.command(e), !0;
+								}
+								return e.key === "Escape" ? (j(null), !0) : !1;
+							}
+						})
+					}
+				})
+			]
+		}), n.onReady?.({
+			focus: () => D?.commands.focus(),
+			clear: () => D?.commands.clearContent(),
+			submit: P,
+			element: D.view.dom
+		}));
+	}), p(() => D?.destroy()), (() => {
+		var f = S(), p = f.firstChild;
+		return l((e) => c = e, p), i(f, t(d, {
+			get when() {
+				return a(() => !!O())() && n.placeholder;
+			},
+			children: (e) => (() => {
+				var t = C();
+				return i(t, e), t;
+			})()
+		}), null), i(f, t(d, {
+			get when() {
+				return A();
+			},
+			children: (e) => t(d, {
+				get when() {
+					return a(() => e().items.length > 0)() && e().rect;
+				},
+				children: (n) => (() => {
+					var a = w();
+					return i(a, t(u, {
+						get each() {
+							return e().items;
+						},
+						children: (n, a) => (() => {
+							var s = T();
+							return s.$$pointerdown = (t) => {
+								t.preventDefault(), e().command(n);
+							}, i(s, t(x.Root, {
+								class: "size-5",
+								get children() {
+									return t(x.Fallback, { get children() {
+										return n.label.trim().charAt(0).toUpperCase() || "?";
+									} });
+								}
+							}), null), i(s, () => n.label, null), r(() => o(s, "aria-selected", a() === M())), s;
+						})()
+					})), r((e) => {
+						var t = `${n().left}px`, r = `${n().bottom + 4}px`;
+						return t !== e.e && s(a, "left", e.e = t), r !== e.t && s(a, "top", e.t = r), e;
+					}, {
+						e: void 0,
+						t: void 0
+					}), a;
+				})()
+			})
+		}), null), r(() => e(f, `relative w-full ${n.class ?? ""}`)), f;
+	})();
+}
+n(["pointerdown"]);
+//#endregion
+export { D as MentionField };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["For","Show","createSignal","onCleanup","onMount","JSX","Editor","Document","Paragraph","Text","HardBreak","Mention","Avatar","MentionItem","id","label","MentionSegment","type","text","MentionFieldApi","focus","clear","submit","element","HTMLElement","SuggestionState","items","command","item","rect","DOMRect","JsonNode","attrs","Record","content","EDITOR","PLACEHOLDER","LISTBOX","OPTION","serialize","doc","out","pushText","last","at","push","inline","nodes","forEach","node","String","blocks","block","index","length","MentionField","props","query","onSubmit","segments","onReady","api","onEmptyChange","empty","placeholder","ariaLabel","class","Element","host","HTMLDivElement","editor","setEmpty","suggestion","setSuggestion","setIndex","isEmpty","getJSON","commands","clearContent","editorProps","attributes","role","handleKeyDown","_view","event","key","shiftKey","preventDefault","onUpdate","instance","extensions","configure","HTMLAttributes","char","render","onStart","start","clientRect","update","onExit","onKeyDown","state","view","dom","destroy","_el$","_tmpl$","_el$2","firstChild","_$use","_$insert","_$createComponent","when","_$memo","children","_el$3","_tmpl$2","_el$4","_tmpl$3","each","position","_el$5","_tmpl$4","$$pointerdown","Root","Fallback","trim","charAt","toUpperCase","_$effect","_$setAttribute","_p$","_v$","left","_v$2","bottom","e","_$setStyleProperty","t","undefined","_$className","_$delegateEvents"],"sources":["../src/mention-field.tsx"],"sourcesContent":["import {For, Show, createSignal, onCleanup, onMount, type JSX} from 'solid-js'\nimport {Editor} from '@tiptap/core'\nimport {Document} from '@tiptap/extension-document'\nimport {Paragraph} from '@tiptap/extension-paragraph'\nimport {Text} from '@tiptap/extension-text'\nimport {HardBreak} from '@tiptap/extension-hard-break'\nimport {Mention} from '@tiptap/extension-mention'\nimport {Avatar} from '@conciv/ui-kit-system'\n\nexport type MentionItem = {id: string; label: string}\nexport type MentionSegment = {type: 'text'; text: string} | {type: 'mention'; id: string; label: string}\nexport type MentionFieldApi = {focus: () => void; clear: () => void; submit: () => void; element: HTMLElement}\n\ntype SuggestionState = {items: MentionItem[]; command: (item: MentionItem) => void; rect: DOMRect | null}\ntype JsonNode = {type?: string; text?: string; attrs?: Record<string, unknown>; content?: JsonNode[]}\n\nconst EDITOR =\n  'min-h-7 max-h-32 overflow-auto bg-pw-sunken text-[0.8125rem] text-pw-text rounded-pw-md [border:1px_solid_var(--pw-line)] px-2 py-1.5 [outline:none] focus-within:[border-color:var(--pw-accent-line)] [&_.tiptap]:[outline:none] [&_[data-mention]]:text-pw-accent-hi [&_[data-mention]]:bg-pw-accent-08 [&_[data-mention]]:rounded-pw-sm [&_[data-mention]]:px-0.5'\nconst PLACEHOLDER = 'pointer-events-none absolute left-2 top-1.5 text-[0.8125rem] text-pw-text-3 select-none'\nconst LISTBOX =\n  'fixed z-[2147483647] min-w-44 max-h-56 overflow-auto rounded-pw-md bg-pw-panel text-pw-text border border-pw-line shadow-pw-lg p-1'\nconst OPTION =\n  'flex items-center gap-2 px-2 py-1.5 rounded-pw-sm text-[0.8125rem] cursor-pointer aria-selected:bg-pw-fill'\n\nconst serialize = (doc: JsonNode): MentionSegment[] => {\n  const out: MentionSegment[] = []\n  const pushText = (text: string): void => {\n    if (!text) return\n    const last = out.at(-1)\n    if (last && last.type === 'text') last.text += text\n    else out.push({type: 'text', text})\n  }\n  const inline = (nodes: JsonNode[] | undefined): void =>\n    (nodes ?? []).forEach((node) => {\n      if (node.type === 'text') pushText(node.text ?? '')\n      else if (node.type === 'mention')\n        out.push({\n          type: 'mention',\n          id: String(node.attrs?.id ?? ''),\n          label: String(node.attrs?.label ?? node.attrs?.id ?? ''),\n        })\n      else if (node.type === 'hardBreak') pushText('\\n')\n    })\n  const blocks = doc.content ?? []\n  blocks.forEach((block, index) => {\n    inline(block.content)\n    if (index < blocks.length - 1) pushText('\\n')\n  })\n  return out\n}\n\n// A TipTap (ProseMirror) composer with @mentions. ProseMirror ships real shadow-DOM selection support,\n// so this works inside the comment overlay's shadow root where Slate/Lexical/textarea-caret tricks fail.\n// The editor element is created once and never re-rendered by Solid (a re-render breaks the suggestion\n// plugin); the participant listbox is a sibling the suggestion render hook drives via signals, so focus\n// never leaves the editor.\nexport function MentionField(props: {\n  items: (query: string) => MentionItem[]\n  onSubmit: (segments: MentionSegment[]) => void\n  onReady?: (api: MentionFieldApi) => void\n  onEmptyChange?: (empty: boolean) => void\n  placeholder?: string\n  ariaLabel?: string\n  class?: string\n}): JSX.Element {\n  let host: HTMLDivElement | undefined\n  let editor: Editor | undefined\n  const [empty, setEmpty] = createSignal(true)\n  const [suggestion, setSuggestion] = createSignal<SuggestionState | null>(null)\n  const [index, setIndex] = createSignal(0)\n\n  const submit = (): void => {\n    if (!editor || editor.isEmpty) return\n    props.onSubmit(serialize(editor.getJSON() as JsonNode))\n    editor.commands.clearContent()\n    setEmpty(true)\n    props.onEmptyChange?.(true)\n  }\n\n  onMount(() => {\n    if (!host) return\n    editor = new Editor({\n      element: host,\n      editorProps: {\n        attributes: {role: 'textbox', 'aria-label': props.ariaLabel ?? 'Message', 'aria-multiline': 'true'},\n        handleKeyDown: (_view, event) => {\n          if (event.key === 'Enter' && !event.shiftKey && !suggestion()) {\n            event.preventDefault()\n            submit()\n            return true\n          }\n          return false\n        },\n      },\n      onUpdate: ({editor: instance}) => {\n        setEmpty(instance.isEmpty)\n        props.onEmptyChange?.(instance.isEmpty)\n      },\n      extensions: [\n        Document,\n        Paragraph,\n        Text,\n        HardBreak,\n        Mention.configure({\n          HTMLAttributes: {'data-mention': ''},\n          suggestion: {\n            char: '@',\n            items: ({query}) => props.items(query),\n            render: () => ({\n              onStart: (start) => {\n                setSuggestion({items: start.items, command: start.command, rect: start.clientRect?.() ?? null})\n                setIndex(0)\n              },\n              onUpdate: (update) =>\n                setSuggestion({items: update.items, command: update.command, rect: update.clientRect?.() ?? null}),\n              onExit: () => setSuggestion(null),\n              onKeyDown: ({event}) => {\n                const state = suggestion()\n                if (!state || state.items.length === 0) return false\n                if (event.key === 'ArrowDown') {\n                  setIndex((index() + 1) % state.items.length)\n                  return true\n                }\n                if (event.key === 'ArrowUp') {\n                  setIndex((index() - 1 + state.items.length) % state.items.length)\n                  return true\n                }\n                if (event.key === 'Enter' || event.key === 'Tab') {\n                  const item = state.items[index()]\n                  if (item) state.command(item)\n                  return true\n                }\n                if (event.key === 'Escape') {\n                  setSuggestion(null)\n                  return true\n                }\n                return false\n              },\n            }),\n          },\n        }),\n      ],\n    })\n    props.onReady?.({\n      focus: () => editor?.commands.focus(),\n      clear: () => editor?.commands.clearContent(),\n      submit,\n      element: editor.view.dom,\n    })\n  })\n  onCleanup(() => editor?.destroy())\n\n  return (\n    <div class={`relative w-full ${props.class ?? ''}`}>\n      <div ref={(element) => (host = element)} class={EDITOR} />\n      <Show when={empty() && props.placeholder}>{(text) => <span class={PLACEHOLDER}>{text()}</span>}</Show>\n      <Show when={suggestion()}>\n        {(state) => (\n          <Show when={state().items.length > 0 && state().rect}>\n            {(rect) => (\n              <ul\n                role=\"listbox\"\n                aria-label=\"Mention a participant\"\n                class={LISTBOX}\n                style={{left: `${rect().left}px`, top: `${rect().bottom + 4}px`}}\n              >\n                <For each={state().items}>\n                  {(item, position) => (\n                    <li\n                      role=\"option\"\n                      aria-selected={position() === index()}\n                      class={OPTION}\n                      onPointerDown={(event) => {\n                        event.preventDefault()\n                        state().command(item)\n                      }}\n                    >\n                      <Avatar.Root class=\"size-5\">\n                        <Avatar.Fallback>{item.label.trim().charAt(0).toUpperCase() || '?'}</Avatar.Fallback>\n                      </Avatar.Root>\n                      {item.label}\n                    </li>\n                  )}\n                </For>\n              </ul>\n            )}\n          </Show>\n        )}\n      </Show>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/mention-field.d.ts

@@ -0,0 +1,29 @@
+import { type JSX } from 'solid-js';
+export type MentionItem = {
+    id: string;
+    label: string;
+};
+export type MentionSegment = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'mention';
+    id: string;
+    label: string;
+};
+export type MentionFieldApi = {
+    focus: () => void;
+    clear: () => void;
+    submit: () => void;
+    element: HTMLElement;
+};
+export declare function MentionField(props: {
+    items: (query: string) => MentionItem[];
+    onSubmit: (segments: MentionSegment[]) => void;
+    onReady?: (api: MentionFieldApi) => void;
+    onEmptyChange?: (empty: boolean) => void;
+    placeholder?: string;
+    ariaLabel?: string;
+    class?: string;
+}): JSX.Element;
+//# sourceMappingURL=mention-field.d.ts.map

package/dist/mention-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-field.d.ts","sourceRoot":"","sources":["../src/mention-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,GAAG,EAAC,MAAM,UAAU,CAAA;AAS9E,MAAM,MAAM,WAAW,GAAG;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAA;AACxG,MAAM,MAAM,eAAe,GAAG;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,EAAE,WAAW,CAAA;CAAC,CAAA;AA6C9G,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,EAAE,CAAA;IACvC,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAA;IACxC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,GAAG,CAAC,OAAO,CA+Hd"}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@conciv/ui-kit-tap",
+  "version": "0.0.1",
+  "description": "TipTap-based rich-text primitives for conciv (SolidJS, shadow-DOM-safe): a mention composer built on @tiptap/core and the shared ui-kit-system tokens. Each primitive is viewable in Storybook.",
+  "keywords": [
+    "conciv",
+    "prosemirror",
+    "rich-text",
+    "solid-js",
+    "tiptap",
+    "ui-kit"
+  ],
+  "homepage": "https://github.com/conciv-dev/conciv/tree/main/packages/ui-kit-tap#readme",
+  "bugs": "https://github.com/conciv-dev/conciv/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/conciv-dev/conciv.git",
+    "directory": "packages/ui-kit-tap"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tiptap/core": "^3.27.1",
+    "@tiptap/extension-document": "^3.27.1",
+    "@tiptap/extension-hard-break": "^3.27.1",
+    "@tiptap/extension-mention": "^3.27.1",
+    "@tiptap/extension-paragraph": "^3.27.1",
+    "@tiptap/extension-text": "^3.27.1",
+    "@tiptap/pm": "^3.27.1",
+    "@conciv/ui-kit-system": "0.0.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.2.1",
+    "@storybook/addon-a11y": "^10.4.4",
+    "@storybook/addon-docs": "^10.4.4",
+    "@storybook/addon-vitest": "^10.4.4",
+    "@types/node": "^22.19.21",
+    "@unocss/postcss": "^66.7.2",
+    "@unocss/reset": "^66.7.2",
+    "@vitest/browser-playwright": "4.1.8",
+    "@vitest/coverage-v8": "4.1.8",
+    "playwright": "^1.60.0",
+    "postcss": "^8.5.6",
+    "solid-js": "^1.9.13",
+    "storybook": "^10.4.4",
+    "storybook-solidjs-vite": "^10.3.0",
+    "typescript": "^6.0.3",
+    "unocss": "^66.7.2",
+    "vite": "^8.0.16",
+    "vite-plugin-solid": "^2.11.12",
+    "vitest": "^4.1.8",
+    "@conciv/uno-preset": "0.0.1"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.13"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "oxlint",
+    "test": "vitest run --passWithNoTests",
+    "storybook": "storybook dev -p 6009",
+    "build-storybook": "storybook build",
+    "publint": "publint",
+    "attw": "attw --pack . --profile esm-only"
+  }
+}