@scalar/api-client 2.38.1 → 2.38.2

package/dist/Settings-CYZzdJPO.js

@@ -0,0 +1,347 @@
+import { r as useWorkspace, w as useActiveEntities } from "./store-DpSUVhjp.js";
+import { t as IntegrationLogo_default } from "./IntegrationLogo-B9EDW8db.js";
+import { t as ViewLayout_default } from "./ViewLayout-BOXN0IYo.js";
+import { t as ViewLayoutContent_default } from "./ViewLayoutContent-CvMoJYPF.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+import { ScalarButton, ScalarIcon, cva, cx } from "@scalar/components";
+import { themeLabels } from "@scalar/themes";
+import { useColorMode } from "@scalar/use-hooks/useColorMode";
+//#region src/views/Settings/components/SettingsAppearance.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "flex flex-col gap-2" };
+//#endregion
+//#region src/views/Settings/components/SettingsAppearance.vue
+var SettingsAppearance_default = /* @__PURE__ */ defineComponent({
+	__name: "SettingsAppearance",
+	setup(__props) {
+		const { colorMode, setColorMode } = useColorMode();
+		const buttonStyles = cva({
+			base: "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border",
+			variants: { active: {
+				true: "bg-primary text-c-1 hover:bg-inherit",
+				false: "bg-b-1 hover:bg-b-2"
+			} }
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [
+				createVNode(unref(ScalarButton), {
+					class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: unref(colorMode) === "system" }))),
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(setColorMode)("system"))
+				}, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": unref(colorMode) === "system" }]) }, [unref(colorMode) === "system" ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						icon: "Checkmark",
+						size: "xs",
+						thickness: "3.5"
+					})) : createCommentVNode("", true)], 2), _cache[3] || (_cache[3] = createTextVNode(" System Preference (default) ", -1))]),
+					_: 1
+				}, 8, ["class"]),
+				createVNode(unref(ScalarButton), {
+					class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: unref(colorMode) === "light" }))),
+					onClick: _cache[1] || (_cache[1] = ($event) => unref(setColorMode)("light"))
+				}, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": unref(colorMode) === "light" }]) }, [unref(colorMode) === "light" ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						icon: "Checkmark",
+						size: "xs",
+						thickness: "3.5"
+					})) : createCommentVNode("", true)], 2), _cache[4] || (_cache[4] = createTextVNode(" Light Mode Always ", -1))]),
+					_: 1
+				}, 8, ["class"]),
+				createVNode(unref(ScalarButton), {
+					class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: unref(colorMode) === "dark" }))),
+					onClick: _cache[2] || (_cache[2] = ($event) => unref(setColorMode)("dark"))
+				}, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": unref(colorMode) === "dark" }]) }, [unref(colorMode) === "dark" ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						icon: "Checkmark",
+						size: "xs",
+						thickness: "3.5"
+					})) : createCommentVNode("", true)], 2), _cache[5] || (_cache[5] = createTextVNode(" Dark Mode Always ", -1))]),
+					_: 1
+				}, 8, ["class"])
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/views/Settings/components/SettingsSection.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "flex flex-col gap-2" };
+var _hoisted_2$1 = {
+	key: 0,
+	class: "font-bold"
+};
+var _hoisted_3$1 = {
+	key: 1,
+	class: "text-c-2 mb-4 leading-[21px]"
+};
+//#endregion
+//#region src/views/Settings/components/SettingsSection.vue
+var SettingsSection_default = /* @__PURE__ */ defineComponent({
+	__name: "SettingsSection",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [
+				_ctx.$slots.title ? (openBlock(), createElementBlock("h3", _hoisted_2$1, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true),
+				_ctx.$slots.description ? (openBlock(), createElementBlock("p", _hoisted_3$1, [renderSlot(_ctx.$slots, "description")])) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "default")
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/views/Settings/SettingsGeneral.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "bg-b-1 h-full w-full overflow-auto" };
+var _hoisted_2 = { class: "mr-auto ml-auto w-full max-w-[720px] px-5 py-5" };
+var _hoisted_3 = { class: "flex flex-col gap-8" };
+var _hoisted_4 = { class: "flex flex-col gap-2" };
+var _hoisted_5 = { class: "flex flex-col gap-2" };
+var _hoisted_6 = { class: "grid grid-cols-2 gap-2" };
+var _hoisted_7 = { class: "flex items-center gap-2" };
+var _hoisted_8 = { class: "flex items-center gap-1" };
+var _hoisted_9 = { class: "grid grid-cols-2 gap-2" };
+var _hoisted_10 = { class: "flex items-center gap-2" };
+var _hoisted_11 = { class: "flex items-center gap-1" };
+var _hoisted_12 = { class: "size-7 rounded-xl" };
+var DEFAULT_PROXY_URL = "https://proxy.scalar.com";
+//#endregion
+//#region src/views/Settings/SettingsGeneral.vue
+var SettingsGeneral_default = /* @__PURE__ */ defineComponent({
+	__name: "SettingsGeneral",
+	setup(__props) {
+		const { activeWorkspace } = useActiveEntities();
+		const { proxyUrl, workspaceMutators } = useWorkspace();
+		const themeIds = [
+			"default",
+			"alternate",
+			"purple",
+			"solarized",
+			"saturn",
+			"kepler"
+		];
+		const integrationThemeIds = ["elysiajs", "fastify"];
+		const getThemeColors = (themeId) => {
+			return {
+				default: {
+					light: "#fff",
+					dark: "#0f0f0f",
+					accent: "#0099ff"
+				},
+				alternate: {
+					light: "#f9f9f9",
+					dark: "#131313",
+					accent: "#e7e7e7"
+				},
+				moon: {
+					light: "#ccc9b3",
+					dark: "#313332",
+					accent: "#645b0f"
+				},
+				purple: {
+					light: "#f5f6f8",
+					dark: "#22252b",
+					accent: "#5469d4"
+				},
+				solarized: {
+					light: "#fdf6e3",
+					dark: "#00212b",
+					accent: "#007acc"
+				},
+				bluePlanet: {
+					light: "#f0f2f5",
+					dark: "#000e23",
+					accent: "#e0e2e6"
+				},
+				saturn: {
+					light: "#e4e4df",
+					dark: "#2c2c30",
+					accent: "#1763a6"
+				},
+				kepler: {
+					light: "#f6f6f6",
+					dark: "#0d0f1e",
+					accent: "#7070ff"
+				},
+				mars: {
+					light: "#f2efe8",
+					dark: "#321116",
+					accent: "#c75549"
+				},
+				deepSpace: {
+					light: "#f4f4f5",
+					dark: "#09090b",
+					accent: "#8ab4f8"
+				},
+				laserwave: {
+					light: "#f4f2f7",
+					dark: "#27212e",
+					accent: "#ed78c2"
+				},
+				none: {
+					light: "#ffffff",
+					dark: "#000000",
+					accent: "#3b82f6"
+				}
+			}[themeId] || {
+				light: "#ffffff",
+				dark: "#000000",
+				accent: "#3b82f6"
+			};
+		};
+		const changeTheme = (themeId) => workspaceMutators.edit(activeWorkspace.value?.uid, "themeId", themeId);
+		const buttonStyles = cva({
+			base: "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border",
+			variants: { active: {
+				true: "bg-primary text-c-1 hover:bg-inherit",
+				false: "bg-b-1 hover:bg-b-2"
+			} }
+		});
+		const setProxy = (newProxy) => workspaceMutators.edit(activeWorkspace.value?.uid, "proxyUrl", newProxy);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
+				_cache[13] || (_cache[13] = createElementVNode("div", null, [createElementVNode("h2", { class: "mt-10 text-xl font-bold" }, "Settings")], -1)),
+				createVNode(SettingsSection_default, null, {
+					title: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" CORS Proxy ", -1)])]),
+					description: withCtx(() => [..._cache[4] || (_cache[4] = [
+						createTextVNode(" Browsers block cross-origin requests for security. We provide a public proxy to ", -1),
+						createElementVNode("a", {
+							class: "hover:text-c-1 underline-offset-2",
+							href: "https://en.wikipedia.org/wiki/Cross-origin_resource_sharing",
+							target: "_blank"
+						}, " bypass CORS issues ", -1),
+						createTextVNode(" . Check the ", -1),
+						createElementVNode("a", {
+							class: "hover:text-c-1 underline-offset-2",
+							href: "https://github.com/scalar/scalar/tree/main/examples/proxy-server",
+							target: "_blank"
+						}, " source code on GitHub ", -1),
+						createTextVNode(" . ", -1)
+					])]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_4, [
+						createVNode(unref(ScalarButton), {
+							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: unref(activeWorkspace)?.proxyUrl === DEFAULT_PROXY_URL }))),
+							onClick: _cache[0] || (_cache[0] = ($event) => setProxy(DEFAULT_PROXY_URL))
+						}, {
+							default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": unref(activeWorkspace)?.proxyUrl === DEFAULT_PROXY_URL }]) }, [unref(activeWorkspace)?.proxyUrl === DEFAULT_PROXY_URL ? (openBlock(), createBlock(unref(ScalarIcon), {
+								key: 0,
+								icon: "Checkmark",
+								size: "xs",
+								thickness: "3.5"
+							})) : createCommentVNode("", true)], 2), _cache[5] || (_cache[5] = createTextVNode(" Use proxy.scalar.com (default) ", -1))]),
+							_: 1
+						}, 8, ["class"]),
+						unref(proxyUrl) && unref(proxyUrl) !== DEFAULT_PROXY_URL ? (openBlock(), createBlock(unref(ScalarButton), {
+							key: 0,
+							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: unref(activeWorkspace)?.proxyUrl === unref(proxyUrl) }))),
+							onClick: _cache[1] || (_cache[1] = ($event) => setProxy(unref(proxyUrl)))
+						}, {
+							default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": unref(activeWorkspace)?.proxyUrl === unref(proxyUrl) }]) }, [unref(activeWorkspace)?.proxyUrl === unref(proxyUrl) ? (openBlock(), createBlock(unref(ScalarIcon), {
+								key: 0,
+								icon: "Checkmark",
+								size: "xs",
+								thickness: "3.5"
+							})) : createCommentVNode("", true)], 2), createTextVNode(" Use custom proxy (" + toDisplayString(unref(proxyUrl)) + ") ", 1)]),
+							_: 1
+						}, 8, ["class"])) : createCommentVNode("", true),
+						createVNode(unref(ScalarButton), {
+							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: !unref(activeWorkspace)?.proxyUrl }))),
+							onClick: _cache[2] || (_cache[2] = ($event) => setProxy(void 0))
+						}, {
+							default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", !unref(activeWorkspace)?.proxyUrl && "bg-c-accent text-b-1 border-transparent"]) }, [!unref(activeWorkspace)?.proxyUrl ? (openBlock(), createBlock(unref(ScalarIcon), {
+								key: 0,
+								icon: "Checkmark",
+								size: "xs",
+								thickness: "3.5"
+							})) : createCommentVNode("", true)], 2), _cache[6] || (_cache[6] = createTextVNode(" Skip the proxy ", -1))]),
+							_: 1
+						}, 8, ["class"])
+					])]),
+					_: 1
+				}),
+				createVNode(SettingsSection_default, null, {
+					title: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode(" Themes ", -1)])]),
+					description: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode(" We've got a whole rainbow of themes for you to play with: ", -1)])]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [(openBlock(), createElementBlock(Fragment, null, renderList(themeIds, (themeId) => {
+						return createVNode(unref(ScalarButton), {
+							key: themeId,
+							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: unref(activeWorkspace)?.themeId === themeId }))),
+							onClick: ($event) => changeTheme(themeId)
+						}, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_7, [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": unref(activeWorkspace)?.themeId === themeId }]) }, [unref(activeWorkspace)?.themeId === themeId ? (openBlock(), createBlock(unref(ScalarIcon), {
+								key: 0,
+								icon: "Checkmark",
+								size: "xs",
+								thickness: "3.5"
+							})) : createCommentVNode("", true)], 2), createTextVNode(" " + toDisplayString(unref(themeLabels)[themeId]), 1)]), createElementVNode("div", _hoisted_8, [
+								createElementVNode("span", {
+									class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
+									style: normalizeStyle({ backgroundColor: getThemeColors(themeId).light })
+								}, null, 4),
+								createElementVNode("span", {
+									class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
+									style: normalizeStyle({ backgroundColor: getThemeColors(themeId).dark })
+								}, null, 4),
+								createElementVNode("span", {
+									class: "border-c-3 inline-block h-5 w-5 rounded-full",
+									style: normalizeStyle({ backgroundColor: getThemeColors(themeId).accent })
+								}, null, 4)
+							])]),
+							_: 2
+						}, 1032, ["class", "onClick"]);
+					}), 64))])])]),
+					_: 1
+				}),
+				createVNode(SettingsSection_default, null, {
+					title: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode(" Framework Themes ", -1)])]),
+					description: withCtx(() => [..._cache[10] || (_cache[10] = [createTextVNode(" Are you a real fan? Show your support by using your favorite framework's theme! ", -1)])]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_9, [(openBlock(), createElementBlock(Fragment, null, renderList(integrationThemeIds, (themeId) => {
+						return createVNode(unref(ScalarButton), {
+							key: themeId,
+							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: unref(activeWorkspace)?.themeId === themeId }))),
+							onClick: ($event) => changeTheme(themeId)
+						}, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_10, [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": unref(activeWorkspace)?.themeId === themeId }]) }, [unref(activeWorkspace)?.themeId === themeId ? (openBlock(), createBlock(unref(ScalarIcon), {
+								key: 0,
+								icon: "Checkmark",
+								size: "xs",
+								thickness: "3.5"
+							})) : createCommentVNode("", true)], 2), createTextVNode(" " + toDisplayString(unref(themeLabels)[themeId]), 1)]), createElementVNode("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [createVNode(IntegrationLogo_default, { integration: themeId }, null, 8, ["integration"])])])]),
+							_: 2
+						}, 1032, ["class", "onClick"]);
+					}), 64))])]),
+					_: 1
+				}),
+				createVNode(SettingsSection_default, null, {
+					title: withCtx(() => [..._cache[11] || (_cache[11] = [createTextVNode(" Appearance ", -1)])]),
+					description: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode(" Choose between light, dark, or system-based appearance for your workspace. ", -1)])]),
+					default: withCtx(() => [createVNode(SettingsAppearance_default)]),
+					_: 1
+				})
+			])])]);
+		};
+	}
+});
+//#endregion
+//#region src/views/Settings/Settings.vue
+var Settings_default = /* @__PURE__ */ defineComponent({
+	__name: "Settings",
+	setup(__props) {
+		const settings = { general: {
+			component: SettingsGeneral_default,
+			title: "general"
+		} };
+		const activeSetting = ref("general");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ViewLayout_default, null, {
+				default: withCtx(() => [createVNode(ViewLayoutContent_default, { class: "flex-1" }, {
+					default: withCtx(() => [settings[activeSetting.value] ? (openBlock(), createBlock(resolveDynamicComponent(settings[activeSetting.value].component), { key: 0 })) : createCommentVNode("", true)]),
+					_: 1
+				})]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { Settings_default as default };
+
+//# sourceMappingURL=Settings-CYZzdJPO.js.map

package/dist/Settings-CYZzdJPO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings-CYZzdJPO.js","names":["$slots"],"sources":["../src/views/Settings/components/SettingsAppearance.vue","../src/views/Settings/components/SettingsAppearance.vue","../src/views/Settings/components/SettingsSection.vue","../src/views/Settings/components/SettingsSection.vue","../src/views/Settings/SettingsGeneral.vue","../src/views/Settings/SettingsGeneral.vue","../src/views/Settings/Settings.vue","../src/views/Settings/Settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\n\nconst { colorMode, setColorMode } = useColorMode()\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n</script>\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'system' }))\"\n      @click=\"setColorMode('system')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'system',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'system'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      System Preference (default)\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'light' }))\"\n      @click=\"setColorMode('light')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'light',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'light'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Light Mode Always\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'dark' }))\"\n      @click=\"setColorMode('dark')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'dark',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'dark'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Dark Mode Always\n    </ScalarButton>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport { useColorMode } from '@scalar/use-hooks/useColorMode'\n\nconst { colorMode, setColorMode } = useColorMode()\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n</script>\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'system' }))\"\n      @click=\"setColorMode('system')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'system',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'system'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      System Preference (default)\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'light' }))\"\n      @click=\"setColorMode('light')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'light',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'light'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Light Mode Always\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'dark' }))\"\n      @click=\"setColorMode('dark')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'dark',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'dark'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Dark Mode Always\n    </ScalarButton>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineSlots<{\n  title?: () => string\n  description?: () => string\n  default: () => any\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <template v-if=\"$slots.title\">\n      <h3 class=\"font-bold\">\n        <slot name=\"title\" />\n      </h3>\n    </template>\n\n    <template v-if=\"$slots.description\">\n      <p class=\"text-c-2 mb-4 leading-[21px]\">\n        <slot name=\"description\" />\n      </p>\n    </template>\n\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineSlots<{\n  title?: () => string\n  description?: () => string\n  default: () => any\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <template v-if=\"$slots.title\">\n      <h3 class=\"font-bold\">\n        <slot name=\"title\" />\n      </h3>\n    </template>\n\n    <template v-if=\"$slots.description\">\n      <p class=\"text-c-2 mb-4 leading-[21px]\">\n        <slot name=\"description\" />\n      </p>\n    </template>\n\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport {\n  themeLabels,\n  type IntegrationThemeId,\n  type ThemeId,\n} from '@scalar/themes'\n\nimport IntegrationLogo from '@/components/ImportCollection/IntegrationLogo.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport SettingsGeneralAppearance from './components/SettingsAppearance.vue'\nimport SettingsSection from './components/SettingsSection.vue'\n\nconst { activeWorkspace } = useActiveEntities()\nconst { proxyUrl, workspaceMutators } = useWorkspace()\n\nconst DEFAULT_PROXY_URL = 'https://proxy.scalar.com'\n\nconst themeIds: Exclude<ThemeId, IntegrationThemeId>[] = [\n  'default',\n  'alternate',\n  // 'moon',\n  'purple',\n  'solarized',\n  // 'bluePlanet',\n  'saturn',\n  'kepler',\n  // 'mars',\n  // 'deepSpace',\n  // 'laserwave',\n]\n\nconst integrationThemeIds: IntegrationThemeId[] = ['elysiajs', 'fastify']\n\nconst getThemeColors = (\n  themeId: Exclude<ThemeId, IntegrationThemeId>,\n): { light: string; dark: string; accent: string } => {\n  const colors: Record<\n    Exclude<ThemeId, IntegrationThemeId>,\n    { light: string; dark: string; accent: string }\n  > = {\n    default: { light: '#fff', dark: '#0f0f0f', accent: '#0099ff' },\n    alternate: { light: '#f9f9f9', dark: '#131313', accent: '#e7e7e7' },\n    moon: { light: '#ccc9b3', dark: '#313332', accent: '#645b0f' },\n    purple: { light: '#f5f6f8', dark: '#22252b', accent: '#5469d4' },\n    solarized: { light: '#fdf6e3', dark: '#00212b', accent: '#007acc' },\n    bluePlanet: { light: '#f0f2f5', dark: '#000e23', accent: '#e0e2e6' },\n    saturn: { light: '#e4e4df', dark: '#2c2c30', accent: '#1763a6' },\n    kepler: { light: '#f6f6f6', dark: '#0d0f1e', accent: '#7070ff' },\n    mars: { light: '#f2efe8', dark: '#321116', accent: '#c75549' },\n    deepSpace: { light: '#f4f4f5', dark: '#09090b', accent: '#8ab4f8' },\n    laserwave: { light: '#f4f2f7', dark: '#27212e', accent: '#ed78c2' },\n    none: { light: '#ffffff', dark: '#000000', accent: '#3b82f6' },\n  }\n  return (\n    colors[themeId] || { light: '#ffffff', dark: '#000000', accent: '#3b82f6' }\n  )\n}\n\nconst changeTheme = (themeId: ThemeId) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'themeId', themeId)\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n\nconst setProxy = (newProxy: string | undefined) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'proxyUrl', newProxy)\n</script>\n<template>\n  <div class=\"bg-b-1 h-full w-full overflow-auto\">\n    <div class=\"mr-auto ml-auto w-full max-w-[720px] px-5 py-5\">\n      <div class=\"flex flex-col gap-8\">\n        <!-- Heading -->\n        <div>\n          <h2 class=\"mt-10 text-xl font-bold\">Settings</h2>\n        </div>\n\n        <!-- Proxy -->\n        <SettingsSection>\n          <template #title> CORS Proxy </template>\n          <template #description>\n            Browsers block cross-origin requests for security. We provide a\n            public proxy to\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://en.wikipedia.org/wiki/Cross-origin_resource_sharing\"\n              target=\"_blank\">\n              bypass CORS issues\n            </a>\n            . Check the\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://github.com/scalar/scalar/tree/main/examples/proxy-server\"\n              target=\"_blank\">\n              source code on GitHub\n            </a>\n            .\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <!-- Default proxy -->\n            <ScalarButton\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                  }),\n                )\n              \"\n              @click=\"setProxy(DEFAULT_PROXY_URL)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use proxy.scalar.com (default)\n            </ScalarButton>\n\n            <!-- Custom proxy (only if configured) -->\n            <ScalarButton\n              v-if=\"proxyUrl && proxyUrl !== DEFAULT_PROXY_URL\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === proxyUrl,\n                  }),\n                )\n              \"\n              @click=\"setProxy(proxyUrl)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === proxyUrl,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use custom proxy ({{ proxyUrl }})\n            </ScalarButton>\n\n            <!-- No proxy -->\n            <ScalarButton\n              :class=\"cx(buttonStyles({ active: !activeWorkspace?.proxyUrl }))\"\n              @click=\"setProxy(undefined)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"\n                  !activeWorkspace?.proxyUrl &&\n                  'bg-c-accent text-b-1 border-transparent'\n                \">\n                <ScalarIcon\n                  v-if=\"!activeWorkspace?.proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Skip the proxy\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Themes -->\n        <SettingsSection>\n          <template #title> Themes </template>\n          <template #description>\n            We've got a whole rainbow of themes for you to play with:\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"grid grid-cols-2 gap-2\">\n              <ScalarButton\n                v-for=\"themeId in themeIds\"\n                :key=\"themeId\"\n                :class=\"\n                  cx(\n                    buttonStyles({\n                      active: activeWorkspace?.themeId === themeId,\n                    }),\n                  )\n                \"\n                @click=\"changeTheme(themeId)\">\n                <div class=\"flex items-center gap-2\">\n                  <div\n                    class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                    :class=\"{\n                      'bg-c-accent text-b-1 border-transparent':\n                        activeWorkspace?.themeId === themeId,\n                    }\">\n                    <ScalarIcon\n                      v-if=\"activeWorkspace?.themeId === themeId\"\n                      icon=\"Checkmark\"\n                      size=\"xs\"\n                      thickness=\"3.5\" />\n                  </div>\n                  {{ themeLabels[themeId] }}\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).light,\n                    }\" />\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).dark,\n                    }\" />\n                  <span\n                    class=\"border-c-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).accent,\n                    }\" />\n                </div>\n              </ScalarButton>\n            </div>\n          </div>\n        </SettingsSection>\n\n        <!-- Frameworks -->\n        <SettingsSection>\n          <template #title> Framework Themes </template>\n          <template #description>\n            Are you a real fan? Show your support by using your favorite\n            framework's theme!\n          </template>\n\n          <div class=\"grid grid-cols-2 gap-2\">\n            <ScalarButton\n              v-for=\"themeId in integrationThemeIds\"\n              :key=\"themeId\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.themeId === themeId,\n                  }),\n                )\n              \"\n              @click=\"changeTheme(themeId)\">\n              <div class=\"flex items-center gap-2\">\n                <div\n                  class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                  :class=\"{\n                    'bg-c-accent text-b-1 border-transparent':\n                      activeWorkspace?.themeId === themeId,\n                  }\">\n                  <ScalarIcon\n                    v-if=\"activeWorkspace?.themeId === themeId\"\n                    icon=\"Checkmark\"\n                    size=\"xs\"\n                    thickness=\"3.5\" />\n                </div>\n                {{ themeLabels[themeId] }}\n              </div>\n              <div class=\"flex items-center gap-1\">\n                <div class=\"size-7 rounded-xl\">\n                  <IntegrationLogo :integration=\"themeId\" />\n                </div>\n              </div>\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Appearance -->\n        <SettingsSection>\n          <template #title> Appearance </template>\n          <template #description>\n            Choose between light, dark, or system-based appearance for your\n            workspace.\n          </template>\n\n          <SettingsGeneralAppearance />\n        </SettingsSection>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\nimport {\n  themeLabels,\n  type IntegrationThemeId,\n  type ThemeId,\n} from '@scalar/themes'\n\nimport IntegrationLogo from '@/components/ImportCollection/IntegrationLogo.vue'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\nimport SettingsGeneralAppearance from './components/SettingsAppearance.vue'\nimport SettingsSection from './components/SettingsSection.vue'\n\nconst { activeWorkspace } = useActiveEntities()\nconst { proxyUrl, workspaceMutators } = useWorkspace()\n\nconst DEFAULT_PROXY_URL = 'https://proxy.scalar.com'\n\nconst themeIds: Exclude<ThemeId, IntegrationThemeId>[] = [\n  'default',\n  'alternate',\n  // 'moon',\n  'purple',\n  'solarized',\n  // 'bluePlanet',\n  'saturn',\n  'kepler',\n  // 'mars',\n  // 'deepSpace',\n  // 'laserwave',\n]\n\nconst integrationThemeIds: IntegrationThemeId[] = ['elysiajs', 'fastify']\n\nconst getThemeColors = (\n  themeId: Exclude<ThemeId, IntegrationThemeId>,\n): { light: string; dark: string; accent: string } => {\n  const colors: Record<\n    Exclude<ThemeId, IntegrationThemeId>,\n    { light: string; dark: string; accent: string }\n  > = {\n    default: { light: '#fff', dark: '#0f0f0f', accent: '#0099ff' },\n    alternate: { light: '#f9f9f9', dark: '#131313', accent: '#e7e7e7' },\n    moon: { light: '#ccc9b3', dark: '#313332', accent: '#645b0f' },\n    purple: { light: '#f5f6f8', dark: '#22252b', accent: '#5469d4' },\n    solarized: { light: '#fdf6e3', dark: '#00212b', accent: '#007acc' },\n    bluePlanet: { light: '#f0f2f5', dark: '#000e23', accent: '#e0e2e6' },\n    saturn: { light: '#e4e4df', dark: '#2c2c30', accent: '#1763a6' },\n    kepler: { light: '#f6f6f6', dark: '#0d0f1e', accent: '#7070ff' },\n    mars: { light: '#f2efe8', dark: '#321116', accent: '#c75549' },\n    deepSpace: { light: '#f4f4f5', dark: '#09090b', accent: '#8ab4f8' },\n    laserwave: { light: '#f4f2f7', dark: '#27212e', accent: '#ed78c2' },\n    none: { light: '#ffffff', dark: '#000000', accent: '#3b82f6' },\n  }\n  return (\n    colors[themeId] || { light: '#ffffff', dark: '#000000', accent: '#3b82f6' }\n  )\n}\n\nconst changeTheme = (themeId: ThemeId) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'themeId', themeId)\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n\nconst setProxy = (newProxy: string | undefined) =>\n  workspaceMutators.edit(activeWorkspace.value?.uid, 'proxyUrl', newProxy)\n</script>\n<template>\n  <div class=\"bg-b-1 h-full w-full overflow-auto\">\n    <div class=\"mr-auto ml-auto w-full max-w-[720px] px-5 py-5\">\n      <div class=\"flex flex-col gap-8\">\n        <!-- Heading -->\n        <div>\n          <h2 class=\"mt-10 text-xl font-bold\">Settings</h2>\n        </div>\n\n        <!-- Proxy -->\n        <SettingsSection>\n          <template #title> CORS Proxy </template>\n          <template #description>\n            Browsers block cross-origin requests for security. We provide a\n            public proxy to\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://en.wikipedia.org/wiki/Cross-origin_resource_sharing\"\n              target=\"_blank\">\n              bypass CORS issues\n            </a>\n            . Check the\n            <a\n              class=\"hover:text-c-1 underline-offset-2\"\n              href=\"https://github.com/scalar/scalar/tree/main/examples/proxy-server\"\n              target=\"_blank\">\n              source code on GitHub\n            </a>\n            .\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <!-- Default proxy -->\n            <ScalarButton\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                  }),\n                )\n              \"\n              @click=\"setProxy(DEFAULT_PROXY_URL)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === DEFAULT_PROXY_URL\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use proxy.scalar.com (default)\n            </ScalarButton>\n\n            <!-- Custom proxy (only if configured) -->\n            <ScalarButton\n              v-if=\"proxyUrl && proxyUrl !== DEFAULT_PROXY_URL\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.proxyUrl === proxyUrl,\n                  }),\n                )\n              \"\n              @click=\"setProxy(proxyUrl)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"{\n                  'bg-c-accent text-b-1 border-transparent':\n                    activeWorkspace?.proxyUrl === proxyUrl,\n                }\">\n                <ScalarIcon\n                  v-if=\"activeWorkspace?.proxyUrl === proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Use custom proxy ({{ proxyUrl }})\n            </ScalarButton>\n\n            <!-- No proxy -->\n            <ScalarButton\n              :class=\"cx(buttonStyles({ active: !activeWorkspace?.proxyUrl }))\"\n              @click=\"setProxy(undefined)\">\n              <div\n                class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                :class=\"\n                  !activeWorkspace?.proxyUrl &&\n                  'bg-c-accent text-b-1 border-transparent'\n                \">\n                <ScalarIcon\n                  v-if=\"!activeWorkspace?.proxyUrl\"\n                  icon=\"Checkmark\"\n                  size=\"xs\"\n                  thickness=\"3.5\" />\n              </div>\n              Skip the proxy\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Themes -->\n        <SettingsSection>\n          <template #title> Themes </template>\n          <template #description>\n            We've got a whole rainbow of themes for you to play with:\n          </template>\n\n          <div class=\"flex flex-col gap-2\">\n            <div class=\"grid grid-cols-2 gap-2\">\n              <ScalarButton\n                v-for=\"themeId in themeIds\"\n                :key=\"themeId\"\n                :class=\"\n                  cx(\n                    buttonStyles({\n                      active: activeWorkspace?.themeId === themeId,\n                    }),\n                  )\n                \"\n                @click=\"changeTheme(themeId)\">\n                <div class=\"flex items-center gap-2\">\n                  <div\n                    class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                    :class=\"{\n                      'bg-c-accent text-b-1 border-transparent':\n                        activeWorkspace?.themeId === themeId,\n                    }\">\n                    <ScalarIcon\n                      v-if=\"activeWorkspace?.themeId === themeId\"\n                      icon=\"Checkmark\"\n                      size=\"xs\"\n                      thickness=\"3.5\" />\n                  </div>\n                  {{ themeLabels[themeId] }}\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).light,\n                    }\" />\n                  <span\n                    class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).dark,\n                    }\" />\n                  <span\n                    class=\"border-c-3 inline-block h-5 w-5 rounded-full\"\n                    :style=\"{\n                      backgroundColor: getThemeColors(themeId).accent,\n                    }\" />\n                </div>\n              </ScalarButton>\n            </div>\n          </div>\n        </SettingsSection>\n\n        <!-- Frameworks -->\n        <SettingsSection>\n          <template #title> Framework Themes </template>\n          <template #description>\n            Are you a real fan? Show your support by using your favorite\n            framework's theme!\n          </template>\n\n          <div class=\"grid grid-cols-2 gap-2\">\n            <ScalarButton\n              v-for=\"themeId in integrationThemeIds\"\n              :key=\"themeId\"\n              :class=\"\n                cx(\n                  buttonStyles({\n                    active: activeWorkspace?.themeId === themeId,\n                  }),\n                )\n              \"\n              @click=\"changeTheme(themeId)\">\n              <div class=\"flex items-center gap-2\">\n                <div\n                  class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n                  :class=\"{\n                    'bg-c-accent text-b-1 border-transparent':\n                      activeWorkspace?.themeId === themeId,\n                  }\">\n                  <ScalarIcon\n                    v-if=\"activeWorkspace?.themeId === themeId\"\n                    icon=\"Checkmark\"\n                    size=\"xs\"\n                    thickness=\"3.5\" />\n                </div>\n                {{ themeLabels[themeId] }}\n              </div>\n              <div class=\"flex items-center gap-1\">\n                <div class=\"size-7 rounded-xl\">\n                  <IntegrationLogo :integration=\"themeId\" />\n                </div>\n              </div>\n            </ScalarButton>\n          </div>\n        </SettingsSection>\n\n        <!-- Appearance -->\n        <SettingsSection>\n          <template #title> Appearance </template>\n          <template #description>\n            Choose between light, dark, or system-based appearance for your\n            workspace.\n          </template>\n\n          <SettingsGeneralAppearance />\n        </SettingsSection>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, type DefineComponent } from 'vue'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutContent from '@/components/ViewLayout/ViewLayoutContent.vue'\n\nimport SettingsGeneral from './SettingsGeneral.vue'\n\ntype SettingsGroup = {\n  component: DefineComponent<any, any, any>\n  title: string\n}\n\nconst settings: Record<string, SettingsGroup> = {\n  general: {\n    component: SettingsGeneral,\n    title: 'general',\n  },\n}\n\nconst activeSetting = ref('general')\n</script>\n<template>\n  <ViewLayout>\n    <ViewLayoutContent class=\"flex-1\">\n      <component\n        :is=\"settings[activeSetting]!.component\"\n        v-if=\"settings[activeSetting]\" />\n    </ViewLayoutContent>\n  </ViewLayout>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, type DefineComponent } from 'vue'\n\nimport ViewLayout from '@/components/ViewLayout/ViewLayout.vue'\nimport ViewLayoutContent from '@/components/ViewLayout/ViewLayoutContent.vue'\n\nimport SettingsGeneral from './SettingsGeneral.vue'\n\ntype SettingsGroup = {\n  component: DefineComponent<any, any, any>\n  title: string\n}\n\nconst settings: Record<string, SettingsGroup> = {\n  general: {\n    component: SettingsGeneral,\n    title: 'general',\n  },\n}\n\nconst activeSetting = ref('general')\n</script>\n<template>\n  <ViewLayout>\n    <ViewLayoutContent class=\"flex-1\">\n      <component\n        :is=\"settings[activeSetting]!.component\"\n        v-if=\"settings[activeSetting]\" />\n    </ViewLayoutContent>\n  </ViewLayout>\n</template>\n"],"mappings":"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"}

