@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-RNH2I23I.mjs

@@ -0,0 +1,341 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/MarkdownEditor.tsx
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, forwardRef } from "react";
+import {
+  applyMarkdownToolbarAction,
+  classNames,
+  createDefaultMarkdownToolbar,
+  findMarkdownHotkeyMatch,
+  getMarkdownBodyClasses,
+  getMarkdownContainerClasses,
+  getMarkdownToolbarButtonClasses,
+  isMarkdownToolbarSeparator,
+  markdownEditorEmptyPreviewClasses,
+  markdownEditorPreviewClasses,
+  markdownEditorSplitDividerClasses,
+  markdownEditorTextareaClasses,
+  markdownEditorToolbarClasses,
+  markdownEditorToolbarGroupClasses,
+  markdownEditorToolbarSeparatorClasses,
+  parseMarkdownHeight,
+  renderMarkdownToHtml,
+  mergeTigerLocale,
+  getMarkdownEditorLabels,
+  handleTabKey,
+  resolveEditorTabAction,
+  nextToolbarRovingIndex,
+  getMarkdownToolbarButtons
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var modes = ["edit", "split", "preview"];
+var MarkdownEditor = forwardRef(
+  function MarkdownEditor2({
+    value,
+    defaultValue = "",
+    placeholder,
+    mode,
+    defaultMode = "split",
+    toolbar,
+    showModeSwitch = true,
+    height = 360,
+    readOnly = false,
+    disabled = false,
+    renderer,
+    locale,
+    labels: labelsOverride,
+    tabSize = 2,
+    ariaLabel,
+    name,
+    id,
+    onChange,
+    onModeChange,
+    className,
+    style,
+    onFocus,
+    onBlur,
+    ...restProps
+  }, ref) {
+    const config = useTigerConfig();
+    const formItemControl = useFormItemControlContext();
+    const textareaRef = useRef(null);
+    const pendingSelection = useRef(null);
+    const [allowTabExit, setAllowTabExit] = useState(false);
+    const [formatToolbarIndex, setFormatToolbarIndex] = useState(0);
+    const formBoundValue = formItemControl?.value;
+    const resolvedValue = value !== void 0 ? value : typeof formBoundValue === "string" ? formBoundValue : void 0;
+    const [currentValue, commitValue] = useControlledState({
+      value: resolvedValue,
+      defaultValue,
+      onChange: (next) => {
+        onChange?.(next);
+        formItemControl?.onChange?.(next);
+      }
+    });
+    const [currentMode, commitMode] = useControlledState({
+      value: mode,
+      defaultValue: defaultMode,
+      onChange: onModeChange
+    });
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getMarkdownEditorLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
+    const toolbarItems = useMemo(
+      () => toolbar === false ? [] : toolbar ?? createDefaultMarkdownToolbar(labels),
+      [toolbar, labels]
+    );
+    const toolbarButtons = useMemo(() => getMarkdownToolbarButtons(toolbarItems), [toolbarItems]);
+    const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+    const effectiveId = id ?? formItemControl?.id;
+    const effectiveName = name ?? formItemControl?.name;
+    const canEdit = currentMode === "edit" || currentMode === "split";
+    const showFormattingToolbar = toolbar !== false && canEdit && !readOnly;
+    const showTopbar = showFormattingToolbar || showModeSwitch;
+    const showEditor = canEdit;
+    const showPreview = currentMode === "preview" || currentMode === "split";
+    useLayoutEffect(() => {
+      const pending = pendingSelection.current;
+      if (!pending || !textareaRef.current) return;
+      pendingSelection.current = null;
+      textareaRef.current.selectionStart = pending.start;
+      textareaRef.current.selectionEnd = pending.end;
+      textareaRef.current.focus();
+    });
+    const previewHtml = useMemo(
+      () => renderMarkdownToHtml(currentValue, renderer),
+      [currentValue, renderer]
+    );
+    const containerStyle = useMemo(() => {
+      const parsedHeight = parseMarkdownHeight(height);
+      return { ...parsedHeight ? { height: parsedHeight } : {}, ...style };
+    }, [height, style]);
+    const modeLabels = {
+      edit: labels.editModeLabel,
+      split: labels.splitModeLabel,
+      preview: labels.previewModeLabel
+    };
+    const applyToolbarButton = useCallback(
+      (button) => {
+        if (readOnly || effectiveDisabled || !canEdit) return;
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+        const selection = {
+          value: currentValue,
+          selectionStart: textarea.selectionStart,
+          selectionEnd: textarea.selectionEnd
+        };
+        const result = applyMarkdownToolbarAction(button, selection, labels);
+        pendingSelection.current = {
+          start: result.selectionStart,
+          end: result.selectionEnd
+        };
+        commitValue(result.value);
+      },
+      [canEdit, commitValue, currentValue, effectiveDisabled, labels, readOnly]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        const action = resolveEditorTabAction(event, {
+          readOnly,
+          disabled: effectiveDisabled,
+          allowTabExit
+        });
+        if (action === "arm-exit") {
+          setAllowTabExit(true);
+          return;
+        }
+        if (action === "indent" || action === "outdent") {
+          event.preventDefault();
+          setAllowTabExit(false);
+          const textarea = event.currentTarget;
+          const result = handleTabKey(
+            textarea.value,
+            textarea.selectionStart,
+            textarea.selectionEnd,
+            tabSize,
+            { shift: action === "outdent" }
+          );
+          pendingSelection.current = {
+            start: result.selectionStart,
+            end: result.selectionEnd
+          };
+          commitValue(result.value);
+          return;
+        }
+        if (event.key !== "Tab") setAllowTabExit(false);
+        if (readOnly || effectiveDisabled) return;
+        const match = findMarkdownHotkeyMatch(toolbarItems, event.nativeEvent);
+        if (match) {
+          event.preventDefault();
+          applyToolbarButton(match);
+        }
+      },
+      [
+        allowTabExit,
+        applyToolbarButton,
+        commitValue,
+        effectiveDisabled,
+        readOnly,
+        tabSize,
+        toolbarItems
+      ]
+    );
+    const hostRest = {};
+    const containerRest = {};
+    for (const [key, val] of Object.entries(restProps)) {
+      if (key === "id" || key === "name" || key.startsWith("data-") || key.startsWith("aria-") || key === "onFocus" || key === "onBlur") {
+        hostRest[key] = val;
+      } else {
+        containerRest[key] = val;
+      }
+    }
+    const previewNode = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(
+          markdownEditorPreviewClasses,
+          currentMode === "split" ? markdownEditorSplitDividerClasses : void 0,
+          !currentValue ? markdownEditorEmptyPreviewClasses : void 0
+        ),
+        role: "region",
+        "aria-label": labels.previewAriaLabel,
+        ...currentValue ? { dangerouslySetInnerHTML: { __html: previewHtml } } : {},
+        children: currentValue ? null : placeholder
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: getMarkdownContainerClasses(effectiveDisabled, className),
+        style: containerStyle,
+        "data-mode": currentMode,
+        ...containerRest,
+        children: [
+          showTopbar && /* @__PURE__ */ jsxs("div", { className: markdownEditorToolbarClasses, children: [
+            showFormattingToolbar ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: markdownEditorToolbarGroupClasses,
+                role: "toolbar",
+                "aria-label": labels.formattingToolbarAriaLabel,
+                onKeyDown: (event) => {
+                  const next = nextToolbarRovingIndex(
+                    formatToolbarIndex,
+                    toolbarButtons.length,
+                    event.key
+                  );
+                  if (next === null) return;
+                  event.preventDefault();
+                  setFormatToolbarIndex(next);
+                  const buttons = event.currentTarget.querySelectorAll("button");
+                  buttons[next]?.focus();
+                },
+                children: toolbarItems.map((item, index) => {
+                  if (isMarkdownToolbarSeparator(item)) {
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: markdownEditorToolbarSeparatorClasses,
+                        role: "separator",
+                        "aria-orientation": "vertical"
+                      },
+                      `separator-${index}`
+                    );
+                  }
+                  const buttonIndex = toolbarButtons.findIndex((entry) => entry.name === item.name);
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: getMarkdownToolbarButtonClasses(false),
+                      title: item.tooltip ?? item.label,
+                      "aria-label": item.tooltip ?? item.label,
+                      tabIndex: buttonIndex === formatToolbarIndex ? 0 : -1,
+                      disabled: effectiveDisabled || readOnly,
+                      onMouseDown: (event) => event.preventDefault(),
+                      onClick: () => applyToolbarButton(item),
+                      children: item.icon ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: item.icon } }) : item.label
+                    },
+                    item.name
+                  );
+                })
+              }
+            ) : /* @__PURE__ */ jsx("span", {}),
+            showModeSwitch && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: markdownEditorToolbarGroupClasses,
+                role: "toolbar",
+                "aria-label": labels.modeToolbarAriaLabel,
+                children: modes.map((item) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: getMarkdownToolbarButtonClasses(currentMode === item),
+                    "aria-label": modeLabels[item],
+                    "aria-pressed": currentMode === item,
+                    disabled: effectiveDisabled,
+                    onClick: () => commitMode(item),
+                    children: modeLabels[item]
+                  },
+                  item
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: getMarkdownBodyClasses(currentMode), children: [
+            showEditor && /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: (node) => {
+                  textareaRef.current = node;
+                  if (typeof ref === "function") ref(node);
+                  else if (ref) ref.current = node;
+                },
+                className: markdownEditorTextareaClasses,
+                value: currentValue,
+                onChange: (event) => commitValue(event.target.value),
+                onKeyDown: handleKeyDown,
+                onFocus,
+                onBlur: (event) => {
+                  formItemControl?.onBlur?.();
+                  onBlur?.(event);
+                },
+                placeholder,
+                readOnly: readOnly || effectiveDisabled,
+                disabled: effectiveDisabled,
+                spellCheck: true,
+                id: effectiveId,
+                name: effectiveName,
+                "aria-label": ariaLabel ?? hostRest["aria-label"] ?? labels.editorAriaLabel,
+                "aria-labelledby": hostRest["aria-labelledby"] ?? formItemControl?.labelId,
+                "aria-multiline": true,
+                ...hostRest
+              }
+            ),
+            showPreview && previewNode
+          ] })
+        ]
+      }
+    );
+  }
+);
+var MarkdownEditor_default = MarkdownEditor;
+
+export {
+  MarkdownEditor,
+  MarkdownEditor_default
+};

