@intlayer/design-system 9.4.2 → 9.4.4

package/dist/esm/components/MarkdownEditor/novel/extensions/code-block-shiki.mjs

@@ -0,0 +1,197 @@
+import { bundledLanguages, bundledThemes, getSingletonHighlighter } from "../../../IDE/shikiBundle.mjs";
+import { findChildren } from "@tiptap/core";
+import { CodeBlock } from "@tiptap/extension-code-block";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+//#region src/components/MarkdownEditor/novel/extensions/code-block-shiki.ts
+const formatStyles = (styles) => Object.entries(styles).filter(([_, value]) => Boolean(value)).map(([key, value]) => `${key}:${value}`).join(";");
+let sharedHighlighter = null;
+const loadingLangs = /* @__PURE__ */ new Set();
+const loadingThemes = /* @__PURE__ */ new Set();
+const renderDecorations = ({ doc, name, defaultLanguage, defaultTheme, themes, highlighter }) => {
+	if (!highlighter) return DecorationSet.empty;
+	const decorations = [];
+	const loadedLangs = highlighter.getLoadedLanguages();
+	const loadedThemes = highlighter.getLoadedThemes();
+	const resolveTheme = (themeName) => loadedThemes.includes(themeName) ? themeName : loadedThemes[0] ?? "github-light";
+	findChildren(doc, (node) => node.type.name === name).forEach((block) => {
+		let from = block.pos + 1;
+		let language = block.node.attrs.language || defaultLanguage;
+		const blockTheme = block.node.attrs.theme || defaultTheme;
+		const lightTheme = block.node.attrs.themes?.light || themes?.light || blockTheme;
+		const darkTheme = block.node.attrs.themes?.dark || themes?.dark || blockTheme;
+		if (!loadedLangs.includes(language)) language = "plaintext";
+		if (themes) {
+			const tokensResult = highlighter.codeToTokens(block.node.textContent, {
+				lang: language,
+				themes: {
+					light: resolveTheme(lightTheme),
+					dark: resolveTheme(darkTheme)
+				}
+			});
+			const preStyles = {};
+			if (tokensResult.bg) preStyles["background-color"] = tokensResult.bg;
+			if (tokensResult.fg) preStyles.color = tokensResult.fg;
+			decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
+				style: formatStyles(preStyles),
+				class: "shiki"
+			}));
+			for (const line of tokensResult.tokens) {
+				for (const token of line) {
+					const to = from + token.content.length;
+					const style = formatStyles(token.htmlStyle || {});
+					decorations.push(Decoration.inline(from, to, { style }));
+					from = to;
+				}
+				from += 1;
+			}
+		} else {
+			const activeTheme = resolveTheme(blockTheme);
+			const tokensResult = highlighter.codeToTokens(block.node.textContent, {
+				lang: language,
+				theme: activeTheme
+			});
+			const themeObj = highlighter.getTheme(activeTheme);
+			decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
+				style: formatStyles({ "background-color": themeObj.bg }),
+				class: "shiki"
+			}));
+			for (const line of tokensResult.tokens) {
+				for (const token of line) {
+					const to = from + token.content.length;
+					const style = formatStyles({ color: token.color || "inherit" });
+					decorations.push(Decoration.inline(from, to, { style }));
+					from = to;
+				}
+				from += 1;
+			}
+		}
+	});
+	return DecorationSet.create(doc, decorations);
+};
+const createShikiPlugin = ({ name, defaultLanguage, defaultTheme, themes }) => {
+	const loadMissing = async (doc) => {
+		if (!sharedHighlighter) return false;
+		const blocks = findChildren(doc, (node) => node.type.name === name);
+		const loadedLangs = sharedHighlighter.getLoadedLanguages();
+		const loadedThemes = sharedHighlighter.getLoadedThemes();
+		const langsToLoad = /* @__PURE__ */ new Set();
+		const themesToLoad = /* @__PURE__ */ new Set();
+		for (const block of blocks) {
+			const lang = block.node.attrs.language || defaultLanguage;
+			if (lang && !loadedLangs.includes(lang) && lang in bundledLanguages && !loadingLangs.has(lang)) langsToLoad.add(lang);
+			if (themes) {
+				const light = block.node.attrs.themes?.light || themes.light;
+				const dark = block.node.attrs.themes?.dark || themes.dark;
+				if (light && !loadedThemes.includes(light) && light in bundledThemes && !loadingThemes.has(light)) themesToLoad.add(light);
+				if (dark && !loadedThemes.includes(dark) && dark in bundledThemes && !loadingThemes.has(dark)) themesToLoad.add(dark);
+			} else {
+				const theme = block.node.attrs.theme || defaultTheme;
+				if (theme && !loadedThemes.includes(theme) && theme in bundledThemes && !loadingThemes.has(theme)) themesToLoad.add(theme);
+			}
+		}
+		if (langsToLoad.size === 0 && themesToLoad.size === 0) return false;
+		for (const l of langsToLoad) loadingLangs.add(l);
+		for (const t of themesToLoad) loadingThemes.add(t);
+		try {
+			await Promise.all([...Array.from(langsToLoad).map((l) => sharedHighlighter.loadLanguage(l)), ...Array.from(themesToLoad).map((t) => sharedHighlighter.loadTheme(t))]);
+			return true;
+		} finally {
+			for (const l of langsToLoad) loadingLangs.delete(l);
+			for (const t of themesToLoad) loadingThemes.delete(t);
+		}
+	};
+	const plugin = new Plugin({
+		key: new PluginKey("shiki"),
+		view(editorView) {
+			let isDestroyed = false;
+			const init = async () => {
+				if (!sharedHighlighter) sharedHighlighter = await getSingletonHighlighter();
+				if (isDestroyed) return;
+				await loadMissing(editorView.state.doc);
+				if (isDestroyed) return;
+				editorView.dispatch(editorView.state.tr.setMeta("shikiPluginForceDecoration", true));
+			};
+			init();
+			return {
+				update(view) {
+					loadMissing(view.state.doc).then((hasLoadedNew) => {
+						if (hasLoadedNew && !isDestroyed) view.dispatch(view.state.tr.setMeta("shikiPluginForceDecoration", true));
+					});
+				},
+				destroy() {
+					isDestroyed = true;
+				}
+			};
+		},
+		state: {
+			init: (_, { doc }) => renderDecorations({
+				doc,
+				name,
+				defaultLanguage,
+				defaultTheme,
+				themes,
+				highlighter: sharedHighlighter
+			}),
+			apply: (tr, decorationSet, oldState, newState) => {
+				const oldHead = oldState.selection.$head.parent.type.name;
+				const newHead = newState.selection.$head.parent.type.name;
+				const oldBlocks = findChildren(oldState.doc, (node) => node.type.name === name);
+				const newBlocks = findChildren(newState.doc, (node) => node.type.name === name);
+				const docChanged = tr.docChanged && ([oldHead, newHead].includes(name) || oldBlocks.length !== newBlocks.length || tr.steps.some((step) => {
+					const { from, to } = step;
+					return from !== void 0 && to !== void 0 && oldBlocks.some((block) => block.pos >= from && block.pos + block.node.nodeSize <= to);
+				}));
+				if (tr.getMeta("shikiPluginForceDecoration") || docChanged) return renderDecorations({
+					doc: tr.doc,
+					name,
+					defaultLanguage,
+					defaultTheme,
+					themes,
+					highlighter: sharedHighlighter
+				});
+				return decorationSet.map(tr.mapping, tr.doc);
+			}
+		},
+		props: { decorations(state) {
+			return plugin.getState(state);
+		} }
+	});
+	return plugin;
+};
+const CodeBlockShiki = CodeBlock.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			defaultLanguage: null,
+			defaultTheme: "github-light",
+			themes: null
+		};
+	},
+	markdownTokenName: "code",
+	parseMarkdown(rawNode, builder) {
+		if (rawNode.raw?.startsWith("```") === false && rawNode.raw?.startsWith("~~~") === false && rawNode.codeBlockStyle !== "indented") return [];
+		return builder.createNode("codeBlock", { language: rawNode.lang || null }, rawNode.text ? [builder.createTextNode(rawNode.text)] : []);
+	},
+	renderMarkdown(node, builder) {
+		const lang = node.attrs?.language || "";
+		return node.content ? [
+			`\`\`\`${lang}`,
+			builder.renderChildren(node.content),
+			"```"
+		].join("\n") : `\`\`\`${lang}\n\n\`\`\``;
+	},
+	addProseMirrorPlugins() {
+		return [...this.parent?.() || [], createShikiPlugin({
+			name: this.name,
+			defaultLanguage: this.options.defaultLanguage,
+			defaultTheme: this.options.defaultTheme,
+			themes: this.options.themes
+		})];
+	}
+});
+
+//#endregion
+export { CodeBlockShiki };
+//# sourceMappingURL=code-block-shiki.mjs.map

