@scalar/api-client 2.38.4 → 2.39.1

package/dist/v2/features/collection/components/Editor/helpers/get-diagnostic-counts.js

@@ -0,0 +1,22 @@
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+//#region src/v2/features/collection/components/Editor/helpers/get-diagnostic-counts.ts
+/**
+* This function counts the number of error and warning markers in the provided array of Monaco editor markers.
+*
+* @param markers - The array of Monaco editor markers to count the errors and warnings for
+* @returns An object with the number of errors and warnings
+*/
+var getDiagnosticCounts = (markers) => {
+	let errors = 0;
+	let warnings = 0;
+	for (const marker of markers) if (marker.severity === monaco.MarkerSeverity.Error) errors += 1;
+	else if (marker.severity === monaco.MarkerSeverity.Warning) warnings += 1;
+	return {
+		errors,
+		warnings
+	};
+};
+//#endregion
+export { getDiagnosticCounts };
+
+//# sourceMappingURL=get-diagnostic-counts.js.map

package/dist/v2/features/collection/components/Editor/helpers/get-diagnostic-counts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-diagnostic-counts.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/helpers/get-diagnostic-counts.ts"],"sourcesContent":["import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'\n\n/**\n * This function counts the number of error and warning markers in the provided array of Monaco editor markers.\n *\n * @param markers - The array of Monaco editor markers to count the errors and warnings for\n * @returns An object with the number of errors and warnings\n */\nexport const getDiagnosticCounts = (markers: monaco.editor.IMarker[]): { errors: number; warnings: number } => {\n  let errors = 0\n  let warnings = 0\n\n  for (const marker of markers) {\n    if (marker.severity === monaco.MarkerSeverity.Error) {\n      errors += 1\n    } else if (marker.severity === monaco.MarkerSeverity.Warning) {\n      warnings += 1\n    }\n  }\n\n  return { errors, warnings }\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,uBAAuB,YAA2E;CAC7G,IAAI,SAAS;CACb,IAAI,WAAW;AAEf,MAAK,MAAM,UAAU,QACnB,KAAI,OAAO,aAAa,OAAO,eAAe,MAC5C,WAAU;UACD,OAAO,aAAa,OAAO,eAAe,QACnD,aAAY;AAIhB,QAAO;EAAE;EAAQ;EAAU"}

package/dist/v2/features/collection/components/Editor/helpers/get-operation-context.js

@@ -0,0 +1,17 @@
+import { isHttpMethod } from "@scalar/helpers/http/is-http-method";
+//#region src/v2/features/collection/components/Editor/helpers/get-operation-context.ts
+/**
+* Returns an OperationContext if both path is provided and method is a valid HTTP method.
+* Returns null otherwise.
+*/
+var getOperationContext = (path, method) => {
+	if (!path || !isHttpMethod(method)) return null;
+	return {
+		path,
+		method
+	};
+};
+//#endregion
+export { getOperationContext };
+
+//# sourceMappingURL=get-operation-context.js.map

package/dist/v2/features/collection/components/Editor/helpers/get-operation-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-operation-context.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/helpers/get-operation-context.ts"],"sourcesContent":["import { isHttpMethod } from '@scalar/helpers/http/is-http-method'\n\ntype OperationContext = {\n  path: string\n  method: string\n}\n\n/**\n * Returns an OperationContext if both path is provided and method is a valid HTTP method.\n * Returns null otherwise.\n */\nexport const getOperationContext = (path?: string, method?: string): OperationContext | null => {\n  if (!path || !isHttpMethod(method)) {\n    return null\n  }\n\n  return { path, method }\n}\n"],"mappings":";;;;;;AAWA,IAAa,uBAAuB,MAAe,WAA6C;AAC9F,KAAI,CAAC,QAAQ,CAAC,aAAa,OAAO,CAChC,QAAO;AAGT,QAAO;EAAE;EAAM;EAAQ"}

package/dist/v2/features/collection/components/Editor/helpers/get-visible-diagnostics.js

@@ -0,0 +1,17 @@
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+//#region src/v2/features/collection/components/Editor/helpers/get-visible-diagnostics.ts
+var isVisibleDiagnostic = (marker) => marker.severity === monaco.MarkerSeverity.Error || marker.severity === monaco.MarkerSeverity.Warning;
+var compareDiagnostics = (a, b) => {
+	if (a.severity !== b.severity) return b.severity - a.severity;
+	if (a.startLineNumber !== b.startLineNumber) return a.startLineNumber - b.startLineNumber;
+	return a.startColumn - b.startColumn;
+};
+/**
+* Returns up to `maxVisible` diagnostics from the provided markers array,
+* filtering to only errors and warnings, sorted by severity and position in the document.
+*/
+var getVisibleDiagnostics = (markers, maxVisible) => [...markers].filter(isVisibleDiagnostic).sort(compareDiagnostics).slice(0, maxVisible);
+//#endregion
+export { getVisibleDiagnostics };
+
+//# sourceMappingURL=get-visible-diagnostics.js.map

package/dist/v2/features/collection/components/Editor/helpers/get-visible-diagnostics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-visible-diagnostics.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/helpers/get-visible-diagnostics.ts"],"sourcesContent":["import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'\n\nconst isVisibleDiagnostic = (marker: monaco.editor.IMarker): boolean =>\n  marker.severity === monaco.MarkerSeverity.Error || marker.severity === monaco.MarkerSeverity.Warning\n\nconst compareDiagnostics = (a: monaco.editor.IMarker, b: monaco.editor.IMarker): number => {\n  if (a.severity !== b.severity) {\n    return b.severity - a.severity\n  }\n  if (a.startLineNumber !== b.startLineNumber) {\n    return a.startLineNumber - b.startLineNumber\n  }\n  return a.startColumn - b.startColumn\n}\n\n/**\n * Returns up to `maxVisible` diagnostics from the provided markers array,\n * filtering to only errors and warnings, sorted by severity and position in the document.\n */\nexport const getVisibleDiagnostics = (markers: monaco.editor.IMarker[], maxVisible: number): monaco.editor.IMarker[] =>\n  [...markers].filter(isVisibleDiagnostic).sort(compareDiagnostics).slice(0, maxVisible)\n"],"mappings":";;AAEA,IAAM,uBAAuB,WAC3B,OAAO,aAAa,OAAO,eAAe,SAAS,OAAO,aAAa,OAAO,eAAe;AAE/F,IAAM,sBAAsB,GAA0B,MAAqC;AACzF,KAAI,EAAE,aAAa,EAAE,SACnB,QAAO,EAAE,WAAW,EAAE;AAExB,KAAI,EAAE,oBAAoB,EAAE,gBAC1B,QAAO,EAAE,kBAAkB,EAAE;AAE/B,QAAO,EAAE,cAAc,EAAE;;;;;;AAO3B,IAAa,yBAAyB,SAAkC,eACtE,CAAC,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,KAAK,mBAAmB,CAAC,MAAM,GAAG,WAAW"}

