@yogiswara/honcho-editor-ui 3.9.2 → 4.0.1

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: "100%",
+            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 {};

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogActions, DialogContent, IconButton, Stack, Typography, Box, } from "@mui/material";
+import useColors from '../../../themes/colors';
+import { CloseOutlined } from "@mui/icons-material";
+export function HBaseDialog(props) {
+    const colors = useColors();
+    return (_jsxs(Dialog, { disableScrollLock: true, open: true, onClose: () => { }, "aria-labelledby": "responsive-dialog-title", PaperProps: {
+            sx: {
+                borderRadius: "28px",
+                // Shrink the max-width and width if it is centered
+                maxWidth: props.isCentered
+                    ? { xs: 328, sm: "260px", md: "260px" }
+                    : { xs: 328, sm: "456px", md: "456px" },
+                width: props.isCentered
+                    ? { xs: "328px", sm: "260px", md: "260px" }
+                    : { xs: "328px", sm: "456px", md: "456px" },
+                margin: { xs: 0, sm: "auto" },
+            },
+        }, children: [_jsx(DialogContent, { sx: { padding: props.hasFullWidthContent
+                        ? { xs: "24px 0 0 0", sm: "24px 0 0 0" }
+                        : { xs: "24px 24px 0 24px", sm: "24px 24px 0 24px" }
+                }, children: _jsxs(Stack, { spacing: 2, direction: "column", children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: props.isCentered ? "center" : "space-between", position: props.isCentered ? "relative" : undefined, sx: {
+                                px: props.hasFullWidthContent
+                                    ? { xs: "24px", sm: "24px" }
+                                    : 0
+                            }, children: [_jsx(Typography, { color: colors.onSurface, textAlign: props.isCentered ? "center" : "left", variant: "labelLarge", children: props.title }), props.onClose && (props.isCentered ? (_jsx(Box, { sx: { position: "absolute", right: 0 }, children: _jsx(CloseButton, { onClick: props.onClose }) })) : (_jsx(CloseButton, { onClick: props.onClose })))] }), _jsx(Typography, { variant: "bodyMedium", textAlign: props.isCentered ? "center" : "left", color: colors.onSurface, children: props.description })] }) }), props.action && (_jsx(DialogActions, { sx: { padding: 3, pt: props.paddingTop || "24px" }, children: _jsx(Stack, { direction: "row", justifyContent: props.isCentered ? "center" : "flex-end", alignItems: "center", gap: 1, sx: props.isCentered ? { width: "100%" } : {}, children: props.action }) }))] }));
+}
+export function HBaseDialogMiddle(props) {
+    const colors = useColors();
+    return (_jsx(Dialog, { disableScrollLock: true, open: true, onClose: () => { }, "aria-labelledby": "responsive-dialog-title", PaperProps: {
+            sx: {
+                borderRadius: "28px",
+                maxWidth: { xs: 328, sm: "456px", md: "456px" },
+                width: { xs: "328px", sm: "456px", md: "456px" },
+                //maxHeight: 306,
+                margin: { xs: 0, sm: "auto" },
+                pb: "24px"
+            },
+        }, children: _jsx(DialogContent, { sx: { padding: props.hasFullWidthContent
+                    ? { xs: "24px 0 0 0", sm: "24px 0 0 0" }
+                    : { xs: "24px 24px 0 24px", sm: "24px 24px 0 24px" }
+            }, children: _jsxs(Stack, { spacing: 2, direction: "column", alignItems: "center", children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: props.onClose ? "space-between" : "center", sx: {
+                            px: props.hasFullWidthContent
+                                ? { xs: "24px", sm: "24px" }
+                                : 0,
+                            width: "100%"
+                        }, children: [_jsx(Typography, { color: colors.onSurface, variant: "labelLarge", children: props.title }), props.onClose && (_jsx(CloseButton, { onClick: props.onClose }))] }), _jsx(Typography, { variant: "bodyMedium", color: colors.onSurface, textAlign: "center", children: props.description }), props.action && (_jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", gap: 1, sx: { pt: 1 }, children: props.action }))] }) }) }));
+}
+export function PositiveButton(props) {
+    const colors = useColors();
+    return (_jsx(Button, { variant: "text", disabled: props.disabled, sx: {
+            padding: props.padding,
+            ":hover": {
+                backgroundColor: "transparent",
+            },
+        }, onClick: props.onClick, children: _jsx(Typography, { variant: "buttonMedium", 
+            // Change color if disabled so the UI reflects the locked state
+            color: props.disabled ? "text.disabled" : colors.onSurface, children: props.text }) }));
+}
+export function NegativeButton(props) {
+    const colors = useColors();
+    return (_jsx(Button, { variant: "text", disabled: props.disabled, sx: {
+            borderRadius: 100,
+            // Change color if disabled so the UI reflects the locked state
+            color: props.disabled ? "text.disabled" : (props.color || colors.error),
+            backgroundColor: props.backgroundColor || "transparent",
+            padding: props.padding,
+            ":hover": {
+                backgroundColor: props.backgroundColorHover || "transparent",
+            },
+        }, onClick: props.onClick, children: props.text }));
+}
+function CloseButton(props) {
+    return (_jsx(IconButton, { onClick: props.onClick, children: _jsx(CloseOutlined, { htmlColor: "black" }) }));
+}

package/dist/components/editor/svg/IcChevron.d.ts

@@ -0,0 +1,5 @@
+import { SvgIconProps } from '@mui/material';
+export declare function IcChevronDown(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IcChevronUp(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IcChevronArrowDarkColor(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IcChevronArrowLightColor(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/svg/IcChevron.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from '@mui/material';
+export function IcChevronDown(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.16406 7.5L9.9974 13.3333L15.8307 7.5", stroke: "#656369", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+;
+export function IcChevronUp(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#clip0_25667_16969)", children: _jsx("path", { d: "M9.9974 1.66797C12.0818 3.94993 13.2664 6.91133 13.3307 10.0013C13.2664 13.0913 12.0818 16.0527 9.9974 18.3346M9.9974 1.66797C7.913 3.94993 6.72844 6.91133 6.66406 10.0013C6.72844 13.0913 7.913 16.0527 9.9974 18.3346M9.9974 1.66797C5.39502 1.66797 1.66406 5.39893 1.66406 10.0013C1.66406 14.6037 5.39502 18.3346 9.9974 18.3346M9.9974 1.66797C14.5998 1.66797 18.3307 5.39893 18.3307 10.0013C18.3307 14.6037 14.5998 18.3346 9.9974 18.3346M2.08075 7.5013H17.9141M2.08073 12.5013H17.9141", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_25667_16969", children: _jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }) }));
+}
+export function IcChevronArrowDarkColor(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.16406 7.5L9.9974 13.3333L15.8307 7.5", stroke: "#1C1B1F", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+export function IcChevronArrowLightColor(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.5 15.8307L13.3333 9.9974L7.5 4.16406", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}

package/dist/components/editor/svg/IcPencilIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material';
+export declare function IcPencilIconWhite(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function IcPencilIconDark(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/svg/IcPencilIcon.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from '@mui/material';
+export function IcPencilIconWhite(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M14.5289 8.57532L11.4247 5.47109M2.5 17.5L5.12647 17.2082C5.44736 17.1725 5.6078 17.1547 5.75777 17.1061C5.89082 17.0631 6.01744 17.0022 6.13419 16.9252C6.26579 16.8384 6.37994 16.7243 6.60824 16.496L16.8571 6.24715C17.7143 5.38993 17.7143 4.00012 16.8571 3.14291C15.9999 2.2857 14.6101 2.2857 13.7529 3.14291L3.50401 13.3918C3.27571 13.6201 3.16155 13.7342 3.07478 13.8658C2.99779 13.9826 2.93693 14.1092 2.89386 14.2422C2.84531 14.3922 2.82748 14.5526 2.79183 14.8735L2.5 17.5Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+;
+export function IcPencilIconDark(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M14.5289 8.57532L11.4247 5.47109M2.5 17.5L5.12647 17.2082C5.44736 17.1725 5.6078 17.1547 5.75777 17.1061C5.89082 17.0631 6.01744 17.0022 6.13419 16.9252C6.26579 16.8384 6.37994 16.7243 6.60824 16.496L16.8571 6.24715C17.7143 5.38993 17.7143 4.00012 16.8571 3.14291C15.9999 2.2857 14.6101 2.2857 13.7529 3.14291L3.50401 13.3918C3.27571 13.6201 3.16155 13.7342 3.07478 13.8658C2.99779 13.9826 2.93693 14.1092 2.89386 14.2422C2.84531 14.3922 2.82748 14.5526 2.79183 14.8735L2.5 17.5Z", stroke: "#1C1B1F", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+;

package/dist/components/editor/svg/IcPlusButton.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconOwnProps } from "@mui/material";
+export default function IcPlusButton(props: SvgIconOwnProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/svg/IcPlusButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+export default function IcPlusButton(props) {
+    return (_jsx(SvgIcon, { ...props, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10.0013 4.16602V15.8327M4.16797 9.99935H15.8346", stroke: "#1C1B1F", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}

package/dist/components/editor/svg/IcTrashIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from '@mui/material';
+export declare function IcTrashIcon(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/svg/IcTrashIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from '@mui/material';
+export function IcTrashIcon(props) {
+    return (_jsx(SvgIcon, { ...props, viewBox: "0 0 20 20", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.5 2.5H12.5M2.5 5H17.5M15.8333 5L15.2489 13.7661C15.1612 15.0813 15.1174 15.7389 14.8333 16.2375C14.5833 16.6765 14.206 17.0294 13.7514 17.2497C13.235 17.5 12.5759 17.5 11.2578 17.5H8.74221C7.42409 17.5 6.76503 17.5 6.24861 17.2497C5.79396 17.0294 5.41674 16.6765 5.16665 16.2375C4.88259 15.7389 4.83875 15.0813 4.75107 13.7661L4.16667 5", stroke: "#DC362E", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+;

package/dist/index.d.ts

@@ -35,11 +35,14 @@ export { default as HModalDialog } from './components/modal/HModalDialog';
 export { default as HModalRename } from './components/modal/HModalRename';
 export { default as HTabColorAdjustmentMobile } from './components/editor/HTabColorAdjustmentMobile';
 export { default as HTabPresetMobile } from './components/editor/HTabPresetMobile';
+export { default as AlbumSectionTabsSelectMode } from './components/editor/SectionAlbum/AlbumSectionTabsSelectMode';
+export { default as AlbumSectionTabs } from './components/editor/SectionAlbum/AlbumSectionTabs';
 export { useAdjustmentHistory, type UseAdjustmentHistoryReturn, type HistoryInfo, type HistoryActions, type HistoryConfig } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type ImageAdjustmentConfig, type BatchHistoryActions, type BatchHistoryState, type HistoryAdjustmentBatch, type HistoryAdjustmentEntry } from './hooks/useAdjustmentHistoryBatch';
 export { usePreset, type UsePresetReturn, type PresetInfo, type PresetActions, type PresetOptions } from './hooks/usePreset';
 export { usePaging, type UsePagingReturn, type PagingInfo, type PagingActions, type PagingOptions } from './hooks/usePaging';
 export { default as useColors } from './themes/colors';
+export { default as useColorsSecond } from './themes/colours';
 export { default as useHonchoTypography } from './themes/honchoTheme';
 export { default as useIsMobile } from './utils/isMobile';
 export { default as useSliderEvents } from './components/editor/sliderComponents/useSliderEvents';

package/dist/index.js

@@ -37,6 +37,8 @@ export { default as HModalDialog } from './components/modal/HModalDialog';
 export { default as HModalRename } from './components/modal/HModalRename';
 export { default as HTabColorAdjustmentMobile } from './components/editor/HTabColorAdjustmentMobile';
 export { default as HTabPresetMobile } from './components/editor/HTabPresetMobile';
+export { default as AlbumSectionTabsSelectMode } from './components/editor/SectionAlbum/AlbumSectionTabsSelectMode';
+export { default as AlbumSectionTabs } from './components/editor/SectionAlbum/AlbumSectionTabs';
 // --- History Hooks ---
 export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';
@@ -46,6 +48,7 @@ export { usePreset } from './hooks/usePreset';
 export { usePaging } from './hooks/usePaging';
 // --- Theme & Utils ---
 export { default as useColors } from './themes/colors';
+export { default as useColorsSecond } from './themes/colours';
 export { default as useHonchoTypography } from './themes/honchoTheme';
 export { default as useIsMobile } from './utils/isMobile';
 export { default as useSliderEvents } from './components/editor/sliderComponents/useSliderEvents';

package/dist/themes/colors.d.ts

@@ -3,10 +3,12 @@ interface Colors {
     surface: string;
     onSurfaceVariant: string;
     onSurfaceVariant1: string;
+    onSurfaceVariantDark: string;
     outlineVariant: string;
     error: string;
     onBackground: string;
     background: string;
+    surfaceVariant2: string;
 }
 export default function useColors(): Colors;
 export {};

package/dist/themes/colors.js

@@ -4,9 +4,11 @@ export default function useColors() {
         surface: "#FFFFFF",
         onSurfaceVariant: "#949494",
         onSurfaceVariant1: "#656369",
+        onSurfaceVariantDark: "#2E2E2E",
         outlineVariant: "#EDEDED",
         error: "#DC362E",
         onBackground: "#000000",
-        background: "#FFFFFF"
+        background: "#FFFFFF",
+        surfaceVariant2: "#F6F6F6"
     };
 }

package/dist/themes/colours.d.ts

@@ -0,0 +1,14 @@
+interface Colors {
+    onSurface: string;
+    surface: string;
+    onSurfaceVariant: string;
+    onSurfaceVariant1: string;
+    onSurfaceVariant2: string;
+    onSurfaceVariantDark: string;
+    outlineVariant: string;
+    error: string;
+    onBackground: string;
+    background: string;
+}
+export default function useColorsSecond(): Colors;
+export {};

package/dist/themes/colours.js

@@ -0,0 +1,14 @@
+export default function useColorsSecond() {
+    return {
+        onSurface: "#1C1B1F",
+        surface: "#FFFFFF",
+        onSurfaceVariant: "#949494",
+        onSurfaceVariant1: "#656369",
+        onSurfaceVariant2: "#F6F6F6",
+        onSurfaceVariantDark: "#2E2E2E",
+        outlineVariant: "#EDEDED",
+        error: "#DC362E",
+        onBackground: "#000000",
+        background: "#FFFFFF"
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "3.9.2",
+  "version": "4.0.1",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",