matrix-design-system 1.0.0

package/dist/molecules/menu/menu-item/menu-item.d.mts

@@ -0,0 +1,16 @@
+import { LinkComponent } from "../../../atoms/links/anchor-link/anchor-link.mjs";
+import "../../../atoms/links/anchor-link/index.mjs";
+import { FC, ReactNode } from "react";
+//#region src/molecules/menu/menu-item/menu-item.d.ts
+type MenuItemProps = {
+  to: string;
+  linkComponent?: LinkComponent;
+  selected: boolean;
+  children?: ReactNode;
+  className?: string;
+  onClick?: () => void;
+  external?: boolean;
+};
+declare const MenuItem: FC<MenuItemProps>;
+//#endregion
+export { MenuItem, MenuItemProps };

package/dist/molecules/menu/menu-item/menu-item.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { AnchorLink } from "../../../atoms/links/anchor-link/anchor-link.mjs";
+import { useMenuItemStore } from "./use-menu-item-store.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/molecules/menu/menu-item/menu-item.tsx
+const MenuItem = (t0) => {
+	const $ = c(17);
+	const { children, className, to, selected, onClick, external, linkComponent: t1 } = t0;
+	const Link = t1 === void 0 ? AnchorLink : t1;
+	const { effects } = useMenuItemStore();
+	const { handleClick } = effects;
+	const composedClassName = `relative transition-all duration-300 ${selected ? "text-accent" : "text-primary-text"} px-2 py-2 xs:px-6 xs:py-1 text-sm md:text-base text-shadow-md text-center no-underline ${`border border-solid rounded-xl ${selected ? "border-accent" : "border-transparent"}`} flex items-center justify-center ${selected ? "bg-accent-alpha-15" : "transparent"} hover:bg-accent-alpha-10 hover:text-accent hover:border-accent hover:transition-all hover:duration-300 hover:translate-y-[-1px] hover:shadow-lg${className ? ` ${className}` : ""}`;
+	if (external) {
+		let t2;
+		if ($[0] !== handleClick || $[1] !== onClick) {
+			t2 = handleClick(onClick);
+			$[0] = handleClick;
+			$[1] = onClick;
+			$[2] = t2;
+		} else t2 = $[2];
+		let t3;
+		if ($[3] !== children || $[4] !== composedClassName || $[5] !== t2 || $[6] !== to) {
+			t3 = /* @__PURE__ */ jsx("a", {
+				href: to,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: composedClassName,
+				onClick: t2,
+				children
+			});
+			$[3] = children;
+			$[4] = composedClassName;
+			$[5] = t2;
+			$[6] = to;
+			$[7] = t3;
+		} else t3 = $[7];
+		return t3;
+	}
+	let t2;
+	if ($[8] !== handleClick || $[9] !== onClick) {
+		t2 = handleClick(onClick);
+		$[8] = handleClick;
+		$[9] = onClick;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== Link || $[12] !== children || $[13] !== composedClassName || $[14] !== t2 || $[15] !== to) {
+		t3 = /* @__PURE__ */ jsx(Link, {
+			href: to,
+			className: composedClassName,
+			onClick: t2,
+			children
+		});
+		$[11] = Link;
+		$[12] = children;
+		$[13] = composedClassName;
+		$[14] = t2;
+		$[15] = to;
+		$[16] = t3;
+	} else t3 = $[16];
+	return t3;
+};
+//#endregion
+export { MenuItem };

package/dist/molecules/menu/menu-item/use-menu-item-store.mjs

@@ -0,0 +1,10 @@
+"use client";
+//#region src/molecules/menu/menu-item/use-menu-item-store.ts
+const useMenuItemStore = () => {
+	const handleClick = (onClick) => () => {
+		onClick?.();
+	};
+	return { effects: { handleClick } };
+};
+//#endregion
+export { useMenuItemStore };

package/dist/molecules/stat-card/index.d.mts

@@ -0,0 +1,2 @@
+import { StatCard, StatCardProps } from "./stat-card.mjs";
+export { StatCard, type StatCardProps };