package/dist/v2/features/collection/components/Editor/helpers/parse-editor-object.js

@@ -0,0 +1,34 @@
+import { parse } from "yaml";
+import { isObject } from "@scalar/helpers/object/is-object";
+//#region src/v2/features/collection/components/Editor/helpers/parse-editor-object.ts
+var safeParseJson = (value) => {
+	try {
+		return JSON.parse(value);
+	} catch {
+		return null;
+	}
+};
+var safeParseYaml = (value) => {
+	try {
+		return parse(value);
+	} catch {
+		return null;
+	}
+};
+/**
+* Parses the editor value string in either JSON or YAML format.
+* Returns the parsed object if valid and an object, otherwise returns null.
+*
+* @param value - The input string to parse.
+* @param language - The language of the input string, either 'json' or 'yaml'.
+* @returns The parsed object if it's valid, or null.
+*/
+var parseEditorObject = (value, language) => {
+	const parsed = language === "yaml" ? safeParseYaml(value) : safeParseJson(value);
+	if (!isObject(parsed)) return null;
+	return parsed;
+};
+//#endregion
+export { parseEditorObject };
+
+//# sourceMappingURL=parse-editor-object.js.map

package/dist/v2/features/collection/components/Editor/helpers/parse-editor-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-editor-object.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/helpers/parse-editor-object.ts"],"sourcesContent":["import { isObject } from '@scalar/helpers/object/is-object'\nimport { parse as parseYaml } from 'yaml'\n\nconst safeParseJson = (value: string): unknown => {\n  try {\n    return JSON.parse(value)\n  } catch {\n    return null\n  }\n}\n\nconst safeParseYaml = (value: string): unknown => {\n  try {\n    return parseYaml(value)\n  } catch {\n    return null\n  }\n}\n\n/**\n * Parses the editor value string in either JSON or YAML format.\n * Returns the parsed object if valid and an object, otherwise returns null.\n *\n * @param value - The input string to parse.\n * @param language - The language of the input string, either 'json' or 'yaml'.\n * @returns The parsed object if it's valid, or null.\n */\nexport const parseEditorObject = (value: string, language: 'json' | 'yaml'): Record<string, unknown> | null => {\n  const parsed = language === 'yaml' ? safeParseYaml(value) : safeParseJson(value)\n  if (!isObject(parsed)) {\n    return null\n  }\n\n  return parsed\n}\n"],"mappings":";;;AAGA,IAAM,iBAAiB,UAA2B;AAChD,KAAI;AACF,SAAO,KAAK,MAAM,MAAM;SAClB;AACN,SAAO;;;AAIX,IAAM,iBAAiB,UAA2B;AAChD,KAAI;AACF,SAAO,MAAU,MAAM;SACjB;AACN,SAAO;;;;;;;;;;;AAYX,IAAa,qBAAqB,OAAe,aAA8D;CAC7G,MAAM,SAAS,aAAa,SAAS,cAAc,MAAM,GAAG,cAAc,MAAM;AAChF,KAAI,CAAC,SAAS,OAAO,CACnB,QAAO;AAGT,QAAO"}

package/dist/v2/features/collection/components/Editor/helpers/stringify-document.js

@@ -0,0 +1,18 @@
+import { stringify } from "yaml";
+//#region src/v2/features/collection/components/Editor/helpers/stringify-document.ts
+/**
+* Stringifies a JavaScript object/document into a formatted string.
+* Uses YAML format if language is 'yaml', otherwise uses JSON.
+*
+* @param document - The JavaScript object to stringify
+* @param language - Output language, expected to be either 'json' or 'yaml'
+* @returns The stringified document in the specified language
+*/
+var stringifyDocument = (document, language) => {
+	if (language === "yaml") return stringify(document, { indent: 2 });
+	return JSON.stringify(document, null, 2);
+};
+//#endregion
+export { stringifyDocument };
+
+//# sourceMappingURL=stringify-document.js.map