package/dist/Sidebar-C6AdX6-N.js

@@ -0,0 +1,73 @@
+import { r as useWorkspace } from "./store-DpSUVhjp.js";
+import { a as useLayout, r as useSidebar } from "./useSidebar-DLTwHDI-.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, vShow, withDirectives } from "vue";
+import { useBreakpoints } from "@scalar/use-hooks/useBreakpoints";
+//#region src/components/Sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5"
+};
+var _hoisted_2 = { class: "m-0 text-sm font-medium whitespace-nowrap" };
+var _hoisted_3 = { class: "bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5" };
+//#endregion
+//#region src/components/Sidebar/Sidebar.vue
+var Sidebar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "Sidebar",
+	props: { title: {} },
+	setup(__props) {
+		const { isSidebarOpen } = useSidebar();
+		const { sidebarWidth, setSidebarWidth } = useWorkspace();
+		const { layout } = useLayout();
+		const isDragging = ref(false);
+		const sidebarRef = ref(null);
+		const { breakpoints } = useBreakpoints();
+		const startDrag = (event) => {
+			event.preventDefault();
+			const startX = event.clientX;
+			/** Current sidebar width when dragging starts */
+			const startWidth = Number.parseInt(getComputedStyle(sidebarRef.value).width || sidebarWidth.value, 10);
+			const doDrag = (dragEvent) => {
+				isDragging.value = true;
+				document.body.classList.add("dragging");
+				let newWidth = startWidth + dragEvent.clientX - startX;
+				if (newWidth > 420)
+ /** Elastic effect */
+				newWidth = 420 + (newWidth - 420) * .2;
+				if (newWidth < 240) newWidth = 240;
+				setSidebarWidth(`${newWidth}px`);
+			};
+			const stopDrag = () => {
+				isDragging.value = false;
+				document.body.classList.remove("dragging");
+				document.documentElement.removeEventListener("mousemove", doDrag, false);
+				document.documentElement.removeEventListener("mouseup", stopDrag, false);
+				/** Reset to max width if exceeded */
+				if (Number.parseInt(sidebarWidth.value, 10) > 420) setSidebarWidth("360px");
+				else if (Number.parseInt(sidebarWidth.value, 10) < 240) setSidebarWidth("240px");
+			};
+			document.documentElement.addEventListener("mousemove", doDrag, false);
+			document.documentElement.addEventListener("mouseup", stopDrag, false);
+		};
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("aside", {
+				ref_key: "sidebarRef",
+				ref: sidebarRef,
+				class: normalizeClass(["sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0", { dragging: isDragging.value }]),
+				style: normalizeStyle({ width: unref(breakpoints).lg ? unref(sidebarWidth) : "100%" })
+			}, [
+				renderSlot(_ctx.$slots, "header", {}, void 0, true),
+				unref(layout) !== "modal" && __props.title ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("h2", _hoisted_2, toDisplayString(__props.title), 1), !unref(breakpoints).lg ? renderSlot(_ctx.$slots, "button", { key: 0 }, void 0, true) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(["custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]", { "sidebar-mask": unref(layout) !== "modal" }]) }, [renderSlot(_ctx.$slots, "content", {}, void 0, true)], 2),
+				unref(breakpoints).lg ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "button", {}, void 0, true)]), createElementVNode("div", {
+					class: "resizer",
+					onMousedown: startDrag
+				}, null, 32)], 64)) : createCommentVNode("", true)
+			], 6)), [[vShow, unref(isSidebarOpen)]]);
+		};
+	}
+}), [["__scopeId", "data-v-7aa06e5a"]]);
+//#endregion
+export { Sidebar_default as t };
+
+//# sourceMappingURL=Sidebar-C6AdX6-N.js.map