package/dist/molecules/stat-card/stat-card.d.mts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from "react";
+//#region src/molecules/stat-card/stat-card.d.ts
+interface StatCardProps {
+  value: number | string;
+  label: string;
+  icon?: ReactNode;
+}
+declare const StatCard: FC<StatCardProps>;
+//#endregion
+export { StatCard, StatCardProps };

package/dist/molecules/stat-card/stat-card.mjs

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/molecules/stat-card/stat-card.tsx
+const StatCard = ({ value, label, icon }) => /* @__PURE__ */ jsxs("div", {
+	className: "glow-container flex min-h-30 min-w-0 flex-col items-center justify-between p-5",
+	children: [
+		icon && /* @__PURE__ */ jsx("span", {
+			className: "text-accent text-2xl mb-1",
+			children: icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "text-accent text-shadow-lg w-full text-center text-2xl leading-none font-medium break-words tabular-nums sm:text-3xl md:text-4xl lg:text-6xl",
+			children: value
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "text-accent text-base mt-2",
+			children: label
+		})
+	]
+});
+//#endregion
+export { StatCard };

package/dist/molecules/terminal-list-item/index.d.mts

@@ -0,0 +1,2 @@
+import { TerminalListItem, TerminalListItemProps } from "./terminal-list-item.mjs";
+export { TerminalListItem, type TerminalListItemProps };

package/dist/molecules/terminal-list-item/terminal-list-item.d.mts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+//#region src/molecules/terminal-list-item/terminal-list-item.d.ts
+interface TerminalListItemProps {
+  title: string;
+  description: string;
+}
+declare const TerminalListItem: FC<TerminalListItemProps>;
+//#endregion
+export { TerminalListItem, TerminalListItemProps };

package/dist/molecules/terminal-list-item/terminal-list-item.mjs

@@ -0,0 +1,13 @@
+import { TerminalLine } from "../../atoms/typography/terminal-blocks/terminal-blocks.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/molecules/terminal-list-item/terminal-list-item.tsx
+const TerminalListItem = ({ title, description }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(TerminalLine, { children: [
+	">",
+	" ",
+	title
+] }), /* @__PURE__ */ jsx("p", {
+	className: "text-primary-text/60 ml-4 line-clamp-1 font-mono text-xs leading-tight",
+	children: description
+})] });
+//#endregion
+export { TerminalListItem };

package/dist/molecules/terminal-progress-bar/index.d.mts

@@ -0,0 +1,2 @@
+import { TerminalProgressBar } from "./terminal-progress-bar.mjs";
+export { TerminalProgressBar };

package/dist/molecules/terminal-progress-bar/terminal-progress-bar.d.mts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+//#region src/molecules/terminal-progress-bar/terminal-progress-bar.d.ts
+interface TerminalProgressBarProps {
+  percentage: number;
+  loadingMessage: string;
+  completeMessage: string;
+  shouldReduceMotion?: boolean;
+}
+declare const TerminalProgressBar: FC<TerminalProgressBarProps>;
+//#endregion
+export { TerminalProgressBar };

package/dist/molecules/terminal-progress-bar/terminal-progress-bar.mjs

@@ -0,0 +1,20 @@
+import { Cursor, SuccessText, TerminalLine } from "../../atoms/typography/terminal-blocks/terminal-blocks.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/molecules/terminal-progress-bar/terminal-progress-bar.tsx
+const getBar = (percentage, length = 24) => {
+	const filled = Math.round(percentage / 100 * length);
+	const empty = length - filled;
+	return `[${"█".repeat(filled)}${"░".repeat(empty)}]  ${percentage}%`;
+};
+const TerminalProgressBar = ({ percentage, loadingMessage, completeMessage, shouldReduceMotion = false }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center",
+		children: [/* @__PURE__ */ jsx(TerminalLine, { children: percentage >= 100 ? /* @__PURE__ */ jsx(SuccessText, { children: `> ${completeMessage}` }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			`> ${loadingMessage}`,
+			" ",
+			!shouldReduceMotion ? /* @__PURE__ */ jsx(Cursor, {}) : null
+		] }) }), /* @__PURE__ */ jsx(TerminalLine, { children: /* @__PURE__ */ jsx(SuccessText, { children: getBar(percentage) }) })]
+	});
+};
+//#endregion
+export { TerminalProgressBar };

