@scalar/api-client 3.6.1 → 3.8.0

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesAddModal.vue.script.js

@@ -1,67 +1,113 @@
 import CommandActionForm_default from "../../../features/command-palette/components/CommandActionForm.vue.js";
 import CommandActionInput_default from "../../../features/command-palette/components/CommandActionInput.vue.js";
-import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, unref, watch, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
 import { ScalarModal } from "@scalar/components";
-import { useToasts } from "@scalar/use-toasts";
 //#region src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesAddModal.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex h-8 items-start gap-2 text-sm" };
-var _hoisted_2 = { class: "flex h-8 items-start gap-2 text-sm" };
+var _hoisted_1 = { class: "flex min-h-8 items-start gap-2 text-sm" };
+var _hoisted_2 = { class: "flex min-h-8 items-start gap-2 text-sm" };
+var _hoisted_3 = {
+	key: 0,
+	class: "text-red text-xs",
+	role: "alert"
+};
 var OAuthScopesAddModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "OAuthScopesAddModal",
 	props: {
 		state: {},
-		scopes: {}
+		scopes: {},
+		scope: { default: null }
 	},
 	emits: ["cancel", "submit"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const isEditMode = computed(() => __props.scope !== null);
+		const title = computed(() => isEditMode.value ? "Edit Scope" : "Add Scope");
+		const submitLabel = computed(() => isEditMode.value ? "Save" : "Add Scope");
 		const scopeData = ref({
 			name: "",
 			description: ""
 		});
-		const { toast } = useToasts();
+		/**
+		* Tracks whether the user has interacted with the name field so we can defer the
+		* "name is required" hint until after the first edit, rather than on initial render.
+		*/
+		const hasTouchedName = ref(false);
+		watch(() => scopeData.value.name, () => {
+			hasTouchedName.value = true;
+		});
+		const trimmedName = computed(() => scopeData.value.name.trim());
+		/**
+		* Whether the chosen name collides with an existing scope on the flow.
+		* In edit mode we allow keeping the original name unchanged.
+		*/
+		const isDuplicateName = computed(() => {
+			if (!trimmedName.value) return false;
+			if (isEditMode.value && trimmedName.value === __props.scope?.name) return false;
+			return __props.scopes.includes(trimmedName.value);
+		});
+		/** Human readable validation message rendered inline in the modal */
+		const validationError = computed(() => {
+			if (isDuplicateName.value) return `A scope named "${trimmedName.value}" already exists.`;
+			if (hasTouchedName.value && !trimmedName.value) return "Scope name is required.";
+			return null;
+		});
+		const isSubmitDisabled = computed(() => !trimmedName.value || isDuplicateName.value);
 		const handleSubmit = () => {
-			if (!scopeData.value.name) {
-				toast("Please fill in the name before adding a scope.", "error");
-				return;
-			}
-			emit("submit", scopeData.value);
+			if (isSubmitDisabled.value) return;
+			emit("submit", {
+				name: trimmedName.value,
+				description: scopeData.value.description,
+				...isEditMode.value && __props.scope ? { oldName: __props.scope.name } : {}
+			});
 			__props.state.hide();
 		};
 		watch(() => __props.state.open, (isOpen) => {
-			if (isOpen) scopeData.value = {
+			if (!isOpen) return;
+			scopeData.value = __props.scope ? {
+				name: __props.scope.name,
+				description: __props.scope.description
+			} : {
 				name: "",
 				description: ""
 			};
+			nextTick(() => {
+				hasTouchedName.value = false;
+			});
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ScalarModal), {
+				bodyClass: "overflow-y-auto",
 				size: "xs",
 				state: __props.state,
-				title: "Add Scope"
+				title: title.value
 			}, {
 				default: withCtx(() => [createVNode(unref(CommandActionForm_default), {
-					disabled: !scopeData.value.name || __props.scopes.includes(scopeData.value.name),
+					disabled: isSubmitDisabled.value,
 					onCancel: _cache[2] || (_cache[2] = ($event) => emit("cancel")),
 					onSubmit: handleSubmit
 				}, {
-					submit: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("Add Scope", -1)])]),
-					default: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[3] || (_cache[3] = createTextVNode(" Name: ", -1)), createVNode(unref(CommandActionInput_default), {
-						modelValue: scopeData.value.name,
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => scopeData.value.name = $event),
-						autofocus: "",
-						class: "!p-0",
-						placeholder: "read:user"
-					}, null, 8, ["modelValue"])]), createElementVNode("div", _hoisted_2, [_cache[4] || (_cache[4] = createTextVNode(" Description: ", -1)), createVNode(unref(CommandActionInput_default), {
-						modelValue: scopeData.value.description,
-						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => scopeData.value.description = $event),
-						class: "!p-0",
-						placeholder: "Read user data"
-					}, null, 8, ["modelValue"])])]),
+					submit: withCtx(() => [createTextVNode(toDisplayString(submitLabel.value), 1)]),
+					default: withCtx(() => [
+						createElementVNode("div", _hoisted_1, [_cache[3] || (_cache[3] = createTextVNode(" Name: ", -1)), createVNode(unref(CommandActionInput_default), {
+							modelValue: scopeData.value.name,
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => scopeData.value.name = $event),
+							autofocus: "",
+							class: "field-sizing-content !p-0",
+							placeholder: "read:user"
+						}, null, 8, ["modelValue"])]),
+						createElementVNode("div", _hoisted_2, [_cache[4] || (_cache[4] = createTextVNode(" Description: ", -1)), createVNode(unref(CommandActionInput_default), {
+							modelValue: scopeData.value.description,
+							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => scopeData.value.description = $event),
+							autofocus: false,
+							class: "field-sizing-content !p-0",
+							placeholder: "Read user data"
+						}, null, 8, ["modelValue"])]),
+						validationError.value ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(validationError.value), 1)) : createCommentVNode("", true)
+					]),
 					_: 1
 				}, 8, ["disabled"])]),
 				_: 1
