@galaxy-io/dls 1.0.3

package/dist/editor/CodeEditor.js

@@ -0,0 +1,435 @@
+import { GalaxyTheme } from "../theme/constants.js";
+import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+/* empty css                     */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { EditorView, keymap } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { langs, loadLanguage } from "@uiw/codemirror-extensions-langs";
+import { createTheme } from "@uiw/codemirror-themes";
+import CodeMirror from "@uiw/react-codemirror";
+//#region src/editor/CodeEditor.tsx
+var CodeEditorVariant = /* @__PURE__ */ function(CodeEditorVariant) {
+	CodeEditorVariant["BASE"] = "BASE";
+	CodeEditorVariant["PRIMARY"] = "PRIMARY";
+	CodeEditorVariant["SECONDARY"] = "SECONDARY";
+	CodeEditorVariant["TERTIARY"] = "TERTIARY";
+	return CodeEditorVariant;
+}({});
+var _exp = () => ({ $noBorder, theme }) => $noBorder ? "none" : `0.5px solid ${theme.color.border.primary}`;
+var _exp2 = () => ({ $borderRadius }) => getCssSizeValue($borderRadius);
+var CodeEditorWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "CodeEditorWrapper",
+	class: "cwfaerb",
+	propsAsIs: false,
+	vars: {
+		"cwfaerb-0": [_exp()],
+		"cwfaerb-1": [_exp2()]
+	}
+}));
+function getBackgroundColorFromVariant(theme, variant) {
+	return match(variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
+}
+function createSearchPanelThemeExtension(theme) {
+	return EditorView.theme({
+		".cm-panels": { backgroundColor: "transparent" },
+		".cm-panels.cm-panels-top": { borderBottom: "none" },
+		".cm-panels.cm-panels-bottom": { borderTop: "none" },
+		".cm-panel.cm-search": {
+			margin: "6px",
+			padding: "6px",
+			width: "fit-content",
+			maxWidth: "calc(100% - 12px)",
+			borderRadius: "5px",
+			border: `0.5px solid ${theme.color.border.primary}`,
+			backgroundColor: theme.color.background.primary,
+			color: theme.color.text.primary,
+			fontFamily: theme.font.sans.family,
+			fontSize: theme.font.sans.size.body_md
+		},
+		".cm-panel.cm-search input, .cm-panel.cm-search button, .cm-panel.cm-search label": { margin: 0 },
+		".cm-panel.cm-search .cm-textfield[name=replace], .cm-panel.cm-search .cm-button[name=replace], .cm-panel.cm-search .cm-button[name=replaceAll], .cm-panel.cm-search label:has(input[name=case]), .cm-panel.cm-search label:has(input[name=re]), .cm-panel.cm-search label:has(input[name=word]), .cm-panel.cm-search [name=close], .cm-panel.cm-search br": { display: "none" },
+		".cm-panel.cm-search .cm-textfield": {
+			height: "24px",
+			minHeight: "24px",
+			maxHeight: "24px",
+			padding: "0 6px",
+			margin: 0,
+			boxSizing: "border-box",
+			alignSelf: "center",
+			verticalAlign: "middle",
+			borderRadius: "5px",
+			border: `0.5px solid ${theme.color.border.primary}`,
+			background: theme.color.background.primary,
+			color: theme.color.text.primary,
+			fontFamily: theme.font.sans.family,
+			fontSize: theme.font.sans.size.body_md,
+			lineHeight: "24px",
+			fontWeight: theme.font.sans.weight.regular,
+			outline: "none",
+			"&::placeholder": { color: theme.color.text.tertiary },
+			"&:focus": { borderColor: theme.color.border.selected }
+		},
+		".cm-panel.cm-search .cm-button": {
+			height: "24px",
+			minHeight: "24px",
+			maxHeight: "24px",
+			padding: "0 10px",
+			margin: 0,
+			boxSizing: "border-box",
+			alignSelf: "center",
+			borderRadius: "5px",
+			border: "0.5px solid transparent",
+			background: "transparent",
+			backgroundImage: "none",
+			color: theme.color.text.primary,
+			fontFamily: theme.font.sans.family,
+			fontSize: theme.font.sans.size.body_md,
+			lineHeight: "24px",
+			fontWeight: theme.font.sans.weight.medium,
+			textTransform: "capitalize",
+			cursor: "pointer",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			verticalAlign: "middle",
+			whiteSpace: "nowrap",
+			appearance: "none",
+			WebkitAppearance: "none",
+			boxShadow: "none",
+			filter: "none",
+			transition: "background-color 0.075s ease-in-out, border 0.075s ease-in-out",
+			"&:hover": {
+				backgroundColor: theme.color.background.secondary,
+				borderColor: theme.color.border.primary
+			}
+		}
+	});
+}
+function createCodeMirrorThemeExtension(theme, galaxyTheme, variant, isReadOnly) {
+	const codeMirrorTheme = match(galaxyTheme).returnType().with(GalaxyTheme.DARK, () => "dark").with(GalaxyTheme.LIGHT, () => "light").exhaustive();
+	const settingsBackgroundColor = getBackgroundColorFromVariant(theme, variant);
+	const settingsSelectionColor = isReadOnly ? theme.color.opacity.bw0 : theme.color.opacity.bw16Alt;
+	const settingsSelectionMatchColor = getBackgroundColorFromVariant(theme, variant);
+	const settingsGutterBackgroundColor = getBackgroundColorFromVariant(theme, variant);
+	const settingsGutterActiveForegroundColor = isReadOnly ? theme.color.text.tertiary : theme.color.text.primary;
+	return createTheme({
+		theme: codeMirrorTheme,
+		settings: {
+			background: settingsBackgroundColor,
+			foreground: theme.color.text.primary,
+			caret: theme.color.text.primary,
+			selection: settingsSelectionColor,
+			selectionMatch: settingsSelectionMatchColor,
+			lineHighlight: "transparent",
+			gutterBackground: settingsGutterBackgroundColor,
+			gutterForeground: theme.color.text.tertiary,
+			gutterActiveForeground: settingsGutterActiveForegroundColor,
+			gutterBorder: "transparent",
+			fontFamily: theme.font.mono.family,
+			fontSize: theme.font.mono.size.body_md
+		},
+		styles: [
+			{
+				tag: tags.comment,
+				color: theme.color.text.tertiary,
+				fontStyle: "italic"
+			},
+			{
+				tag: tags.lineComment,
+				color: theme.color.text.tertiary,
+				fontStyle: "italic"
+			},
+			{
+				tag: tags.blockComment,
+				color: theme.color.text.tertiary,
+				fontStyle: "italic"
+			},
+			{
+				tag: tags.variableName,
+				color: theme.color.text.primary
+			},
+			{
+				tag: tags.definition(tags.variableName),
+				color: theme.color.text.primary
+			},
+			{
+				tag: tags.propertyName,
+				color: theme.color.text.purple
+			},
+			{
+				tag: tags.definition(tags.propertyName),
+				color: theme.color.text.purple
+			},
+			{
+				tag: tags.string,
+				color: theme.color.text.primary
+			},
+			{
+				tag: tags.special(tags.string),
+				color: theme.color.text.primary
+			},
+			{
+				tag: tags.character,
+				color: theme.color.text.primary
+			},
+			{
+				tag: tags.escape,
+				color: theme.color.text.primary
+			},
+			{
+				tag: tags.number,
+				color: theme.color.text.pink
+			},
+			{
+				tag: tags.integer,
+				color: theme.color.text.pink
+			},
+			{
+				tag: tags.float,
+				color: theme.color.text.pink
+			},
+			{
+				tag: tags.bool,
+				color: theme.color.text.pink
+			},
+			{
+				tag: tags.null,
+				color: theme.color.text.pink
+			},
+			{
+				tag: tags.atom,
+				color: theme.color.text.pink
+			},
+			{
+				tag: tags.keyword,
+				color: theme.color.text.blue,
+				fontWeight: "500"
+			},
+			{
+				tag: tags.modifier,
+				color: theme.color.text.blue
+			},
+			{
+				tag: tags.self,
+				color: theme.color.text.blue
+			},
+			{
+				tag: tags.operator,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.punctuation,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.separator,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.bracket,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.angleBracket,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.squareBracket,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.paren,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.brace,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.special(tags.brace),
+				color: theme.color.text.teal
+			},
+			{
+				tag: tags.className,
+				color: theme.color.text.purple
+			},
+			{
+				tag: tags.typeName,
+				color: theme.color.text.purple
+			},
+			{
+				tag: tags.definition(tags.typeName),
+				color: theme.color.text.purple
+			},
+			{
+				tag: tags.namespace,
+				color: theme.color.text.teal
+			},
+			{
+				tag: tags.function(tags.variableName),
+				color: theme.color.text.blue
+			},
+			{
+				tag: tags.definition(tags.function(tags.variableName)),
+				color: theme.color.text.blue
+			},
+			{
+				tag: tags.function(tags.propertyName),
+				color: theme.color.text.teal
+			},
+			{
+				tag: tags.tagName,
+				color: theme.color.text.pink
+			},
+			{
+				tag: tags.attributeName,
+				color: theme.color.text.blue
+			},
+			{
+				tag: tags.attributeValue,
+				color: theme.color.text.green
+			},
+			{
+				tag: tags.heading,
+				color: theme.color.text.pink,
+				fontWeight: "bold"
+			},
+			{
+				tag: tags.heading1,
+				color: theme.color.text.pink,
+				fontWeight: "bold"
+			},
+			{
+				tag: tags.heading2,
+				color: theme.color.text.orange,
+				fontWeight: "bold"
+			},
+			{
+				tag: tags.heading3,
+				color: theme.color.text.teal,
+				fontWeight: "bold"
+			},
+			{
+				tag: tags.link,
+				color: theme.color.text.blue,
+				textDecoration: "underline"
+			},
+			{
+				tag: tags.url,
+				color: theme.color.text.teal,
+				textDecoration: "underline"
+			},
+			{
+				tag: tags.emphasis,
+				color: theme.color.text.lime,
+				fontStyle: "italic"
+			},
+			{
+				tag: tags.strong,
+				color: theme.color.text.purple,
+				fontWeight: "bold"
+			},
+			{
+				tag: tags.strikethrough,
+				color: theme.color.text.tertiary,
+				textDecoration: "line-through"
+			},
+			{
+				tag: tags.regexp,
+				color: theme.color.text.yellow
+			},
+			{
+				tag: tags.labelName,
+				color: theme.color.text.lime
+			},
+			{
+				tag: tags.meta,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.annotation,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.processingInstruction,
+				color: theme.color.text.tertiary
+			},
+			{
+				tag: tags.invalid,
+				color: theme.color.text.error
+			}
+		]
+	});
+}
+var CodeEditor = ({ content, placeholder, lang, customExtensions = [], onChange, onExecute, borderRadius, noBorder, isReadOnly, noLineNumbers, padding, variant = "PRIMARY" }) => {
+	const { theme, galaxyTheme } = useGalaxyTheme();
+	const codeMirrorTheme = useMemo(() => createCodeMirrorThemeExtension(theme, galaxyTheme, variant, isReadOnly), [
+		theme,
+		galaxyTheme,
+		variant,
+		isReadOnly
+	]);
+	const langExtensions = useMemo(() => {
+		if (!lang) return [];
+		loadLanguage(lang);
+		const langExtension = langs[lang];
+		if (langExtension) return [langExtension()];
+		return [];
+	}, [lang]);
+	const keymapExtensions = useMemo(() => {
+		if (!onExecute) return [];
+		return [keymap.of([{
+			key: "Mod-Enter",
+			run: () => {
+				onExecute();
+				return true;
+			}
+		}])];
+	}, [onExecute]);
+	const searchPanelTheme = useMemo(() => createSearchPanelThemeExtension(theme), [theme]);
+	const noLineNumbersTheme = useMemo(() => {
+		if (!noLineNumbers) return [];
+		return [EditorView.theme({ ".cm-gutters": { display: "none" } })];
+	}, [noLineNumbers]);
+	const paddingTheme = useMemo(() => {
+		return [EditorView.theme({ ".cm-content": { padding: getCssSizeValue(padding ?? 4) } })];
+	}, [padding]);
+	const extensions = useMemo(() => {
+		return [
+			...langExtensions,
+			...keymapExtensions,
+			searchPanelTheme,
+			...noLineNumbersTheme,
+			...paddingTheme,
+			...customExtensions
+		];
+	}, [
+		langExtensions,
+		keymapExtensions,
+		searchPanelTheme,
+		noLineNumbersTheme,
+		paddingTheme,
+		customExtensions
+	]);
+	return /* @__PURE__ */ jsx(CodeEditorWrapper, {
+		$borderRadius: borderRadius,
+		$noBorder: noBorder,
+		children: /* @__PURE__ */ jsx(CodeMirror, {
+			value: content,
+			placeholder,
+			width: "100%",
+			height: "100%",
+			theme: codeMirrorTheme,
+			editable: !isReadOnly,
+			basicSetup: { lineNumbers: !noLineNumbers },
+			extensions,
+			onChange
+		})
+	});
+};
+//#endregion
+export { CodeEditorVariant, createCodeMirrorThemeExtension, createSearchPanelThemeExtension, CodeEditor as default };

package/dist/editor/CodeEditorReactWidget.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { WidgetType } from "@codemirror/view";
+/**
+ * Abstract base class for rendering React components inside CodeMirror widgets.
+ *
+ * This class enables embedding React components as inline decorations in CodeMirror editors.
+ * Subclasses must implement the `render()` method to return the React content to display.
+ *
+ * @example
+ * ```tsx
+ * class MyWidget extends CodeEditorReactWidget {
+ *   constructor(readonly label: string) {
+ *     super();
+ *   }
+ *
+ *   render(): ReactNode {
+ *     return <MyComponent label={this.label} />;
+ *   }
+ *
+ *   eq(other: CodeEditorReactWidget): boolean {
+ *     return other instanceof CodeEditorReactWidget && this.label === other.label;
+ *   }
+ * }
+ * ```
+ */
+export declare abstract class CodeEditorReactWidget extends WidgetType {
+    private root;
+    /**
+     * Returns the React content to render in the widget.
+     * Implement this method in subclasses to define the widget's appearance.
+     */
+    abstract render(): ReactNode;
+    toDOM(): HTMLElement;
+    destroy(): void;
+}

package/dist/editor/CodeEditorReactWidget.js

@@ -0,0 +1,47 @@
+import { createRoot } from "react-dom/client";
+import { WidgetType } from "@codemirror/view";
+//#region src/editor/CodeEditorReactWidget.tsx
+/**
+* Abstract base class for rendering React components inside CodeMirror widgets.
+*
+* This class enables embedding React components as inline decorations in CodeMirror editors.
+* Subclasses must implement the `render()` method to return the React content to display.
+*
+* @example
+* ```tsx
+* class MyWidget extends CodeEditorReactWidget {
+*   constructor(readonly label: string) {
+*     super();
+*   }
+*
+*   render(): ReactNode {
+*     return <MyComponent label={this.label} />;
+*   }
+*
+*   eq(other: CodeEditorReactWidget): boolean {
+*     return other instanceof CodeEditorReactWidget && this.label === other.label;
+*   }
+* }
+* ```
+*/
+var CodeEditorReactWidget = class extends WidgetType {
+	root = null;
+	toDOM() {
+		const container = document.createElement("span");
+		container.className = "cm-react-widget";
+		container.style.display = "inline-flex";
+		container.style.verticalAlign = "baseline";
+		this.root = createRoot(container);
+		this.root.render(this.render());
+		return container;
+	}
+	destroy() {
+		if (this.root) {
+			const rootToUnmount = this.root;
+			setTimeout(() => rootToUnmount.unmount(), 0);
+			this.root = null;
+		}
+	}
+};
+//#endregion
+export { CodeEditorReactWidget };

package/dist/hooks/useDismiss.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from "react";
+export interface UseDismissOptions {
+    /**
+     * Refs to exclude from click outside detection (e.g., dropdowns, tooltips)
+     */
+    excludeRefs?: RefObject<HTMLElement>[];
+    /**
+     * Whether to enable ESC key support
+     * @default true
+     */
+    enableEscape?: boolean;
+    /**
+     * Whether to enable click outside detection
+     * @default true
+     */
+    enableClickOutside?: boolean;
+    /**
+     * Whether the hook is enabled
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * The function to call when the dismiss is triggered
+     */
+    onDismiss?: () => void;
+}
+export declare const useDismiss: <T extends HTMLElement = HTMLElement>(handlerOrOptions: (() => void) | UseDismissOptions, options?: UseDismissOptions) => RefObject<T>;

package/dist/hooks/useDismiss.js

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+//#region src/hooks/useDismiss.ts
+var useDismiss = (handlerOrOptions, options) => {
+	const isOptionsOnly = typeof handlerOrOptions !== "function";
+	const handler = isOptionsOnly ? void 0 : handlerOrOptions;
+	const { excludeRefs, enableEscape = true, enableClickOutside = true, enabled = true, onDismiss } = (isOptionsOnly ? handlerOrOptions : options) || {};
+	const ref = useRef(null);
+	const dismissHandler = onDismiss ?? handler;
+	const handlerRef = useRef(dismissHandler);
+	const excludeRefsRef = useRef(excludeRefs);
+	useEffect(() => {
+		handlerRef.current = dismissHandler;
+		excludeRefsRef.current = excludeRefs;
+	}, [dismissHandler, excludeRefs]);
+	useEffect(() => {
+		if (!enabled || !enableClickOutside) return;
+		const handleClickOutside = (event) => {
+			const target = event.target;
+			if (ref.current && ref.current.contains(target)) return;
+			if (excludeRefsRef.current) {
+				for (const excludeRef of excludeRefsRef.current) if (excludeRef.current && excludeRef.current.contains(target)) return;
+			}
+			if (handlerRef.current) handlerRef.current();
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [enabled, enableClickOutside]);
+	useHotkeys("esc", () => {
+		if (enabled && handlerRef.current) handlerRef.current();
+	}, { enabled: enabled && enableEscape }, [enabled, enableEscape]);
+	return ref;
+};
+//#endregion
+export { useDismiss };

package/dist/hooks/useElementWidth.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Hook that measures and tracks the width of an element using ResizeObserver.
+ * Returns undefined until the first measurement is complete.
+ *
+ * @param ref - A ref to the element to measure
+ * @returns The current width of the element in pixels, or undefined if not yet measured
+ *
+ * @example
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const width = useElementWidth(containerRef);
+ *
+ * if (width === undefined) {
+ *   return <div ref={containerRef} />;
+ * }
+ *
+ * return (
+ *   <div ref={containerRef}>
+ *     <Chart width={width} />
+ *   </div>
+ * );
+ */
+export declare const useElementWidth: (ref: React.RefObject<HTMLElement | null>) => number | undefined;

package/dist/hooks/useElementWidth.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+//#region src/hooks/useElementWidth.ts
+/**
+* Hook that measures and tracks the width of an element using ResizeObserver.
+* Returns undefined until the first measurement is complete.
+*
+* @param ref - A ref to the element to measure
+* @returns The current width of the element in pixels, or undefined if not yet measured
+*
+* @example
+* const containerRef = useRef<HTMLDivElement>(null);
+* const width = useElementWidth(containerRef);
+*
+* if (width === undefined) {
+*   return <div ref={containerRef} />;
+* }
+*
+* return (
+*   <div ref={containerRef}>
+*     <Chart width={width} />
+*   </div>
+* );
+*/
+var useElementWidth = (ref) => {
+	const [width, setWidth] = useState(void 0);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const update = () => {
+			setWidth(element.getBoundingClientRect().width);
+		};
+		update();
+		if (typeof ResizeObserver === "undefined") {
+			window.addEventListener("resize", update);
+			return () => window.removeEventListener("resize", update);
+		}
+		const observer = new ResizeObserver(() => update());
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [ref]);
+	return width;
+};
+//#endregion
+export { useElementWidth };