package/dist/v2/features/collection/components/Editor/helpers/stringify-document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stringify-document.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/helpers/stringify-document.ts"],"sourcesContent":["import { stringify as stringifyYaml } from 'yaml'\n\n/**\n * Stringifies a JavaScript object/document into a formatted string.\n * Uses YAML format if language is 'yaml', otherwise uses JSON.\n *\n * @param document - The JavaScript object to stringify\n * @param language - Output language, expected to be either 'json' or 'yaml'\n * @returns The stringified document in the specified language\n */\nexport const stringifyDocument = (document: unknown, language: 'json' | 'yaml'): string => {\n  if (language === 'yaml') {\n    return stringifyYaml(document, { indent: 2 })\n  }\n\n  return JSON.stringify(document, null, 2)\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAa,qBAAqB,UAAmB,aAAsC;AACzF,KAAI,aAAa,OACf,QAAO,UAAc,UAAU,EAAE,QAAQ,GAAG,CAAC;AAG/C,QAAO,KAAK,UAAU,UAAU,MAAM,EAAE"}

package/dist/v2/features/collection/components/Editor/hooks/use-editor-state.js

@@ -0,0 +1,36 @@
+import { computed, ref } from "vue";
+//#region src/v2/features/collection/components/Editor/hooks/use-editor-state.ts
+var DIAGNOSTICS_COLLAPSED_BOTTOM_PADDING = 46;
+var DIAGNOSTICS_EXPANDED_BOTTOM_PADDING = 155;
+var useEditorState = () => {
+	const isAutoSaveEnabled = ref(false);
+	const isDirty = ref(false);
+	const editorLanguage = ref("json");
+	const isDiagnosticsPaneExpanded = ref(false);
+	const isEditorMaximized = ref(false);
+	const isYamlMode = computed(() => editorLanguage.value === "yaml");
+	const editorBottomPadding = computed(() => isDiagnosticsPaneExpanded.value ? DIAGNOSTICS_EXPANDED_BOTTOM_PADDING : DIAGNOSTICS_COLLAPSED_BOTTOM_PADDING);
+	const editorRootClass = computed(() => isEditorMaximized.value ? "fixed inset-0 z-50 h-screen w-screen border bg-b-1 p-3 mac:pt-12" : "");
+	const getLanguageToggleClass = (isActive) => {
+		return `rounded-none px-2 py-1 text-[11px] leading-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-c-accent/30 focus-visible:ring-offset-1 focus-visible:ring-offset-b-1 first:rounded-md last:rounded-md ${isActive ? "bg-b-2 text-c-1 hover:bg-b-2" : "text-c-2 hover:bg-b-2/60 hover:text-c-1"}`;
+	};
+	const toggleEditorMaximized = () => {
+		isEditorMaximized.value = !isEditorMaximized.value;
+	};
+	return {
+		isAutoSaveEnabled,
+		isDirty,
+		editorLanguage,
+		isDiagnosticsPaneExpanded,
+		isEditorMaximized,
+		isYamlMode,
+		editorBottomPadding,
+		editorRootClass,
+		getLanguageToggleClass,
+		toggleEditorMaximized
+	};
+};
+//#endregion
+export { useEditorState };
+
+//# sourceMappingURL=use-editor-state.js.map

package/dist/v2/features/collection/components/Editor/hooks/use-editor-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-editor-state.js","names":[],"sources":["../../../../../../../src/v2/features/collection/components/Editor/hooks/use-editor-state.ts"],"sourcesContent":["import { computed, ref } from 'vue'\n\ntype MonacoEditorLanguage = 'json' | 'yaml'\n\nconst DIAGNOSTICS_COLLAPSED_BOTTOM_PADDING = 46\nconst DIAGNOSTICS_EXPANDED_BOTTOM_PADDING = 155\n\nexport const useEditorState = () => {\n  const isAutoSaveEnabled = ref(false)\n  const isDirty = ref(false)\n  const editorLanguage = ref<MonacoEditorLanguage>('json')\n  const isDiagnosticsPaneExpanded = ref(false)\n  const isEditorMaximized = ref(false)\n\n  const isYamlMode = computed(() => editorLanguage.value === 'yaml')\n  const editorBottomPadding = computed(() =>\n    isDiagnosticsPaneExpanded.value ? DIAGNOSTICS_EXPANDED_BOTTOM_PADDING : DIAGNOSTICS_COLLAPSED_BOTTOM_PADDING,\n  )\n  const editorRootClass = computed(() =>\n    isEditorMaximized.value ? 'fixed inset-0 z-50 h-screen w-screen border bg-b-1 p-3 mac:pt-12' : '',\n  )\n\n  const getLanguageToggleClass = (isActive: boolean): string => {\n    const base =\n      'rounded-none px-2 py-1 text-[11px] leading-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-c-accent/30 focus-visible:ring-offset-1 focus-visible:ring-offset-b-1 first:rounded-md last:rounded-md'\n    const active = 'bg-b-2 text-c-1 hover:bg-b-2'\n    const inactive = 'text-c-2 hover:bg-b-2/60 hover:text-c-1'\n    return `${base} ${isActive ? active : inactive}`\n  }\n\n  const toggleEditorMaximized = (): void => {\n    isEditorMaximized.value = !isEditorMaximized.value\n  }\n\n  return {\n    isAutoSaveEnabled,\n    isDirty,\n    editorLanguage,\n    isDiagnosticsPaneExpanded,\n    isEditorMaximized,\n    isYamlMode,\n    editorBottomPadding,\n    editorRootClass,\n    getLanguageToggleClass,\n    toggleEditorMaximized,\n  }\n}\n"],"mappings":";;AAIA,IAAM,uCAAuC;AAC7C,IAAM,sCAAsC;AAE5C,IAAa,uBAAuB;CAClC,MAAM,oBAAoB,IAAI,MAAM;CACpC,MAAM,UAAU,IAAI,MAAM;CAC1B,MAAM,iBAAiB,IAA0B,OAAO;CACxD,MAAM,4BAA4B,IAAI,MAAM;CAC5C,MAAM,oBAAoB,IAAI,MAAM;CAEpC,MAAM,aAAa,eAAe,eAAe,UAAU,OAAO;CAClE,MAAM,sBAAsB,eAC1B,0BAA0B,QAAQ,sCAAsC,qCACzE;CACD,MAAM,kBAAkB,eACtB,kBAAkB,QAAQ,qEAAqE,GAChG;CAED,MAAM,0BAA0B,aAA8B;AAK5D,SAAO,4OAAW,WAFH,iCACE;;CAInB,MAAM,8BAAoC;AACxC,oBAAkB,QAAQ,CAAC,kBAAkB;;AAG/C,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/v2/features/collection/components/Editor/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Editor } from './Editor.vue';
+export { default as Editor } from './Editor.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/features/collection/components/Editor/index.js

@@ -1,2 +1,2 @@
-import { t as Editor_default } from "../../../../../Editor-BomsGWHx.js";
+import Editor_default from "./Editor.vue.js";
 export { Editor_default as Editor };

package/dist/v2/features/collection/components/Environment.vue.d.ts

