@scalar/api-client 2.38.4 → 2.39.0

package/dist/v2/features/collection/components/Editor/Editor.vue.script.js

@@ -0,0 +1,360 @@
+import { useEditor } from "../../../editor/hooks/use-editor.js";
+import { useJsonPointerLinkSupport } from "../../../editor/hooks/use-json-pointer-link-support.js";
+import { createJsonModel } from "../../../editor/helpers/json/create-json-model.js";
+import { createYamlModel } from "../../../editor/helpers/yaml/create-yaml-model.js";
+import { useEditorMarkers } from "../../../editor/hooks/use-editor-markers.js";
+import EditorDiagnosticsPanel_default from "./components/EditorDiagnosticsPanel.vue.js";
+import EditorSavePanel_default from "./components/EditorSavePanel.vue.js";
+import { getDiagnosticCounts } from "./helpers/get-diagnostic-counts.js";
+import { getOperationContext } from "./helpers/get-operation-context.js";
+import { getVisibleDiagnostics } from "./helpers/get-visible-diagnostics.js";
+import { parseEditorObject } from "./helpers/parse-editor-object.js";
+import { stringifyDocument } from "./helpers/stringify-document.js";
+import { useEditorState } from "./hooks/use-editor-state.js";
+import { computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { ScalarButton, ScalarHotkey, useLoadingState } from "@scalar/components";
+import { ScalarIconArrowsIn, ScalarIconArrowsOut } from "@scalar/icons";
+import { isObject } from "@scalar/helpers/object/is-object";
+import { debounce } from "@scalar/helpers/general/debounce";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+//#region src/v2/features/collection/components/Editor/Editor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3" };
+var _hoisted_2 = { class: "flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap" };
+var _hoisted_3 = { class: "text-c-3 ml-2 text-[11px]" };
+var _hoisted_4 = { class: "text-c-3 ml-2 text-[11px]" };
+var _hoisted_5 = {
+	"aria-label": "Editor language",
+	class: "bg-b-1 shadow-border flex items-center justify-self-center overflow-hidden rounded-lg p-0.5",
+	role: "tablist"
+};
+var _hoisted_6 = { class: "flex min-w-0 shrink-0 items-center gap-2 justify-self-end" };
+var _hoisted_7 = { class: "text-c-3 ml-2 text-[11px]" };
+var _hoisted_8 = { class: "text-c-3 ml-2 text-[11px]" };
+var _hoisted_9 = { class: "flex min-h-0 w-full min-w-0 flex-1 rounded-lg border" };
+var _hoisted_10 = { class: "pointer-events-none absolute top-2 right-2 z-10" };
+var _hoisted_11 = { key: 1 };
+var MAX_VISIBLE_DIAGNOSTICS = 6;
+var EDITOR_PERSIST_DEBOUNCE_KEY = "editor:replace-document";
+var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Editor",
+	props: {
+		documentSlug: {},
+		document: {},
+		eventBus: {},
+		layout: {},
+		path: {},
+		method: {},
+		exampleName: {},
+		environment: {},
+		securitySchemes: {},
+		workspaceStore: {},
+		activeWorkspace: {},
+		plugins: {},
+		customThemes: {},
+		currentTheme: {},
+		isDarkMode: { type: Boolean },
+		fetchRegistryDocument: { type: Function },
+		telemetry: { type: Boolean },
+		onUpdateTelemetry: { type: Function },
+		collectionType: {}
+	},
+	setup(__props) {
+		const monacoEditorRef = ref();
+		const editorApi = shallowRef();
+		const saveLoader = useLoadingState();
+		const { isAutoSaveEnabled, isDirty, editorLanguage, isDiagnosticsPaneExpanded, isEditorMaximized, isYamlMode, editorBottomPadding, editorRootClass, getLanguageToggleClass, toggleEditorMaximized } = useEditorState();
+		const jsonModel = createJsonModel();
+		const yamlModel = createYamlModel();
+		const selectedLanguage = ref("json");
+		const currentModel = computed(() => {
+			return selectedLanguage.value === "json" ? jsonModel : yamlModel;
+		});
+		const { markers: diagnostics } = useEditorMarkers(computed(() => editorApi.value?.editor));
+		const syncEditorBottomPadding = () => {
+			editorApi.value?.editor.updateOptions({ padding: {
+				top: 0,
+				bottom: editorBottomPadding.value
+			} });
+		};
+		const diagnosticCounts = computed(() => getDiagnosticCounts(diagnostics.value));
+		const visibleDiagnostics = computed(() => getVisibleDiagnostics(diagnostics.value, MAX_VISIBLE_DIAGNOSTICS));
+		const focusDiagnostic = (marker) => {
+			const editor = editorApi.value?.editor;
+			if (!editor) return;
+			editor.setSelection({
+				startLineNumber: marker.startLineNumber,
+				startColumn: marker.startColumn,
+				endLineNumber: marker.endLineNumber,
+				endColumn: marker.endColumn
+			});
+			editor.revealPositionInCenter({
+				lineNumber: marker.startLineNumber,
+				column: marker.startColumn
+			});
+		};
+		const getEditorValue = () => currentModel.value.model.getValue();
+		/** Value from the editor for a specific language (use when switching to avoid reading the wrong model). */
+		const getEditorValueForLanguage = (language) => (language === "json" ? jsonModel : yamlModel).model.getValue();
+		const getDocumentValue = async (language) => {
+			return stringifyDocument(await __props.workspaceStore.getEditableDocument(__props.documentSlug), language ?? selectedLanguage.value);
+		};
+		const debouncedPersist = debounce({ delay: 1500 });
+		const applyProgrammaticEditorValue = (value) => {
+			debouncedPersist.cleanup();
+			editorApi.value?.setValue(value, true);
+		};
+		const loadDocumentIntoEditor = async () => {
+			applyProgrammaticEditorValue(await getDocumentValue());
+			isDirty.value = false;
+			await focusOperation();
+		};
+		const formatDocument = async () => {
+			await editorApi.value?.formatDocument();
+		};
+		const focusOperation = async () => {
+			const operationContext = getOperationContext(__props.path, __props.method);
+			if (!operationContext) return;
+			await editorApi.value?.focusPath([
+				"paths",
+				operationContext.path,
+				operationContext.method
+			]);
+		};
+		const persistEditorToWorkspace = async (value) => {
+			const parsed = parseEditorObject(value, editorLanguage.value);
+			if (!parsed) {
+				const firstError = diagnostics.value.find((m) => m.severity === monaco.MarkerSeverity.Error);
+				if (firstError) focusDiagnostic(firstError);
+				await saveLoader.invalidate();
+				return;
+			}
+			saveLoader.start();
+			await __props.workspaceStore.replaceDocument(__props.documentSlug, parsed);
+			isDirty.value = false;
+			await saveLoader.validate({ duration: 900 });
+		};
+		const saveNow = async () => {
+			const value = getEditorValue();
+			if (!value) return;
+			await persistEditorToWorkspace(value);
+		};
+		const handleEditorChange = (value) => {
+			isDirty.value = true;
+			if (!isAutoSaveEnabled.value) return;
+			debouncedPersist.execute(EDITOR_PERSIST_DEBOUNCE_KEY, () => persistEditorToWorkspace(value));
+		};
+		const focusOperationServers = async () => {
+			const operationContext = getOperationContext(__props.path, __props.method);
+			if (!operationContext) return;
+			const value = getEditorValue();
+			if (!value) return;
+			const parsed = parseEditorObject(value, editorLanguage.value);
+			if (!parsed || !isObject(parsed.paths)) return;
+			const operationPathItem = parsed.paths[operationContext.path];
+			if (!isObject(operationPathItem)) return;
+			const operation = operationPathItem[operationContext.method];
+			if (!isObject(operation)) return;
+			operation.servers ??= [];
+			editorApi.value?.setValue(stringifyDocument(parsed, editorLanguage.value));
+			await editorApi.value?.focusPath([
+				"paths",
+				operationContext.path,
+				operationContext.method,
+				"servers"
+			]);
+		};
+		useJsonPointerLinkSupport(editorApi, currentModel);
+		onMounted(() => {
+			editorApi.value = useEditor({
+				element: monacoEditorRef.value ?? document.createElement("div"),
+				onChange: handleEditorChange,
+				model: currentModel,
+				actions: [
+					{
+						id: "scalar.editor.focusOperation",
+						label: "Focus Operation",
+						keybindings: [monaco.KeyMod.Alt | monaco.KeyCode.KeyO],
+						run: async () => {
+							await focusOperation();
+						}
+					},
+					{
+						id: "scalar.editor.focusOperationServers",
+						label: "Focus Operation Servers",
+						keybindings: [monaco.KeyMod.Alt | monaco.KeyCode.KeyS],
+						run: async () => {
+							await focusOperationServers();
+						}
+					},
+					{
+						id: "scalar.editor.formatDocument",
+						label: "Format Document",
+						keybindings: [monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF],
+						run: async () => {
+							await formatDocument();
+						}
+					}
+				]
+			});
+			syncEditorBottomPadding();
+			loadDocumentIntoEditor();
+		});
+		onBeforeUnmount(() => {
+			debouncedPersist.cleanup();
+			if (isDirty.value && isAutoSaveEnabled.value) saveNow();
+			editorApi.value?.dispose?.();
+			jsonModel.model.dispose();
+			yamlModel.model.dispose();
+		});
+		watch(() => __props.documentSlug, loadDocumentIntoEditor);
+		watch(() => [__props.path, __props.method], async () => {
+			await focusOperation();
+		});
+		watch(isDiagnosticsPaneExpanded, () => {
+			syncEditorBottomPadding();
+		});
+		watch(editorLanguage, async (nextLanguage, previousLanguage) => {
+			const wasDirty = isDirty.value;
+			const value = getEditorValueForLanguage(previousLanguage ?? "json");
+			if (!value) {
+				selectedLanguage.value = nextLanguage;
+				await nextTick();
+				await focusOperation();
+				return;
+			}
+			const parsed = parseEditorObject(value, previousLanguage ?? "json");
+			selectedLanguage.value = nextLanguage;
+			await nextTick();
+			if (parsed) {
+				applyProgrammaticEditorValue(stringifyDocument(parsed, nextLanguage));
+				isDirty.value = wasDirty;
+			}
+			await focusOperation();
+		});
+		watch(isAutoSaveEnabled, (isEnabled) => {
+			if (!isEnabled) {
+				debouncedPersist.cleanup();
+				return;
+			}
+			if (isDirty.value) {
+				const value = getEditorValue();
+				if (!value) return;
+				debouncedPersist.execute(EDITOR_PERSIST_DEBOUNCE_KEY, () => persistEditorToWorkspace(value));
+			}
+		}, { flush: "post" });
+		return (_ctx, _cache) => {
+			return __props.collectionType === "operation" && unref(getOperationContext)(__props.path, __props.method) !== null ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["flex w-full min-w-0 flex-1 flex-col gap-2", unref(editorRootClass)])
+			}, [createElementVNode("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [
+					_cache[6] || (_cache[6] = createElementVNode("span", { class: "text-c-2 text-xs font-medium whitespace-nowrap" }, " Shortcuts ", -1)),
+					createVNode(unref(ScalarButton), {
+						class: "whitespace-nowrap",
+						size: "xs",
+						variant: "ghost",
+						onClick: focusOperation
+					}, {
+						default: withCtx(() => [_cache[4] || (_cache[4] = createElementVNode("span", null, "Operation", -1)), createElementVNode("span", _hoisted_3, [createVNode(unref(ScalarHotkey), {
+							hotkey: "O",
+							modifier: ["Alt"]
+						})])]),
+						_: 1
+					}),
+					createVNode(unref(ScalarButton), {
+						class: "whitespace-nowrap",
+						size: "xs",
+						variant: "ghost",
+						onClick: focusOperationServers
+					}, {
+						default: withCtx(() => [_cache[5] || (_cache[5] = createElementVNode("span", null, "Servers", -1)), createElementVNode("span", _hoisted_4, [createVNode(unref(ScalarHotkey), {
+							hotkey: "S",
+							modifier: ["Alt"]
+						})])]),
+						_: 1
+					})
+				]),
+				createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarButton), {
+					"aria-selected": !unref(isYamlMode),
+					class: normalizeClass(unref(getLanguageToggleClass)(!unref(isYamlMode))),
+					role: "tab",
+					size: "xs",
+					type: "button",
+					variant: "ghost",
+					onClick: _cache[0] || (_cache[0] = ($event) => editorLanguage.value = "json")
+				}, {
+					default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode(" JSON ", -1)])]),
+					_: 1
+				}, 8, ["aria-selected", "class"]), createVNode(unref(ScalarButton), {
+					"aria-selected": unref(isYamlMode),
+					class: normalizeClass(unref(getLanguageToggleClass)(unref(isYamlMode))),
+					role: "tab",
+					size: "xs",
+					type: "button",
+					variant: "ghost",
+					onClick: _cache[1] || (_cache[1] = ($event) => editorLanguage.value = "yaml")
+				}, {
+					default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode(" YAML ", -1)])]),
+					_: 1
+				}, 8, ["aria-selected", "class"])]),
+				createElementVNode("div", _hoisted_6, [createVNode(unref(ScalarButton), {
+					size: "xs",
+					variant: "ghost",
+					onClick: formatDocument
+				}, {
+					default: withCtx(() => [createElementVNode("span", null, "Format " + toDisplayString(unref(isYamlMode) ? "YAML" : "JSON"), 1), createElementVNode("span", _hoisted_7, [createVNode(unref(ScalarHotkey), {
+						hotkey: "F",
+						modifier: ["Alt", "Shift"]
+					})])]),
+					_: 1
+				}), createVNode(unref(ScalarButton), {
+					"aria-label": unref(isEditorMaximized) ? "Restore editor size" : "Maximize editor",
+					size: "xs",
+					variant: "ghost",
+					onClick: unref(toggleEditorMaximized)
+				}, {
+					default: withCtx(() => [createElementVNode("span", null, toDisplayString(unref(isEditorMaximized) ? "Restore" : "Maximize"), 1), createElementVNode("span", _hoisted_8, [unref(isEditorMaximized) ? (openBlock(), createBlock(unref(ScalarIconArrowsIn), {
+						key: 0,
+						class: "size-3.5"
+					})) : (openBlock(), createBlock(unref(ScalarIconArrowsOut), {
+						key: 1,
+						class: "size-3.5"
+					}))])]),
+					_: 1
+				}, 8, ["aria-label", "onClick"])])
+			]), createElementVNode("div", _hoisted_9, [createElementVNode("div", { class: normalizeClass(["relative w-full min-w-0 flex-1", unref(isEditorMaximized) ? "h-full min-h-0" : "h-[500px]"]) }, [
+				createElementVNode("div", _hoisted_10, [createVNode(EditorSavePanel_default, {
+					isAutoSaveEnabled: unref(isAutoSaveEnabled),
+					isDirty: unref(isDirty),
+					saveLoader: unref(saveLoader),
+					onSaveNow: saveNow,
+					"onUpdate:isAutoSaveEnabled": _cache[2] || (_cache[2] = ($event) => isAutoSaveEnabled.value = $event)
+				}, null, 8, [
+					"isAutoSaveEnabled",
+					"isDirty",
+					"saveLoader"
+				])]),
+				createVNode(EditorDiagnosticsPanel_default, {
+					diagnosticCounts: diagnosticCounts.value,
+					expanded: unref(isDiagnosticsPaneExpanded),
+					visibleDiagnostics: visibleDiagnostics.value,
+					onFocusDiagnostic: focusDiagnostic,
+					onToggle: _cache[3] || (_cache[3] = ($event) => isDiagnosticsPaneExpanded.value = !unref(isDiagnosticsPaneExpanded))
+				}, null, 8, [
+					"diagnosticCounts",
+					"expanded",
+					"visibleDiagnostics"
+				]),
+				createElementVNode("div", {
+					ref_key: "monacoEditorRef",
+					ref: monacoEditorRef,
+					class: "h-full w-full min-w-0 flex-1"
+				}, null, 512)
+			], 2)])], 2)) : (openBlock(), createElementBlock("div", _hoisted_11, "No operation context found"));
+		};
+	}
+});
+//#endregion
+export { Editor_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Editor.vue.script.js.map

package/dist/v2/features/collection/components/Editor/Editor.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.vue.script.js","names":[],"sources":["../../../../../../src/v2/features/collection/components/Editor/Editor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarHotkey, useLoadingState } from '@scalar/components'\nimport { debounce } from '@scalar/helpers/general/debounce'\nimport { isObject } from '@scalar/helpers/object/is-object'\nimport { ScalarIconArrowsIn, ScalarIconArrowsOut } from '@scalar/icons'\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\n\nimport type { CollectionProps } from '@/v2/features/app/helpers/routes'\nimport { useEditor, useJsonPointerLinkSupport } from '@/v2/features/editor'\nimport { createJsonModel } from '@/v2/features/editor/helpers/json/create-json-model'\nimport { createYamlModel } from '@/v2/features/editor/helpers/yaml/create-yaml-model'\nimport { useEditorMarkers } from '@/v2/features/editor/hooks/use-editor-markers'\n\nimport EditorDiagnosticsPanel from './components/EditorDiagnosticsPanel.vue'\nimport EditorSavePanel from './components/EditorSavePanel.vue'\nimport { getDiagnosticCounts } from './helpers/get-diagnostic-counts'\nimport { getOperationContext } from './helpers/get-operation-context'\nimport { getVisibleDiagnostics } from './helpers/get-visible-diagnostics'\nimport { parseEditorObject } from './helpers/parse-editor-object'\nimport { stringifyDocument } from './helpers/stringify-document'\nimport { useEditorState } from './hooks/use-editor-state'\n\nconst { collectionType, documentSlug, method, path, workspaceStore } =\n  defineProps<CollectionProps>()\n\nconst MAX_VISIBLE_DIAGNOSTICS = 6\nconst EDITOR_PERSIST_DEBOUNCE_KEY = 'editor:replace-document'\n\nconst monacoEditorRef = ref<HTMLElement>()\nconst editorApi = shallowRef<ReturnType<typeof useEditor>>()\n\nconst saveLoader = useLoadingState()\nconst {\n  isAutoSaveEnabled,\n  isDirty,\n  editorLanguage,\n  isDiagnosticsPaneExpanded,\n  isEditorMaximized,\n  isYamlMode,\n  editorBottomPadding,\n  editorRootClass,\n  getLanguageToggleClass,\n  toggleEditorMaximized,\n} = useEditorState()\n\nconst jsonModel = createJsonModel()\nconst yamlModel = createYamlModel()\n\nconst selectedLanguage = ref<'json' | 'yaml'>('json')\n\nconst currentModel = computed(() => {\n  return selectedLanguage.value === 'json' ? jsonModel : yamlModel\n})\n\nconst monacoEditorInstance = computed(() => editorApi.value?.editor)\nconst { markers: diagnostics } = useEditorMarkers(monacoEditorInstance)\n\nconst syncEditorBottomPadding = () => {\n  editorApi.value?.editor.updateOptions({\n    padding: {\n      top: 0,\n      bottom: editorBottomPadding.value,\n    },\n  })\n}\n\nconst diagnosticCounts = computed(() => getDiagnosticCounts(diagnostics.value))\nconst visibleDiagnostics = computed(() =>\n  getVisibleDiagnostics(diagnostics.value, MAX_VISIBLE_DIAGNOSTICS),\n)\n\nconst focusDiagnostic = (marker: monaco.editor.IMarker) => {\n  const editor = editorApi.value?.editor\n  if (!editor) {\n    return\n  }\n  editor.setSelection({\n    startLineNumber: marker.startLineNumber,\n    startColumn: marker.startColumn,\n    endLineNumber: marker.endLineNumber,\n    endColumn: marker.endColumn,\n  })\n  editor.revealPositionInCenter({\n    lineNumber: marker.startLineNumber,\n    column: marker.startColumn,\n  })\n}\n\nconst getEditorValue = (): string | null => currentModel.value.model.getValue()\n\n/** Value from the editor for a specific language (use when switching to avoid reading the wrong model). */\nconst getEditorValueForLanguage = (language: 'json' | 'yaml'): string | null =>\n  (language === 'json' ? jsonModel : yamlModel).model.getValue()\n\nconst getDocumentValue = async (\n  language?: 'json' | 'yaml',\n): Promise<string> => {\n  const document = await workspaceStore.getEditableDocument(documentSlug)\n  return stringifyDocument(document, language ?? selectedLanguage.value)\n}\n\nconst debouncedPersist = debounce({ delay: 1500 })\n\nconst applyProgrammaticEditorValue = (value: string): void => {\n  // Cancel pending auto-save work so synthetic model updates do not persist stale data.\n  debouncedPersist.cleanup()\n  editorApi.value?.setValue(value, true)\n}\n\nconst loadDocumentIntoEditor = async () => {\n  applyProgrammaticEditorValue(await getDocumentValue())\n  isDirty.value = false\n  await focusOperation()\n}\n\nconst formatDocument = async () => {\n  await editorApi.value?.formatDocument()\n}\n\nconst focusOperation = async () => {\n  const operationContext = getOperationContext(path, method)\n  if (!operationContext) {\n    return\n  }\n\n  await editorApi.value?.focusPath([\n    'paths',\n    operationContext.path,\n    operationContext.method,\n  ])\n}\n\nconst persistEditorToWorkspace = async (value: string) => {\n  const parsed = parseEditorObject(value, editorLanguage.value)\n  if (!parsed) {\n    const firstError = diagnostics.value.find(\n      (m) => m.severity === monaco.MarkerSeverity.Error,\n    )\n    if (firstError) {\n      focusDiagnostic(firstError)\n    }\n    await saveLoader.invalidate()\n    return\n  }\n\n  saveLoader.start()\n  await workspaceStore.replaceDocument(documentSlug, parsed)\n  isDirty.value = false\n  await saveLoader.validate({ duration: 900 })\n}\n\nconst saveNow = async () => {\n  const value = getEditorValue()\n  if (!value) {\n    return\n  }\n  await persistEditorToWorkspace(value)\n}\n\nconst handleEditorChange = (value: string) => {\n  isDirty.value = true\n\n  if (!isAutoSaveEnabled.value) {\n    return\n  }\n\n  debouncedPersist.execute(EDITOR_PERSIST_DEBOUNCE_KEY, () =>\n    persistEditorToWorkspace(value),\n  )\n}\n\nconst focusOperationServers = async () => {\n  const operationContext = getOperationContext(path, method)\n  if (!operationContext) {\n    return\n  }\n\n  const value = getEditorValue()\n  if (!value) {\n    return\n  }\n\n  const parsed = parseEditorObject(value, editorLanguage.value)\n\n  if (!parsed || !isObject(parsed.paths)) {\n    return\n  }\n\n  const pathsObject = parsed.paths as Record<string, unknown>\n  const operationPathItem = pathsObject[operationContext.path]\n  if (!isObject(operationPathItem)) {\n    return\n  }\n\n  const operation = operationPathItem[operationContext.method]\n  if (!isObject(operation)) {\n    return\n  }\n\n  // Add default servers if not present\n  operation.servers ??= []\n\n  // Update the editor value\n  editorApi.value?.setValue(stringifyDocument(parsed, editorLanguage.value))\n  await editorApi.value?.focusPath([\n    'paths',\n    operationContext.path,\n    operationContext.method,\n    'servers',\n  ])\n}\n\nuseJsonPointerLinkSupport(editorApi, currentModel)\n\nonMounted(() => {\n  editorApi.value = useEditor({\n    element: monacoEditorRef.value ?? document.createElement('div'),\n    onChange: handleEditorChange,\n    model: currentModel,\n    actions: [\n      {\n        id: 'scalar.editor.focusOperation',\n        label: 'Focus Operation',\n        keybindings: [monaco.KeyMod.Alt | monaco.KeyCode.KeyO],\n        run: async () => {\n          await focusOperation()\n        },\n      },\n      {\n        id: 'scalar.editor.focusOperationServers',\n        label: 'Focus Operation Servers',\n        keybindings: [monaco.KeyMod.Alt | monaco.KeyCode.KeyS],\n        run: async () => {\n          await focusOperationServers()\n        },\n      },\n      {\n        id: 'scalar.editor.formatDocument',\n        label: 'Format Document',\n        keybindings: [\n          monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,\n        ],\n        run: async () => {\n          await formatDocument()\n        },\n      },\n    ],\n  })\n\n  syncEditorBottomPadding()\n  void loadDocumentIntoEditor()\n})\n\nonBeforeUnmount(() => {\n  debouncedPersist.cleanup()\n\n  // Persist if there is a pending save\n  if (isDirty.value && isAutoSaveEnabled.value) {\n    void saveNow()\n  }\n  editorApi.value?.dispose?.()\n  // Dispose models created at setup; useEditor only disposes the editor widget, not external models.\n  jsonModel.model.dispose()\n  yamlModel.model.dispose()\n})\n\nwatch(() => documentSlug, loadDocumentIntoEditor)\n\nwatch(\n  () => [path, method] as const,\n  async () => {\n    await focusOperation()\n  },\n)\n\nwatch(isDiagnosticsPaneExpanded, () => {\n  syncEditorBottomPadding()\n})\n\nwatch(editorLanguage, async (nextLanguage, previousLanguage) => {\n  const wasDirty = isDirty.value\n  // Read from the previous model before switching; getEditorValue() would use currentModel\n  // which changes with selectedLanguage, so we would read the (empty) new model otherwise.\n  const value = getEditorValueForLanguage(previousLanguage ?? 'json')\n  if (!value) {\n    selectedLanguage.value = nextLanguage\n    await nextTick()\n    await focusOperation()\n    return\n  }\n\n  const parsed = parseEditorObject(value, previousLanguage ?? 'json')\n  selectedLanguage.value = nextLanguage\n  await nextTick()\n  if (parsed) {\n    applyProgrammaticEditorValue(stringifyDocument(parsed, nextLanguage))\n    isDirty.value = wasDirty\n  }\n  await focusOperation()\n})\n\nwatch(\n  isAutoSaveEnabled,\n  (isEnabled) => {\n    if (!isEnabled) {\n      debouncedPersist.cleanup()\n      return\n    }\n\n    if (isDirty.value) {\n      const value = getEditorValue()\n      if (!value) {\n        return\n      }\n      debouncedPersist.execute(EDITOR_PERSIST_DEBOUNCE_KEY, () =>\n        persistEditorToWorkspace(value),\n      )\n    }\n  },\n  { flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    v-if=\"\n      collectionType === 'operation' &&\n      getOperationContext(path, method) !== null\n    \"\n    class=\"flex w-full min-w-0 flex-1 flex-col gap-2\"\n    :class=\"editorRootClass\">\n    <div\n      class=\"grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3\">\n      <div\n        class=\"flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap\">\n        <span class=\"text-c-2 text-xs font-medium whitespace-nowrap\">\n          Shortcuts\n        </span>\n\n        <ScalarButton\n          class=\"whitespace-nowrap\"\n          size=\"xs\"\n          variant=\"ghost\"\n          @click=\"focusOperation\">\n          <span>Operation</span>\n          <span class=\"text-c-3 ml-2 text-[11px]\">\n            <ScalarHotkey\n              hotkey=\"O\"\n              :modifier=\"['Alt']\" />\n          </span>\n        </ScalarButton>\n\n        <ScalarButton\n          class=\"whitespace-nowrap\"\n          size=\"xs\"\n          variant=\"ghost\"\n          @click=\"focusOperationServers\">\n          <span>Servers</span>\n          <span class=\"text-c-3 ml-2 text-[11px]\">\n            <ScalarHotkey\n              hotkey=\"S\"\n              :modifier=\"['Alt']\" />\n          </span>\n        </ScalarButton>\n      </div>\n\n      <div\n        aria-label=\"Editor language\"\n        class=\"bg-b-1 shadow-border flex items-center justify-self-center overflow-hidden rounded-lg p-0.5\"\n        role=\"tablist\">\n        <ScalarButton\n          :aria-selected=\"!isYamlMode\"\n          :class=\"getLanguageToggleClass(!isYamlMode)\"\n          role=\"tab\"\n          size=\"xs\"\n          type=\"button\"\n          variant=\"ghost\"\n          @click=\"editorLanguage = 'json'\">\n          JSON\n        </ScalarButton>\n        <ScalarButton\n          :aria-selected=\"isYamlMode\"\n          :class=\"getLanguageToggleClass(isYamlMode)\"\n          role=\"tab\"\n          size=\"xs\"\n          type=\"button\"\n          variant=\"ghost\"\n          @click=\"editorLanguage = 'yaml'\">\n          YAML\n        </ScalarButton>\n      </div>\n\n      <div class=\"flex min-w-0 shrink-0 items-center gap-2 justify-self-end\">\n        <ScalarButton\n          size=\"xs\"\n          variant=\"ghost\"\n          @click=\"formatDocument\">\n          <span>Format {{ isYamlMode ? 'YAML' : 'JSON' }}</span>\n          <span class=\"text-c-3 ml-2 text-[11px]\">\n            <ScalarHotkey\n              hotkey=\"F\"\n              :modifier=\"['Alt', 'Shift']\" />\n          </span>\n        </ScalarButton>\n        <ScalarButton\n          :aria-label=\"\n            isEditorMaximized ? 'Restore editor size' : 'Maximize editor'\n          \"\n          size=\"xs\"\n          variant=\"ghost\"\n          @click=\"toggleEditorMaximized\">\n          <span>{{ isEditorMaximized ? 'Restore' : 'Maximize' }}</span>\n          <span class=\"text-c-3 ml-2 text-[11px]\">\n            <ScalarIconArrowsIn\n              v-if=\"isEditorMaximized\"\n              class=\"size-3.5\" />\n            <ScalarIconArrowsOut\n              v-else\n              class=\"size-3.5\" />\n          </span>\n        </ScalarButton>\n      </div>\n    </div>\n\n    <div class=\"flex min-h-0 w-full min-w-0 flex-1 rounded-lg border\">\n      <div\n        class=\"relative w-full min-w-0 flex-1\"\n        :class=\"isEditorMaximized ? 'h-full min-h-0' : 'h-[500px]'\">\n        <div class=\"pointer-events-none absolute top-2 right-2 z-10\">\n          <EditorSavePanel\n            :isAutoSaveEnabled=\"isAutoSaveEnabled\"\n            :isDirty=\"isDirty\"\n            :saveLoader=\"saveLoader\"\n            @saveNow=\"saveNow\"\n            @update:isAutoSaveEnabled=\"isAutoSaveEnabled = $event\" />\n        </div>\n\n        <EditorDiagnosticsPanel\n          :diagnosticCounts=\"diagnosticCounts\"\n          :expanded=\"isDiagnosticsPaneExpanded\"\n          :visibleDiagnostics=\"visibleDiagnostics\"\n          @focusDiagnostic=\"focusDiagnostic\"\n          @toggle=\"isDiagnosticsPaneExpanded = !isDiagnosticsPaneExpanded\" />\n\n        <div\n          ref=\"monacoEditorRef\"\n          class=\"h-full w-full min-w-0 flex-1\" />\n      </div>\n    </div>\n  </div>\n  <div v-else>No operation context found</div>\n</template>\n<style scoped>\n.editor-container {\n  width: 100%;\n  height: 100%;\n}\n\n:deep(.json-path-highlight) {\n  background-color: rgba(255, 200, 0, 0.35);\n  border-radius: 4px;\n}\n\n:deep(.json-focus-highlight) {\n  background-color: color-mix(\n    in srgb,\n    var(--scalar-color-accent, #24b47e) 18%,\n    transparent\n  );\n  border-radius: 4px;\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/features/collection/components/Editor/components/EditorDiagnosticsPanel.vue.js

@@ -0,0 +1,7 @@
+import EditorDiagnosticsPanel_vue_vue_type_script_setup_true_lang_default from "./EditorDiagnosticsPanel.vue.script.js";
+//#region src/v2/features/collection/components/Editor/components/EditorDiagnosticsPanel.vue
+var EditorDiagnosticsPanel_default = EditorDiagnosticsPanel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EditorDiagnosticsPanel_default as default };
+
+//# sourceMappingURL=EditorDiagnosticsPanel.vue.js.map

