@scalar/blocks 0.1.0

package/dist/code-example/components/ExamplePicker.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExamplePicker.vue.script.js","names":["$attrs"],"sources":["../../../src/code-example/components/ExamplePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport {\n  ScalarListbox,\n  type ScalarListboxOption,\n} from '@scalar/components/listbox'\nimport { ScalarIconCaretDown } from '@scalar/icons'\nimport type { MediaTypeObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nconst { examples = {} } = defineProps<{\n  examples?: MediaTypeObject['examples'] | Record<string, string>\n}>()\n\nconst selectedExampleKey = defineModel<string>({\n  required: true,\n})\n\ndefineOptions({ inheritAttrs: false })\n\nconst exampleOptions = computed<ScalarListboxOption[]>(() =>\n  Object.entries(examples).map(([key, example]) => ({\n    id: key,\n    label: example?.summary ?? key,\n  })),\n)\n\nconst selectedExample = computed<ScalarListboxOption | undefined>({\n  get: () =>\n    exampleOptions.value.find(({ id }) => id === selectedExampleKey.value),\n  set: (v) => (selectedExampleKey.value = v?.id ?? ''),\n})\n</script>\n\n<template>\n  <ScalarListbox\n    v-model=\"selectedExample\"\n    class=\"w-fit min-w-32\"\n    :options=\"exampleOptions\"\n    placement=\"bottom-start\"\n    teleport>\n    <ScalarButton\n      class=\"text-c-2 hover:text-c-1 flex h-full w-fit min-w-0 gap-1.5 px-1.5 py-0.75 text-base font-normal\"\n      data-testid=\"example-picker\"\n      variant=\"ghost\"\n      v-bind=\"$attrs\">\n      <div class=\"min-w-0 flex-1 truncate\">\n        {{ selectedExample?.label ?? 'Select an example' }}\n      </div>\n      <ScalarIconCaretDown\n        class=\"ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100\"\n        weight=\"bold\" />\n    </ScalarButton>\n  </ScalarListbox>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAcA,IAAM,IAAqB,EAAmB,GAAA,aAE7C,EAIK,IAAiB,QACrB,OAAO,QAAQ,EAAA,SAAS,CAAC,KAAK,CAAC,GAAK,QAAc;GAChD,IAAI;GACJ,OAAO,GAAS,WAAW;GAC5B,EAAE,CACL,EAEM,IAAkB,EAA0C;GAChE,WACE,EAAe,MAAM,MAAM,EAAE,YAAS,MAAO,EAAmB,MAAM;GACxE,MAAM,MAAO,EAAmB,QAAQ,GAAG,MAAM;GAClD,CAAA;yBAIC,EAkBgB,EAAA,EAAA,EAAA;eAjBL,EAAA;4CAAe,QAAA;GACxB,OAAM;GACL,SAAS,EAAA;GACV,WAAU;GACV,UAAA;;oBAYe,CAXf,EAWe,EAAA,EAAA,EAXf,EAWe;IAVb,OAAM;IACN,eAAY;IACZ,SAAQ;MACAA,EAAAA,OAAM,EAAA;qBAGR,CAFN,EAEM,OAFN,GAEM,EADD,EAAA,OAAiB,SAAK,oBAAA,EAAA,EAAA,EAE3B,EAEkB,EAAA,EAAA,EAAA;KADhB,OAAM;KACN,QAAO"}

package/dist/code-example/components/HttpMethod.vue.d.ts

@@ -0,0 +1,26 @@
+import type { HttpMethod } from '@scalar/helpers/http/http-methods';
+import { type Component } from 'vue';
+type __VLS_Props = {
+    /** The type of element to render as, defaults to `span` */
+    as?: Component | string;
+    /** The css style property or variable that will be set to the request method color, defaults to `color` */
+    property?: string;
+    /** Whether or not to abbreviated the slot content */
+    short?: boolean;
+    /** The HTTP method to show */
+    method: HttpMethod | string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=HttpMethod.vue.d.ts.map

package/dist/code-example/components/HttpMethod.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HttpMethod.vue.d.ts","sourceRoot":"","sources":["../../../src/code-example/components/HttpMethod.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAEnE,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,KAAK,CAAA;AAE9C,KAAK,WAAW,GAAG;IACjB,2DAA2D;IAC3D,EAAE,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACvB,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8BAA8B;IAC9B,MAAM,EAAE,UAAU,GAAG,MAAM,CAAA;CAC5B,CAAC;AAiDF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/code-example/components/HttpMethod.vue.js

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

package/dist/code-example/components/HttpMethod.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HttpMethod.vue.js","names":[],"sources":["../../../src/code-example/components/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getHttpMethodInfo } from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { normalizeHttpMethod } from '@scalar/helpers/http/normalize-http-method'\nimport { computed, type Component } from 'vue'\n\nconst props = defineProps<{\n  /** The type of element to render as, defaults to `span` */\n  as?: Component | string\n  /** The css style property or variable that will be set to the request method color, defaults to `color` */\n  property?: string\n  /** Whether or not to abbreviated the slot content */\n  short?: boolean\n  /** The HTTP method to show */\n  method: HttpMethod | string\n}>()\n\n/** Grabs the method info object which contains abbreviation, color, and background color etc */\nconst httpMethodInfo = computed(() =>\n  getHttpMethodInfo(String(props.method || '')),\n)\n\n/** Full method name */\nconst normalized = computed(() => normalizeHttpMethod(props.method))\n</script>\n\n<template>\n  <component\n    :is=\"as ?? 'span'\"\n    class=\"uppercase\"\n    :style=\"{ [property || 'color']: httpMethodInfo.colorVar }\">\n    <slot />\n    {{ short ? httpMethodInfo.short : normalized }}\n  </component>\n</template>\n"],"mappings":""}

package/dist/code-example/components/HttpMethod.vue.script.js

@@ -0,0 +1,27 @@
+import { computed as e, createBlock as t, createTextVNode as n, defineComponent as r, normalizeStyle as i, openBlock as a, renderSlot as o, resolveDynamicComponent as s, toDisplayString as c, withCtx as l } from "vue";
+import { getHttpMethodInfo as u } from "@scalar/helpers/http/http-info";
+import { normalizeHttpMethod as d } from "@scalar/helpers/http/normalize-http-method";
+//#region src/code-example/components/HttpMethod.vue?vue&type=script&setup=true&lang.ts
+var f = /* @__PURE__ */ r({
+	__name: "HttpMethod",
+	props: {
+		as: {},
+		property: {},
+		short: { type: Boolean },
+		method: {}
+	},
+	setup(r) {
+		let f = r, p = e(() => u(String(f.method || ""))), m = e(() => d(f.method));
+		return (e, u) => (a(), t(s(r.as ?? "span"), {
+			class: "uppercase",
+			style: i({ [r.property || "color"]: p.value.colorVar })
+		}, {
+			default: l(() => [o(e.$slots, "default"), n(" " + c(r.short ? p.value.short : m.value), 1)]),
+			_: 3
+		}, 8, ["style"]));
+	}
+});
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=HttpMethod.vue.script.js.map

