@ekkolyth/ui 0.1.19 → 0.2.0

package/dist/layout.d.ts

@@ -1,2 +1,2 @@
-import { t as Container } from "./index-Bwp0YMmG.js";
-export { Container };
+import { n as VirtualGridProps, r as Container, t as VirtualGrid } from "./index-CxGQ12zb.js";
+export { Container, VirtualGrid, type VirtualGridProps };

package/dist/layout.js

@@ -1,2 +1,2 @@
-import { t as Container } from "./container-BBg21poC.js";
-export { Container };
+import { n as Container, t as VirtualGrid } from "./virtual-grid-BNWXDxO1.js";
+export { Container, VirtualGrid };

package/dist/shiki-code-CLD9RZfj.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { codeToTokens } from "shiki";
+//#region src/components/rich-text/shiki-code.tsx
+function parseShikiStyle(style) {
+	const variables = {};
+	for (const declaration of style.split(";")) {
+		const [property, value] = declaration.split(":");
+		if (property?.startsWith("--") && value) variables[property] = value;
+	}
+	return variables;
+}
+function ShikiCode({ code, language }) {
+	const [highlighted, setHighlighted] = useState(null);
+	useEffect(() => {
+		let cancelled = false;
+		const highlight = (lang) => codeToTokens(code, {
+			lang,
+			themes: {
+				light: "github-light",
+				dark: "github-dark"
+			},
+			defaultColor: false
+		});
+		highlight(language === "text" ? "plaintext" : language).catch(() => highlight("plaintext")).then((out) => {
+			if (!cancelled) setHighlighted(out);
+		}, () => {});
+		return () => {
+			cancelled = true;
+		};
+	}, [code, language]);
+	if (!highlighted) return null;
+	return /* @__PURE__ */ jsx("pre", {
+		className: `shiki ${highlighted.themeName} rounded bg-muted p-3 text-sm`,
+		style: parseShikiStyle(highlighted.rootStyle || ""),
+		children: /* @__PURE__ */ jsx("code", { children: highlighted.tokens.map((line, lineIndex) => /* @__PURE__ */ jsxs("span", {
+			className: "line",
+			children: [line.map((token) => /* @__PURE__ */ jsx("span", {
+				style: token.htmlStyle,
+				children: token.content
+			}, token.offset)), lineIndex < highlighted.tokens.length - 1 && "\n"]
+		}, line.map(({ content, offset }) => `${offset}:${content}`).join("|"))) })
+	});
+}
+//#endregion
+export { ShikiCode as default };

package/dist/text.d.ts