package/dist/v2/features/collection/components/Editor/components/EditorDiagnosticsPanel.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorDiagnosticsPanel.vue.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/components/EditorDiagnosticsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretDown,\n  ScalarIconCaretRight,\n  ScalarIconWarning,\n  ScalarIconXCircle,\n} from '@scalar/icons'\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'\n\nconst { expanded, diagnosticCounts, visibleDiagnostics } = defineProps<{\n  expanded: boolean\n  diagnosticCounts: { errors: number; warnings: number }\n  visibleDiagnostics: monaco.editor.IMarker[]\n}>()\n\nconst emit = defineEmits<{\n  (e: 'toggle'): void\n  (e: 'focusDiagnostic', marker: monaco.editor.IMarker): void\n}>()\n\nconst getMarkerDotClass = (severity: monaco.MarkerSeverity): string =>\n  severity === monaco.MarkerSeverity.Error ? 'bg-c-danger' : 'bg-c-alert'\n</script>\n\n<template>\n  <div class=\"pointer-events-none absolute right-2 bottom-2 left-2 z-10\">\n    <div\n      class=\"bg-b-1 shadow-border pointer-events-auto flex flex-col overflow-hidden rounded-lg text-[11px]\">\n      <button\n        class=\"bg-b-2/30 hover:bg-b-2/50 flex items-center justify-between px-2.5 py-2 text-left\"\n        type=\"button\"\n        @click=\"emit('toggle')\">\n        <span class=\"flex items-center gap-3\">\n          <span class=\"text-c-2 font-medium\">Problems</span>\n          <span\n            class=\"text-c-danger flex items-center gap-1\"\n            title=\"Errors\">\n            <ScalarIconXCircle class=\"size-3\" />\n            <span>{{ diagnosticCounts.errors }}</span>\n          </span>\n          <span\n            class=\"text-c-alert flex items-center gap-1\"\n            title=\"Warnings\">\n            <ScalarIconWarning class=\"size-3\" />\n            <span>{{ diagnosticCounts.warnings }}</span>\n          </span>\n        </span>\n\n        <span class=\"text-c-3\">\n          <ScalarIconCaretDown\n            v-if=\"expanded\"\n            class=\"size-3\" />\n          <ScalarIconCaretRight\n            v-else\n            class=\"size-3\" />\n        </span>\n      </button>\n\n      <template v-if=\"expanded\">\n        <div\n          v-if=\"visibleDiagnostics.length\"\n          class=\"max-h-28 overflow-auto border-t\">\n          <button\n            v-for=\"(marker, index) in visibleDiagnostics\"\n            :key=\"`${marker.owner}-${marker.startLineNumber}-${marker.startColumn}-${index}`\"\n            class=\"hover:bg-b-2/40 flex w-full items-start gap-2 px-2.5 py-2 text-left\"\n            type=\"button\"\n            @click=\"emit('focusDiagnostic', marker)\">\n            <span\n              class=\"mt-0.5 size-1.5 shrink-0 rounded-full\"\n              :class=\"getMarkerDotClass(marker.severity)\" />\n\n            <span class=\"min-w-0 flex-1\">\n              <span class=\"text-c-1 block truncate\">{{ marker.message }}</span>\n              <span class=\"text-c-3 block whitespace-nowrap\">\n                Ln {{ marker.startLineNumber }}, Col {{ marker.startColumn }}\n              </span>\n            </span>\n          </button>\n        </div>\n        <div\n          v-else\n          class=\"text-c-3 border-t px-2.5 py-2\">\n          Errors and warnings from the JSON/YAML language workers will show up\n          here.\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/features/collection/components/Editor/components/EditorDiagnosticsPanel.vue.script.js

