@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/dist/react/index.js

@@ -2,9 +2,8 @@
 import {
   ANIMATIONS,
   animate,
-  confetti,
   leave
-} from "../chunk-J6OCFNGU.js";
+} from "../chunk-QP4QJOEN.js";
 import {
   captureLayout,
   createActionButton,
@@ -56,38 +55,117 @@ import {
   pileLayers,
   pileStyle,
   reflowLayout
-} from "../chunk-XAKC2QY7.js";
+} from "../chunk-6IRJYXJU.js";
 import {
   ICON_PATHS,
   NAV_STYLES,
+  NAV_STYLE_ALIASES,
   PENDING_ID,
+  PILL_ARROW,
   capturePending,
   clearToasts,
+  createBidirectionalSlider,
   createChat,
-  createChatBackground,
   createCursor,
+  createHeatmapChart,
   createIsland,
-  createSteps,
+  createOrbitMenu,
+  createPieChart,
+  createPillButton,
+  createRadarChart,
+  createRadialChart,
+  createSankeyChart,
   createThemePicker,
   createToaster,
+  createToolbar,
+  createVoiceDots,
   dismissToast,
   morphPendingToReply,
   revealShell,
+  toNavStyle,
   toast
-} from "../chunk-IKQ5FODN.js";
+} from "../chunk-JXRS3OEA.js";
 import {
+  confetti,
+  createActivityFeed,
+  createAddToCart,
+  createAttachment,
+  createBreadcrumb,
   createCalendar,
+  createChart,
+  createChartTooltip,
+  createChatBackground,
+  createCodeBlock,
+  createColorArea,
+  createColorField,
+  createColorPicker,
+  createColorSlider,
+  createCommandSearch,
+  createContextMenu,
+  createCreditCard,
+  createDataTable,
+  createDateRangePicker,
+  createDateTimePicker,
   createDialog,
+  createDrawer,
+  createEditableTable,
+  createEmptyState,
+  createFileExplorer,
+  createFilterBuilder,
+  createHoldConfirm,
   createHoverCard,
+  createImagePreview,
   createInputOtp,
+  createJsonViewer,
+  createLikeButton,
+  createLoadingButton,
   createMenu,
+  createMultiSelect,
+  createNotificationBell,
   createPagination,
+  createPasswordStrength,
+  createPopover,
+  createProgress,
   createQuantity,
+  createQuestionnaire,
+  createRangeCalendar,
+  createRangeSlider,
+  createResizablePanel,
+  createRichTextEditor,
+  createScratchCard,
+  createScrollIsland,
+  createSelect,
+  createSkeleton,
   createSlotPicker,
+  createSplitView,
+  createStarRating,
+  createStatCard,
+  createSteps,
   createStudioDock,
+  createSwipeActions,
+  createTagInput,
+  createTimeField,
+  createTimeline,
+  createTooltip,
   createTrailer,
+  createTreeView,
+  createVirtualList,
+  dateTimeKey,
+  flowLines,
+  languageFamily,
+  linkDomain,
+  rangeKeys,
+  safeHref,
+  safeImage,
+  skeletonBones,
+  toDateTimeValue,
+  toHex,
+  toHsva,
+  toRange,
+  tokenLines,
+  tokenize,
   tweenNumber
-} from "../chunk-TFNRIZHU.js";
+} from "../chunk-A6QQCF6V.js";
 import {
   DEFAULT_THEME,
   MK_THEME_HEAD_SCRIPT,
@@ -725,7 +803,7 @@ function Nav({
   items,
   active,
   onSelect,
-  navStyle = "bonita",
+  navStyle = "pills",
   accent = false,
   reveal = false,
   first,
@@ -739,7 +817,7 @@ function Nav({
     const handle = revealShell(ref.current);
     return () => handle?.cancel();
   }, []);
-  const classes = ["mk-nav", `mk-nav--${navStyle}`, accent && "mk-nav--accent", className].filter(Boolean).join(" ");
+  const classes = ["mk-nav", `mk-nav--${toNavStyle(navStyle) ?? "pills"}`, accent && "mk-nav--accent", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs3("nav", { ref, "aria-label": "Principal", ...props, className: classes, children: [
     first,
     /* @__PURE__ */ jsx11("div", { className: "mk-nav__buttons", children: items.map((item) => {
@@ -1214,36 +1292,2292 @@ var useScrollDock = (ref, options, deps) => useRecipe(ref, createScrollDock, opt
 
 // src/react/use-local-clock.ts
 var useLocalClock = (ref, options, deps) => useRecipe(ref, createLocalClock, options, deps);
+
+// src/components/attachment/react.tsx
+import { useRef as useRef22 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function Attachment({ accept, multiple, maxFiles, maxSize, disabled, name, initialFiles, hint, labels, onFiles, onRemove, onReject, uploads, instanceRef, className, ...props }) {
+  const ref = useRef22(null);
+  const instance = useRef22(null);
+  const kept = useRef22(void 0);
+  const files = useLatest(onFiles);
+  const removed = useLatest(onRemove);
+  const rejected = useLatest(onReject);
+  const latestUploads = useLatest(uploads);
+  const seed = useLatest(initialFiles);
+  const labelKey = JSON.stringify(labels ?? {});
+  useIsomorphicLayoutEffect(() => {
+    const created = createAttachment(ref.current, {
+      accept,
+      multiple,
+      maxFiles,
+      maxSize,
+      disabled,
+      name,
+      hint,
+      labels,
+      initialFiles: kept.current ?? seed.current,
+      onFiles: (added, all) => files.current?.(added, all),
+      onRemove: (file, all) => removed.current?.(file, all),
+      onReject: (list) => rejected.current?.(list)
+    });
+    for (const [id, upload] of Object.entries(latestUploads.current ?? {})) created.setProgress(id, upload.progress, upload.status);
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      kept.current = created.files;
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [accept, multiple, maxFiles, maxSize, disabled, name, hint, labelKey]);
+  const uploadKey = JSON.stringify(uploads ?? {});
+  useIsomorphicLayoutEffect(() => {
+    for (const [id, upload] of Object.entries(uploads ?? {})) instance.current?.setProgress(id, upload.progress, upload.status);
+  }, [uploadKey]);
+  return /* @__PURE__ */ jsx24("div", { ...props, ref, className: ["mk-attachment", className].filter(Boolean).join(" ") });
+}
+
+// src/components/skeleton/react.tsx
+import { useRef as useRef23 } from "react";
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+function Skeleton({ loading = true, animation, shape = "text", lines, label, placeholder, children, className, ...props }) {
+  const ref = useRef23(null);
+  const instance = useRef23(null);
+  const current = useRef23(loading);
+  current.current = loading;
+  useIsomorphicLayoutEffect(() => {
+    const created = createSkeleton(ref.current, { loading: current.current, animation, shape, lines, label });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [animation, shape, lines, label]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setLoading(loading);
+  }, [loading]);
+  return /* @__PURE__ */ jsxs12("div", { ...props, ref, className: ["mk-skeleton", className].filter(Boolean).join(" "), "data-mk-ssr-loading": loading ? "" : void 0, children: [
+    /* @__PURE__ */ jsx25("div", { "data-mk-skeleton-placeholder": "", "data-mk-shape": shape, children: placeholder ?? skeletonBones(shape, lines).map((bone, i) => /* @__PURE__ */ jsx25("span", { "data-mk-bone": bone }, i)) }),
+    /* @__PURE__ */ jsx25("div", { "data-mk-skeleton-content": "", children })
+  ] });
+}
+
+// src/components/questionnaire/react.tsx
+import { useRef as useRef24, useState as useState5 } from "react";
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+var optionOf = (option) => typeof option === "string" ? { value: option, label: option } : option;
+function Questionnaire({ questions, defaultAnswers = {}, labels = {}, onChange, onComplete, complete, instanceRef, className, ...props }) {
+  const ref = useRef24(null);
+  const [answers, setAnswers] = useState5(null);
+  const change = useLatest(onChange);
+  const completed = useLatest(onComplete);
+  const key = JSON.stringify(questions.map(({ id, type, required: required2, options }) => [id, type, required2, options]));
+  const { required, choice } = labels;
+  useIsomorphicLayoutEffect(() => {
+    const created = createQuestionnaire(ref.current, {
+      labels: { required, choice },
+      onChange: (index, current) => change.current?.(index, current),
+      onComplete: (current) => {
+        setAnswers(current);
+        completed.current?.(current);
+      }
+    });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [key, required, choice]);
+  const count = questions.length;
+  const defaults = (id) => defaultAnswers[id];
+  return /* @__PURE__ */ jsxs13("form", { ...props, ref, noValidate: true, className: ["mk-questionnaire", className].filter(Boolean).join(" "), onReset: () => setAnswers(null), children: [
+    /* @__PURE__ */ jsx26("div", { "data-mk-question-progress": "", "aria-hidden": "true", children: /* @__PURE__ */ jsx26("span", { "data-mk-question-bar": "" }) }),
+    questions.map((question, i) => {
+      const titleId = `${question.id}-title`;
+      const describedBy = question.description ? `${question.id}-description` : void 0;
+      const value = defaults(question.id);
+      return /* @__PURE__ */ jsxs13("section", { "data-mk-question": "", "data-mk-step": "", hidden: i !== 0, "aria-labelledby": titleId, children: [
+        /* @__PURE__ */ jsx26("p", { "data-mk-question-step": "", children: labels.step ? labels.step(i, count) : `Pregunta ${i + 1} de ${count}` }),
+        /* @__PURE__ */ jsxs13("h3", { id: titleId, "data-mk-step-title": "", "data-mk-flow-item": "", children: [
+          question.label,
+          question.required ? /* @__PURE__ */ jsx26("span", { "data-mk-question-required": "", "aria-hidden": "true", children: " *" }) : null
+        ] }),
+        question.description && /* @__PURE__ */ jsx26("p", { id: describedBy, "data-mk-question-description": "", "data-mk-flow-item": "", children: question.description }),
+        /* @__PURE__ */ jsxs13("div", { "data-mk-question-field": "", "data-mk-flow-item": "", children: [
+          question.type === "text" && /* @__PURE__ */ jsx26("input", { name: question.id, type: "text", required: question.required, "aria-labelledby": titleId, "aria-describedby": describedBy, placeholder: question.placeholder, defaultValue: typeof value === "string" ? value : "" }),
+          question.type === "textarea" && /* @__PURE__ */ jsx26("textarea", { name: question.id, rows: 4, required: question.required, "aria-labelledby": titleId, "aria-describedby": describedBy, placeholder: question.placeholder, defaultValue: typeof value === "string" ? value : "" }),
+          (question.type === "single" || question.type === "multiple") && /* @__PURE__ */ jsx26("div", { role: question.type === "single" ? "radiogroup" : "group", "aria-labelledby": titleId, "aria-describedby": describedBy, "data-mk-question-options": "", children: (question.options ?? []).map(optionOf).map((option) => /* @__PURE__ */ jsxs13("label", { "data-mk-question-option": "", children: [
+            /* @__PURE__ */ jsx26(
+              "input",
+              {
+                type: question.type === "single" ? "radio" : "checkbox",
+                name: question.id,
+                value: option.value,
+                required: question.required,
+                defaultChecked: Array.isArray(value) ? value.includes(option.value) : value === option.value
+              }
+            ),
+            /* @__PURE__ */ jsx26("span", { children: option.label })
+          ] }, option.value)) })
+        ] }),
+        /* @__PURE__ */ jsxs13("div", { "data-mk-question-actions": "", "data-mk-flow-item": "", children: [
+          i > 0 && /* @__PURE__ */ jsx26("button", { type: "button", className: "mk-button mk-button--text", "data-mk-question-prev": "", children: labels.prev ?? "Anterior" }),
+          i < count - 1 ? /* @__PURE__ */ jsx26("button", { type: "button", className: "mk-button", "data-mk-question-next": "", children: labels.next ?? "Siguiente" }) : /* @__PURE__ */ jsx26("button", { type: "submit", className: "mk-button", children: labels.finish ?? "Finalizar" })
+        ] })
+      ] }, question.id);
+    }),
+    /* @__PURE__ */ jsx26("p", { "data-mk-question-error": "", role: "alert" }),
+    /* @__PURE__ */ jsxs13("div", { "data-mk-question-complete": "", hidden: true, children: [
+      answers && (typeof complete === "function" ? complete(answers) : complete),
+      /* @__PURE__ */ jsx26("button", { type: "reset", className: "mk-button mk-button--tonal", children: labels.restart ?? "Empezar de nuevo" })
+    ] })
+  ] });
+}
+
+// src/components/code-block/react.tsx
+import { Fragment as Fragment3, useMemo as useMemo3, useRef as useRef25 } from "react";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+function CodeBlock({ code, language, title, lineNumbers, highlight, highlightLines, copyLabel = "Copiar", copiedLabel, errorLabel, onCopy, className, ...props }) {
+  const ref = useRef25(null);
+  const instance = useRef25(null);
+  const copied = useLatest(onCopy);
+  const latest = useLatest(code);
+  useIsomorphicLayoutEffect(() => {
+    const created = createCodeBlock(ref.current, { copyLabel, copiedLabel, errorLabel, onCopy: (ok) => copied.current?.(ok) });
+    created.setCode(latest.current);
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [copyLabel, copiedLabel, errorLabel]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setCode(code);
+  }, [code]);
+  const first = useRef25(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    const animation = flowLines(ref.current?.querySelector("code") ?? null);
+    return () => {
+      animation?.progress(1).kill();
+    };
+  }, [code, language]);
+  const colour = highlight ?? languageFamily(language) !== "plain";
+  const lines = useMemo3(() => tokenLines(tokenize(code, colour ? language : void 0)), [code, language, colour]);
+  const trailing = lines.length > 1 && !lines[lines.length - 1].length;
+  const shown = trailing ? lines.slice(0, -1) : lines;
+  const marked = new Set(highlightLines ?? []);
+  return /* @__PURE__ */ jsxs14("div", { ...props, ref, className: ["mk-code-block", className].filter(Boolean).join(" "), "data-mk-language": language, "data-mk-line-numbers": lineNumbers ? "" : void 0, children: [
+    /* @__PURE__ */ jsxs14("div", { "data-mk-code-header": "", children: [
+      /* @__PURE__ */ jsxs14("span", { "data-mk-code-dots": "", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx27("i", {}),
+        /* @__PURE__ */ jsx27("i", {}),
+        /* @__PURE__ */ jsx27("i", {})
+      ] }),
+      /* @__PURE__ */ jsx27("span", { "data-mk-code-title": "", children: title }),
+      language && /* @__PURE__ */ jsx27("span", { "data-mk-code-language": "", children: language }),
+      /* @__PURE__ */ jsxs14("button", { type: "button", "data-mk-code-copy": "", children: [
+        /* @__PURE__ */ jsxs14("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx27("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2.5" }),
+          /* @__PURE__ */ jsx27("path", { d: "M5 15V6a2 2 0 0 1 2-2h8" })
+        ] }),
+        /* @__PURE__ */ jsx27("span", { "data-mk-code-copy-text": "", children: copyLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx27("pre", { tabIndex: 0, children: /* @__PURE__ */ jsxs14("code", { children: [
+      shown.map((line, i) => /* @__PURE__ */ jsxs14(Fragment3, { children: [
+        i ? "\n" : null,
+        /* @__PURE__ */ jsx27("span", { "data-mk-code-line": "", "data-mk-highlight": marked.has(i + 1) ? "" : void 0, children: line.map(
+          (token, k) => token.type === "plain" ? /* @__PURE__ */ jsx27(Fragment3, { children: token.text }, k) : /* @__PURE__ */ jsx27("span", { "data-mk-token": token.type, children: token.text }, k)
+        ) })
+      ] }, i)),
+      trailing ? "\n" : null
+    ] }) }),
+    /* @__PURE__ */ jsx27("span", { "data-mk-code-status": "", className: "mk-sr-only", role: "status" })
+  ] });
+}
+
+// src/components/context-menu/react.tsx
+import { useRef as useRef26 } from "react";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+function Root5({ menu, label = "Acciones", onSelect, onOpenChange, closeOnSelect = true, overrideEditable, longPress, variant, instanceRef, className, children, ...props }) {
+  const ref = useRef26(null);
+  const select = useLatest(onSelect);
+  const change = useLatest(onOpenChange);
+  useIsomorphicLayoutEffect(() => {
+    const created = createContextMenu(ref.current, {
+      closeOnSelect,
+      overrideEditable,
+      longPress,
+      variant,
+      onSelect: (value, item) => select.current?.(value, item),
+      onOpenChange: (open) => change.current?.(open)
+    });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [closeOnSelect, overrideEditable, longPress, variant]);
+  return /* @__PURE__ */ jsxs15("div", { ...props, ref, className: ["mk-context-menu", className].filter(Boolean).join(" "), "data-mk-context-trigger": "", children: [
+    children,
+    /* @__PURE__ */ jsx28("dialog", { "data-mk-context-menu": "", className: "mk-dialog mk-menu", "aria-label": label, children: menu })
+  ] });
+}
+var ContextMenu = Object.assign(Root5, { Item: Menu.Item, Separator: Menu.Separator });
+
+// src/components/drawer/react.tsx
+import { createContext as createContext6, useContext as useContext6, useMemo as useMemo4 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var DrawerContext = createContext6(null);
+function useDrawerContext(part) {
+  const value = useContext6(DrawerContext);
+  if (!value) throw new Error(`<Drawer.${part}> must be inside <Drawer.Root>`);
+  return value;
+}
+function Root6({ side = "right", children, ...props }) {
+  const surface = useSurfaceRoot(props);
+  return /* @__PURE__ */ jsx29(DrawerContext.Provider, { value: { ...surface, side }, children });
+}
+function Trigger3({ onClick, children, ...props }) {
+  const context = useDrawerContext("Trigger");
+  return /* @__PURE__ */ jsx29(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        context.origin.current = event.currentTarget;
+        context.setOpen(!context.open);
+      },
+      children
+    }
+  );
+}
+function Content3({ className, children, ...props }) {
+  const context = useDrawerContext("Content");
+  const options = useMemo4(() => ({ ...context.options, side: context.side }), [context.options, context.side]);
+  const ref = useSurfaceEngine({ ...context, options }, (dialog, engineOptions) => createDrawer(dialog, engineOptions));
+  return /* @__PURE__ */ jsx29("dialog", { ref, className: ["mk-dialog mk-drawer", className].filter(Boolean).join(" "), ...props, children });
+}
+var Drawer = {
+  Root: Root6,
+  Trigger: Trigger3,
+  Content: Content3,
+  Header: Dialog.Header,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+  Actions: Dialog.Actions,
+  Body: Dialog.Body,
+  Footer: Dialog.Footer,
+  Close: Dialog.Close
+};
+function useDrawer() {
+  const context = useDrawerContext("useDrawer");
+  return { open: context.open, setOpen: context.setOpen, side: context.side, instance: context.instance };
+}
+
+// src/components/link-preview/react.tsx
+import { useEffect as useEffect3, useId, useRef as useRef27, useState as useState6 } from "react";
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+function Card({ url, title, description, image, imageAlt, siteName, target }) {
+  const id = useId();
+  const href = safeHref(url);
+  const domain = linkDomain(href);
+  const source = safeImage(image);
+  const [failed, setFailed] = useState6(false);
+  useEffect3(() => setFailed(false), [source]);
+  const site = [siteName, domain].filter(Boolean).filter((value, i, all) => all.indexOf(value) === i).join(" \xB7 ");
+  const content = /* @__PURE__ */ jsxs16(Fragment4, { children: [
+    /* @__PURE__ */ jsxs16("span", { "data-mk-part": "media", children: [
+      /* @__PURE__ */ jsx30("span", { "data-mk-part": "fallback", "aria-hidden": "true", children: (siteName || domain || title || "?").trim().charAt(0).toUpperCase() }),
+      source && !failed ? /* @__PURE__ */ jsx30("img", { "data-mk-link-image": "", src: source, alt: imageAlt ?? "", loading: "lazy", decoding: "async", onError: () => setFailed(true) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs16("span", { "data-mk-part": "text", children: [
+      site && /* @__PURE__ */ jsxs16("span", { "data-mk-part": "meta", children: [
+        /* @__PURE__ */ jsx30("span", { "data-mk-part": "favicon", "aria-hidden": "true", children: (siteName || domain).trim().charAt(0).toUpperCase() }),
+        /* @__PURE__ */ jsx30("span", { "data-mk-part": "site", children: site })
+      ] }),
+      /* @__PURE__ */ jsx30("span", { "data-mk-part": "title", id: `${id}-title`, children: title || domain || href }),
+      description && /* @__PURE__ */ jsx30("span", { "data-mk-part": "description", id: `${id}-description`, children: description })
+    ] }),
+    /* @__PURE__ */ jsx30("span", { "data-mk-part": "go", "aria-hidden": "true", children: /* @__PURE__ */ jsx30("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx30("path", { d: "M7 17L17 7M9 7h8v8" }) }) })
+  ] });
+  const labelled = { "aria-labelledby": `${id}-title`, "aria-describedby": description ? `${id}-description` : void 0 };
+  return href ? /* @__PURE__ */ jsx30("a", { "data-mk-link-card": "", href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, ...labelled, children: content }) : /* @__PURE__ */ jsx30("span", { "data-mk-link-card": "", ...labelled, children: content });
+}
+function LinkPreview({ url, title, description, image, imageAlt, siteName, variant = "card", label, target, openDelay, closeDelay, placement, onOpenChange, className, ...props }) {
+  const ref = useRef27(null);
+  const change = useLatest(onOpenChange);
+  const href = safeHref(url);
+  const hover = variant === "hover";
+  useIsomorphicLayoutEffect(() => {
+    if (!hover) return;
+    const instance = createHoverCard(ref.current, { openDelay, closeDelay, placement, onOpenChange: (open) => change.current?.(open) });
+    return () => instance.destroy();
+  }, [hover, openDelay, closeDelay, placement]);
+  const card = /* @__PURE__ */ jsx30(Card, { url, title, description, image, imageAlt, siteName, target });
+  if (!hover) {
+    return /* @__PURE__ */ jsx30("div", { ...props, className: ["mk-link-preview", className].filter(Boolean).join(" "), "data-mk-link-variant": variant === "row" ? "row" : "card", children: card });
+  }
+  const text = label || title || linkDomain(href) || href;
+  return /* @__PURE__ */ jsxs16("span", { ...props, ref, className: ["mk-link-preview mk-hover-card", className].filter(Boolean).join(" "), "data-mk-link-variant": "hover", children: [
+    href ? /* @__PURE__ */ jsx30("a", { "data-mk-hover-trigger": "", href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, children: text }) : /* @__PURE__ */ jsx30("span", { "data-mk-hover-trigger": "", tabIndex: 0, children: text }),
+    /* @__PURE__ */ jsx30("span", { "data-mk-hover-panel": "", role: "region", "aria-label": `Vista previa: ${title || linkDomain(href)}`, hidden: true, children: card })
+  ] });
+}
+
+// src/components/progress/react.tsx
+import { useRef as useRef28 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function Progress({ value, min, max, label, variant, showValue, formatValue, className, ...props }) {
+  const ref = useRef28(null);
+  const instance = useRef28(null);
+  const current = useLatest(value);
+  const format = useLatest(formatValue);
+  const formatted = formatValue !== void 0;
+  useIsomorphicLayoutEffect(() => {
+    const created = createProgress(ref.current, {
+      value: current.current,
+      min,
+      max,
+      label,
+      variant,
+      showValue,
+      formatValue: formatted ? (n, ratio) => format.current?.(n, ratio) ?? "" : void 0
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [min, max, label, variant, showValue, formatted]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setValue(value === void 0 ? min ?? 0 : value);
+  }, [value]);
+  return /* @__PURE__ */ jsx31("div", { ...props, ref, className: ["mk-progress", className].filter(Boolean).join(" ") });
+}
+
+// src/components/range-slider/react.tsx
+import { useRef as useRef29 } from "react";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+function RangeSlider({ min, max, step, value, defaultValue, disabled, name, label, formatValue, onInput, onChange, showOutput = true, className, ...props }) {
+  const ref = useRef29(null);
+  const instance = useRef29(null);
+  const edited = useRef29(void 0);
+  const input = useLatest(onInput);
+  const change = useLatest(onChange);
+  const format = useLatest(formatValue);
+  const formatted = formatValue !== void 0;
+  const start = value ?? defaultValue;
+  const count = Array.isArray(start) ? 2 : 1;
+  const current = useLatest(value);
+  useIsomorphicLayoutEffect(() => {
+    const created = createRangeSlider(ref.current, {
+      min,
+      max,
+      step,
+      disabled,
+      name,
+      label,
+      value: current.current ?? edited.current ?? start,
+      formatValue: formatted ? (n) => format.current?.(n) ?? String(n) : void 0,
+      onInput: (next) => input.current?.(next),
+      onChange: (next) => change.current?.(next)
+    });
+    instance.current = created;
+    return () => {
+      edited.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [min, max, step, disabled, name, label, formatted, count]);
+  const valueKey = JSON.stringify(value);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) instance.current?.setValue(value, false);
+  }, [valueKey]);
+  const initial = Array.isArray(start) ? start : [start ?? min ?? 0];
+  return /* @__PURE__ */ jsxs17("div", { ...props, ref, className: ["mk-range-slider", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx32("div", { "data-mk-range-track": "", children: initial.map((n, i) => /* @__PURE__ */ jsx32("input", { type: "range", "data-mk-range-input": "", defaultValue: n }, i)) }),
+    showOutput && /* @__PURE__ */ jsx32("output", { "data-mk-range-output": "" })
+  ] });
+}
+
+// src/components/chart/react.tsx
+import { useRef as useRef30 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+function Chart({ type, labels, series, points, stacked, formatValue, label, height, emptyLabel, legend, tooltip, axis, endLabel, onSelect, instanceRef, className, ...props }) {
+  const ref = useRef30(null);
+  const instance = useRef30(null);
+  const format = useLatest(formatValue);
+  const select = useLatest(onSelect);
+  const formatted = formatValue !== void 0;
+  const data = { type, labels, series, points, stacked, label, height, emptyLabel, legend, tooltip, axis, endLabel };
+  const key = JSON.stringify(data);
+  const latest = useLatest(data);
+  const options = () => ({
+    ...latest.current,
+    formatValue: formatted ? (value) => format.current?.(value) ?? String(value) : void 0,
+    onSelect: (index) => select.current?.(index)
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createChart(ref.current, options());
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, []);
+  const first = useRef30(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+  }, [key, formatted]);
+  return /* @__PURE__ */ jsx33("div", { ...props, ref, className: ["mk-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/credit-card/react.tsx
+import { useRef as useRef31 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+function CreditCard({ labels, names, tilt, onChange, onComplete, instanceRef, className, ...props }) {
+  const ref = useRef31(null);
+  const change = useLatest(onChange);
+  const complete = useLatest(onComplete);
+  const key = JSON.stringify([labels ?? {}, names ?? {}]);
+  useIsomorphicLayoutEffect(() => {
+    const created = createCreditCard(ref.current, {
+      labels,
+      names,
+      tilt,
+      onChange: (state) => change.current?.(state),
+      onComplete: () => complete.current?.()
+    });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [key, tilt]);
+  return /* @__PURE__ */ jsx34("div", { ...props, ref, className: ["mk-credit-card", className].filter(Boolean).join(" ") });
+}
+
+// src/components/command-search/react.tsx
+import { useRef as useRef32 } from "react";
+import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+function CommandSearch({ items, placeholder, emptyLabel, label, shortcut, limit, trigger, onSelect, onOpenChange, instanceRef, className, ...props }) {
+  const ref = useRef32(null);
+  const instance = useRef32(null);
+  const select = useLatest(onSelect);
+  const change = useLatest(onOpenChange);
+  const latest = useLatest(items);
+  useIsomorphicLayoutEffect(() => {
+    const created = createCommandSearch(ref.current, {
+      items: latest.current,
+      placeholder,
+      emptyLabel,
+      label,
+      shortcut,
+      limit,
+      onSelect: (item) => select.current?.(item),
+      onOpenChange: (open) => change.current?.(open)
+    });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [placeholder, emptyLabel, label, shortcut, limit]);
+  const key = JSON.stringify(items);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setItems(latest.current);
+  }, [key]);
+  return /* @__PURE__ */ jsx35("span", { ...props, ref, className: ["mk-command-search", className].filter(Boolean).join(" "), children: trigger === null ? null : /* @__PURE__ */ jsx35("button", { type: "button", "data-mk-command-open": "", "aria-haspopup": "dialog", children: trigger ?? /* @__PURE__ */ jsxs18(Fragment5, { children: [
+    /* @__PURE__ */ jsx35("span", { children: "Buscar\u2026" }),
+    /* @__PURE__ */ jsx35("kbd", { "aria-hidden": "true", children: "\u2318K" })
+  ] }) }) });
+}
+
+// src/components/hold-confirm/react.tsx
+import { useRef as useRef33 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+function HoldConfirm({ duration, resetAfter, holdingLabel, doneLabel, hint, disabled, onConfirm, className, children, ...props }) {
+  const ref = useRef33(null);
+  const confirm = useLatest(onConfirm);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createHoldConfirm(ref.current, { duration, resetAfter, holdingLabel, doneLabel, hint, disabled, onConfirm: () => confirm.current?.() });
+    return () => instance.destroy();
+  }, [duration, resetAfter, holdingLabel, doneLabel, hint, disabled]);
+  return /* @__PURE__ */ jsx36("span", { ref, className: ["mk-hold-confirm", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx36("button", { type: "button", ...props, children: /* @__PURE__ */ jsx36("span", { "data-mk-hold-text": "", children }) }) });
+}
+
+// src/components/image-preview/react.tsx
+import { useRef as useRef34 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+function ImagePreview({ images, labels, loop, strip, onChange, onOpenChange, instanceRef, className, ...props }) {
+  const ref = useRef34(null);
+  const change = useLatest(onChange);
+  const openChange = useLatest(onOpenChange);
+  const key = JSON.stringify(labels ?? {});
+  useIsomorphicLayoutEffect(() => {
+    const created = createImagePreview(ref.current, { labels, loop, strip, onChange: (i) => change.current?.(i), onOpenChange: (open) => openChange.current?.(open) });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [key, loop, strip]);
+  return /* @__PURE__ */ jsx37("div", { ...props, ref, className: ["mk-image-preview", className].filter(Boolean).join(" "), children: images.map((image, i) => /* @__PURE__ */ jsx37("button", { type: "button", "data-mk-image": "", "data-mk-src": image.src, "data-mk-caption": image.caption, "aria-label": `Ver ${image.alt}`, children: /* @__PURE__ */ jsx37("img", { src: image.thumb ?? image.src, alt: image.alt, loading: "lazy", decoding: "async" }) }, `${image.src}-${i}`)) });
+}
+
+// src/components/like-button/react.tsx
+import { useRef as useRef35 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+function LikeButton({ liked, defaultLiked, count = 0, label, hideCount, onChange, className, ...props }) {
+  const ref = useRef35(null);
+  const instance = useRef35(null);
+  const change = useLatest(onChange);
+  const start = useRef35({ liked: liked ?? defaultLiked ?? false, count });
+  useIsomorphicLayoutEffect(() => {
+    const created = createLikeButton(ref.current, { ...start.current, label, hideCount, onChange: (next, total) => change.current?.(next, total) });
+    instance.current = created;
+    return () => {
+      start.current = { liked: created.liked, count: created.count };
+      created.destroy();
+      instance.current = null;
+    };
+  }, [label, hideCount]);
+  useIsomorphicLayoutEffect(() => {
+    if (liked !== void 0 && instance.current && instance.current.liked !== liked) instance.current.setLiked(liked, false);
+  }, [liked]);
+  useIsomorphicLayoutEffect(() => {
+    if (instance.current && instance.current.count !== count) instance.current.setCount(count);
+  }, [count]);
+  return /* @__PURE__ */ jsx38("button", { type: "button", ...props, ref, className: ["mk-like-button", className].filter(Boolean).join(" ") });
+}
+
+// src/components/notification-bell/react.tsx
+import { useRef as useRef36 } from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+function NotificationBell({ count = 0, message, label, messageDuration, max, onOpen, instanceRef, className, ...props }) {
+  const ref = useRef36(null);
+  const instance = useRef36(null);
+  const open = useLatest(onOpen);
+  const initial = useRef36(count);
+  useIsomorphicLayoutEffect(() => {
+    const created = createNotificationBell(ref.current, { count: initial.current, label, messageDuration, max, onOpen: () => open.current?.() });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      initial.current = created.count;
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [label, messageDuration, max]);
+  const seen = useRef36({ count, message });
+  useIsomorphicLayoutEffect(() => {
+    const bell = instance.current;
+    if (!bell) return;
+    const before = seen.current;
+    seen.current = { count, message };
+    const fresh = message !== void 0 && message !== before.message;
+    if (count > bell.count) {
+      bell.setCount(count - 1);
+      bell.notify(fresh ? message : void 0);
+    } else {
+      bell.setCount(count);
+      if (fresh && message) bell.notify(message);
+    }
+  }, [count, message]);
+  return /* @__PURE__ */ jsx39("span", { ref, className: ["mk-notification-bell", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx39("button", { type: "button", ...props }) });
+}
+
+// src/components/password-strength/react.tsx
+import { useRef as useRef37 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+function PasswordStrength({ minLength, score, requireScore, labels, onStrength, onValueChange, className, ...props }) {
+  const ref = useRef37(null);
+  const strength = useLatest(onStrength);
+  const value = useLatest(onValueChange);
+  const scorer = useLatest(score);
+  const custom = score !== void 0;
+  const key = JSON.stringify(labels ?? {});
+  useIsomorphicLayoutEffect(() => {
+    const instance = createPasswordStrength(ref.current, {
+      minLength,
+      requireScore,
+      labels,
+      score: custom ? (text) => scorer.current(text) : void 0,
+      onChange: (result) => strength.current?.(result)
+    });
+    return () => instance.destroy();
+  }, [minLength, requireScore, key, custom]);
+  return /* @__PURE__ */ jsx40("div", { ref, className: ["mk-password-strength", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx40("input", { autoComplete: "new-password", "aria-label": "Contrase\xF1a", ...props, type: "password", onInput: (event) => value.current?.(event.currentTarget.value) }) });
+}
+
+// src/components/scratch-card/react.tsx
+import { useRef as useRef38 } from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+function ScratchCard({ threshold, brush, coverLabel, revealLabel, revealedLabel, celebrate, onProgress, onReveal, instanceRef, className, children, ...props }) {
+  const ref = useRef38(null);
+  const progress = useLatest(onProgress);
+  const reveal = useLatest(onReveal);
+  useIsomorphicLayoutEffect(() => {
+    const created = createScratchCard(ref.current, {
+      threshold,
+      brush,
+      coverLabel,
+      revealLabel,
+      revealedLabel,
+      celebrate,
+      onProgress: (value) => progress.current?.(value),
+      onReveal: () => reveal.current?.()
+    });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [threshold, brush, coverLabel, revealLabel, revealedLabel, celebrate]);
+  return /* @__PURE__ */ jsx41("div", { ...props, ref, className: ["mk-scratch-card", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx41("div", { "data-mk-scratch-content": "", children }) });
+}
+
+// src/components/star-rating/react.tsx
+import { useRef as useRef39 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+function StarRating({ value, defaultValue, max, name, label, labels, readonly, allowClear, disabled, onChange, className, ...props }) {
+  const ref = useRef39(null);
+  const instance = useRef39(null);
+  const change = useLatest(onChange);
+  const start = useRef39(value ?? defaultValue ?? 0);
+  const key = JSON.stringify(labels ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createStarRating(ref.current, { value: value ?? start.current, max, name, label, labels, readonly, allowClear, disabled, onChange: (next) => change.current?.(next) });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [max, name, label, key, readonly, allowClear, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== value) instance.current.setValue(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx42("div", { ...props, ref, className: ["mk-star-rating", className].filter(Boolean).join(" ") });
+}
+
+// src/components/swipe-actions/react.tsx
+import { useRef as useRef40 } from "react";
+import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
+function Actions({ side, actions }) {
+  return /* @__PURE__ */ jsx43("div", { "data-mk-swipe-actions": side, children: actions.map((action) => /* @__PURE__ */ jsx43(
+    "button",
+    {
+      type: "button",
+      "data-mk-swipe-action": action.id,
+      "data-mk-tone": action.tone,
+      "data-mk-swipe-remove": action.remove ? "" : void 0,
+      "data-mk-swipe-primary": action.primary ? "" : void 0,
+      "aria-label": action.label,
+      children: action.icon ?? action.label
+    },
+    action.id
+  )) });
+}
+function Row({ left, right, children, ...props }) {
+  return /* @__PURE__ */ jsxs19("li", { ...props, "data-mk-swipe-row": "", children: [
+    left?.length ? /* @__PURE__ */ jsx43(Actions, { side: "left", actions: left }) : null,
+    /* @__PURE__ */ jsx43("div", { "data-mk-swipe-content": "", children }),
+    right?.length ? /* @__PURE__ */ jsx43(Actions, { side: "right", actions: right }) : null
+  ] });
+}
+function Root7({ fullSwipe, onAction, className, children, ...props }) {
+  const ref = useRef40(null);
+  const action = useLatest(onAction);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createSwipeActions(ref.current, { fullSwipe, onAction: (id, row) => action.current?.(id, row) });
+    return () => instance.destroy();
+  }, [fullSwipe]);
+  return /* @__PURE__ */ jsx43("ul", { ...props, ref, className: ["mk-swipe-actions", className].filter(Boolean).join(" "), children });
+}
+var SwipeActions = Object.assign(Root7, { Row });
+
+// src/components/color-slider/react.tsx
+import { useRef as useRef41 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+function ColorSlider({ value, defaultValue, channel, label, orientation, step, showValue, name, disabled, onInput, onChange, className, ...props }) {
+  const ref = useRef41(null);
+  const instance = useRef41(null);
+  const input = useLatest(onInput);
+  const change = useLatest(onChange);
+  const start = useRef41(value ?? defaultValue);
+  useIsomorphicLayoutEffect(() => {
+    const created = createColorSlider(ref.current, {
+      value: value ?? start.current,
+      channel,
+      label,
+      orientation,
+      step,
+      showValue,
+      name,
+      disabled,
+      onInput: (hex, color) => input.current?.(hex, color),
+      onChange: (hex, color) => change.current?.(hex, color)
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [channel, label, orientation, step, showValue, name, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== toHex(toHsva(value))) instance.current.setColor(value, false);
+  }, [value]);
+  return /* @__PURE__ */ jsx44("div", { ...props, ref, className: ["mk-color-slider", className].filter(Boolean).join(" ") });
+}
+
+// src/components/color-area/react.tsx
+import { useRef as useRef42 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
+function ColorArea({ value, defaultValue, label, step, name, disabled, onInput, onChange, className, ...props }) {
+  const ref = useRef42(null);
+  const instance = useRef42(null);
+  const input = useLatest(onInput);
+  const change = useLatest(onChange);
+  const start = useRef42(value ?? defaultValue);
+  useIsomorphicLayoutEffect(() => {
+    const created = createColorArea(ref.current, {
+      value: value ?? start.current,
+      label,
+      step,
+      name,
+      disabled,
+      onInput: (hex, color) => input.current?.(hex, color),
+      onChange: (hex, color) => change.current?.(hex, color)
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [label, step, name, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== toHex(toHsva(value))) instance.current.setColor(value, false);
+  }, [value]);
+  return /* @__PURE__ */ jsx45("div", { ...props, ref, className: ["mk-color-area", className].filter(Boolean).join(" ") });
+}
+
+// src/components/color-field/react.tsx
+import { useRef as useRef43 } from "react";
+import { jsx as jsx46 } from "react/jsx-runtime";
+function ColorField({ value, defaultValue, format, alpha, label, name, disabled, readOnly, onChange, className, ...props }) {
+  const ref = useRef43(null);
+  const instance = useRef43(null);
+  const change = useLatest(onChange);
+  const start = useRef43(value ?? defaultValue);
+  useIsomorphicLayoutEffect(() => {
+    const created = createColorField(ref.current, {
+      value: value ?? start.current,
+      format,
+      alpha,
+      label,
+      name,
+      disabled,
+      readOnly,
+      onChange: (hex, color) => change.current?.(hex, color)
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [format, alpha, label, name, disabled, readOnly]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== toHex(toHsva(value))) instance.current.setColor(value, false);
+  }, [value]);
+  return /* @__PURE__ */ jsx46("div", { ...props, ref, className: ["mk-color-field", className].filter(Boolean).join(" ") });
+}
+
+// src/components/color-picker/react.tsx
+import { useRef as useRef44 } from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+function ColorPicker({ value, defaultValue, alpha, format, swatches, label, name, disabled, inline, eyedropper, onInput, onChange, className, ...props }) {
+  const ref = useRef44(null);
+  const instance = useRef44(null);
+  const input = useLatest(onInput);
+  const change = useLatest(onChange);
+  const start = useRef44(value ?? defaultValue);
+  const key = JSON.stringify(swatches ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createColorPicker(ref.current, {
+      value: value ?? start.current,
+      alpha,
+      format,
+      swatches,
+      label,
+      name,
+      disabled,
+      inline,
+      eyedropper,
+      onInput: (hex, color) => input.current?.(hex, color),
+      onChange: (hex, color) => change.current?.(hex, color)
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [alpha, format, key, label, name, disabled, inline, eyedropper]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== toHex(toHsva(value))) instance.current.setColor(value, false);
+  }, [value]);
+  return /* @__PURE__ */ jsx47("div", { ...props, ref, className: ["mk-color-picker", className].filter(Boolean).join(" ") });
+}
+
+// src/components/time-field/react.tsx
+import { useRef as useRef45 } from "react";
+import { jsx as jsx48 } from "react/jsx-runtime";
+function TimeField({ value, defaultValue, locale, hourCycle, seconds, minuteStep, min, max, label, name, disabled, readOnly, onChange, className, ...props }) {
+  const ref = useRef45(null);
+  const instance = useRef45(null);
+  const change = useLatest(onChange);
+  const start = useRef45(value !== void 0 ? value : defaultValue ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createTimeField(ref.current, {
+      value: value !== void 0 ? value : start.current,
+      locale,
+      hourCycle,
+      seconds,
+      minuteStep,
+      min,
+      max,
+      label,
+      name,
+      disabled,
+      readOnly,
+      onChange: (next) => change.current?.(next)
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [locale, hourCycle, seconds, minuteStep, min, max, label, name, disabled, readOnly]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== value) instance.current.setValue(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx48("div", { ...props, ref, className: ["mk-time-field", className].filter(Boolean).join(" ") });
+}
+
+// src/components/range-calendar/react.tsx
+import { useRef as useRef46 } from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var keyOf = (value) => {
+  const range = toRange(value);
+  return range ? JSON.stringify(rangeKeys(range)) : "null";
+};
+function RangeCalendar({ value, defaultValue, month, visibleMonths, firstDay, min, max, unavailable, locale, today, labels, onChange, className, ...props }) {
+  const ref = useRef46(null);
+  const instance = useRef46(null);
+  const change = useLatest(onChange);
+  const test = useLatest(unavailable);
+  const start = useRef46(value !== void 0 ? value : defaultValue ?? null);
+  const rules = typeof unavailable === "function" ? "function" : JSON.stringify(unavailable ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createRangeCalendar(ref.current, {
+      value: value !== void 0 ? value : start.current,
+      month,
+      visibleMonths,
+      firstDay,
+      min,
+      max,
+      // A function is read through a ref so a new closure each render does not rebuild the calendar.
+      unavailable: typeof unavailable === "function" ? (day) => typeof test.current === "function" ? test.current(day) : false : unavailable,
+      locale,
+      today,
+      labels,
+      onChange: (range) => change.current?.(range)
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [String(month ?? ""), visibleMonths, firstDay, String(min ?? ""), String(max ?? ""), rules, locale, String(today ?? "")]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && keyOf(value) !== keyOf(instance.current.value)) instance.current.setValue(value);
+  }, [keyOf(value)]);
+  return /* @__PURE__ */ jsx49("div", { ...props, ref, className: ["mk-range-calendar", className].filter(Boolean).join(" ") });
+}
+
+// src/components/date-range-picker/react.tsx
+import { useRef as useRef47 } from "react";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var keyOf2 = (value) => {
+  const range = toRange(value);
+  return range ? JSON.stringify(rangeKeys(range)) : "null";
+};
+function DateRangePicker({ value, defaultValue, min, max, unavailable, firstDay, locale, today, label, name, presets, disabled, onChange, className, ...props }) {
+  const ref = useRef47(null);
+  const instance = useRef47(null);
+  const change = useLatest(onChange);
+  const test = useLatest(unavailable);
+  const start = useRef47(value !== void 0 ? value : defaultValue ?? null);
+  const rules = typeof unavailable === "function" ? "function" : JSON.stringify(unavailable ?? null);
+  const presetKey = JSON.stringify(presets ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createDateRangePicker(ref.current, {
+      value: value !== void 0 ? value : start.current,
+      min,
+      max,
+      unavailable: typeof unavailable === "function" ? (day) => typeof test.current === "function" ? test.current(day) : false : unavailable,
+      firstDay,
+      locale,
+      today,
+      label,
+      name,
+      presets,
+      disabled,
+      onChange: (range) => change.current?.(range)
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [String(min ?? ""), String(max ?? ""), rules, firstDay, locale, String(today ?? ""), label, name, presetKey, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && keyOf2(value) !== keyOf2(instance.current.value)) instance.current.setValue(value);
+  }, [keyOf2(value)]);
+  return /* @__PURE__ */ jsx50("div", { ...props, ref, className: ["mk-date-range-picker", className].filter(Boolean).join(" ") });
+}
+
+// src/components/tooltip/react.tsx
+import { useRef as useRef48 } from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+function Tooltip({ content, placement, openDelay, closeDelay, interactive, arrow, onOpenChange, className, children, ...props }) {
+  const ref = useRef48(null);
+  const instance = useRef48(null);
+  const change = useLatest(onOpenChange);
+  useIsomorphicLayoutEffect(() => {
+    const created = createTooltip(ref.current, { content, placement, openDelay, closeDelay, interactive, arrow, onOpenChange: (open) => change.current?.(open) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [placement, openDelay, closeDelay, interactive, arrow]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setContent(content ?? "");
+  }, [content]);
+  return /* @__PURE__ */ jsx51("span", { ...props, ref, className: ["mk-tooltip", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/popover/react.tsx
+import { forwardRef, useImperativeHandle, useRef as useRef49 } from "react";
+import { jsx as jsx52, jsxs as jsxs20 } from "react/jsx-runtime";
+var Popover = forwardRef(function Popover2({ trigger, open, label, onOpenChange, panelClassName, className, children, ...props }, handle) {
+  const ref = useRef49(null);
+  const instance = useRef49(null);
+  const change = useLatest(onOpenChange);
+  useImperativeHandle(handle, () => ({ open: () => instance.current?.open(), close: () => instance.current?.close() }), []);
+  useIsomorphicLayoutEffect(() => {
+    const created = createPopover(ref.current, { label, onOpenChange: (value) => change.current?.(value) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [label]);
+  useIsomorphicLayoutEffect(() => {
+    if (open === void 0 || !instance.current || instance.current.isOpen === open) return;
+    if (open) instance.current.open();
+    else instance.current.close();
+  }, [open]);
+  return /* @__PURE__ */ jsxs20("div", { ...props, ref, className: ["mk-popover", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx52("span", { "data-mk-popover-trigger-slot": "", style: { display: "contents" }, children: trigger }),
+    /* @__PURE__ */ jsx52("dialog", { "data-mk-popover-panel": "", className: panelClassName, children })
+  ] });
+});
+
+// src/components/loading-button/react.tsx
+import { useRef as useRef50 } from "react";
+import { jsx as jsx53 } from "react/jsx-runtime";
+function LoadingButton({ action, state, labels, compact, resetAfter, onStateChange, className, children, type = "button", ...props }) {
+  const ref = useRef50(null);
+  const instance = useRef50(null);
+  const run = useLatest(action);
+  const change = useLatest(onStateChange);
+  const key = JSON.stringify(labels ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createLoadingButton(ref.current, {
+      labels,
+      compact,
+      resetAfter,
+      action: action ? () => run.current?.() : void 0,
+      onStateChange: (next) => change.current?.(next)
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [key, compact, resetAfter, Boolean(action)]);
+  useIsomorphicLayoutEffect(() => {
+    if (state && instance.current && instance.current.state !== state) instance.current.setState(state);
+  }, [state]);
+  return /* @__PURE__ */ jsx53("button", { ...props, type, ref, className: ["mk-loading-button", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx53("span", { "data-mk-loading-label": "", children }) });
+}
+
+// src/components/breadcrumb/react.tsx
+import { useRef as useRef51 } from "react";
+import { jsx as jsx54 } from "react/jsx-runtime";
+function Breadcrumb({ items, label, maxItems, onNavigate, className, ...props }) {
+  const ref = useRef51(null);
+  const instance = useRef51(null);
+  const navigate = useLatest(onNavigate);
+  const key = JSON.stringify(items);
+  useIsomorphicLayoutEffect(() => {
+    const created = createBreadcrumb(ref.current, { items, label, maxItems, onNavigate: (item, index, event) => navigate.current?.(item, index, event) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [label, maxItems]);
+  useIsomorphicLayoutEffect(() => {
+    if (instance.current && JSON.stringify(instance.current.items) !== key) instance.current.setItems(items);
+  }, [key]);
+  return /* @__PURE__ */ jsx54("div", { ...props, ref, className: ["mk-breadcrumb", className].filter(Boolean).join(" ") });
+}
+
+// src/components/empty-state/react.tsx
+import { useRef as useRef52 } from "react";
+import { jsx as jsx55 } from "react/jsx-runtime";
+function EmptyState({ illustration, title, description, actions, loop, onAction, className, ...props }) {
+  const ref = useRef52(null);
+  const instance = useRef52(null);
+  const action = useLatest(onAction);
+  const content = { illustration, title, description, actions };
+  const key = JSON.stringify(content);
+  useIsomorphicLayoutEffect(() => {
+    const created = createEmptyState(ref.current, { ...content, loop, onAction: (id, event) => action.current?.(id, event) });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [loop]);
+  const first = useRef52(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(content);
+  }, [key]);
+  return /* @__PURE__ */ jsx55("div", { ...props, ref, className: ["mk-empty-state", className].filter(Boolean).join(" ") });
+}
+
+// src/components/stat-card/react.tsx
+import { useRef as useRef53 } from "react";
+import { jsx as jsx56 } from "react/jsx-runtime";
+function StatCard({ label, value, previous, format, locale, positive, comparison, series, target, countOnView, className, ...props }) {
+  const ref = useRef53(null);
+  const instance = useRef53(null);
+  const formatter = useLatest(format);
+  const custom = typeof format === "function";
+  const data = { label, value, previous, positive, comparison, series, target, format: custom ? void 0 : format };
+  const key = JSON.stringify(data);
+  const options = () => ({ ...data, format: custom ? (n) => formatter.current(n) : data.format });
+  useIsomorphicLayoutEffect(() => {
+    const created = createStatCard(ref.current, { ...options(), locale, countOnView });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [locale, countOnView]);
+  const first = useRef53(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+  }, [key, custom]);
+  return /* @__PURE__ */ jsx56("div", { ...props, ref, className: ["mk-stat-card", className].filter(Boolean).join(" ") });
+}
+
+// src/components/chart-tooltip/react.tsx
+import { useRef as useRef54 } from "react";
+import { jsx as jsx57 } from "react/jsx-runtime";
+function ChartTooltip({ labels, series, align, inset, min, max, formatValue, delta, share, total, sort, pin, label, onIndexChange, className, children, ...props }) {
+  const ref = useRef54(null);
+  const instance = useRef54(null);
+  const format = useLatest(formatValue);
+  const change = useLatest(onIndexChange);
+  const data = { labels, series, align, inset, min, max, delta, share, total, sort, pin, label };
+  const key = JSON.stringify(data);
+  const options = () => ({
+    ...data,
+    formatValue: formatValue ? (value) => format.current?.(value) ?? String(value) : void 0,
+    onIndexChange: (index) => change.current?.(index)
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = createChartTooltip(ref.current, options());
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, []);
+  const first = useRef54(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+  }, [key, Boolean(formatValue)]);
+  return /* @__PURE__ */ jsx57("div", { ...props, ref, className: ["mk-chart-tooltip", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/multi-select/react.tsx
+import { useRef as useRef55 } from "react";
+import { jsx as jsx58 } from "react/jsx-runtime";
+function MultiSelect({ options, value, defaultValue, placeholder, label, name, max, closeOnSelect, disabled, onChange, className, ...props }) {
+  const ref = useRef55(null);
+  const instance = useRef55(null);
+  const change = useLatest(onChange);
+  const start = useRef55(value ?? defaultValue ?? []);
+  const optionsKey = JSON.stringify(options ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createMultiSelect(ref.current, { options, value: value ?? start.current, placeholder, label, name, max, closeOnSelect, disabled, onChange: (next) => change.current?.(next) });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [placeholder, label, name, max, closeOnSelect, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (options && instance.current) instance.current.setOptions(options);
+  }, [optionsKey]);
+  const valueKey = JSON.stringify(value ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (value && instance.current && JSON.stringify(instance.current.value) !== valueKey) instance.current.setValue(value);
+  }, [valueKey]);
+  return /* @__PURE__ */ jsx58("div", { ...props, ref, className: ["mk-multi-select", className].filter(Boolean).join(" ") });
+}
+
+// src/components/tag-input/react.tsx
+import { useRef as useRef56 } from "react";
+import { jsx as jsx59 } from "react/jsx-runtime";
+function TagInput({ value, defaultValue, suggestions, placeholder, label, name, max, restrict, allowDuplicates, validate, transform, disabled, onChange, className, ...props }) {
+  const ref = useRef56(null);
+  const instance = useRef56(null);
+  const change = useLatest(onChange);
+  const check = useLatest(validate);
+  const shape = useLatest(transform);
+  const start = useRef56(value ?? defaultValue ?? []);
+  useIsomorphicLayoutEffect(() => {
+    const created = createTagInput(ref.current, {
+      value: value ?? start.current,
+      suggestions,
+      placeholder,
+      label,
+      name,
+      max,
+      restrict,
+      allowDuplicates,
+      disabled,
+      validate: validate ? (tag, tags) => check.current?.(tag, tags) : void 0,
+      transform: transform ? (tag) => shape.current?.(tag) ?? tag : void 0,
+      onChange: (next) => change.current?.(next)
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [placeholder, label, name, max, restrict, allowDuplicates, disabled, Boolean(validate), Boolean(transform)]);
+  const suggestionsKey = JSON.stringify(suggestions ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (suggestions) instance.current?.setSuggestions(suggestions);
+  }, [suggestionsKey]);
+  const valueKey = JSON.stringify(value ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (value && instance.current && JSON.stringify(instance.current.value) !== valueKey) instance.current.setValue(value);
+  }, [valueKey]);
+  return /* @__PURE__ */ jsx59("div", { ...props, ref, className: ["mk-tag-input", className].filter(Boolean).join(" ") });
+}
+
+// src/components/date-time-picker/react.tsx
+import { useRef as useRef57 } from "react";
+import { jsx as jsx60 } from "react/jsx-runtime";
+var keyOf3 = (value) => {
+  const date = toDateTimeValue(value);
+  return date ? dateTimeKey(date) : "null";
+};
+function DateTimePicker({ value, defaultValue, min, max, locale, hourCycle, minuteStep, firstDay, unavailable, today, label, name, disabled, onChange, className, ...props }) {
+  const ref = useRef57(null);
+  const instance = useRef57(null);
+  const change = useLatest(onChange);
+  const test = useLatest(unavailable);
+  const start = useRef57(value !== void 0 ? value : defaultValue ?? null);
+  const rules = typeof unavailable === "function" ? "function" : JSON.stringify(unavailable ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createDateTimePicker(ref.current, {
+      value: value !== void 0 ? value : start.current,
+      min,
+      max,
+      locale,
+      hourCycle,
+      minuteStep,
+      firstDay,
+      unavailable: typeof unavailable === "function" ? (day) => typeof test.current === "function" ? test.current(day) : false : unavailable,
+      today,
+      label,
+      name,
+      disabled,
+      onChange: (next) => change.current?.(next)
+    });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [String(min ?? ""), String(max ?? ""), locale, hourCycle, minuteStep, firstDay, rules, String(today ?? ""), label, name, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && keyOf3(value) !== keyOf3(instance.current.value)) instance.current.setValue(value);
+  }, [keyOf3(value)]);
+  return /* @__PURE__ */ jsx60("div", { ...props, ref, className: ["mk-date-time-picker", className].filter(Boolean).join(" ") });
+}
+
+// src/components/filter-builder/react.tsx
+import { useRef as useRef58 } from "react";
+import { jsx as jsx61 } from "react/jsx-runtime";
+function FilterBuilder({ fields, value, defaultValue, maxDepth, label, summary, onChange, className, ...props }) {
+  const ref = useRef58(null);
+  const instance = useRef58(null);
+  const change = useLatest(onChange);
+  const start = useRef58(value ?? defaultValue);
+  const fieldsKey = JSON.stringify(fields);
+  useIsomorphicLayoutEffect(() => {
+    const created = createFilterBuilder(ref.current, { fields, value: value ?? start.current, maxDepth, label, summary, onChange: (next) => change.current?.(next) });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [fieldsKey, maxDepth, label, summary]);
+  const valueKey = JSON.stringify(value ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (value && instance.current && JSON.stringify(instance.current.value) !== valueKey) instance.current.setValue(value);
+  }, [valueKey]);
+  return /* @__PURE__ */ jsx61("div", { ...props, ref, className: ["mk-filter-builder", className].filter(Boolean).join(" ") });
+}
+
+// src/components/timeline/react.tsx
+import { useRef as useRef59 } from "react";
+import { jsx as jsx62 } from "react/jsx-runtime";
+function Timeline({ events, layout, group, relative, locale, label, className, ...props }) {
+  const ref = useRef59(null);
+  const instance = useRef59(null);
+  const shown = useRef59(events);
+  useIsomorphicLayoutEffect(() => {
+    const created = createTimeline(ref.current, { events: shown.current, layout, group, relative, locale, label });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [layout, group, relative, locale, label]);
+  const key = JSON.stringify(events);
+  useIsomorphicLayoutEffect(() => {
+    const timeline = instance.current;
+    const before = shown.current;
+    shown.current = events;
+    if (!timeline || JSON.stringify(timeline.events) === key) return;
+    const ids = new Set(before.map((event) => event.id));
+    const fresh = events.filter((event) => !ids.has(event.id));
+    const kept = events.filter((event) => ids.has(event.id));
+    const gone = before.filter((old) => !events.some((event) => event.id === old.id));
+    const stayed = before.filter((old) => !gone.includes(old));
+    const sameOrder = kept.every((event, i) => stayed[i]?.id === event.id);
+    const patch = () => {
+      for (const event of kept) {
+        const old = before.find((entry) => entry.id === event.id);
+        if (old && JSON.stringify(old) !== JSON.stringify(event)) timeline.update(event.id, { ...Object.fromEntries(Object.keys(old).map((name) => [name, void 0])), ...event });
+      }
+    };
+    const first = events[0]?.id;
+    const last = events[events.length - 1]?.id;
+    if (sameOrder && !gone.length && fresh.length === 1 && (fresh[0].id === first || fresh[0].id === last)) {
+      patch();
+      timeline.add(fresh[0], fresh[0].id === first ? "start" : "end");
+    } else if (sameOrder && !fresh.length && gone.length <= 1) {
+      patch();
+      if (gone[0]) timeline.remove(gone[0].id);
+    } else timeline.setEvents(events);
+  }, [key]);
+  return /* @__PURE__ */ jsx62("div", { ...props, ref, className: ["mk-timeline", className].filter(Boolean).join(" ") });
+}
+
+// src/components/activity-feed/react.tsx
+import { forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2, useRef as useRef60 } from "react";
+import { jsx as jsx63 } from "react/jsx-runtime";
+var ActivityFeed = forwardRef2(function ActivityFeed2({ items, locale, label, emptyLabel, onLoadMore, className, ...props }, handle) {
+  const ref = useRef60(null);
+  const instance = useRef60(null);
+  const load = useLatest(onLoadMore);
+  useImperativeHandle2(handle, () => ({ prepend: (next) => instance.current?.prepend(next), append: (next) => instance.current?.append(next) }), []);
+  useIsomorphicLayoutEffect(() => {
+    const created = createActivityFeed(ref.current, { items, locale, label, emptyLabel, onLoadMore: onLoadMore ? () => load.current?.() ?? [] : void 0 });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [locale, label, emptyLabel, Boolean(onLoadMore)]);
+  return /* @__PURE__ */ jsx63("div", { ...props, ref, className: ["mk-activity-feed", className].filter(Boolean).join(" ") });
+});
+
+// src/components/tree-view/react.tsx
+import { forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle3, useRef as useRef61 } from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
+var TreeView = forwardRef3(function TreeView2({ nodes, checkable, checked, expanded, selected, search, label, loadChildren, renderLabel, searchText, icons, draggable, onSelect, onCheck, onExpand, onMove, className, ...props }, handle) {
+  const ref = useRef61(null);
+  const instance = useRef61(null);
+  const select = useLatest(onSelect);
+  const check = useLatest(onCheck);
+  const expand = useLatest(onExpand);
+  const load = useLatest(loadChildren);
+  const draw = useLatest(renderLabel);
+  const text = useLatest(searchText);
+  const moved = useLatest(onMove);
+  useImperativeHandle3(
+    handle,
+    () => ({
+      expand: (id, animate2) => instance.current?.expand(id, animate2),
+      collapse: (id, animate2) => instance.current?.collapse(id, animate2),
+      expandAll: () => instance.current?.expandAll(),
+      collapseAll: () => instance.current?.collapseAll(),
+      reveal: (id) => instance.current?.reveal(id),
+      filter: (query) => instance.current?.filter(query)
+    }),
+    []
+  );
+  const nodesKey = JSON.stringify(nodes);
+  useIsomorphicLayoutEffect(() => {
+    const created = createTreeView(ref.current, {
+      nodes: JSON.parse(nodesKey),
+      checkable,
+      checked,
+      expanded,
+      selected,
+      search,
+      label,
+      loadChildren: loadChildren ? (node) => load.current?.(node) ?? [] : void 0,
+      renderLabel: renderLabel ? (node, element, query) => draw.current?.(node, element, query) : void 0,
+      searchText: searchText ? (node) => text.current?.(node) ?? node.label : void 0,
+      onSelect: (node) => select.current?.(node),
+      onCheck: (ids) => check.current?.(ids),
+      onExpand: (node, open) => expand.current?.(node, open),
+      icons,
+      draggable,
+      onMove: (node, into) => moved.current?.(node, into)
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [checkable, String(search), label, Boolean(loadChildren), Boolean(renderLabel), Boolean(searchText), icons, draggable]);
+  const first = useRef61(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.setNodes(JSON.parse(nodesKey));
+  }, [nodesKey]);
+  const checkedKey = JSON.stringify(checked ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (checked && instance.current && JSON.stringify([...instance.current.checked].sort()) !== JSON.stringify([...checked].sort())) instance.current.setChecked(checked);
+  }, [checkedKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (selected !== void 0 && instance.current && instance.current.selected !== selected) instance.current.select(selected);
+  }, [selected]);
+  return /* @__PURE__ */ jsx64("div", { ...props, ref, className: ["mk-tree-view", className].filter(Boolean).join(" ") });
+});
+
+// src/components/file-explorer/react.tsx
+import { forwardRef as forwardRef4, useImperativeHandle as useImperativeHandle4, useRef as useRef62 } from "react";
+import { jsx as jsx65 } from "react/jsx-runtime";
+var FileExplorer = forwardRef4(function FileExplorer2({ files, rootLabel, folder, view, tree, readOnly, locale, label, onOpen, onNavigate, onSelectionChange, onViewChange, onChange, className, ...props }, handle) {
+  const ref = useRef62(null);
+  const instance = useRef62(null);
+  const open = useLatest(onOpen);
+  const navigate = useLatest(onNavigate);
+  const select = useLatest(onSelectionChange);
+  const switchView = useLatest(onViewChange);
+  const change = useLatest(onChange);
+  useImperativeHandle4(
+    handle,
+    () => ({
+      open: (id) => instance.current?.open(id),
+      up: () => instance.current?.up(),
+      setView: (next) => instance.current?.setView(next),
+      select: (ids) => instance.current?.select(ids),
+      createFolder: (name) => instance.current?.createFolder(name) ?? null,
+      rename: (id, name) => instance.current?.rename(id, name),
+      remove: (ids) => instance.current?.remove(ids),
+      move: (ids, to) => instance.current?.move(ids, to)
+    }),
+    []
+  );
+  const filesKey = JSON.stringify(files);
+  useIsomorphicLayoutEffect(() => {
+    const created = createFileExplorer(ref.current, {
+      files: JSON.parse(filesKey),
+      rootLabel,
+      folder,
+      view,
+      tree,
+      readOnly,
+      locale,
+      label,
+      onOpen: (entry) => open.current?.(entry),
+      onNavigate: (entry) => navigate.current?.(entry),
+      onSelectionChange: (ids) => select.current?.(ids),
+      onViewChange: (next) => switchView.current?.(next),
+      onChange: (next, detail) => change.current?.(next, detail)
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [rootLabel, tree, readOnly, locale, label]);
+  useIsomorphicLayoutEffect(() => {
+    const explorer = instance.current;
+    if (explorer && JSON.stringify(explorer.files) !== filesKey) explorer.setFiles(JSON.parse(filesKey));
+  }, [filesKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (view && instance.current && instance.current.view !== view) instance.current.setView(view);
+  }, [view]);
+  useIsomorphicLayoutEffect(() => {
+    if (folder && instance.current && instance.current.folder !== folder) instance.current.open(folder);
+  }, [folder]);
+  return /* @__PURE__ */ jsx65("div", { ...props, ref, className: ["mk-file-explorer", className].filter(Boolean).join(" ") });
+});
+
+// src/components/json-viewer/react.tsx
+import { forwardRef as forwardRef5, useImperativeHandle as useImperativeHandle5, useRef as useRef63 } from "react";
+import { jsx as jsx66 } from "react/jsx-runtime";
+var JsonViewer = forwardRef5(function JsonViewer2({ data, expandDepth, rootName, search, toolbar, sortKeys, label, onSelect, onCopy, className, ...props }, handle) {
+  const ref = useRef63(null);
+  const instance = useRef63(null);
+  const select = useLatest(onSelect);
+  const copied = useLatest(onCopy);
+  const shown = useRef63(data);
+  useImperativeHandle5(
+    handle,
+    () => ({
+      expandAll: () => instance.current?.expandAll(),
+      collapseAll: () => instance.current?.collapseAll(),
+      reveal: (path) => instance.current?.reveal(path),
+      filter: (query) => instance.current?.filter(query),
+      copy: (path) => instance.current?.copy(path) ?? Promise.resolve(false)
+    }),
+    []
+  );
+  useIsomorphicLayoutEffect(() => {
+    const created = createJsonViewer(ref.current, {
+      data: shown.current,
+      expandDepth,
+      rootName,
+      search,
+      toolbar,
+      sortKeys,
+      label,
+      onSelect: (path, value) => select.current?.(path, value),
+      onCopy: (text, path) => copied.current?.(text, path)
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [expandDepth, rootName, String(search), toolbar, sortKeys, label]);
+  useIsomorphicLayoutEffect(() => {
+    if (shown.current === data) return;
+    shown.current = data;
+    instance.current?.setData(data);
+  }, [data]);
+  return /* @__PURE__ */ jsx66("div", { ...props, ref, className: ["mk-json-viewer", className].filter(Boolean).join(" ") });
+});
+
+// src/components/virtual-list/react.tsx
+import { forwardRef as forwardRef6, useImperativeHandle as useImperativeHandle6, useRef as useRef64, useState as useState7 } from "react";
+import { jsx as jsx67 } from "react/jsx-runtime";
+var keyFor = (getKey, item, index) => {
+  if (getKey) return getKey(item, index);
+  const id = item && typeof item === "object" ? item.id : void 0;
+  return typeof id === "string" || typeof id === "number" ? id : index;
+};
+function VirtualListInner({ items, renderItem, itemHeight, estimatedHeight, overscan, itemText, getKey, selectable, selected, label, emptyLabel, locale, onSelect, onActivate, onEndReached, className, ...props }, handle) {
+  const ref = useRef64(null);
+  const instance = useRef64(null);
+  const [range, setRange] = useState7({ start: 0, end: 0 });
+  const shown = useRef64(items);
+  const select = useLatest(onSelect);
+  const activate = useLatest(onActivate);
+  const more = useLatest(onEndReached);
+  const text = useLatest(itemText);
+  const key = useLatest(getKey);
+  useImperativeHandle6(handle, () => ({ scrollToIndex: (index, options) => instance.current?.scrollToIndex(index, options) }), []);
+  const custom = Boolean(renderItem);
+  useIsomorphicLayoutEffect(() => {
+    const created = createVirtualList(ref.current, {
+      items: shown.current,
+      itemHeight,
+      estimatedHeight,
+      overscan,
+      selectable,
+      selected,
+      label,
+      emptyLabel,
+      locale,
+      itemText: itemText ? (item) => text.current?.(item) ?? "" : void 0,
+      getKey: (item, index) => keyFor(key.current, item, index),
+      onSelect: (keys, chosen) => select.current?.(keys, chosen),
+      onActivate: (item, index) => activate.current?.(item, index),
+      onEndReached: onEndReached ? () => more.current?.() : void 0,
+      onRange: custom ? setRange : void 0
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [itemHeight, estimatedHeight, overscan, String(selectable), label, emptyLabel, locale, custom, Boolean(onEndReached), Boolean(itemText)]);
+  useIsomorphicLayoutEffect(() => {
+    if (shown.current === items) return;
+    shown.current = items;
+    instance.current?.setItems(items);
+  }, [items]);
+  const selectedKey = JSON.stringify(selected ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (selected && instance.current && JSON.stringify(instance.current.selected) !== JSON.stringify(selected)) instance.current.select(selected);
+  }, [selectedKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (custom) instance.current?.refresh();
+  });
+  return /* @__PURE__ */ jsx67("div", { ...props, ref, className: ["mk-virtual-list", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx67("div", { "data-mk-vl-viewport": "", children: /* @__PURE__ */ jsx67("div", { "data-mk-vl-spacer": "", children: renderItem ? items.slice(range.start, Math.min(range.end, items.length)).map((item, i) => {
+    const index = range.start + i;
+    return /* @__PURE__ */ jsx67("div", { "data-mk-vl-item": "", "data-index": index, children: renderItem(item, index) }, keyFor(getKey, item, index));
+  }) : null }) }) });
+}
+var VirtualList = forwardRef6(VirtualListInner);
+
+// src/components/resizable-panel/react.tsx
+import { Children as Children2, forwardRef as forwardRef7, useImperativeHandle as useImperativeHandle7, useRef as useRef65 } from "react";
+import { jsx as jsx68 } from "react/jsx-runtime";
+var ResizablePanel = forwardRef7(function ResizablePanel2({ orientation, sizes, min, max, collapsible, collapsed, step, storageKey, handleButtons, labels, onResize, onResizeEnd, onCollapse, className, children, ...props }, handle) {
+  const ref = useRef65(null);
+  const instance = useRef65(null);
+  const resize = useLatest(onResize);
+  const resizeEnd = useLatest(onResizeEnd);
+  const collapse = useLatest(onCollapse);
+  const shown = useRef65(sizes);
+  useImperativeHandle7(
+    handle,
+    () => ({
+      setSizes: (next, animate2) => instance.current?.setSizes(next, animate2),
+      collapse: (index) => instance.current?.collapse(index),
+      expand: (index) => instance.current?.expand(index),
+      toggle: (index) => instance.current?.toggle(index),
+      reset: () => instance.current?.reset()
+    }),
+    []
+  );
+  const count = Children2.count(children);
+  useIsomorphicLayoutEffect(() => {
+    const created = createResizablePanel(ref.current, {
+      orientation,
+      sizes: shown.current,
+      min,
+      max,
+      collapsible,
+      collapsed,
+      step,
+      storageKey,
+      handleButtons,
+      labels,
+      onResize: (next) => resize.current?.(next),
+      onResizeEnd: (next) => resizeEnd.current?.(next),
+      onCollapse: (index, shut) => collapse.current?.(index, shut)
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [count, min, max, String(collapsible), step, storageKey, handleButtons, String(labels)]);
+  useIsomorphicLayoutEffect(() => {
+    if (orientation) instance.current?.setOrientation(orientation);
+  }, [orientation]);
+  const sizesKey = JSON.stringify(sizes ?? null);
+  useIsomorphicLayoutEffect(() => {
+    if (!sizes || JSON.stringify(shown.current ?? null) === sizesKey) return;
+    shown.current = sizes;
+    instance.current?.setSizes(sizes);
+  }, [sizesKey]);
+  return /* @__PURE__ */ jsx68("div", { ...props, ref, className: ["mk-resizable-panel", className].filter(Boolean).join(" "), children });
+});
+
+// src/components/split-view/react.tsx
+import { forwardRef as forwardRef8, useImperativeHandle as useImperativeHandle8, useRef as useRef66 } from "react";
+import { jsxs as jsxs21 } from "react/jsx-runtime";
+var SplitView = forwardRef8(function SplitView2({ orientation, ratio, min, collapsible, stackBelow, storageKey, labels, onChange, onCollapse, className, children, ...props }, handle) {
+  const ref = useRef66(null);
+  const instance = useRef66(null);
+  const change = useLatest(onChange);
+  const collapse = useLatest(onCollapse);
+  const shown = useRef66(ratio);
+  useImperativeHandle8(
+    handle,
+    () => ({
+      setRatio: (next, animate2) => instance.current?.setRatio(next, animate2),
+      collapse: (side) => instance.current?.collapse(side),
+      expand: () => instance.current?.expand(),
+      toggle: (side) => instance.current?.toggle(side)
+    }),
+    []
+  );
+  useIsomorphicLayoutEffect(() => {
+    const created = createSplitView(ref.current, {
+      orientation,
+      ratio: shown.current,
+      min,
+      collapsible,
+      stackBelow,
+      storageKey,
+      labels,
+      onChange: (next) => change.current?.(next),
+      onCollapse: (side) => collapse.current?.(side)
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [orientation, min, String(collapsible), stackBelow, storageKey, String(labels)]);
+  useIsomorphicLayoutEffect(() => {
+    if (ratio === void 0 || ratio === shown.current) return;
+    shown.current = ratio;
+    instance.current?.setRatio(ratio);
+  }, [ratio]);
+  return /* @__PURE__ */ jsxs21("div", { ...props, ref, className: ["mk-split-view", className].filter(Boolean).join(" "), children: [
+    children[0],
+    children[1]
+  ] });
+});
+
+// src/components/data-table/react.tsx
+import { forwardRef as forwardRef9, useImperativeHandle as useImperativeHandle9, useRef as useRef67 } from "react";
+import { jsx as jsx69 } from "react/jsx-runtime";
+function DataTableInner({
+  columns,
+  rows,
+  rowKey,
+  caption,
+  pageSize,
+  pageSizes,
+  selectable,
+  search,
+  filters,
+  filter,
+  columnsMenu,
+  actions,
+  bulkActions,
+  sort,
+  loading,
+  emptyTitle,
+  emptyDescription,
+  locale,
+  onSortChange,
+  onSelectionChange,
+  onAction,
+  onBulkAction,
+  onPageChange,
+  onFilterChange,
+  onRender,
+  className,
+  ...props
+}, handle) {
+  const ref = useRef67(null);
+  const instance = useRef67(null);
+  const shown = useRef67(rows);
+  const callbacks = useLatest({ onSortChange, onSelectionChange, onAction, onBulkAction, onPageChange, onFilterChange, onRender });
+  useImperativeHandle9(
+    handle,
+    () => ({
+      sortBy: (key, direction) => instance.current?.sortBy(key, direction),
+      setPage: (page) => instance.current?.setPage(page),
+      setPageSize: (size) => instance.current?.setPageSize(size),
+      setQuery: (query) => instance.current?.setQuery(query),
+      setFilter: (next) => instance.current?.setFilter(next),
+      setColumnVisible: (key, visible) => instance.current?.setColumnVisible(key, visible),
+      select: (ids) => instance.current?.select(ids),
+      removeRows: (ids) => instance.current?.removeRows(ids),
+      updateRow: (id, patch) => instance.current?.updateRow(id, patch)
+    }),
+    []
+  );
+  const columnsKey = JSON.stringify((columns ?? []).map(({ key, label, type, hidden, sortable, filterable, align, width, options: choices }) => [key, label, type, hidden, sortable, filterable, align, width, choices]));
+  const setupKey = JSON.stringify([columnsKey, rowKey, caption, pageSize, pageSizes, selectable, search, filters, columnsMenu, actions, bulkActions, emptyTitle, emptyDescription, locale]);
+  useIsomorphicLayoutEffect(() => {
+    const created = createDataTable(ref.current, {
+      columns,
+      rows: shown.current,
+      rowKey,
+      caption,
+      pageSize,
+      pageSizes,
+      selectable,
+      search,
+      filters,
+      filter,
+      columnsMenu,
+      actions,
+      bulkActions,
+      sort,
+      loading,
+      emptyTitle,
+      emptyDescription,
+      locale,
+      onSortChange: (next) => callbacks.current.onSortChange?.(next),
+      onSelectionChange: (ids, chosen) => callbacks.current.onSelectionChange?.(ids, chosen),
+      onAction: (action, row) => callbacks.current.onAction?.(action, row),
+      onBulkAction: (action, chosen) => callbacks.current.onBulkAction?.(action, chosen),
+      onPageChange: (page) => callbacks.current.onPageChange?.(page),
+      onFilterChange: (next, query) => callbacks.current.onFilterChange?.(next, query),
+      onRender: (body) => callbacks.current.onRender?.(body)
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [setupKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (shown.current === rows) return;
+    shown.current = rows;
+    instance.current?.setRows(rows);
+  }, [rows]);
+  useIsomorphicLayoutEffect(() => {
+    instance.current?.setLoading(Boolean(loading));
+  }, [loading]);
+  return /* @__PURE__ */ jsx69("div", { ...props, ref, className: ["mk-data-table", className].filter(Boolean).join(" ") });
+}
+var DataTable = forwardRef9(DataTableInner);
+
+// src/components/editable-table/react.tsx
+import { forwardRef as forwardRef10, useImperativeHandle as useImperativeHandle10, useRef as useRef68 } from "react";
+import { jsx as jsx70 } from "react/jsx-runtime";
+function EditableTableInner({ columns, rows, rowKey, caption, pageSize, pageSizes, selectable, search, filters, columnsMenu, actions, bulkActions, sort, emptyTitle, emptyDescription, locale, onSave, onChange, newRow, onAction, onBulkAction, onSelectionChange, className, ...props }, handle) {
+  const ref = useRef68(null);
+  const instance = useRef68(null);
+  const shown = useRef68(rows);
+  const callbacks = useLatest({ onSave, onChange, newRow, onAction, onBulkAction, onSelectionChange });
+  useImperativeHandle10(
+    handle,
+    () => ({
+      edit: (id, key) => instance.current?.edit(id, key),
+      setValue: (id, key, value) => instance.current?.setValue(id, key, value) ?? false,
+      addRow: (values) => instance.current?.addRow(values) ?? "",
+      removeRows: (ids) => instance.current?.removeRows(ids),
+      save: () => instance.current?.save() ?? Promise.resolve(false),
+      discard: () => instance.current?.discard()
+    }),
+    []
+  );
+  const columnsKey = JSON.stringify((columns ?? []).map(({ key, label, type, editable, editor, required, min, max, hidden, options: choices }) => [key, label, type, editable, editor, required, min, max, hidden, choices]));
+  const setupKey = JSON.stringify([columnsKey, rowKey, caption, pageSize, pageSizes, selectable, search, filters, columnsMenu, actions, bulkActions, emptyTitle, emptyDescription, locale, Boolean(newRow)]);
+  useIsomorphicLayoutEffect(() => {
+    const created = createEditableTable(ref.current, {
+      columns,
+      rows: shown.current,
+      rowKey,
+      caption,
+      pageSize,
+      pageSizes,
+      selectable,
+      search,
+      filters,
+      columnsMenu,
+      actions,
+      bulkActions,
+      sort,
+      emptyTitle,
+      emptyDescription,
+      locale,
+      onSave: (changes, next) => callbacks.current.onSave?.(changes, next),
+      onChange: (changes) => callbacks.current.onChange?.(changes),
+      newRow: newRow ? () => callbacks.current.newRow?.() ?? {} : void 0,
+      onAction: (action, row) => callbacks.current.onAction?.(action, row),
+      onBulkAction: (action, chosen) => callbacks.current.onBulkAction?.(action, chosen),
+      onSelectionChange: (ids, chosen) => callbacks.current.onSelectionChange?.(ids, chosen)
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [setupKey]);
+  useIsomorphicLayoutEffect(() => {
+    if (shown.current === rows) return;
+    shown.current = rows;
+    instance.current?.setRows(rows);
+  }, [rows]);
+  return /* @__PURE__ */ jsx70("div", { ...props, ref, className: ["mk-data-table", "mk-editable-table", className].filter(Boolean).join(" ") });
+}
+var EditableTable = forwardRef10(EditableTableInner);
+
+// src/components/rich-text-editor/react.tsx
+import { forwardRef as forwardRef11, useImperativeHandle as useImperativeHandle11, useRef as useRef69 } from "react";
+import { jsx as jsx71 } from "react/jsx-runtime";
+var RichTextEditor = forwardRef11(function RichTextEditor2({ value, placeholder, toolbar, maxLength, counter, name, label, readOnly, markdown, onChange, className, ...props }, handle) {
+  const ref = useRef69(null);
+  const instance = useRef69(null);
+  const change = useLatest(onChange);
+  const shown = useRef69(value);
+  useImperativeHandle11(
+    handle,
+    () => ({
+      focus: () => instance.current?.focus(),
+      exec: (command, argument) => instance.current?.exec(command, argument),
+      setValue: (html) => instance.current?.setValue(html)
+    }),
+    []
+  );
+  useIsomorphicLayoutEffect(() => {
+    const created = createRichTextEditor(ref.current, {
+      value: shown.current,
+      placeholder,
+      toolbar,
+      maxLength,
+      counter,
+      name,
+      label,
+      readOnly,
+      markdown,
+      onChange: (html, text) => {
+        shown.current = html;
+        change.current?.(html, text);
+      }
+    });
+    instance.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+    };
+  }, [placeholder, String(toolbar), maxLength, String(counter), name, label, readOnly, markdown]);
+  useIsomorphicLayoutEffect(() => {
+    if (value === void 0 || value === shown.current) return;
+    shown.current = value;
+    instance.current?.setValue(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx71("div", { ...props, ref, className: ["mk-rich-text-editor", className].filter(Boolean).join(" ") });
+});
+
+// src/components/select/react.tsx
+import { useRef as useRef70 } from "react";
+import { jsx as jsx72 } from "react/jsx-runtime";
+function Select({ options, value, defaultValue, name, label, placeholder, disabled, onChange, className, ...props }) {
+  const ref = useRef70(null);
+  const instance = useRef70(null);
+  const change = useLatest(onChange);
+  const start = useRef70(value ?? defaultValue);
+  const key = JSON.stringify(options ?? null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createSelect(ref.current, { options, value: value ?? start.current, name, label, placeholder, disabled, onChange: (next) => change.current?.(next) });
+    instance.current = created;
+    return () => {
+      start.current = created.value;
+      created.destroy();
+      instance.current = null;
+    };
+  }, [key, name, label, placeholder, disabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== value) instance.current.setValue(value, false);
+  }, [value]);
+  return /* @__PURE__ */ jsx72("div", { ...props, ref, className: ["mk-select", className].filter(Boolean).join(" ") });
+}
+
+// src/components/add-to-cart/react.tsx
+import { useRef as useRef71 } from "react";
+import { jsx as jsx73 } from "react/jsx-runtime";
+function AddToCart({ target, image, quantity, count, label, onAdd, onLand, instanceRef, className, children, ...props }) {
+  const ref = useRef71(null);
+  const add = useLatest(onAdd);
+  const landed = useLatest(onLand);
+  useIsomorphicLayoutEffect(() => {
+    const created = createAddToCart(ref.current, { target, image, quantity, count, label, onAdd: (n) => add.current?.(n), onLand: (n) => landed.current?.(n) });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [typeof target === "string" ? target : null, typeof image === "string" ? image : null, quantity, label]);
+  return /* @__PURE__ */ jsx73("div", { ...props, ref, className: ["mk-add-to-cart", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/scroll-island/react.tsx
+import { useRef as useRef72 } from "react";
+import { jsx as jsx74 } from "react/jsx-runtime";
+function ScrollIsland({ sections, reach, idle, page, onSection, className, children, ...props }) {
+  const ref = useRef72(null);
+  const section = useLatest(onSection);
+  useIsomorphicLayoutEffect(() => {
+    const created = createScrollIsland(page ? document.documentElement : ref.current, { sections, reach, idle, page, onSection: (name) => section.current?.(name) });
+    return () => created.destroy();
+  }, [sections, reach, idle, page]);
+  if (page) return null;
+  return /* @__PURE__ */ jsx74("div", { ...props, ref, className: ["mk-scroll-island", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/pill-button/react.tsx
+import { useRef as useRef73 } from "react";
+import { jsx as jsx75, jsxs as jsxs22 } from "react/jsx-runtime";
+function PillButton({ expand, icon, className, children, type = "button", ...props }) {
+  const ref = useRef73(null);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createPillButton(ref.current, { expand });
+    return () => instance.destroy();
+  }, [expand]);
+  return /* @__PURE__ */ jsxs22("button", { ...props, type, ref, className: ["mk-pill-button", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx75("span", { "data-mk-pill-label": "", children }),
+    icon ? /* @__PURE__ */ jsx75("span", { "data-mk-pill-icon": "", "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx75("span", { "data-mk-pill-icon": "", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: PILL_ARROW } })
+  ] });
+}
+
+// src/components/toolbar/react.tsx
+import { useRef as useRef74 } from "react";
+import { jsx as jsx76 } from "react/jsx-runtime";
+function Toolbar({ value, orientation, tips, onChange, instanceRef, className, children, ...props }) {
+  const ref = useRef74(null);
+  const changed = useLatest(onChange);
+  const instance = useRef74(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createToolbar(ref.current, { value, orientation, tips, onChange: (next) => changed.current?.(next) });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [orientation, tips]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== value) instance.current.setValue(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx76("div", { ...props, ref, className: ["mk-toolbar", className].filter(Boolean).join(" "), children });
+}
+
+// src/components/bidirectional-slider/react.tsx
+import { useRef as useRef75 } from "react";
+import { jsx as jsx77 } from "react/jsx-runtime";
+function BidirectionalSlider({ min, max, origin, step, value, disabled, name, label, icons, formatValue, onInput, onChange, instanceRef, className, ...props }) {
+  const ref = useRef75(null);
+  const input = useLatest(onInput);
+  const change = useLatest(onChange);
+  const format = useLatest(formatValue);
+  const instance = useRef75(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createBidirectionalSlider(ref.current, {
+      min,
+      max,
+      origin,
+      step,
+      value,
+      disabled,
+      name,
+      label,
+      icons,
+      formatValue: formatValue ? (n) => format.current(n) : void 0,
+      onInput: (n) => input.current?.(n),
+      onChange: (n) => change.current?.(n)
+    });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [min, max, origin, step, disabled, name, label, icons]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0 && instance.current && instance.current.value !== value) instance.current.setValue(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx77("div", { ...props, ref, className: ["mk-bidirectional-slider", className].filter(Boolean).join(" ") });
+}
+
+// src/components/voice-dots/react.tsx
+import { useRef as useRef76 } from "react";
+import { jsx as jsx78 } from "react/jsx-runtime";
+function VoiceDots({ state = "idle", count, colorful, size, labels, source, level, instanceRef, className, ...props }) {
+  const ref = useRef76(null);
+  const instance = useRef76(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createVoiceDots(ref.current, { state, count, colorful, size, labels });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [count, colorful, size]);
+  useIsomorphicLayoutEffect(() => {
+    if (instance.current && instance.current.state !== state) instance.current.setState(state);
+  }, [state]);
+  useIsomorphicLayoutEffect(() => {
+    const dots = instance.current;
+    if (!dots || !source) return;
+    let stop = null;
+    let gone = false;
+    void dots.listen(source).then((done) => {
+      if (gone) done();
+      else stop = done;
+    }).catch((error) => {
+      if (!gone) ref.current?.dispatchEvent(new CustomEvent("mk:error", { bubbles: true, detail: { error } }));
+    });
+    return () => {
+      gone = true;
+      stop?.();
+    };
+  }, [source, count, colorful, size]);
+  useIsomorphicLayoutEffect(() => {
+    if (level !== void 0) instance.current?.setLevel(level);
+  }, [level]);
+  return /* @__PURE__ */ jsx78("div", { ...props, ref, className: ["mk-voice-dots", className].filter(Boolean).join(" ") });
+}
+
+// src/components/chart/use-chart.ts
+import { useRef as useRef77 } from "react";
+function useChart(create, data, callbacks, instanceRef) {
+  const ref = useRef77(null);
+  const instance = useRef77(null);
+  const format = useLatest(callbacks.formatValue);
+  const select = useLatest(callbacks.onSelect);
+  const formatted = callbacks.formatValue !== void 0;
+  const key = JSON.stringify(data);
+  const latest = useLatest(data);
+  const options = () => ({
+    ...latest.current,
+    formatValue: formatted ? (value) => format.current?.(value) ?? String(value) : void 0,
+    onSelect: (...args) => select.current?.(...args)
+  });
+  useIsomorphicLayoutEffect(() => {
+    const created = create(ref.current, options());
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, []);
+  const first = useRef77(true);
+  useIsomorphicLayoutEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.current?.update(options());
+  }, [key, formatted]);
+  return ref;
+}
+
+// src/components/pie-chart/react.tsx
+import { jsx as jsx79 } from "react/jsx-runtime";
+function PieChart({ data, donut, gap, size, label, totalLabel, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createPieChart, { data, donut, gap, size, label, totalLabel, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return /* @__PURE__ */ jsx79("div", { ...props, ref, className: ["mk-chart mk-pie-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/radar-chart/react.tsx
+import { jsx as jsx80 } from "react/jsx-runtime";
+function RadarChart({ axes, series, max, levels, grid, size, label, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createRadarChart, { axes, series, max, levels, grid, size, label, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return /* @__PURE__ */ jsx80("div", { ...props, ref, className: ["mk-chart mk-radar-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/radial-chart/react.tsx
+import { jsx as jsx81 } from "react/jsx-runtime";
+function RadialChart({ data, max, sweep, size, thickness, label, totalLabel, legend, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createRadialChart, { data, max, sweep, size, thickness, label, totalLabel, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return /* @__PURE__ */ jsx81("div", { ...props, ref, className: ["mk-chart mk-radial-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/sankey-chart/react.tsx
+import { jsx as jsx82 } from "react/jsx-runtime";
+function SankeyChart({ nodes, links, height, nodeWidth, nodePadding, label, emptyLabel, formatValue, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createSankeyChart, { nodes, links, height, nodeWidth, nodePadding, label, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return /* @__PURE__ */ jsx82("div", { ...props, ref, className: ["mk-chart mk-sankey-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/heatmap-chart/react.tsx
+import { jsx as jsx83 } from "react/jsx-runtime";
+function HeatmapChart({ data, end, weeks, firstDay, locale, levels, color, unit, label, legend, formatValue, emptyLabel, onSelect, instanceRef, className, ...props }) {
+  const ref = useChart(createHeatmapChart, { data, end, weeks, firstDay, locale, levels, color, unit, label, legend, emptyLabel }, { formatValue, onSelect }, instanceRef);
+  return /* @__PURE__ */ jsx83("div", { ...props, ref, className: ["mk-heatmap-chart", className].filter(Boolean).join(" ") });
+}
+
+// src/components/orbit-menu/react.tsx
+import { useRef as useRef78 } from "react";
+import { jsx as jsx84, jsxs as jsxs23 } from "react/jsx-runtime";
+function OrbitMenu({ items, label = "Men\xFA", radius, start, closeOnSelect, onToggle, onSelect, instanceRef, className, ...props }) {
+  const ref = useRef78(null);
+  const toggled = useLatest(onToggle);
+  const selected = useLatest(onSelect);
+  const keys = items.map((item) => item.value).join("\0");
+  useIsomorphicLayoutEffect(() => {
+    const created = createOrbitMenu(ref.current, { radius, start, closeOnSelect, onToggle: (open) => toggled.current?.(open), onSelect: (value) => selected.current?.(value) });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+  }, [keys, radius, start, closeOnSelect]);
+  return /* @__PURE__ */ jsxs23("div", { ...props, ref, className: ["mk-orbit-menu", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx84("button", { type: "button", "data-mk-orbit-toggle": "", "aria-label": label }),
+    items.map((item) => /* @__PURE__ */ jsx84("button", { type: "button", "data-mk-orbit-item": "", "data-mk-value": item.value, "aria-label": item.label, children: item.icon }, item.value))
+  ] });
+}
 export {
   ANIMATIONS,
+  ActivityFeed,
+  AddToCart,
   AnimatedNumber,
+  Attachment,
+  BidirectionalSlider,
+  Breadcrumb,
   Calendar,
+  Chart,
+  ChartTooltip,
   Chat,
   ChatBackground,
+  CodeBlock,
+  ColorArea,
+  ColorField,
+  ColorPicker,
+  ColorSlider,
+  CommandSearch,
+  ContextMenu,
+  CreditCard,
   Cursor,
+  DataTable,
+  DateRangePicker,
+  DateTimePicker,
   Dialog,
+  Drawer,
+  EditableTable,
+  EmptyState,
+  FileExplorer,
+  FilterBuilder,
   FlipGroup,
   Frost,
+  HeatmapChart,
+  HoldConfirm,
   HoverCard,
+  ImagePreview,
   InputOtp,
   Island,
   IslandDots,
+  JsonViewer,
+  LikeButton,
+  LinkPreview,
+  LoadingButton,
   MK_HEAD_SCRIPT,
   MK_THEME_HEAD_SCRIPT,
   Menu,
   MkIcon,
+  MultiSelect,
   NAV_STYLES,
+  NAV_STYLE_ALIASES,
   Nav,
+  NotificationBell,
+  OrbitMenu,
   Pagination,
+  PasswordStrength,
+  PieChart,
+  PillButton,
+  Popover,
+  Progress,
   Quantity,
+  Questionnaire,
+  RadarChart,
+  RadialChart,
+  RangeCalendar,
+  RangeSlider,
+  ResizablePanel,
+  RichTextEditor,
+  SankeyChart,
+  ScratchCard,
+  ScrollIsland,
+  Select,
+  Skeleton,
   SlotPicker,
   SlotText,
+  SplitView,
+  StarRating,
+  StatCard,
   Steps,
   StudioDock,
+  SwipeActions,
+  TagInput,
   ThemePicker,
   ThemeProvider,
+  TimeField,
+  Timeline,
   Toaster,
+  Toolbar,
+  Tooltip,
   Trailer,
+  TreeView,
+  VirtualList,
+  VoiceDots,
   animate,
   clearToasts,
   confetti,
@@ -1253,6 +3587,7 @@ export {
   pileLayers,
   pileStyle,
   themeHeadScript,
+  toNavStyle,
   toast,
   useActionButton,
   useCardDock,
@@ -1266,6 +3601,7 @@ export {
   useDialog,
   useDockPill,
   useDragRuler,
+  useDrawer,
   useEditorialReveal,
   useFillText,
   useFilmHero,