package/dist/Sidebar-C6AdX6-N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar-C6AdX6-N.js","names":[],"sources":["../src/components/Sidebar/Sidebar.vue","../src/components/Sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { ref } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { useWorkspace } from '@/store'\n\ndefineProps<{\n  title?: string\n}>()\n\nconst { isSidebarOpen } = useSidebar()\nconst { sidebarWidth, setSidebarWidth } = useWorkspace()\nconst { layout } = useLayout()\nconst isDragging = ref(false)\n\nconst sidebarRef = ref<HTMLElement | null>(null)\nconst { breakpoints } = useBreakpoints()\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n  /** Current sidebar width when dragging starts */\n  const startWidth = Number.parseInt(\n    getComputedStyle(sidebarRef.value!).width || sidebarWidth.value,\n    10,\n  )\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add('dragging')\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    setSidebarWidth(`${newWidth}px`)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove('dragging')\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (Number.parseInt(sidebarWidth.value, 10) > 420) {\n      setSidebarWidth('360px')\n    } else if (Number.parseInt(sidebarWidth.value, 10) < 240) {\n      setSidebarWidth('240px')\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <aside\n    v-show=\"isSidebarOpen\"\n    ref=\"sidebarRef\"\n    class=\"sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0\"\n    :class=\"{ dragging: isDragging }\"\n    :style=\"{ width: breakpoints.lg ? sidebarWidth : '100%' }\">\n    <slot name=\"header\" />\n    <div\n      v-if=\"layout !== 'modal' && title\"\n      class=\"xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5\">\n      <h2 class=\"m-0 text-sm font-medium whitespace-nowrap\">\n        {{ title }}\n      </h2>\n      <slot\n        v-if=\"!breakpoints.lg\"\n        name=\"button\" />\n    </div>\n    <div\n      class=\"custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]\"\n      :class=\"{\n        'sidebar-mask': layout !== 'modal',\n      }\">\n      <slot name=\"content\" />\n    </div>\n    <template v-if=\"breakpoints.lg\">\n      <div\n        class=\"bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5\">\n        <slot name=\"button\" />\n      </div>\n      <div\n        class=\"resizer\"\n        @mousedown=\"startDrag\" />\n    </template>\n  </aside>\n</template>\n<style scoped>\n@reference \"@/style.css\";\n\n.sidebar-height {\n  min-height: 100%;\n}\n@variant md {\n  .sidebar-mask {\n    mask-image: linear-gradient(\n      0,\n      transparent 0,\n      transparent 0,\n      var(--scalar-background-2) 30px\n    );\n  }\n}\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n}\n.resizer:hover,\n.dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n.dragging {\n  cursor: col-resize;\n}\n.dragging::before {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useBreakpoints } from '@scalar/use-hooks/useBreakpoints'\nimport { ref } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { useWorkspace } from '@/store'\n\ndefineProps<{\n  title?: string\n}>()\n\nconst { isSidebarOpen } = useSidebar()\nconst { sidebarWidth, setSidebarWidth } = useWorkspace()\nconst { layout } = useLayout()\nconst isDragging = ref(false)\n\nconst sidebarRef = ref<HTMLElement | null>(null)\nconst { breakpoints } = useBreakpoints()\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n  /** Current sidebar width when dragging starts */\n  const startWidth = Number.parseInt(\n    getComputedStyle(sidebarRef.value!).width || sidebarWidth.value,\n    10,\n  )\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add('dragging')\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    setSidebarWidth(`${newWidth}px`)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove('dragging')\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (Number.parseInt(sidebarWidth.value, 10) > 420) {\n      setSidebarWidth('360px')\n    } else if (Number.parseInt(sidebarWidth.value, 10) < 240) {\n      setSidebarWidth('240px')\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <aside\n    v-show=\"isSidebarOpen\"\n    ref=\"sidebarRef\"\n    class=\"sidebar bg-b-1 relative flex min-w-full flex-1 flex-col overflow-hidden leading-5 md:min-w-fit md:flex-none md:border-r md:border-b-0\"\n    :class=\"{ dragging: isDragging }\"\n    :style=\"{ width: breakpoints.lg ? sidebarWidth : '100%' }\">\n    <slot name=\"header\" />\n    <div\n      v-if=\"layout !== 'modal' && title\"\n      class=\"xl:min-h-header flex min-h-12 items-center justify-between px-3 py-1.5 text-sm md:px-[18px] md:py-2.5\">\n      <h2 class=\"m-0 text-sm font-medium whitespace-nowrap\">\n        {{ title }}\n      </h2>\n      <slot\n        v-if=\"!breakpoints.lg\"\n        name=\"button\" />\n    </div>\n    <div\n      class=\"custom-scroll sidebar-height w-[inherit] pb-0 md:pb-[37px]\"\n      :class=\"{\n        'sidebar-mask': layout !== 'modal',\n      }\">\n      <slot name=\"content\" />\n    </div>\n    <template v-if=\"breakpoints.lg\">\n      <div\n        class=\"bg-b-1 sticky bottom-0 z-10 w-[inherit] pt-0 has-[.empty-sidebar-item]:border-t md:px-2.5 md:pb-2.5\">\n        <slot name=\"button\" />\n      </div>\n      <div\n        class=\"resizer\"\n        @mousedown=\"startDrag\" />\n    </template>\n  </aside>\n</template>\n<style scoped>\n@reference \"@/style.css\";\n\n.sidebar-height {\n  min-height: 100%;\n}\n@variant md {\n  .sidebar-mask {\n    mask-image: linear-gradient(\n      0,\n      transparent 0,\n      transparent 0,\n      var(--scalar-background-2) 30px\n    );\n  }\n}\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n}\n.resizer:hover,\n.dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n.dragging {\n  cursor: col-resize;\n}\n.dragging::before {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;ECYA,MAAM,EAAE,kBAAkB,YAAW;EACrC,MAAM,EAAE,cAAc,oBAAoB,cAAa;EACvD,MAAM,EAAE,WAAW,WAAU;EAC7B,MAAM,aAAa,IAAI,MAAK;EAE5B,MAAM,aAAa,IAAwB,KAAI;EAC/C,MAAM,EAAE,gBAAgB,gBAAe;EAEvC,MAAM,aAAa,UAAsB;AACvC,SAAM,gBAAe;GAErB,MAAM,SAAS,MAAM;;GAErB,MAAM,aAAa,OAAO,SACxB,iBAAiB,WAAW,MAAO,CAAC,SAAS,aAAa,OAC1D,GACF;GAEA,MAAM,UAAU,cAA0B;AACxC,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,IAAI,WAAU;IACtC,IAAI,WAAW,aAAa,UAAU,UAAU;AAChD,QAAI,WAAW;;AAEb,eAAW,OAAO,WAAW,OAAO;AAEtC,QAAI,WAAW,IACb,YAAW;AAEb,oBAAgB,GAAG,SAAS,IAAG;;GAGjC,MAAM,iBAAiB;AACrB,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,OAAO,WAAU;AACzC,aAAS,gBAAgB,oBAAoB,aAAa,QAAQ,MAAK;AACvE,aAAS,gBAAgB,oBAAoB,WAAW,UAAU,MAAK;;AAEvE,QAAI,OAAO,SAAS,aAAa,OAAO,GAAG,GAAG,IAC5C,iBAAgB,QAAO;aACd,OAAO,SAAS,aAAa,OAAO,GAAG,GAAG,IACnD,iBAAgB,QAAO;;AAI3B,YAAS,gBAAgB,iBAAiB,aAAa,QAAQ,MAAK;AACpE,YAAS,gBAAgB,iBAAiB,WAAW,UAAU,MAAK;;;uCAIpE,mBAiCQ,SAAA;aA/BF;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,yIAAuI,EAAA,UACzH,WAAA,OAAU,CAAA,CAAA;IAC7B,OAAK,eAAA,EAAA,OAAW,MAAA,YAAW,CAAC,KAAK,MAAA,aAAY,GAAA,QAAA,CAAA;;IAC9C,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA;IAEd,MAAA,OAAM,KAAA,WAAgB,QAAA,SAAA,WAAA,EAD9B,mBASM,OATN,YASM,CANJ,mBAEK,MAFL,YAEK,gBADA,QAAA,MAAK,EAAA,EAAA,EAAA,CAGD,MAAA,YAAW,CAAC,KADrB,WAEkB,KAAA,QAAA,UAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,KAAA,GAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;IAEpB,mBAMM,OAAA,EALJ,OAAK,eAAA,CAAC,8DAA4D,EAAA,gBAChC,MAAA,OAAM,KAAA,SAAA,CAAA,CAAA,EAAA,EAAA,CAGxC,WAAuB,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,EAAA,EAAA;IAET,MAAA,YAAW,CAAC,MAAA,WAAA,EAA5B,mBAQW,UAAA,EAAA,KAAA,GAAA,EAAA,CAPT,mBAGM,OAHN,YAGM,CADJ,WAAsB,KAAA,QAAA,UAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA,EAExB,mBAE2B,OAAA;KADzB,OAAM;KACL,aAAW;;oBA9BR,MAAA,cAAa,CAAA,CAAA,CAAA"}

