@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/IDE/IDE.d.ts

@@ -0,0 +1,164 @@
+import React, { type PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes.css';
+/**
+ * @deprecated IDEProps is deprecated and will be removed in a future release.
+ */
+export type IDEProps = {
+    /**
+     * Test id for the IDE
+     */
+    'data-testid'?: string;
+    /**
+     * The optionally configurable height of the IDE
+     */
+    height?: number;
+    /**
+     * Alternative presentation of the IDE
+     */
+    variant?: 'default' | 'glass';
+} & BaseProps<HTMLDivElement>;
+type IDEChatProps = {
+    /**
+     * The chat script
+     */
+    script: IDEChatMessage[];
+    /**
+     * Alternative description of the chat script for users of assistive technologies.
+     */
+    alternativeText: string;
+    /**
+     * The delay between messages
+     */
+    animationDelay?: number;
+    /**
+     * Test id for the IDE
+     */
+    'data-testid'?: string;
+    /**
+     * Internal prop used for controlling the animation state
+     */
+    animationIsPaused?: boolean;
+    /**
+     * Internal prop used for controlling the animation state
+     */
+    setAnimationIsDone?: (isDone: boolean) => void;
+} & BaseProps<HTMLElement>;
+type IDEChatMessageUser = {
+    role: 'user';
+    avatar: string;
+};
+type IDEChatMessageAssistant = {
+    role: 'assistant';
+};
+/**
+ * @deprecated IDEChatMessage is deprecated and will be removed in a future release.
+ */
+export type IDEChatMessage = {
+    handle: string;
+    message: string;
+    codeSnippet?: string;
+    highlighter?: 'hljs';
+} & (IDEChatMessageUser | IDEChatMessageAssistant);
+type IDEChatHandle = HTMLElement & {
+    resetAnimation: () => void;
+};
+type IDEEditorProps = {
+    /**
+     * The index of the active tab.
+     */
+    activeTab?: number;
+    /**
+     * An array of IDE editor files.
+     */
+    files: IDEEditorFile[];
+    /**
+     * Determines whether line numbers should be shown in the editor.
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Controls the size of the editor text.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Used for triggering animation externally.
+     */
+    triggerAnimation?: boolean;
+    /**
+     * Test id for the IDE.
+     */
+    'data-testid'?: string;
+    /**
+     * Enable user customisation of the icons used in file tabs.
+     */
+    tabIcons?: IDEEditorTabIcon;
+    /**
+     * Internal prop used for controlling the animation state
+     */
+    animationIsPaused?: boolean;
+    /**
+     * Internal prop used for controlling the animation state
+     */
+    setAnimationIsDone?: (isDone: boolean) => void;
+} & BaseProps<HTMLDivElement>;
+/**
+ * @deprecated IDEEditorFile is deprecated and will be removed in a future release.
+ */
+export type IDEEditorFile = {
+    name: string;
+    /**
+     * Alternative description of the code for users of assistive technologies.
+     */
+    alternativeText: string;
+    /**
+     * Controls line at which the Copilot suggestion begins
+     */
+    suggestedLineStart?: number;
+    code: string | string[];
+    highlighter?: 'hljs';
+};
+type IDEEditorTabIcon = Record<string, string>;
+export declare const IDEDefaultIconMap: IDEEditorTabIcon;
+export declare const IDEFileExtensions: string[];
+type IDEEditorHandle = HTMLElement & {
+    resetAnimation: () => void;
+};
+/**
+ * Use IDE to display a decorative editor component
+ * @deprecated IDE is deprecated and will be removed in a future release.
+ * @see https://primer.style/brand/components/IDE
+ */
+export declare const IDE: React.NamedExoticComponent<{
+    /**
+     * Test id for the IDE
+     */
+    'data-testid'?: string;
+    /**
+     * The optionally configurable height of the IDE
+     */
+    height?: number;
+    /**
+     * Alternative presentation of the IDE
+     */
+    variant?: "default" | "glass";
+} & BaseProps<HTMLDivElement> & {
+    children?: React.ReactNode | undefined;
+}> & {
+    readonly type: ({ children, className, "data-testid": testId, height, variant, ...rest }: PropsWithChildren<IDEProps>) => import("react/jsx-runtime").JSX.Element;
+} & {
+    testIds: {
+        root: string;
+        readonly chat: string;
+        readonly editor: string;
+        readonly editorContent: string;
+        readonly editorTabs: string;
+    };
+    Chat: React.NamedExoticComponent<Omit<IDEChatProps, "ref"> & React.RefAttributes<IDEChatHandle>>;
+    Editor: React.NamedExoticComponent<Omit<IDEEditorProps, "ref"> & React.RefAttributes<IDEEditorHandle>>;
+};
+export {};
+//# sourceMappingURL=IDE.d.ts.map

package/esm/IDE/IDE.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDE.d.ts","sourceRoot":"","sources":["../../src/IDE/IDE.tsx"],"names":[],"mappings":"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"}

package/esm/IDE/IDE.js

@@ -0,0 +1,395 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import t from "../animation/Animation.module.js";
+import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
+import { Text as r } from "../Text/Text.js";
+import { CopilotIcon as i, PaperAirplaneIcon as a } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useTabs as o } from "../hooks/useTabs.js";
+import { TextInput as s } from "../forms/TextInput/TextInput.js";
+import { Avatar as c } from "../Avatar/Avatar.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes-DSf1PV6b.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/ide/base-Cg4X8uay.css';/* empty css                                                                                    */
+/* empty css                                                                                                 */
+import l from "./IDE.module.js";
+import u, { Children as d, createElement as f, forwardRef as p, isValidElement as m, memo as h, useCallback as g, useEffect as _, useImperativeHandle as v, useMemo as y, useRef as b, useState as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/IDE/IDE.tsx
+var w = {
+	root: "IDE",
+	get chat() {
+		return `${this.root}-chat`;
+	},
+	get editor() {
+		return `${this.root}-editor`;
+	},
+	get editorContent() {
+		return `${this.editor}-content`;
+	},
+	get editorTabs() {
+		return `${this.editor}-tab`;
+	}
+}, T = h(({ children: t, className: n, "data-testid": r, height: i, variant: a = "default", ...o }) => {
+	let [s, c] = x(!1), [f, p] = x(!1), [h, v] = x(!1), T = b(null), E = b(null);
+	_(() => {
+		f && h && c(!1);
+	}, [f, h]);
+	let D = y(() => d.toArray(t), [t]), O = D.find((e) => m(e) && e.type === P.Chat), k = !!O, A = k ? u.cloneElement(O, {
+		ref: T,
+		"data-testid": r || w.chat,
+		animationIsPaused: s,
+		setAnimationIsDone: p
+	}) : null, j = D.find((e) => m(e) && e.type === P.Editor), M = !!j, F = M ? u.cloneElement(j, {
+		ref: E,
+		"data-testid": r || w.editor,
+		animationIsPaused: s,
+		setAnimationIsDone: v
+	}) : null, I = (!k || f) && (!M || h), L = g((e) => {
+		I ? (p(!1), v(!1), T.current?.resetAnimation(), E.current?.resetAnimation()) : c(!e);
+	}, [I]);
+	return /* @__PURE__ */ S("section", {
+		"data-testid": r || w.root,
+		className: e(l[`IDE--${a}`], k && M && l["IDE--full-exp"], k && !M && l["IDE--chat-only"], n),
+		children: /* @__PURE__ */ S("div", {
+			...o,
+			children: /* @__PURE__ */ C("div", {
+				className: l.IDE__inner,
+				style: { "--brand-IDE-height": i ? `${i}px` : void 0 },
+				children: [/* @__PURE__ */ C("div", {
+					className: l.IDE__main,
+					children: [A, F]
+				}), /* @__PURE__ */ S(N, {
+					isPlaying: !s && !I,
+					onPlayPause: L
+				})]
+			})
+		})
+	});
+}), E = h(p(({ "data-testid": t, script: o, animationDelay: u = 3e3, alternativeText: d, animationIsPaused: f, setAnimationIsDone: p, ...m }, h) => {
+	let y = n(h), T = u, E = b(null), [D, O] = x([]), k = b(f);
+	k.current = f;
+	let A = g((e) => {
+		if (!e || !E.current) return;
+		let t = E.current, n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+		(n.top < r.top || n.bottom > r.bottom) && (t.scrollTop += n.top - r.top);
+	}, []), j = g(() => {
+		if (!o.length) return;
+		let e = document.querySelectorAll(`.${l["IDE__Chat-message"]}`), t = Array.from(e).slice(0, 1), n = Array.from(e).slice(1), r = [];
+		t[0] && r.push({
+			delay: 0,
+			action: "show",
+			element: t[0]
+		}), r.push({
+			delay: T / 4,
+			action: "delay"
+		});
+		for (let [e, t] of n.entries()) r.push({
+			delay: T,
+			action: "show",
+			element: t,
+			shouldScroll: e % 2 == 0,
+			shouldFadePrevious: !0,
+			messageIndex: e,
+			isLast: e === n.length - 1
+		});
+		r.push({
+			delay: 100,
+			isDone: !0
+		}), O(r);
+	}, [o, T]), M = g(() => {
+		p?.(!1);
+		let e = document.querySelectorAll(`.${l["IDE__Chat-message"]}`);
+		for (let t of e) t.classList.remove(l["IDE__Chat-message--visible"], l["IDE__Chat-message--faded"]);
+		E.current && (E.current.scrollTop = 0), j();
+	}, [j, p]);
+	return v(y, () => y.current ? {
+		...y.current,
+		resetAnimation: M
+	} : { resetAnimation: M }), _(() => {
+		j();
+	}, [j]), _(() => {
+		let e = -1, t, n = 0, r = (i) => {
+			if (n >= D.length || k.current) {
+				k.current && (e = -1), t = requestAnimationFrame(r);
+				return;
+			}
+			let a = e === -1 ? 0 : i - e;
+			e = i;
+			let o = D[n];
+			if (o.isDone) {
+				p?.(!0);
+				return;
+			}
+			if (o.delay -= a, o.delay <= 0) if (o.action === "delay") n++;
+			else {
+				let e = o;
+				if (e.shouldScroll && A(e.element), e.shouldFadePrevious) {
+					let t = document.querySelectorAll(`.${l["IDE__Chat-message"]}`), n = Array.from(t).slice(0, 1), r = Array.from(t).slice(1);
+					for (let e of n) e.classList.add(l["IDE__Chat-message--faded"]);
+					let i = r.filter((t, n) => n < (e.messageIndex ?? 0));
+					for (let e of i) e.classList.add(l["IDE__Chat-message--faded"]);
+					e.isLast && setTimeout(() => {
+						for (let e of n) e.classList.remove(l["IDE__Chat-message--faded"]);
+						for (let e of r) e.classList.remove(l["IDE__Chat-message--faded"]);
+					}, 100);
+				}
+				e.element.classList.add(l["IDE__Chat-message--visible"]), n++;
+			}
+			t = requestAnimationFrame(r);
+		};
+		return t = requestAnimationFrame(r), () => {
+			t && cancelAnimationFrame(t);
+		};
+	}, [
+		D,
+		A,
+		p
+	]), /* @__PURE__ */ C("section", {
+		ref: y,
+		className: l.IDE__Chat,
+		"data-testid": t || w.chat,
+		...m,
+		children: [/* @__PURE__ */ S("span", {
+			className: "visually-hidden",
+			children: d
+		}), /* @__PURE__ */ C("div", {
+			className: l["IDE__Chat-wrapper"],
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ S("div", {
+				ref: E,
+				className: l["IDE__Chat-messages"],
+				children: o.length && o.map((t, n) => /* @__PURE__ */ C("div", {
+					id: `IDE__Chat-message-${n}`,
+					className: e(l["IDE__Chat-message"], t.role === "user" && l["IDE__Chat-message--user"]),
+					children: [/* @__PURE__ */ C("div", {
+						className: l["IDE__Chat-message-user"],
+						children: [t.role === "user" ? /* @__PURE__ */ S(c, {
+							src: t.avatar,
+							alt: t.handle
+						}) : /* @__PURE__ */ S(i, { size: 24 }), /* @__PURE__ */ S(r, {
+							as: "p",
+							size: "100",
+							weight: "medium",
+							className: l["IDE__Chat-message-handle"],
+							children: t.handle
+						})]
+					}), /* @__PURE__ */ C("div", {
+						className: l["IDE__Chat-message-content"],
+						children: [
+							/* @__PURE__ */ S("div", {
+								className: l["IDE__Chat-message-text"],
+								children: t.message
+							}),
+							t.highlighter && t.codeSnippet && /* @__PURE__ */ S("pre", {
+								className: l["IDE__Chat-message-snippet"],
+								dangerouslySetInnerHTML: { __html: t.codeSnippet }
+							}),
+							!t.highlighter && t.codeSnippet && /* @__PURE__ */ S("pre", {
+								className: l["IDE__Chat-message-snippet"],
+								children: t.codeSnippet
+							})
+						]
+					})]
+				}, n))
+			}), /* @__PURE__ */ S("div", {
+				className: l["IDE__Chat-input-area"],
+				children: /* @__PURE__ */ S(s, {
+					disabled: !0,
+					className: l["IDE__Chat-input"],
+					fullWidth: !0,
+					placeholder: "Ask a question or type '/' for commands.",
+					trailingVisual: /* @__PURE__ */ S(a, { className: l["IDE__Chat-input-icon"] })
+				})
+			})]
+		})]
+	});
+})), D = "https://github.com/primer/brand/assets", O = {
+	py: `${D}/13340707/7ca66487-d958-4c30-acbc-397f7a6169b7`,
+	ts: `${D}/13340707/2a7b87cf-b522-4ab5-a127-5a2c69bd0a89`,
+	js: `${D}/13340707/5a7bfffa-af38-4e32-ab39-a9e7efbcc7c6`,
+	jsx: `${D}/13340707/d975a978-dbc7-4626-b995-c00cac9bc132`,
+	hs: `${D}/13340707/826843ce-424b-4693-84d3-a43e4b7f1280`,
+	html: `${D}/13340707/f5b03413-b8f4-4cd5-9d91-6b574ada14ed`,
+	css: `${D}/13340707/3df2f0ba-daff-4b76-8492-f5773c515369`,
+	scss: `${D}/13340707/a1d21f2e-c813-4211-8d9a-2869c1968e9a`,
+	json: `${D}/13340707/ca21068e-8c27-4b84-9a1d-b965b49b3568`,
+	md: `${D}/13340707/39e7ff2b-9d0a-47e9-9686-bed51800084c`,
+	yml: `${D}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,
+	yaml: `${D}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,
+	txt: `${D}/13340707/7c52da20-1fe2-496c-b4bb-6ea61d0fe3dd`,
+	sh: `${D}/13340707/549ce181-4541-4811-8712-a9c5abd8eeae`,
+	sql: `${D}/13340707/b2b73a2e-e4e1-47c8-aabc-c204836244b8`
+}, k = Object.keys(O), A = h(p(({ activeTab: a = 0, "data-testid": s, files: c, triggerAnimation: d = !1, showLineNumbers: p = !0, size: m = "medium", tabIcons: h = O, animationIsPaused: y, setAnimationIsDone: T, ...E }, D) => {
+	let k = n(D), A = b(null), [j, M] = x([]), N = b(y);
+	N.current = y;
+	let P = o({
+		defaultTab: a.toString(),
+		autoActivate: !0,
+		onTabActivate: (e, t) => {
+			t?.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest",
+				inline: "start"
+			}), I();
+		}
+	}), F = g(() => {
+		if (!A.current) return;
+		let e = A.current.querySelectorAll("pre:not([data-has-suggestion=\"true\"])"), t = A.current.querySelectorAll("pre[data-has-suggestion=\"true\"]"), n = [];
+		for (let t of e) n.push({
+			delay: 200,
+			elements: [t],
+			tab: P.activeTab
+		});
+		n.push({
+			delay: 1e3,
+			elements: Array.from(t),
+			tab: P.activeTab
+		}), n.push({
+			delay: 200,
+			isDone: !0,
+			tab: P.activeTab
+		}), M(n);
+	}, [P.activeTab]), I = g(() => {
+		M([]), T?.(!1);
+		let e = A.current?.querySelectorAll("pre");
+		if (e) for (let n of e) n.classList.remove(t["Animation--active"]);
+		F();
+	}, [F, T]);
+	return v(k, () => k.current ? {
+		...k.current,
+		resetAnimation: I
+	} : { resetAnimation: I }), _(() => {
+		F();
+	}, [F, d]), _(() => {
+		let e = -1, n, r = 0, i = (a) => {
+			if (r >= j.length || P.activeTab === null) return;
+			if (N.current) {
+				e = -1, n = requestAnimationFrame(i);
+				return;
+			}
+			let o = e === -1 ? 0 : a - e;
+			e = a;
+			let s = j[r];
+			if (s.isDone) {
+				T?.(!0);
+				return;
+			}
+			if (s.tab === P.activeTab) {
+				if (s.delay -= o, s.delay <= 0) {
+					for (let e of s.elements) e.classList.add(t["Animation--active"]);
+					r++;
+				}
+				n = requestAnimationFrame(i);
+			}
+		};
+		return n = requestAnimationFrame(i), () => {
+			n && cancelAnimationFrame(n);
+		};
+	}, [
+		j,
+		T,
+		P.activeTab
+	]), /* @__PURE__ */ C("div", {
+		className: e(l.IDE__Editor, l[`IDE__Editor--${m}`]),
+		"data-testid": s || w.editor,
+		...E,
+		children: [/* @__PURE__ */ S("div", {
+			className: l["IDE__Editor-tabs"],
+			"data-testid": w.editorTabs,
+			...P.getTabListProps({ label: "files" }),
+			children: c.map((t, n) => {
+				let r = t.name.split(".").pop(), i = P.activeTab === n.toString();
+				return /* @__PURE__ */ f("button", {
+					...P.getTabProps(n.toString()),
+					key: t.name,
+					className: e(l["IDE__Editor-tab"], i && l["IDE__Editor-tab--active"])
+				}, r && /* @__PURE__ */ S("img", {
+					className: l["IDE__Editor-tab-icon"],
+					alt: "",
+					width: 16,
+					height: 16,
+					src: h[r]
+				}), t.name);
+			})
+		}), /* @__PURE__ */ S("div", {
+			className: l["IDE__Editor-content"],
+			children: c.map((n, a) => /* @__PURE__ */ f("div", {
+				...P.getTabPanelProps(a.toString()),
+				key: n.name
+			}, /* @__PURE__ */ S("span", {
+				className: "visually-hidden",
+				children: n.alternativeText
+			}), /* @__PURE__ */ C("div", {
+				className: l["IDE__Editor-content-wrapper"],
+				"aria-hidden": "true",
+				children: [p && /* @__PURE__ */ S("div", {
+					className: l["IDE__Editor-lineNumbers"],
+					children: (Array.isArray(n.code) ? n.code : n.code.split("\n")).map((e, t) => /* @__PURE__ */ S("div", {
+						className: l["IDE__Editor-lineNumber"],
+						children: t + 1
+					}, t))
+				}), /* @__PURE__ */ S("div", {
+					ref: P.activeTab === a.toString() ? A : null,
+					"data-testid": w.editorContent,
+					className: l["IDE__Editor-content-inner"],
+					children: Array.isArray(n.code) ? n.code.map((a, o) => {
+						let s = o + 1 >= (n.suggestedLineStart ?? Infinity);
+						return /* @__PURE__ */ C(u.Fragment, { children: [/* @__PURE__ */ S("pre", {
+							className: e(l["IDE__Editor-pane"], o + 1 < (n.suggestedLineStart ?? Infinity) && t["Animation--slide-in-right"], s && t["Animation--slide-in-down"], s && l["IDE__Editor-pane--suggested"]),
+							dangerouslySetInnerHTML: { __html: a === "" ? "&nbsp;" : a },
+							"data-has-suggestion": s
+						}, o), s && o === n.code.length - 1 && /* @__PURE__ */ C("pre", {
+							className: e(t["Animation--slide-in-down"], l["IDE__Chat-copilot-indicator"]),
+							"data-has-suggestion": s,
+							children: [/* @__PURE__ */ S(i, {
+								size: 24,
+								className: l["IDE__Chat-copilot-indicator-label"]
+							}), /* @__PURE__ */ S(r, {
+								as: "span",
+								className: l["IDE__Chat-copilot-indicator-label"],
+								children: "Copilot"
+							})]
+						})] }, a + o);
+					}) : /* @__PURE__ */ S("pre", {
+						className: e(l["IDE__Editor-pane"], t["Animation--slide-in-right"]),
+						dangerouslySetInnerHTML: { __html: n.code }
+					})
+				})]
+			})))
+		})]
+	});
+})), j = () => /* @__PURE__ */ S("svg", {
+	fill: "none",
+	role: "presentation",
+	"aria-hidden": "true",
+	viewBox: "3.17 2.28 13.7 15.42",
+	children: /* @__PURE__ */ S("path", {
+		d: "M4.66148 2.3125C3.83593 2.3125 3.16669 2.98174 3.16669 3.80729V16.1927C3.16669 17.0183 3.83593 17.6875 4.66148 17.6875H7.65106C8.47662 17.6875 9.14586 17.0183 9.14586 16.1927V3.80729C9.14586 2.98174 8.47662 2.3125 7.65106 2.3125H4.66148ZM4.44794 3.80729C4.44794 3.68936 4.54355 3.59375 4.66148 3.59375H7.65106C7.769 3.59375 7.86461 3.68936 7.86461 3.80729V16.1927C7.86461 16.3106 7.769 16.4062 7.65106 16.4062H4.66148C4.54355 16.4062 4.44794 16.3106 4.44794 16.1927V3.80729ZM12.349 2.3125C11.5235 2.3125 10.8542 2.98174 10.8542 3.80729V16.1927C10.8542 17.0183 11.5235 17.6875 12.349 17.6875H15.3386C16.1642 17.6875 16.8334 17.0183 16.8334 16.1927V3.80729C16.8334 2.98174 16.1642 2.3125 15.3386 2.3125H12.349ZM12.1355 3.80729C12.1355 3.68936 12.2311 3.59375 12.349 3.59375H15.3386C15.4565 3.59375 15.5521 3.68936 15.5521 3.80729V16.1927C15.5521 16.3106 15.4565 16.4062 15.3386 16.4062H12.349C12.2311 16.4062 12.1355 16.3106 12.1355 16.1927V3.80729Z",
+		fill: "currentColor"
+	})
+}), M = () => /* @__PURE__ */ S("svg", {
+	fill: "none",
+	role: "presentation",
+	"aria-hidden": "true",
+	viewBox: "4.02 2.3 14.43 15.4",
+	children: /* @__PURE__ */ S("path", {
+		d: "M6.24905 3.69194C5.82218 3.45967 5.30225 3.76868 5.30225 4.25466V15.7452C5.30225 16.2312 5.82218 16.5402 6.24906 16.3079L16.8079 10.5626C17.2538 10.32 17.2538 9.67983 16.8079 9.4372L6.24905 3.69194ZM4.021 4.25466C4.021 2.79672 5.58078 1.86969 6.86142 2.56651L17.4203 8.31176C18.758 9.03966 18.758 10.9602 17.4203 11.6881L6.86143 17.4333C5.58079 18.1301 4.021 17.2031 4.021 15.7452V4.25466Z",
+		fill: "currentColor"
+	})
+}), N = ({ isPlaying: e = !0, onPlayPause: t }) => {
+	let n = g(() => {
+		t?.(!e);
+	}, [t, e]);
+	return /* @__PURE__ */ S("button", {
+		className: l["IDE__play-pause-button"],
+		type: "button",
+		onClick: n,
+		"aria-label": e ? "Pause animation" : "Play animation",
+		children: S(e ? j : M, {})
+	});
+}, P = Object.assign(T, {
+	testIds: w,
+	Chat: E,
+	Editor: A
+});
+//#endregion
+export { P as IDE, O as IDEDefaultIconMap, k as IDEFileExtensions };
+
+//# sourceMappingURL=IDE.js.map