-			}, 8, ["state"]);
+			}, 8, ["state", "title"]);
 		};
 	}
 });

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesAddModal.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthScopesAddModal.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesAddModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\nimport { useToasts } from '@scalar/use-toasts'\nimport { ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\n\nconst { state, scopes } = defineProps<{\n  state: ModalState\n  scopes: string[]\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    scopeData: {\n      name: string\n      description: string\n    },\n  ): void\n}>()\n\nconst scopeData = ref({\n  name: '',\n  description: '',\n})\n\nconst { toast } = useToasts()\n\nconst handleSubmit = () => {\n  if (!scopeData.value.name) {\n    toast('Please fill in the name before adding a scope.', 'error')\n    return\n  }\n\n  emit('submit', scopeData.value)\n  state.hide()\n}\n\n// Reset scope data\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (isOpen) {\n      scopeData.value = {\n        name: '',\n        description: '',\n      }\n    }\n  },\n)\n</script>\n\n<template>\n  <ScalarModal\n    size=\"xs\"\n    :state=\"state\"\n    title=\"Add Scope\">\n    <CommandActionForm\n      :disabled=\"!scopeData.name || scopes.includes(scopeData.name)\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <!-- Name -->\n      <div class=\"flex h-8 items-start gap-2 text-sm\">\n        Name:\n        <CommandActionInput\n          v-model=\"scopeData.name\"\n          autofocus\n          class=\"!p-0\"\n          placeholder=\"read:user\" />\n      </div>\n\n      <!-- Description -->\n      <div class=\"flex h-8 items-start gap-2 text-sm\">\n        Description:\n        <CommandActionInput\n          v-model=\"scopeData.description\"\n          class=\"!p-0\"\n          placeholder=\"Read user data\" />\n      </div>\n\n      <template #submit>Add Scope</template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n\n<style scoped>\n.form-group {\n  margin-bottom: 1rem;\n}\n.modal-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 1rem;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAeA,MAAM,OAAO;EAWb,MAAM,YAAY,IAAI;GACpB,MAAM;GACN,aAAa;GACd,CAAA;EAED,MAAM,EAAE,UAAU,WAAU;EAE5B,MAAM,qBAAqB;AACzB,OAAI,CAAC,UAAU,MAAM,MAAM;AACzB,UAAM,kDAAkD,QAAO;AAC/D;;AAGF,QAAK,UAAU,UAAU,MAAK;AAC9B,WAAA,MAAM,MAAK;;AAIb,cACQ,QAAA,MAAM,OACX,WAAW;AACV,OAAI,OACF,WAAU,QAAQ;IAChB,MAAM;IACN,aAAa;IACf;IAGN;;uBAIE,YA6Bc,MAAA,YAAA,EAAA;IA5BZ,MAAK;IACJ,OAAO,QAAA;IACR,OAAM;;2BAyBc,CAxBpB,YAwBoB,MAAA,0BAAA,EAAA;KAvBjB,UAAQ,CAAG,UAAA,MAAU,QAAQ,QAAA,OAAO,SAAS,UAAA,MAAU,KAAI;KAC3D,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;KACZ,UAAQ;;KAoBE,QAAM,cAAU,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAT,aAAS,GAAA,CAAA,EAAA,CAAA;4BAXrB,CAPN,mBAOM,OAPN,YAOM,CAAA,OAAA,OAAA,OAAA,KAAA,gBAP0C,WAE9C,GAAA,GAAA,YAI4B,MAAA,2BAAA,EAAA;kBAHjB,UAAA,MAAU;6EAAV,MAAU,OAAI;MACvB,WAAA;MACA,OAAM;MACN,aAAY;oCAIhB,mBAMM,OANN,YAMM,CAAA,OAAA,OAAA,OAAA,KAAA,gBAN0C,kBAE9C,GAAA,GAAA,YAGiC,MAAA,2BAAA,EAAA;kBAFtB,UAAA,MAAU;6EAAV,MAAU,cAAW;MAC9B,OAAM;MACN,aAAY"}
+{"version":3,"file":"OAuthScopesAddModal.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesAddModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\n\nconst {\n  state,\n  scopes,\n  scope = null,\n} = defineProps<{\n  state: ModalState\n  /** Existing scope names on the flow, used to prevent duplicates */\n  scopes: string[]\n  /**\n   * When provided, the modal switches to \"edit\" mode and is prefilled with this scope.\n   * The original name is retained so the consumer can rename it.\n   */\n  scope?: { name: string; description: string } | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    scopeData: {\n      name: string\n      description: string\n      /** The original name on the flow, only set when editing an existing scope */\n      oldName?: string\n    },\n  ): void\n}>()\n\nconst isEditMode = computed(() => scope !== null)\nconst title = computed(() => (isEditMode.value ? 'Edit Scope' : 'Add Scope'))\nconst submitLabel = computed(() => (isEditMode.value ? 'Save' : 'Add Scope'))\n\nconst scopeData = ref({\n  name: '',\n  description: '',\n})\n\n/**\n * Tracks whether the user has interacted with the name field so we can defer the\n * \"name is required\" hint until after the first edit, rather than on initial render.\n */\nconst hasTouchedName = ref(false)\n\nwatch(\n  () => scopeData.value.name,\n  () => {\n    hasTouchedName.value = true\n  },\n)\n\nconst trimmedName = computed(() => scopeData.value.name.trim())\n\n/**\n * Whether the chosen name collides with an existing scope on the flow.\n * In edit mode we allow keeping the original name unchanged.\n */\nconst isDuplicateName = computed(() => {\n  if (!trimmedName.value) {\n    return false\n  }\n  if (isEditMode.value && trimmedName.value === scope?.name) {\n    return false\n  }\n  return scopes.includes(trimmedName.value)\n})\n\n/** Human readable validation message rendered inline in the modal */\nconst validationError = computed<string | null>(() => {\n  if (isDuplicateName.value) {\n    return `A scope named \"${trimmedName.value}\" already exists.`\n  }\n  if (hasTouchedName.value && !trimmedName.value) {\n    return 'Scope name is required.'\n  }\n  return null\n})\n\nconst isSubmitDisabled = computed(\n  () => !trimmedName.value || isDuplicateName.value,\n)\n\nconst handleSubmit = () => {\n  if (isSubmitDisabled.value) {\n    return\n  }\n\n  emit('submit', {\n    name: trimmedName.value,\n    description: scopeData.value.description,\n    ...(isEditMode.value && scope ? { oldName: scope.name } : {}),\n  })\n  state.hide()\n}\n\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (!isOpen) {\n      return\n    }\n\n    scopeData.value = scope\n      ? { name: scope.name, description: scope.description }\n      : { name: '', description: '' }\n    // Clearing `name` schedules the `scopeData.name` watcher, which sets\n    // `hasTouchedName` back to true in the same flush. Defer the reset so it\n    // runs after that watcher and reopening add mode does not show a false\n    // \"Scope name is required\" error.\n    void nextTick(() => {\n      hasTouchedName.value = false\n    })\n  },\n)\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"overflow-y-auto\"\n    size=\"xs\"\n    :state=\"state\"\n    :title=\"title\">\n    <CommandActionForm\n      :disabled=\"isSubmitDisabled\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <!-- Name -->\n      <div class=\"flex min-h-8 items-start gap-2 text-sm\">\n        Name:\n        <CommandActionInput\n          v-model=\"scopeData.name\"\n          autofocus\n          class=\"field-sizing-content !p-0\"\n          placeholder=\"read:user\" />\n      </div>\n\n      <!-- Description -->\n      <div class=\"flex min-h-8 items-start gap-2 text-sm\">\n        Description:\n        <CommandActionInput\n          v-model=\"scopeData.description\"\n          :autofocus=\"false\"\n          class=\"field-sizing-content !p-0\"\n          placeholder=\"Read user data\" />\n      </div>\n\n      <!-- Inline validation error -->\n      <div\n        v-if=\"validationError\"\n        class=\"text-red text-xs\"\n        role=\"alert\">\n        {{ validationError }}\n      </div>\n\n      <template #submit>{{ submitLabel }}</template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,OAAO;EAab,MAAM,aAAa,eAAe,QAAA,UAAU,KAAI;EAChD,MAAM,QAAQ,eAAgB,WAAW,QAAQ,eAAe,YAAY;EAC5E,MAAM,cAAc,eAAgB,WAAW,QAAQ,SAAS,YAAY;EAE5E,MAAM,YAAY,IAAI;GACpB,MAAM;GACN,aAAa;GACd,CAAA;;;;;EAMD,MAAM,iBAAiB,IAAI,MAAK;AAEhC,cACQ,UAAU,MAAM,YAChB;AACJ,kBAAe,QAAQ;IAE3B;EAEA,MAAM,cAAc,eAAe,UAAU,MAAM,KAAK,MAAM,CAAA;;;;;EAM9D,MAAM,kBAAkB,eAAe;AACrC,OAAI,CAAC,YAAY,MACf,QAAO;AAET,OAAI,WAAW,SAAS,YAAY,UAAU,QAAA,OAAO,KACnD,QAAO;AAET,UAAO,QAAA,OAAO,SAAS,YAAY,MAAK;IACzC;;EAGD,MAAM,kBAAkB,eAA8B;AACpD,OAAI,gBAAgB,MAClB,QAAO,kBAAkB,YAAY,MAAM;AAE7C,OAAI,eAAe,SAAS,CAAC,YAAY,MACvC,QAAO;AAET,UAAO;IACR;EAED,MAAM,mBAAmB,eACjB,CAAC,YAAY,SAAS,gBAAgB,MAC9C;EAEA,MAAM,qBAAqB;AACzB,OAAI,iBAAiB,MACnB;AAGF,QAAK,UAAU;IACb,MAAM,YAAY;IAClB,aAAa,UAAU,MAAM;IAC7B,GAAI,WAAW,SAAS,QAAA,QAAQ,EAAE,SAAS,QAAA,MAAM,MAAM,GAAG,EAAE;IAC7D,CAAA;AACD,WAAA,MAAM,MAAK;;AAGb,cACQ,QAAA,MAAM,OACX,WAAW;AACV,OAAI,CAAC,OACH;AAGF,aAAU,QAAQ,QAAA,QACd;IAAE,MAAM,QAAA,MAAM;IAAM,aAAa,QAAA,MAAM;IAAY,GACnD;IAAE,MAAM;IAAI,aAAa;IAAG;AAK3B,kBAAe;AAClB,mBAAe,QAAQ;KACxB;IAEL;;uBAIE,YAuCc,MAAA,YAAA,EAAA;IAtCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAO,MAAA;;2BAkCY,CAjCpB,YAiCoB,MAAA,0BAAA,EAAA;KAhCjB,UAAU,iBAAA;KACV,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;KACZ,UAAQ;;KA6BE,QAAM,cAAkB,CAAA,gBAAA,gBAAd,YAAA,MAAW,EAAA,EAAA,CAAA,CAAA;4BApB1B;MAPN,mBAOM,OAPN,YAOM,CAAA,OAAA,OAAA,OAAA,KAAA,gBAP8C,WAElD,GAAA,GAAA,YAI4B,MAAA,2BAAA,EAAA;mBAHjB,UAAA,MAAU;8EAAV,MAAU,OAAI;OACvB,WAAA;OACA,OAAM;OACN,aAAY;;MAIhB,mBAOM,OAPN,YAOM,CAAA,OAAA,OAAA,OAAA,KAAA,gBAP8C,kBAElD,GAAA,GAAA,YAIiC,MAAA,2BAAA,EAAA;mBAHtB,UAAA,MAAU;8EAAV,MAAU,cAAW;OAC7B,WAAW;OACZ,OAAM;OACN,aAAY;;MAKR,gBAAA,SAAA,WAAA,EADR,mBAKM,OALN,YAKM,gBADD,gBAAA,MAAe,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue.d.ts

@@ -5,29 +5,39 @@ type __VLS_Props = {
     selectedScopes: string[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:selectedScopes": (payload: Pick<{
-        id: string[];
-        name: string;
+    "update:selectedScopes": (payload: {
         scopes: string[];
-        newScopePayload?: {
-            name: string;
-            description: string;
-            flowType: keyof OAuthFlowsObject;
-        };
-        meta: import("@scalar/workspace-store/events").AuthMeta;
-    }, "scopes" | "newScopePayload">) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:selectedScopes"?: ((payload: Pick<{
-        id: string[];
+    }) => any;
+    "upsert:scope": (payload: Omit<{
+        name: string;
+        flowType: keyof OAuthFlowsObject;
+        scope: string;
+        description: string;
+        oldScope?: string;
+        enable?: boolean;
+    }, "name">) => any;
+    "delete:scope": (payload: Omit<{
         name: string;
+        flowType: keyof OAuthFlowsObject;
+        scope: string;
+    }, "name">) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectedScopes"?: ((payload: {
         scopes: string[];
-        newScopePayload?: {
-            name: string;
-            description: string;
-            flowType: keyof OAuthFlowsObject;
-        };
-        meta: import("@scalar/workspace-store/events").AuthMeta;
-    }, "scopes" | "newScopePayload">) => any) | undefined;
+    }) => any) | undefined;
+    "onUpsert:scope"?: ((payload: Omit<{
+        name: string;
+        flowType: keyof OAuthFlowsObject;
+        scope: string;
+        description: string;
+        oldScope?: string;
+        enable?: boolean;
+    }, "name">) => any) | undefined;
+    "onDelete:scope"?: ((payload: Omit<{
+        name: string;
+        flowType: keyof OAuthFlowsObject;
+        scope: string;
+    }, "name">) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthScopesInput.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"names":[],"mappings":"AAyNA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EACjB,MAAM,8DAA8D,CAAA;AAWrE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,gBAAgB,CAAA;IAChC,IAAI,EAAE,SAAS,CAAA;IACf,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB,CAAC;AA0dF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"OAuthScopesInput.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"names":[],"mappings":"AAkXA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EACjB,MAAM,8DAA8D,CAAA;AAWrE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,gBAAgB,CAAA;IAChC,IAAI,EAAE,SAAS,CAAA;IACf,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB,CAAC;AA0sBF,QAAA,MAAM,YAAY;;gBArsBgC,MAAM,EAAE;;;;;;;;;;;;;;;;;gBAAR,MAAM,EAAE;;;;;;;;;;;;;;;kFAwsBxD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthScopesInput.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarSearchInput,\n  useModal,\n} from '@scalar/components'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport type {\n  OAuthFlow,\n  OAuthFlowsObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref } from 'vue'\n\nimport {\n  DataTableCell,\n  DataTableCheckbox,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nimport OAuthScopesAddModal from './OAuthScopesAddModal.vue'\n\nconst { selectedScopes, flow, flowType } = defineProps<{\n  flowType: keyof OAuthFlowsObject\n  flow: OAuthFlow\n  selectedScopes: string[]\n}>()\n\nconst emits = defineEmits<{\n  (\n    e: 'update:selectedScopes',\n    payload: Pick<\n      ApiReferenceEvents['auth:update:selected-scopes'],\n      'scopes' | 'newScopePayload'\n    >,\n  ): void\n}>()\n\nconst searchQuery = ref('')\n\n/** List of all available scopes */\nconst scopes = computed(() =>\n  Object.entries(flow?.scopes ?? {}).map(([key, val]) => ({\n    id: key,\n    label: key,\n    description: val,\n  })),\n)\n\nconst filteredScopes = computed(() => {\n  if (!searchQuery.value) {\n    return scopes.value\n  }\n\n  const regex = new RegExp(\n    searchQuery.value\n      .split('')\n      .map((c) => c.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'))\n      .join('.*'),\n    'i',\n  )\n\n  return scopes.value.filter(({ label, description }) =>\n    regex.test(`${label} ${description}`),\n  )\n})\n\nconst allScopesSelected = computed(\n  () => selectedScopes.length === Object.keys(flow?.scopes ?? {}).length,\n)\n\nfunction setScope(scopeKey: string, checked: boolean) {\n  if (checked) {\n    // Select the scope\n    return emits('update:selectedScopes', {\n      scopes: Array.from(new Set([...selectedScopes, scopeKey])),\n    })\n  }\n\n  // Deselect the scope\n  emits('update:selectedScopes', {\n    scopes: selectedScopes.filter((scope) => scope !== scopeKey),\n  })\n}\n\n/** Select all scopes */\nconst selectAllScopes = () =>\n  emits('update:selectedScopes', { scopes: Object.keys(flow?.scopes ?? {}) })\n\n/** Deselect all scopes */\nconst deselectAllScopes = () => emits('update:selectedScopes', { scopes: [] })\n\nconst addNewScopeModal = useModal()\n</script>\n\n<template>\n  <DataTableCell class=\"h-auto !max-h-[initial] min-h-8 items-center\">\n    <div class=\"flex h-fit w-full\">\n      <div class=\"text-c-1 h-full items-center\"></div>\n      <Disclosure\n        as=\"div\"\n        class=\"bl flex w-full flex-col\">\n        <DisclosureButton\n          v-slot=\"{ open }\"\n          :class=\"[\n            'group/scopes-accordion hover:text-c-1 flex h-auto min-h-8 cursor-pointer items-center gap-1.5 pr-2.25 pl-3 text-left',\n            (selectedScopes.length || 0) > 0 ? 'text-c-1' : 'text-c-3',\n          ]\">\n          <div class=\"flex-1\">\n            Scopes Selected\n            {{ selectedScopes.length || 0 }} /\n            {{ Object.keys(flow?.scopes ?? {}).length || 0 }}\n          </div>\n          <div class=\"flex items-center gap-1.75\">\n            <!-- Add new scope -->\n            <ScalarButton\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"addNewScopeModal.show()\">\n              Add Scope\n            </ScalarButton>\n\n            <!-- Deselect All -->\n            <ScalarButton\n              v-if=\"allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"deselectAllScopes\">\n              Deselect All\n            </ScalarButton>\n\n            <!-- Select All -->\n            <ScalarButton\n              v-if=\"!allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"selectAllScopes\">\n              Select All\n            </ScalarButton>\n\n            <ScalarIcon\n              class=\"text-c-3 group-hover/scopes-accordion:text-c-2\"\n              :icon=\"open ? 'ChevronDown' : 'ChevronRight'\"\n              size=\"md\" />\n          </div>\n        </DisclosureButton>\n        <!-- Scopes List -->\n        <DisclosurePanel as=\"template\">\n          <div>\n            <ScalarSearchInput\n              v-model=\"searchQuery\"\n              class=\"flex items-center text-xs\" />\n            <table\n              class=\"grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-scroll\"\n              :style=\"{ gridTemplateColumns: '1fr auto' }\">\n              <DataTableRow\n                v-for=\"{ id, label, description } in filteredScopes\"\n                :key=\"id\"\n                class=\"text-c-2\"\n                @click=\"setScope(id, !selectedScopes.includes(id))\">\n                <DataTableCell\n                  class=\"no-scrollbar hover:text-c-1 box-border flex !max-h-[initial] w-full cursor-pointer items-center gap-1 overflow-x-scroll px-3 py-1.5 text-nowrap\">\n                  <span class=\"font-code text-xs\">{{ label }}</span>\n                  <span>&ndash;</span>\n                  <span v-if=\"description\">\n                    {{ description }}\n                  </span>\n                </DataTableCell>\n                <DataTableCheckbox\n                  :modelValue=\"selectedScopes.includes(id)\"\n                  @update:modelValue=\"setScope(id, $event)\" />\n              </DataTableRow>\n            </table>\n          </div>\n        </DisclosurePanel>\n      </Disclosure>\n    </div>\n\n    <!-- Add new scope modal -->\n    <OAuthScopesAddModal\n      :scopes=\"Object.keys(flow.scopes ?? {})\"\n      :state=\"addNewScopeModal\"\n      @submit=\"\n        (payload) =>\n          emits('update:selectedScopes', {\n            scopes: selectedScopes,\n            newScopePayload: { ...payload, flowType },\n          })\n      \" />\n  </DataTableCell>\n</template>\n\n<style>\n.no-scrollbar::-webkit-scrollbar {\n  display: none;\n}\n\n.no-scrollbar {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"OAuthScopesInput.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarIconButton,\n  ScalarSearchInput,\n  useModal,\n} from '@scalar/components'\nimport { ScalarIconPencilSimple, ScalarIconTrash } from '@scalar/icons'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport type {\n  OAuthFlow,\n  OAuthFlowsObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport {\n  DataTableCell,\n  DataTableCheckbox,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nimport OAuthScopesAddModal from './OAuthScopesAddModal.vue'\n\nconst { selectedScopes, flow, flowType } = defineProps<{\n  flowType: keyof OAuthFlowsObject\n  flow: OAuthFlow\n  selectedScopes: string[]\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:selectedScopes', payload: { scopes: string[] }): void\n  (\n    e: 'upsert:scope',\n    payload: Omit<ApiReferenceEvents['auth:upsert:scopes'], 'name'>,\n  ): void\n  (\n    e: 'delete:scope',\n    payload: Omit<ApiReferenceEvents['auth:delete:scopes'], 'name'>,\n  ): void\n}>()\n\nconst searchQuery = ref('')\n\n/**\n * The scope currently being edited, used to switch the shared modal into edit mode.\n * Null means the modal is in \"add\" mode.\n */\nconst editingScope = ref<{ name: string; description: string } | null>(null)\n\n/** List of all available scopes */\nconst scopes = computed(() =>\n  Object.entries(flow?.scopes ?? {}).map(([key, val]) => ({\n    id: key,\n    label: key,\n    description: val,\n  })),\n)\n\nconst scopeCount = computed(() => Object.keys(flow?.scopes ?? {}).length)\n\n/** Search is only useful once the list is long enough to scan */\nconst showScopeSearch = computed(() => scopeCount.value >= 10)\n\nconst filteredScopes = computed(() => {\n  const query = showScopeSearch.value ? searchQuery.value : ''\n  if (!query) {\n    return scopes.value\n  }\n\n  const regex = new RegExp(\n    query\n      .split('')\n      .map((c) => c.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'))\n      .join('.*'),\n    'i',\n  )\n\n  return scopes.value.filter(({ label, description }) =>\n    regex.test(`${label} ${description}`),\n  )\n})\n\nconst hasScopes = computed(() => Object.keys(flow?.scopes ?? {}).length > 0)\n\nconst allScopesSelected = computed(\n  () => selectedScopes.length === Object.keys(flow?.scopes ?? {}).length,\n)\n\nconst setScope = (scopeKey: string, checked: boolean) => {\n  if (checked) {\n    // Select the scope\n    return emits('update:selectedScopes', {\n      scopes: Array.from(new Set([...selectedScopes, scopeKey])),\n    })\n  }\n\n  // Deselect the scope\n  emits('update:selectedScopes', {\n    scopes: selectedScopes.filter((scope) => scope !== scopeKey),\n  })\n}\n\n/** Select all scopes */\nconst selectAllScopes = () =>\n  emits('update:selectedScopes', { scopes: Object.keys(flow?.scopes ?? {}) })\n\n/** Deselect all scopes */\nconst deselectAllScopes = () => emits('update:selectedScopes', { scopes: [] })\n\nconst scopeFormModal = useModal()\n\n/**\n * Forces the Disclosure to remount with `defaultOpen` set so the panel auto-expands\n * the moment a brand-new scope is added. Bumping this counter is paired with toggling\n * `expandOnNextMount` so the remount opens the panel, then reverts to the default\n * closed-on-mount behavior for any future unrelated remounts (e.g. collapse on empty).\n *\n * The Disclosure `:key` is only this counter — not a separate `hasScopes` segment — so\n * adding the first scope does not remount twice (empty prefix → with-scopes prefix),\n * which would reopen with `defaultOpen=false` and collapse the panel right when rows appear.\n */\nconst remountKey = ref(0)\nconst expandOnNextMount = ref(false)\n\nwatch(hasScopes, (has, had) => {\n  if (had && !has) {\n    expandOnNextMount.value = false\n    remountKey.value += 1\n  }\n})\n\n/** Open the modal in \"add new scope\" mode */\nconst openAddScopeModal = () => {\n  editingScope.value = null\n  scopeFormModal.show()\n}\n\n/** Open the modal in \"edit scope\" mode prefilled with the chosen row */\nconst openEditScopeModal = (scope: { id: string; description: string }) => {\n  editingScope.value = {\n    name: scope.id,\n    description: scope.description ?? '',\n  }\n  scopeFormModal.show()\n}\n\n/**\n * Submit handler shared by Add Scope and Edit Scope. For renames, the `upsertScope` mutator on\n * the workspace store rewrites the selection state in place, so the component does not need to\n * emit a follow-up `update:selectedScopes`.\n *\n * When adding a brand-new scope (no `oldName`), the payload sets `enable: true` so the\n * `upsertScope` mutator also adds the new scope to any selection requirement that references\n * this scheme. The Disclosure is then remounted with `defaultOpen=true` so the user\n * immediately sees (and sees selected) the scope they just added.\n */\nconst handleScopeFormSubmit = async (payload: {\n  name: string\n  description: string\n  oldName?: string\n}) => {\n  const isAdd = !payload.oldName\n\n  emits('upsert:scope', {\n    scope: payload.name,\n    description: payload.description,\n    flowType,\n    ...(payload.oldName ? { oldScope: payload.oldName } : {}),\n    ...(isAdd ? { enable: true } : {}),\n  })\n\n  if (!isAdd) {\n    return\n  }\n\n  expandOnNextMount.value = true\n  remountKey.value += 1\n  // Reset after the remount so subsequent unrelated remounts (e.g. when the last\n  // scope is deleted) still default to a closed panel.\n  await nextTick()\n  expandOnNextMount.value = false\n}\n\n/**\n * Remove the scope from the flow. Selection cleanup (dropping the deleted key from any\n * currently-selected scopes) is handled by the `deleteScope` mutator on the workspace store,\n * so the component does not need to emit a follow-up `update:selectedScopes` here.\n */\nconst handleDeleteScope = (scopeKey: string) => {\n  emits('delete:scope', { scope: scopeKey, flowType })\n}\n</script>\n\n<template>\n  <DataTableCell class=\"h-auto !max-h-[initial] min-h-8 items-center\">\n    <div class=\"flex h-fit w-full\">\n      <div class=\"text-c-1 h-full items-center\"></div>\n      <Disclosure\n        :key=\"remountKey\"\n        as=\"div\"\n        class=\"bl flex w-full flex-col\"\n        :defaultOpen=\"expandOnNextMount\">\n        <!--\n          Keep Add Scope (and other actions) outside the summary DisclosureButton.\n          When there are no scopes the summary control is disabled; a native disabled\n          button blocks pointer events for all descendants, which would make Add Scope unusable.\n        -->\n        <div\n          class=\"group/scopes-accordion flex h-auto min-h-8 items-center gap-1.5 pr-2.25 pl-3 text-left\">\n          <DisclosureButton\n            :class=\"[\n              'min-w-0 flex-1 text-left',\n              hasScopes ? 'hover:text-c-1 cursor-pointer' : 'cursor-default',\n              (selectedScopes.length || 0) > 0 ? 'text-c-1' : 'text-c-3',\n            ]\"\n            :disabled=\"!hasScopes\">\n            <template v-if=\"hasScopes\">\n              Scopes Selected\n              {{ selectedScopes.length || 0 }} /\n              {{ Object.keys(flow?.scopes ?? {}).length || 0 }}\n            </template>\n            <template v-else> No Scopes Defined </template>\n          </DisclosureButton>\n\n          <div class=\"flex shrink-0 items-center gap-1.75\">\n            <!-- Add new scope -->\n            <ScalarButton\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"openAddScopeModal\">\n              Add Scope\n            </ScalarButton>\n\n            <!-- Deselect All -->\n            <ScalarButton\n              v-if=\"hasScopes && allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"deselectAllScopes\">\n              Deselect All\n            </ScalarButton>\n\n            <!-- Select All -->\n            <ScalarButton\n              v-if=\"hasScopes && !allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"selectAllScopes\">\n              Select All\n            </ScalarButton>\n\n            <DisclosureButton\n              v-if=\"hasScopes\"\n              v-slot=\"{ open }\"\n              class=\"text-c-3 hover:text-c-2 -m-0.5 flex shrink-0 items-center justify-center rounded p-0.5 focus-visible:outline-offset-2\">\n              <ScalarIcon\n                class=\"group-hover/scopes-accordion:text-c-2\"\n                :icon=\"open ? 'ChevronDown' : 'ChevronRight'\"\n                size=\"md\" />\n            </DisclosureButton>\n          </div>\n        </div>\n        <!-- Scopes List -->\n        <DisclosurePanel as=\"template\">\n          <div>\n            <ScalarSearchInput\n              v-if=\"showScopeSearch\"\n              v-model=\"searchQuery\"\n              class=\"flex items-center text-xs\" />\n            <table\n              class=\"grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-auto\"\n              :style=\"{ gridTemplateColumns: '1fr auto' }\">\n              <DataTableRow\n                v-for=\"{ id, label, description } in filteredScopes\"\n                :key=\"id\"\n                class=\"text-c-2 group/scope-row\"\n                @click=\"setScope(id, !selectedScopes.includes(id))\">\n                <DataTableCell\n                  class=\"box-border flex !max-h-[initial] w-full min-w-0 cursor-pointer items-stretch overflow-hidden px-0 py-0\">\n                  <!-- Text scrolls horizontally; action rail stays fixed -->\n                  <div\n                    class=\"no-scrollbar text-c-2 group-hover/scope-row:text-c-1 flex min-h-8 min-w-0 flex-1 items-center gap-1 overflow-x-auto px-3 py-1.5 pr-20 text-xs text-nowrap\">\n                    <span class=\"font-code shrink-0 text-xs\">{{ label }}</span>\n                    <template v-if=\"String(description ?? '').trim()\">\n                      <span class=\"shrink-0\">&ndash;</span>\n                      <span class=\"whitespace-nowrap\">{{ description }}</span>\n                    </template>\n                  </div>\n                  <div\n                    class=\"oauth-scope-row-action-rail absolute top-0 right-0 z-[1] flex h-full min-w-[4.5rem] items-center justify-end gap-0.5 py-1 pr-2 pl-4 opacity-0 transition-opacity group-focus-within/scope-row:opacity-100 group-hover/scope-row:opacity-100\"\n                    @click.stop>\n                    <ScalarIconButton\n                      :icon=\"ScalarIconPencilSimple\"\n                      :label=\"`Edit ${label}`\"\n                      size=\"sm\"\n                      @click.stop=\"\n                        openEditScopeModal({\n                          id,\n                          description: description ?? '',\n                        })\n                      \" />\n                    <ScalarIconButton\n                      :icon=\"ScalarIconTrash\"\n                      :label=\"`Delete ${label}`\"\n                      size=\"sm\"\n                      @click.stop=\"handleDeleteScope(id)\" />\n                  </div>\n                </DataTableCell>\n                <DataTableCheckbox\n                  :modelValue=\"selectedScopes.includes(id)\"\n                  @update:modelValue=\"setScope(id, $event)\" />\n              </DataTableRow>\n            </table>\n          </div>\n        </DisclosurePanel>\n      </Disclosure>\n    </div>\n\n    <!-- Shared add/edit scope modal -->\n    <OAuthScopesAddModal\n      :scope=\"editingScope\"\n      :scopes=\"Object.keys(flow.scopes ?? {})\"\n      :state=\"scopeFormModal\"\n      @submit=\"handleScopeFormSubmit\" />\n  </DataTableCell>\n</template>\n\n<style>\n/* Matches AddressBar.vue `.address-bar-bg-states` / `.fade-right` (header URL input). */\n.oauth-scope-row-action-rail {\n  --oauth-scope-row-rail-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 20%) 30%,\n    var(--oauth-scope-row-rail-bg) 100%\n  );\n}\n\n.no-scrollbar::-webkit-scrollbar {\n  display: none;\n}\n\n.no-scrollbar {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n</style>\n"],"mappings":""}

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue.script.js

@@ -2,19 +2,21 @@ import DataTableCell_default from "../../../components/data-table/DataTableCell.
 import DataTableCheckbox_default from "../../../components/data-table/DataTableCheckbox.vue.js";
 import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
 import OAuthScopesAddModal_default from "./OAuthScopesAddModal.vue.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, withCtx, withModifiers } from "vue";
-import { ScalarButton, ScalarIcon, ScalarSearchInput, useModal } from "@scalar/components";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
+import { ScalarButton, ScalarIcon, ScalarIconButton, ScalarSearchInput, useModal } from "@scalar/components";
+import { ScalarIconPencilSimple, ScalarIconTrash } from "@scalar/icons";
 import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
 //#region src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex h-fit w-full" };
-var _hoisted_2 = { class: "flex-1" };
-var _hoisted_3 = { class: "flex items-center gap-1.75" };
+var _hoisted_2 = { class: "group/scopes-accordion flex h-auto min-h-8 items-center gap-1.5 pr-2.25 pl-3 text-left" };
+var _hoisted_3 = { class: "flex shrink-0 items-center gap-1.75" };
 var _hoisted_4 = {
-	class: "grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-scroll",
+	class: "grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-auto",
 	style: { gridTemplateColumns: "1fr auto" }
 };
-var _hoisted_5 = { class: "font-code text-xs" };
-var _hoisted_6 = { key: 0 };
+var _hoisted_5 = { class: "no-scrollbar text-c-2 group-hover/scope-row:text-c-1 flex min-h-8 min-w-0 flex-1 items-center gap-1 overflow-x-auto px-3 py-1.5 pr-20 text-xs text-nowrap" };
+var _hoisted_6 = { class: "font-code shrink-0 text-xs" };
+var _hoisted_7 = { class: "whitespace-nowrap" };
 var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "OAuthScopesInput",
 	props: {
@@ -22,92 +24,209 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		flow: {},
 		selectedScopes: {}
 	},
-	emits: ["update:selectedScopes"],
+	emits: [
+		"update:selectedScopes",
+		"upsert:scope",
+		"delete:scope"
+	],
 	setup(__props, { emit: __emit }) {
 		const emits = __emit;
 		const searchQuery = ref("");
+		/**
+		* The scope currently being edited, used to switch the shared modal into edit mode.
+		* Null means the modal is in "add" mode.
+		*/
+		const editingScope = ref(null);
 		/** List of all available scopes */
 		const scopes = computed(() => Object.entries(__props.flow?.scopes ?? {}).map(([key, val]) => ({
 			id: key,
 			label: key,
 			description: val
 		})));
+		const scopeCount = computed(() => Object.keys(__props.flow?.scopes ?? {}).length);
+		/** Search is only useful once the list is long enough to scan */
+		const showScopeSearch = computed(() => scopeCount.value >= 10);
 		const filteredScopes = computed(() => {
-			if (!searchQuery.value) return scopes.value;
-			const regex = new RegExp(searchQuery.value.split("").map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join(".*"), "i");
+			const query = showScopeSearch.value ? searchQuery.value : "";
+			if (!query) return scopes.value;
+			const regex = new RegExp(query.split("").map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join(".*"), "i");
 			return scopes.value.filter(({ label, description }) => regex.test(`${label} ${description}`));
 		});
+		const hasScopes = computed(() => Object.keys(__props.flow?.scopes ?? {}).length > 0);
 		const allScopesSelected = computed(() => __props.selectedScopes.length === Object.keys(__props.flow?.scopes ?? {}).length);
-		function setScope(scopeKey, checked) {
+		const setScope = (scopeKey, checked) => {
 			if (checked) return emits("update:selectedScopes", { scopes: Array.from(new Set([...__props.selectedScopes, scopeKey])) });
 			emits("update:selectedScopes", { scopes: __props.selectedScopes.filter((scope) => scope !== scopeKey) });
-		}
+		};
 		/** Select all scopes */
 		const selectAllScopes = () => emits("update:selectedScopes", { scopes: Object.keys(__props.flow?.scopes ?? {}) });
 		/** Deselect all scopes */
 		const deselectAllScopes = () => emits("update:selectedScopes", { scopes: [] });
-		const addNewScopeModal = useModal();
+		const scopeFormModal = useModal();
+		/**
+		* Forces the Disclosure to remount with `defaultOpen` set so the panel auto-expands
+		* the moment a brand-new scope is added. Bumping this counter is paired with toggling
+		* `expandOnNextMount` so the remount opens the panel, then reverts to the default
+		* closed-on-mount behavior for any future unrelated remounts (e.g. collapse on empty).
+		*
+		* The Disclosure `:key` is only this counter — not a separate `hasScopes` segment — so
+		* adding the first scope does not remount twice (empty prefix → with-scopes prefix),
+		* which would reopen with `defaultOpen=false` and collapse the panel right when rows appear.
+		*/
+		const remountKey = ref(0);
+		const expandOnNextMount = ref(false);
+		watch(hasScopes, (has, had) => {
+			if (had && !has) {
+				expandOnNextMount.value = false;
+				remountKey.value += 1;
+			}
+		});
+		/** Open the modal in "add new scope" mode */
+		const openAddScopeModal = () => {
+			editingScope.value = null;
+			scopeFormModal.show();
+		};
+		/** Open the modal in "edit scope" mode prefilled with the chosen row */
+		const openEditScopeModal = (scope) => {
+			editingScope.value = {
+				name: scope.id,
+				description: scope.description ?? ""
+			};
+			scopeFormModal.show();
+		};
+		/**
+		* Submit handler shared by Add Scope and Edit Scope. For renames, the `upsertScope` mutator on
+		* the workspace store rewrites the selection state in place, so the component does not need to
+		* emit a follow-up `update:selectedScopes`.
+		*
+		* When adding a brand-new scope (no `oldName`), the payload sets `enable: true` so the
+		* `upsertScope` mutator also adds the new scope to any selection requirement that references
+		* this scheme. The Disclosure is then remounted with `defaultOpen=true` so the user
+		* immediately sees (and sees selected) the scope they just added.
+		*/
+		const handleScopeFormSubmit = async (payload) => {
+			const isAdd = !payload.oldName;
+			emits("upsert:scope", {
+				scope: payload.name,
+				description: payload.description,
+				flowType: __props.flowType,
+				...payload.oldName ? { oldScope: payload.oldName } : {},
+				...isAdd ? { enable: true } : {}
+			});
+			if (!isAdd) return;
+			expandOnNextMount.value = true;
+			remountKey.value += 1;
+			await nextTick();
+			expandOnNextMount.value = false;
+		};
+		/**
+		* Remove the scope from the flow. Selection cleanup (dropping the deleted key from any
+		* currently-selected scopes) is handled by the `deleteScope` mutator on the workspace store,
+		* so the component does not need to emit a follow-up `update:selectedScopes` here.
+		*/
+		const handleDeleteScope = (scopeKey) => {
+			emits("delete:scope", {
+				scope: scopeKey,
+				flowType: __props.flowType
+			});
+		};
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DataTableCell_default), { class: "h-auto !max-h-[initial] min-h-8 items-center" }, {
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[7] || (_cache[7] = createElementVNode("div", { class: "text-c-1 h-full items-center" }, null, -1)), createVNode(unref(Disclosure), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[6] || (_cache[6] = createElementVNode("div", { class: "text-c-1 h-full items-center" }, null, -1)), (openBlock(), createBlock(unref(Disclosure), {
+					key: remountKey.value,
 					as: "div",
-					class: "bl flex w-full flex-col"
+					class: "bl flex w-full flex-col",
+					defaultOpen: expandOnNextMount.value
 				}, {
-					default: withCtx(() => [createVNode(unref(DisclosureButton), { class: normalizeClass(["group/scopes-accordion hover:text-c-1 flex h-auto min-h-8 cursor-pointer items-center gap-1.5 pr-2.25 pl-3 text-left", (__props.selectedScopes.length || 0) > 0 ? "text-c-1" : "text-c-3"]) }, {
-						default: withCtx(({ open }) => [createElementVNode("div", _hoisted_2, " Scopes Selected " + toDisplayString(__props.selectedScopes.length || 0) + " / " + toDisplayString(Object.keys(__props.flow?.scopes ?? {}).length || 0), 1), createElementVNode("div", _hoisted_3, [
-							createVNode(unref(ScalarButton), {
-								class: "pr-0.75 pl-1 transition-none",
-								size: "sm",
-								variant: "ghost",
-								onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(addNewScopeModal).show(), ["stop"]))
-							}, {
-								default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Add Scope ", -1)])]),
-								_: 1
-							}),
-							allScopesSelected.value ? (openBlock(), createBlock(unref(ScalarButton), {
-								key: 0,
-								class: "pr-0.75 pl-1 transition-none",
-								size: "sm",
-								variant: "ghost",
-								onClick: withModifiers(deselectAllScopes, ["stop"])
-							}, {
-								default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Deselect All ", -1)])]),
-								_: 1
-							})) : createCommentVNode("", true),
-							!allScopesSelected.value ? (openBlock(), createBlock(unref(ScalarButton), {
-								key: 1,
-								class: "pr-0.75 pl-1 transition-none",
-								size: "sm",
-								variant: "ghost",
-								onClick: withModifiers(selectAllScopes, ["stop"])
-							}, {
-								default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode(" Select All ", -1)])]),
-								_: 1
-							})) : createCommentVNode("", true),
-							createVNode(unref(ScalarIcon), {
-								class: "text-c-3 group-hover/scopes-accordion:text-c-2",
+					default: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(unref(DisclosureButton), {
+						class: normalizeClass([
+							"min-w-0 flex-1 text-left",
+							hasScopes.value ? "hover:text-c-1 cursor-pointer" : "cursor-default",
+							(__props.selectedScopes.length || 0) > 0 ? "text-c-1" : "text-c-3"
+						]),
+						disabled: !hasScopes.value
+					}, {
+						default: withCtx(() => [hasScopes.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" Scopes Selected " + toDisplayString(__props.selectedScopes.length || 0) + " / " + toDisplayString(Object.keys(__props.flow?.scopes ?? {}).length || 0), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(" No Scopes Defined ")], 64))]),
+						_: 1
+					}, 8, ["class", "disabled"]), createElementVNode("div", _hoisted_3, [
+						createVNode(unref(ScalarButton), {
+							class: "pr-0.75 pl-1 transition-none",
+							size: "sm",
+							variant: "ghost",
+							onClick: withModifiers(openAddScopeModal, ["stop"])
+						}, {
+							default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Add Scope ", -1)])]),
+							_: 1
+						}),
+						hasScopes.value && allScopesSelected.value ? (openBlock(), createBlock(unref(ScalarButton), {
+							key: 0,
+							class: "pr-0.75 pl-1 transition-none",
+							size: "sm",
+							variant: "ghost",
+							onClick: withModifiers(deselectAllScopes, ["stop"])
+						}, {
+							default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Deselect All ", -1)])]),
+							_: 1
+						})) : createCommentVNode("", true),
+						hasScopes.value && !allScopesSelected.value ? (openBlock(), createBlock(unref(ScalarButton), {
+							key: 1,
+							class: "pr-0.75 pl-1 transition-none",
+							size: "sm",
+							variant: "ghost",
+							onClick: withModifiers(selectAllScopes, ["stop"])
+						}, {
+							default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Select All ", -1)])]),
+							_: 1
+						})) : createCommentVNode("", true),
+						hasScopes.value ? (openBlock(), createBlock(unref(DisclosureButton), {
+							key: 2,
+							class: "text-c-3 hover:text-c-2 -m-0.5 flex shrink-0 items-center justify-center rounded p-0.5 focus-visible:outline-offset-2"
+						}, {
+							default: withCtx(({ open }) => [createVNode(unref(ScalarIcon), {
+								class: "group-hover/scopes-accordion:text-c-2",
 								icon: open ? "ChevronDown" : "ChevronRight",
 								size: "md"
-							}, null, 8, ["icon"])
-						])]),
-						_: 1
-					}, 8, ["class"]), createVNode(unref(DisclosurePanel), { as: "template" }, {
-						default: withCtx(() => [createElementVNode("div", null, [createVNode(unref(ScalarSearchInput), {
+							}, null, 8, ["icon"])]),
+							_: 1
+						})) : createCommentVNode("", true)
+					])]), createVNode(unref(DisclosurePanel), { as: "template" }, {
+						default: withCtx(() => [createElementVNode("div", null, [showScopeSearch.value ? (openBlock(), createBlock(unref(ScalarSearchInput), {
+							key: 0,
 							modelValue: searchQuery.value,
-							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
 							class: "flex items-center text-xs"
-						}, null, 8, ["modelValue"]), createElementVNode("table", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredScopes.value, ({ id, label, description }) => {
+						}, null, 8, ["modelValue"])) : createCommentVNode("", true), createElementVNode("table", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredScopes.value, ({ id, label, description }) => {
 							return openBlock(), createBlock(unref(DataTableRow_default), {
 								key: id,
-								class: "text-c-2",
+								class: "text-c-2 group/scope-row",
 								onClick: ($event) => setScope(id, !__props.selectedScopes.includes(id))
 							}, {
-								default: withCtx(() => [createVNode(unref(DataTableCell_default), { class: "no-scrollbar hover:text-c-1 box-border flex !max-h-[initial] w-full cursor-pointer items-center gap-1 overflow-x-scroll px-3 py-1.5 text-nowrap" }, {
-									default: withCtx(() => [
-										createElementVNode("span", _hoisted_5, toDisplayString(label), 1),
-										_cache[6] || (_cache[6] = createElementVNode("span", null, "–", -1)),
-										description ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(description), 1)) : createCommentVNode("", true)
-									]),
+								default: withCtx(() => [createVNode(unref(DataTableCell_default), { class: "box-border flex !max-h-[initial] w-full min-w-0 cursor-pointer items-stretch overflow-hidden px-0 py-0" }, {
+									default: withCtx(() => [createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(label), 1), String(description ?? "").trim() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[5] || (_cache[5] = createElementVNode("span", { class: "shrink-0" }, "–", -1)), createElementVNode("span", _hoisted_7, toDisplayString(description), 1)], 64)) : createCommentVNode("", true)]), createElementVNode("div", {
+										class: "oauth-scope-row-action-rail absolute top-0 right-0 z-[1] flex h-full min-w-[4.5rem] items-center justify-end gap-0.5 py-1 pr-2 pl-4 opacity-0 transition-opacity group-focus-within/scope-row:opacity-100 group-hover/scope-row:opacity-100",
+										onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+									}, [createVNode(unref(ScalarIconButton), {
+										icon: unref(ScalarIconPencilSimple),
+										label: `Edit ${label}`,
+										size: "sm",
+										onClick: withModifiers(($event) => openEditScopeModal({
+											id,
+											description: description ?? ""
+										}), ["stop"])
+									}, null, 8, [
+										"icon",
+										"label",
+										"onClick"
+									]), createVNode(unref(ScalarIconButton), {
+										icon: unref(ScalarIconTrash),
+										label: `Delete ${label}`,
+										size: "sm",
+										onClick: withModifiers(($event) => handleDeleteScope(id), ["stop"])
+									}, null, 8, [
+										"icon",
+										"label",
+										"onClick"
+									])])]),
 									_: 2
 								}, 1024), createVNode(unref(DataTableCheckbox_default), {
 									modelValue: __props.selectedScopes.includes(id),
@@ -119,17 +238,16 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						_: 1
 					})]),
 					_: 1
-				})]), createVNode(OAuthScopesAddModal_default, {
+				}, 8, ["defaultOpen"]))]), createVNode(OAuthScopesAddModal_default, {
+					scope: editingScope.value,
 					scopes: Object.keys(__props.flow.scopes ?? {}),
-					state: unref(addNewScopeModal),
-					onSubmit: _cache[2] || (_cache[2] = (payload) => emits("update:selectedScopes", {
-						scopes: __props.selectedScopes,
-						newScopePayload: {
-							...payload,
-							flowType: __props.flowType
-						}
-					}))
-				}, null, 8, ["scopes", "state"])]),
+					state: unref(scopeFormModal),
+					onSubmit: handleScopeFormSubmit
+				}, null, 8, [
+					"scope",
+					"scopes",
+					"state"
+				])]),
 				_: 1
 			});
 		};