@@ -5,16 +5,16 @@
  */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<(import("../../../../v2/features/app/helpers/routes").RouteProps & {
+declare const __VLS_export: import("vue").DefineComponent<(import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "document" | "operation";
     document: import("@scalar/workspace-store/schemas").WorkspaceDocument;
-}) | (import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}) | (import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "workspace";
     document: null;
-}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "document" | "operation";
     document: import("@scalar/workspace-store/schemas").WorkspaceDocument;
-}) | (import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}) | (import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "workspace";
     document: null;
 })> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/v2/features/collection/components/Environment.vue.js

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

package/dist/v2/features/collection/components/Environment.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Environment.vue.js","names":[],"sources":["../../../../../src/v2/features/collection/components/Environment.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Environment variables section for the collection.\n * Renders document or workspace environments and lets users set variables\n * that can be referenced in request inputs via {{ variable }}.\n */\nexport default {\n  name: 'Environment',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport type { CollectionProps } from '@/v2/features/app/helpers/routes'\nimport { EnvironmentsList } from '@/v2/features/environments'\nimport Section from '@/v2/features/settings/components/Section.vue'\n\nconst { document, eventBus, collectionType, workspaceStore } =\n  defineProps<CollectionProps>()\n\n/** Document or workspace environments */\nconst environments = computed(\n  () =>\n    (collectionType === 'document'\n      ? document['x-scalar-environments']\n      : workspaceStore.workspace['x-scalar-environments']) ?? {},\n)\n\nconst activeEnvironment = computed(() => {\n  return workspaceStore.workspace['x-scalar-active-environment']\n})\n</script>\n\n<template>\n  <Section v-if=\"collectionType !== 'operation'\">\n    <template #title>Environment Variables</template>\n    <template #description>\n      Set environment variables at your collection level. Use\n      <code\n        v-pre\n        class=\"font-code text-c-2\">\n        {{ variable }}\n      </code>\n      to add / search among the selected environment's variables in your request\n      inputs.\n    </template>\n    <EnvironmentsList\n      :activeEnvironment\n      :collectionType\n      :environments\n      :eventBus />\n  </Section>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,60 @@
+import Section_default from "../../settings/components/Section.vue.js";
+import EnvironmentsList_default from "../../environments/EnvironmentsList.vue.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+var Environment_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "Environment",
+	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) {
+		/** Document or workspace environments */
+		const environments = computed(() => (__props.collectionType === "document" ? __props.document["x-scalar-environments"] : __props.workspaceStore.workspace["x-scalar-environments"]) ?? {});
+		const activeEnvironment = computed(() => {
+			return __props.workspaceStore.workspace["x-scalar-active-environment"];
+		});
+		return (_ctx, _cache) => {
+			return __props.collectionType !== "operation" ? (openBlock(), createBlock(Section_default, { key: 0 }, {
+				title: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Environment Variables", -1)])]),
+				description: withCtx(() => [..._cache[1] || (_cache[1] = [
+					createTextVNode(" Set environment variables at your collection level. Use ", -1),
+					createElementVNode("code", { class: "font-code text-c-2" }, " {{ variable }} ", -1),
+					createTextVNode(" to add / search among the selected environment's variables in your request inputs. ", -1)
+				])]),
+				default: withCtx(() => [createVNode(unref(EnvironmentsList_default), {
+					activeEnvironment: activeEnvironment.value,
+					collectionType: __props.collectionType,
+					environments: environments.value,
+					eventBus: __props.eventBus
+				}, null, 8, [
+					"activeEnvironment",
+					"collectionType",
+					"environments",
+					"eventBus"
+				])]),
+				_: 1
+			})) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { Environment_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Environment.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Environment.vue.script.js","names":[],"sources":["../../../../../src/v2/features/collection/components/Environment.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Environment variables section for the collection.\n * Renders document or workspace environments and lets users set variables\n * that can be referenced in request inputs via {{ variable }}.\n */\nexport default {\n  name: 'Environment',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport type { CollectionProps } from '@/v2/features/app/helpers/routes'\nimport { EnvironmentsList } from '@/v2/features/environments'\nimport Section from '@/v2/features/settings/components/Section.vue'\n\nconst { document, eventBus, collectionType, workspaceStore } =\n  defineProps<CollectionProps>()\n\n/** Document or workspace environments */\nconst environments = computed(\n  () =>\n    (collectionType === 'document'\n      ? document['x-scalar-environments']\n      : workspaceStore.workspace['x-scalar-environments']) ?? {},\n)\n\nconst activeEnvironment = computed(() => {\n  return workspaceStore.workspace['x-scalar-active-environment']\n})\n</script>\n\n<template>\n  <Section v-if=\"collectionType !== 'operation'\">\n    <template #title>Environment Variables</template>\n    <template #description>\n      Set environment variables at your collection level. Use\n      <code\n        v-pre\n        class=\"font-code text-c-2\">\n        {{ variable }}\n      </code>\n      to add / search among the selected environment's variables in your request\n      inputs.\n    </template>\n    <EnvironmentsList\n      :activeEnvironment\n      :collectionType\n      :environments\n      :eventBus />\n  </Section>\n</template>\n"],"mappings":";;;;CAOE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;EAeR,MAAM,eAAe,gBAEhB,QAAA,mBAAmB,aAChB,QAAA,SAAS,2BACT,QAAA,eAAe,UAAU,6BAA6B,EAAE,CAChE;EAEA,MAAM,oBAAoB,eAAe;AACvC,UAAO,QAAA,eAAe,UAAU;IACjC;;UAIgB,QAAA,mBAAc,eAAA,WAAA,EAA7B,YAiBU,iBAAA,EAAA,KAAA,GAAA,EAAA;IAhBG,OAAK,cAAsB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAArB,yBAAqB,GAAA,CAAA,EAAA,CAAA;IAC3B,aAAW,cAEpB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA;qBAFqB,6DAErB,GAAA;KAAA,mBAIO,QAAA,EAFL,OAAM,sBAAoB,EAAC,oBAE7B,GAAA;qBAAO,wFAGT,GAAA;;2BAKc,CAJd,YAIc,MAAA,yBAAA,EAAA;KAHX,mBAAA,kBAAA;KACA,gBAAA,QAAA;KACA,cAAA,aAAA;KACA,UAAA,QAAA"}

package/dist/v2/features/collection/components/Form.vue.js

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

package/dist/v2/features/collection/components/Form.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.vue.js","names":[],"sources":["../../../../../src/v2/features/collection/components/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { useId } from 'vue'\n\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport DataTable from '@/v2/components/data-table/DataTable.vue'\nimport DataTableInput from '@/v2/components/data-table/DataTableInput.vue'\nimport DataTableRow from '@/v2/components/data-table/DataTableRow.vue'\n\ndefineProps<{\n  title?: string\n  options: {\n    key: string\n    label: string\n    placeholder: string\n    lineWrapping?: boolean\n  }[]\n  data: Record<string, any>\n  onUpdate: (key: string, value: string | number) => void\n  environment: XScalarEnvironment\n}>()\n\nconst id = useId()\n</script>\n<template>\n  <ViewLayoutSection class=\"last:rounded-b-lg\">\n    <template\n      v-if=\"title || $slots.title\"\n      #title>\n      <span v-if=\"title\">{{ title }}</span>\n      <slot\n        v-else\n        name=\"title\" />\n    </template>\n    <div class=\"flex flex-1 flex-col gap-1.5\">\n      <DataTable\n        v-if=\"Object.keys(data).length > 0\"\n        class=\"rounded-b-lg\"\n        :columns=\"['']\">\n        <DataTableRow\n          v-for=\"(option, index) in options\"\n          :key=\"index\">\n          <DataTableInput\n            :id=\"id\"\n            class=\"pr-9\"\n            :environment=\"environment\"\n            :lineWrapping=\"option.lineWrapping ?? false\"\n            :modelValue=\"data[option.key] ?? ''\"\n            :placeholder=\"option.placeholder\"\n            @update:modelValue=\"onUpdate(option.key, $event)\">\n            <template #default>\n              <label :for=\"id\">\n                {{ option.label }}\n              </label>\n            </template>\n            <template\n              v-if=\"option.key === 'description'\"\n              #icon>\n              <div\n                class=\"centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5\">\n                <ScalarIcon\n                  icon=\"Markdown\"\n                  size=\"lg\" />\n              </div>\n            </template>\n          </DataTableInput>\n        </DataTableRow>\n      </DataTable>\n    </div>\n  </ViewLayoutSection>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,75 @@
+import ViewLayoutSection_default from "../../../../components/ViewLayout/ViewLayoutSection.vue.js";
+import DataTable_default from "../../../components/data-table/DataTable.vue.js";
+import DataTableInput_default from "../../../components/data-table/DataTableInput.vue.js";
+import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, openBlock, renderList, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
+import { ScalarIcon } from "@scalar/components";
+//#region src/v2/features/collection/components/Form.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var _hoisted_2 = { class: "flex flex-1 flex-col gap-1.5" };
+var _hoisted_3 = ["for"];
+var _hoisted_4 = { class: "centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5" };
+var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Form",
+	props: {
+		title: {},
+		options: {},
+		data: {},
+		onUpdate: { type: Function },
+		environment: {}
+	},
+	setup(__props) {
+		const id = useId();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ViewLayoutSection_default, { class: "last:rounded-b-lg" }, createSlots({
+				default: withCtx(() => [createElementVNode("div", _hoisted_2, [Object.keys(__props.data).length > 0 ? (openBlock(), createBlock(DataTable_default, {
+					key: 0,
+					class: "rounded-b-lg",
+					columns: [""]
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+						return openBlock(), createBlock(DataTableRow_default, { key: index }, {
+							default: withCtx(() => [createVNode(DataTableInput_default, {
+								id: unref(id),
+								class: "pr-9",
+								environment: __props.environment,
+								lineWrapping: option.lineWrapping ?? false,
+								modelValue: __props.data[option.key] ?? "",
+								placeholder: option.placeholder,
+								"onUpdate:modelValue": ($event) => __props.onUpdate(option.key, $event)
+							}, createSlots({
+								default: withCtx(() => [createElementVNode("label", { for: unref(id) }, toDisplayString(option.label), 9, _hoisted_3)]),
+								_: 2
+							}, [option.key === "description" ? {
+								name: "icon",
+								fn: withCtx(() => [createElementVNode("div", _hoisted_4, [createVNode(unref(ScalarIcon), {
+									icon: "Markdown",
+									size: "lg"
+								})])]),
+								key: "0"
+							} : void 0]), 1032, [
+								"id",
+								"environment",
+								"lineWrapping",
+								"modelValue",
+								"placeholder",
+								"onUpdate:modelValue"
+							])]),
+							_: 2
+						}, 1024);
+					}), 128))]),
+					_: 1
+				})) : createCommentVNode("", true)])]),
+				_: 2
+			}, [__props.title || _ctx.$slots.title ? {
+				name: "title",
+				fn: withCtx(() => [__props.title ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.title), 1)) : renderSlot(_ctx.$slots, "title", { key: 1 })]),
+				key: "0"
+			} : void 0]), 1024);
+		};
+	}
+});
+//#endregion
+export { Form_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Form.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.vue.script.js","names":["$slots"],"sources":["../../../../../src/v2/features/collection/components/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { useId } from 'vue'\n\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport DataTable from '@/v2/components/data-table/DataTable.vue'\nimport DataTableInput from '@/v2/components/data-table/DataTableInput.vue'\nimport DataTableRow from '@/v2/components/data-table/DataTableRow.vue'\n\ndefineProps<{\n  title?: string\n  options: {\n    key: string\n    label: string\n    placeholder: string\n    lineWrapping?: boolean\n  }[]\n  data: Record<string, any>\n  onUpdate: (key: string, value: string | number) => void\n  environment: XScalarEnvironment\n}>()\n\nconst id = useId()\n</script>\n<template>\n  <ViewLayoutSection class=\"last:rounded-b-lg\">\n    <template\n      v-if=\"title || $slots.title\"\n      #title>\n      <span v-if=\"title\">{{ title }}</span>\n      <slot\n        v-else\n        name=\"title\" />\n    </template>\n    <div class=\"flex flex-1 flex-col gap-1.5\">\n      <DataTable\n        v-if=\"Object.keys(data).length > 0\"\n        class=\"rounded-b-lg\"\n        :columns=\"['']\">\n        <DataTableRow\n          v-for=\"(option, index) in options\"\n          :key=\"index\">\n          <DataTableInput\n            :id=\"id\"\n            class=\"pr-9\"\n            :environment=\"environment\"\n            :lineWrapping=\"option.lineWrapping ?? false\"\n            :modelValue=\"data[option.key] ?? ''\"\n            :placeholder=\"option.placeholder\"\n            @update:modelValue=\"onUpdate(option.key, $event)\">\n            <template #default>\n              <label :for=\"id\">\n                {{ option.label }}\n              </label>\n            </template>\n            <template\n              v-if=\"option.key === 'description'\"\n              #icon>\n              <div\n                class=\"centered-y bg-b-2 flex-center absolute right-1 z-1 rounded px-1 py-0.5\">\n                <ScalarIcon\n                  icon=\"Markdown\"\n                  size=\"lg\" />\n              </div>\n            </template>\n          </DataTableInput>\n        </DataTableRow>\n      </DataTable>\n    </div>\n  </ViewLayoutSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,KAAK,OAAM;;uBAGf,YA4CoB,2BAAA,EA5CD,OAAM,qBAAmB,EAAA,YAAA;2BA2CpC,CAlCN,mBAkCM,OAlCN,YAkCM,CAhCI,OAAO,KAAK,QAAA,KAAI,CAAE,SAAM,KAAA,WAAA,EADhC,YAgCY,mBAAA;;KA9BV,OAAM;KACL,SAAS,CAAA,GAAI;;4BAEsB,EAAA,UAAA,KAAA,EADpC,mBA2Be,UAAA,MAAA,WA1Ba,QAAA,UAAlB,QAAQ,UAAK;0BADvB,YA2Be,sBAAA,EAzBZ,KAAK,OAAK,EAAA;8BAwBM,CAvBjB,YAuBiB,wBAAA;QAtBd,IAAI,MAAA,GAAE;QACP,OAAM;QACL,aAAa,QAAA;QACb,cAAc,OAAO,gBAAY;QACjC,YAAY,QAAA,KAAK,OAAO,QAAG;QAC3B,aAAa,OAAO;QACpB,wBAAiB,WAAE,QAAA,SAAS,OAAO,KAAK,OAAM;;QACpC,SAAO,cAGR,CAFR,mBAEQ,SAAA,EAFA,KAAK,MAAA,GAAE,EAAA,EAAA,gBACV,OAAO,MAAK,EAAA,GAAA,WAAA,CAAA,CAAA;;WAIX,OAAO,QAAG,gBAAA;cACf;0BAMK,CALN,mBAKM,OALN,YAKM,CAHJ,YAEc,MAAA,WAAA,EAAA;SADZ,MAAK;SACL,MAAK;;;;;;;;;;;;;;;;;OAnCX,QAAA,SAASA,KAAAA,OAAO,QAAA;UACrB;sBACoC,CAAzB,QAAA,SAAA,WAAA,EAAZ,mBAAqC,QAAA,YAAA,gBAAf,QAAA,MAAK,EAAA,EAAA,IAC3B,WAEiB,KAAA,QAAA,SAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/v2/features/collection/components/LabelInput.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+import LabelInput_vue_vue_type_script_setup_true_lang_default from "./LabelInput.vue.script.js";
+/* empty css                         */
+//#region src/v2/features/collection/components/LabelInput.vue
+var LabelInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(LabelInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2f09f15e"]]);
+//#endregion
+export { LabelInput_default as default };
+
+//# sourceMappingURL=LabelInput.vue.js.map

package/dist/v2/features/collection/components/LabelInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelInput.vue.js","names":[],"sources":["../../../../../src/v2/features/collection/components/LabelInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst { placeholder } = defineProps<{\n  placeholder?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'blur', value: string): void\n}>()\nconst model = defineModel<string>({ required: true })\n\nconst id = useId()\n\nconst handleBlur = () => {\n  emit('blur', model.value)\n}\n</script>\n<template>\n  <div class=\"group pointer-events-none flex flex-1 items-center gap-1\">\n    <label\n      class=\"pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0\"\n      :for=\"id\" />\n    <input\n      :id=\"id\"\n      v-model=\"model\"\n      class=\"text-c-1 group-hover-input pointer-events-auto relative -ml-0.5 h-8 w-full flex-1 rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25\"\n      :placeholder=\"placeholder ?? 'Untitled Document'\"\n      @blur=\"handleBlur\"\n      @keydown.enter=\"($event.target as HTMLInputElement)?.blur()\" />\n  </div>\n</template>\n<style scoped>\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,38 @@
+import { createElementBlock, createElementVNode, defineComponent, mergeModels, openBlock, unref, useId, useModel, vModelText, withDirectives, withKeys } from "vue";
+//#region src/v2/features/collection/components/LabelInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "group pointer-events-none flex flex-1 items-center gap-1" };
+var _hoisted_2 = ["for"];
+var _hoisted_3 = ["id", "placeholder"];
+var LabelInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "LabelInput",
+	props: /* @__PURE__ */ mergeModels({ placeholder: {} }, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["blur"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const id = useId();
+		const handleBlur = () => {
+			emit("blur", model.value);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("label", {
+				class: "pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0",
+				for: unref(id)
+			}, null, 8, _hoisted_2), withDirectives(createElementVNode("input", {
+				id: unref(id),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				class: "text-c-1 group-hover-input pointer-events-auto relative -ml-0.5 h-8 w-full flex-1 rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25",
+				placeholder: __props.placeholder ?? "Untitled Document",
+				onBlur: handleBlur,
+				onKeydown: _cache[1] || (_cache[1] = withKeys(($event) => $event.target?.blur(), ["enter"]))
+			}, null, 40, _hoisted_3), [[vModelText, model.value]])]);
+		};
+	}
+});
+//#endregion
+export { LabelInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=LabelInput.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabelInput.vue.script.js","names":[],"sources":["../../../../../src/v2/features/collection/components/LabelInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\nconst { placeholder } = defineProps<{\n  placeholder?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'blur', value: string): void\n}>()\nconst model = defineModel<string>({ required: true })\n\nconst id = useId()\n\nconst handleBlur = () => {\n  emit('blur', model.value)\n}\n</script>\n<template>\n  <div class=\"group pointer-events-none flex flex-1 items-center gap-1\">\n    <label\n      class=\"pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0\"\n      :for=\"id\" />\n    <input\n      :id=\"id\"\n      v-model=\"model\"\n      class=\"text-c-1 group-hover-input pointer-events-auto relative -ml-0.5 h-8 w-full flex-1 rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25\"\n      :placeholder=\"placeholder ?? 'Untitled Document'\"\n      @blur=\"handleBlur\"\n      @keydown.enter=\"($event.target as HTMLInputElement)?.blur()\" />\n  </div>\n</template>\n<style scoped>\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAOA,MAAM,OAAO;EAGb,MAAM,QAAQ,SAAmB,SAAA,aAAmB;EAEpD,MAAM,KAAK,OAAM;EAEjB,MAAM,mBAAmB;AACvB,QAAK,QAAQ,MAAM,MAAK;;;uBAIxB,mBAWM,OAXN,YAWM,CAVJ,mBAEc,SAAA;IADZ,OAAM;IACL,KAAK,MAAA,GAAE;2CACV,mBAMiE,SAAA;IAL9D,IAAI,MAAA,GAAE;uEACO,QAAA;IACd,OAAM;IACL,aAAa,QAAA,eAAW;IACxB,QAAM;IACN,WAAO,OAAA,OAAA,OAAA,KAAA,UAAA,WAAS,OAAO,QAA6B,MAAI,EAAA,CAAA,QAAA,CAAA;2CAJhD,MAAA,MAAK,CAAA,CAAA,CAAA,CAAA"}

