@yogiswara/honcho-editor-ui 3.9.1 → 4.0.0

package/dist/components/editor/SectionAlbum/AlbumSectionTabs.d.ts

@@ -0,0 +1,22 @@
+import { type FC } from "react";
+export interface AlbumSection {
+    id: string;
+    label: string;
+    description?: string;
+}
+interface Props {
+    sections: AlbumSection[];
+    activeSectionIndex: number;
+    onSectionChange: (index: number) => void;
+    onSectionsReorder: (reordered: AlbumSection[]) => void;
+    onAddSection: (name: string, description: string) => void;
+    onEditSection?: (index: number, name: string, description: string) => void;
+    onDeleteSection?: (sectionId: string) => void;
+    compact?: boolean;
+    selectedMode?: boolean;
+    onLoadMore?: () => void;
+    isLoadingMoreSections?: boolean;
+    hasMoreSections?: boolean;
+}
+declare const AlbumSectionTabs: FC<Props>;
+export default AlbumSectionTabs;

package/dist/components/editor/SectionAlbum/AlbumSectionTabs.js

@@ -0,0 +1,414 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { Box, Typography, Menu, MenuItem, TextField, Stack, Skeleton } from "@mui/material";
+import useHonchoTypography from '../../../themes/honchoTheme';
+import useColorsSecond from '../../../themes/colours';
+import useIsMobile from '../../../utils/isMobile';
+import IcPlusButton from "../svg/IcPlusButton";
+import { IcChevronArrowDarkColor } from "../svg/IcChevron";
+import { IcPencilIconDark } from "../svg/IcPencilIcon";
+import { IcTrashIcon } from "../svg/IcTrashIcon";
+import { HBaseDialog, NegativeButton, PositiveButton } from "../../editor/SectionAlbum/HBaseDialog";
+const DRAG_THRESHOLD = 4;
+const AlbumSectionTabs = ({ sections, activeSectionIndex, onSectionChange, onSectionsReorder, onAddSection, onEditSection, onDeleteSection, compact = false, onLoadMore, isLoadingMoreSections = false, hasMoreSections = false, }) => {
+    const isMobile = useIsMobile();
+    const colors = useColorsSecond();
+    const typography = useHonchoTypography();
+    // ---------- drag state ----------
+    const [dragIndex, setDragIndex] = useState(null);
+    const [overIndex, setOverIndex] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
+    const [openMenuIndex, setOpenMenuIndex] = useState(null);
+    const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+    const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+    const [isCreateSectionDialogOpen, setIsCreateSectionDialogOpen] = useState(false);
+    const [selectedSectionIndex, setSelectedSectionIndex] = useState(null);
+    const [sectionName, setSectionName] = useState("");
+    const [sectionDescription, setSectionDescription] = useState("");
+    const pointerDownPos = useRef(null);
+    const pointerDownIndex = useRef(null);
+    const dragStarted = useRef(false);
+    const scrollRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    // Prevents firing onLoadMore multiple times for the same scroll position
+    const isLoadingMoreRef = useRef(false);
+    const updateScrollButtons = () => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        setCanScrollLeft(el.scrollLeft > 0);
+        setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+        // Trigger load-more when within 80px of the right edge
+        const nearRightEdge = el.scrollLeft + el.clientWidth >= el.scrollWidth - 80;
+        if (nearRightEdge && hasMoreSections && !isLoadingMoreSections && !isLoadingMoreRef.current) {
+            isLoadingMoreRef.current = true;
+            onLoadMore?.();
+        }
+        if (!nearRightEdge) {
+            isLoadingMoreRef.current = false;
+        }
+    };
+    useEffect(() => {
+        updateScrollButtons();
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        el.addEventListener("scroll", updateScrollButtons);
+        const ro = new ResizeObserver(updateScrollButtons);
+        ro.observe(el);
+        return () => {
+            el.removeEventListener("scroll", updateScrollButtons);
+            ro.disconnect();
+        };
+    }, [sections, hasMoreSections, isLoadingMoreSections]);
+    const scrollBy = (direction) => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        el.scrollBy({ left: direction === "left" ? -160 : 160, behavior: "smooth" });
+    };
+    const activeSection = sections[activeSectionIndex]; // Get the current section
+    const handleEditSection = (index) => {
+        setOpenMenuIndex(null);
+        setMenuAnchorEl(null);
+        setSelectedSectionIndex(index);
+        setSectionName(sections[index].label);
+        setSectionDescription(sections[index].description || "");
+        setIsEditDialogOpen(true);
+    };
+    const handleDeleteSection = (index) => {
+        setOpenMenuIndex(null);
+        setMenuAnchorEl(null);
+        setSelectedSectionIndex(index);
+        setIsDeleteDialogOpen(true);
+    };
+    const handleCreateSection = () => {
+        setOpenMenuIndex(null);
+        setMenuAnchorEl(null);
+        setSectionName("");
+        setSectionDescription("");
+        setIsCreateSectionDialogOpen(true);
+    };
+    // ---------- pointer handlers ----------
+    const handlePointerDown = (e, index) => {
+        pointerDownPos.current = { x: e.clientX, y: e.clientY };
+        pointerDownIndex.current = index;
+        dragStarted.current = false;
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const handlePointerMove = (e, index) => {
+        if (pointerDownPos.current === null)
+            return;
+        const dx = Math.abs(e.clientX - pointerDownPos.current.x);
+        const dy = Math.abs(e.clientY - pointerDownPos.current.y);
+        if (!dragStarted.current && (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD)) {
+            dragStarted.current = true;
+            setDragIndex(pointerDownIndex.current);
+            setIsDragging(true);
+        }
+        if (dragStarted.current) {
+            setCursorPos({ x: e.clientX, y: e.clientY });
+            const elementUnderPointer = document.elementFromPoint(e.clientX, e.clientY);
+            if (elementUnderPointer) {
+                const tabNode = elementUnderPointer.closest('[data-index]');
+                if (tabNode) {
+                    const hoveredIndex = parseInt(tabNode.getAttribute('data-index') || '-1', 10);
+                    if (hoveredIndex !== -1 && hoveredIndex !== overIndex) {
+                        setOverIndex(hoveredIndex);
+                    }
+                }
+            }
+        }
+    };
+    const handlePointerUp = (e, index) => {
+        if (!dragStarted.current) {
+            onSectionChange(index);
+        }
+        else if (dragIndex !== null && overIndex !== null && dragIndex !== overIndex) {
+            const reordered = [...sections];
+            const [moved] = reordered.splice(dragIndex, 1);
+            reordered.splice(overIndex, 0, moved);
+            let newActive = activeSectionIndex;
+            if (activeSectionIndex === dragIndex) {
+                newActive = overIndex;
+            }
+            else if (dragIndex < activeSectionIndex && overIndex >= activeSectionIndex) {
+                newActive = activeSectionIndex - 1;
+            }
+            else if (dragIndex > activeSectionIndex && overIndex <= activeSectionIndex) {
+                newActive = activeSectionIndex + 1;
+            }
+            onSectionsReorder(reordered);
+            onSectionChange(newActive);
+        }
+        setDragIndex(null);
+        setOverIndex(null);
+        setIsDragging(false);
+        dragStarted.current = false;
+        pointerDownPos.current = null;
+        pointerDownIndex.current = null;
+    };
+    const handlePointerCancel = () => {
+        setDragIndex(null);
+        setOverIndex(null);
+        setIsDragging(false);
+        dragStarted.current = false;
+        pointerDownPos.current = null;
+        pointerDownIndex.current = null;
+    };
+    useEffect(() => {
+        if (!scrollRef.current)
+            return;
+        const timeout = setTimeout(() => {
+            const activeTabNode = scrollRef.current?.querySelector(`[data-index="${activeSectionIndex}"]`);
+            if (activeTabNode) {
+                activeTabNode.scrollIntoView({
+                    behavior: "smooth",
+                    block: "nearest",
+                    inline: "center",
+                });
+            }
+        }, 50);
+        return () => clearTimeout(timeout);
+    }, [activeSectionIndex]);
+    // ---------- render ----------
+    return (_jsxs(Box, { sx: {
+            // Removed the border from here, moved to the tab row so it sits above the description
+            ...(compact ? {
+                width: "100%",
+            } : {
+                width: "100vw",
+                position: "relative",
+                left: "50%",
+                right: "50%",
+                marginLeft: "-50vw",
+                marginRight: "-50vw",
+            }),
+        }, children: [_jsxs(Box, { sx: { position: "relative" }, children: [!isMobile && canScrollLeft && (_jsx(Box, { onClick: () => scrollBy("left"), sx: {
+                            position: "absolute",
+                            left: 0,
+                            top: 0,
+                            bottom: "1px",
+                            zIndex: 2,
+                            display: "flex",
+                            alignItems: "center",
+                            px: "4px",
+                            pl: "24px",
+                            cursor: "pointer",
+                            background: colors.surface,
+                        }, children: _jsx(IcChevronArrowDarkColor, { sx: {
+                                width: "20px",
+                                height: "20px",
+                                color: colors.onSurface,
+                                transform: "rotate(90deg)",
+                            } }) })), !isMobile && canScrollRight && (_jsx(Box, { onClick: () => scrollBy("right"), sx: {
+                            position: "absolute",
+                            right: 0,
+                            top: 0,
+                            bottom: "1px",
+                            zIndex: 2,
+                            display: "flex",
+                            alignItems: "center",
+                            px: "4px",
+                            pr: "24px",
+                            cursor: "pointer",
+                            background: colors.surface,
+                        }, children: _jsx(IcChevronArrowDarkColor, { sx: {
+                                width: "20px",
+                                height: "20px",
+                                color: colors.onSurface,
+                                transform: "rotate(270deg)",
+                            } }) })), _jsxs(Box, { ref: scrollRef, sx: {
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "flex-end", // Aligns active bars to bottom
+                            px: isMobile ? "16px" : "24px",
+                            gap: "20px",
+                            overflowX: "auto",
+                            overflowY: "visible",
+                            "&::-webkit-scrollbar": { display: "none" },
+                            scrollbarWidth: "none",
+                            userSelect: "none",
+                            borderBottom: "1px solid", // Bottom border lives here now
+                            borderColor: colors.outlineVariant,
+                        }, children: [sections.map((section, index) => {
+                                const isActive = index === activeSectionIndex;
+                                const isBeingDragged = index === dragIndex;
+                                const isDropTarget = index === overIndex && dragIndex !== null && dragIndex !== overIndex;
+                                return (_jsxs(Box, { "data-index": index, onPointerDown: (e) => handlePointerDown(e, index), onPointerMove: (e) => handlePointerMove(e, index), onPointerUp: (e) => handlePointerUp(e, index), onPointerCancel: handlePointerCancel, sx: {
+                                        position: "relative",
+                                        overflow: "visible",
+                                        flexShrink: 0,
+                                        display: "flex",
+                                        alignItems: "center",
+                                        cursor: isDragging ? "grabbing" : "pointer",
+                                        height: "44px", // FIXED HEIGHT to ensure perfect alignment
+                                        boxSizing: "border-box",
+                                        px: "0px",
+                                        // active indicator
+                                        "&::after": {
+                                            content: '""',
+                                            position: "absolute",
+                                            bottom: "0px",
+                                            left: 0,
+                                            right: 0,
+                                            height: "1.5px",
+                                            backgroundColor: isActive ? colors.onSurface : "transparent",
+                                            transition: "background-color 0.15s ease",
+                                        },
+                                        // drop-target indicator
+                                        "&::before": isDropTarget
+                                            ? {
+                                                content: '""',
+                                                position: "absolute",
+                                                // Dynamic placement based on drag direction
+                                                left: dragIndex !== null && dragIndex > index ? "-10px" : "auto",
+                                                right: dragIndex !== null && dragIndex < index ? "-10px" : "auto",
+                                                top: "20%",
+                                                height: "60%",
+                                                width: "2px",
+                                                borderRadius: "2px",
+                                                backgroundColor: colors.onSurface,
+                                            }
+                                            : {},
+                                        opacity: isBeingDragged ? 0.35 : 1,
+                                        transform: isBeingDragged ? "scale(0.97)" : "scale(1)",
+                                        transition: "opacity 0.1s ease, transform 0.1s ease",
+                                        touchAction: "none",
+                                    }, children: [_jsx(Typography, { sx: {
+                                                ...typography.bodyMedium,
+                                                color: colors.onSurface,
+                                                opacity: isActive ? 1 : 0.6,
+                                                transition: "opacity 0.15s ease",
+                                                whiteSpace: "nowrap",
+                                                lineHeight: 1,
+                                            }, children: section.label }), _jsx(Box, { component: "span", className: "chevron-toggle", onPointerDown: (e) => {
+                                                e.stopPropagation();
+                                            }, onClick: (e) => {
+                                                e.stopPropagation();
+                                                if (openMenuIndex === index) {
+                                                    setOpenMenuIndex(null);
+                                                    setMenuAnchorEl(null);
+                                                }
+                                                else {
+                                                    setOpenMenuIndex(index);
+                                                    setMenuAnchorEl(e.currentTarget);
+                                                }
+                                            }, sx: { display: "flex", alignItems: "center", ml: "4px" }, children: _jsx(IcChevronArrowDarkColor, { sx: {
+                                                    width: "16px",
+                                                    height: "16px",
+                                                    color: colors.onSurface,
+                                                    opacity: (isActive || isMobile) ? 1 : 0,
+                                                    visibility: isBeingDragged ? "hidden" : "visible",
+                                                    transform: openMenuIndex === index ? 'rotate(180deg)' : 'rotate(0deg)',
+                                                    transition: 'transform 0.2s ease, opacity 0.15s ease'
+                                                } }) })] }, section.id));
+                            }), isLoadingMoreSections && (_jsx(Box, { sx: {
+                                    flexShrink: 0,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    height: "44px",
+                                    px: "4px",
+                                    opacity: 0.4,
+                                }, children: _jsx(Skeleton, { variant: "rectangular", width: 80, height: 24 }) })), _jsxs(Box, { onClick: handleCreateSection, sx: {
+                                    flexShrink: 0,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    cursor: "pointer",
+                                    height: "44px", // FIXED HEIGHT matches the section tabs
+                                    boxSizing: "border-box",
+                                    px: "0px",
+                                    gap: "4px",
+                                    opacity: 0.5,
+                                    "&:hover": {
+                                        opacity: 1,
+                                    },
+                                    transition: "opacity 0.15s ease",
+                                }, children: [_jsx(IcPlusButton, { sx: { width: "20px", height: "20px" } }), _jsx(Typography, { sx: {
+                                            ...typography.labelMedium,
+                                            color: colors.onSurface,
+                                            whiteSpace: "nowrap",
+                                        }, children: "Add section" })] })] })] }), activeSection?.description && (_jsx(Box, { sx: {
+                    width: "100%",
+                    px: isMobile ? "18px" : "24px",
+                    pt: "32px", // Space between tabs and text
+                    pb: "0px", // Tiny space before filter menu
+                }, children: _jsx(Typography, { sx: {
+                        ...typography.bodyMedium,
+                        color: colors.onSurface, // Subtle grey color for description
+                        textAlign: "center",
+                        whiteSpace: "pre-wrap"
+                    }, children: activeSection.description }) })), _jsxs(Menu, { anchorEl: menuAnchorEl, open: Boolean(menuAnchorEl) && openMenuIndex !== null, onClose: () => {
+                    setMenuAnchorEl(null);
+                    setOpenMenuIndex(null);
+                }, slotProps: {
+                    paper: {
+                        sx: {
+                            backgroundColor: colors.surface,
+                            border: "1px solid",
+                            borderColor: colors.outlineVariant,
+                            borderRadius: "8px",
+                            boxShadow: "0px 4px 12px rgba(0,0,0,0.08)",
+                            minWidth: "105px",
+                            mt: "4px",
+                        }
+                    }
+                }, children: [_jsxs(MenuItem, { onClick: () => {
+                            if (openMenuIndex !== null)
+                                handleEditSection(openMenuIndex);
+                        }, sx: { display: "flex", alignItems: "center", py: "10px", px: "16px" }, children: [_jsx(IcPencilIconDark, { sx: { width: "20px", height: "20px", color: colors.onSurface, mr: "8px" } }), _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: "Edit" })] }), _jsxs(MenuItem, { onClick: () => {
+                            if (openMenuIndex !== null)
+                                handleDeleteSection(openMenuIndex);
+                        }, sx: { display: "flex", alignItems: "center", py: "10px", px: "16px" }, children: [_jsx(IcTrashIcon, { sx: { width: "20px", height: "20px", color: colors.error, mr: "8px" } }), _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.error }, children: "Delete" })] })] }), isDragging && dragIndex !== null && (_jsx(Box, { sx: {
+                    position: "fixed",
+                    top: cursorPos.y - 14,
+                    left: cursorPos.x + 12,
+                    pointerEvents: "none",
+                    zIndex: 9999,
+                    backgroundColor: colors.surface,
+                    border: "1px solid",
+                    borderColor: colors.outlineVariant,
+                    borderRadius: "6px",
+                    px: "10px",
+                    py: "6px",
+                    boxShadow: "0px 4px 12px rgba(0,0,0,0.12)",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                }, children: _jsx(Typography, { sx: {
+                        ...typography.bodyMedium,
+                        color: colors.onSurface,
+                        lineHeight: 1,
+                        whiteSpace: "nowrap",
+                    }, children: sections[dragIndex]?.label }) })), isCreateSectionDialogOpen && (_jsx(HBaseDialog, { title: "Add section", description: 
+                // ADDED onKeyDown to stop propagation to the background gallery
+                _jsxs(Stack, { spacing: "12px", onKeyDown: (e) => e.stopPropagation(), children: [_jsxs(Box, { sx: { backgroundColor: colors.onSurfaceVariant2, py: "8px", px: "16px", borderRadius: "4px" }, children: [_jsx(Typography, { sx: { ...typography.bodySmall, color: colors.onSurfaceVariant1 }, children: "Section name" }), _jsx(TextField, { autoFocus: true, placeholder: "Enter section name", type: "text", fullWidth: true, variant: "standard", InputProps: { disableUnderline: true }, value: sectionName, onChange: (e) => setSectionName(e.target.value), sx: { "& .MuiInputBase-input": { padding: 0, marginTop: "4px", ...typography.bodyMedium } } })] }), _jsxs(Box, { sx: { backgroundColor: colors.onSurfaceVariant2, py: "8px", px: "16px", borderRadius: "4px" }, children: [_jsx(Typography, { sx: { ...typography.bodySmall, color: colors.onSurfaceVariant1 }, children: "Description (Optional)" }), _jsx(TextField, { placeholder: "Add a description...", type: "text", fullWidth: true, multiline: true, rows: 3, variant: "standard", InputProps: { disableUnderline: true }, value: sectionDescription, onChange: (e) => setSectionDescription(e.target.value), sx: { "& .MuiInputBase-input": { padding: 0, marginTop: "4px", ...typography.bodyMedium } } })] })] }), action: _jsxs(_Fragment, { children: [_jsx(PositiveButton, { text: "Cancel", onClick: () => setIsCreateSectionDialogOpen(false) }), _jsx(PositiveButton, { text: "Save", disabled: !sectionName.trim(), onClick: () => {
+                                onAddSection(sectionName, sectionDescription);
+                                setIsCreateSectionDialogOpen(false);
+                            } })] }) })), isEditDialogOpen && selectedSectionIndex !== null && (_jsx(HBaseDialog, { title: "Edit section", description: 
+                // ADDED onKeyDown to stop propagation to the background gallery
+                _jsxs(Stack, { spacing: "12px", onKeyDown: (e) => e.stopPropagation(), children: [_jsxs(Box, { sx: { backgroundColor: colors.onSurfaceVariant2, py: "8px", px: "16px", borderRadius: "4px" }, children: [_jsx(Typography, { sx: { ...typography.bodySmall, color: colors.onSurfaceVariant1 }, children: "Section name" }), _jsx(TextField, { autoFocus: true, placeholder: "Enter section name", type: "text", fullWidth: true, variant: "standard", InputProps: { disableUnderline: true }, value: sectionName, onChange: (e) => setSectionName(e.target.value), sx: { "& .MuiInputBase-input": { padding: 0, marginTop: "4px", ...typography.bodyMedium } } })] }), _jsxs(Box, { sx: { backgroundColor: colors.onSurfaceVariant2, py: "8px", px: "16px", borderRadius: "4px" }, children: [_jsx(Typography, { sx: { ...typography.bodySmall, color: colors.onSurfaceVariant1 }, children: "Description (Optional)" }), _jsx(TextField, { placeholder: "Add a description...", type: "text", fullWidth: true, multiline: true, rows: 3, variant: "standard", InputProps: { disableUnderline: true }, value: sectionDescription, onChange: (e) => setSectionDescription(e.target.value), sx: { "& .MuiInputBase-input": { padding: 0, marginTop: "4px", ...typography.bodyMedium } } })] })] }), action: _jsxs(_Fragment, { children: [_jsx(PositiveButton, { text: "Cancel", onClick: () => setIsEditDialogOpen(false) }), _jsx(PositiveButton, { text: "Save", disabled: !sectionName.trim(), onClick: () => {
+                                if (onEditSection) {
+                                    onEditSection(selectedSectionIndex, sectionName, sectionDescription);
+                                }
+                                setIsEditDialogOpen(false);
+                            } })] }) })), isDeleteDialogOpen && selectedSectionIndex !== null && (_jsx(HBaseDialog, { title: "Delete section?", description: "Permanently delete this section and its photos.", action: _jsxs(_Fragment, { children: [_jsx(PositiveButton, { text: "Cancel", onClick: () => setIsDeleteDialogOpen(false) }), _jsx(NegativeButton, { text: "Delete", onClick: () => {
+                                // 1. Fire the actual delete function
+                                if (onDeleteSection) {
+                                    onDeleteSection(sections[selectedSectionIndex].id);
+                                }
+                                // 2. Adjust the active tab if you are deleting the one you are currently viewing
+                                const reorderedLength = sections.length - 1;
+                                const newActive = activeSectionIndex >= reorderedLength
+                                    ? Math.max(0, reorderedLength - 1)
+                                    : activeSectionIndex === selectedSectionIndex
+                                        ? Math.max(0, selectedSectionIndex - 1)
+                                        : activeSectionIndex;
+                                onSectionChange(newActive);
+                                setIsDeleteDialogOpen(false);
+                            } })] }) }))] }));
+};
+export default AlbumSectionTabs;