package/dist/chunk-RNKUEEIX.mjs

@@ -0,0 +1,350 @@
+import {
+  ImageGroupContext
+} from "./chunk-KVXGNUIE.mjs";
+import {
+  ImagePreview
+} from "./chunk-OYQ6HTLQ.mjs";
+import {
+  usePopup
+} from "./chunk-XKB7ECPU.mjs";
+import {
+  renderOverlayPortal
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Image.tsx
+import React, {
+  forwardRef,
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useContext,
+  useCallback,
+  useId
+} from "react";
+import {
+  applyImageLoadError,
+  applyImageLoadSuccess,
+  classNames,
+  createImageLoadState,
+  formatImagePreviewAriaLabel,
+  getImageImgClasses,
+  getImageLabels,
+  imageBaseClasses,
+  imageFrameClasses,
+  imageErrorClasses,
+  imageErrorIconPath,
+  imageLoadingClasses,
+  imageLoadingOverlayClasses,
+  imageLoadingSpinnerClasses,
+  imageLoadingSpinnerPath,
+  imagePreviewCursorClass,
+  imagePreviewHostClasses,
+  isImageHoverPreviewEnabled,
+  resetImageLoadState,
+  resolveImageHoverPlacement,
+  resolveImagePreviewEnabled,
+  resolveImagePreviewSrc,
+  toCSSSize
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SvgIcon = ({ d, className = "w-8 h-8" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d })
+  }
+);
+var LoadingSpinner = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: imageLoadingSpinnerClasses,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4",
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: imageLoadingSpinnerPath })
+    ]
+  }
+);
+var Image = forwardRef(function Image2({
+  src,
+  alt = "",
+  width,
+  height,
+  fit = "cover",
+  fallbackSrc,
+  preview = true,
+  previewTrigger = "click",
+  lazy = false,
+  srcSet,
+  sizes,
+  crossOrigin,
+  decoding,
+  referrerPolicy,
+  fetchPriority,
+  className,
+  errorRender,
+  placeholderRender,
+  onPreviewOpenChange,
+  onClick,
+  onKeyDown,
+  onLoad,
+  onError,
+  onFocus,
+  onBlur,
+  style,
+  ...props
+}, forwardedRef) {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getImageLabels(config.locale), [config.locale]);
+  const [loadState, setLoadState] = useState(() => createImageLoadState(src, lazy));
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const containerRef = useRef(null);
+  const inViewRef = useRef(!lazy);
+  const group = useContext(ImageGroupContext);
+  const instanceId = useId();
+  const previewEnabled = resolveImagePreviewEnabled(preview, group?.preview);
+  const hoverPreviewEnabled = isImageHoverPreviewEnabled(
+    previewEnabled,
+    previewTrigger,
+    Boolean(group)
+  );
+  const clickPreviewEnabled = previewEnabled;
+  const hoverPlacement = resolveImageHoverPlacement(config.direction);
+  const {
+    currentVisible: hoverVisible,
+    triggerRef: hoverTriggerRef,
+    floatingRef: hoverFloatingRef,
+    floatingStyles: hoverFloatingStyles,
+    floatingClasses: hoverFloatingClasses,
+    positioned: hoverPositioned,
+    overlayTarget: hoverOverlayTarget,
+    setVisible: setHoverVisible,
+    triggerHandlers: hoverTriggerHandlers
+  } = usePopup({
+    trigger: "hover",
+    placement: hoverPlacement,
+    offset: 12,
+    disabled: !hoverPreviewEnabled
+  });
+  const setRootRef = useCallback(
+    (el) => {
+      containerRef.current = el;
+      hoverTriggerRef.current = el;
+    },
+    [hoverTriggerRef]
+  );
+  useEffect(() => {
+    if (!group) return;
+    if (!src) {
+      group.unregister(instanceId);
+      return;
+    }
+    group.register({ id: instanceId, src, alt });
+    return () => {
+      group.unregister(instanceId);
+    };
+  }, [group, instanceId, src, alt]);
+  useEffect(() => {
+    if (!lazy) {
+      inViewRef.current = true;
+      setLoadState(resetImageLoadState(src, false, true));
+      return;
+    }
+    setLoadState(resetImageLoadState(src, true, inViewRef.current));
+    if (inViewRef.current) return;
+    const root = containerRef.current;
+    if (!root) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0]?.isIntersecting) return;
+        inViewRef.current = true;
+        setLoadState(resetImageLoadState(src, true, true));
+        observer.disconnect();
+      },
+      { threshold: 0.01 }
+    );
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [lazy, src]);
+  const handleLoad = useCallback(
+    (event) => {
+      setLoadState((current) => applyImageLoadSuccess(current));
+      onLoad?.(event);
+    },
+    [onLoad]
+  );
+  const handleError = useCallback(
+    (event) => {
+      setLoadState((current) => applyImageLoadError(current, fallbackSrc));
+      onError?.(event);
+    },
+    [fallbackSrc, onError]
+  );
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented || !clickPreviewEnabled) return;
+      if (group) {
+        group.openPreview(instanceId);
+        return;
+      }
+      setPreviewVisible(true);
+      onPreviewOpenChange?.(true);
+    },
+    [clickPreviewEnabled, group, instanceId, onClick, onPreviewOpenChange]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      onKeyDown?.(event);
+    },
+    [onKeyDown]
+  );
+  const handleFocus = useCallback(
+    (event) => {
+      onFocus?.(event);
+      if (hoverPreviewEnabled) setHoverVisible(true);
+    },
+    [hoverPreviewEnabled, onFocus, setHoverVisible]
+  );
+  const handleBlur = useCallback(
+    (event) => {
+      onBlur?.(event);
+      if (hoverPreviewEnabled) setHoverVisible(false);
+    },
+    [hoverPreviewEnabled, onBlur, setHoverVisible]
+  );
+  const containerClasses = useMemo(
+    () => classNames(
+      previewEnabled ? imagePreviewHostClasses : imageBaseClasses,
+      previewEnabled && imagePreviewCursorClass,
+      className
+    ),
+    [previewEnabled, className]
+  );
+  const imgClasses = useMemo(() => getImageImgClasses(fit), [fit]);
+  const containerStyle = useMemo(() => {
+    const next = { ...style };
+    const w = toCSSSize(width);
+    const h = toCSSSize(height);
+    if (w) next.width = w;
+    if (h) next.height = h;
+    return next;
+  }, [width, height, style]);
+  const previewSrc = resolveImagePreviewSrc(loadState, src);
+  const previewName = formatImagePreviewAriaLabel(
+    labels.previewAriaLabel,
+    alt,
+    labels.previewFallbackAlt
+  );
+  const loadingPlaceholder = placeholderRender ?? /* @__PURE__ */ jsx("div", { className: loadState.actualSrc ? imageLoadingOverlayClasses : imageLoadingClasses, children: /* @__PURE__ */ jsx(LoadingSpinner, {}) });
+  const errorPlaceholder = errorRender ?? /* @__PURE__ */ jsx("div", { className: imageErrorClasses, children: /* @__PURE__ */ jsx(SvgIcon, { d: imageErrorIconPath }) });
+  let content;
+  if (loadState.error) {
+    content = errorPlaceholder;
+  } else if (!loadState.actualSrc) {
+    content = loadingPlaceholder;
+  } else {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          ref: forwardedRef,
+          src: loadState.actualSrc,
+          alt: previewEnabled ? "" : alt,
+          className: imgClasses,
+          srcSet,
+          sizes,
+          crossOrigin,
+          decoding,
+          referrerPolicy,
+          fetchPriority,
+          onLoad: handleLoad,
+          onError: handleError
+        }
+      ),
+      loadState.loading ? loadingPlaceholder : null
+    ] });
+  }
+  const hostTag = previewEnabled ? "button" : "div";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    React.createElement(
+      hostTag,
+      {
+        ...props,
+        ref: setRootRef,
+        className: containerClasses,
+        style: containerStyle,
+        type: previewEnabled ? "button" : void 0,
+        "aria-label": previewEnabled ? previewName : void 0,
+        ...hoverPreviewEnabled ? hoverTriggerHandlers : {},
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur
+      },
+      previewEnabled ? React.createElement("span", { className: imageFrameClasses }, content) : content
+    ),
+    !group && previewVisible && previewSrc && /* @__PURE__ */ jsx(
+      ImagePreview,
+      {
+        open: previewVisible,
+        images: [{ src: previewSrc, alt }],
+        currentIndex: 0,
+        onOpenChange: (val) => {
+          setPreviewVisible(val);
+          onPreviewOpenChange?.(val);
+        }
+      }
+    ),
+    hoverPreviewEnabled && hoverVisible && previewSrc && renderOverlayPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: hoverFloatingRef,
+          style: hoverFloatingStyles,
+          className: classNames(
+            hoverFloatingClasses,
+            "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+          ),
+          "data-positioned": hoverPositioned,
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: previewSrc,
+              alt: "",
+              className: "block max-w-[16rem] max-h-[16rem] object-contain"
+            }
+          )
+        }
+      ),
+      hoverOverlayTarget
+    )
+  ] });
+});
+
+export {
+  Image
+};