package/dist/molecules/typography/page-title/index.d.mts

@@ -0,0 +1,2 @@
+import { PageTitle } from "./page-title.mjs";
+export { PageTitle };

package/dist/molecules/typography/page-title/page-title.d.mts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/molecules/typography/page-title/page-title.d.ts
+declare const PageTitle: FC<PropsWithChildren>;
+//#endregion
+export { PageTitle };

package/dist/molecules/typography/page-title/page-title.mjs

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/molecules/typography/page-title/page-title.tsx
+const PageTitle = ({ children }) => /* @__PURE__ */ jsx("h1", {
+	className: "mb-4",
+	children
+});
+//#endregion
+export { PageTitle };

package/dist/molecules/typography/paragraph-title-with-icon/index.d.mts

@@ -0,0 +1,2 @@
+import { ParagraphTitleWithIcon } from "./paragraph-title-with-icon.mjs";
+export { ParagraphTitleWithIcon };

package/dist/molecules/typography/paragraph-title-with-icon/paragraph-title-with-icon.d.mts

@@ -0,0 +1,8 @@
+import React from "react";
+//#region src/molecules/typography/paragraph-title-with-icon/paragraph-title-with-icon.d.ts
+declare const ParagraphTitleWithIcon: React.FC<{
+  icon: React.ReactNode;
+  children: string;
+}>;
+//#endregion
+export { ParagraphTitleWithIcon };

package/dist/molecules/typography/paragraph-title-with-icon/paragraph-title-with-icon.mjs

@@ -0,0 +1,13 @@
+import "react";
+import { jsxs } from "react/jsx-runtime";
+//#region src/molecules/typography/paragraph-title-with-icon/paragraph-title-with-icon.tsx
+const ParagraphTitleWithIcon = ({ icon, children }) => /* @__PURE__ */ jsxs("span", {
+	className: "flex items-center gap-2",
+	children: [
+		icon,
+		" ",
+		children
+	]
+});
+//#endregion
+export { ParagraphTitleWithIcon };

package/dist/molecules/typography/section-heading/index.d.mts

@@ -0,0 +1,2 @@
+import { SectionHeading, SectionHeadingProps } from "./section-heading.mjs";
+export { SectionHeading, type SectionHeadingProps };

package/dist/molecules/typography/section-heading/section-heading.d.mts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+//#region src/molecules/typography/section-heading/section-heading.d.ts
+interface SectionHeadingProps {
+  title: string;
+  description?: string;
+}
+declare const SectionHeading: FC<SectionHeadingProps>;
+//#endregion
+export { SectionHeading, SectionHeadingProps };

package/dist/molecules/typography/section-heading/section-heading.mjs

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/molecules/typography/section-heading/section-heading.tsx
+const SectionHeading = ({ title, description }) => /* @__PURE__ */ jsxs("div", {
+	className: "mb-5",
+	children: [/* @__PURE__ */ jsxs("h2", {
+		className: "text-accent text-shadow-md mb-1 text-lg font-bold",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: ">\xA0"
+		}), title]
+	}), description && /* @__PURE__ */ jsx("p", {
+		className: "text-secondary mb-0 text-sm",
+		children: description
+	})]
+});
+//#endregion
+export { SectionHeading };

package/dist/molecules/video/self-hosted-video/index.d.mts

@@ -0,0 +1,2 @@
+import { SelfHostedVideo } from "./self-hosted-video.mjs";
+export { SelfHostedVideo };

package/dist/molecules/video/self-hosted-video/self-hosted-video.d.mts