package/dist/components/editor/SectionAlbum/AlbumSectionTabsSelectMode.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from "react";
+import { AlbumSection } from "./AlbumSectionTabs";
+interface Props {
+    sections: AlbumSection[];
+    activeSectionIndex: number;
+    onSectionChange: (index: number) => void;
+    selectedCounts?: Record<string, number>;
+    onLoadMore?: () => void;
+    isLoadingMoreSections?: boolean;
+    hasMoreSections?: boolean;
+    isEditorSelectionMode?: boolean;
+}
+declare const AlbumSectionTabsSelectMode: FC<Props>;
+export default AlbumSectionTabsSelectMode;

package/dist/components/editor/SectionAlbum/AlbumSectionTabsSelectMode.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { Box, Typography, Skeleton } from "@mui/material"; // Added Skeleton
+import useHonchoTypography from '../../../themes/honchoTheme';
+import useColors from '../../../themes/colors';
+import useIsMobile from '../../../utils/isMobile';
+import { IcChevronArrowDarkColor, IcChevronArrowLightColor } from "../svg/IcChevron";
+const AlbumSectionTabsSelectMode = ({ sections, activeSectionIndex, onSectionChange, selectedCounts = {}, onLoadMore, isLoadingMoreSections = false, hasMoreSections = false, isEditorSelectionMode = false, }) => {
+    const isMobile = useIsMobile();
+    const colors = useColors();
+    const typography = useHonchoTypography();
+    // --- Pagination / Scroll Logic ---
+    const scrollRef = useRef(null);
+    const [showLeftButton, setShowLeftButton] = useState(false);
+    const [showRightButton, setShowRightButton] = useState(false);
+    // NEW: Prevent firing multiple load requests at the same scroll position
+    const isLoadingMoreRef = useRef(false);
+    const checkScrollButtons = () => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = el;
+        setShowLeftButton(scrollLeft > 0);
+        setShowRightButton(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
+        // NEW: Trigger load-more when within 80px of the right edge
+        const nearRightEdge = scrollLeft + clientWidth >= scrollWidth - 80;
+        if (nearRightEdge && hasMoreSections && !isLoadingMoreSections && !isLoadingMoreRef.current) {
+            isLoadingMoreRef.current = true;
+            if (onLoadMore)
+                onLoadMore();
+        }
+        if (!nearRightEdge) {
+            isLoadingMoreRef.current = false;
+        }
+    };
+    useEffect(() => {
+        checkScrollButtons();
+        window.addEventListener("resize", checkScrollButtons);
+        return () => window.removeEventListener("resize", checkScrollButtons);
+    }, [sections, hasMoreSections, isLoadingMoreSections]);
+    const handleScroll = (direction) => {
+        if (scrollRef.current) {
+            const scrollAmount = 200;
+            scrollRef.current.scrollBy({
+                left: direction === "left" ? -scrollAmount : scrollAmount,
+                behavior: "smooth",
+            });
+        }
+    };
+    const onScroll = () => {
+        checkScrollButtons();
+    };
+    // Auto-scroll to active tab when changed
+    useEffect(() => {
+        if (!scrollRef.current)
+            return;
+        const timeout = setTimeout(() => {
+            const activeTabNode = scrollRef.current?.querySelector(`[data-index="${activeSectionIndex}"]`);
+            if (activeTabNode) {
+                activeTabNode.scrollIntoView({
+                    behavior: "smooth",
+                    block: "nearest",
+                    inline: "center",
+                });
+            }
+        }, 50);
+        return () => clearTimeout(timeout);
+    }, [activeSectionIndex]);
+    return (_jsxs(Box, { sx: {
+            borderBottom: "1px solid",
+            borderColor: isEditorSelectionMode ? colors.onSurfaceVariantDark : colors.outlineVariant,
+            width: "100vw",
+            position: "relative",
+            left: "50%",
+            right: "50%",
+            marginLeft: "-50vw",
+            marginRight: "-50vw",
+            backgroundColor: isEditorSelectionMode ? colors.onBackground : colors.surface,
+            display: "flex",
+            alignItems: "center",
+        }, children: [!isMobile && showLeftButton && (_jsx(Box, { sx: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    bottom: "1px",
+                    display: "flex",
+                    alignItems: "center",
+                    background: isEditorSelectionMode ? colors.onBackground : colors.surface,
+                    paddingRight: "24px",
+                    paddingLeft: "16px",
+                    zIndex: 2,
+                }, children: isEditorSelectionMode ?
+                    _jsx(IcChevronArrowLightColor, { sx: {
+                            width: "20px",
+                            height: "20px",
+                            color: colors.onSurface,
+                            transform: "rotate(180deg)",
+                        } }) :
+                    _jsx(IcChevronArrowDarkColor, { sx: {
+                            width: "20px",
+                            height: "20px",
+                            color: colors.onSurface,
+                            transform: "rotate(90deg)",
+                        } }) })), _jsxs(Box, { ref: scrollRef, onScroll: onScroll, sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "flex-end",
+                    px: isMobile ? "18px" : "24px",
+                    gap: "24px",
+                    overflowX: "auto",
+                    width: "100%",
+                    "&::-webkit-scrollbar": { display: "none" },
+                    msOverflowStyle: "none",
+                    scrollbarWidth: "none",
+                }, children: [sections.map((section, index) => {
+                        const isActive = index === activeSectionIndex;
+                        const selectedCount = selectedCounts[section.id] || 0;
+                        return (_jsxs(Box, { "data-index": index, onClick: () => onSectionChange(index), sx: {
+                                display: "flex",
+                                alignItems: "center",
+                                pb: "12px",
+                                pt: "12px",
+                                cursor: "pointer",
+                                borderBottom: isActive ? "2px solid" : "2px solid transparent",
+                                borderColor: (isEditorSelectionMode ? (isActive ? colors.background : "transparent") : (isActive ? colors.onSurface : "transparent")),
+                                whiteSpace: "nowrap",
+                                transition: "all 0.2s ease-in-out",
+                            }, children: [_jsx(Typography, { sx: {
+                                        ...typography.bodyMedium,
+                                        color: (isEditorSelectionMode ? (isActive ? colors.background : colors.background) : (isActive ? colors.onSurface : colors.onSurfaceVariant1)),
+                                    }, children: section.label }), selectedCount > 0 && (_jsx(Box, { sx: {
+                                        ml: "6px",
+                                        backgroundColor: isEditorSelectionMode ? colors.background : colors.onSurface,
+                                        color: isEditorSelectionMode ? colors.onSurface : colors.surface,
+                                        borderRadius: "10px",
+                                        minWidth: "18px",
+                                        height: "18px",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        px: "5px",
+                                    }, children: _jsx(Typography, { sx: {
+                                            ...typography.labelSmall,
+                                            color: isEditorSelectionMode ? colors.onSurface : colors.surface,
+                                            lineHeight: 1,
+                                            fontSize: "11px",
+                                            // fontWeight: 600,
+                                        }, children: selectedCount }) }))] }, section.id));
+                    }), isLoadingMoreSections && (_jsx(Box, { sx: {
+                            flexShrink: 0,
+                            display: "flex",
+                            alignItems: "center",
+                            height: "44px",
+                            px: "4px",
+                            opacity: 0.4,
+                        }, children: _jsx(Skeleton, { variant: "rectangular", width: 80, height: 24 }) }))] }), !isMobile && showRightButton && (_jsx(Box, { onClick: () => handleScroll("right"), sx: {
+                    position: "absolute",
+                    right: 0,
+                    top: 0,
+                    bottom: "1px",
+                    display: "flex",
+                    alignItems: "center",
+                    background: isEditorSelectionMode ? colors.onBackground : colors.surface,
+                    paddingLeft: "24px",
+                    paddingRight: "16px",
+                    zIndex: 2,
+                }, children: isEditorSelectionMode ?
+                    _jsx(IcChevronArrowLightColor, { sx: {
+                            width: "20px",
+                            height: "20px",
+                            color: colors.onSurface,
+                        } }) :
+                    _jsx(IcChevronArrowDarkColor, { sx: {
+                            width: "20px",
+                            height: "20px",
+                            color: colors.onSurface,
+                            transform: "rotate(270deg)",
+                        } }) }))] }));
+};
+export default AlbumSectionTabsSelectMode;

package/dist/components/editor/SectionAlbum/HBaseDialog.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactElement } from "react";
+interface Props {
+    title: React.ReactNode;
+    description: React.ReactNode | ReactElement;
+    onClose?: () => void;
+    action?: React.ReactNode;
+    paddingTop?: string;
+    hasFullWidthContent?: boolean;
+    isCentered?: boolean;
+}
+export declare function HBaseDialog(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare function HBaseDialogMiddle(props: Props): import("react/jsx-runtime").JSX.Element;
+interface ButtonProps {
+    text: string;
+    onClick: () => void;
+    color?: string;
+    backgroundColor?: string;
+    backgroundColorHover?: string;
+    padding?: string;
+    disabled?: boolean;
+}
+export declare function PositiveButton(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function NegativeButton(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};