package/dist/esm/components/MarkdownEditor/novel/extensions/code-block-shiki.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-shiki.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/code-block-shiki.ts"],"sourcesContent":["import { findChildren } from '@tiptap/core';\nimport { CodeBlock, type CodeBlockOptions } from '@tiptap/extension-code-block';\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model';\nimport { Plugin, PluginKey } from '@tiptap/pm/state';\nimport { Decoration, DecorationSet } from '@tiptap/pm/view';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  bundledLanguages,\n  bundledThemes,\n  getSingletonHighlighter,\n  type Highlighter,\n} from '../../../IDE/shikiBundle';\n\nexport interface CodeBlockShikiOptions extends CodeBlockOptions {\n  defaultLanguage: BundledLanguage | null;\n  defaultTheme: BundledTheme | string;\n  themes?: {\n    light: BundledTheme;\n    dark: BundledTheme;\n  } | null;\n}\n\nconst formatStyles = (styles: Record<string, string>): string =>\n  Object.entries(styles)\n    .filter(([_, value]) => Boolean(value))\n    .map(([key, value]) => `${key}:${value}`)\n    .join(';');\n\nlet sharedHighlighter: Highlighter | null = null;\nconst loadingLangs = new Set<string>();\nconst loadingThemes = new Set<string>();\n\nconst renderDecorations = ({\n  doc,\n  name,\n  defaultLanguage,\n  defaultTheme,\n  themes,\n  highlighter,\n}: {\n  doc: ProseMirrorNode;\n  name: string;\n  defaultLanguage?: BundledLanguage | null;\n  defaultTheme: BundledTheme | string;\n  themes?: { light: BundledTheme; dark: BundledTheme } | null;\n  highlighter: Highlighter | null;\n}): DecorationSet => {\n  if (!highlighter) {\n    return DecorationSet.empty;\n  }\n\n  const decorations: Decoration[] = [];\n  const loadedLangs = highlighter.getLoadedLanguages();\n  const loadedThemes = highlighter.getLoadedThemes();\n\n  const resolveTheme = (themeName: string) =>\n    loadedThemes.includes(themeName)\n      ? themeName\n      : (loadedThemes[0] ?? 'github-light');\n\n  findChildren(doc, (node) => node.type.name === name).forEach((block) => {\n    let from = block.pos + 1;\n    let language = (block.node.attrs.language || defaultLanguage) as string;\n    const blockTheme = (block.node.attrs.theme || defaultTheme) as string;\n    const lightTheme = (block.node.attrs.themes?.light ||\n      themes?.light ||\n      blockTheme) as string;\n    const darkTheme = (block.node.attrs.themes?.dark ||\n      themes?.dark ||\n      blockTheme) as string;\n\n    if (!loadedLangs.includes(language)) {\n      language = 'plaintext';\n    }\n\n    if (themes) {\n      const tokensResult = highlighter.codeToTokens(block.node.textContent, {\n        lang: language as BundledLanguage,\n        themes: {\n          light: resolveTheme(lightTheme),\n          dark: resolveTheme(darkTheme),\n        },\n      });\n\n      const preStyles: Record<string, string> = {};\n      if (tokensResult.bg) preStyles['background-color'] = tokensResult.bg;\n      if (tokensResult.fg) preStyles.color = tokensResult.fg;\n\n      decorations.push(\n        Decoration.node(block.pos, block.pos + block.node.nodeSize, {\n          style: formatStyles(preStyles),\n          class: 'shiki',\n        })\n      );\n\n      for (const line of tokensResult.tokens) {\n        for (const token of line) {\n          const to = from + token.content.length;\n          const style = formatStyles(\n            (token.htmlStyle as Record<string, string>) || {}\n          );\n          decorations.push(Decoration.inline(from, to, { style }));\n          from = to;\n        }\n        from += 1;\n      }\n    } else {\n      const activeTheme = resolveTheme(blockTheme);\n      const tokensResult = highlighter.codeToTokens(block.node.textContent, {\n        lang: language as BundledLanguage,\n        theme: activeTheme,\n      });\n\n      const themeObj = highlighter.getTheme(activeTheme);\n      decorations.push(\n        Decoration.node(block.pos, block.pos + block.node.nodeSize, {\n          style: formatStyles({ 'background-color': themeObj.bg }),\n          class: 'shiki',\n        })\n      );\n\n      for (const line of tokensResult.tokens) {\n        for (const token of line) {\n          const to = from + token.content.length;\n          const style = formatStyles({ color: token.color || 'inherit' });\n          decorations.push(Decoration.inline(from, to, { style }));\n          from = to;\n        }\n        from += 1;\n      }\n    }\n  });\n\n  return DecorationSet.create(doc, decorations);\n};\n\nconst createShikiPlugin = ({\n  name,\n  defaultLanguage,\n  defaultTheme,\n  themes,\n}: {\n  name: string;\n  defaultLanguage?: BundledLanguage | null;\n  defaultTheme: BundledTheme | string;\n  themes?: { light: BundledTheme; dark: BundledTheme } | null;\n}) => {\n  const loadMissing = async (doc: ProseMirrorNode): Promise<boolean> => {\n    if (!sharedHighlighter) return false;\n    const blocks = findChildren(doc, (node) => node.type.name === name);\n    const loadedLangs = sharedHighlighter.getLoadedLanguages();\n    const loadedThemes = sharedHighlighter.getLoadedThemes();\n\n    const langsToLoad = new Set<string>();\n    const themesToLoad = new Set<string>();\n\n    for (const block of blocks) {\n      const lang = block.node.attrs.language || defaultLanguage;\n      if (\n        lang &&\n        !loadedLangs.includes(lang) &&\n        lang in bundledLanguages &&\n        !loadingLangs.has(lang)\n      ) {\n        langsToLoad.add(lang);\n      }\n\n      if (themes) {\n        const light = block.node.attrs.themes?.light || themes.light;\n        const dark = block.node.attrs.themes?.dark || themes.dark;\n        if (\n          light &&\n          !loadedThemes.includes(light) &&\n          light in bundledThemes &&\n          !loadingThemes.has(light)\n        ) {\n          themesToLoad.add(light);\n        }\n        if (\n          dark &&\n          !loadedThemes.includes(dark) &&\n          dark in bundledThemes &&\n          !loadingThemes.has(dark)\n        ) {\n          themesToLoad.add(dark);\n        }\n      } else {\n        const theme = block.node.attrs.theme || defaultTheme;\n        if (\n          theme &&\n          !loadedThemes.includes(theme) &&\n          theme in bundledThemes &&\n          !loadingThemes.has(theme)\n        ) {\n          themesToLoad.add(theme);\n        }\n      }\n    }\n\n    if (langsToLoad.size === 0 && themesToLoad.size === 0) return false;\n\n    for (const l of langsToLoad) {\n      loadingLangs.add(l);\n    }\n    for (const t of themesToLoad) {\n      loadingThemes.add(t);\n    }\n\n    try {\n      await Promise.all([\n        ...Array.from(langsToLoad).map((l) =>\n          sharedHighlighter!.loadLanguage(l as BundledLanguage)\n        ),\n        ...Array.from(themesToLoad).map((t) =>\n          sharedHighlighter!.loadTheme(t as BundledTheme)\n        ),\n      ]);\n      return true;\n    } finally {\n      for (const l of langsToLoad) {\n        loadingLangs.delete(l);\n      }\n      for (const t of themesToLoad) {\n        loadingThemes.delete(t);\n      }\n    }\n  };\n\n  const plugin: Plugin = new Plugin({\n    key: new PluginKey('shiki'),\n    view(editorView) {\n      let isDestroyed = false;\n\n      const init = async () => {\n        if (!sharedHighlighter) {\n          sharedHighlighter = await getSingletonHighlighter();\n        }\n        if (isDestroyed) return;\n        await loadMissing(editorView.state.doc);\n        if (isDestroyed) return;\n        editorView.dispatch(\n          editorView.state.tr.setMeta('shikiPluginForceDecoration', true)\n        );\n      };\n\n      init();\n\n      return {\n        update(view) {\n          loadMissing(view.state.doc).then((hasLoadedNew) => {\n            if (hasLoadedNew && !isDestroyed) {\n              view.dispatch(\n                view.state.tr.setMeta('shikiPluginForceDecoration', true)\n              );\n            }\n          });\n        },\n        destroy() {\n          isDestroyed = true;\n        },\n      };\n    },\n    state: {\n      init: (_, { doc }) =>\n        renderDecorations({\n          doc,\n          name,\n          defaultLanguage,\n          defaultTheme,\n          themes,\n          highlighter: sharedHighlighter,\n        }),\n      apply: (tr, decorationSet, oldState, newState) => {\n        const oldHead = oldState.selection.$head.parent.type.name;\n        const newHead = newState.selection.$head.parent.type.name;\n        const oldBlocks = findChildren(\n          oldState.doc,\n          (node) => node.type.name === name\n        );\n        const newBlocks = findChildren(\n          newState.doc,\n          (node) => node.type.name === name\n        );\n\n        const docChanged =\n          tr.docChanged &&\n          ([oldHead, newHead].includes(name) ||\n            oldBlocks.length !== newBlocks.length ||\n            tr.steps.some((step) => {\n              // @ts-expect-error step boundaries\n              const { from, to } = step;\n              return (\n                from !== undefined &&\n                to !== undefined &&\n                oldBlocks.some(\n                  (block) =>\n                    block.pos >= from && block.pos + block.node.nodeSize <= to\n                )\n              );\n            }));\n\n        if (tr.getMeta('shikiPluginForceDecoration') || docChanged) {\n          return renderDecorations({\n            doc: tr.doc,\n            name,\n            defaultLanguage,\n            defaultTheme,\n            themes,\n            highlighter: sharedHighlighter,\n          });\n        }\n\n        return decorationSet.map(tr.mapping, tr.doc);\n      },\n    },\n    props: {\n      decorations(state) {\n        return plugin.getState(state);\n      },\n    },\n  });\n\n  return plugin;\n};\n\nexport const CodeBlockShiki = CodeBlock.extend<CodeBlockShikiOptions>({\n  addOptions() {\n    return {\n      ...this.parent?.(),\n      defaultLanguage: null,\n      defaultTheme: 'github-light',\n      themes: null,\n    };\n  },\n\n  // @ts-expect-error tiptap-markdown integration property\n  markdownTokenName: 'code',\n\n  parseMarkdown(rawNode: any, builder: any) {\n    if (\n      rawNode.raw?.startsWith('```') === false &&\n      rawNode.raw?.startsWith('~~~') === false &&\n      rawNode.codeBlockStyle !== 'indented'\n    ) {\n      return [];\n    }\n    return builder.createNode(\n      'codeBlock',\n      { language: rawNode.lang || null },\n      rawNode.text ? [builder.createTextNode(rawNode.text)] : []\n    );\n  },\n\n  renderMarkdown(node: any, builder: any) {\n    const lang = node.attrs?.language || '';\n    return node.content\n      ? [`\\`\\`\\`${lang}`, builder.renderChildren(node.content), '```'].join(\n          '\\n'\n        )\n      : `\\`\\`\\`${lang}\\n\\n\\`\\`\\``;\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      ...(this.parent?.() || []),\n      createShikiPlugin({\n        name: this.name,\n        defaultLanguage: this.options.defaultLanguage,\n        defaultTheme: this.options.defaultTheme,\n        themes: this.options.themes,\n      }),\n    ];\n  },\n});\n"],"mappings":";;;;;;;AAuBA,MAAM,gBAAgB,WACpB,OAAO,QAAQ,MAAM,CAAC,CACnB,QAAQ,CAAC,GAAG,WAAW,QAAQ,KAAK,CAAC,CAAC,CACtC,KAAK,CAAC,KAAK,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC,CACxC,KAAK,GAAG;AAEb,IAAI,oBAAwC;AAC5C,MAAM,+BAAe,IAAI,IAAY;AACrC,MAAM,gCAAgB,IAAI,IAAY;AAEtC,MAAM,qBAAqB,EACzB,KACA,MACA,iBACA,cACA,QACA,kBAQmB;CACnB,IAAI,CAAC,aACH,OAAO,cAAc;CAGvB,MAAM,cAA4B,CAAC;CACnC,MAAM,cAAc,YAAY,mBAAmB;CACnD,MAAM,eAAe,YAAY,gBAAgB;CAEjD,MAAM,gBAAgB,cACpB,aAAa,SAAS,SAAS,IAC3B,YACC,aAAa,MAAM;CAE1B,aAAa,MAAM,SAAS,KAAK,KAAK,SAAS,IAAI,CAAC,CAAC,SAAS,UAAU;EACtE,IAAI,OAAO,MAAM,MAAM;EACvB,IAAI,WAAY,MAAM,KAAK,MAAM,YAAY;EAC7C,MAAM,aAAc,MAAM,KAAK,MAAM,SAAS;EAC9C,MAAM,aAAc,MAAM,KAAK,MAAM,QAAQ,SAC3C,QAAQ,SACR;EACF,MAAM,YAAa,MAAM,KAAK,MAAM,QAAQ,QAC1C,QAAQ,QACR;EAEF,IAAI,CAAC,YAAY,SAAS,QAAQ,GAChC,WAAW;EAGb,IAAI,QAAQ;GACV,MAAM,eAAe,YAAY,aAAa,MAAM,KAAK,aAAa;IACpE,MAAM;IACN,QAAQ;KACN,OAAO,aAAa,UAAU;KAC9B,MAAM,aAAa,SAAS;IAC9B;GACF,CAAC;GAED,MAAM,YAAoC,CAAC;GAC3C,IAAI,aAAa,IAAI,UAAU,sBAAsB,aAAa;GAClE,IAAI,aAAa,IAAI,UAAU,QAAQ,aAAa;GAEpD,YAAY,KACV,WAAW,KAAK,MAAM,KAAK,MAAM,MAAM,MAAM,KAAK,UAAU;IAC1D,OAAO,aAAa,SAAS;IAC7B,OAAO;GACT,CAAC,CACH;GAEA,KAAK,MAAM,QAAQ,aAAa,QAAQ;IACtC,KAAK,MAAM,SAAS,MAAM;KACxB,MAAM,KAAK,OAAO,MAAM,QAAQ;KAChC,MAAM,QAAQ,aACX,MAAM,aAAwC,CAAC,CAClD;KACA,YAAY,KAAK,WAAW,OAAO,MAAM,IAAI,EAAE,MAAM,CAAC,CAAC;KACvD,OAAO;IACT;IACA,QAAQ;GACV;EACF,OAAO;GACL,MAAM,cAAc,aAAa,UAAU;GAC3C,MAAM,eAAe,YAAY,aAAa,MAAM,KAAK,aAAa;IACpE,MAAM;IACN,OAAO;GACT,CAAC;GAED,MAAM,WAAW,YAAY,SAAS,WAAW;GACjD,YAAY,KACV,WAAW,KAAK,MAAM,KAAK,MAAM,MAAM,MAAM,KAAK,UAAU;IAC1D,OAAO,aAAa,EAAE,oBAAoB,SAAS,GAAG,CAAC;IACvD,OAAO;GACT,CAAC,CACH;GAEA,KAAK,MAAM,QAAQ,aAAa,QAAQ;IACtC,KAAK,MAAM,SAAS,MAAM;KACxB,MAAM,KAAK,OAAO,MAAM,QAAQ;KAChC,MAAM,QAAQ,aAAa,EAAE,OAAO,MAAM,SAAS,UAAU,CAAC;KAC9D,YAAY,KAAK,WAAW,OAAO,MAAM,IAAI,EAAE,MAAM,CAAC,CAAC;KACvD,OAAO;IACT;IACA,QAAQ;GACV;EACF;CACF,CAAC;CAED,OAAO,cAAc,OAAO,KAAK,WAAW;AAC9C;AAEA,MAAM,qBAAqB,EACzB,MACA,iBACA,cACA,aAMI;CACJ,MAAM,cAAc,OAAO,QAA2C;EACpE,IAAI,CAAC,mBAAmB,OAAO;EAC/B,MAAM,SAAS,aAAa,MAAM,SAAS,KAAK,KAAK,SAAS,IAAI;EAClE,MAAM,cAAc,kBAAkB,mBAAmB;EACzD,MAAM,eAAe,kBAAkB,gBAAgB;EAEvD,MAAM,8BAAc,IAAI,IAAY;EACpC,MAAM,+BAAe,IAAI,IAAY;EAErC,KAAK,MAAM,SAAS,QAAQ;GAC1B,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY;GAC1C,IACE,QACA,CAAC,YAAY,SAAS,IAAI,KAC1B,QAAQ,oBACR,CAAC,aAAa,IAAI,IAAI,GAEtB,YAAY,IAAI,IAAI;GAGtB,IAAI,QAAQ;IACV,MAAM,QAAQ,MAAM,KAAK,MAAM,QAAQ,SAAS,OAAO;IACvD,MAAM,OAAO,MAAM,KAAK,MAAM,QAAQ,QAAQ,OAAO;IACrD,IACE,SACA,CAAC,aAAa,SAAS,KAAK,KAC5B,SAAS,iBACT,CAAC,cAAc,IAAI,KAAK,GAExB,aAAa,IAAI,KAAK;IAExB,IACE,QACA,CAAC,aAAa,SAAS,IAAI,KAC3B,QAAQ,iBACR,CAAC,cAAc,IAAI,IAAI,GAEvB,aAAa,IAAI,IAAI;GAEzB,OAAO;IACL,MAAM,QAAQ,MAAM,KAAK,MAAM,SAAS;IACxC,IACE,SACA,CAAC,aAAa,SAAS,KAAK,KAC5B,SAAS,iBACT,CAAC,cAAc,IAAI,KAAK,GAExB,aAAa,IAAI,KAAK;GAE1B;EACF;EAEA,IAAI,YAAY,SAAS,KAAK,aAAa,SAAS,GAAG,OAAO;EAE9D,KAAK,MAAM,KAAK,aACd,aAAa,IAAI,CAAC;EAEpB,KAAK,MAAM,KAAK,cACd,cAAc,IAAI,CAAC;EAGrB,IAAI;GACF,MAAM,QAAQ,IAAI,CAChB,GAAG,MAAM,KAAK,WAAW,CAAC,CAAC,KAAK,MAC9B,kBAAmB,aAAa,CAAoB,CACtD,GACA,GAAG,MAAM,KAAK,YAAY,CAAC,CAAC,KAAK,MAC/B,kBAAmB,UAAU,CAAiB,CAChD,CACF,CAAC;GACD,OAAO;EACT,UAAU;GACR,KAAK,MAAM,KAAK,aACd,aAAa,OAAO,CAAC;GAEvB,KAAK,MAAM,KAAK,cACd,cAAc,OAAO,CAAC;EAE1B;CACF;CAEA,MAAM,SAAiB,IAAI,OAAO;EAChC,KAAK,IAAI,UAAU,OAAO;EAC1B,KAAK,YAAY;GACf,IAAI,cAAc;GAElB,MAAM,OAAO,YAAY;IACvB,IAAI,CAAC,mBACH,oBAAoB,MAAM,wBAAwB;IAEpD,IAAI,aAAa;IACjB,MAAM,YAAY,WAAW,MAAM,GAAG;IACtC,IAAI,aAAa;IACjB,WAAW,SACT,WAAW,MAAM,GAAG,QAAQ,8BAA8B,IAAI,CAChE;GACF;GAEA,KAAK;GAEL,OAAO;IACL,OAAO,MAAM;KACX,YAAY,KAAK,MAAM,GAAG,CAAC,CAAC,MAAM,iBAAiB;MACjD,IAAI,gBAAgB,CAAC,aACnB,KAAK,SACH,KAAK,MAAM,GAAG,QAAQ,8BAA8B,IAAI,CAC1D;KAEJ,CAAC;IACH;IACA,UAAU;KACR,cAAc;IAChB;GACF;EACF;EACA,OAAO;GACL,OAAO,GAAG,EAAE,UACV,kBAAkB;IAChB;IACA;IACA;IACA;IACA;IACA,aAAa;GACf,CAAC;GACH,QAAQ,IAAI,eAAe,UAAU,aAAa;IAChD,MAAM,UAAU,SAAS,UAAU,MAAM,OAAO,KAAK;IACrD,MAAM,UAAU,SAAS,UAAU,MAAM,OAAO,KAAK;IACrD,MAAM,YAAY,aAChB,SAAS,MACR,SAAS,KAAK,KAAK,SAAS,IAC/B;IACA,MAAM,YAAY,aAChB,SAAS,MACR,SAAS,KAAK,KAAK,SAAS,IAC/B;IAEA,MAAM,aACJ,GAAG,eACF,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,IAAI,KAC/B,UAAU,WAAW,UAAU,UAC/B,GAAG,MAAM,MAAM,SAAS;KAEtB,MAAM,EAAE,MAAM,OAAO;KACrB,OACE,SAAS,UACT,OAAO,UACP,UAAU,MACP,UACC,MAAM,OAAO,QAAQ,MAAM,MAAM,MAAM,KAAK,YAAY,EAC5D;IAEJ,CAAC;IAEL,IAAI,GAAG,QAAQ,4BAA4B,KAAK,YAC9C,OAAO,kBAAkB;KACvB,KAAK,GAAG;KACR;KACA;KACA;KACA;KACA,aAAa;IACf,CAAC;IAGH,OAAO,cAAc,IAAI,GAAG,SAAS,GAAG,GAAG;GAC7C;EACF;EACA,OAAO,EACL,YAAY,OAAO;GACjB,OAAO,OAAO,SAAS,KAAK;EAC9B,EACF;CACF,CAAC;CAED,OAAO;AACT;AAEA,MAAa,iBAAiB,UAAU,OAA8B;CACpE,aAAa;EACX,OAAO;GACL,GAAG,KAAK,SAAS;GACjB,iBAAiB;GACjB,cAAc;GACd,QAAQ;EACV;CACF;CAGA,mBAAmB;CAEnB,cAAc,SAAc,SAAc;EACxC,IACE,QAAQ,KAAK,WAAW,KAAK,MAAM,SACnC,QAAQ,KAAK,WAAW,KAAK,MAAM,SACnC,QAAQ,mBAAmB,YAE3B,OAAO,CAAC;EAEV,OAAO,QAAQ,WACb,aACA,EAAE,UAAU,QAAQ,QAAQ,KAAK,GACjC,QAAQ,OAAO,CAAC,QAAQ,eAAe,QAAQ,IAAI,CAAC,IAAI,CAAC,CAC3D;CACF;CAEA,eAAe,MAAW,SAAc;EACtC,MAAM,OAAO,KAAK,OAAO,YAAY;EACrC,OAAO,KAAK,UACR;GAAC,SAAS;GAAQ,QAAQ,eAAe,KAAK,OAAO;GAAG;EAAK,CAAC,CAAC,KAC7D,IACF,IACA,SAAS,KAAK;CACpB;CAEA,wBAAwB;EACtB,OAAO,CACL,GAAI,KAAK,SAAS,KAAK,CAAC,GACxB,kBAAkB;GAChB,MAAM,KAAK;GACX,iBAAiB,KAAK,QAAQ;GAC9B,cAAc,KAAK,QAAQ;GAC3B,QAAQ,KAAK,QAAQ;EACvB,CAAC,CACH;CACF;AACF,CAAC"}