package/dist/code-example/components/HttpMethod.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HttpMethod.vue.script.js","names":[],"sources":["../../../src/code-example/components/HttpMethod.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getHttpMethodInfo } from '@scalar/helpers/http/http-info'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport { normalizeHttpMethod } from '@scalar/helpers/http/normalize-http-method'\nimport { computed, type Component } from 'vue'\n\nconst props = defineProps<{\n  /** The type of element to render as, defaults to `span` */\n  as?: Component | string\n  /** The css style property or variable that will be set to the request method color, defaults to `color` */\n  property?: string\n  /** Whether or not to abbreviated the slot content */\n  short?: boolean\n  /** The HTTP method to show */\n  method: HttpMethod | string\n}>()\n\n/** Grabs the method info object which contains abbreviation, color, and background color etc */\nconst httpMethodInfo = computed(() =>\n  getHttpMethodInfo(String(props.method || '')),\n)\n\n/** Full method name */\nconst normalized = computed(() => normalizeHttpMethod(props.method))\n</script>\n\n<template>\n  <component\n    :is=\"as ?? 'span'\"\n    class=\"uppercase\"\n    :style=\"{ [property || 'color']: httpMethodInfo.colorVar }\">\n    <slot />\n    {{ short ? httpMethodInfo.short : normalized }}\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAYR,IAAiB,QACrB,EAAkB,OAAO,EAAM,UAAU,GAAG,CAAC,CAC/C,EAGM,IAAa,QAAe,EAAoB,EAAM,OAAO,CAAA;yBAIjE,EAMY,EALL,EAAA,MAAE,OAAA,EAAA;GACP,OAAM;GACL,OAAK,EAAA,GAAK,EAAA,YAAQ,UAAc,EAAA,MAAe,UAAQ,CAAA;;oBAChD,CAAR,EAAQ,EAAA,QAAA,UAAA,EAAA,EAAA,MACR,EAAG,EAAA,QAAQ,EAAA,MAAe,QAAQ,EAAA,MAAU,EAAA,EAAA,CAAA,CAAA"}

package/dist/code-example/helpers/filter-clients-by-query.d.ts

@@ -0,0 +1,9 @@
+import type { CustomClientOptionGroup, CustomOrDefaultClientOption } from '../types';
+/**
+ * Filters the clients based on a query
+ *
+ * When dealing with multiple groups, include all options from a group if the
+ * group label itself matches — so searching "JavaScript" shows all JS clients.
+ */
+export declare const filterClientsByQuery: (query: string, options: CustomOrDefaultClientOption[], groups: CustomClientOptionGroup[]) => CustomOrDefaultClientOption[];
+//# sourceMappingURL=filter-clients-by-query.d.ts.map

package/dist/code-example/helpers/filter-clients-by-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-clients-by-query.d.ts","sourceRoot":"","sources":["../../../src/code-example/helpers/filter-clients-by-query.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAA;AAsBpF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,UACxB,MAAM,WACJ,2BAA2B,EAAE,UAC9B,uBAAuB,EAAE,KAChC,2BAA2B,EAuBiE,CAAA"}

package/dist/code-example/helpers/filter-clients-by-query.js

@@ -0,0 +1,21 @@
+//#region src/code-example/helpers/filter-clients-by-query.ts
+var e = (e, t) => {
+	let n = t.toLowerCase();
+	return e.label.toLowerCase().includes(n) || e.clientKey.toLowerCase().includes(n) || e.lang.toLowerCase().includes(n);
+}, t = (e, t) => {
+	let n = t.toLowerCase();
+	return e.label.toLowerCase().includes(n) || e.key.toLowerCase().includes(n);
+}, n = ((n, r, i) => {
+	if (n === "") return r;
+	let a = n.toLowerCase(), o = i ? i.filter((e) => e.label && e.options.length > 0).length : 0;
+	if (i && o > 1) {
+		let n = [];
+		for (let r of i) t(r, a) ? n.push(...r.options) : n.push(...r.options.filter((t) => e(t, a)));
+		return n;
+	}
+	return r.filter((t) => e(t, a));
+});
+//#endregion
+export { n as filterClientsByQuery };
+
+//# sourceMappingURL=filter-clients-by-query.js.map