@@ -0,0 +1,17 @@
+import { FC } from "react";
+//#region src/molecules/video/self-hosted-video/self-hosted-video.d.ts
+interface Props {
+  src: string;
+  poster?: string;
+  caption?: string;
+  captions?: string;
+  autoPlay?: boolean;
+  muted?: boolean;
+  onEnded?: () => void;
+  videoRef?: (el: HTMLVideoElement | null) => void;
+  ariaLabel?: string;
+  className?: string;
+}
+declare const SelfHostedVideo: FC<Props>;
+//#endregion
+export { SelfHostedVideo };

package/dist/molecules/video/self-hosted-video/self-hosted-video.mjs

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/molecules/video/self-hosted-video/self-hosted-video.tsx
+const DEFAULT_VIDEO_CLASS_NAME = "aspect-video w-full rounded-xl border border-solid border-accent-alpha-40 shadow-lg";
+const SelfHostedVideo = ({ src, poster, caption, captions, autoPlay, muted, onEnded, videoRef, ariaLabel, className }) => {
+	const sourceSrc = poster || src.includes("#") ? src : `${src}#t=0.1`;
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "my-4",
+		children: [/* @__PURE__ */ jsxs("video", {
+			ref: videoRef,
+			controls: true,
+			preload: "metadata",
+			playsInline: true,
+			autoPlay,
+			muted,
+			onEnded,
+			poster,
+			"aria-label": ariaLabel,
+			className: className ?? DEFAULT_VIDEO_CLASS_NAME,
+			children: [
+				/* @__PURE__ */ jsx("source", { src: sourceSrc }),
+				captions && /* @__PURE__ */ jsx("track", {
+					kind: "captions",
+					srcLang: "en",
+					label: "English",
+					src: captions
+				}),
+				"Your browser does not support the video tag.",
+				" ",
+				/* @__PURE__ */ jsx("a", {
+					href: src,
+					children: "Download the video"
+				}),
+				"."
+			]
+		}), caption && /* @__PURE__ */ jsx("figcaption", { children: caption })]
+	});
+};
+//#endregion
+export { SelfHostedVideo };

package/dist/molecules/video/youtube/index.d.mts

@@ -0,0 +1,2 @@
+import { Youtube } from "./youtube.mjs";
+export { Youtube };

package/dist/molecules/video/youtube/youtube.d.mts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+//#region src/molecules/video/youtube/youtube.d.ts
+interface Props {
+  videoId: string;
+  title?: string;
+}
+declare const Youtube: FC<Props>;
+//#endregion
+export { Youtube };

package/dist/molecules/video/youtube/youtube.mjs

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/molecules/video/youtube/youtube.tsx
+const Youtube = ({ videoId, title = "YouTube video" }) => /* @__PURE__ */ jsx("iframe", {
+	src: `https://www.youtube.com/embed/${videoId}`,
+	title,
+	loading: "lazy",
+	allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+	referrerPolicy: "strict-origin-when-cross-origin",
+	allowFullScreen: true
+});
+//#endregion
+export { Youtube };

package/dist/organism/command-palette/command-palette/command-palette.d.mts

@@ -0,0 +1,12 @@
+import { CommandPaletteTrigger } from "../../../state/command-palette/command-palette-trigger.mjs";
+import { FC, ReactNode } from "react";
+//#region src/organism/command-palette/command-palette/command-palette.d.ts
+interface CommandPaletteProps {
+  placeholder?: string;
+  onOpenChange?: (open: boolean, trigger: CommandPaletteTrigger) => void;
+  onQueryChange?: (query: string) => void;
+  children: ReactNode;
+}
+declare const CommandPalette: FC<CommandPaletteProps>;
+//#endregion
+export { CommandPalette, CommandPaletteProps };

package/dist/organism/command-palette/command-palette/command-palette.mjs