package/dist/esm/components/MarkdownEditor/novel/extensions/index.mjs

@@ -2,6 +2,7 @@ import CustomKeymap from "./custom-keymap.mjs";
 import { ImageResizer } from "./image-resizer.mjs";
 import UpdatedImage from "./updated-image.mjs";
 import { AIHighlight, addAIHighlight, inputRegex, pasteRegex, removeAIHighlight } from "./ai-highlight.mjs";
+import { CodeBlockShiki } from "./code-block-shiki.mjs";
 import { Command, createSuggestionItems, handleCommandNavigation, renderItems } from "./slash-command.mjs";
 import { InputRule } from "@tiptap/core";
 import CharacterCount from "@tiptap/extension-character-count";
@@ -47,5 +48,5 @@ const Horizontal = HorizontalRule.extend({ addInputRules() {
 } });
 
 //#endregion
-export { AIHighlight, CharacterCount, Color, Command, CustomKeymap, GlobalDragHandle, HighlightExtension, Horizontal as HorizontalRule, ImageResizer, InputRule, MarkdownExtension, PlaceholderExtension as Placeholder, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, UpdatedImage, Youtube, addAIHighlight, createSuggestionItems, handleCommandNavigation, inputRegex, pasteRegex, removeAIHighlight, renderItems };
+export { AIHighlight, CharacterCount, CodeBlockShiki, Color, Command, CustomKeymap, GlobalDragHandle, HighlightExtension, Horizontal as HorizontalRule, ImageResizer, InputRule, MarkdownExtension, PlaceholderExtension as Placeholder, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, UpdatedImage, Youtube, addAIHighlight, createSuggestionItems, handleCommandNavigation, inputRegex, pasteRegex, removeAIHighlight, renderItems };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/MarkdownEditor/novel/extensions/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/index.ts"],"sourcesContent":["import { InputRule } from '@tiptap/core';\nimport CharacterCount from '@tiptap/extension-character-count';\nimport { Color } from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport HorizontalRule from '@tiptap/extension-horizontal-rule';\nimport TiptapImage from '@tiptap/extension-image';\nimport TiptapLink from '@tiptap/extension-link';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TaskItem } from '@tiptap/extension-task-item';\nimport { TaskList } from '@tiptap/extension-task-list';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport TiptapUnderline from '@tiptap/extension-underline';\nimport Youtube from '@tiptap/extension-youtube';\nimport StarterKit from '@tiptap/starter-kit';\nimport GlobalDragHandle from 'tiptap-extension-global-drag-handle';\nimport { Markdown } from 'tiptap-markdown';\nimport CustomKeymap from './custom-keymap';\nimport { ImageResizer } from './image-resizer';\nimport UpdatedImage from './updated-image';\n\nconst PlaceholderExtension = Placeholder.configure({\n  placeholder: ({ node }) => {\n    if (node.type.name === 'heading') {\n      return `Heading ${node.attrs.level}`;\n    }\n    return \"Press '/' for commands\";\n  },\n  includeChildren: true,\n});\n\nconst HighlightExtension = Highlight.configure({\n  multicolor: true,\n});\n\nconst MarkdownExtension = Markdown.configure({\n  html: false,\n  transformCopiedText: true,\n});\n\nconst Horizontal = HorizontalRule.extend({\n  addInputRules() {\n    return [\n      new InputRule({\n        find: /^(?:---|—-|___\\s|\\*\\*\\*\\s)$/u,\n        handler: ({ state, range }) => {\n          const attributes = {};\n\n          const { tr } = state;\n          const start = range.from;\n          const end = range.to;\n\n          tr.insert(start - 1, this.type.create(attributes)).delete(\n            tr.mapping.map(start),\n            tr.mapping.map(end)\n          );\n        },\n      }),\n    ];\n  },\n});\n\nexport * from './ai-highlight';\nexport * from './slash-command';\nexport {\n  CharacterCount,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  Horizontal as HorizontalRule,\n  ImageResizer,\n  InputRule,\n  MarkdownExtension,\n  PlaceholderExtension as Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  Youtube,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,uBAAuB,YAAY,UAAU;CACjD,cAAc,EAAE,WAAW;EACzB,IAAI,KAAK,KAAK,SAAS,WACrB,OAAO,WAAW,KAAK,MAAM;EAE/B,OAAO;CACT;CACA,iBAAiB;AACnB,CAAC;AAED,MAAM,qBAAqB,UAAU,UAAU,EAC7C,YAAY,KACd,CAAC;AAED,MAAM,oBAAoB,SAAS,UAAU;CAC3C,MAAM;CACN,qBAAqB;AACvB,CAAC;AAED,MAAM,aAAa,eAAe,OAAO,EACvC,gBAAgB;CACd,OAAO,CACL,IAAI,UAAU;EACZ,MAAM;EACN,UAAU,EAAE,OAAO,YAAY;GAC7B,MAAM,aAAa,CAAC;GAEpB,MAAM,EAAE,OAAO;GACf,MAAM,QAAQ,MAAM;GACpB,MAAM,MAAM,MAAM;GAElB,GAAG,OAAO,QAAQ,GAAG,KAAK,KAAK,OAAO,UAAU,CAAC,CAAC,CAAC,OACjD,GAAG,QAAQ,IAAI,KAAK,GACpB,GAAG,QAAQ,IAAI,GAAG,CACpB;EACF;CACF,CAAC,CACH;AACF,EACF,CAAC"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/index.ts"],"sourcesContent":["import { InputRule } from '@tiptap/core';\nimport CharacterCount from '@tiptap/extension-character-count';\nimport { Color } from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport HorizontalRule from '@tiptap/extension-horizontal-rule';\nimport TiptapImage from '@tiptap/extension-image';\nimport TiptapLink from '@tiptap/extension-link';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TaskItem } from '@tiptap/extension-task-item';\nimport { TaskList } from '@tiptap/extension-task-list';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport TiptapUnderline from '@tiptap/extension-underline';\nimport Youtube from '@tiptap/extension-youtube';\nimport StarterKit from '@tiptap/starter-kit';\nimport GlobalDragHandle from 'tiptap-extension-global-drag-handle';\nimport { Markdown } from 'tiptap-markdown';\nimport CustomKeymap from './custom-keymap';\nimport { ImageResizer } from './image-resizer';\nimport UpdatedImage from './updated-image';\n\nconst PlaceholderExtension = Placeholder.configure({\n  placeholder: ({ node }) => {\n    if (node.type.name === 'heading') {\n      return `Heading ${node.attrs.level}`;\n    }\n    return \"Press '/' for commands\";\n  },\n  includeChildren: true,\n});\n\nconst HighlightExtension = Highlight.configure({\n  multicolor: true,\n});\n\nconst MarkdownExtension = Markdown.configure({\n  html: false,\n  transformCopiedText: true,\n});\n\nconst Horizontal = HorizontalRule.extend({\n  addInputRules() {\n    return [\n      new InputRule({\n        find: /^(?:---|—-|___\\s|\\*\\*\\*\\s)$/u,\n        handler: ({ state, range }) => {\n          const attributes = {};\n\n          const { tr } = state;\n          const start = range.from;\n          const end = range.to;\n\n          tr.insert(start - 1, this.type.create(attributes)).delete(\n            tr.mapping.map(start),\n            tr.mapping.map(end)\n          );\n        },\n      }),\n    ];\n  },\n});\n\nexport * from './ai-highlight';\nexport * from './code-block-shiki';\nexport * from './slash-command';\nexport {\n  CharacterCount,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  Horizontal as HorizontalRule,\n  ImageResizer,\n  InputRule,\n  MarkdownExtension,\n  PlaceholderExtension as Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  Youtube,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,uBAAuB,YAAY,UAAU;CACjD,cAAc,EAAE,WAAW;EACzB,IAAI,KAAK,KAAK,SAAS,WACrB,OAAO,WAAW,KAAK,MAAM;EAE/B,OAAO;CACT;CACA,iBAAiB;AACnB,CAAC;AAED,MAAM,qBAAqB,UAAU,UAAU,EAC7C,YAAY,KACd,CAAC;AAED,MAAM,oBAAoB,SAAS,UAAU;CAC3C,MAAM;CACN,qBAAqB;AACvB,CAAC;AAED,MAAM,aAAa,eAAe,OAAO,EACvC,gBAAgB;CACd,OAAO,CACL,IAAI,UAAU;EACZ,MAAM;EACN,UAAU,EAAE,OAAO,YAAY;GAC7B,MAAM,aAAa,CAAC;GAEpB,MAAM,EAAE,OAAO;GACf,MAAM,QAAQ,MAAM;GACpB,MAAM,MAAM,MAAM;GAElB,GAAG,OAAO,QAAQ,GAAG,KAAK,KAAK,OAAO,UAAU,CAAC,CAAC,CAAC,OACjD,GAAG,QAAQ,IAAI,KAAK,GACpB,GAAG,QAAQ,IAAI,GAAG,CACpB;EACF;CACF,CAAC,CACH;AACF,EACF,CAAC"}

package/dist/esm/components/MarkdownEditor/novel/index.mjs

@@ -9,9 +9,10 @@ import CustomKeymap from "./extensions/custom-keymap.mjs";
 import { ImageResizer } from "./extensions/image-resizer.mjs";
 import UpdatedImage from "./extensions/updated-image.mjs";
 import { AIHighlight, addAIHighlight, removeAIHighlight } from "./extensions/ai-highlight.mjs";
+import { CodeBlockShiki } from "./extensions/code-block-shiki.mjs";
 import { Command, createSuggestionItems, handleCommandNavigation, renderItems } from "./extensions/slash-command.mjs";
 import { CharacterCount, Color, GlobalDragHandle, HighlightExtension, HorizontalRule as Horizontal, InputRule, MarkdownExtension, Placeholder as PlaceholderExtension, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, Youtube } from "./extensions/index.mjs";
 import { UploadImagesPlugin, createImageUpload, handleImageDrop, handleImagePaste } from "./plugins/upload-images.mjs";
 import { getAllContent, getPrevText, getUrlFromString, isValidUrl } from "./utils/index.mjs";
 
-export { AIHighlight, CharacterCount, Color, Command, CustomKeymap, EditorBubble, EditorBubbleItem, EditorCommand, EditorCommandEmpty, EditorCommandItem, EditorCommandList, EditorContent, EditorRoot, GlobalDragHandle, HighlightExtension, Horizontal as HorizontalRule, ImageResizer, InputRule, MarkdownExtension, PlaceholderExtension as Placeholder, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, UpdatedImage, UploadImagesPlugin, Youtube, addAIHighlight, createImageUpload, createSuggestionItems, getAllContent, getPrevText, getUrlFromString, handleCommandNavigation, handleImageDrop, handleImagePaste, isValidUrl, queryStore, rangeStore, removeAIHighlight, renderItems, useEditor, useQuery, useRange };
+export { AIHighlight, CharacterCount, CodeBlockShiki, Color, Command, CustomKeymap, EditorBubble, EditorBubbleItem, EditorCommand, EditorCommandEmpty, EditorCommandItem, EditorCommandList, EditorContent, EditorRoot, GlobalDragHandle, HighlightExtension, Horizontal as HorizontalRule, ImageResizer, InputRule, MarkdownExtension, PlaceholderExtension as Placeholder, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, UpdatedImage, UploadImagesPlugin, Youtube, addAIHighlight, createImageUpload, createSuggestionItems, getAllContent, getPrevText, getUrlFromString, handleCommandNavigation, handleImageDrop, handleImagePaste, isValidUrl, queryStore, rangeStore, removeAIHighlight, renderItems, useEditor, useQuery, useRange };

package/dist/esm/components/Modal/Modal.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { H3 } from "../Headers/index.mjs";
 import { useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -107,21 +107,32 @@ const bgStyle = "bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blu
 * @param props - MobileNavbar component props
 * @returns Mobile navigation with rollable full-screen menu
 */
-const MobileNavbar = ({ logo, topChildren, topSections = [], bottomChildren, bottomSections = [], rightItems, rollable = true }) => {
+const MobileNavbar = ({ logo, topChildren, topSections = [], bottomChildren, bottomSections = [], rightItems, rollable = true, isActive = true }) => {
 	const [isHidden, setIsHidden] = useState(false);
 	const [isUnrolled, setIsUnrolled] = useState(false);
 	const [headerHeight, setHeaderHeight] = useState(0);
 	const navRef = useRef(null);
 	useScrollBlockage({
-		disableScroll: rollable,
+		disableScroll: isActive && rollable,
 		key: "mobile_nav"
 	});
 	useScrollDetection({
 		onScrollUp: () => setIsHidden(false),
 		onScrollDown: () => setIsHidden(true),
-		isEnabled: !isUnrolled && rollable
+		isEnabled: isActive && !isUnrolled && rollable
 	});
 	/**
+	* Clears the transient state when the desktop layout takes over. Without it,
+	* a viewport that grows past the breakpoint while the header is scrolled away
+	* — or while the menu is open — restores that state on the way back, and the
+	* user returns to a navbar that is translated off screen.
+	*/
+	useEffect(() => {
+		if (isActive) return;
+		setIsHidden(false);
+		setIsUnrolled(false);
+	}, [isActive]);
+	/**
 	* Measures the collapsed header so the rolled-down panel can size itself to
 	* the rest of the viewport.
 	*

package/dist/esm/components/Navbar/MobileNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport {\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/**\n * Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype MobileNavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element displayed in the header */\n  logo: ReactNode;\n  /** Additional content displayed at the top of expanded mobile menu */\n  topChildren?: ReactNode;\n  /** Navigation sections displayed in the top area of expanded menu */\n  topSections?: ReactElement<T>[];\n  /** Additional content displayed at the bottom of expanded mobile menu */\n  bottomChildren?: ReactNode;\n  /** Navigation sections displayed in the bottom area of expanded menu */\n  bottomSections?: ReactElement<T>[];\n  /** Right-aligned items in the collapsed header (e.g., search, notifications) */\n  rightItems?: ReactNode;\n  /** Whether the navbar should be rollable (default: true) */\n  rollable?: boolean;\n};\n\n/**\n * Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n */\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\n/**\n * Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n */\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/**\n * Mobile Navigation Bar Component\n *\n * A sophisticated mobile-first navigation component with rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - rollable hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n *\n * Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n *           (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children]                          │\n * │ [Top Sections - Navigation Items]       │\n * │ [Bottom Sections - Navigation Items]    │\n * │ [Bottom Children]                       │\n * └─────────────────────────────────────────┘\n * ```\n *\n * Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n *\n * Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n *\n * @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<MobileLogo />}\n *   topSections={primaryNavItems}\n *   rightItems={<SearchIcon />}\n * />\n * ```\n *\n * @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<Logo />}\n *   topChildren={<WelcomeMessage />}\n *   topSections={mainNavItems}\n *   bottomSections={utilityNavItems}\n *   bottomChildren={<UserProfile />}\n *   rightItems={\n *     <>\n *       <NotificationIcon />\n *       <SearchIcon />\n *     </>\n *   }\n * />\n * ```\n *\n * Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n  rollable = true,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n  const [headerHeight, setHeaderHeight] = useState<number>(0);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: rollable,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled && rollable,\n  });\n\n  /**\n   * Measures the collapsed header so the rolled-down panel can size itself to\n   * the rest of the viewport.\n   *\n   * Reading `clientHeight` from the render body forced a layout on every\n   * render, and `useScrollDetection` re-renders this component on each wheel\n   * event — so the measurement ran once per scroll frame. A `ResizeObserver`\n   * callback runs *after* layout, which makes the same read free, and the\n   * height is published only when it actually changed.\n   */\n  useEffect(() => {\n    const headerElement = navRef.current;\n\n    if (!headerElement) return;\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n\n      // Border box, to stay equivalent to the `clientHeight` this replaces:\n      // `contentRect` would drop the header's vertical padding.\n      const measuredHeight =\n        entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\n\n      setHeaderHeight((previousHeight) =>\n        previousHeight === measuredHeight ? previousHeight : measuredHeight\n      );\n    });\n\n    resizeObserver.observe(headerElement);\n\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  const backDivHeight = isHidden ? 0 : headerHeight;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"flex w-full flex-col pt-10 pb-[20%] text-foreground text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-100 items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA0CA,MAAM,cAAwB;CAC5B,MAAM,EACJ,YAAY;EAAE,iBAAiB;EAAM,eAAe;CAAI,EAC1D;CACA,QAAQ,EACN,YAAY;EAAE,iBAAiB;EAAM,kBAAkB;CAAG,EAC5D;AACF;;;;;AAMA,MAAM,UACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFF,MAAa,gBAAgD,EAC3D,MACA,aACA,cAAc,CAAC,GACf,gBACA,iBAAiB,CAAC,GAClB,YACA,WAAW,WACe;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAkB,KAAK;CACvD,MAAM,CAAC,YAAY,iBAAiB,SAAkB,KAAK;CAC3D,MAAM,CAAC,cAAc,mBAAmB,SAAiB,CAAC;CAE1D,MAAM,SAAS,OAAuB,IAAI;CAE1C,kBAAkB;EAChB,eAAe;EACf,KAAK;CACP,CAAC;CAED,mBAAmB;EACjB,kBAAkB,YAAY,KAAK;EACnC,oBAAoB,YAAY,IAAI;EACpC,WAAW,CAAC,cAAc;CAC5B,CAAC;;;;;;;;;;;CAYD,gBAAgB;EACd,MAAM,gBAAgB,OAAO;EAE7B,IAAI,CAAC,eAAe;EAEpB,MAAM,iBAAiB,IAAI,gBAAgB,CAAC,WAAW;GACrD,IAAI,CAAC,OAAO;GAIZ,MAAM,iBACJ,MAAM,gBAAgB,EAAE,EAAE,aAAa,MAAM,YAAY;GAE3D,iBAAiB,mBACf,mBAAmB,iBAAiB,iBAAiB,cACvD;EACF,CAAC;EAED,eAAe,QAAQ,aAAa;EAEpC,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,WAAW,IAAI;CAErC,MAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;CAEpE,OACE,qBAAC,OAAD;EACE,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,eACnC;EACA,IAAG;YANL,CAQE,qBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAFP,CAIG,MAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ;IACE,IAEJ,kBACC,oBAAC,QAAD;KACE,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,UAAU;IACzD,EAEA;KACF;MAEL,oBAAC,OAAD;GACE,WAAW,GACT,SACA,kDACF;aAEA,oBAAC,mBAAD;IAAmB,UAAU,CAAC;cAC5B,qBAAC,EAAE,KAAH;KACE,WAAU;KACV,eAAe,cAAc,KAAK;KAClC,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,KACxC;eAPF;MASG;MACD,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,aACA,cACE;;MAEL,oBAAC,OAAD;OAAK,WAAU;iBACZ;MACE;KACA;;GACU;EAChB,EACF;;AAET"}
+{"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport {\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/**\n * Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype MobileNavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element displayed in the header */\n  logo: ReactNode;\n  /** Additional content displayed at the top of expanded mobile menu */\n  topChildren?: ReactNode;\n  /** Navigation sections displayed in the top area of expanded menu */\n  topSections?: ReactElement<T>[];\n  /** Additional content displayed at the bottom of expanded mobile menu */\n  bottomChildren?: ReactNode;\n  /** Navigation sections displayed in the bottom area of expanded menu */\n  bottomSections?: ReactElement<T>[];\n  /** Right-aligned items in the collapsed header (e.g., search, notifications) */\n  rightItems?: ReactNode;\n  /** Whether the navbar should be rollable (default: true) */\n  rollable?: boolean;\n  /**\n   * Whether this navbar is the one on screen. The responsive switch is done in\n   * CSS, so the desktop layout keeps this component mounted but hidden; a\n   * hidden navbar must not lock the page scroll or answer scroll events.\n   * Defaults to `true`, for the standalone use of this component.\n   */\n  isActive?: boolean;\n};\n\n/**\n * Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n */\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\n/**\n * Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n */\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/**\n * Mobile Navigation Bar Component\n *\n * A sophisticated mobile-first navigation component with rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - rollable hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n *\n * Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n *           (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children]                          │\n * │ [Top Sections - Navigation Items]       │\n * │ [Bottom Sections - Navigation Items]    │\n * │ [Bottom Children]                       │\n * └─────────────────────────────────────────┘\n * ```\n *\n * Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n *\n * Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n *\n * @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<MobileLogo />}\n *   topSections={primaryNavItems}\n *   rightItems={<SearchIcon />}\n * />\n * ```\n *\n * @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<Logo />}\n *   topChildren={<WelcomeMessage />}\n *   topSections={mainNavItems}\n *   bottomSections={utilityNavItems}\n *   bottomChildren={<UserProfile />}\n *   rightItems={\n *     <>\n *       <NotificationIcon />\n *       <SearchIcon />\n *     </>\n *   }\n * />\n * ```\n *\n * Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n  rollable = true,\n  isActive = true,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n  const [headerHeight, setHeaderHeight] = useState<number>(0);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isActive && rollable,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: isActive && !isUnrolled && rollable,\n  });\n\n  /**\n   * Clears the transient state when the desktop layout takes over. Without it,\n   * a viewport that grows past the breakpoint while the header is scrolled away\n   * — or while the menu is open — restores that state on the way back, and the\n   * user returns to a navbar that is translated off screen.\n   */\n  useEffect(() => {\n    if (isActive) return;\n\n    setIsHidden(false);\n    setIsUnrolled(false);\n  }, [isActive]);\n\n  /**\n   * Measures the collapsed header so the rolled-down panel can size itself to\n   * the rest of the viewport.\n   *\n   * Reading `clientHeight` from the render body forced a layout on every\n   * render, and `useScrollDetection` re-renders this component on each wheel\n   * event — so the measurement ran once per scroll frame. A `ResizeObserver`\n   * callback runs *after* layout, which makes the same read free, and the\n   * height is published only when it actually changed.\n   */\n  useEffect(() => {\n    const headerElement = navRef.current;\n\n    if (!headerElement) return;\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n\n      // Border box, to stay equivalent to the `clientHeight` this replaces:\n      // `contentRect` would drop the header's vertical padding.\n      const measuredHeight =\n        entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\n\n      setHeaderHeight((previousHeight) =>\n        previousHeight === measuredHeight ? previousHeight : measuredHeight\n      );\n    });\n\n    resizeObserver.observe(headerElement);\n\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  const backDivHeight = isHidden ? 0 : headerHeight;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"flex w-full flex-col pt-10 pb-[20%] text-foreground text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-100 items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiDA,MAAM,cAAwB;CAC5B,MAAM,EACJ,YAAY;EAAE,iBAAiB;EAAM,eAAe;CAAI,EAC1D;CACA,QAAQ,EACN,YAAY;EAAE,iBAAiB;EAAM,kBAAkB;CAAG,EAC5D;AACF;;;;;AAMA,MAAM,UACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFF,MAAa,gBAAgD,EAC3D,MACA,aACA,cAAc,CAAC,GACf,gBACA,iBAAiB,CAAC,GAClB,YACA,WAAW,MACX,WAAW,WACe;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAkB,KAAK;CACvD,MAAM,CAAC,YAAY,iBAAiB,SAAkB,KAAK;CAC3D,MAAM,CAAC,cAAc,mBAAmB,SAAiB,CAAC;CAE1D,MAAM,SAAS,OAAuB,IAAI;CAE1C,kBAAkB;EAChB,eAAe,YAAY;EAC3B,KAAK;CACP,CAAC;CAED,mBAAmB;EACjB,kBAAkB,YAAY,KAAK;EACnC,oBAAoB,YAAY,IAAI;EACpC,WAAW,YAAY,CAAC,cAAc;CACxC,CAAC;;;;;;;CAQD,gBAAgB;EACd,IAAI,UAAU;EAEd,YAAY,KAAK;EACjB,cAAc,KAAK;CACrB,GAAG,CAAC,QAAQ,CAAC;;;;;;;;;;;CAYb,gBAAgB;EACd,MAAM,gBAAgB,OAAO;EAE7B,IAAI,CAAC,eAAe;EAEpB,MAAM,iBAAiB,IAAI,gBAAgB,CAAC,WAAW;GACrD,IAAI,CAAC,OAAO;GAIZ,MAAM,iBACJ,MAAM,gBAAgB,EAAE,EAAE,aAAa,MAAM,YAAY;GAE3D,iBAAiB,mBACf,mBAAmB,iBAAiB,iBAAiB,cACvD;EACF,CAAC;EAED,eAAe,QAAQ,aAAa;EAEpC,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,WAAW,IAAI;CAErC,MAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;CAEpE,OACE,qBAAC,OAAD;EACE,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,eACnC;EACA,IAAG;YANL,CAQE,qBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAFP,CAIG,MAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ;IACE,IAEJ,kBACC,oBAAC,QAAD;KACE,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,UAAU;IACzD,EAEA;KACF;MAEL,oBAAC,OAAD;GACE,WAAW,GACT,SACA,kDACF;aAEA,oBAAC,mBAAD;IAAmB,UAAU,CAAC;cAC5B,qBAAC,EAAE,KAAH;KACE,WAAU;KACV,eAAe,cAAc,KAAK;KAClC,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,KACxC;eAPF;MASG;MACD,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,aACA,cACE;;MAEL,oBAAC,OAAD;OAAK,WAAU;iBACZ;MACE;KACA;;GACU;EAChB,EACF;;AAET"}

package/dist/esm/components/Navbar/index.mjs

@@ -4,25 +4,32 @@ import { useDevice } from "../../hooks/useDevice.mjs";
 import { DesktopNavbar } from "./DesktopNavbar.mjs";
 import { Burger } from "./Burger.mjs";
 import { MobileNavbar } from "./MobileNavbar.mjs";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Navbar/index.tsx
 const Navbar = ({ logo, mobileTopChildren, desktopSections = [], mobileTopSections = [], mobileBottomChildren, mobileBottomSections = [], rightItemsDesktop, rightItemsMobile, selectedChoice, mobileRollable = true }) => {
 	const { isMobile } = useDevice("lg");
-	return isMobile ? /* @__PURE__ */ jsx(MobileNavbar, {
-		topChildren: mobileTopChildren,
-		topSections: mobileTopSections,
-		bottomChildren: mobileBottomChildren,
-		bottomSections: mobileBottomSections,
-		logo,
-		rightItems: rightItemsMobile,
-		rollable: mobileRollable
-	}) : /* @__PURE__ */ jsx(DesktopNavbar, {
-		sections: desktopSections,
-		rightItems: rightItemsDesktop,
-		logo,
-		selectedChoice
-	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "contents lg:hidden",
+		children: /* @__PURE__ */ jsx(MobileNavbar, {
+			topChildren: mobileTopChildren,
+			topSections: mobileTopSections,
+			bottomChildren: mobileBottomChildren,
+			bottomSections: mobileBottomSections,
+			logo,
+			rightItems: rightItemsMobile,
+			rollable: mobileRollable,
+			isActive: isMobile === true
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: "hidden lg:contents",
+		children: /* @__PURE__ */ jsx(DesktopNavbar, {
+			sections: desktopSections,
+			rightItems: rightItemsDesktop,
+			logo,
+			selectedChoice
+		})
+	})] });
 };
 
 //#endregion

package/dist/esm/components/Navbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Automatic detection with no flash of unstyled content\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport { Burger } from './Burger';\nexport { DesktopNavbar } from './DesktopNavbar';\nexport { MobileNavbar } from './MobileNavbar';\n\nexport const Navbar = <T extends TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n      rollable={mobileRollable}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AA+FA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,CAAC,GACnB,oBAAoB,CAAC,GACrB,sBACA,uBAAuB,CAAC,GACxB,mBACA,kBACA,gBACA,iBAAiB,WACG;CACpB,MAAM,EAAE,aAAa,UAAU,IAAI;CAEnC,OAAO,WACL,oBAAC,cAAD;EACE,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;CACX,KAED,oBAAC,eAAD;EACE,UAAU;EACV,YAAY;EACN;EACU;CACjB;AAEL"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Both are mounted and CSS picks one, so server-rendered and prerendered\n *   markup paints the right layout with no swap once the bundle hydrates\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport { Burger } from './Burger';\nexport { DesktopNavbar } from './DesktopNavbar';\nexport { MobileNavbar } from './MobileNavbar';\n\nexport const Navbar = <T extends TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\n}: NavbarProps<T>) => {\n  // Only decides which navbar *behaves*, never which one is shown: the media\n  // query cannot resolve before hydration, and picking the layout in JS baked\n  // the desktop navbar into the prerendered HTML — mobile visitors watched it\n  // swap once the bundle arrived. CSS makes the first paint already correct.\n  const { isMobile } = useDevice('lg');\n\n  return (\n    <>\n      {/* `contents` keeps the wrapper out of the layout, so each navbar still\n          sticks and stretches exactly as it did when rendered on its own. */}\n      <div className=\"contents lg:hidden\">\n        <MobileNavbar\n          topChildren={mobileTopChildren}\n          topSections={mobileTopSections}\n          bottomChildren={mobileBottomChildren}\n          bottomSections={mobileBottomSections}\n          logo={logo}\n          rightItems={rightItemsMobile}\n          rollable={mobileRollable}\n          isActive={isMobile === true}\n        />\n      </div>\n      <div className=\"hidden lg:contents\">\n        <DesktopNavbar\n          sections={desktopSections}\n          rightItems={rightItemsDesktop}\n          logo={logo}\n          selectedChoice={selectedChoice}\n        />\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AAgGA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,CAAC,GACnB,oBAAoB,CAAC,GACrB,sBACA,uBAAuB,CAAC,GACxB,mBACA,kBACA,gBACA,iBAAiB,WACG;CAKpB,MAAM,EAAE,aAAa,UAAU,IAAI;CAEnC,OACE,4CAGE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,cAAD;GACE,aAAa;GACb,aAAa;GACb,gBAAgB;GAChB,gBAAgB;GACV;GACN,YAAY;GACZ,UAAU;GACV,UAAU,aAAa;EACxB;CACE,IACL,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,eAAD;GACE,UAAU;GACV,YAAY;GACN;GACU;EACjB;CACE,EACL;AAEN"}

package/dist/esm/components/Pagination/Pagination.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/esm/components/Pattern/GridDistortionPattern.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useTheme } from "../../providers/ThemeProvider.mjs";
 import { cn } from "../../utils/cn.mjs";
+import { useTheme } from "../../providers/ThemeProvider.mjs";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/esm/components/RightDrawer/RightDrawer.mjs

@@ -1,12 +1,12 @@
 'use client';
 
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useIsRightDrawerOpen, useRightDrawerActions } from "./useRightDrawer.mjs";

package/dist/esm/components/Status/index.mjs

@@ -1,6 +1,6 @@
 import { useTheme } from "../../providers/ThemeProvider.mjs";
-import { jsx } from "react/jsx-runtime";
 import cn from "cnfast";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Status/index.tsx
 const Status = ({ className, ...props }) => {

package/dist/esm/components/Tab/Tab.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { TabSelector } from "../TabSelector/TabSelector.mjs";
+import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/TechLogo/logos/HTMX.mjs

@@ -12,11 +12,11 @@ const HTMXLogo = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsxs("g", { children: [
 		/* @__PURE__ */ jsx("polygon", {
-			fill: "#111111",
+			fill: "currentColor",
 			points: "181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689"
 		}),
 		/* @__PURE__ */ jsx("polygon", {
-			fill: "#111111",
+			fill: "currentColor",
 			points: "74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689"
 		}),
 		/* @__PURE__ */ jsx("polygon", {

package/dist/esm/components/TechLogo/logos/HTMX.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HTMX.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/HTMX.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const HTMXLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    width=\"256px\"\n    height=\"168px\"\n    viewBox=\"0 0 256 168\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"HTMX logo\"\n    preserveAspectRatio=\"xMidYMid\"\n    {...props}\n  >\n    <g>\n      <polygon\n        fill=\"#111111\"\n        points=\"181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689\"\n      ></polygon>\n      <polygon\n        fill=\"#111111\"\n        points=\"74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689\"\n      ></polygon>\n      <polygon\n        fill=\"#4065C5\"\n        points=\"144.339858 -1.59458264e-15 170.003907 -1.59458264e-15 112.990192 167.110525 85.996093 167.110525\"\n      ></polygon>\n    </g>\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAa,YAAyC,UACpD,oBAAC,OAAD;CACE,OAAM;CACN,QAAO;CACP,SAAQ;CACR,SAAQ;CACR,OAAM;CACN,cAAW;CACX,qBAAoB;CACpB,GAAI;WAEJ,qBAAC,KAAD;EACE,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;CACT;AACA"}
+{"version":3,"file":"HTMX.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/HTMX.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const HTMXLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    width=\"256px\"\n    height=\"168px\"\n    viewBox=\"0 0 256 168\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"HTMX logo\"\n    preserveAspectRatio=\"xMidYMid\"\n    {...props}\n  >\n    <g>\n      <polygon\n        fill=\"currentColor\"\n        points=\"181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689\"\n      ></polygon>\n      <polygon\n        fill=\"currentColor\"\n        points=\"74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689\"\n      ></polygon>\n      <polygon\n        fill=\"#4065C5\"\n        points=\"144.339858 -1.59458264e-15 170.003907 -1.59458264e-15 112.990192 167.110525 85.996093 167.110525\"\n      ></polygon>\n    </g>\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAa,YAAyC,UACpD,oBAAC,OAAD;CACE,OAAM;CACN,QAAO;CACP,SAAQ;CACR,SAAQ;CACR,OAAM;CACN,cAAW;CACX,qBAAoB;CACpB,GAAI;WAEJ,qBAAC,KAAD;EACE,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;CACT;AACA"}

package/dist/esm/hooks/index.mjs

@@ -1,16 +1,16 @@
-import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
-import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
-import { useScrollY } from "./useScrollY.mjs";
+import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
+import { useItemSelector } from "./useItemSelector.mjs";
 import { usePersistedStore } from "./usePersistedStore.mjs";
+import { useGetElementById } from "./useGetElementById.mjs";
+import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
 import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
-import { useItemSelector } from "./useItemSelector.mjs";
-import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
-import { useSearch } from "./useSearch.mjs";
 import { useIsMounted } from "./useIsMounted.mjs";
-import { useGetElementById } from "./useGetElementById.mjs";
+import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
 import { useScreenWidth } from "./useScreenWidth.mjs";
 import { useScrollBlockage } from "./useScrollBlockage/index.mjs";
 import { useScrollDetection } from "./useScrollDetection.mjs";
+import { useScrollY } from "./useScrollY.mjs";
+import { useSearch } from "./useSearch.mjs";
 import { useStickToBottom } from "./useStickToBottom.mjs";
 
 export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsMounted, useItemSelector, useKeyboardDetector, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useStickToBottom };