@@ -0,0 +1,69 @@
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
+import { ScalarIconCaretDown, ScalarIconCaretRight, ScalarIconWarning, ScalarIconXCircle } from "@scalar/icons";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+//#region src/v2/features/collection/components/Editor/components/EditorDiagnosticsPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "pointer-events-none absolute right-2 bottom-2 left-2 z-10" };
+var _hoisted_2 = { class: "bg-b-1 shadow-border pointer-events-auto flex flex-col overflow-hidden rounded-lg text-[11px]" };
+var _hoisted_3 = { class: "flex items-center gap-3" };
+var _hoisted_4 = {
+	class: "text-c-danger flex items-center gap-1",
+	title: "Errors"
+};
+var _hoisted_5 = {
+	class: "text-c-alert flex items-center gap-1",
+	title: "Warnings"
+};
+var _hoisted_6 = { class: "text-c-3" };
+var _hoisted_7 = {
+	key: 0,
+	class: "max-h-28 overflow-auto border-t"
+};
+var _hoisted_8 = ["onClick"];
+var _hoisted_9 = { class: "min-w-0 flex-1" };
+var _hoisted_10 = { class: "text-c-1 block truncate" };
+var _hoisted_11 = { class: "text-c-3 block whitespace-nowrap" };
+var _hoisted_12 = {
+	key: 1,
+	class: "text-c-3 border-t px-2.5 py-2"
+};
+var EditorDiagnosticsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EditorDiagnosticsPanel",
+	props: {
+		expanded: { type: Boolean },
+		diagnosticCounts: {},
+		visibleDiagnostics: {}
+	},
+	emits: ["toggle", "focusDiagnostic"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const getMarkerDotClass = (severity) => severity === monaco.MarkerSeverity.Error ? "bg-c-danger" : "bg-c-alert";
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("button", {
+				class: "bg-b-2/30 hover:bg-b-2/50 flex items-center justify-between px-2.5 py-2 text-left",
+				type: "button",
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("toggle"))
+			}, [createElementVNode("span", _hoisted_3, [
+				_cache[1] || (_cache[1] = createElementVNode("span", { class: "text-c-2 font-medium" }, "Problems", -1)),
+				createElementVNode("span", _hoisted_4, [createVNode(unref(ScalarIconXCircle), { class: "size-3" }), createElementVNode("span", null, toDisplayString(__props.diagnosticCounts.errors), 1)]),
+				createElementVNode("span", _hoisted_5, [createVNode(unref(ScalarIconWarning), { class: "size-3" }), createElementVNode("span", null, toDisplayString(__props.diagnosticCounts.warnings), 1)])
+			]), createElementVNode("span", _hoisted_6, [__props.expanded ? (openBlock(), createBlock(unref(ScalarIconCaretDown), {
+				key: 0,
+				class: "size-3"
+			})) : (openBlock(), createBlock(unref(ScalarIconCaretRight), {
+				key: 1,
+				class: "size-3"
+			}))])]), __props.expanded ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.visibleDiagnostics.length ? (openBlock(), createElementBlock("div", _hoisted_7, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.visibleDiagnostics, (marker, index) => {
+				return openBlock(), createElementBlock("button", {
+					key: `${marker.owner}-${marker.startLineNumber}-${marker.startColumn}-${index}`,
+					class: "hover:bg-b-2/40 flex w-full items-start gap-2 px-2.5 py-2 text-left",
+					type: "button",
+					onClick: ($event) => emit("focusDiagnostic", marker)
+				}, [createElementVNode("span", { class: normalizeClass(["mt-0.5 size-1.5 shrink-0 rounded-full", getMarkerDotClass(marker.severity)]) }, null, 2), createElementVNode("span", _hoisted_9, [createElementVNode("span", _hoisted_10, toDisplayString(marker.message), 1), createElementVNode("span", _hoisted_11, " Ln " + toDisplayString(marker.startLineNumber) + ", Col " + toDisplayString(marker.startColumn), 1)])], 8, _hoisted_8);
+			}), 128))])) : (openBlock(), createElementBlock("div", _hoisted_12, " Errors and warnings from the JSON/YAML language workers will show up here. "))], 64)) : createCommentVNode("", true)])]);
+		};
+	}
+});
+//#endregion
+export { EditorDiagnosticsPanel_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EditorDiagnosticsPanel.vue.script.js.map

package/dist/v2/features/collection/components/Editor/components/EditorDiagnosticsPanel.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorDiagnosticsPanel.vue.script.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/components/EditorDiagnosticsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretDown,\n  ScalarIconCaretRight,\n  ScalarIconWarning,\n  ScalarIconXCircle,\n} from '@scalar/icons'\nimport * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'\n\nconst { expanded, diagnosticCounts, visibleDiagnostics } = defineProps<{\n  expanded: boolean\n  diagnosticCounts: { errors: number; warnings: number }\n  visibleDiagnostics: monaco.editor.IMarker[]\n}>()\n\nconst emit = defineEmits<{\n  (e: 'toggle'): void\n  (e: 'focusDiagnostic', marker: monaco.editor.IMarker): void\n}>()\n\nconst getMarkerDotClass = (severity: monaco.MarkerSeverity): string =>\n  severity === monaco.MarkerSeverity.Error ? 'bg-c-danger' : 'bg-c-alert'\n</script>\n\n<template>\n  <div class=\"pointer-events-none absolute right-2 bottom-2 left-2 z-10\">\n    <div\n      class=\"bg-b-1 shadow-border pointer-events-auto flex flex-col overflow-hidden rounded-lg text-[11px]\">\n      <button\n        class=\"bg-b-2/30 hover:bg-b-2/50 flex items-center justify-between px-2.5 py-2 text-left\"\n        type=\"button\"\n        @click=\"emit('toggle')\">\n        <span class=\"flex items-center gap-3\">\n          <span class=\"text-c-2 font-medium\">Problems</span>\n          <span\n            class=\"text-c-danger flex items-center gap-1\"\n            title=\"Errors\">\n            <ScalarIconXCircle class=\"size-3\" />\n            <span>{{ diagnosticCounts.errors }}</span>\n          </span>\n          <span\n            class=\"text-c-alert flex items-center gap-1\"\n            title=\"Warnings\">\n            <ScalarIconWarning class=\"size-3\" />\n            <span>{{ diagnosticCounts.warnings }}</span>\n          </span>\n        </span>\n\n        <span class=\"text-c-3\">\n          <ScalarIconCaretDown\n            v-if=\"expanded\"\n            class=\"size-3\" />\n          <ScalarIconCaretRight\n            v-else\n            class=\"size-3\" />\n        </span>\n      </button>\n\n      <template v-if=\"expanded\">\n        <div\n          v-if=\"visibleDiagnostics.length\"\n          class=\"max-h-28 overflow-auto border-t\">\n          <button\n            v-for=\"(marker, index) in visibleDiagnostics\"\n            :key=\"`${marker.owner}-${marker.startLineNumber}-${marker.startColumn}-${index}`\"\n            class=\"hover:bg-b-2/40 flex w-full items-start gap-2 px-2.5 py-2 text-left\"\n            type=\"button\"\n            @click=\"emit('focusDiagnostic', marker)\">\n            <span\n              class=\"mt-0.5 size-1.5 shrink-0 rounded-full\"\n              :class=\"getMarkerDotClass(marker.severity)\" />\n\n            <span class=\"min-w-0 flex-1\">\n              <span class=\"text-c-1 block truncate\">{{ marker.message }}</span>\n              <span class=\"text-c-3 block whitespace-nowrap\">\n                Ln {{ marker.startLineNumber }}, Col {{ marker.startColumn }}\n              </span>\n            </span>\n          </button>\n        </div>\n        <div\n          v-else\n          class=\"text-c-3 border-t px-2.5 py-2\">\n          Errors and warnings from the JSON/YAML language workers will show up\n          here.\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,OAAO;EAKb,MAAM,qBAAqB,aACzB,aAAa,OAAO,eAAe,QAAQ,gBAAgB;;uBAI3D,mBA+DM,OA/DN,YA+DM,CA9DJ,mBA6DM,OA7DN,YA6DM,CA3DJ,mBA4BS,UAAA;IA3BP,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;OACZ,mBAcO,QAdP,YAcO;8BAbL,mBAAkD,QAAA,EAA5C,OAAM,wBAAsB,EAAC,YAAQ,GAAA;IAC3C,mBAKO,QALP,YAKO,CAFL,YAAoC,MAAA,kBAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,EACjC,mBAA0C,QAAA,MAAA,gBAAjC,QAAA,iBAAiB,OAAM,EAAA,EAAA,CAAA,CAAA;IAElC,mBAKO,QALP,YAKO,CAFL,YAAoC,MAAA,kBAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,EACjC,mBAA4C,QAAA,MAAA,gBAAnC,QAAA,iBAAiB,SAAQ,EAAA,EAAA,CAAA,CAAA;OAItC,mBAOO,QAPP,YAOO,CALG,QAAA,YAAA,WAAA,EADR,YAEmB,MAAA,oBAAA,EAAA;;IAAjB,OAAM;uBACR,YAEmB,MAAA,qBAAA,EAAA;;IAAjB,OAAM;YAII,QAAA,YAAA,WAAA,EAAhB,mBA4BW,UAAA,EAAA,KAAA,GAAA,EAAA,CA1BD,QAAA,mBAAmB,UAAA,WAAA,EAD3B,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAjBJ,mBAgBS,UAAA,MAAA,WAfmB,QAAA,qBAAlB,QAAQ,UAAK;wBADvB,mBAgBS,UAAA;KAdN,KAAG,GAAK,OAAO,MAAK,GAAI,OAAO,gBAAe,GAAI,OAAO,YAAW,GAAI;KACzE,OAAM;KACN,MAAK;KACJ,UAAK,WAAE,KAAI,mBAAoB,OAAM;QACtC,mBAEgD,QAAA,EAD9C,OAAK,eAAA,CAAC,yCACE,kBAAkB,OAAO,SAAQ,CAAA,CAAA,EAAA,EAAA,MAAA,EAAA,EAE3C,mBAKO,QALP,YAKO,CAJL,mBAAiE,QAAjE,aAAiE,gBAAxB,OAAO,QAAO,EAAA,EAAA,EACvD,mBAEO,QAFP,aAA+C,SAC1C,gBAAG,OAAO,gBAAe,GAAG,WAAM,gBAAG,OAAO,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,WAAA;gCAKlE,mBAKM,OALN,aAEwC,+EAGxC,EAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/v2/features/collection/components/Editor/components/EditorSavePanel.vue.js

