@allbluecn/ui 0.3.13 → 0.4.0

package/src/layout-panel-top.tsx

@@ -1,160 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-"use client";
-
-import { m, useAnimation } from "motion/react";
-import type { HTMLAttributes } from "react";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-
-import { cn } from "./utils";
-
-export interface LayoutPanelTopIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface LayoutPanelTopIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const LayoutPanelTopIcon = forwardRef<
-  LayoutPanelTopIconHandle,
-  LayoutPanelTopIconProps
->(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
-  const controls = useAnimation();
-  const isControlledRef = useRef(false);
-
-  useImperativeHandle(ref, () => {
-    isControlledRef.current = true;
-
-    return {
-      startAnimation: () => controls.start("animate"),
-      stopAnimation: () => controls.start("normal"),
-    };
-  });
-
-  const handleMouseEnter = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (isControlledRef.current) {
-        onMouseEnter?.(e);
-      } else {
-        controls.start("animate");
-      }
-    },
-    [controls, onMouseEnter]
-  );
-
-  const handleMouseLeave = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (isControlledRef.current) {
-        onMouseLeave?.(e);
-      } else {
-        controls.start("normal");
-      }
-    },
-    [controls, onMouseLeave]
-  );
-
-  return (
-    <div
-      className={cn(className)}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      {...props}
-    >
-      <svg
-        fill="none"
-        height={size}
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        viewBox="0 0 24 24"
-        width={size}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <m.rect
-          animate={controls}
-          height="7"
-          initial="normal"
-          rx="1"
-          variants={{
-            normal: { opacity: 1, translateY: 0 },
-            animate: {
-              opacity: [0, 1],
-              translateY: [-5, 0],
-              transition: {
-                opacity: { duration: 0.5, times: [0.2, 1] },
-                duration: 0.5,
-              },
-            },
-          }}
-          width="18"
-          x="3"
-          y="3"
-        />
-        <m.rect
-          animate={controls}
-          height="7"
-          initial="normal"
-          rx="1"
-          variants={{
-            normal: { opacity: 1, translateX: 0 },
-            animate: {
-              opacity: [0, 1],
-              translateX: [-10, 0],
-              transition: {
-                opacity: { duration: 0.7, times: [0.5, 1] },
-                translateX: { delay: 0.3 },
-                duration: 0.5,
-              },
-            },
-          }}
-          width="7"
-          x="3"
-          y="14"
-        />
-        <m.rect
-          animate={controls}
-          height="7"
-          initial="normal"
-          rx="1"
-          variants={{
-            normal: { opacity: 1, translateX: 0 },
-            animate: {
-              opacity: [0, 1],
-              translateX: [10, 0],
-              transition: {
-                opacity: { duration: 0.8, times: [0.5, 1] },
-                translateX: { delay: 0.4 },
-                duration: 0.5,
-              },
-            },
-          }}
-          width="7"
-          x="14"
-          y="14"
-        />
-      </svg>
-    </div>
-  );
-});
-
-LayoutPanelTopIcon.displayName = "LayoutPanelTopIcon";
-
-export { LayoutPanelTopIcon };

package/src/name-confirm-dialog.tsx

@@ -1,153 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import { useState } from "react";
-import type { ReactNode } from "react";
-import { toast } from "sonner";
-import { useTranslation } from "react-i18next";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./dialog";
-
-interface NameConfirmDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  description: string;
-  confirmText: string;
-  expectedName: string;
-  onConfirm: () => Promise<void>;
-  children?: ReactNode;
-}
-
-export function NameConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  confirmText,
-  expectedName,
-  onConfirm,
-  children,
-}: NameConfirmDialogProps) {
-  const { t } = useTranslation('common')
-  const [inputValue, setInputValue] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-
-  const isValid = inputValue.trim() === expectedName;
-
-  const handleConfirm = async () => {
-    if (!isValid) {
-      setError(t('nameConfirm.invalidName'));
-      return;
-    }
-
-    setLoading(true);
-    setError("");
-
-    try {
-      await onConfirm();
-      setInputValue("");
-      onOpenChange(false);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : t('nameConfirm.operationFailed'));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleOpenChange = (newOpen: boolean) => {
-    if (!newOpen) {
-      setInputValue("");
-      setError("");
-    }
-    onOpenChange(newOpen);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-4">
-          <div className="space-y-2">
-            <p className="text-sm text-muted-foreground">
-              {t('nameConfirm.inputInstruction')} <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    className="inline-flex cursor-pointer items-center font-medium text-foreground hover:text-primary transition-colors"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      void navigator.clipboard.writeText(expectedName);
-                      toast.success(t('nameConfirm.copied'));
-                    }}
-                  >
-                    {expectedName}
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="top" className="text-xs">
-                  {t('nameConfirm.clickToCopy')}
-                </TooltipContent>
-              </Tooltip> {t('nameConfirm.confirmDelete')}
-            </p>
-            <Input
-              value={inputValue}
-              onChange={(e) => {
-                setInputValue(e.target.value);
-                setError("");
-              }}
-              placeholder={t('nameConfirm.inputPlaceholder', { expectedName })}
-            />
-          </div>
-
-          {error && (
-            <p className="text-sm text-destructive">{error}</p>
-          )}
-
-          {children}
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => handleOpenChange(false)}>
-            {t('nameConfirm.cancel')}
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={handleConfirm}
-            disabled={!isValid || loading}
-          >
-            {loading ? t('nameConfirm.deleting') : confirmText}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/nav-float-button.tsx