@@ -14,4 +14,11 @@ interface RichTextProps {
 //#region src/components/rich-text/index.d.ts
 declare function RichText({ json, nodes }: RichTextProps): import("react").JSX.Element;
 //#endregion
-export { type NodeRegistry, type NodeRenderer, RichText, type RichTextProps };
+//#region src/components/rich-text/code-block.d.ts
+interface CodeBlockProps {
+  code: string;
+  language: string;
+}
+declare function CodeBlock({ code, language }: CodeBlockProps): import("react").JSX.Element;
+//#endregion
+export { CodeBlock, type NodeRegistry, type NodeRenderer, RichText, type RichTextProps };

package/dist/text.js

@@ -1,7 +1,50 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, Suspense, lazy } from "react";
+import { Fragment as Fragment$1, Suspense, lazy, useEffect, useRef, useState } from "react";
+//#region src/components/rich-text/code-block.tsx
+const ShikiCode = lazy(() => import("./shiki-code-CLD9RZfj.js"));
+function CodeBlockRenderer({ code, language }) {
+	const outputRef = useRef(null);
+	const [isHighlighted, setIsHighlighted] = useState(false);
+	useEffect(() => {
+		const output = outputRef.current;
+		if (!output) return;
+		const showHighlightedOutput = () => {
+			if (output.firstElementChild?.hasChildNodes()) setIsHighlighted(true);
+		};
+		showHighlightedOutput();
+		const observer = new MutationObserver(showHighlightedOutput);
+		observer.observe(output, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full min-w-0 overflow-x-auto",
+		children: [isHighlighted ? null : /* @__PURE__ */ jsx("pre", {
+			className: "rounded bg-muted p-3 text-sm",
+			children: code
+		}), /* @__PURE__ */ jsx("div", {
+			hidden: !isHighlighted,
+			ref: outputRef,
+			children: /* @__PURE__ */ jsx(Suspense, {
+				fallback: null,
+				children: /* @__PURE__ */ jsx(ShikiCode, {
+					code,
+					language
+				})
+			})
+		})]
+	});
+}
+function CodeBlock({ code, language }) {
+	return /* @__PURE__ */ jsx(CodeBlockRenderer, {
+		code,
+		language
+	}, `${language}\0${code}`);
+}
+//#endregion
 //#region src/components/rich-text/nodes.tsx
-const ShikiCode = lazy(() => import("./shiki-code-Bg__Vnt1.js"));
 const coreNodes = {
 	doc: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
 	paragraph: ({ children }) => /* @__PURE__ */ jsx("p", { children }),
@@ -68,15 +111,9 @@ const coreNodes = {
 		}
 		return /* @__PURE__ */ jsx("span", { children: out });
 	},
-	codeBlock: ({ node }) => /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx("pre", {
-			className: "rounded bg-muted p-3 text-sm",
-			children: node.attrs?.code
-		}),
-		children: /* @__PURE__ */ jsx(ShikiCode, {
-			code: node.attrs?.code ?? "",
-			language: node.attrs?.language ?? "text"
-		})
+	codeBlock: ({ node }) => /* @__PURE__ */ jsx(CodeBlock, {
+		code: node.attrs?.code ?? "",
+		language: node.attrs?.language ?? "text"
 	}),
 	callout: ({ children }) => /* @__PURE__ */ jsx("aside", {
 		className: "my-3 rounded-md border-l-4 border-l-info bg-info/10 px-3 py-2",
@@ -174,4 +211,4 @@ function renderNode(node, key, registry) {
 	}, key);
 }
 //#endregion
-export { RichText };
+export { CodeBlock, RichText };

package/dist/themes/provider.d.ts

@@ -41,6 +41,7 @@ interface ThemeProviderProps {
   children?: ReactNode;
   darkTheme?: DarkThemes | DarkThemes[];
   defaultAppearance?: Appearance;
+  forcedAppearance?: 'light' | 'dark';
   lightTheme?: LightThemes | LightThemes[];
   storageKey?: string;
 }
@@ -48,7 +49,7 @@ declare function useTheme(): ThemeContextState;
 declare function useThemeContext(): ThemeContextState | null;
 //#endregion
 //#region src/components/themes/provider.d.ts
-declare function ThemeProvider({ children, darkTheme, defaultAppearance, lightTheme, storageKey }: PropsWithChildren<ThemeProviderProps>): import("react").JSX.Element;
+declare function ThemeProvider({ children, darkTheme, defaultAppearance, forcedAppearance, lightTheme, storageKey }: PropsWithChildren<ThemeProviderProps>): import("react").JSX.Element;
 //#endregion
 //#region src/components/themes/theme-script.d.ts
 interface ThemeScriptProps {

package/dist/themes/provider.js

@@ -1,8 +1,8 @@
 import { t as cn } from "../utils-C_uf36nf.js";
-import { _ as SelectTrigger, a as applyTheme, c as useThemeContext, d as SelectGroup, f as SelectItem, i as ThemeContext, l as Select, o as normalizeMode, p as SelectLabel, r as Toaster, s as useTheme, t as Toggle, u as SelectContent, v as SelectValue } from "../toggle-B2PFPImC.js";
+import { _ as SelectTrigger, a as applyTheme, c as useThemeContext, d as SelectGroup, f as SelectItem, i as ThemeContext, l as Select, o as normalizeMode, p as SelectLabel, r as Toaster, s as useTheme, t as Toggle, u as SelectContent, v as SelectValue } from "../toggle-Bpm-ggNe.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Monitor, Moon, Sun } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Monitor, Moon, Sun } from "lucide-react";
 //#region src/lib/types.ts
 const APPEARANCE = [
 	"light",
@@ -137,7 +137,7 @@ function systemPrefersDark() {
 	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
 	return window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
-function ThemeProvider({ children, darkTheme = ["ekkolyth-dark"], defaultAppearance = "system", lightTheme = ["ekkolyth-light"], storageKey = "ekko-ui" }) {
+function ThemeProvider({ children, darkTheme = ["ekkolyth-dark"], defaultAppearance = "system", forcedAppearance, lightTheme = ["ekkolyth-light"], storageKey = "ekko-ui" }) {
 	const lightThemes = useMemo(() => Array.isArray(lightTheme) ? lightTheme : [lightTheme], [lightTheme]);
 	const darkThemes = useMemo(() => Array.isArray(darkTheme) ? darkTheme : [darkTheme], [darkTheme]);
 	const [appearance, setAppearanceState] = useState(defaultAppearance);
@@ -145,7 +145,7 @@ function ThemeProvider({ children, darkTheme = ["ekkolyth-dark"], defaultAppeara
 	const [darkName, setDarkName] = useState(darkThemes[0]);
 	const [systemIsDark, setSystemIsDark] = useState(false);
 	const [hasRestored, setHasRestored] = useState(false);
-	const normalizedAppearance = normalizeMode(appearance);
+	const normalizedAppearance = normalizeMode(forcedAppearance ?? appearance);
 	const resolvedMode = normalizedAppearance === "system" ? systemIsDark ? "dark" : "light" : normalizedAppearance;
 	const resolvedTheme = resolvedMode === "light" ? lightName : darkName;
 	const restoring = useRef(false);

package/dist/{toggle-B2PFPImC.js → toggle-Bpm-ggNe.js}

@@ -1,8 +1,8 @@
 import { t as cn } from "./utils-C_uf36nf.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { createContext, use } from "react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Toaster } from "sonner";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
@@ -105,6 +105,7 @@ function applyTheme(theme, mode) {
 	const root = document.documentElement;
 	root.setAttribute("data-theme", theme);
 	root.classList.toggle("dark", mode === "dark");
+	root.style.colorScheme = mode;
 }
 function useTheme() {
 	const context = use(ThemeContext);

package/dist/{use-mobile-CqHXB_Nc.js → use-mobile-C-Ak14Ip.js}

@@ -1,17 +1,17 @@
 import * as React from "react";
 //#region src/hooks/use-mobile.ts
 const MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
+function useIsMobile(breakpoint = MOBILE_BREAKPOINT) {
 	const [isMobile, setIsMobile] = React.useState(void 0);
 	React.useEffect(() => {
-		const mql = window.matchMedia(`(max-width: 767px)`);
+		const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
 		const onChange = () => {
-			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+			setIsMobile(window.innerWidth < breakpoint);
 		};
 		mql.addEventListener("change", onChange);
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		setIsMobile(window.innerWidth < breakpoint);
 		return () => mql.removeEventListener("change", onChange);
-	}, []);
+	}, [breakpoint]);
 	return !!isMobile;
 }
 //#endregion

package/dist/use-window-scroll-margin-BQMpLEeT.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+//#region src/hooks/use-window-scroll-margin.ts
+function useWindowScrollMargin() {
+	const ref = React.useRef(null);
+	const [margin, setMargin] = React.useState(0);
+	React.useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const measure = () => setMargin(element.getBoundingClientRect().top + window.scrollY);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(document.body);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	return {
+		ref,
+		margin
+	};
+}
+//#endregion
+export { useWindowScrollMargin as t };

package/dist/use-window-scroll-margin-BeVjX6Le.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+//#region src/hooks/use-mobile.d.ts
+declare function useIsMobile(breakpoint?: number): boolean;
+//#endregion
+//#region src/hooks/use-window-scroll-margin.d.ts
+declare function useWindowScrollMargin<T extends HTMLElement>(): {
+  ref: React.RefObject<T | null>;
+  margin: number;
+};
+//#endregion
+export { useIsMobile as n, useWindowScrollMargin as t };

package/dist/virtual-grid-BNWXDxO1.js

@@ -0,0 +1,72 @@
+import { t as cn } from "./utils-C_uf36nf.js";
+import { t as useWindowScrollMargin } from "./use-window-scroll-margin-BQMpLEeT.js";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/layout/container/index.tsx
+function Container({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["mx-auto flex w-full max-w-7xl flex-1 flex-col p-3 md:p-6", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+//#endregion
+//#region src/components/layout/virtual-grid/index.tsx
+function readLayout(element) {
+	const computed = getComputedStyle(element);
+	const tracks = computed.gridTemplateColumns.split(" ").filter(Boolean);
+	return {
+		columns: Math.max(tracks.length, 1),
+		columnWidth: Number.parseFloat(tracks[0] ?? "") || 0,
+		rowGap: Number.parseFloat(computed.rowGap) || 0
+	};
+}
+function VirtualGrid({ items, getKey, renderItem, estimateRowHeight, className, style, overscan = 2 }) {
+	const { ref, margin } = useWindowScrollMargin();
+	const [layout, setLayout] = React.useState({
+		columns: 1,
+		columnWidth: 0,
+		rowGap: 0
+	});
+	const measureLayout = React.useCallback(() => {
+		if (!ref.current) return;
+		const next = readLayout(ref.current);
+		setLayout((previous) => previous.columns === next.columns && previous.columnWidth === next.columnWidth && previous.rowGap === next.rowGap ? previous : next);
+	}, [ref]);
+	React.useLayoutEffect(() => {
+		if (!ref.current) return;
+		const observer = new ResizeObserver(measureLayout);
+		observer.observe(ref.current);
+		return () => observer.disconnect();
+	}, [ref, measureLayout]);
+	React.useLayoutEffect(measureLayout);
+	const { columns } = layout;
+	const virtualizer = useWindowVirtualizer({
+		count: Math.ceil(items.length / columns),
+		estimateSize: () => estimateRowHeight(layout.columnWidth),
+		gap: layout.rowGap,
+		getItemKey: (index) => `${columns}:${index}`,
+		overscan,
+		scrollMargin: margin
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative", className),
+		ref,
+		style: {
+			...style,
+			height: virtualizer.getTotalSize()
+		},
+		children: virtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx("div", {
+			className: cn("absolute inset-x-0 top-0", className),
+			"data-index": row.index,
+			ref: virtualizer.measureElement,
+			style: {
+				...style,
+				transform: `translateY(${row.start - virtualizer.options.scrollMargin}px)`
+			},
+			children: items.slice(row.index * columns, (row.index + 1) * columns).map((item, offset) => /* @__PURE__ */ jsx(React.Fragment, { children: renderItem(item, row.index * columns + offset) }, getKey(item)))
+		}, row.key))
+	});
+}
+//#endregion
+export { Container as n, VirtualGrid as t };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ekkolyth/ui",
-    "version": "0.1.19",
+    "version": "0.2.0",
     "description": "Shared UI Library for my personal projects",
     "keywords": [
         "theme",
@@ -93,9 +93,11 @@
         "@radix-ui/react-toggle-group": "^1.1.11",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@tailwindcss/typography": "^0.5.19",
+        "@tanstack/charts": "1.1.0",
         "@tanstack/react-form": "^1.28.3",
         "@tanstack/react-pacer": "^0.20.0",
         "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-virtual": "^3.14.22",
         "@tiptap/core": "^3.27.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",

package/dist/container-BBg21poC.js

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-//#region src/components/layout/container/index.tsx
-function Container({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: ["mx-auto flex w-full max-w-7xl flex-1 flex-col p-3 md:p-6", className].filter(Boolean).join(" "),
-		...props
-	});
-}
-//#endregion
-export { Container as t };

package/dist/index-Bwp0YMmG.d.ts

@@ -1,5 +0,0 @@
-import * as React from "react";
-//#region src/components/layout/container/index.d.ts
-declare function Container({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-//#endregion
-export { Container as t };

package/dist/shiki-code-Bg__Vnt1.js

@@ -1,29 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { codeToHtml } from "shiki";
-//#region src/components/rich-text/shiki-code.tsx
-function ShikiCode({ code, language }) {
-	const [html, setHtml] = useState("");
-	useEffect(() => {
-		let cancelled = false;
-		codeToHtml(code, {
-			lang: language === "text" ? "plaintext" : language,
-			themes: {
-				light: "github-light",
-				dark: "github-dark"
-			},
-			defaultColor: false
-		}).then((out) => {
-			if (!cancelled) setHtml(out);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [code, language]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "rounded bg-muted p-3 text-sm",
-		dangerouslySetInnerHTML: { __html: html }
-	});
-}
-//#endregion
-export { ShikiCode as default };

package/dist/use-mobile-BVGje-2e.d.ts

@@ -1,4 +0,0 @@
-//#region src/hooks/use-mobile.d.ts
-declare function useIsMobile(): boolean;
-//#endregion
-export { useIsMobile as t };

package/dist/{loading-screen-DB3youyT.js → loading-screen-DilmTJ3J.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
 //#region src/components/blocks/loading-screen/messages.json
 var messages_default = [
 	"Charging ultimate abilities...",