@@ -0,0 +1,148 @@
+"use client";
+import { useGlassmorphism } from "../../../hooks/use-glassmorphism.mjs";
+import { Overlay } from "../../../atoms/effects/overlay/overlay.mjs";
+import { CommandPaletteContext } from "../../../state/command-palette/command-palette-context.mjs";
+import { useCommandPaletteStore } from "./use-command-palette-store.mjs";
+import { c } from "react/compiler-runtime";
+import { motion } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command } from "cmdk";
+//#region src/organism/command-palette/command-palette/command-palette.tsx
+const CommandPalette = (t0) => {
+	const $ = c(22);
+	const { placeholder: t1, onOpenChange, onQueryChange, children } = t0;
+	const placeholder = t1 === void 0 ? "type to search_" : t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { noScale: true };
+		$[0] = t2;
+	} else t2 = $[0];
+	const { glassmorphismClass } = useGlassmorphism(t2);
+	const { state, effects } = useCommandPaletteStore(onOpenChange, onQueryChange);
+	const { open } = state;
+	const { close, stopPropagation, handleQueryChange } = effects;
+	if (!open) return null;
+	const t3 = `${glassmorphismClass} w-full max-w-150 overflow-hidden`;
+	let t4;
+	let t5;
+	let t6;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			opacity: 0,
+			scale: .95,
+			y: -8
+		};
+		t5 = {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		};
+		t6 = {
+			duration: .15,
+			ease: "easeOut"
+		};
+		$[1] = t4;
+		$[2] = t5;
+		$[3] = t6;
+	} else {
+		t4 = $[1];
+		t5 = $[2];
+		t6 = $[3];
+	}
+	let t7;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			className: "text-accent shrink-0 font-mono text-sm font-bold text-shadow-md",
+			children: ">"
+		});
+		$[4] = t7;
+	} else t7 = $[4];
+	let t8;
+	if ($[5] !== handleQueryChange || $[6] !== placeholder) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "border-accent/20 flex items-center gap-2 border-b px-4 py-3",
+			children: [t7, /* @__PURE__ */ jsx(Command.Input, {
+				className: "text-accent placeholder:text-accent/40 caret-accent flex-1 bg-transparent font-mono outline-none",
+				placeholder,
+				onValueChange: handleQueryChange,
+				autoFocus: true
+			})]
+		});
+		$[5] = handleQueryChange;
+		$[6] = placeholder;
+		$[7] = t8;
+	} else t8 = $[7];
+	let t9;
+	if ($[8] !== children || $[9] !== close) {
+		t9 = /* @__PURE__ */ jsx(Command.List, {
+			className: "max-h-[55vh] overflow-y-auto py-2",
+			children: /* @__PURE__ */ jsx(CommandPaletteContext.Provider, {
+				value: close,
+				children
+			})
+		});
+		$[8] = children;
+		$[9] = close;
+		$[10] = t9;
+	} else t9 = $[10];
+	let t10;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "border-accent/20 text-accent/40 xs:flex hidden gap-6 border-t px-4 py-2 font-mono text-xs",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: "↑↓ navigate" }),
+				/* @__PURE__ */ jsx("span", { children: "↵ select" }),
+				/* @__PURE__ */ jsx("span", { children: "esc close" })
+			]
+		});
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	if ($[12] !== t8 || $[13] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Command, {
+			shouldFilter: false,
+			className: "flex flex-col",
+			children: [
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[12] = t8;
+		$[13] = t9;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] !== stopPropagation || $[16] !== t11 || $[17] !== t3) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-screen items-start justify-center px-4 pt-[15vh]",
+			children: /* @__PURE__ */ jsx(motion.div, {
+				className: t3,
+				initial: t4,
+				animate: t5,
+				transition: t6,
+				onClick: stopPropagation,
+				children: t11
+			})
+		});
+		$[15] = stopPropagation;
+		$[16] = t11;
+		$[17] = t3;
+		$[18] = t12;
+	} else t12 = $[18];
+	let t13;
+	if ($[19] !== close || $[20] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Overlay, {
+			delay: 0,
+			onClick: close,
+			className: "z-50",
+			children: t12
+		});
+		$[19] = close;
+		$[20] = t12;
+		$[21] = t13;
+	} else t13 = $[21];
+	return t13;
+};
+//#endregion
+export { CommandPalette };