package/esm/IDE/IDE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDE.js","names":[],"sources":["../../src/IDE/IDE.tsx"],"sourcesContent":["import {CopilotIcon, PaperAirplaneIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport React, {\n  Children,\n  forwardRef,\n  isValidElement,\n  memo,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport {Avatar, Text, TextInput} from '..'\nimport type {BaseProps} from '../component-helpers'\nimport {useTabs} from '../hooks/useTabs'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport animationStyles from '../animation/Animation.module.css'\nimport styles from './IDE.module.css'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\nconst testIds = {\n  root: 'IDE',\n  get chat() {\n    return `${this.root}-chat`\n  },\n  get editor() {\n    return `${this.root}-editor`\n  },\n  get editorContent() {\n    return `${this.editor}-content`\n  },\n  get editorTabs() {\n    return `${this.editor}-tab`\n  },\n}\n\n/**\n * @deprecated IDEProps is deprecated and will be removed in a future release.\n */\nexport type IDEProps = {\n  /**\n   * Test id for the IDE\n   */\n  'data-testid'?: string\n  /**\n   * The optionally configurable height of the IDE\n   */\n  height?: number\n  /**\n   * Alternative presentation of the IDE\n   */\n  variant?: 'default' | 'glass'\n} & BaseProps<HTMLDivElement>\n\nconst _IDERoot = memo(\n  ({children, className, 'data-testid': testId, height, variant = 'default', ...rest}: PropsWithChildren<IDEProps>) => {\n    const [animationIsPaused, setAnimationIsPaused] = useState(false)\n    const [chatAnimationIsDone, setChatAnimationIsDone] = useState(false)\n    const [editorAnimationIsDone, setEditorAnimationIsDone] = useState(false)\n    const chatRef = useRef<IDEChatHandle>(null)\n    const editorRef = useRef<IDEEditorHandle>(null)\n\n    useEffect(() => {\n      if (chatAnimationIsDone && editorAnimationIsDone) {\n        setAnimationIsPaused(false)\n      }\n    }, [chatAnimationIsDone, editorAnimationIsDone])\n\n    const childrenArray = useMemo(() => Children.toArray(children), [children])\n\n    const ChatChild = childrenArray.find(\n      (child): child is React.ReactElement<React.ComponentProps<typeof IDE.Chat>> =>\n        isValidElement(child) && child.type === IDE.Chat,\n    )\n    const hasChatChild = !!ChatChild\n    const ClonedChatChild = hasChatChild\n      ? React.cloneElement(ChatChild, {\n          ref: chatRef,\n          'data-testid': testId || testIds.chat,\n          animationIsPaused,\n          setAnimationIsDone: setChatAnimationIsDone,\n        })\n      : null\n\n    const EditorChild = childrenArray.find(\n      (child): child is React.ReactElement<React.ComponentProps<typeof IDE.Editor>> =>\n        isValidElement(child) && child.type === IDE.Editor,\n    )\n    const hasEditorChild = !!EditorChild\n    const ClonedEditorChild = hasEditorChild\n      ? React.cloneElement(EditorChild, {\n          ref: editorRef,\n          'data-testid': testId || testIds.editor,\n          animationIsPaused,\n          setAnimationIsDone: setEditorAnimationIsDone,\n        })\n      : null\n\n    // If a child exists, we need to account for its animation state\n    const allAnimationsAreDone = (!hasChatChild || chatAnimationIsDone) && (!hasEditorChild || editorAnimationIsDone)\n\n    const onPlayPause = useCallback(\n      isPlaying => {\n        if (allAnimationsAreDone) {\n          setChatAnimationIsDone(false)\n          setEditorAnimationIsDone(false)\n          chatRef.current?.resetAnimation()\n          editorRef.current?.resetAnimation()\n        } else {\n          setAnimationIsPaused(!isPlaying)\n        }\n      },\n      [allAnimationsAreDone],\n    )\n\n    return (\n      <section\n        data-testid={testId || testIds.root}\n        className={clsx(\n          styles[`IDE--${variant}`],\n          hasChatChild && hasEditorChild && styles['IDE--full-exp'],\n          hasChatChild && !hasEditorChild && styles['IDE--chat-only'],\n          className,\n        )}\n      >\n        <div {...rest}>\n          <div\n            className={styles['IDE__inner']}\n            style={{['--brand-IDE-height' as string]: height ? `${height}px` : undefined}}\n          >\n            <div className={styles.IDE__main}>\n              {ClonedChatChild}\n              {ClonedEditorChild}\n            </div>\n            <PlayPauseButton isPlaying={!animationIsPaused && !allAnimationsAreDone} onPlayPause={onPlayPause} />\n          </div>\n        </div>\n      </section>\n    )\n  },\n)\n\ntype IDEChatProps = {\n  /**\n   * The chat script\n   */\n  script: IDEChatMessage[]\n  /**\n   * Alternative description of the chat script for users of assistive technologies.\n   */\n  alternativeText: string\n  /**\n   * The delay between messages\n   */\n  animationDelay?: number\n  /**\n   * Test id for the IDE\n   */\n  'data-testid'?: string\n  /**\n   * Internal prop used for controlling the animation state\n   */\n  animationIsPaused?: boolean\n  /**\n   * Internal prop used for controlling the animation state\n   */\n  setAnimationIsDone?: (isDone: boolean) => void\n} & BaseProps<HTMLElement>\n\ntype IDEChatMessageUser = {\n  role: 'user'\n  avatar: string\n}\n\ntype IDEChatMessageAssistant = {\n  role: 'assistant'\n}\n\n/**\n * @deprecated IDEChatMessage is deprecated and will be removed in a future release.\n */\nexport type IDEChatMessage = {handle: string; message: string; codeSnippet?: string; highlighter?: 'hljs'} & (\n  | IDEChatMessageUser\n  | IDEChatMessageAssistant\n)\n\ntype IDEChatHandle = HTMLElement & {\n  resetAnimation: () => void\n}\n\nconst _Chat = memo(\n  forwardRef<IDEChatHandle, IDEChatProps>(\n    (\n      {\n        'data-testid': testId,\n        script,\n        animationDelay = 3000,\n        alternativeText,\n        animationIsPaused,\n        setAnimationIsDone,\n        ...rest\n      },\n      forwardedRef,\n    ) => {\n      const ref = useProvidedRefOrCreate(forwardedRef)\n      const delay = animationDelay\n      const messagesRef = useRef<HTMLDivElement>(null)\n      const [scheduledAnimations, setScheduledAnimations] = useState<IDEChatAnimation[]>([])\n      const isPausedRef = useRef(animationIsPaused)\n      isPausedRef.current = animationIsPaused\n\n      const scrollIntoParentView = useCallback((element: Element | null) => {\n        if (!element || !messagesRef.current) return\n        const container = messagesRef.current\n        const elementRect = element.getBoundingClientRect()\n        const containerRect = container.getBoundingClientRect()\n\n        if (elementRect.top < containerRect.top || elementRect.bottom > containerRect.bottom) {\n          container.scrollTop += elementRect.top - containerRect.top\n        }\n      }, [])\n\n      const scheduleAnimations = useCallback(() => {\n        if (!script.length) return\n\n        const allMessages = document.querySelectorAll(`.${styles['IDE__Chat-message']}`)\n        const defaultMessages = Array.from(allMessages).slice(0, 1)\n        const newerMessages = Array.from(allMessages).slice(1)\n\n        const animations: IDEChatAnimation[] = []\n\n        if (defaultMessages[0]) {\n          animations.push({\n            delay: 0,\n            action: 'show',\n            element: defaultMessages[0] as HTMLElement,\n          })\n        }\n\n        animations.push({\n          delay: delay / 4,\n          action: 'delay',\n        })\n\n        for (const [index, message] of newerMessages.entries()) {\n          animations.push({\n            delay,\n            action: 'show',\n            element: message as HTMLElement,\n            shouldScroll: index % 2 === 0,\n            shouldFadePrevious: true,\n            messageIndex: index,\n            isLast: index === newerMessages.length - 1,\n          })\n        }\n\n        animations.push({\n          delay: 100,\n          isDone: true,\n        })\n\n        setScheduledAnimations(animations)\n      }, [script, delay])\n\n      const resetAnimation = useCallback(() => {\n        setAnimationIsDone?.(false)\n\n        const allMessages = document.querySelectorAll(`.${styles['IDE__Chat-message']}`)\n        for (const message of allMessages) {\n          message.classList.remove(styles['IDE__Chat-message--visible'], styles['IDE__Chat-message--faded'])\n        }\n\n        if (messagesRef.current) {\n          messagesRef.current.scrollTop = 0\n        }\n\n        scheduleAnimations()\n      }, [scheduleAnimations, setAnimationIsDone])\n\n      useImperativeHandle(ref, () => {\n        if (!ref.current) {\n          return {\n            resetAnimation,\n          } as IDEChatHandle\n        }\n\n        return {\n          ...ref.current,\n          resetAnimation,\n        }\n      })\n\n      useEffect(() => {\n        scheduleAnimations()\n      }, [scheduleAnimations])\n\n      useEffect(() => {\n        let prevTimestamp = -1\n        let animationId: number\n        let currentIndex = 0\n\n        const animate: FrameRequestCallback = timestamp => {\n          if (currentIndex >= scheduledAnimations.length || isPausedRef.current) {\n            if (isPausedRef.current) {\n              // Reset timestamp when paused so we don't accumulate time\n              prevTimestamp = -1\n            }\n            animationId = requestAnimationFrame(animate)\n            return\n          }\n\n          const diff = prevTimestamp === -1 ? 0 : timestamp - prevTimestamp\n          prevTimestamp = timestamp\n\n          const nextAnimation = scheduledAnimations[currentIndex]\n\n          if (nextAnimation.isDone) {\n            setAnimationIsDone?.(true)\n            return\n          }\n\n          nextAnimation.delay -= diff\n\n          if (nextAnimation.delay <= 0) {\n            if (nextAnimation.action === 'delay') {\n              // Just a delay, no visual action needed\n              currentIndex++\n            } else {\n              const animation = nextAnimation as IDEChatAnimationWithElement\n\n              if (animation.shouldScroll) {\n                scrollIntoParentView(animation.element)\n              }\n\n              if (animation.shouldFadePrevious) {\n                // Fade previous messages\n                const allMessages = document.querySelectorAll(`.${styles['IDE__Chat-message']}`)\n                const defaultMessages = Array.from(allMessages).slice(0, 1)\n                const newerMessages = Array.from(allMessages).slice(1)\n\n                for (const defaultMessage of defaultMessages) {\n                  defaultMessage.classList.add(styles['IDE__Chat-message--faded'])\n                }\n\n                const filteredNewerMessage = newerMessages.filter((_, i) => i < (animation.messageIndex ?? 0))\n                for (const filteredMessage of filteredNewerMessage) {\n                  filteredMessage.classList.add(styles['IDE__Chat-message--faded'])\n                }\n\n                // Remove faded class from all messages at the end\n                if (animation.isLast) {\n                  setTimeout(() => {\n                    for (const defaultMessage of defaultMessages) {\n                      defaultMessage.classList.remove(styles['IDE__Chat-message--faded'])\n                    }\n                    for (const newerMessage of newerMessages) {\n                      newerMessage.classList.remove(styles['IDE__Chat-message--faded'])\n                    }\n                  }, 100)\n                }\n              }\n\n              animation.element.classList.add(styles['IDE__Chat-message--visible'])\n              currentIndex++\n            }\n          }\n\n          animationId = requestAnimationFrame(animate)\n        }\n\n        animationId = requestAnimationFrame(animate)\n\n        return () => {\n          if (animationId) {\n            cancelAnimationFrame(animationId)\n          }\n        }\n      }, [scheduledAnimations, scrollIntoParentView, setAnimationIsDone])\n\n      return (\n        <section ref={ref} className={styles.IDE__Chat} data-testid={testId || testIds.chat} {...rest}>\n          <span className=\"visually-hidden\">{alternativeText}</span>\n          <div className={styles['IDE__Chat-wrapper']} aria-hidden>\n            <div ref={messagesRef} className={styles['IDE__Chat-messages']}>\n              {script.length &&\n                script.map((message, index) => (\n                  <div\n                    id={`IDE__Chat-message-${index}`}\n                    key={index}\n                    className={clsx(\n                      styles['IDE__Chat-message'],\n                      message.role === 'user' && styles['IDE__Chat-message--user'],\n                    )}\n                  >\n                    <div className={styles['IDE__Chat-message-user']}>\n                      {message.role === 'user' ? (\n                        <Avatar src={message.avatar} alt={message.handle} />\n                      ) : (\n                        <CopilotIcon size={24} />\n                      )}\n                      <Text as=\"p\" size=\"100\" weight=\"medium\" className={styles['IDE__Chat-message-handle']}>\n                        {message.handle}\n                      </Text>\n                    </div>\n                    <div className={styles['IDE__Chat-message-content']}>\n                      <div className={styles['IDE__Chat-message-text']}>{message.message}</div>\n\n                      {message.highlighter && message.codeSnippet && (\n                        <pre\n                          className={styles['IDE__Chat-message-snippet']}\n                          dangerouslySetInnerHTML={{__html: message.codeSnippet}}\n                        />\n                      )}\n\n                      {!message.highlighter && message.codeSnippet && (\n                        <pre className={styles['IDE__Chat-message-snippet']}>{message.codeSnippet}</pre>\n                      )}\n                    </div>\n                  </div>\n                ))}\n            </div>\n            <div className={styles['IDE__Chat-input-area']}>\n              <TextInput\n                disabled\n                className={styles['IDE__Chat-input']}\n                fullWidth\n                placeholder=\"Ask a question or type '/' for commands.\"\n                trailingVisual={<PaperAirplaneIcon className={styles['IDE__Chat-input-icon']} />}\n              />\n            </div>\n          </div>\n        </section>\n      )\n    },\n  ),\n)\n\ntype IDEEditorProps = {\n  /**\n   * The index of the active tab.\n   */\n  activeTab?: number\n\n  /**\n   * An array of IDE editor files.\n   */\n  files: IDEEditorFile[]\n\n  /**\n   * Determines whether line numbers should be shown in the editor.\n   */\n  showLineNumbers?: boolean\n\n  /**\n   * Controls the size of the editor text.\n   */\n  size?: 'small' | 'medium' | 'large'\n\n  /**\n   * Used for triggering animation externally.\n   */\n  triggerAnimation?: boolean\n\n  /**\n   * Test id for the IDE.\n   */\n  'data-testid'?: string\n  /**\n   * Enable user customisation of the icons used in file tabs.\n   */\n  tabIcons?: IDEEditorTabIcon\n  /**\n   * Internal prop used for controlling the animation state\n   */\n  animationIsPaused?: boolean\n  /**\n   * Internal prop used for controlling the animation state\n   */\n  setAnimationIsDone?: (isDone: boolean) => void\n} & BaseProps<HTMLDivElement>\n\n/**\n * @deprecated IDEEditorFile is deprecated and will be removed in a future release.\n */\nexport type IDEEditorFile = {\n  name: string\n  /**\n   * Alternative description of the code for users of assistive technologies.\n   */\n  alternativeText: string\n  /**\n   * Controls line at which the Copilot suggestion begins\n   */\n  suggestedLineStart?: number\n  code: string | string[]\n  highlighter?: 'hljs' // add additional highlighters as needed\n}\n\ntype IDEEditorTabIcon = Record<string, string>\n\nconst iconBaseUrl = 'https://github.com/primer/brand/assets'\n\nexport const IDEDefaultIconMap: IDEEditorTabIcon = {\n  py: `${iconBaseUrl}/13340707/7ca66487-d958-4c30-acbc-397f7a6169b7`,\n  ts: `${iconBaseUrl}/13340707/2a7b87cf-b522-4ab5-a127-5a2c69bd0a89`,\n  js: `${iconBaseUrl}/13340707/5a7bfffa-af38-4e32-ab39-a9e7efbcc7c6`,\n  jsx: `${iconBaseUrl}/13340707/d975a978-dbc7-4626-b995-c00cac9bc132`,\n  hs: `${iconBaseUrl}/13340707/826843ce-424b-4693-84d3-a43e4b7f1280`,\n  html: `${iconBaseUrl}/13340707/f5b03413-b8f4-4cd5-9d91-6b574ada14ed`,\n  css: `${iconBaseUrl}/13340707/3df2f0ba-daff-4b76-8492-f5773c515369`,\n  scss: `${iconBaseUrl}/13340707/a1d21f2e-c813-4211-8d9a-2869c1968e9a`,\n  json: `${iconBaseUrl}/13340707/ca21068e-8c27-4b84-9a1d-b965b49b3568`,\n  md: `${iconBaseUrl}/13340707/39e7ff2b-9d0a-47e9-9686-bed51800084c`,\n  yml: `${iconBaseUrl}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,\n  yaml: `${iconBaseUrl}/13340707/afb28101-1352-444f-8a8e-419b6883132f`,\n  txt: `${iconBaseUrl}/13340707/7c52da20-1fe2-496c-b4bb-6ea61d0fe3dd`,\n  sh: `${iconBaseUrl}/13340707/549ce181-4541-4811-8712-a9c5abd8eeae`,\n  sql: `${iconBaseUrl}/13340707/b2b73a2e-e4e1-47c8-aabc-c204836244b8`,\n  // Add additional default icons as needed\n  // Note: These can also be customised and extended by end user using the tabIcons prop\n}\n\nexport const IDEFileExtensions = Object.keys(IDEDefaultIconMap)\n\ntype IDEAnimation = {\n  delay: number\n  isDone?: boolean\n  tab: string | null\n} & ({elements: HTMLElement[]} | {isDone: true})\n\ntype IDEChatAnimation = {\n  delay: number\n  isDone?: boolean\n} & (\n  | {\n      action: 'show'\n      element: HTMLElement\n      shouldScroll?: boolean\n      shouldFadePrevious?: boolean\n      messageIndex?: number\n      isLast?: boolean\n    }\n  | {action: 'delay'}\n  | {isDone: true}\n)\n\ntype IDEChatAnimationWithElement = {\n  delay: number\n  action: 'show'\n  element: HTMLElement\n  shouldScroll?: boolean\n  shouldFadePrevious?: boolean\n  messageIndex?: number\n  isLast?: boolean\n}\n\ntype IDEEditorHandle = HTMLElement & {\n  resetAnimation: () => void\n}\n\nconst _Editor = memo(\n  forwardRef<IDEEditorHandle, IDEEditorProps>(\n    (\n      {\n        activeTab = 0,\n        'data-testid': testId,\n        files,\n        triggerAnimation = false,\n        showLineNumbers = true,\n        size = 'medium',\n        tabIcons = IDEDefaultIconMap,\n        animationIsPaused,\n        setAnimationIsDone,\n        ...rest\n      },\n      forwardedRef,\n    ) => {\n      const ref = useProvidedRefOrCreate(forwardedRef)\n      const presRef = useRef<HTMLDivElement>(null)\n      const [scheduledAnimations, setScheduledAnimations] = useState<IDEAnimation[]>([])\n      const isPausedRef = useRef(animationIsPaused)\n      isPausedRef.current = animationIsPaused\n\n      const tabs = useTabs({\n        defaultTab: activeTab.toString(),\n        autoActivate: true,\n        onTabActivate: (_, activeTabRef) => {\n          activeTabRef?.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'start'})\n          resetAnimation()\n        },\n      })\n\n      const scheduleAnimations = useCallback(() => {\n        if (!presRef.current) return\n\n        const pres = presRef.current.querySelectorAll<HTMLPreElement>('pre:not([data-has-suggestion=\"true\"])')\n        const copilotSuggestions = presRef.current.querySelectorAll<HTMLPreElement>('pre[data-has-suggestion=\"true\"]')\n\n        const animations: IDEAnimation[] = []\n\n        for (const pre of pres) {\n          animations.push({\n            delay: 200,\n            elements: [pre],\n            tab: tabs.activeTab,\n          })\n        }\n\n        animations.push({\n          delay: 1000,\n          elements: Array.from(copilotSuggestions),\n          tab: tabs.activeTab,\n        })\n\n        animations.push({\n          delay: 200,\n          isDone: true,\n          tab: tabs.activeTab,\n        })\n\n        setScheduledAnimations(animations)\n      }, [tabs.activeTab])\n\n      const resetAnimation = useCallback(() => {\n        setScheduledAnimations([])\n        setAnimationIsDone?.(false)\n\n        const pres = presRef.current?.querySelectorAll('pre')\n        if (pres) {\n          for (const pre of pres) {\n            pre.classList.remove(animationStyles['Animation--active'])\n          }\n        }\n\n        scheduleAnimations()\n      }, [scheduleAnimations, setAnimationIsDone])\n\n      useImperativeHandle(ref, () => {\n        if (!ref.current) {\n          return {\n            resetAnimation,\n          } as IDEEditorHandle\n        }\n\n        return {\n          ...ref.current,\n          resetAnimation,\n        }\n      })\n\n      useEffect(() => {\n        scheduleAnimations()\n      }, [scheduleAnimations, triggerAnimation])\n\n      useEffect(() => {\n        let prevTimestamp = -1\n        let animationId: number\n        let currentIndex = 0\n\n        const animate: FrameRequestCallback = timestamp => {\n          if (currentIndex >= scheduledAnimations.length || tabs.activeTab === null) {\n            return\n          }\n\n          if (isPausedRef.current) {\n            // Reset timestamp when paused so we don't accumulate time\n            prevTimestamp = -1\n            animationId = requestAnimationFrame(animate)\n            return\n          }\n\n          const diff = prevTimestamp === -1 ? 0 : timestamp - prevTimestamp\n          prevTimestamp = timestamp\n\n          const nextAnimation = scheduledAnimations[currentIndex]\n\n          if (nextAnimation.isDone) {\n            setAnimationIsDone?.(true)\n            return\n          }\n\n          if (nextAnimation.tab !== tabs.activeTab) {\n            return\n          }\n\n          nextAnimation.delay -= diff\n\n          if (nextAnimation.delay <= 0) {\n            for (const element of nextAnimation.elements) {\n              element.classList.add(animationStyles['Animation--active'])\n            }\n            currentIndex++\n          }\n\n          animationId = requestAnimationFrame(animate)\n        }\n\n        animationId = requestAnimationFrame(animate)\n\n        return () => {\n          if (animationId) {\n            cancelAnimationFrame(animationId)\n          }\n        }\n      }, [scheduledAnimations, setAnimationIsDone, tabs.activeTab])\n\n      return (\n        <div\n          className={clsx(styles.IDE__Editor, styles[`IDE__Editor--${size}`])}\n          data-testid={testId || testIds.editor}\n          {...rest}\n        >\n          <div\n            className={styles['IDE__Editor-tabs']}\n            data-testid={testIds.editorTabs}\n            {...tabs.getTabListProps({label: 'files'})}\n          >\n            {files.map((file, index) => {\n              const language = file.name.split('.').pop()\n              const isActiveTab = tabs.activeTab === index.toString()\n\n              return (\n                <button\n                  {...tabs.getTabProps(index.toString())}\n                  key={file.name}\n                  className={clsx(styles['IDE__Editor-tab'], isActiveTab && styles['IDE__Editor-tab--active'])}\n                >\n                  {language && (\n                    <img\n                      className={styles['IDE__Editor-tab-icon']}\n                      alt=\"\"\n                      width={16}\n                      height={16}\n                      src={tabIcons[language]}\n                    />\n                  )}\n                  {file.name}\n                </button>\n              )\n            })}\n          </div>\n          <div className={styles['IDE__Editor-content']}>\n            {files.map((file, fileIndex) => (\n              <div {...tabs.getTabPanelProps(fileIndex.toString())} key={file.name}>\n                <span className=\"visually-hidden\">{file.alternativeText}</span>\n                <div className={styles['IDE__Editor-content-wrapper']} aria-hidden=\"true\">\n                  {showLineNumbers && (\n                    <div className={styles['IDE__Editor-lineNumbers']}>\n                      {(Array.isArray(file.code) ? file.code : file.code.split('\\n')).map((_, index) => (\n                        <div key={index} className={styles['IDE__Editor-lineNumber']}>\n                          {index + 1}\n                        </div>\n                      ))}\n                    </div>\n                  )}\n                  <div\n                    ref={tabs.activeTab === fileIndex.toString() ? presRef : null}\n                    data-testid={testIds.editorContent}\n                    className={styles['IDE__Editor-content-inner']}\n                  >\n                    {Array.isArray(file.code) ? (\n                      (file.code as string[]).map((line, index) => {\n                        const isSuggestion = index + 1 >= (file.suggestedLineStart ?? Infinity)\n                        return (\n                          <React.Fragment key={line + index}>\n                            <pre\n                              key={index}\n                              className={clsx(\n                                styles['IDE__Editor-pane'],\n                                index + 1 < (file.suggestedLineStart ?? Infinity) &&\n                                  animationStyles['Animation--slide-in-right'],\n                                isSuggestion && animationStyles['Animation--slide-in-down'],\n                                isSuggestion && styles['IDE__Editor-pane--suggested'],\n                              )}\n                              dangerouslySetInnerHTML={{__html: line === '' ? '&nbsp;' : line}}\n                              data-has-suggestion={isSuggestion}\n                            />\n                            {isSuggestion && index === file.code.length - 1 && (\n                              <pre\n                                className={clsx(\n                                  animationStyles['Animation--slide-in-down'],\n                                  styles['IDE__Chat-copilot-indicator'],\n                                )}\n                                data-has-suggestion={isSuggestion}\n                              >\n                                <CopilotIcon size={24} className={styles['IDE__Chat-copilot-indicator-label']} />\n                                <Text as=\"span\" className={styles['IDE__Chat-copilot-indicator-label']}>\n                                  Copilot\n                                </Text>\n                              </pre>\n                            )}\n                          </React.Fragment>\n                        )\n                      })\n                    ) : (\n                      <pre\n                        className={clsx(styles['IDE__Editor-pane'], animationStyles['Animation--slide-in-right'])}\n                        dangerouslySetInnerHTML={{__html: file.code}}\n                      />\n                    )}\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      )\n    },\n  ),\n)\n\nconst PauseIcon = () => (\n  <svg fill=\"none\" role=\"presentation\" aria-hidden=\"true\" viewBox=\"3.17 2.28 13.7 15.42\">\n    <path\n      d=\"M4.66148 2.3125C3.83593 2.3125 3.16669 2.98174 3.16669 3.80729V16.1927C3.16669 17.0183 3.83593 17.6875 4.66148 17.6875H7.65106C8.47662 17.6875 9.14586 17.0183 9.14586 16.1927V3.80729C9.14586 2.98174 8.47662 2.3125 7.65106 2.3125H4.66148ZM4.44794 3.80729C4.44794 3.68936 4.54355 3.59375 4.66148 3.59375H7.65106C7.769 3.59375 7.86461 3.68936 7.86461 3.80729V16.1927C7.86461 16.3106 7.769 16.4062 7.65106 16.4062H4.66148C4.54355 16.4062 4.44794 16.3106 4.44794 16.1927V3.80729ZM12.349 2.3125C11.5235 2.3125 10.8542 2.98174 10.8542 3.80729V16.1927C10.8542 17.0183 11.5235 17.6875 12.349 17.6875H15.3386C16.1642 17.6875 16.8334 17.0183 16.8334 16.1927V3.80729C16.8334 2.98174 16.1642 2.3125 15.3386 2.3125H12.349ZM12.1355 3.80729C12.1355 3.68936 12.2311 3.59375 12.349 3.59375H15.3386C15.4565 3.59375 15.5521 3.68936 15.5521 3.80729V16.1927C15.5521 16.3106 15.4565 16.4062 15.3386 16.4062H12.349C12.2311 16.4062 12.1355 16.3106 12.1355 16.1927V3.80729Z\"\n      fill=\"currentColor\"\n    ></path>\n  </svg>\n)\nconst PlayIcon = () => (\n  <svg fill=\"none\" role=\"presentation\" aria-hidden=\"true\" viewBox=\"4.02 2.3 14.43 15.4\">\n    <path\n      d=\"M6.24905 3.69194C5.82218 3.45967 5.30225 3.76868 5.30225 4.25466V15.7452C5.30225 16.2312 5.82218 16.5402 6.24906 16.3079L16.8079 10.5626C17.2538 10.32 17.2538 9.67983 16.8079 9.4372L6.24905 3.69194ZM4.021 4.25466C4.021 2.79672 5.58078 1.86969 6.86142 2.56651L17.4203 8.31176C18.758 9.03966 18.758 10.9602 17.4203 11.6881L6.86143 17.4333C5.58079 18.1301 4.021 17.2031 4.021 15.7452V4.25466Z\"\n      fill=\"currentColor\"\n    ></path>\n  </svg>\n)\n\ntype PlayPauseButtonProps = {\n  isPlaying?: boolean\n  onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n  const onClick = useCallback(() => {\n    onPlayPause?.(!isPlaying)\n  }, [onPlayPause, isPlaying])\n\n  /**\n   * aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n   * eg \"Play animation on\" or \"Pause animation off\"\n   */\n  return (\n    <button\n      className={styles['IDE__play-pause-button']}\n      type=\"button\"\n      onClick={onClick}\n      aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n    >\n      {isPlaying ? <PauseIcon /> : <PlayIcon />}\n    </button>\n  )\n}\n\n/**\n * Use IDE to display a decorative editor component\n * @deprecated IDE is deprecated and will be removed in a future release.\n * @see https://primer.style/brand/components/IDE\n */\nexport const IDE = Object.assign(_IDERoot, {\n  testIds,\n  Chat: _Chat,\n  Editor: _Editor,\n})\n"],"mappings":"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"}