package/dist/v2/features/collection/components/Overview.vue.d.ts

@@ -1,13 +1,13 @@
-declare const __VLS_export: import("vue").DefineComponent<(import("../../../../v2/features/app/helpers/routes").RouteProps & {
+declare const __VLS_export: import("vue").DefineComponent<(import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "document" | "operation";
     document: import("@scalar/workspace-store/schemas").WorkspaceDocument;
-}) | (import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}) | (import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "workspace";
     document: null;
-}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<(import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "document" | "operation";
     document: import("@scalar/workspace-store/schemas").WorkspaceDocument;
-}) | (import("../../../../v2/features/app/helpers/routes").RouteProps & {
+}) | (import("../../../../v2/features/app/helpers/routes.js").RouteProps & {
     collectionType: "workspace";
     document: null;
 })> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/v2/features/collection/components/Overview.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+import Overview_vue_vue_type_script_setup_true_lang_default from "./Overview.vue.script.js";
+/* empty css                       */
+//#region src/v2/features/collection/components/Overview.vue
+var Overview_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Overview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d486ea71"]]);
+//#endregion
+export { Overview_default as default };
+
+//# sourceMappingURL=Overview.vue.js.map

package/dist/v2/features/collection/components/Overview.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overview.vue.js","names":[],"sources":["../../../../../src/v2/features/collection/components/Overview.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarMarkdown,\n  ScalarModal,\n  ScalarToggle,\n  useModal,\n} from '@scalar/components'\nimport { isHttpMethod } from '@scalar/helpers/http/is-http-method'\nimport { ScalarIconPencil } from '@scalar/icons'\nimport {\n  computed,\n  nextTick,\n  ref,\n  useTemplateRef,\n  type ComputedRef,\n  type Ref,\n} from 'vue'\n\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\nimport { CodeInput } from '@/v2/components/code-input'\nimport type { CollectionProps } from '@/v2/features/app/helpers/routes'\nimport Section from '@/v2/features/settings/components/Section.vue'\n\nconst {\n  document,\n  eventBus,\n  layout,\n  collectionType,\n  path,\n  method,\n  documentSlug,\n} = defineProps<CollectionProps>()\n\nconst operationLabel = computed(() => {\n  if (!method || !path) {\n    return 'this operation'\n  }\n  const upperMethod = typeof method === 'string' ? method.toUpperCase() : method\n  return `${upperMethod} ${path}`\n})\n\nconst description: ComputedRef<string> = computed(() => {\n  if (collectionType === 'operation') {\n    if (!path || !method || !isHttpMethod(method)) {\n      return ''\n    }\n\n    return document?.paths?.[path]?.[method]?.description ?? ''\n  }\n\n  return document?.info?.description ?? ''\n})\n\nconst deprecated: ComputedRef<boolean> = computed(() => {\n  if (collectionType !== 'operation' || !path || !isHttpMethod(method)) {\n    return false\n  }\n\n  const operation = document?.paths?.[path]?.[method] as\n    | { deprecated?: boolean }\n    | undefined\n  return operation?.deprecated ?? false\n})\n\nconst mode: Ref<'edit' | 'preview'> = ref('preview')\n\nconst codeInputRef = useTemplateRef('codeInputRef')\n\n/**\n * Switch between edit and preview modes.\n * When switching to edit mode, focus the input after the DOM updates.\n */\nconst switchMode = async (newMode: 'edit' | 'preview'): Promise<void> => {\n  mode.value = newMode\n\n  if (newMode === 'edit') {\n    await nextTick()\n    codeInputRef.value?.focus()\n  }\n}\n\n/**\n * Updates the description of the collection\n * @param payload - The new description\n * @returns void\n */\nconst handleDescriptionUpdate = async (payload: string) => {\n  await switchMode('preview')\n\n  /** If the collection type is a document, update the description of the document */\n  if (collectionType === 'document') {\n    return eventBus.emit('document:update:info', { description: payload })\n  }\n\n  /** If the collection type is an operation, update the description of the operation */\n  if (collectionType === 'operation') {\n    if (!path || !method) {\n      console.error('Invalid path or method', { path, method })\n      return\n    }\n\n    return eventBus.emit('operation:update:meta', {\n      meta: { path, method },\n      payload: {\n        description: payload,\n      },\n    })\n  }\n\n  console.error('Invalid collection type', { collectionType })\n}\n\nconst handleDeprecatedChange = (value: boolean) => {\n  if (collectionType !== 'operation' || !path || !method) {\n    return\n  }\n\n  eventBus.emit('operation:update:meta', {\n    meta: { path, method },\n    payload: { deprecated: value },\n  })\n}\n\nconst deleteOperationModal = useModal()\n\nconst handleDeleteOperation = () => {\n  if (collectionType !== 'operation' || !path || !method || !documentSlug) {\n    return\n  }\n\n  eventBus.emit('operation:delete:operation', {\n    documentName: documentSlug,\n    meta: { path, method },\n  })\n  deleteOperationModal.hide()\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-8\">\n    <Section>\n      <template #title>Description</template>\n      <template #actions>\n        <ScalarButton\n          v-if=\"mode === 'preview'\"\n          class=\"text-c-2 hover:text-c-1 flex items-center gap-2\"\n          size=\"sm\"\n          type=\"button\"\n          variant=\"outlined\"\n          @click=\"switchMode('edit')\">\n          <ScalarIconPencil\n            size=\"sm\"\n            thickness=\"1.5\" />\n          <span>Edit</span>\n        </ScalarButton>\n      </template>\n      <div class=\"has-focus-visible:bg-b-1 group rounded-lg\">\n        <!-- Preview -->\n        <template v-if=\"mode === 'preview'\">\n          <template v-if=\"description.trim().length\">\n            <ScalarMarkdown\n              class=\"flex-1 rounded border border-transparent p-1.5 hover:border-(--scalar-background-3)\"\n              :value=\"description\"\n              withImages\n              @dblclick=\"switchMode('edit')\" />\n            <div\n              class=\"brightness-lifted bg-b-1 absolute inset-0 -z-1 hidden rounded group-hover:block group-has-focus-visible:hidden\" />\n          </template>\n\n          <div\n            v-else\n            class=\"text-c-3 flex items-center justify-center rounded-lg border p-4\">\n            <ScalarButton\n              class=\"hover:bg-b-2 hover:text-c-1 text-c-2 flex items-center gap-2\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click=\"switchMode('edit')\">\n              <ScalarIconPencil\n                size=\"sm\"\n                thickness=\"1.5\" />\n              <span>Write a description</span>\n            </ScalarButton>\n          </div>\n        </template>\n\n        <!-- Edit -->\n        <template v-else>\n          <CodeInput\n            ref=\"codeInputRef\"\n            class=\"border px-0.5 py-0\"\n            :environment=\"undefined\"\n            :layout=\"layout\"\n            :modelValue=\"description\"\n            @blur=\"handleDescriptionUpdate\" />\n        </template>\n      </div>\n    </Section>\n\n    <!-- Operation-only: Status and Danger Zone -->\n    <template v-if=\"collectionType === 'operation'\">\n      <Section>\n        <template #title>Status</template>\n        <div\n          class=\"rounded-lg border text-sm transition-colors\"\n          :class=\"\n            deprecated\n              ? 'border-(--scalar-color-alert) bg-(--scalar-background-alert)'\n              : 'bg-b-2 border-(--scalar-background-3)'\n          \">\n          <div class=\"flex items-center justify-between gap-4 rounded-lg p-4\">\n            <div class=\"min-w-0 flex-1\">\n              <h4\n                class=\"font-medium\"\n                :class=\"\n                  deprecated ? 'text-(--scalar-color-alert)' : 'text-c-1'\n                \">\n                Deprecated\n              </h4>\n              <p class=\"text-c-2 mt-1.5\">\n                Mark this operation as deprecated. Consumers SHOULD refrain from\n                using it.\n              </p>\n            </div>\n            <ScalarToggle\n              class=\"shrink-0\"\n              :modelValue=\"deprecated\"\n              @update:modelValue=\"handleDeprecatedChange\" />\n          </div>\n        </div>\n      </Section>\n\n      <Section>\n        <template #title>Danger Zone</template>\n        <div\n          class=\"bg-b-2 flex items-center justify-between gap-4 rounded-lg border border-(--scalar-background-3) p-4 text-sm\">\n          <div class=\"min-w-0 flex-1\">\n            <h4 class=\"text-c-1 font-medium\">Delete Operation</h4>\n            <p class=\"text-c-2 mt-1.5\">\n              Be careful, my friend. Once deleted, there is no way to recover\n              the operation.\n            </p>\n          </div>\n          <ScalarButton\n            class=\"shrink-0\"\n            size=\"sm\"\n            variant=\"danger\"\n            @click=\"deleteOperationModal.show()\">\n            Delete Operation\n          </ScalarButton>\n        </div>\n      </Section>\n    </template>\n  </div>\n\n  <!-- Delete Operation Modal -->\n  <ScalarModal\n    :size=\"'xxs'\"\n    :state=\"deleteOperationModal\"\n    :title=\"`Delete ${operationLabel}`\">\n    <DeleteSidebarListElement\n      :variableName=\"operationLabel\"\n      warningMessage=\"This action cannot be undone.\"\n      @close=\"deleteOperationModal.hide()\"\n      @delete=\"handleDeleteOperation\" />\n  </ScalarModal>\n</template>\n\n<style scoped>\n:deep(.cm-content) {\n  min-height: fit-content;\n}\n:deep(.cm-scroller) {\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n</style>\n"],"mappings":""}