package/dist/organism/command-palette/command-palette/index.d.mts

@@ -0,0 +1,2 @@
+import { CommandPalette, CommandPaletteProps } from "./command-palette.mjs";
+export { CommandPalette, type CommandPaletteProps };

package/dist/organism/command-palette/command-palette/use-command-palette-store.mjs

@@ -0,0 +1,121 @@
+"use client";
+import { commandPaletteCloseEvent, commandPaletteOpenEvent } from "../../../state/command-palette/command-palette-events.mjs";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+//#region src/organism/command-palette/command-palette/use-command-palette-store.ts
+const useCommandPaletteStore = (onOpenChange, onQueryChange) => {
+	const $ = c(22);
+	const [open, setOpen] = useState(false);
+	let t0;
+	if ($[0] !== onOpenChange) {
+		t0 = (next, trigger) => {
+			setOpen(next);
+			onOpenChange?.(next, trigger);
+		};
+		$[0] = onOpenChange;
+		$[1] = t0;
+	} else t0 = $[1];
+	const changeOpen = t0;
+	let t1;
+	if ($[2] !== changeOpen) {
+		t1 = () => changeOpen(false, "dismiss");
+		$[2] = changeOpen;
+		$[3] = t1;
+	} else t1 = $[3];
+	const close = t1;
+	let t2;
+	let t3;
+	if ($[4] !== changeOpen || $[5] !== open) {
+		t2 = () => {
+			const handleKeyDown = (e) => {
+				if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+					e.preventDefault();
+					changeOpen(!open, "shortcut");
+				}
+			};
+			const handleOpenEvent = () => changeOpen(true, "event");
+			const handleCloseEvent = () => changeOpen(false, "event");
+			window.addEventListener("keydown", handleKeyDown, true);
+			window.addEventListener(commandPaletteOpenEvent, handleOpenEvent);
+			window.addEventListener(commandPaletteCloseEvent, handleCloseEvent);
+			return () => {
+				window.removeEventListener("keydown", handleKeyDown, true);
+				window.removeEventListener(commandPaletteOpenEvent, handleOpenEvent);
+				window.removeEventListener(commandPaletteCloseEvent, handleCloseEvent);
+			};
+		};
+		t3 = [changeOpen, open];
+		$[4] = changeOpen;
+		$[5] = open;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[8] !== changeOpen || $[9] !== open) {
+		t4 = () => {
+			if (!open) return;
+			const handleEsc = (e_0) => {
+				if (e_0.key === "Escape") changeOpen(false, "escape");
+			};
+			window.addEventListener("keydown", handleEsc, true);
+			return () => window.removeEventListener("keydown", handleEsc, true);
+		};
+		t5 = [open, changeOpen];
+		$[8] = changeOpen;
+		$[9] = open;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		t4 = $[10];
+		t5 = $[11];
+	}
+	useEffect(t4, t5);
+	const stopPropagation = _temp;
+	let t6;
+	if ($[12] !== onQueryChange) {
+		t6 = (value) => {
+			onQueryChange?.(value.trim());
+		};
+		$[12] = onQueryChange;
+		$[13] = t6;
+	} else t6 = $[13];
+	const handleQueryChange = t6;
+	let t7;
+	if ($[14] !== open) {
+		t7 = { open };
+		$[14] = open;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== close || $[17] !== handleQueryChange) {
+		t8 = {
+			close,
+			stopPropagation,
+			handleQueryChange
+		};
+		$[16] = close;
+		$[17] = handleQueryChange;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t7 || $[20] !== t8) {
+		t9 = {
+			state: t7,
+			effects: t8
+		};
+		$[19] = t7;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	return t9;
+};
+function _temp(e_1) {
+	return e_1.stopPropagation();
+}
+//#endregion
+export { useCommandPaletteStore };