@@ -0,0 +1,7 @@
+import EditorSavePanel_vue_vue_type_script_setup_true_lang_default from "./EditorSavePanel.vue.script.js";
+//#region src/v2/features/collection/components/Editor/components/EditorSavePanel.vue
+var EditorSavePanel_default = EditorSavePanel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EditorSavePanel_default as default };
+
+//# sourceMappingURL=EditorSavePanel.vue.js.map

package/dist/v2/features/collection/components/Editor/components/EditorSavePanel.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorSavePanel.vue.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/components/EditorSavePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarLoading,\n  ScalarToggle,\n  type LoadingState,\n} from '@scalar/components'\nimport { computed } from 'vue'\n\nconst { isAutoSaveEnabled, isDirty, saveLoader } = defineProps<{\n  isAutoSaveEnabled: boolean\n  isDirty: boolean\n  saveLoader: LoadingState\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:isAutoSaveEnabled', value: boolean): void\n  (e: 'saveNow'): void\n}>()\n\nconst editorStatusText = computed(() => {\n  if (!isAutoSaveEnabled && isDirty) {\n    return 'Unsaved'\n  }\n\n  if (!saveLoader.isActive) {\n    return null\n  }\n  if (saveLoader.isLoading) {\n    return 'Saving…'\n  }\n  if (saveLoader.isInvalid) {\n    return 'Save failed'\n  }\n  if (saveLoader.isValid) {\n    return 'Saved'\n  }\n  return null\n})\n\nconst shouldShowEditorStatus = computed(() => editorStatusText.value !== null)\n\nconst editorStatusTone = computed<\n  'warning' | 'loading' | 'success' | 'danger' | null\n>(() => {\n  if (!shouldShowEditorStatus.value) {\n    return null\n  }\n\n  if (!isAutoSaveEnabled && isDirty) {\n    return 'warning'\n  }\n\n  if (saveLoader.isLoading) {\n    return 'loading'\n  }\n  if (saveLoader.isInvalid) {\n    return 'danger'\n  }\n  if (saveLoader.isValid) {\n    return 'success'\n  }\n\n  return null\n})\n\nconst editorStatusDotClass = computed(() => {\n  switch (editorStatusTone.value) {\n    case 'warning':\n      return 'bg-c-alert'\n    case 'success':\n      return 'bg-c-accent'\n    case 'danger':\n      return 'bg-c-danger'\n    default:\n      return 'bg-b-3'\n  }\n})\n\nconst editorStatusTextClass = computed(() => {\n  switch (editorStatusTone.value) {\n    case 'warning':\n      return 'text-c-alert'\n    case 'success':\n      return 'text-c-accent'\n    case 'danger':\n      return 'text-c-danger'\n    default:\n      return 'text-c-2'\n  }\n})\n</script>\n\n<template>\n  <div\n    class=\"bg-b-1 pointer-events-auto flex flex-col items-stretch overflow-hidden rounded-lg border shadow-sm\">\n    <div class=\"flex items-center gap-2 px-2 py-1.5\">\n      <span class=\"text-c-2 text-[11px] font-medium whitespace-nowrap\">\n        Auto-save\n      </span>\n      <ScalarToggle\n        :modelValue=\"isAutoSaveEnabled\"\n        @update:modelValue=\"emit('update:isAutoSaveEnabled', $event)\" />\n\n      <div class=\"bg-b-3 mx-1 h-4 w-px\" />\n\n      <div class=\"min-w-[48px]\">\n        <ScalarButton\n          v-if=\"!isAutoSaveEnabled\"\n          :disabled=\"!isDirty || saveLoader.isLoading\"\n          size=\"xs\"\n          variant=\"outlined\"\n          @click=\"emit('saveNow')\">\n          Save\n        </ScalarButton>\n        <div\n          v-else\n          class=\"text-c-3 flex h-6 items-center justify-center rounded px-2 text-[11px] whitespace-nowrap\">\n          Auto\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"shouldShowEditorStatus\"\n      class=\"bg-b-2/40 flex items-center gap-2 border-t px-2 py-1 text-[11px]\">\n      <ScalarLoading\n        v-if=\"saveLoader.isActive\"\n        class=\"self-center\"\n        :loader=\"saveLoader\"\n        size=\"sm\" />\n      <span\n        v-else\n        class=\"size-1.5 rounded-full\"\n        :class=\"editorStatusDotClass\" />\n\n      <span\n        class=\"whitespace-nowrap\"\n        :class=\"editorStatusTextClass\">\n        {{ editorStatusText }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/features/collection/components/Editor/components/EditorSavePanel.vue.script.js

@@ -0,0 +1,91 @@
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ScalarButton, ScalarLoading, ScalarToggle } from "@scalar/components";
+//#region src/v2/features/collection/components/Editor/components/EditorSavePanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "bg-b-1 pointer-events-auto flex flex-col items-stretch overflow-hidden rounded-lg border shadow-sm" };
+var _hoisted_2 = { class: "flex items-center gap-2 px-2 py-1.5" };
+var _hoisted_3 = { class: "min-w-[48px]" };
+var _hoisted_4 = {
+	key: 1,
+	class: "text-c-3 flex h-6 items-center justify-center rounded px-2 text-[11px] whitespace-nowrap"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "bg-b-2/40 flex items-center gap-2 border-t px-2 py-1 text-[11px]"
+};
+var EditorSavePanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "EditorSavePanel",
+	props: {
+		isAutoSaveEnabled: { type: Boolean },
+		isDirty: { type: Boolean },
+		saveLoader: {}
+	},
+	emits: ["update:isAutoSaveEnabled", "saveNow"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const editorStatusText = computed(() => {
+			if (!__props.isAutoSaveEnabled && __props.isDirty) return "Unsaved";
+			if (!__props.saveLoader.isActive) return null;
+			if (__props.saveLoader.isLoading) return "Saving…";
+			if (__props.saveLoader.isInvalid) return "Save failed";
+			if (__props.saveLoader.isValid) return "Saved";
+			return null;
+		});
+		const shouldShowEditorStatus = computed(() => editorStatusText.value !== null);
+		const editorStatusTone = computed(() => {
+			if (!shouldShowEditorStatus.value) return null;
+			if (!__props.isAutoSaveEnabled && __props.isDirty) return "warning";
+			if (__props.saveLoader.isLoading) return "loading";
+			if (__props.saveLoader.isInvalid) return "danger";
+			if (__props.saveLoader.isValid) return "success";
+			return null;
+		});
+		const editorStatusDotClass = computed(() => {
+			switch (editorStatusTone.value) {
+				case "warning": return "bg-c-alert";
+				case "success": return "bg-c-accent";
+				case "danger": return "bg-c-danger";
+				default: return "bg-b-3";
+			}
+		});
+		const editorStatusTextClass = computed(() => {
+			switch (editorStatusTone.value) {
+				case "warning": return "text-c-alert";
+				case "success": return "text-c-accent";
+				case "danger": return "text-c-danger";
+				default: return "text-c-2";
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+				_cache[3] || (_cache[3] = createElementVNode("span", { class: "text-c-2 text-[11px] font-medium whitespace-nowrap" }, " Auto-save ", -1)),
+				createVNode(unref(ScalarToggle), {
+					modelValue: __props.isAutoSaveEnabled,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:isAutoSaveEnabled", $event))
+				}, null, 8, ["modelValue"]),
+				_cache[4] || (_cache[4] = createElementVNode("div", { class: "bg-b-3 mx-1 h-4 w-px" }, null, -1)),
+				createElementVNode("div", _hoisted_3, [!__props.isAutoSaveEnabled ? (openBlock(), createBlock(unref(ScalarButton), {
+					key: 0,
+					disabled: !__props.isDirty || __props.saveLoader.isLoading,
+					size: "xs",
+					variant: "outlined",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("saveNow"))
+				}, {
+					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Save ", -1)])]),
+					_: 1
+				}, 8, ["disabled"])) : (openBlock(), createElementBlock("div", _hoisted_4, " Auto "))])
+			]), shouldShowEditorStatus.value ? (openBlock(), createElementBlock("div", _hoisted_5, [__props.saveLoader.isActive ? (openBlock(), createBlock(unref(ScalarLoading), {
+				key: 0,
+				class: "self-center",
+				loader: __props.saveLoader,
+				size: "sm"
+			}, null, 8, ["loader"])) : (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(["size-1.5 rounded-full", editorStatusDotClass.value])
+			}, null, 2)), createElementVNode("span", { class: normalizeClass(["whitespace-nowrap", editorStatusTextClass.value]) }, toDisplayString(editorStatusText.value), 3)])) : createCommentVNode("", true)]);
+		};
+	}
+});
+//#endregion
+export { EditorSavePanel_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=EditorSavePanel.vue.script.js.map

package/dist/v2/features/collection/components/Editor/components/EditorSavePanel.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorSavePanel.vue.script.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/components/EditorSavePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarLoading,\n  ScalarToggle,\n  type LoadingState,\n} from '@scalar/components'\nimport { computed } from 'vue'\n\nconst { isAutoSaveEnabled, isDirty, saveLoader } = defineProps<{\n  isAutoSaveEnabled: boolean\n  isDirty: boolean\n  saveLoader: LoadingState\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:isAutoSaveEnabled', value: boolean): void\n  (e: 'saveNow'): void\n}>()\n\nconst editorStatusText = computed(() => {\n  if (!isAutoSaveEnabled && isDirty) {\n    return 'Unsaved'\n  }\n\n  if (!saveLoader.isActive) {\n    return null\n  }\n  if (saveLoader.isLoading) {\n    return 'Saving…'\n  }\n  if (saveLoader.isInvalid) {\n    return 'Save failed'\n  }\n  if (saveLoader.isValid) {\n    return 'Saved'\n  }\n  return null\n})\n\nconst shouldShowEditorStatus = computed(() => editorStatusText.value !== null)\n\nconst editorStatusTone = computed<\n  'warning' | 'loading' | 'success' | 'danger' | null\n>(() => {\n  if (!shouldShowEditorStatus.value) {\n    return null\n  }\n\n  if (!isAutoSaveEnabled && isDirty) {\n    return 'warning'\n  }\n\n  if (saveLoader.isLoading) {\n    return 'loading'\n  }\n  if (saveLoader.isInvalid) {\n    return 'danger'\n  }\n  if (saveLoader.isValid) {\n    return 'success'\n  }\n\n  return null\n})\n\nconst editorStatusDotClass = computed(() => {\n  switch (editorStatusTone.value) {\n    case 'warning':\n      return 'bg-c-alert'\n    case 'success':\n      return 'bg-c-accent'\n    case 'danger':\n      return 'bg-c-danger'\n    default:\n      return 'bg-b-3'\n  }\n})\n\nconst editorStatusTextClass = computed(() => {\n  switch (editorStatusTone.value) {\n    case 'warning':\n      return 'text-c-alert'\n    case 'success':\n      return 'text-c-accent'\n    case 'danger':\n      return 'text-c-danger'\n    default:\n      return 'text-c-2'\n  }\n})\n</script>\n\n<template>\n  <div\n    class=\"bg-b-1 pointer-events-auto flex flex-col items-stretch overflow-hidden rounded-lg border shadow-sm\">\n    <div class=\"flex items-center gap-2 px-2 py-1.5\">\n      <span class=\"text-c-2 text-[11px] font-medium whitespace-nowrap\">\n        Auto-save\n      </span>\n      <ScalarToggle\n        :modelValue=\"isAutoSaveEnabled\"\n        @update:modelValue=\"emit('update:isAutoSaveEnabled', $event)\" />\n\n      <div class=\"bg-b-3 mx-1 h-4 w-px\" />\n\n      <div class=\"min-w-[48px]\">\n        <ScalarButton\n          v-if=\"!isAutoSaveEnabled\"\n          :disabled=\"!isDirty || saveLoader.isLoading\"\n          size=\"xs\"\n          variant=\"outlined\"\n          @click=\"emit('saveNow')\">\n          Save\n        </ScalarButton>\n        <div\n          v-else\n          class=\"text-c-3 flex h-6 items-center justify-center rounded px-2 text-[11px] whitespace-nowrap\">\n          Auto\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"shouldShowEditorStatus\"\n      class=\"bg-b-2/40 flex items-center gap-2 border-t px-2 py-1 text-[11px]\">\n      <ScalarLoading\n        v-if=\"saveLoader.isActive\"\n        class=\"self-center\"\n        :loader=\"saveLoader\"\n        size=\"sm\" />\n      <span\n        v-else\n        class=\"size-1.5 rounded-full\"\n        :class=\"editorStatusDotClass\" />\n\n      <span\n        class=\"whitespace-nowrap\"\n        :class=\"editorStatusTextClass\">\n        {{ editorStatusText }}\n      </span>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,OAAO;EAKb,MAAM,mBAAmB,eAAe;AACtC,OAAI,CAAC,QAAA,qBAAqB,QAAA,QACxB,QAAO;AAGT,OAAI,CAAC,QAAA,WAAW,SACd,QAAO;AAET,OAAI,QAAA,WAAW,UACb,QAAO;AAET,OAAI,QAAA,WAAW,UACb,QAAO;AAET,OAAI,QAAA,WAAW,QACb,QAAO;AAET,UAAO;IACR;EAED,MAAM,yBAAyB,eAAe,iBAAiB,UAAU,KAAI;EAE7E,MAAM,mBAAmB,eAEjB;AACN,OAAI,CAAC,uBAAuB,MAC1B,QAAO;AAGT,OAAI,CAAC,QAAA,qBAAqB,QAAA,QACxB,QAAO;AAGT,OAAI,QAAA,WAAW,UACb,QAAO;AAET,OAAI,QAAA,WAAW,UACb,QAAO;AAET,OAAI,QAAA,WAAW,QACb,QAAO;AAGT,UAAO;IACR;EAED,MAAM,uBAAuB,eAAe;AAC1C,WAAQ,iBAAiB,OAAzB;IACE,KAAK,UACH,QAAO;IACT,KAAK,UACH,QAAO;IACT,KAAK,SACH,QAAO;IACT,QACE,QAAO;;IAEZ;EAED,MAAM,wBAAwB,eAAe;AAC3C,WAAQ,iBAAiB,OAAzB;IACE,KAAK,UACH,QAAO;IACT,KAAK,UACH,QAAO;IACT,KAAK,SACH,QAAO;IACT,QACE,QAAO;;IAEZ;;uBAIC,mBAgDM,OAhDN,YAgDM,CA9CJ,mBAyBM,OAzBN,YAyBM;8BAxBJ,mBAEO,QAAA,EAFD,OAAM,sDAAoD,EAAC,eAEjE,GAAA;IACA,YAEkE,MAAA,aAAA,EAAA;KAD/D,YAAY,QAAA;KACZ,uBAAiB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,4BAA6B,OAAM;;8BAE7D,mBAAoC,OAAA,EAA/B,OAAM,wBAAsB,EAAA,MAAA,GAAA;IAEjC,mBAcM,OAdN,YAcM,CAAA,CAZK,QAAA,qBAAA,WAAA,EADT,YAOe,MAAA,aAAA,EAAA;;KALZ,UAAQ,CAAG,QAAA,WAAW,QAAA,WAAW;KAClC,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;;4BAEd,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF2B,UAE3B,GAAA,CAAA,EAAA,CAAA;;yCACA,mBAIM,OAJN,YAEmG,SAEnG,EAAA,CAAA;OAKI,uBAAA,SAAA,WAAA,EADR,mBAkBM,OAlBN,YAkBM,CAdI,QAAA,WAAW,YAAA,WAAA,EADnB,YAIc,MAAA,cAAA,EAAA;;IAFZ,OAAM;IACL,QAAQ,QAAA;IACT,MAAK;4CACP,mBAGkC,QAAA;;IADhC,OAAK,eAAA,CAAC,yBACE,qBAAA,MAAoB,CAAA;iBAE9B,mBAIO,QAAA,EAHL,OAAK,eAAA,CAAC,qBACE,sBAAA,MAAqB,CAAA,EAAA,EAAA,gBAC1B,iBAAA,MAAgB,EAAA,EAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}