package/dist/code-example/helpers/filter-clients-by-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-clients-by-query.js","names":[],"sources":["../../../src/code-example/helpers/filter-clients-by-query.ts"],"sourcesContent":["import type { ScalarComboboxFilterFunction } from '@scalar/components/combobox'\n\nimport type { CustomClientOptionGroup, CustomOrDefaultClientOption } from '../types'\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesOption = (option: CustomOrDefaultClientOption, query: string) => {\n  const q = query.toLowerCase()\n  return (\n    option.label.toLowerCase().includes(q) ||\n    option.clientKey.toLowerCase().includes(q) ||\n    option.lang.toLowerCase().includes(q)\n  )\n}\n\n/**\n * Checks if a client label, client key, or language matches a query\n */\nconst matchesGroup = (group: CustomClientOptionGroup, query: string) => {\n  const q = query.toLowerCase()\n  return group.label.toLowerCase().includes(q) || group.key.toLowerCase().includes(q)\n}\n\n/**\n * Filters the clients based on a query\n *\n * When dealing with multiple groups, include all options from a group if the\n * group label itself matches — so searching \"JavaScript\" shows all JS clients.\n */\nexport const filterClientsByQuery = ((\n  query: string,\n  options: CustomOrDefaultClientOption[],\n  groups: CustomClientOptionGroup[],\n): CustomOrDefaultClientOption[] => {\n  if (query === '') {\n    return options\n  }\n\n  const q = query.toLowerCase()\n\n  // Only activate when more than one group is actually visible (has a label and options).\n  const visibleGroupCount = groups ? groups.filter((g) => g.label && g.options.length > 0).length : 0\n\n  if (groups && visibleGroupCount > 1) {\n    const result: CustomOrDefaultClientOption[] = []\n    for (const group of groups) {\n      if (matchesGroup(group, q)) {\n        result.push(...group.options)\n      } else {\n        result.push(...group.options.filter((o) => matchesOption(o, q)))\n      }\n    }\n    return result\n  }\n\n  return options.filter((o) => matchesOption(o, q))\n}) satisfies ScalarComboboxFilterFunction<CustomOrDefaultClientOption, CustomClientOptionGroup>\n"],"mappings":";AAOA,IAAM,KAAiB,GAAqC,MAAkB;CAC5E,IAAM,IAAI,EAAM,aAAa;AAC7B,QACE,EAAO,MAAM,aAAa,CAAC,SAAS,EAAE,IACtC,EAAO,UAAU,aAAa,CAAC,SAAS,EAAE,IAC1C,EAAO,KAAK,aAAa,CAAC,SAAS,EAAE;GAOnC,KAAgB,GAAgC,MAAkB;CACtE,IAAM,IAAI,EAAM,aAAa;AAC7B,QAAO,EAAM,MAAM,aAAa,CAAC,SAAS,EAAE,IAAI,EAAM,IAAI,aAAa,CAAC,SAAS,EAAE;GASxE,MACX,GACA,GACA,MACkC;AAClC,KAAI,MAAU,GACZ,QAAO;CAGT,IAAM,IAAI,EAAM,aAAa,EAGvB,IAAoB,IAAS,EAAO,QAAQ,MAAM,EAAE,SAAS,EAAE,QAAQ,SAAS,EAAE,CAAC,SAAS;AAElG,KAAI,KAAU,IAAoB,GAAG;EACnC,IAAM,IAAwC,EAAE;AAChD,OAAK,IAAM,KAAS,EAClB,CAAI,EAAa,GAAO,EAAE,GACxB,EAAO,KAAK,GAAG,EAAM,QAAQ,GAE7B,EAAO,KAAK,GAAG,EAAM,QAAQ,QAAQ,MAAM,EAAc,GAAG,EAAE,CAAC,CAAC;AAGpE,SAAO;;AAGT,QAAO,EAAQ,QAAQ,MAAM,EAAc,GAAG,EAAE,CAAC"}

package/dist/code-example/helpers/find-client.d.ts

@@ -0,0 +1,41 @@
+import { type AvailableClients } from '@scalar/snippetz';
+import type { ClientOption, CustomClientOption, CustomClientOptionGroup } from '../types';
+export declare const DEFAULT_CLIENT = "shell/curl";
+/**
+ * A selection the code sample picker understands: either a built-in client id
+ * (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).
+ *
+ * The custom part is typed as `string & {}` rather than the `custom/${string}`
+ * template literal: unioning that template literal with the (very large) built-in
+ * client-id union trips TypeScript's "union too complex" limit inside Vue's
+ * `defineProps` macro. `string & {}` keeps editor hints for the known client ids
+ * without expanding the union.
+ */
+export type SelectedClientId = AvailableClients[number] | (string & {});
+/** Type guard to check if a string is a valid built-in client id */
+export declare const isClient: (id: any) => id is AvailableClients[number];
+/** Type guard for any selection the picker can restore (built-in client or custom sample id) */
+export declare const isSelectedClient: (id: any) => id is SelectedClientId;
+/**
+ * Finds and returns the appropriate client option to select for an operation.
+ *
+ * Selection rules, given the globally selected client/sample id:
+ *
+ * 1. A custom sample is selected (`custom/<lang>`): show the matching sample on
+ *    this operation. If this operation has no sample for that exact language, we
+ *    keep showing a custom sample (its first one) so the selection stays "global".
+ * 2. An explicit built-in client is selected: it wins, even when the operation
+ *    also has custom samples. This includes the default client (`shell/curl`):
+ *    a built-in id only reaches us through a real selection (config, persistence,
+ *    or the picker), never as an implicit default, so a deliberate cURL pick must
+ *    stick instead of snapping back to an SDK example.
+ * 3. Otherwise (nothing selected yet): prefer a custom sample when the operation
+ *    has one, so custom examples are the default.
+ * 4. Fall back to the default built-in client, then the first option.
+ *
+ * @param clientGroups - Array of client option groups, each containing a label and array of client options
+ * @param clientId - Optional selection to restore (e.g. 'js/fetch' or 'custom/python')
+ * @returns The selected client option, or undefined when there is nothing to select
+ */
+export declare const findClient: (clientGroups: CustomClientOptionGroup[], clientId?: SelectedClientId | undefined) => ClientOption | CustomClientOption | undefined;
+//# sourceMappingURL=find-client.d.ts.map

package/dist/code-example/helpers/find-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-client.d.ts","sourceRoot":"","sources":["../../../src/code-example/helpers/find-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAEzF,eAAO,MAAM,cAAc,eAAe,CAAA;AAE1C;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAEvE,oEAAoE;AACpE,eAAO,MAAM,QAAQ,GAAI,IAAI,GAAG,KAAG,EAAE,IAAI,gBAAgB,CAAC,MAAM,CAAmC,CAAA;AAEnG,gGAAgG;AAChG,eAAO,MAAM,gBAAgB,GAAI,IAAI,GAAG,KAAG,EAAE,IAAI,gBACqB,CAAA;AAEtE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,UAAU,GACrB,cAAc,uBAAuB,EAAE,EACvC,WAAW,gBAAgB,GAAG,SAAS,KACtC,YAAY,GAAG,kBAAkB,GAAG,SAmCtC,CAAA"}

package/dist/code-example/helpers/find-client.js

@@ -0,0 +1,20 @@
+import { AVAILABLE_CLIENTS as e } from "@scalar/snippetz";
+//#region src/code-example/helpers/find-client.ts
+var t = "shell/curl", n = (t) => e.includes(t), r = (e) => n(e) || typeof e == "string" && e.startsWith("custom/"), i = (e, t) => {
+	let n = (t) => {
+		for (let n of e) {
+			let e = n.options.find((e) => e.id === t);
+			if (e) return e;
+		}
+	}, r = e.find((e) => e.key === "custom")?.options[0];
+	if (t?.startsWith("custom")) return n(t) ?? r ?? n("shell/curl") ?? e[0]?.options[0];
+	if (t) {
+		let e = n(t);
+		if (e) return e;
+	}
+	return r || (n("shell/curl") ?? e[0]?.options[0]);
+};
+//#endregion
+export { t as DEFAULT_CLIENT, i as findClient, n as isClient, r as isSelectedClient };
+
+//# sourceMappingURL=find-client.js.map

package/dist/code-example/helpers/find-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-client.js","names":[],"sources":["../../../src/code-example/helpers/find-client.ts"],"sourcesContent":["import { AVAILABLE_CLIENTS, type AvailableClients } from '@scalar/snippetz'\n\nimport type { ClientOption, CustomClientOption, CustomClientOptionGroup } from '../types'\n\nexport const DEFAULT_CLIENT = 'shell/curl'\n\n/**\n * A selection the code sample picker understands: either a built-in client id\n * (e.g. `js/fetch`) or a custom sample id (e.g. `custom/python`).\n *\n * The custom part is typed as `string & {}` rather than the `custom/${string}`\n * template literal: unioning that template literal with the (very large) built-in\n * client-id union trips TypeScript's \"union too complex\" limit inside Vue's\n * `defineProps` macro. `string & {}` keeps editor hints for the known client ids\n * without expanding the union.\n */\nexport type SelectedClientId = AvailableClients[number] | (string & {})\n\n/** Type guard to check if a string is a valid built-in client id */\nexport const isClient = (id: any): id is AvailableClients[number] => AVAILABLE_CLIENTS.includes(id)\n\n/** Type guard for any selection the picker can restore (built-in client or custom sample id) */\nexport const isSelectedClient = (id: any): id is SelectedClientId =>\n  isClient(id) || (typeof id === 'string' && id.startsWith('custom/'))\n\n/**\n * Finds and returns the appropriate client option to select for an operation.\n *\n * Selection rules, given the globally selected client/sample id:\n *\n * 1. A custom sample is selected (`custom/<lang>`): show the matching sample on\n *    this operation. If this operation has no sample for that exact language, we\n *    keep showing a custom sample (its first one) so the selection stays \"global\".\n * 2. An explicit built-in client is selected: it wins, even when the operation\n *    also has custom samples. This includes the default client (`shell/curl`):\n *    a built-in id only reaches us through a real selection (config, persistence,\n *    or the picker), never as an implicit default, so a deliberate cURL pick must\n *    stick instead of snapping back to an SDK example.\n * 3. Otherwise (nothing selected yet): prefer a custom sample when the operation\n *    has one, so custom examples are the default.\n * 4. Fall back to the default built-in client, then the first option.\n *\n * @param clientGroups - Array of client option groups, each containing a label and array of client options\n * @param clientId - Optional selection to restore (e.g. 'js/fetch' or 'custom/python')\n * @returns The selected client option, or undefined when there is nothing to select\n */\nexport const findClient = (\n  clientGroups: CustomClientOptionGroup[],\n  clientId?: SelectedClientId | undefined,\n): ClientOption | CustomClientOption | undefined => {\n  const findById = (id: string) => {\n    for (const group of clientGroups) {\n      const option = group.options.find((option) => option.id === id)\n      if (option) {\n        return option\n      }\n    }\n    return undefined\n  }\n\n  const firstCustom = clientGroups.find((group) => group.key === 'custom')?.options[0]\n\n  // 1. A custom sample is selected: match the language, otherwise stay on a custom sample\n  if (clientId?.startsWith('custom')) {\n    return findById(clientId) ?? firstCustom ?? findById(DEFAULT_CLIENT) ?? clientGroups[0]?.options[0]\n  }\n\n  // 2. An explicit built-in client wins, even when custom samples exist. A built-in\n  //    id (including the default `shell/curl`) only reaches us through a real\n  //    selection, so it must stick rather than snap back to a custom sample.\n  if (clientId) {\n    const option = findById(clientId)\n    if (option) {\n      return option\n    }\n  }\n\n  // 3. Nothing selected yet: prefer a custom sample when the operation has one\n  if (firstCustom) {\n    return firstCustom\n  }\n\n  // 4. Otherwise fall back to the default built-in client, then the first option\n  return findById(DEFAULT_CLIENT) ?? clientGroups[0]?.options[0]\n}\n"],"mappings":";;AAIA,IAAa,IAAiB,cAejB,KAAY,MAA4C,EAAkB,SAAS,EAAG,EAGtF,KAAoB,MAC/B,EAAS,EAAG,IAAK,OAAO,KAAO,YAAY,EAAG,WAAW,UAAU,EAuBxD,KACX,GACA,MACkD;CAClD,IAAM,KAAY,MAAe;AAC/B,OAAK,IAAM,KAAS,GAAc;GAChC,IAAM,IAAS,EAAM,QAAQ,MAAM,MAAW,EAAO,OAAO,EAAG;AAC/D,OAAI,EACF,QAAO;;IAMP,IAAc,EAAa,MAAM,MAAU,EAAM,QAAQ,SAAS,EAAE,QAAQ;AAGlF,KAAI,GAAU,WAAW,SAAS,CAChC,QAAO,EAAS,EAAS,IAAI,KAAe,EAAA,aAAwB,IAAI,EAAa,IAAI,QAAQ;AAMnG,KAAI,GAAU;EACZ,IAAM,IAAS,EAAS,EAAS;AACjC,MAAI,EACF,QAAO;;AAUX,QALI,MAKG,EAAA,aAAwB,IAAI,EAAa,IAAI,QAAQ"}

package/dist/code-example/helpers/format-language.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Turn a free-form language identifier into a display label for the code sample picker.
+ *
+ * @param lang - The language identifier from a custom code sample (e.g. `typescript`)
+ * @returns A properly cased label (e.g. `TypeScript`), or `undefined` when no language is given
+ */
+export declare const formatLanguage: (lang?: string) => string | undefined;
+//# sourceMappingURL=format-language.d.ts.map

package/dist/code-example/helpers/format-language.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-language.d.ts","sourceRoot":"","sources":["../../../src/code-example/helpers/format-language.ts"],"names":[],"mappings":"AAyDA;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,SAMvD,CAAA"}

package/dist/code-example/helpers/format-language.js

@@ -0,0 +1,54 @@
+import { capitalize as e } from "@scalar/helpers/string/capitalize";
+//#region src/code-example/helpers/format-language.ts
+var t = {
+	c: "C",
+	clojure: "Clojure",
+	cpp: "C++",
+	"c++": "C++",
+	csharp: "C#",
+	"c#": "C#",
+	css: "CSS",
+	curl: "cURL",
+	dart: "Dart",
+	fsharp: "F#",
+	"f#": "F#",
+	go: "Go",
+	golang: "Go",
+	graphql: "GraphQL",
+	html: "HTML",
+	http: "HTTP",
+	java: "Java",
+	javascript: "JavaScript",
+	js: "JavaScript",
+	json: "JSON",
+	kotlin: "Kotlin",
+	node: "Node.js",
+	nodejs: "Node.js",
+	objc: "Objective-C",
+	"objective-c": "Objective-C",
+	ocaml: "OCaml",
+	php: "PHP",
+	powershell: "PowerShell",
+	py: "Python",
+	python: "Python",
+	r: "R",
+	ruby: "Ruby",
+	rust: "Rust",
+	scala: "Scala",
+	sh: "Shell",
+	shell: "Shell",
+	bash: "Shell",
+	sql: "SQL",
+	swift: "Swift",
+	ts: "TypeScript",
+	typescript: "TypeScript",
+	xml: "XML",
+	yaml: "YAML",
+	yml: "YAML"
+}, n = (n) => {
+	if (n) return t[n.toLowerCase()] ?? e(n);
+};
+//#endregion
+export { n as formatLanguage };
+
+//# sourceMappingURL=format-language.js.map

package/dist/code-example/helpers/format-language.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-language.js","names":[],"sources":["../../../src/code-example/helpers/format-language.ts"],"sourcesContent":["import { capitalize } from '@scalar/helpers/string/capitalize'\n\n/**\n * Display names for the most common languages found in custom code samples.\n *\n * Custom samples (`x-scalar-examples`, `x-readme`, `x-stainless-*`, …) carry a\n * free-form `lang` string that we otherwise show verbatim in the picker. This\n * map gives the common ones a properly cased label (e.g. `typescript` →\n * `TypeScript`). Anything not listed falls back to a simple capitalization.\n */\nconst LANGUAGE_LABELS: Record<string, string> = {\n  c: 'C',\n  clojure: 'Clojure',\n  cpp: 'C++',\n  'c++': 'C++',\n  csharp: 'C#',\n  'c#': 'C#',\n  css: 'CSS',\n  curl: 'cURL',\n  dart: 'Dart',\n  fsharp: 'F#',\n  'f#': 'F#',\n  go: 'Go',\n  golang: 'Go',\n  graphql: 'GraphQL',\n  html: 'HTML',\n  http: 'HTTP',\n  java: 'Java',\n  javascript: 'JavaScript',\n  js: 'JavaScript',\n  json: 'JSON',\n  kotlin: 'Kotlin',\n  node: 'Node.js',\n  nodejs: 'Node.js',\n  objc: 'Objective-C',\n  'objective-c': 'Objective-C',\n  ocaml: 'OCaml',\n  php: 'PHP',\n  powershell: 'PowerShell',\n  py: 'Python',\n  python: 'Python',\n  r: 'R',\n  ruby: 'Ruby',\n  rust: 'Rust',\n  scala: 'Scala',\n  sh: 'Shell',\n  shell: 'Shell',\n  bash: 'Shell',\n  sql: 'SQL',\n  swift: 'Swift',\n  ts: 'TypeScript',\n  typescript: 'TypeScript',\n  xml: 'XML',\n  yaml: 'YAML',\n  yml: 'YAML',\n}\n\n/**\n * Turn a free-form language identifier into a display label for the code sample picker.\n *\n * @param lang - The language identifier from a custom code sample (e.g. `typescript`)\n * @returns A properly cased label (e.g. `TypeScript`), or `undefined` when no language is given\n */\nexport const formatLanguage = (lang?: string): string | undefined => {\n  if (!lang) {\n    return undefined\n  }\n\n  return LANGUAGE_LABELS[lang.toLowerCase()] ?? capitalize(lang)\n}\n"],"mappings":";;AAUA,IAAM,IAA0C;CAC9C,GAAG;CACH,SAAS;CACT,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CACN,KAAK;CACL,MAAM;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACN,IAAI;CACJ,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;CACN,MAAM;CACN,YAAY;CACZ,IAAI;CACJ,MAAM;CACN,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,MAAM;CACN,eAAe;CACf,OAAO;CACP,KAAK;CACL,YAAY;CACZ,IAAI;CACJ,QAAQ;CACR,GAAG;CACH,MAAM;CACN,MAAM;CACN,OAAO;CACP,IAAI;CACJ,OAAO;CACP,MAAM;CACN,KAAK;CACL,OAAO;CACP,IAAI;CACJ,YAAY;CACZ,KAAK;CACL,MAAM;CACN,KAAK;CACN,EAQY,KAAkB,MAAsC;AAC9D,OAIL,QAAO,EAAgB,EAAK,aAAa,KAAK,EAAW,EAAK"}

package/dist/code-example/helpers/generate-client-options.d.ts

@@ -0,0 +1,30 @@
+import { type AvailableClients } from '@scalar/snippetz';
+import type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation';
+import type { ClientOptionGroup } from '../types';
+/** Type of custom code sample IDs */
+export type CustomCodeSampleId = `custom/${string}`;
+/**
+ * Build stable, language-keyed ids for an operation's custom code samples.
+ *
+ * Custom samples are defined per operation, but a selection (e.g. the Python SDK
+ * example) should sync across every operation that ships the same language. So we
+ * key the id by language rather than by position: the first sample of a language
+ * becomes `custom/<lang>`, and any further samples that repeat a language fall back
+ * to `custom/<lang>/<n>` so they stay individually selectable within the operation.
+ *
+ * The language is lower-cased so a selection still matches when operations (or
+ * extensions) spell the same language with different casing (e.g. `Python` vs
+ * `python`).
+ *
+ * @param samples - The custom code samples for a single operation
+ * @returns A list of ids aligned by index with the input samples
+ */
+export declare const getCustomClientIds: (samples: XCodeSample[]) => CustomCodeSampleId[];
+/**
+ * Generate client options for the request example block by filtering by allowed clients
+ *
+ * @param allowedClients - The list of allowed clients to include in the options
+ * @returns A list of client option groups
+ */
+export declare const generateClientOptions: (allowedClients?: AvailableClients) => ClientOptionGroup[];
+//# sourceMappingURL=generate-client-options.d.ts.map

package/dist/code-example/helpers/generate-client-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-client-options.d.ts","sourceRoot":"","sources":["../../../src/code-example/helpers/generate-client-options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAY,MAAM,kBAAkB,CAAA;AACrF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAA;AAGvF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEjD,qCAAqC;AACrC,MAAM,MAAM,kBAAkB,GAAG,UAAU,MAAM,EAAE,CAAA;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,EAAE,KAAG,kBAAkB,EAU7E,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,iBAAgB,gBAAoC,KAAG,iBAAiB,EAuC7G,CAAA"}

package/dist/code-example/helpers/generate-client-options.js

@@ -0,0 +1,35 @@
+import { capitalize as e } from "vue";
+import { AVAILABLE_CLIENTS as t, snippetz as n } from "@scalar/snippetz";
+//#region src/code-example/helpers/generate-client-options.ts
+var r = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	return e.map((e) => {
+		let n = (e.lang || "plaintext").toLowerCase(), r = t.get(n) ?? 0;
+		return t.set(n, r + 1), r === 0 ? `custom/${n}` : `custom/${n}/${r}`;
+	});
+}, i = (r = t) => {
+	let i = new Set(r);
+	return n().clients().flatMap((t) => {
+		let n = t.clients.flatMap((n) => {
+			let r = `${t.key}/${n.client}`;
+			return i.has(r) ? {
+				id: r,
+				lang: n.client === "curl" ? "curl" : t.key,
+				title: `${e(t.title)} ${n.title}`,
+				label: n.title,
+				targetKey: t.key,
+				targetTitle: t.title,
+				clientKey: n.client
+			} : [];
+		});
+		return n.length === 0 ? [] : {
+			label: t.title,
+			key: t.key,
+			options: n
+		};
+	});
+};
+//#endregion
+export { i as generateClientOptions, r as getCustomClientIds };
+
+//# sourceMappingURL=generate-client-options.js.map

package/dist/code-example/helpers/generate-client-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-client-options.js","names":[],"sources":["../../../src/code-example/helpers/generate-client-options.ts"],"sourcesContent":["import { AVAILABLE_CLIENTS, type AvailableClients, snippetz } from '@scalar/snippetz'\nimport type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation'\nimport { capitalize } from 'vue'\n\nimport type { ClientOptionGroup } from '../types'\n\n/** Type of custom code sample IDs */\nexport type CustomCodeSampleId = `custom/${string}`\n\n/**\n * Build stable, language-keyed ids for an operation's custom code samples.\n *\n * Custom samples are defined per operation, but a selection (e.g. the Python SDK\n * example) should sync across every operation that ships the same language. So we\n * key the id by language rather than by position: the first sample of a language\n * becomes `custom/<lang>`, and any further samples that repeat a language fall back\n * to `custom/<lang>/<n>` so they stay individually selectable within the operation.\n *\n * The language is lower-cased so a selection still matches when operations (or\n * extensions) spell the same language with different casing (e.g. `Python` vs\n * `python`).\n *\n * @param samples - The custom code samples for a single operation\n * @returns A list of ids aligned by index with the input samples\n */\nexport const getCustomClientIds = (samples: XCodeSample[]): CustomCodeSampleId[] => {\n  const countByLang = new Map<string, number>()\n\n  return samples.map((sample): CustomCodeSampleId => {\n    const lang = (sample.lang || 'plaintext').toLowerCase()\n    const seen = countByLang.get(lang) ?? 0\n    countByLang.set(lang, seen + 1)\n\n    return seen === 0 ? `custom/${lang}` : `custom/${lang}/${seen}`\n  })\n}\n\n/**\n * Generate client options for the request example block by filtering by allowed clients\n *\n * @param allowedClients - The list of allowed clients to include in the options\n * @returns A list of client option groups\n */\nexport const generateClientOptions = (allowedClients: AvailableClients = AVAILABLE_CLIENTS): ClientOptionGroup[] => {\n  /** Create set of allowlist for quicker lookups */\n  const allowedClientsSet = new Set(allowedClients)\n\n  const options = snippetz()\n    .clients()\n    .flatMap((group) => {\n      const options = group.clients.flatMap((plugin) => {\n        const id = `${group.key}/${plugin.client}` as AvailableClients[number]\n\n        // If the client is not allowed, skip it\n        if (!allowedClientsSet.has(id)) {\n          return []\n        }\n\n        return {\n          id,\n          lang: plugin.client === 'curl' ? ('curl' as const) : group.key,\n          title: `${capitalize(group.title)} ${plugin.title}`,\n          label: plugin.title,\n          targetKey: group.key,\n          targetTitle: group.title,\n          clientKey: plugin.client,\n        }\n      })\n\n      // If no clients are allowed, skip this group\n      if (options.length === 0) {\n        return []\n      }\n\n      return {\n        label: group.title,\n        key: group.key,\n        options,\n      }\n    })\n\n  return options\n}\n"],"mappings":";;;AAyBA,IAAa,KAAsB,MAAiD;CAClF,IAAM,oBAAc,IAAI,KAAqB;AAE7C,QAAO,EAAQ,KAAK,MAA+B;EACjD,IAAM,KAAQ,EAAO,QAAQ,aAAa,aAAa,EACjD,IAAO,EAAY,IAAI,EAAK,IAAI;AAGtC,SAFA,EAAY,IAAI,GAAM,IAAO,EAAE,EAExB,MAAS,IAAI,UAAU,MAAS,UAAU,EAAK,GAAG;GACzD;GASS,KAAyB,IAAmC,MAA2C;CAElH,IAAM,IAAoB,IAAI,IAAI,EAAe;AAoCjD,QAlCgB,GAAU,CACvB,SAAS,CACT,SAAS,MAAU;EAClB,IAAM,IAAU,EAAM,QAAQ,SAAS,MAAW;GAChD,IAAM,IAAK,GAAG,EAAM,IAAI,GAAG,EAAO;AAOlC,UAJK,EAAkB,IAAI,EAAG,GAIvB;IACL;IACA,MAAM,EAAO,WAAW,SAAU,SAAmB,EAAM;IAC3D,OAAO,GAAG,EAAW,EAAM,MAAM,CAAC,GAAG,EAAO;IAC5C,OAAO,EAAO;IACd,WAAW,EAAM;IACjB,aAAa,EAAM;IACnB,WAAW,EAAO;IACnB,GAXQ,EAAE;IAYX;AAOF,SAJI,EAAQ,WAAW,IACd,EAAE,GAGJ;GACL,OAAO,EAAM;GACb,KAAK,EAAM;GACX;GACD;GACD"}

package/dist/code-example/helpers/generate-code-snippet.d.ts

@@ -0,0 +1,39 @@
+import type { HttpMethod } from '@scalar/helpers/http/http-methods';
+import type { AvailableClient } from '@scalar/snippetz';
+import type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example';
+import type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies';
+import type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation';
+import type { OperationObject, ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
+import { type CustomCodeSampleId } from './generate-client-options';
+type GenerateCodeSnippetProps = {
+    /** The selected client/language for code generation (e.g., 'node/fetch') or a custom code sample ID. */
+    clientId: AvailableClient | CustomCodeSampleId | undefined;
+    /** The Content-Type header value for the request body (e.g., 'application/json'). */
+    contentType: string | undefined;
+    /** Array of custom code samples defined in the OpenAPI x-codeSamples extension. */
+    customCodeSamples: XCodeSample[];
+    /** The specific example value to use when generating the code snippet. */
+    example: string | undefined;
+    /** The HTTP method for the operation (e.g., GET, POST, PUT). */
+    method: HttpMethod;
+    /** The OpenAPI operation object containing request/response details. */
+    operation: OperationObject;
+    /** The API endpoint path (e.g., '/users/{id}'). */
+    path: string;
+    /** Array of security schemes to apply to the request (e.g., API keys, OAuth). */
+    securitySchemes: SecuritySchemeObjectSecret[];
+    /** The server object defining the base URL for the API request. */
+    server: ServerObject | null;
+    /** Workspace + document cookies */
+    globalCookies?: XScalarCookie[];
+    /** Whether to include default headers (e.g., Accept, Content-Type) automatically. */
+    includeDefaultHeaders?: boolean;
+    /** Selected oneOf/anyOf variants for nested request body example generation. */
+    requestBodyCompositionSelection?: Record<string, number>;
+    /** Whether to disable parameters by default. */
+    defaultDisabledParameters?: boolean;
+};
+/** Generate the code snippet for the selected example OR operation */
+export declare const generateCodeSnippet: ({ clientId, customCodeSamples, includeDefaultHeaders, operation, method, path, example, contentType, server, securitySchemes, globalCookies, requestBodyCompositionSelection, defaultDisabledParameters, }: GenerateCodeSnippetProps) => string;
+export {};
+//# sourceMappingURL=generate-code-snippet.d.ts.map

package/dist/code-example/helpers/generate-code-snippet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-code-snippet.d.ts","sourceRoot":"","sources":["../../../src/code-example/helpers/generate-code-snippet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,eAAe,EAAsB,MAAM,kBAAkB,CAAA;AAC3E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qEAAqE,CAAA;AACxG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAA;AACvF,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAEjH,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,2BAA2B,CAAA;AAIvF,KAAK,wBAAwB,GAAG;IAC9B,wGAAwG;IACxG,QAAQ,EAAE,eAAe,GAAG,kBAAkB,GAAG,SAAS,CAAA;IAC1D,qFAAqF;IACrF,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,mFAAmF;IACnF,iBAAiB,EAAE,WAAW,EAAE,CAAA;IAChC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,gEAAgE;IAChE,MAAM,EAAE,UAAU,CAAA;IAClB,wEAAwE;IACxE,SAAS,EAAE,eAAe,CAAA;IAC1B,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,eAAe,EAAE,0BAA0B,EAAE,CAAA;IAC7C,mEAAmE;IACnE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,mCAAmC;IACnC,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;IAC/B,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,gFAAgF;IAChF,+BAA+B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxD,gDAAgD;IAChD,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,mBAAmB,GAAI,4MAcjC,wBAAwB,KAAG,MAyC7B,CAAA"}

package/dist/code-example/helpers/generate-code-snippet.js

@@ -0,0 +1,30 @@
+import { getCustomClientIds as e } from "./generate-client-options.js";
+import { getSnippet as t } from "./get-snippet.js";
+import { operationToHar as n } from "./operation-to-har/operation-to-har.js";
+//#region src/code-example/helpers/generate-code-snippet.ts
+var r = ({ clientId: r, customCodeSamples: i, includeDefaultHeaders: a = !1, operation: o, method: s, path: c, example: l, contentType: u, server: d, securitySchemes: f, globalCookies: p, requestBodyCompositionSelection: m, defaultDisabledParameters: h }) => {
+	try {
+		if (!r) return "";
+		if (r.startsWith("custom")) return i[e(i).indexOf(r)]?.source ?? "Custom example not found";
+		let g = n({
+			operation: o,
+			contentType: u,
+			method: s,
+			path: c,
+			server: d,
+			securitySchemes: f,
+			example: l,
+			globalCookies: p,
+			includeDefaultHeaders: a,
+			requestBodyCompositionSelection: m,
+			defaultDisabledParameters: h
+		}), [_, v] = r.split("/"), [y, b] = t(_, v, g);
+		return y ? (console.error("[generateCodeSnippet]", y), y.message ?? "Error generating code snippet") : b;
+	} catch (e) {
+		return console.error("[generateCodeSnippet]", e), "Error generating code snippet";
+	}
+};
+//#endregion
+export { r as generateCodeSnippet };
+
+//# sourceMappingURL=generate-code-snippet.js.map

package/dist/code-example/helpers/generate-code-snippet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-code-snippet.js","names":[],"sources":["../../../src/code-example/helpers/generate-code-snippet.ts"],"sourcesContent":["import type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { AvailableClient, ClientId, TargetId } from '@scalar/snippetz'\nimport type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { XScalarCookie } from '@scalar/workspace-store/schemas/extensions/general/x-scalar-cookies'\nimport type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation'\nimport type { OperationObject, ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport { type CustomCodeSampleId, getCustomClientIds } from './generate-client-options'\nimport { getSnippet } from './get-snippet'\nimport { operationToHar } from './operation-to-har/operation-to-har'\n\ntype GenerateCodeSnippetProps = {\n  /** The selected client/language for code generation (e.g., 'node/fetch') or a custom code sample ID. */\n  clientId: AvailableClient | CustomCodeSampleId | undefined\n  /** The Content-Type header value for the request body (e.g., 'application/json'). */\n  contentType: string | undefined\n  /** Array of custom code samples defined in the OpenAPI x-codeSamples extension. */\n  customCodeSamples: XCodeSample[]\n  /** The specific example value to use when generating the code snippet. */\n  example: string | undefined\n  /** The HTTP method for the operation (e.g., GET, POST, PUT). */\n  method: HttpMethod\n  /** The OpenAPI operation object containing request/response details. */\n  operation: OperationObject\n  /** The API endpoint path (e.g., '/users/{id}'). */\n  path: string\n  /** Array of security schemes to apply to the request (e.g., API keys, OAuth). */\n  securitySchemes: SecuritySchemeObjectSecret[]\n  /** The server object defining the base URL for the API request. */\n  server: ServerObject | null\n  /** Workspace + document cookies */\n  globalCookies?: XScalarCookie[]\n  /** Whether to include default headers (e.g., Accept, Content-Type) automatically. */\n  includeDefaultHeaders?: boolean\n  /** Selected oneOf/anyOf variants for nested request body example generation. */\n  requestBodyCompositionSelection?: Record<string, number>\n  /** Whether to disable parameters by default. */\n  defaultDisabledParameters?: boolean\n}\n\n/** Generate the code snippet for the selected example OR operation */\nexport const generateCodeSnippet = ({\n  clientId,\n  customCodeSamples,\n  includeDefaultHeaders = false,\n  operation,\n  method,\n  path,\n  example,\n  contentType,\n  server,\n  securitySchemes,\n  globalCookies,\n  requestBodyCompositionSelection,\n  defaultDisabledParameters,\n}: GenerateCodeSnippetProps): string => {\n  try {\n    if (!clientId) {\n      return ''\n    }\n\n    // Use the selected custom example, matched by its language-keyed id\n    if (clientId.startsWith('custom')) {\n      const ids = getCustomClientIds(customCodeSamples)\n      const index = ids.indexOf(clientId as CustomCodeSampleId)\n\n      return customCodeSamples[index]?.source ?? 'Custom example not found'\n    }\n\n    const harRequest = operationToHar({\n      operation,\n      contentType,\n      method,\n      path,\n      server,\n      securitySchemes,\n      example,\n      globalCookies,\n      includeDefaultHeaders,\n      requestBodyCompositionSelection,\n      defaultDisabledParameters,\n    })\n\n    const [targetKey, clientKey] = clientId.split('/') as [TargetId, ClientId<TargetId>]\n\n    const [error, payload] = getSnippet(targetKey, clientKey, harRequest)\n    if (error) {\n      console.error('[generateCodeSnippet]', error)\n      return error.message ?? 'Error generating code snippet'\n    }\n\n    return payload\n  } catch (error) {\n    console.error('[generateCodeSnippet]', error)\n    return 'Error generating code snippet'\n  }\n}\n"],"mappings":";;;;AAyCA,IAAa,KAAuB,EAClC,aACA,sBACA,2BAAwB,IACxB,cACA,WACA,SACA,YACA,gBACA,WACA,oBACA,kBACA,oCACA,mCACsC;AACtC,KAAI;AACF,MAAI,CAAC,EACH,QAAO;AAIT,MAAI,EAAS,WAAW,SAAS,CAI/B,QAAO,EAHK,EAAmB,EAAkB,CAC/B,QAAQ,EAA+B,GAExB,UAAU;EAG7C,IAAM,IAAa,EAAe;GAChC;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,EAEI,CAAC,GAAW,KAAa,EAAS,MAAM,IAAI,EAE5C,CAAC,GAAO,KAAW,EAAW,GAAW,GAAW,EAAW;AAMrE,SALI,KACF,QAAQ,MAAM,yBAAyB,EAAM,EACtC,EAAM,WAAW,mCAGnB;UACA,GAAO;AAEd,SADA,QAAQ,MAAM,yBAAyB,EAAM,EACtC"}

package/dist/code-example/helpers/get-clients.d.ts

@@ -0,0 +1,12 @@
+import type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation';
+import type { ClientOptionGroup, CustomClientOptionGroup } from '../types';
+/**
+ * Merges custom code samples with the client options
+ *
+ * @param customCodeSamples - The custom code samples from the operation to merge with the client options
+ * @param clientOptions - The client options to merge with the custom code samples
+ * @param label - The label for the custom samples group (e.g. "SDK" or "Code Examples")
+ * @returns A list of client option groups
+ */
+export declare const getClients: (customCodeSamples: XCodeSample[], clientOptions: ClientOptionGroup[], label?: string) => CustomClientOptionGroup[];
+//# sourceMappingURL=get-clients.d.ts.map

package/dist/code-example/helpers/get-clients.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-clients.d.ts","sourceRoot":"","sources":["../../../src/code-example/helpers/get-clients.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAA;AAKvF,OAAO,KAAK,EAAE,iBAAiB,EAAsB,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAE9F;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GACrB,mBAAmB,WAAW,EAAE,EAChC,eAAe,iBAAiB,EAAE,EAClC,QAAO,MAAkC,KACxC,uBAAuB,EA+BzB,CAAA"}

package/dist/code-example/helpers/get-clients.js

@@ -0,0 +1,28 @@
+import { getCustomClientIds as e } from "./generate-client-options.js";
+import { formatLanguage as t } from "./format-language.js";
+import { CODE_EXAMPLES_GROUP_LABEL as n } from "./get-custom-code-samples.js";
+//#region src/code-example/helpers/get-clients.ts
+var r = (r, i, a = n) => {
+	if (r.length) {
+		let n = e(r);
+		return [{
+			label: a,
+			key: "custom",
+			options: r.map((e, r) => {
+				let i = n[r] ?? `custom/${r}`, a = e.label || t(e.lang) || i;
+				return {
+					id: i,
+					lang: e.lang || "plaintext",
+					title: a,
+					label: a,
+					clientKey: "custom"
+				};
+			})
+		}, ...i];
+	}
+	return i;
+};
+//#endregion
+export { r as getClients };
+
+//# sourceMappingURL=get-clients.js.map

package/dist/code-example/helpers/get-clients.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-clients.js","names":[],"sources":["../../../src/code-example/helpers/get-clients.ts"],"sourcesContent":["import type { TargetId } from '@scalar/types/snippetz'\nimport type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation'\n\nimport { formatLanguage } from './format-language'\nimport { getCustomClientIds } from './generate-client-options'\nimport { CODE_EXAMPLES_GROUP_LABEL } from './get-custom-code-samples'\nimport type { ClientOptionGroup, CustomClientOption, CustomClientOptionGroup } from '../types'\n\n/**\n * Merges custom code samples with the client options\n *\n * @param customCodeSamples - The custom code samples from the operation to merge with the client options\n * @param clientOptions - The client options to merge with the custom code samples\n * @param label - The label for the custom samples group (e.g. \"SDK\" or \"Code Examples\")\n * @returns A list of client option groups\n */\nexport const getClients = (\n  customCodeSamples: XCodeSample[],\n  clientOptions: ClientOptionGroup[],\n  label: string = CODE_EXAMPLES_GROUP_LABEL,\n): CustomClientOptionGroup[] => {\n  // Handle custom code examples\n  if (customCodeSamples.length) {\n    // Language-keyed ids so the same sample can be selected across operations\n    const ids = getCustomClientIds(customCodeSamples)\n\n    const customClients = customCodeSamples.map((sample, index) => {\n      const id = ids[index] ?? `custom/${index}`\n      const label = sample.label || formatLanguage(sample.lang) || id\n      const lang = (sample.lang as TargetId) || 'plaintext'\n\n      return {\n        id,\n        lang,\n        title: label,\n        label,\n        clientKey: 'custom',\n      } satisfies CustomClientOption\n    })\n\n    return [\n      {\n        label,\n        key: 'custom',\n        options: customClients,\n      },\n      ...clientOptions,\n    ]\n  }\n\n  return clientOptions\n}\n"],"mappings":";;;;AAgBA,IAAa,KACX,GACA,GACA,IAAgB,MACc;AAE9B,KAAI,EAAkB,QAAQ;EAE5B,IAAM,IAAM,EAAmB,EAAkB;AAgBjD,SAAO,CACL;GACE;GACA,KAAK;GACL,SAlBkB,EAAkB,KAAK,GAAQ,MAAU;IAC7D,IAAM,IAAK,EAAI,MAAU,UAAU,KAC7B,IAAQ,EAAO,SAAS,EAAe,EAAO,KAAK,IAAI;AAG7D,WAAO;KACL;KACA,MAJY,EAAO,QAAqB;KAKxC,OAAO;KACP;KACA,WAAW;KACZ;KACD;GAOC,EACD,GAAG,EACJ;;AAGH,QAAO"}

package/dist/code-example/helpers/get-custom-code-samples.d.ts

@@ -0,0 +1,45 @@
+import type { XCodeSample } from '@scalar/workspace-store/schemas/extensions/operation';
+import type { OperationObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
+/** Picker group label for samples generated by an SDK provider (Scalar, Stainless, …). */
+declare const SDK_GROUP_LABEL = "SDK";
+/** Picker group label for generic or docs-platform samples (the standard `x-codeSamples` family, ReadMe, …). */
+export declare const CODE_EXAMPLES_GROUP_LABEL = "Code Examples";
+type CustomCodeSampleGroupLabel = typeof SDK_GROUP_LABEL | typeof CODE_EXAMPLES_GROUP_LABEL;
+type CustomCodeSamples = {
+    /**
+     * Group label for the code sample picker.
+     *
+     * Samples that come from an SDK provider extension (`x-scalar-examples`,
+     * `x-stainless-snippets`, `x-stainless-examples`) surface under "SDK". Generic
+     * or docs-platform samples (`x-readme`, the `x-codeSamples` family) surface
+     * under "Code Examples".
+     */
+    label: CustomCodeSampleGroupLabel;
+    /** The custom code samples, in picker order. */
+    samples: XCodeSample[];
+};
+/**
+ * Grabs any custom code samples from the operation.
+ *
+ * Several tools write code samples into OpenAPI under different extensions. When
+ * more than one is present we use the highest-priority source only, rather than
+ * showing duplicates from every tool. Priority, highest first:
+ *
+ * 1. `x-scalar-examples` (SDK)
+ * 2. `x-stainless-snippets` (SDK, overrides `x-stainless-examples`)
+ * 3. `x-stainless-examples` (SDK)
+ * 4. `x-readme.code-samples` (Code Examples)
+ * 5. `x-codeSamples` / `x-code-samples` / `x-custom-examples` (Code Examples)
+ *
+ * The winning source also determines the picker group label: SDK-provider
+ * extensions surface under "SDK", everything else under "Code Examples".
+ *
+ * Note that Speakeasy does not have its own extension — it writes into the
+ * standard `x-codeSamples`, so its snippets surface under "Code Examples".
+ *
+ * @param operation - The operation to get the custom code samples from
+ * @returns The picker group label and the custom code samples which exist in the operation
+ */
+export declare const getCustomCodeSamples: (operation: OperationObject) => CustomCodeSamples;
+export {};
+//# sourceMappingURL=get-custom-code-samples.d.ts.map

package/dist/code-example/helpers/get-custom-code-samples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-custom-code-samples.d.ts","sourceRoot":"","sources":["../../../src/code-example/helpers/get-custom-code-samples.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EAGZ,MAAM,sDAAsD,CAAA;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAA;AA+BnG,0FAA0F;AAC1F,QAAA,MAAM,eAAe,QAAQ,CAAA;AAE7B,gHAAgH;AAChH,eAAO,MAAM,yBAAyB,kBAAkB,CAAA;AAExD,KAAK,0BAA0B,GAAG,OAAO,eAAe,GAAG,OAAO,yBAAyB,CAAA;AAE3F,KAAK,iBAAiB,GAAG;IACvB;;;;;;;OAOG;IACH,KAAK,EAAE,0BAA0B,CAAA;IACjC,gDAAgD;IAChD,OAAO,EAAE,WAAW,EAAE,CAAA;CACvB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,oBAAoB,GAAI,WAAW,eAAe,KAAG,iBAuBjE,CAAA"}

package/dist/code-example/helpers/get-custom-code-samples.js

@@ -0,0 +1,42 @@
+//#region src/code-example/helpers/get-custom-code-samples.ts
+var e = (e, t) => Object.entries(e ?? {}).map(([e, n]) => ({
+	lang: e,
+	source: n,
+	...t ? { label: t } : {}
+})), t = (t) => t ? (Array.isArray(t) ? t : [t]).flatMap((t) => e(t.request, t.title)) : [], n = (e) => (e ?? []).map((e) => ({
+	lang: e.language,
+	source: e.code,
+	...e.name ? { label: e.name } : {}
+})), r = "SDK", i = "Code Examples", a = (a) => {
+	let o = a["x-scalar-examples"] ?? [];
+	if (o.length) return {
+		label: r,
+		samples: o
+	};
+	let s = e(a["x-stainless-snippets"]);
+	if (s.length) return {
+		label: r,
+		samples: s
+	};
+	let c = t(a["x-stainless-examples"]);
+	if (c.length) return {
+		label: r,
+		samples: c
+	};
+	let l = n(a["x-readme"]?.["code-samples"]);
+	return l.length ? {
+		label: i,
+		samples: l
+	} : {
+		label: i,
+		samples: [
+			"x-custom-examples",
+			"x-codeSamples",
+			"x-code-samples"
+		].flatMap((e) => a[e] ?? [])
+	};
+};
+//#endregion
+export { i as CODE_EXAMPLES_GROUP_LABEL, a as getCustomCodeSamples };
+
+//# sourceMappingURL=get-custom-code-samples.js.map