package/dist/SidebarButton-BAagdMDe.js

@@ -0,0 +1,37 @@
+import { a as useLayout } from "./useSidebar-DLTwHDI-.js";
+import { createBlock, createCommentVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+import { ScalarButton, ScalarHotkey } from "@scalar/components";
+//#endregion
+//#region src/components/Sidebar/SidebarButton.vue
+var SidebarButton_default = /* @__PURE__ */ defineComponent({
+	__name: "SidebarButton",
+	props: {
+		click: { type: Function },
+		hotkey: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { layout } = useLayout();
+		const handleClick = () => {
+			props.click();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarButton), {
+				class: "bg-b-1 text-c-1 hover:bg-b-2 group relative h-auto w-auto border px-2 py-1 md:w-full md:p-1.5",
+				variant: "outlined",
+				onClick: handleClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "title"), __props.hotkey && unref(layout) === "desktop" ? (openBlock(), createBlock(unref(ScalarHotkey), {
+					key: 0,
+					class: "text-c-2 add-item-hotkey absolute right-2 hidden group-hover:opacity-80 md:flex",
+					hotkey: __props.hotkey
+				}, null, 8, ["hotkey"])) : createCommentVNode("", true)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { SidebarButton_default as t };
+
+//# sourceMappingURL=SidebarButton-BAagdMDe.js.map

package/dist/SidebarButton-BAagdMDe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarButton-BAagdMDe.js","names":[],"sources":["../src/components/Sidebar/SidebarButton.vue","../src/components/Sidebar/SidebarButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarHotkey } from '@scalar/components'\n\nimport { useLayout } from '@/hooks'\n\nconst props = defineProps<{\n  click: () => void\n  hotkey?: string\n}>()\n\nconst { layout } = useLayout()\n\nconst handleClick = () => {\n  props.click()\n}\n</script>\n<template>\n  <ScalarButton\n    class=\"bg-b-1 text-c-1 hover:bg-b-2 group relative h-auto w-auto border px-2 py-1 md:w-full md:p-1.5\"\n    variant=\"outlined\"\n    @click=\"handleClick\">\n    <slot name=\"title\" />\n    <ScalarHotkey\n      v-if=\"hotkey && layout === 'desktop'\"\n      class=\"text-c-2 add-item-hotkey absolute right-2 hidden group-hover:opacity-80 md:flex\"\n      :hotkey=\"hotkey\" />\n  </ScalarButton>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarHotkey } from '@scalar/components'\n\nimport { useLayout } from '@/hooks'\n\nconst props = defineProps<{\n  click: () => void\n  hotkey?: string\n}>()\n\nconst { layout } = useLayout()\n\nconst handleClick = () => {\n  props.click()\n}\n</script>\n<template>\n  <ScalarButton\n    class=\"bg-b-1 text-c-1 hover:bg-b-2 group relative h-auto w-auto border px-2 py-1 md:w-full md:p-1.5\"\n    variant=\"outlined\"\n    @click=\"handleClick\">\n    <slot name=\"title\" />\n    <ScalarHotkey\n      v-if=\"hotkey && layout === 'desktop'\"\n      class=\"text-c-2 add-item-hotkey absolute right-2 hidden group-hover:opacity-80 md:flex\"\n      :hotkey=\"hotkey\" />\n  </ScalarButton>\n</template>\n"],"mappings":";;;;;;;;;;;;ECKA,MAAM,QAAQ;EAKd,MAAM,EAAE,WAAW,WAAU;EAE7B,MAAM,oBAAoB;AACxB,SAAM,OAAM;;;uBAIZ,YASe,MAAA,aAAA,EAAA;IARb,OAAM;IACN,SAAQ;IACP,SAAO;;2BACa,CAArB,WAAqB,KAAA,QAAA,QAAA,EAEb,QAAA,UAAU,MAAA,OAAM,KAAA,aAAA,WAAA,EADxB,YAGqB,MAAA,aAAA,EAAA;;KADnB,OAAM;KACL,QAAQ,QAAA"}