@@ -1,301 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import React, { useRef, useState, useCallback, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { Button } from "./button";
-import { Minimize2, ArrowDownToLine } from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./tooltip";
-
-type Corner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
-
-interface NavFloatButtonProps {
-  containerRef?: React.RefObject<HTMLDivElement | null>;
-  showExitFullscreen?: boolean;
-  showExpandHeader?: boolean;
-  onExitFullscreen?: () => void;
-  onExpandHeader?: () => void;
-}
-
-const BUTTON_SIZE = 40;
-
-const getCornerRadius = (corner: Corner, mode: "expand" | "exit"): string => {
-  const radius = "14px";
-  const small = "14px";
-
-  if (mode === "expand") {
-    switch (corner) {
-      case "top-left":
-        return `${radius} 0 ${radius} 0`;
-      case "top-right":
-        return `0 ${radius} 0 ${radius}`;
-      case "bottom-left":
-        return `0 ${radius} 0 ${radius}`;
-      case "bottom-right":
-        return `${radius} 0 ${radius} 0`;
-    }
-  } else {
-    switch (corner) {
-      case "top-left":
-        return `0 0 ${small} 0`;
-      case "top-right":
-        return `0 0 0 ${small}`;
-      case "bottom-left":
-        return `0 ${small} 0 0`;
-      case "bottom-right":
-        return `${small} 0 0 0`;
-    }
-  }
-};
-
-const getBorderStyle = (corner: Corner, fullBorder?: boolean) => {
-  if (fullBorder) {
-    return {
-      borderLeftColor: "var(--border)",
-      borderRightColor: "var(--border)",
-      borderTopColor: "var(--border)",
-      borderBottomColor: "var(--border)",
-    };
-  }
-
-  const isLeft = corner === "top-left" || corner === "bottom-left";
-  const isRight = corner === "top-right" || corner === "bottom-right";
-  const isTop = corner === "top-left" || corner === "top-right";
-  const isBottom = corner === "bottom-left" || corner === "bottom-right";
-
-  return {
-    borderLeftColor: isLeft ? "var(--background)" : "var(--border)",
-    borderRightColor: isRight ? "var(--background)" : "var(--border)",
-    borderTopColor: isTop ? "var(--background)" : "var(--border)",
-    borderBottomColor: isBottom ? "var(--background)" : "var(--border)",
-  };
-};
-
-export function NavFloatButton({
-  containerRef: externalContainerRef,
-  showExitFullscreen,
-  showExpandHeader,
-  onExitFullscreen,
-  onExpandHeader,
-}: NavFloatButtonProps) {
-  const { t } = useTranslation('common')
-  const buttonRef = useRef<HTMLDivElement>(null);
-  const containerRef = externalContainerRef as React.RefObject<HTMLDivElement | null> | undefined;
-
-  const [isDragging, setIsDragging] = useState(false);
-  const [corner, setCorner] = useState<Corner>("top-right");
-  const [openTooltip, setOpenTooltip] = useState(false);
-
-  const dragStartRef = useRef({ x: 0, y: 0, offsetX: 0, offsetY: 0 });
-  const isMovedRef = useRef(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-
-  const getInitialPosition = useCallback(() => {
-    const container = containerRef?.current;
-    if (!container) return { x: 0, y: 0 };
-    return { x: container.clientWidth - BUTTON_SIZE + 1, y: -1 };
-  }, []);
-
-  useEffect(() => {
-    if (!showExitFullscreen && !showExpandHeader) return;
-    const container = containerRef?.current;
-    if (!container) return;
-
-    const updatePosition = () => {
-      setPosition(getInitialPosition());
-    };
-
-    updatePosition();
-
-    const ro = new ResizeObserver(updatePosition);
-    ro.observe(container);
-    return () => ro.disconnect();
-  }, [showExitFullscreen, showExpandHeader, getInitialPosition]);
-
-  const handlePointerDown = useCallback((e: React.PointerEvent) => {
-    const btn = buttonRef.current;
-    if (!btn) return;
-
-    e.preventDefault();
-    e.stopPropagation();
-    setOpenTooltip(false);
-
-    btn.setPointerCapture(e.pointerId);
-    setIsDragging(true);
-    isMovedRef.current = false;
-
-    dragStartRef.current = {
-      x: e.clientX,
-      y: e.clientY,
-      offsetX: position.x,
-      offsetY: position.y,
-    };
-
-    document.body.style.cursor = "grabbing";
-    document.body.style.userSelect = "none";
-  }, [position]);
-
-  const handlePointerMove = useCallback((e: React.PointerEvent) => {
-    if (!isDragging) return;
-
-    const container = containerRef?.current;
-    if (!container) return;
-
-    const dx = e.clientX - dragStartRef.current.x;
-    const dy = e.clientY - dragStartRef.current.y;
-
-    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
-      isMovedRef.current = true;
-    }
-
-    const maxX = container.clientWidth - BUTTON_SIZE;
-    const maxY = container.clientHeight - BUTTON_SIZE;
-
-    const newX = Math.max(-1, Math.min(maxX + 1, dragStartRef.current.offsetX + dx));
-    const newY = Math.max(-1, Math.min(maxY + 1, dragStartRef.current.offsetY + dy));
-
-    setPosition({ x: newX, y: newY });
-  }, [isDragging]);
-
-  const handlePointerUp = useCallback((e: React.PointerEvent) => {
-    const btn = buttonRef.current;
-    if (!btn || !isDragging) return;
-
-    btn.releasePointerCapture(e.pointerId);
-    setIsDragging(false);
-    document.body.style.cursor = "";
-    document.body.style.userSelect = "";
-
-    if (!isMovedRef.current) {
-      if (showExitFullscreen && onExitFullscreen) {
-        onExitFullscreen();
-      }
-      if (showExpandHeader && onExpandHeader) {
-        onExpandHeader();
-      }
-      return;
-    }
-
-    const container = containerRef?.current;
-    if (!container) return;
-
-    const maxX = container.clientWidth - BUTTON_SIZE;
-    const maxY = container.clientHeight - BUTTON_SIZE;
-
-    const snapPoints = [
-      { x: -1, y: -1, corner: "top-left" as Corner },
-      { x: maxX + 1, y: -1, corner: "top-right" as Corner },
-      { x: -1, y: maxY + 1, corner: "bottom-left" as Corner },
-      { x: maxX + 1, y: maxY + 1, corner: "bottom-right" as Corner },
-    ];
-
-    let nearest = snapPoints[0];
-    let minDist = Infinity;
-
-    for (const sp of snapPoints) {
-      const dist = Math.hypot(position.x - sp.x, position.y - sp.y);
-      if (dist < minDist) {
-        minDist = dist;
-        nearest = sp;
-      }
-    }
-
-    setCorner(nearest.corner);
-    setPosition({ x: nearest.x, y: nearest.y });
-  }, [isDragging, position, showExitFullscreen, showExpandHeader, onExitFullscreen, onExpandHeader]);
-
-  const mode = showExpandHeader && !showExitFullscreen ? "expand" : "exit";
-  const borderStyle = getBorderStyle(corner, isDragging);
-
-  return (
-    <TooltipProvider>
-      <div
-        ref={buttonRef}
-        className="absolute z-50 select-none"
-        style={{
-          left: 0,
-          top: 0,
-          transform: `translate(${position.x}px, ${position.y}px)`,
-          touchAction: "none",
-          cursor: isDragging ? "grabbing" : "grab",
-          transition: isDragging ? "none" : "transform 0.2s ease-out",
-        }}
-        onPointerDown={handlePointerDown}
-        onPointerMove={handlePointerMove}
-        onPointerUp={handlePointerUp}
-        onPointerCancel={handlePointerUp}
-      >
-        <div
-          className="bg-background/95 backdrop-blur flex items-center justify-center"
-          style={{
-            width: BUTTON_SIZE,
-            height: BUTTON_SIZE,
-            borderRadius: isDragging ? "50%" : getCornerRadius(corner, mode),
-            borderWidth: 1,
-            borderStyle: "solid",
-            ...borderStyle,
-            transition: "border-radius 0.2s ease-out, border-color 0.2s ease-out",
-          }}
-        >
-          {showExitFullscreen && (
-            <Tooltip open={openTooltip} onOpenChange={setOpenTooltip} delayDuration={0}>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-8 w-8"
-                  onMouseEnter={() => !isDragging && setOpenTooltip(true)}
-                  onMouseLeave={() => setOpenTooltip(false)}
-                >
-                  <Minimize2 className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" className="z-[9999]">
-                <p>{t('navFloat.exitFullscreen')}</p>
-              </TooltipContent>
-            </Tooltip>
-          )}
-
-          {showExpandHeader && (
-            <Tooltip open={openTooltip} onOpenChange={setOpenTooltip} delayDuration={0}>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-8 w-8"
-                  onMouseEnter={() => !isDragging && setOpenTooltip(true)}
-                  onMouseLeave={() => setOpenTooltip(false)}
-                >
-                  <ArrowDownToLine className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" className="z-[9999]">
-                <p>{t('navFloat.showHeader')}</p>
-              </TooltipContent>
-            </Tooltip>
-          )}
-        </div>
-      </div>
-    </TooltipProvider>
-  );
-}