@gxp-dev/mod-ui 2.0.10 → 2.0.12

package/dist/components/compositions/elements/code/FileTree.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,195 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/card/Card.js";
+import n from "../../../ui/card/CardContent.js";
+import r from "../../../ui/card/CardHeader.js";
+import i from "../../../ui/card/CardTitle.js";
+import "../../../ui/card/index.js";
+import a from "../../../ui/skeleton/Skeleton.js";
+import "../../../ui/skeleton/index.js";
+import { Fragment as o, computed as s, createBlock as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, h as p, normalizeClass as m, onMounted as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, watch as x, withCtx as S } from "vue";
+import { ChevronDown as C, ChevronRight as w, File as T, Folder as E, FolderOpen as D } from "@lucide/vue";
+//#region src/components/compositions/elements/code/FileTree.vue?vue&type=script&setup=true&lang.ts
+var O = {
+	key: 0,
+	"data-testid": "file-tree-loading",
+	class: "flex flex-col gap-1.5 px-2"
+}, k = {
+	key: 1,
+	class: "px-2 text-sm text-destructive",
+	"data-testid": "file-tree-error",
+	role: "alert"
+}, A = {
+	key: 2,
+	class: "px-2 text-sm text-muted-foreground",
+	"data-testid": "file-tree-empty"
+}, j = {
+	key: 3,
+	class: "flex flex-col",
+	role: "tree",
+	"data-testid": "file-tree-list"
+}, M = /* @__PURE__ */ f({
+	__name: "FileTree",
+	props: {
+		path: { default: "" },
+		onLoadTree: {},
+		selectedPath: {},
+		onSelectPath: {},
+		expandedPaths: {},
+		onExpandedChange: {},
+		label: { default: "File Tree" },
+		name: {},
+		classList: {}
+	},
+	emits: ["update:selectedPath", "update:expandedPaths"],
+	setup(f, { expose: M, emit: N }) {
+		let P = f, F = N;
+		function I(e) {
+			return {
+				path: e.path,
+				name: e.name,
+				kind: e.kind,
+				loading: !1,
+				loaded: Array.isArray(e.children),
+				error: null,
+				childNodes: Array.isArray(e.children) ? e.children.map(I) : []
+			};
+		}
+		let L = _([]), R = _(!1), z = _(null), B = _(new Set(P.expandedPaths ?? [])), V = s(() => Array.from(B.value));
+		x(() => P.expandedPaths, (e) => {
+			e !== void 0 && (B.value = new Set(e));
+		});
+		function H() {
+			let e = V.value;
+			F("update:expandedPaths", e), P.onExpandedChange && P.onExpandedChange(e);
+		}
+		async function U() {
+			R.value = !0, z.value = null;
+			try {
+				let e = await P.onLoadTree(P.path ?? "");
+				L.value = Array.isArray(e) ? e.map(I) : [];
+			} catch (e) {
+				z.value = e instanceof Error ? e.message : String(e), L.value = [];
+			} finally {
+				R.value = !1;
+			}
+		}
+		async function W(e) {
+			if (e.kind === "directory" && !(e.loading || e.loaded)) {
+				e.loading = !0, e.error = null;
+				try {
+					let t = await P.onLoadTree(e.path);
+					e.childNodes = Array.isArray(t) ? t.map(I) : [], e.loaded = !0;
+				} catch (t) {
+					e.error = t instanceof Error ? t.message : String(t), e.childNodes = [];
+				} finally {
+					e.loading = !1;
+				}
+			}
+		}
+		function G(e) {
+			return B.value.has(e);
+		}
+		async function K(e) {
+			let t = new Set(B.value);
+			t.has(e.path) ? t.delete(e.path) : (t.add(e.path), e.loaded || await W(e)), B.value = t, H();
+		}
+		function q(e) {
+			e.kind === "file" && (F("update:selectedPath", e.path), P.onSelectPath && P.onSelectPath(e.path));
+		}
+		h(() => {
+			U();
+		}), x(() => P.path, () => {
+			U();
+		});
+		let J = {
+			name: "FileTreeNode",
+			props: {
+				node: {
+					type: Object,
+					required: !0
+				},
+				depth: {
+					type: Number,
+					required: !0
+				}
+			},
+			setup(e) {
+				return () => {
+					let t = e.node, n = G(t.path), r = { paddingLeft: `${e.depth * 16 + 8}px` }, i = t.kind === "file", o = i && P.selectedPath === t.path, s = p("div", {
+						class: ["flex items-center gap-1.5 rounded-sm py-1 pr-2 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground", o ? "bg-accent text-accent-foreground font-medium" : ""].join(" "),
+						style: r,
+						role: "treeitem",
+						"data-testid": `file-tree-row-${t.path}`,
+						"data-kind": t.kind,
+						"aria-expanded": i ? void 0 : String(n),
+						"aria-selected": i ? String(o) : void 0,
+						onClick: (e) => {
+							e.stopPropagation(), i ? q(t) : K(t);
+						}
+					}, [
+						i ? p("span", { class: "inline-block w-4 shrink-0" }) : p(n ? C : w, {
+							class: "size-4 shrink-0 text-muted-foreground",
+							"data-testid": n ? `file-tree-chevron-down-${t.path}` : `file-tree-chevron-right-${t.path}`
+						}),
+						p(i ? T : n ? D : E, { class: "size-4 shrink-0 text-muted-foreground" }),
+						p("span", { class: "truncate" }, t.name)
+					]), c = [];
+					if (!i && n) {
+						let n = { paddingLeft: `${(e.depth + 1) * 16 + 8}px` };
+						if (t.loading) c.push(p("li", {
+							class: "py-1",
+							style: n,
+							"data-testid": `file-tree-child-loading-${t.path}`
+						}, [p(a, { class: "h-4 w-1/2" })]));
+						else if (t.error) c.push(p("li", {
+							class: "py-1 text-sm text-destructive",
+							style: n,
+							role: "alert",
+							"data-testid": `file-tree-child-error-${t.path}`
+						}, t.error));
+						else if (t.childNodes.length === 0) c.push(p("li", {
+							class: "py-1 text-sm italic text-muted-foreground",
+							style: n,
+							"data-testid": `file-tree-child-empty-${t.path}`
+						}, "(empty)"));
+						else for (let n of t.childNodes) c.push(p(J, {
+							key: n.path,
+							node: n,
+							depth: e.depth + 1
+						}));
+					}
+					return p("li", { class: "flex list-none flex-col" }, [s, ...c]);
+				};
+			}
+		};
+		return M({ reload: U }), (s, f) => (g(), c(b(t), {
+			class: m(b(e)(P.classList)),
+			"data-element-name": P.name ?? void 0,
+			"data-testid": "file-tree"
+		}, {
+			default: S(() => [d(b(r), null, {
+				default: S(() => [d(b(i), { class: "flex items-center gap-2 text-base" }, {
+					default: S(() => [d(b(E), { class: "size-5 text-muted-foreground" }), u("span", null, y(P.label), 1)]),
+					_: 1
+				})]),
+				_: 1
+			}), d(b(n), { class: "px-2 pb-4" }, {
+				default: S(() => [R.value ? (g(), l("div", O, [
+					d(b(a), { class: "h-5 w-3/4" }),
+					d(b(a), { class: "h-5 w-2/3" }),
+					d(b(a), { class: "h-5 w-1/2" })
+				])) : z.value ? (g(), l("p", k, y(z.value), 1)) : L.value.length === 0 ? (g(), l("p", A, " No files. ")) : (g(), l("ul", j, [(g(!0), l(o, null, v(L.value, (e) => (g(), c(J, {
+					key: e.path,
+					node: e,
+					depth: 0
+				}, null, 8, ["node"]))), 128))]))]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["class", "data-element-name"]));
+	}
+});
+//#endregion
+export { M as default };
+
+//# sourceMappingURL=FileTree.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/code/FileTree.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/code/FileTree.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven file tree composition. Renders a recursive list of files\n * and folders sourced by a `onLoadTree` callback. The composition makes\n * no HTTP calls itself — the consumer provides a Promise-returning\n * loader for each node.\n *\n *   <FileTree\n *     :on-load-tree=\"(path) => fetch(`/api/tree?path=${path}`).then(r => r.json())\"\n *     v-model:selected-path=\"selected\"\n *     v-model:expanded-paths=\"expanded\"\n *   />\n */\nimport { computed, h, onMounted, ref, watch, type PropType } from \"vue\"\nimport {\n  ChevronDown,\n  ChevronRight,\n  File as FileIcon,\n  Folder,\n  FolderOpen,\n} from \"@lucide/vue\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface TreeNode {\n  /** Full path from the root, e.g. `src/components/Button.vue`. */\n  path: string\n  /** Display name (typically the trailing path segment). */\n  name: string\n  kind: \"file\" | \"directory\"\n  /** Pre-loaded children. When omitted for a directory, the loader is\n   *  invoked the first time the node is expanded. */\n  children?: TreeNode[]\n}\n\nexport interface FileTreeProps {\n  /** Root path. Passed to `onLoadTree` on mount. */\n  path?: string\n  /** REQUIRED loader for children at a given path. */\n  onLoadTree: (path: string) => Promise<TreeNode[]>\n  /** Current selected file path (v-modelable as `selectedPath`). */\n  selectedPath?: string\n  /** Called when the user clicks a file. */\n  onSelectPath?: (path: string) => void\n  /** Controlled expanded directory paths (v-modelable as `expandedPaths`). */\n  expandedPaths?: string[]\n  /** Fired when the set of expanded paths changes. */\n  onExpandedChange?: (paths: string[]) => void\n  label?: string\n  name?: string | null\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<FileTreeProps>(), {\n  path: \"\",\n  label: \"File Tree\",\n})\n\nconst emit = defineEmits<{\n  \"update:selectedPath\": [path: string]\n  \"update:expandedPaths\": [paths: string[]]\n}>()\n\ninterface InternalNode {\n  path: string\n  name: string\n  kind: \"file\" | \"directory\"\n  loading: boolean\n  loaded: boolean\n  error: string | null\n  childNodes: InternalNode[]\n}\n\nfunction toInternal(node: TreeNode): InternalNode {\n  return {\n    path: node.path,\n    name: node.name,\n    kind: node.kind,\n    loading: false,\n    loaded: Array.isArray(node.children),\n    error: null,\n    childNodes: Array.isArray(node.children)\n      ? node.children.map(toInternal)\n      : [],\n  }\n}\n\nconst rootNodes = ref<InternalNode[]>([])\nconst rootLoading = ref<boolean>(false)\nconst rootError = ref<string | null>(null)\n\nconst localExpanded = ref<Set<string>>(\n  new Set<string>(props.expandedPaths ?? []),\n)\n\nconst expandedPathsList = computed<string[]>(() =>\n  Array.from(localExpanded.value),\n)\n\nwatch(\n  () => props.expandedPaths,\n  (next) => {\n    if (next === undefined) {\n      return\n    }\n    localExpanded.value = new Set(next)\n  },\n)\n\nfunction notifyExpanded(): void {\n  const list = expandedPathsList.value\n  emit(\"update:expandedPaths\", list)\n  if (props.onExpandedChange) {\n    props.onExpandedChange(list)\n  }\n}\n\nasync function loadRoot(): Promise<void> {\n  rootLoading.value = true\n  rootError.value = null\n  try {\n    const result = await props.onLoadTree(props.path ?? \"\")\n    rootNodes.value = Array.isArray(result) ? result.map(toInternal) : []\n  } catch (err) {\n    rootError.value = err instanceof Error ? err.message : String(err)\n    rootNodes.value = []\n  } finally {\n    rootLoading.value = false\n  }\n}\n\nasync function loadChildren(node: InternalNode): Promise<void> {\n  if (node.kind !== \"directory\") {\n    return\n  }\n  if (node.loading || node.loaded) {\n    return\n  }\n  node.loading = true\n  node.error = null\n  try {\n    const result = await props.onLoadTree(node.path)\n    node.childNodes = Array.isArray(result) ? result.map(toInternal) : []\n    node.loaded = true\n  } catch (err) {\n    node.error = err instanceof Error ? err.message : String(err)\n    node.childNodes = []\n  } finally {\n    node.loading = false\n  }\n}\n\nfunction isExpanded(path: string): boolean {\n  return localExpanded.value.has(path)\n}\n\nasync function toggleDirectory(node: InternalNode): Promise<void> {\n  const next = new Set(localExpanded.value)\n  if (next.has(node.path)) {\n    next.delete(node.path)\n  } else {\n    next.add(node.path)\n    if (!node.loaded) {\n      await loadChildren(node)\n    }\n  }\n  localExpanded.value = next\n  notifyExpanded()\n}\n\nfunction selectFile(node: InternalNode): void {\n  if (node.kind !== \"file\") {\n    return\n  }\n  emit(\"update:selectedPath\", node.path)\n  if (props.onSelectPath) {\n    props.onSelectPath(node.path)\n  }\n}\n\nonMounted(() => {\n  void loadRoot()\n})\n\nwatch(\n  () => props.path,\n  () => {\n    void loadRoot()\n  },\n)\n\nconst FileTreeNode = {\n  name: \"FileTreeNode\",\n  props: {\n    node: {\n      type: Object as PropType<InternalNode>,\n      required: true as const,\n    },\n    depth: { type: Number, required: true as const },\n  },\n  setup(nodeProps: { node: InternalNode; depth: number }) {\n    return () => {\n      const node = nodeProps.node\n      const expanded = isExpanded(node.path)\n      const indent = { paddingLeft: `${nodeProps.depth * 16 + 8}px` }\n      const isFile = node.kind === \"file\"\n      const selected = isFile && props.selectedPath === node.path\n      const rowClass = [\n        \"flex items-center gap-1.5 rounded-sm py-1 pr-2 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground\",\n        selected ? \"bg-accent text-accent-foreground font-medium\" : \"\",\n      ].join(\" \")\n\n      const row = h(\n        \"div\",\n        {\n          class: rowClass,\n          style: indent,\n          role: \"treeitem\",\n          \"data-testid\": `file-tree-row-${node.path}`,\n          \"data-kind\": node.kind,\n          \"aria-expanded\": isFile ? undefined : String(expanded),\n          \"aria-selected\": isFile ? String(selected) : undefined,\n          onClick: (e: Event) => {\n            e.stopPropagation()\n            if (isFile) {\n              selectFile(node)\n            } else {\n              void toggleDirectory(node)\n            }\n          },\n        },\n        [\n          isFile\n            ? h(\"span\", { class: \"inline-block w-4 shrink-0\" })\n            : h(expanded ? ChevronDown : ChevronRight, {\n                class: \"size-4 shrink-0 text-muted-foreground\",\n                \"data-testid\": expanded\n                  ? `file-tree-chevron-down-${node.path}`\n                  : `file-tree-chevron-right-${node.path}`,\n              }),\n          isFile\n            ? h(FileIcon, {\n                class: \"size-4 shrink-0 text-muted-foreground\",\n              })\n            : h(expanded ? FolderOpen : Folder, {\n                class: \"size-4 shrink-0 text-muted-foreground\",\n              }),\n          h(\"span\", { class: \"truncate\" }, node.name),\n        ],\n      )\n\n      const children: ReturnType<typeof h>[] = []\n      if (!isFile && expanded) {\n        const childIndent = {\n          paddingLeft: `${(nodeProps.depth + 1) * 16 + 8}px`,\n        }\n        if (node.loading) {\n          children.push(\n            h(\n              \"li\",\n              {\n                class: \"py-1\",\n                style: childIndent,\n                \"data-testid\": `file-tree-child-loading-${node.path}`,\n              },\n              [h(Skeleton, { class: \"h-4 w-1/2\" })],\n            ),\n          )\n        } else if (node.error) {\n          children.push(\n            h(\n              \"li\",\n              {\n                class: \"py-1 text-sm text-destructive\",\n                style: childIndent,\n                role: \"alert\",\n                \"data-testid\": `file-tree-child-error-${node.path}`,\n              },\n              node.error,\n            ),\n          )\n        } else if (node.childNodes.length === 0) {\n          children.push(\n            h(\n              \"li\",\n              {\n                class: \"py-1 text-sm italic text-muted-foreground\",\n                style: childIndent,\n                \"data-testid\": `file-tree-child-empty-${node.path}`,\n              },\n              \"(empty)\",\n            ),\n          )\n        } else {\n          for (const child of node.childNodes) {\n            children.push(\n              h(FileTreeNode, {\n                key: child.path,\n                node: child,\n                depth: nodeProps.depth + 1,\n              }),\n            )\n          }\n        }\n      }\n\n      return h(\n        \"li\",\n        { class: \"flex list-none flex-col\" },\n        [row, ...children],\n      )\n    }\n  },\n}\n\ndefineExpose({ reload: loadRoot })\n</script>\n\n<template>\n  <Card\n    :class=\"cn(props.classList)\"\n    :data-element-name=\"props.name ?? undefined\"\n    data-testid=\"file-tree\"\n  >\n    <CardHeader>\n      <CardTitle class=\"flex items-center gap-2 text-base\">\n        <Folder class=\"size-5 text-muted-foreground\" />\n        <span>{{ props.label }}</span>\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"px-2 pb-4\">\n      <div\n        v-if=\"rootLoading\"\n        data-testid=\"file-tree-loading\"\n        class=\"flex flex-col gap-1.5 px-2\"\n      >\n        <Skeleton class=\"h-5 w-3/4\" />\n        <Skeleton class=\"h-5 w-2/3\" />\n        <Skeleton class=\"h-5 w-1/2\" />\n      </div>\n      <p\n        v-else-if=\"rootError\"\n        class=\"px-2 text-sm text-destructive\"\n        data-testid=\"file-tree-error\"\n        role=\"alert\"\n      >\n        {{ rootError }}\n      </p>\n      <p\n        v-else-if=\"rootNodes.length === 0\"\n        class=\"px-2 text-sm text-muted-foreground\"\n        data-testid=\"file-tree-empty\"\n      >\n        No files.\n      </p>\n      <ul\n        v-else\n        class=\"flex flex-col\"\n        role=\"tree\"\n        data-testid=\"file-tree-list\"\n      >\n        <FileTreeNode\n          v-for=\"node in rootNodes\"\n          :key=\"node.path\"\n          :node=\"node\"\n          :depth=\"0\"\n        />\n      </ul>\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/elements/code/GitCodeEditor.js

@@ -0,0 +1,7 @@
+import e from "./GitCodeEditor.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/code/GitCodeEditor.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=GitCodeEditor.js.map

package/dist/components/compositions/elements/code/GitCodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GitCodeEditor.js","names":[],"sources":["../../../../../src/components/compositions/elements/code/GitCodeEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven git code editor composition. Wraps a textarea editor\n * with a branch switcher, file-path input, and a save button. The\n * composition makes no HTTP calls — the consumer supplies Promise-\n * returning callbacks for loading branches, loading a file, and\n * (optionally) saving it.\n *\n *   <GitCodeEditor\n *     repository=\"gramercy/plugins\"\n *     v-model:branch=\"branch\"\n *     v-model:path=\"path\"\n *     v-model=\"content\"\n *     :on-load-branches=\"loadBranches\"\n *     :on-load-file=\"loadFile\"\n *     :on-save-file=\"saveFile\"\n *   />\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { GitBranch, Loader2, Save } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface GitCodeEditorLoadedFile {\n  content: string\n  language?: string\n}\n\nexport interface GitCodeEditorProps {\n  /** Repository identifier (display only). */\n  repository?: string\n  /** Current branch (v-modelable). */\n  branch?: string\n  /** Current file path (v-modelable). */\n  path?: string\n  /** File content (v-modelable via modelValue). */\n  modelValue?: string\n  /** Lists the branches for the branch selector. */\n  onLoadBranches?: () => Promise<string[]>\n  /** REQUIRED loader for the current (path, branch). */\n  onLoadFile?: (\n    path: string,\n    branch: string,\n  ) => Promise<GitCodeEditorLoadedFile>\n  /** Optional save callback. When omitted, the save button is hidden. */\n  onSaveFile?: (path: string, branch: string, content: string) => Promise<void>\n  /** Syntax hint. Default plaintext; overridden by `onLoadFile`'s response. */\n  language?: string\n  readonly?: boolean\n  disabled?: boolean\n  required?: boolean\n  label?: string\n  hideLabel?: boolean\n  name?: string | null\n  id?: string\n  helpText?: string\n  errors?: string[]\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<GitCodeEditorProps>(), {\n  errors: () => [],\n  language: \"plaintext\",\n  label: \"Git Code Editor\",\n})\n\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string]\n  \"update:branch\": [value: string]\n  \"update:path\": [value: string]\n  \"update:language\": [value: string]\n}>()\n\nconst content = ref<string>(props.modelValue ?? \"\")\nconst branchRef = ref<string>(props.branch ?? \"\")\nconst pathRef = ref<string>(props.path ?? \"\")\nconst languageRef = ref<string>(props.language ?? \"plaintext\")\n\nwatch(\n  () => props.modelValue,\n  (next) => {\n    if (next !== undefined && next !== content.value) {\n      content.value = next\n    }\n  },\n)\nwatch(\n  () => props.branch,\n  (next) => {\n    if (next !== undefined && next !== branchRef.value) {\n      branchRef.value = next\n    }\n  },\n)\nwatch(\n  () => props.path,\n  (next) => {\n    if (next !== undefined && next !== pathRef.value) {\n      pathRef.value = next\n    }\n  },\n)\nwatch(\n  () => props.language,\n  (next) => {\n    if (next !== undefined && next !== languageRef.value) {\n      languageRef.value = next\n    }\n  },\n)\n\nfunction updateContent(next: string | undefined): void {\n  const value = next ?? \"\"\n  content.value = value\n  emit(\"update:modelValue\", value)\n}\n\nfunction updateBranch(next: string): void {\n  branchRef.value = next\n  emit(\"update:branch\", next)\n}\n\nfunction updatePath(next: string | number | undefined): void {\n  const v = next === undefined ? \"\" : String(next)\n  pathRef.value = v\n  emit(\"update:path\", v)\n}\n\n// --- branches loader -------------------------------------------------\nconst branches = ref<string[]>([])\nconst branchesLoading = ref<boolean>(false)\nconst branchesError = ref<string | null>(null)\n\nasync function loadBranches(): Promise<void> {\n  if (!props.onLoadBranches) {\n    return\n  }\n  branchesLoading.value = true\n  branchesError.value = null\n  try {\n    const next = await props.onLoadBranches()\n    branches.value = Array.isArray(next) ? next : []\n  } catch (err) {\n    branchesError.value = err instanceof Error ? err.message : String(err)\n    branches.value = []\n  } finally {\n    branchesLoading.value = false\n  }\n}\n\n// --- file loader -----------------------------------------------------\nconst fileLoading = ref<boolean>(false)\nconst fileError = ref<string | null>(null)\nlet fileToken = 0\n\nasync function loadFile(): Promise<void> {\n  if (!props.onLoadFile) {\n    return\n  }\n  if (!pathRef.value || !branchRef.value) {\n    return\n  }\n  const myToken = ++fileToken\n  fileLoading.value = true\n  fileError.value = null\n  try {\n    const result = await props.onLoadFile(pathRef.value, branchRef.value)\n    if (myToken !== fileToken) {\n      return\n    }\n    const next = result?.content ?? \"\"\n    content.value = next\n    emit(\"update:modelValue\", next)\n    if (result?.language) {\n      languageRef.value = result.language\n      emit(\"update:language\", result.language)\n    }\n  } catch (err) {\n    if (myToken !== fileToken) {\n      return\n    }\n    fileError.value = err instanceof Error ? err.message : String(err)\n  } finally {\n    if (myToken === fileToken) {\n      fileLoading.value = false\n    }\n  }\n}\n\nwatch([branchRef, pathRef], () => {\n  void loadFile()\n})\n\n// --- save ------------------------------------------------------------\nconst saving = ref<boolean>(false)\nconst saveError = ref<string | null>(null)\n\nasync function save(): Promise<void> {\n  if (!props.onSaveFile) {\n    return\n  }\n  if (!pathRef.value || !branchRef.value) {\n    return\n  }\n  saving.value = true\n  saveError.value = null\n  try {\n    await props.onSaveFile(pathRef.value, branchRef.value, content.value)\n  } catch (err) {\n    saveError.value = err instanceof Error ? err.message : String(err)\n  } finally {\n    saving.value = false\n  }\n}\n\nconst branchOptions = computed<string[]>(() => {\n  const all = new Set(branches.value)\n  if (branchRef.value) {\n    all.add(branchRef.value)\n  }\n  return Array.from(all)\n})\n\nconst allErrors = computed<string[]>(() => {\n  const out = [...(props.errors ?? [])]\n  if (fileError.value) {\n    out.push(fileError.value)\n  }\n  if (saveError.value) {\n    out.push(saveError.value)\n  }\n  return out\n})\n\nconst showSave = computed<boolean>(() => Boolean(props.onSaveFile))\n\nonMounted(() => {\n  void loadBranches()\n  void loadFile()\n})\n\ndefineExpose({ reload: loadFile, save })\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"allErrors\"\n    :class=\"cn(props.classList)\"\n  >\n    <Card\n      :data-element-name=\"props.name ?? undefined\"\n      data-testid=\"git-code-editor\"\n    >\n      <CardHeader class=\"flex flex-col gap-2 border-b py-3\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <div\n            v-if=\"props.repository\"\n            class=\"flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground\"\n            data-testid=\"git-code-editor-repository\"\n          >\n            <GitBranch class=\"size-3.5\" />\n            <span>{{ props.repository }}</span>\n          </div>\n\n          <div class=\"min-w-40\" data-testid=\"git-code-editor-branch-wrapper\">\n            <Select\n              :model-value=\"branchRef\"\n              :disabled=\"disabled || readonly || branchesLoading\"\n              @update:model-value=\"(v) => updateBranch(String(v ?? ''))\"\n            >\n              <SelectTrigger\n                data-testid=\"git-code-editor-branch-trigger\"\n                :aria-label=\"'Branch'\"\n              >\n                <SelectValue placeholder=\"Select branch\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem\n                  v-for=\"b in branchOptions\"\n                  :key=\"b\"\n                  :value=\"b\"\n                  :data-testid=\"`git-code-editor-branch-${b}`\"\n                >\n                  {{ b }}\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <Input\n            :model-value=\"pathRef\"\n            placeholder=\"path/to/file\"\n            class=\"flex-1 min-w-48\"\n            :disabled=\"disabled || readonly\"\n            data-testid=\"git-code-editor-path-input\"\n            @update:model-value=\"updatePath\"\n          />\n\n          <Button\n            v-if=\"showSave\"\n            type=\"button\"\n            variant=\"default\"\n            size=\"sm\"\n            :disabled=\"\n              saving || disabled || readonly || !pathRef || !branchRef\n            \"\n            data-testid=\"git-code-editor-save\"\n            @click=\"save\"\n          >\n            <Loader2 v-if=\"saving\" class=\"size-4 animate-spin\" />\n            <Save v-else class=\"size-4\" />\n            <span>{{ saving ? \"Saving…\" : \"Save\" }}</span>\n          </Button>\n        </div>\n        <p\n          v-if=\"languageRef\"\n          class=\"text-[10px] uppercase tracking-wide text-muted-foreground\"\n          data-testid=\"git-code-editor-language\"\n        >\n          {{ languageRef }}\n        </p>\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <div\n          v-if=\"fileLoading\"\n          class=\"flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground\"\n          data-testid=\"git-code-editor-loading\"\n        >\n          <Loader2 class=\"size-4 animate-spin\" />\n          <span>Loading file…</span>\n        </div>\n        <Textarea\n          :id=\"id\"\n          :model-value=\"content\"\n          :readonly=\"readonly || fileLoading\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :rows=\"16\"\n          spellcheck=\"false\"\n          class=\"min-h-64 rounded-none border-0 font-mono text-xs focus-visible:ring-0 focus-visible:ring-offset-0\"\n          :data-element-name=\"props.name ?? undefined\"\n          data-testid=\"git-code-editor-textarea\"\n          @update:model-value=\"updateContent\"\n        />\n      </CardContent>\n    </Card>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/code/GitCodeEditor.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,255 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import n from "../../../ui/card/Card.js";
+import ee from "../../../ui/card/CardContent.js";
+import te from "../../../ui/card/CardHeader.js";
+import "../../../ui/card/index.js";
+import ne from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import r from "../../../ui/select/Select.js";
+import i from "../../../ui/select/SelectContent.js";
+import a from "../../../ui/select/SelectItem.js";
+import o from "../../../ui/select/SelectTrigger.js";
+import s from "../../../ui/select/SelectValue.js";
+import "../../../ui/select/index.js";
+import c from "../../../ui/textarea/Textarea.js";
+import "../../../ui/textarea/index.js";
+import l from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { Fragment as re, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, onMounted as y, openBlock as b, ref as x, renderList as ie, toDisplayString as S, unref as C, watch as w, withCtx as T } from "vue";
+import { GitBranch as ae, Loader2 as E, Save as D } from "@lucide/vue";
+//#region src/components/compositions/elements/code/GitCodeEditor.vue?vue&type=script&setup=true&lang.ts
+var O = { class: "flex flex-wrap items-center gap-2" }, k = {
+	key: 0,
+	class: "flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground",
+	"data-testid": "git-code-editor-repository"
+}, A = {
+	class: "min-w-40",
+	"data-testid": "git-code-editor-branch-wrapper"
+}, j = {
+	key: 0,
+	class: "text-[10px] uppercase tracking-wide text-muted-foreground",
+	"data-testid": "git-code-editor-language"
+}, M = {
+	key: 0,
+	class: "flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground",
+	"data-testid": "git-code-editor-loading"
+}, N = /* @__PURE__ */ _({
+	__name: "GitCodeEditor",
+	props: {
+		repository: {},
+		branch: {},
+		path: {},
+		modelValue: {},
+		onLoadBranches: {},
+		onLoadFile: {},
+		onSaveFile: {},
+		language: { default: "plaintext" },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		label: { default: "Git Code Editor" },
+		hideLabel: { type: Boolean },
+		name: {},
+		id: {},
+		helpText: {},
+		errors: { default: () => [] },
+		classList: {}
+	},
+	emits: [
+		"update:modelValue",
+		"update:branch",
+		"update:path",
+		"update:language"
+	],
+	setup(_, { expose: N, emit: P }) {
+		let F = _, I = P, L = x(F.modelValue ?? ""), R = x(F.branch ?? ""), z = x(F.path ?? ""), B = x(F.language ?? "plaintext");
+		w(() => F.modelValue, (e) => {
+			e !== void 0 && e !== L.value && (L.value = e);
+		}), w(() => F.branch, (e) => {
+			e !== void 0 && e !== R.value && (R.value = e);
+		}), w(() => F.path, (e) => {
+			e !== void 0 && e !== z.value && (z.value = e);
+		}), w(() => F.language, (e) => {
+			e !== void 0 && e !== B.value && (B.value = e);
+		});
+		function V(e) {
+			let t = e ?? "";
+			L.value = t, I("update:modelValue", t);
+		}
+		function H(e) {
+			R.value = e, I("update:branch", e);
+		}
+		function U(e) {
+			let t = e === void 0 ? "" : String(e);
+			z.value = t, I("update:path", t);
+		}
+		let W = x([]), G = x(!1), K = x(null);
+		async function oe() {
+			if (F.onLoadBranches) {
+				G.value = !0, K.value = null;
+				try {
+					let e = await F.onLoadBranches();
+					W.value = Array.isArray(e) ? e : [];
+				} catch (e) {
+					K.value = e instanceof Error ? e.message : String(e), W.value = [];
+				} finally {
+					G.value = !1;
+				}
+			}
+		}
+		let q = x(!1), J = x(null), Y = 0;
+		async function X() {
+			if (!F.onLoadFile || !z.value || !R.value) return;
+			let e = ++Y;
+			q.value = !0, J.value = null;
+			try {
+				let t = await F.onLoadFile(z.value, R.value);
+				if (e !== Y) return;
+				let n = t?.content ?? "";
+				L.value = n, I("update:modelValue", n), t?.language && (B.value = t.language, I("update:language", t.language));
+			} catch (t) {
+				if (e !== Y) return;
+				J.value = t instanceof Error ? t.message : String(t);
+			} finally {
+				e === Y && (q.value = !1);
+			}
+		}
+		w([R, z], () => {
+			X();
+		});
+		let Z = x(!1), Q = x(null);
+		async function $() {
+			if (F.onSaveFile && !(!z.value || !R.value)) {
+				Z.value = !0, Q.value = null;
+				try {
+					await F.onSaveFile(z.value, R.value, L.value);
+				} catch (e) {
+					Q.value = e instanceof Error ? e.message : String(e);
+				} finally {
+					Z.value = !1;
+				}
+			}
+		}
+		let se = u(() => {
+			let e = new Set(W.value);
+			return R.value && e.add(R.value), Array.from(e);
+		}), ce = u(() => {
+			let e = [...F.errors ?? []];
+			return J.value && e.push(J.value), Q.value && e.push(Q.value), e;
+		}), le = u(() => !!F.onSaveFile);
+		return y(() => {
+			oe(), X();
+		}), N({
+			reload: X,
+			save: $
+		}), (u, y) => (b(), d(C(l), {
+			label: _.label,
+			required: _.required,
+			"hide-label": _.hideLabel,
+			for: _.id,
+			"help-text": _.helpText,
+			errors: ce.value,
+			class: v(C(e)(F.classList))
+		}, {
+			default: T(() => [g(C(n), {
+				"data-element-name": F.name ?? void 0,
+				"data-testid": "git-code-editor"
+			}, {
+				default: T(() => [g(C(te), { class: "flex flex-col gap-2 border-b py-3" }, {
+					default: T(() => [m("div", O, [
+						F.repository ? (b(), p("div", k, [g(C(ae), { class: "size-3.5" }), m("span", null, S(F.repository), 1)])) : f("", !0),
+						m("div", A, [g(C(r), {
+							"model-value": R.value,
+							disabled: _.disabled || _.readonly || G.value,
+							"onUpdate:modelValue": y[0] ||= (e) => H(String(e ?? ""))
+						}, {
+							default: T(() => [g(C(o), {
+								"data-testid": "git-code-editor-branch-trigger",
+								"aria-label": "Branch"
+							}, {
+								default: T(() => [g(C(s), { placeholder: "Select branch" })]),
+								_: 1
+							}), g(C(i), null, {
+								default: T(() => [(b(!0), p(re, null, ie(se.value, (e) => (b(), d(C(a), {
+									key: e,
+									value: e,
+									"data-testid": `git-code-editor-branch-${e}`
+								}, {
+									default: T(() => [h(S(e), 1)]),
+									_: 2
+								}, 1032, ["value", "data-testid"]))), 128))]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["model-value", "disabled"])]),
+						g(C(ne), {
+							"model-value": z.value,
+							placeholder: "path/to/file",
+							class: "flex-1 min-w-48",
+							disabled: _.disabled || _.readonly,
+							"data-testid": "git-code-editor-path-input",
+							"onUpdate:modelValue": U
+						}, null, 8, ["model-value", "disabled"]),
+						le.value ? (b(), d(C(t), {
+							key: 1,
+							type: "button",
+							variant: "default",
+							size: "sm",
+							disabled: Z.value || _.disabled || _.readonly || !z.value || !R.value,
+							"data-testid": "git-code-editor-save",
+							onClick: $
+						}, {
+							default: T(() => [Z.value ? (b(), d(C(E), {
+								key: 0,
+								class: "size-4 animate-spin"
+							})) : (b(), d(C(D), {
+								key: 1,
+								class: "size-4"
+							})), m("span", null, S(Z.value ? "Saving…" : "Save"), 1)]),
+							_: 1
+						}, 8, ["disabled"])) : f("", !0)
+					]), B.value ? (b(), p("p", j, S(B.value), 1)) : f("", !0)]),
+					_: 1
+				}), g(C(ee), { class: "p-0" }, {
+					default: T(() => [q.value ? (b(), p("div", M, [g(C(E), { class: "size-4 animate-spin" }), y[1] ||= m("span", null, "Loading file…", -1)])) : f("", !0), g(C(c), {
+						id: _.id,
+						"model-value": L.value,
+						readonly: _.readonly || q.value,
+						disabled: _.disabled,
+						required: _.required,
+						rows: 16,
+						spellcheck: "false",
+						class: "min-h-64 rounded-none border-0 font-mono text-xs focus-visible:ring-0 focus-visible:ring-offset-0",
+						"data-element-name": F.name ?? void 0,
+						"data-testid": "git-code-editor-textarea",
+						"onUpdate:modelValue": V
+					}, null, 8, [
+						"id",
+						"model-value",
+						"readonly",
+						"disabled",
+						"required",
+						"data-element-name"
+					])]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["data-element-name"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { N as default };
+
+//# sourceMappingURL=GitCodeEditor.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/code/GitCodeEditor.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GitCodeEditor.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/code/GitCodeEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven git code editor composition. Wraps a textarea editor\n * with a branch switcher, file-path input, and a save button. The\n * composition makes no HTTP calls — the consumer supplies Promise-\n * returning callbacks for loading branches, loading a file, and\n * (optionally) saving it.\n *\n *   <GitCodeEditor\n *     repository=\"gramercy/plugins\"\n *     v-model:branch=\"branch\"\n *     v-model:path=\"path\"\n *     v-model=\"content\"\n *     :on-load-branches=\"loadBranches\"\n *     :on-load-file=\"loadFile\"\n *     :on-save-file=\"saveFile\"\n *   />\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { GitBranch, Loader2, Save } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface GitCodeEditorLoadedFile {\n  content: string\n  language?: string\n}\n\nexport interface GitCodeEditorProps {\n  /** Repository identifier (display only). */\n  repository?: string\n  /** Current branch (v-modelable). */\n  branch?: string\n  /** Current file path (v-modelable). */\n  path?: string\n  /** File content (v-modelable via modelValue). */\n  modelValue?: string\n  /** Lists the branches for the branch selector. */\n  onLoadBranches?: () => Promise<string[]>\n  /** REQUIRED loader for the current (path, branch). */\n  onLoadFile?: (\n    path: string,\n    branch: string,\n  ) => Promise<GitCodeEditorLoadedFile>\n  /** Optional save callback. When omitted, the save button is hidden. */\n  onSaveFile?: (path: string, branch: string, content: string) => Promise<void>\n  /** Syntax hint. Default plaintext; overridden by `onLoadFile`'s response. */\n  language?: string\n  readonly?: boolean\n  disabled?: boolean\n  required?: boolean\n  label?: string\n  hideLabel?: boolean\n  name?: string | null\n  id?: string\n  helpText?: string\n  errors?: string[]\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<GitCodeEditorProps>(), {\n  errors: () => [],\n  language: \"plaintext\",\n  label: \"Git Code Editor\",\n})\n\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: string]\n  \"update:branch\": [value: string]\n  \"update:path\": [value: string]\n  \"update:language\": [value: string]\n}>()\n\nconst content = ref<string>(props.modelValue ?? \"\")\nconst branchRef = ref<string>(props.branch ?? \"\")\nconst pathRef = ref<string>(props.path ?? \"\")\nconst languageRef = ref<string>(props.language ?? \"plaintext\")\n\nwatch(\n  () => props.modelValue,\n  (next) => {\n    if (next !== undefined && next !== content.value) {\n      content.value = next\n    }\n  },\n)\nwatch(\n  () => props.branch,\n  (next) => {\n    if (next !== undefined && next !== branchRef.value) {\n      branchRef.value = next\n    }\n  },\n)\nwatch(\n  () => props.path,\n  (next) => {\n    if (next !== undefined && next !== pathRef.value) {\n      pathRef.value = next\n    }\n  },\n)\nwatch(\n  () => props.language,\n  (next) => {\n    if (next !== undefined && next !== languageRef.value) {\n      languageRef.value = next\n    }\n  },\n)\n\nfunction updateContent(next: string | undefined): void {\n  const value = next ?? \"\"\n  content.value = value\n  emit(\"update:modelValue\", value)\n}\n\nfunction updateBranch(next: string): void {\n  branchRef.value = next\n  emit(\"update:branch\", next)\n}\n\nfunction updatePath(next: string | number | undefined): void {\n  const v = next === undefined ? \"\" : String(next)\n  pathRef.value = v\n  emit(\"update:path\", v)\n}\n\n// --- branches loader -------------------------------------------------\nconst branches = ref<string[]>([])\nconst branchesLoading = ref<boolean>(false)\nconst branchesError = ref<string | null>(null)\n\nasync function loadBranches(): Promise<void> {\n  if (!props.onLoadBranches) {\n    return\n  }\n  branchesLoading.value = true\n  branchesError.value = null\n  try {\n    const next = await props.onLoadBranches()\n    branches.value = Array.isArray(next) ? next : []\n  } catch (err) {\n    branchesError.value = err instanceof Error ? err.message : String(err)\n    branches.value = []\n  } finally {\n    branchesLoading.value = false\n  }\n}\n\n// --- file loader -----------------------------------------------------\nconst fileLoading = ref<boolean>(false)\nconst fileError = ref<string | null>(null)\nlet fileToken = 0\n\nasync function loadFile(): Promise<void> {\n  if (!props.onLoadFile) {\n    return\n  }\n  if (!pathRef.value || !branchRef.value) {\n    return\n  }\n  const myToken = ++fileToken\n  fileLoading.value = true\n  fileError.value = null\n  try {\n    const result = await props.onLoadFile(pathRef.value, branchRef.value)\n    if (myToken !== fileToken) {\n      return\n    }\n    const next = result?.content ?? \"\"\n    content.value = next\n    emit(\"update:modelValue\", next)\n    if (result?.language) {\n      languageRef.value = result.language\n      emit(\"update:language\", result.language)\n    }\n  } catch (err) {\n    if (myToken !== fileToken) {\n      return\n    }\n    fileError.value = err instanceof Error ? err.message : String(err)\n  } finally {\n    if (myToken === fileToken) {\n      fileLoading.value = false\n    }\n  }\n}\n\nwatch([branchRef, pathRef], () => {\n  void loadFile()\n})\n\n// --- save ------------------------------------------------------------\nconst saving = ref<boolean>(false)\nconst saveError = ref<string | null>(null)\n\nasync function save(): Promise<void> {\n  if (!props.onSaveFile) {\n    return\n  }\n  if (!pathRef.value || !branchRef.value) {\n    return\n  }\n  saving.value = true\n  saveError.value = null\n  try {\n    await props.onSaveFile(pathRef.value, branchRef.value, content.value)\n  } catch (err) {\n    saveError.value = err instanceof Error ? err.message : String(err)\n  } finally {\n    saving.value = false\n  }\n}\n\nconst branchOptions = computed<string[]>(() => {\n  const all = new Set(branches.value)\n  if (branchRef.value) {\n    all.add(branchRef.value)\n  }\n  return Array.from(all)\n})\n\nconst allErrors = computed<string[]>(() => {\n  const out = [...(props.errors ?? [])]\n  if (fileError.value) {\n    out.push(fileError.value)\n  }\n  if (saveError.value) {\n    out.push(saveError.value)\n  }\n  return out\n})\n\nconst showSave = computed<boolean>(() => Boolean(props.onSaveFile))\n\nonMounted(() => {\n  void loadBranches()\n  void loadFile()\n})\n\ndefineExpose({ reload: loadFile, save })\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"allErrors\"\n    :class=\"cn(props.classList)\"\n  >\n    <Card\n      :data-element-name=\"props.name ?? undefined\"\n      data-testid=\"git-code-editor\"\n    >\n      <CardHeader class=\"flex flex-col gap-2 border-b py-3\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <div\n            v-if=\"props.repository\"\n            class=\"flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground\"\n            data-testid=\"git-code-editor-repository\"\n          >\n            <GitBranch class=\"size-3.5\" />\n            <span>{{ props.repository }}</span>\n          </div>\n\n          <div class=\"min-w-40\" data-testid=\"git-code-editor-branch-wrapper\">\n            <Select\n              :model-value=\"branchRef\"\n              :disabled=\"disabled || readonly || branchesLoading\"\n              @update:model-value=\"(v) => updateBranch(String(v ?? ''))\"\n            >\n              <SelectTrigger\n                data-testid=\"git-code-editor-branch-trigger\"\n                :aria-label=\"'Branch'\"\n              >\n                <SelectValue placeholder=\"Select branch\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem\n                  v-for=\"b in branchOptions\"\n                  :key=\"b\"\n                  :value=\"b\"\n                  :data-testid=\"`git-code-editor-branch-${b}`\"\n                >\n                  {{ b }}\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <Input\n            :model-value=\"pathRef\"\n            placeholder=\"path/to/file\"\n            class=\"flex-1 min-w-48\"\n            :disabled=\"disabled || readonly\"\n            data-testid=\"git-code-editor-path-input\"\n            @update:model-value=\"updatePath\"\n          />\n\n          <Button\n            v-if=\"showSave\"\n            type=\"button\"\n            variant=\"default\"\n            size=\"sm\"\n            :disabled=\"\n              saving || disabled || readonly || !pathRef || !branchRef\n            \"\n            data-testid=\"git-code-editor-save\"\n            @click=\"save\"\n          >\n            <Loader2 v-if=\"saving\" class=\"size-4 animate-spin\" />\n            <Save v-else class=\"size-4\" />\n            <span>{{ saving ? \"Saving…\" : \"Save\" }}</span>\n          </Button>\n        </div>\n        <p\n          v-if=\"languageRef\"\n          class=\"text-[10px] uppercase tracking-wide text-muted-foreground\"\n          data-testid=\"git-code-editor-language\"\n        >\n          {{ languageRef }}\n        </p>\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <div\n          v-if=\"fileLoading\"\n          class=\"flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground\"\n          data-testid=\"git-code-editor-loading\"\n        >\n          <Loader2 class=\"size-4 animate-spin\" />\n          <span>Loading file…</span>\n        </div>\n        <Textarea\n          :id=\"id\"\n          :model-value=\"content\"\n          :readonly=\"readonly || fileLoading\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :rows=\"16\"\n          spellcheck=\"false\"\n          class=\"min-h-64 rounded-none border-0 font-mono text-xs focus-visible:ring-0 focus-visible:ring-offset-0\"\n          :data-element-name=\"props.name ?? undefined\"\n          data-testid=\"git-code-editor-textarea\"\n          @update:model-value=\"updateContent\"\n        />\n      </CardContent>\n    </Card>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/elements/code/PullRequestsList.js

@@ -0,0 +1,7 @@
+import e from "./PullRequestsList.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/code/PullRequestsList.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=PullRequestsList.js.map

package/dist/components/compositions/elements/code/PullRequestsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PullRequestsList.js","names":[],"sources":["../../../../../src/components/compositions/elements/code/PullRequestsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven pull-request list composition. Renders a toolbar with\n * status-filter chips + a search input, then a list of PR rows. The\n * composition makes no HTTP calls — the consumer supplies a single\n * Promise-returning `onLoadPullRequests` callback that receives the\n * current filter object.\n *\n *   <PullRequestsList\n *     :on-load-pull-requests=\"(f) => fetch(`/api/prs?...`).then(r => r.json())\"\n *     v-model:selected-id=\"selectedPr\"\n *     @select=\"(pr) => router.push(pr.url)\"\n *   />\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport {\n  ArrowRight,\n  GitMerge,\n  GitPullRequest,\n  GitPullRequestDraft,\n  Loader2,\n  Search,\n  XCircle,\n} from \"@lucide/vue\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { cn } from \"@/lib/utils\"\n\nexport type PullRequestStatus =\n  | \"open\"\n  | \"closed\"\n  | \"merged\"\n  | \"draft\"\n\nexport interface PullRequest {\n  id: string\n  number?: number\n  title: string\n  authorName?: string\n  authorAvatarUrl?: string\n  status: PullRequestStatus\n  createdAt?: string | Date\n  updatedAt?: string | Date\n  branchName?: string\n  targetBranch?: string\n  url?: string\n}\n\nexport interface PullRequestsListFilter {\n  status?: PullRequestStatus\n  query?: string\n}\n\nexport interface PullRequestsListProps {\n  /** REQUIRED loader, invoked on mount and whenever the filter changes. */\n  onLoadPullRequests: (\n    filter?: PullRequestsListFilter,\n  ) => Promise<PullRequest[]>\n  /** Initial filter applied on mount. */\n  defaultFilter?: PullRequestsListFilter\n  /** Currently selected PR id (v-modelable as `selectedId`). */\n  selectedId?: string\n  /** Fired when a PR row is clicked. */\n  onSelect?: (pr: PullRequest) => void\n  label?: string\n  name?: string | null\n  helpText?: string\n  errors?: string[]\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<PullRequestsListProps>(), {\n  errors: () => [],\n  label: \"Pull Requests\",\n})\n\nconst emit = defineEmits<{\n  \"update:selectedId\": [value: string]\n}>()\n\nconst status = ref<PullRequestStatus | \"all\">(\n  props.defaultFilter?.status ?? \"all\",\n)\nconst query = ref<string>(props.defaultFilter?.query ?? \"\")\n\nconst items = ref<PullRequest[]>([])\nconst loading = ref<boolean>(false)\nconst error = ref<string | null>(null)\nlet token = 0\n\nconst STATUS_CHIPS: { value: PullRequestStatus | \"all\"; label: string }[] = [\n  { value: \"all\", label: \"All\" },\n  { value: \"open\", label: \"Open\" },\n  { value: \"draft\", label: \"Draft\" },\n  { value: \"merged\", label: \"Merged\" },\n  { value: \"closed\", label: \"Closed\" },\n]\n\nfunction statusVariant(s: PullRequestStatus): string {\n  switch (s) {\n    case \"open\":\n      return \"success\"\n    case \"merged\":\n      return \"info\"\n    case \"closed\":\n      return \"destructive\"\n    case \"draft\":\n    default:\n      return \"secondary\"\n  }\n}\n\nfunction statusIcon(s: PullRequestStatus) {\n  if (s === \"merged\") {\n    return GitMerge\n  }\n  if (s === \"closed\") {\n    return XCircle\n  }\n  if (s === \"draft\") {\n    return GitPullRequestDraft\n  }\n  return GitPullRequest\n}\n\nfunction relativeTime(value: string | Date | undefined): string {\n  if (!value) {\n    return \"\"\n  }\n  const d = value instanceof Date ? value : new Date(value)\n  const diff = Date.now() - d.getTime()\n  if (Number.isNaN(diff)) {\n    return \"\"\n  }\n  const sec = Math.round(diff / 1000)\n  if (sec < 60) {\n    return `${sec}s ago`\n  }\n  const min = Math.round(sec / 60)\n  if (min < 60) {\n    return `${min}m ago`\n  }\n  const hr = Math.round(min / 60)\n  if (hr < 24) {\n    return `${hr}h ago`\n  }\n  const day = Math.round(hr / 24)\n  if (day < 30) {\n    return `${day}d ago`\n  }\n  const month = Math.round(day / 30)\n  if (month < 12) {\n    return `${month}mo ago`\n  }\n  const year = Math.round(month / 12)\n  return `${year}y ago`\n}\n\nfunction currentFilter(): PullRequestsListFilter {\n  const f: PullRequestsListFilter = {}\n  if (status.value !== \"all\") {\n    f.status = status.value\n  }\n  if (query.value) {\n    f.query = query.value\n  }\n  return f\n}\n\nasync function reload(): Promise<void> {\n  const myToken = ++token\n  loading.value = true\n  error.value = null\n  try {\n    const next = await props.onLoadPullRequests(currentFilter())\n    if (myToken !== token) {\n      return\n    }\n    items.value = Array.isArray(next) ? next : []\n  } catch (err) {\n    if (myToken !== token) {\n      return\n    }\n    error.value = err instanceof Error ? err.message : String(err)\n    items.value = []\n  } finally {\n    if (myToken === token) {\n      loading.value = false\n    }\n  }\n}\n\nlet debounceTimer: ReturnType<typeof setTimeout> | null = null\nfunction scheduleReload(): void {\n  if (debounceTimer !== null) {\n    clearTimeout(debounceTimer)\n  }\n  debounceTimer = setTimeout(() => {\n    debounceTimer = null\n    void reload()\n  }, 200)\n}\n\nfunction setStatus(next: PullRequestStatus | \"all\"): void {\n  if (status.value === next) {\n    return\n  }\n  status.value = next\n  void reload()\n}\n\nfunction onQueryInput(e: Event): void {\n  const next = (e.target as HTMLInputElement).value\n  query.value = next\n  scheduleReload()\n}\n\nfunction selectRow(pr: PullRequest): void {\n  emit(\"update:selectedId\", pr.id)\n  if (props.onSelect) {\n    props.onSelect(pr)\n  }\n}\n\nfunction authorFallback(name?: string): string {\n  if (!name) {\n    return \"?\"\n  }\n  return name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((s) => s[0]?.toUpperCase() ?? \"\")\n    .join(\"\")\n}\n\nconst selectedIdRef = computed<string | undefined>(() => props.selectedId)\n\nonMounted(() => {\n  void reload()\n})\n\nwatch(\n  () => props.defaultFilter,\n  (next) => {\n    if (!next) {\n      return\n    }\n    status.value = next.status ?? \"all\"\n    query.value = next.query ?? \"\"\n    void reload()\n  },\n  { deep: true },\n)\n\ndefineExpose({ reload })\n</script>\n\n<template>\n  <Card\n    :class=\"cn(props.classList)\"\n    :data-element-name=\"props.name ?? undefined\"\n    data-testid=\"pull-requests-list\"\n  >\n    <CardHeader class=\"flex flex-col gap-3 pb-3\">\n      <CardTitle class=\"flex items-center gap-2 text-base\">\n        <GitPullRequest class=\"size-5 text-muted-foreground\" />\n        <span>{{ props.label }}</span>\n      </CardTitle>\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <div class=\"flex flex-wrap items-center gap-1\">\n          <button\n            v-for=\"chip in STATUS_CHIPS\"\n            :key=\"chip.value\"\n            type=\"button\"\n            :class=\"\n              cn(\n                'rounded-full border px-3 py-1 text-xs font-medium transition-colors',\n                status === chip.value\n                  ? 'border-primary bg-primary text-primary-foreground'\n                  : 'border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',\n              )\n            \"\n            :data-testid=\"`pull-requests-list-chip-${chip.value}`\"\n            :aria-pressed=\"status === chip.value\"\n            @click=\"setStatus(chip.value)\"\n          >\n            {{ chip.label }}\n          </button>\n        </div>\n        <div class=\"relative flex-1 min-w-48\">\n          <Search\n            class=\"absolute left-2 top-1/2 -translate-y-1/2 size-4 text-muted-foreground\"\n          />\n          <Input\n            :model-value=\"query\"\n            placeholder=\"Search…\"\n            class=\"pl-8\"\n            data-testid=\"pull-requests-list-search\"\n            @input=\"onQueryInput\"\n          />\n        </div>\n      </div>\n      <p\n        v-if=\"props.helpText\"\n        class=\"text-sm text-muted-foreground\"\n        data-testid=\"pull-requests-list-help\"\n      >\n        {{ props.helpText }}\n      </p>\n    </CardHeader>\n    <CardContent class=\"flex flex-col gap-1 p-2\">\n      <div\n        v-if=\"loading\"\n        class=\"flex flex-col gap-2 px-2 py-2\"\n        data-testid=\"pull-requests-list-loading\"\n      >\n        <Skeleton class=\"h-12 w-full\" />\n        <Skeleton class=\"h-12 w-full\" />\n        <Skeleton class=\"h-12 w-full\" />\n      </div>\n      <p\n        v-else-if=\"error\"\n        class=\"px-2 py-2 text-sm text-destructive\"\n        data-testid=\"pull-requests-list-error\"\n        role=\"alert\"\n      >\n        {{ error }}\n      </p>\n      <p\n        v-else-if=\"items.length === 0\"\n        class=\"px-2 py-4 text-center text-sm text-muted-foreground\"\n        data-testid=\"pull-requests-list-empty\"\n      >\n        No pull requests.\n      </p>\n      <ul\n        v-else\n        class=\"flex flex-col\"\n        role=\"list\"\n        data-testid=\"pull-requests-list-rows\"\n      >\n        <li\n          v-for=\"pr in items\"\n          :key=\"pr.id\"\n          :class=\"\n            cn(\n              'flex cursor-pointer items-center gap-3 rounded-md border border-transparent px-2 py-2 hover:bg-accent',\n              selectedIdRef === pr.id\n                ? 'border-primary bg-accent'\n                : '',\n            )\n          \"\n          :data-testid=\"`pull-requests-list-row-${pr.id}`\"\n          :aria-selected=\"selectedIdRef === pr.id\"\n          @click=\"selectRow(pr)\"\n        >\n          <component\n            :is=\"statusIcon(pr.status)\"\n            class=\"size-4 shrink-0 text-muted-foreground\"\n          />\n          <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"truncate text-sm font-medium\">{{ pr.title }}</span>\n              <span\n                v-if=\"pr.number !== undefined\"\n                class=\"text-xs text-muted-foreground\"\n              >\n                #{{ pr.number }}\n              </span>\n              <Badge\n                :variant=\"(statusVariant(pr.status) as 'success' | 'info' | 'destructive' | 'secondary')\"\n                size=\"sm\"\n                class=\"capitalize\"\n              >\n                {{ pr.status }}\n              </Badge>\n            </div>\n            <div\n              class=\"flex flex-wrap items-center gap-2 text-xs text-muted-foreground\"\n            >\n              <span\n                v-if=\"pr.authorName\"\n                class=\"flex items-center gap-1.5\"\n              >\n                <Avatar size=\"sm\" class=\"size-5 text-[10px]\">\n                  <AvatarImage\n                    v-if=\"pr.authorAvatarUrl\"\n                    :src=\"pr.authorAvatarUrl\"\n                    :alt=\"pr.authorName\"\n                  />\n                  <AvatarFallback>{{ authorFallback(pr.authorName) }}</AvatarFallback>\n                </Avatar>\n                <span>{{ pr.authorName }}</span>\n              </span>\n              <span\n                v-if=\"pr.branchName || pr.targetBranch\"\n                class=\"flex items-center gap-1\"\n              >\n                <span v-if=\"pr.branchName\" class=\"font-mono\">{{ pr.branchName }}</span>\n                <ArrowRight v-if=\"pr.branchName && pr.targetBranch\" class=\"size-3\" />\n                <span v-if=\"pr.targetBranch\" class=\"font-mono\">{{ pr.targetBranch }}</span>\n              </span>\n              <span v-if=\"pr.updatedAt || pr.createdAt\">\n                {{ relativeTime(pr.updatedAt ?? pr.createdAt) }}\n              </span>\n            </div>\n          </div>\n          <Loader2\n            v-if=\"false\"\n            class=\"size-3 animate-spin text-muted-foreground\"\n          />\n        </li>\n      </ul>\n      <ul\n        v-if=\"props.errors.length\"\n        class=\"px-2 pt-2 text-sm text-destructive\"\n        data-testid=\"pull-requests-list-errors\"\n        role=\"alert\"\n      >\n        <li v-for=\"(err, i) in props.errors\" :key=\"i\">{{ err }}</li>\n      </ul>\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":""}