luna-plus 0.0.5

package/dist/Watermark/Watermark.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { onMount } from 'svelte'
+
+    interface WatermarkProps {
+        content?: string | string[]
+        fontSize?: number
+        fontColor?: string
+        fontFamily?: string
+        fontWeight?: number | string
+        rotate?: number
+        width?: number
+        height?: number
+        gap?: [number, number]
+        offset?: [number, number]
+        zIndex?: number
+        image?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let {
+        content = '',
+        fontSize = 14,
+        fontColor,
+        fontFamily = 'sans-serif',
+        fontWeight = 'normal',
+        rotate = -22,
+        width = 120,
+        height = 64,
+        gap = [100, 100],
+        offset = [0, 0],
+        zIndex = 9,
+        image,
+        children,
+        class: cls = '',
+        ...attrs
+    }: WatermarkProps = $props()
+
+    let watermarkUrl = $state('')
+    let isDark = $state(false)
+    let rootEl = $state<HTMLDivElement | null>(null)
+    let generateSeq = 0
+
+    const computeIsDark = (): boolean => {
+        if (rootEl?.closest?.('.dark')) return true
+        return document.documentElement.classList.contains('dark') || document.body.classList.contains('dark')
+    }
+
+    const getCssDefaultFontColor = (): string | undefined => {
+        if (!rootEl) return undefined
+        const raw = getComputedStyle(rootEl).getPropertyValue('--lm-watermark-font-color').trim()
+        return raw || undefined
+    }
+
+    const getDefaultFontColor = (): string => {
+        return isDark ? 'rgba(255, 255, 255, 0.22)' : 'rgba(0, 0, 0, 0.15)'
+    }
+
+    const generateWatermark = (): void => {
+        const seq = ++generateSeq
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+        if (!ctx) return
+
+        const ratio = window.devicePixelRatio || 1
+        const logicalWidth = width + gap[0]
+        const logicalHeight = height + gap[1]
+        const canvasWidth = logicalWidth * ratio
+        const canvasHeight = logicalHeight * ratio
+
+        canvas.width = canvasWidth
+        canvas.height = canvasHeight
+
+        ctx.imageSmoothingEnabled = true
+        ctx.imageSmoothingQuality = 'high'
+
+        ctx.scale(ratio, ratio)
+        ctx.translate(logicalWidth / 2, logicalHeight / 2)
+        ctx.rotate((rotate * Math.PI) / 180)
+
+        if (image) {
+            const img = new Image()
+            img.crossOrigin = 'anonymous'
+            img.onload = () => {
+                if (seq !== generateSeq) return
+                ctx.drawImage(img, -width / 2, -height / 2, width, height)
+                watermarkUrl = canvas.toDataURL()
+            }
+            img.src = image
+        } else {
+            ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`
+            ctx.fillStyle = fontColor ?? getCssDefaultFontColor() ?? getDefaultFontColor()
+            ctx.textAlign = 'center'
+            ctx.textBaseline = 'middle'
+
+            const contents = Array.isArray(content) ? content : [content]
+            const lineHeight = fontSize * 1.5
+            const startY = -((contents.length - 1) * lineHeight) / 2
+
+            contents.forEach((text, index) => {
+                ctx.fillText(text, 0, startY + index * lineHeight)
+            })
+
+            watermarkUrl = canvas.toDataURL()
+        }
+    }
+
+    onMount(() => {
+        isDark = computeIsDark()
+
+        let scheduled = false
+        const scheduleRecompute = (): void => {
+            if (scheduled) return
+            scheduled = true
+            requestAnimationFrame(() => {
+                scheduled = false
+                isDark = computeIsDark()
+            })
+        }
+
+        const observer = new MutationObserver(scheduleRecompute)
+
+        const observed = new Set<Element>()
+        const observeElement = (el: Element | null): void => {
+            if (!el || observed.has(el)) return
+            observed.add(el)
+            observer.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+                subtree: false,
+            })
+        }
+
+        observeElement(document.documentElement)
+        observeElement(document.body)
+        for (let el = rootEl?.parentElement; el; el = el.parentElement) {
+            observeElement(el)
+        }
+
+        generateWatermark()
+
+        return () => {
+            observer.disconnect()
+        }
+    })
+
+    $effect(() => {
+        content
+        fontSize
+        fontColor
+        fontFamily
+        fontWeight
+        rotate
+        width
+        height
+        gap
+        image
+        isDark
+        generateWatermark()
+    })
+
+    const classes = $derived(`lm-watermark${cls ? ` ${cls}` : ''}`)
+    const watermarkStyle = $derived(
+        `background-image:url(${watermarkUrl});background-size:${width + gap[0]}px ${height + gap[1]}px;background-position:${offset[0]}px ${offset[1]}px;z-index:${zIndex}`
+    )
+</script>
+
+<div class={classes} bind:this={rootEl} {...attrs}>
+    {#if children}
+        {@render children()}
+    {/if}
+    <div class="lm-watermark__mark" style={watermarkStyle}></div>
+</div>

package/dist/Watermark/Watermark.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface WatermarkProps {
+    content?: string | string[];
+    fontSize?: number;
+    fontColor?: string;
+    fontFamily?: string;
+    fontWeight?: number | string;
+    rotate?: number;
+    width?: number;
+    height?: number;
+    gap?: [number, number];
+    offset?: [number, number];
+    zIndex?: number;
+    image?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const Watermark: import("svelte").Component<WatermarkProps, {}, "">;
+type Watermark = ReturnType<typeof Watermark>;
+export default Watermark;

package/dist/Watermark/index.d.ts

@@ -0,0 +1,4 @@
+import Watermark from './Watermark.svelte';
+export { Watermark };
+export type { WatermarkProps } from './types';
+export default Watermark;

package/dist/Watermark/index.js

@@ -0,0 +1,3 @@
+import Watermark from './Watermark.svelte';
+export { Watermark };
+export default Watermark;

package/dist/Watermark/types.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+/** Watermark 属性 */
+export interface WatermarkProps {
+    /** 水印内容 */
+    content?: string | string[];
+    /** 字体大小 */
+    fontSize?: number;
+    /** 字体颜色 */
+    fontColor?: string;
+    /** 字体 */
+    fontFamily?: string;
+    /** 字体粗细 */
+    fontWeight?: number | string;
+    /** 旋转角度 */
+    rotate?: number;
+    /** 水印宽度 */
+    width?: number;
+    /** 水印高度 */
+    height?: number;
+    /** 水印间距 */
+    gap?: [number, number];
+    /** 水印偏移 */
+    offset?: [number, number];
+    /** 层级 */
+    zIndex?: number;
+    /** 图片地址 */
+    image?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/Watermark/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,140 @@
+export { default as Affix } from './Affix/Affix.svelte';
+export { default as Alert } from './Alert/Alert.svelte';
+export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
+export { default as Avatar } from './Avatar/Avatar.svelte';
+export { default as Backtop } from './Backtop/Backtop.svelte';
+export { default as Badge } from './Badge/Badge.svelte';
+export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './Breadcrumb/BreadcrumbItem.svelte';
+export { default as Button } from './Button/Button.svelte';
+export { default as Calendar } from './Calendar/Calendar.svelte';
+export { default as Card } from './Card/Card.svelte';
+export { default as Carousel } from './Carousel/Carousel.svelte';
+export { default as CarouselItem } from './Carousel/CarouselItem.svelte';
+export { default as Cascader } from './Cascader/Cascader.svelte';
+export { default as Checkbox } from './Checkbox/Checkbox.svelte';
+export { default as CheckboxGroup } from './Checkbox/CheckboxGroup.svelte';
+export { default as Collapse } from './Collapse/Collapse.svelte';
+export { default as CollapseItem } from './Collapse/CollapseItem.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { Container, Header, Footer, Main, Aside } from './Container';
+export { default as DatePicker } from './DatePicker/DatePicker.svelte';
+export { default as DateTimePicker } from './DateTimePicker/DateTimePicker.svelte';
+export { default as Descriptions } from './Descriptions/Descriptions.svelte';
+export { default as DescriptionsItem } from './Descriptions/DescriptionsItem.svelte';
+export { default as Dialog } from './Dialog/Dialog.svelte';
+export { default as Divider } from './Divider/Divider.svelte';
+export { default as Drawer } from './Drawer/Drawer.svelte';
+export { default as Dropdown } from './Dropdown/Dropdown.svelte';
+export { default as DropdownItem } from './Dropdown/DropdownItem.svelte';
+export { default as DropdownMenu } from './Dropdown/DropdownMenu.svelte';
+export { default as Empty } from './Empty/Empty.svelte';
+export { default as Form } from './Form/Form.svelte';
+export { default as FormItem } from './Form/FormItem.svelte';
+export { default as Icon } from './Icon/Icon.svelte';
+export { default as Image } from './Image/Image.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as InputNumber } from './InputNumber/InputNumber.svelte';
+export { default as InputTag } from './InputTag/InputTag.svelte';
+export { default as Link } from './Link/Link.svelte';
+export { default as Loading } from './Loading/Loading.svelte';
+export { default as Menu } from './Menu/Menu.svelte';
+export { default as Message } from './Message/Message.svelte';
+export { default as MessageBox } from './MessageBox/MessageBox.svelte';
+export { default as Notification } from './Notification/Notification.svelte';
+export { default as Pagination } from './Pagination/Pagination.svelte';
+export { default as PinInput } from './PinInput/PinInput.svelte';
+export { default as Popconfirm } from './Popconfirm/Popconfirm.svelte';
+export { default as Popover } from './Popover/Popover.svelte';
+export { default as Progress } from './Progress/Progress.svelte';
+export { default as Radio } from './Radio/Radio.svelte';
+export { default as RadioGroup } from './Radio/RadioGroup.svelte';
+export { default as Rating } from './Rating/Rating.svelte';
+export { default as Result } from './Result/Result.svelte';
+export { default as Segmented } from './Segmented/Segmented.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as Option } from './Select/Option.svelte';
+export { default as OptionGroup } from './Select/OptionGroup.svelte';
+export { default as Skeleton } from './Skeleton/Skeleton.svelte';
+export { default as SkeletonItem } from './Skeleton/SkeletonItem.svelte';
+export { default as Slider } from './Slider/Slider.svelte';
+export { default as Space } from './Space/Space.svelte';
+export { default as Statistic } from './Statistic/Statistic.svelte';
+export { default as Countdown } from './Statistic/Countdown.svelte';
+export { default as Steps } from './Steps/Steps.svelte';
+export { default as Step } from './Steps/Step.svelte';
+export { default as Switch } from './Switch/Switch.svelte';
+export { default as Table } from './Table/Table.svelte';
+export { default as Tabs } from './Tabs/Tabs.svelte';
+export { default as TabPane } from './Tabs/TabPane.svelte';
+export { default as Tag } from './Tag/Tag.svelte';
+export { default as Textarea } from './Textarea/Textarea.svelte';
+export { default as TimePicker } from './TimePicker/TimePicker.svelte';
+export { default as Timeline } from './Timeline/Timeline.svelte';
+export { default as TimelineItem } from './Timeline/TimelineItem.svelte';
+export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as Transfer } from './Transfer/Transfer.svelte';
+export { default as Tree } from './Tree/Tree.svelte';
+export { default as TreeSelect } from './TreeSelect/TreeSelect.svelte';
+export { default as Upload } from './Upload/Upload.svelte';
+export { default as Watermark } from './Watermark/Watermark.svelte';
+export type * from './Affix/types';
+export type * from './Alert/types';
+export type * from './Avatar/types';
+export type * from './Badge/types';
+export type * from './Breadcrumb/types';
+export type * from './Button/types';
+export type * from './Card/types';
+export type * from './Carousel/types';
+export type * from './Cascader/types';
+export type * from './Checkbox/types';
+export type * from './Collapse/types';
+export type * from './ColorPicker/types';
+export type * from './Container/types';
+export type * from './DatePicker/types';
+export type * from './Descriptions/types';
+export type * from './Dialog/types';
+export type * from './Divider/types';
+export type * from './Drawer/types';
+export type * from './Dropdown/types';
+export type * from './Empty/types';
+export type * from './Form/types';
+export type * from './Icon/types';
+export type * from './Image/types';
+export type * from './Input/types';
+export type * from './InputNumber/types';
+export type * from './InputTag/types';
+export type * from './Link/types';
+export type * from './Loading/types';
+export type * from './Menu/types';
+export type * from './Pagination/types';
+export type * from './PinInput/types';
+export type * from './Popconfirm/types';
+export type * from './Popover/types';
+export type * from './Progress/types';
+export type * from './Radio/types';
+export type * from './Rating/types';
+export type * from './Result/types';
+export type * from './Segmented/types';
+export type * from './Select/types';
+export type * from './Skeleton/types';
+export type * from './Slider/types';
+export type * from './Space/types';
+export type * from './Statistic/types';
+export type * from './Steps/types';
+export type * from './Switch/types';
+export type * from './Table/types';
+export type * from './Tabs/types';
+export type * from './Tag/types';
+export type * from './Textarea/types';
+export type * from './TimePicker/types';
+export type * from './Timeline/types';
+export type * from './Tooltip/types';
+export type * from './Transfer/types';
+export type * from './Tree/types';
+export type * from './TreeSelect/types';
+export type * from './Upload/types';
+export type * from './Watermark/types';
+export * from './Message/message';
+export * from './Notification/notification';
+export * from './MessageBox/messageBox';

package/dist/index.js

@@ -0,0 +1,85 @@
+// Components
+export { default as Affix } from './Affix/Affix.svelte';
+export { default as Alert } from './Alert/Alert.svelte';
+export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
+export { default as Avatar } from './Avatar/Avatar.svelte';
+export { default as Backtop } from './Backtop/Backtop.svelte';
+export { default as Badge } from './Badge/Badge.svelte';
+export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './Breadcrumb/BreadcrumbItem.svelte';
+export { default as Button } from './Button/Button.svelte';
+export { default as Calendar } from './Calendar/Calendar.svelte';
+export { default as Card } from './Card/Card.svelte';
+export { default as Carousel } from './Carousel/Carousel.svelte';
+export { default as CarouselItem } from './Carousel/CarouselItem.svelte';
+export { default as Cascader } from './Cascader/Cascader.svelte';
+export { default as Checkbox } from './Checkbox/Checkbox.svelte';
+export { default as CheckboxGroup } from './Checkbox/CheckboxGroup.svelte';
+export { default as Collapse } from './Collapse/Collapse.svelte';
+export { default as CollapseItem } from './Collapse/CollapseItem.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { Container, Header, Footer, Main, Aside } from './Container';
+export { default as DatePicker } from './DatePicker/DatePicker.svelte';
+export { default as DateTimePicker } from './DateTimePicker/DateTimePicker.svelte';
+export { default as Descriptions } from './Descriptions/Descriptions.svelte';
+export { default as DescriptionsItem } from './Descriptions/DescriptionsItem.svelte';
+export { default as Dialog } from './Dialog/Dialog.svelte';
+export { default as Divider } from './Divider/Divider.svelte';
+export { default as Drawer } from './Drawer/Drawer.svelte';
+export { default as Dropdown } from './Dropdown/Dropdown.svelte';
+export { default as DropdownItem } from './Dropdown/DropdownItem.svelte';
+export { default as DropdownMenu } from './Dropdown/DropdownMenu.svelte';
+export { default as Empty } from './Empty/Empty.svelte';
+export { default as Form } from './Form/Form.svelte';
+export { default as FormItem } from './Form/FormItem.svelte';
+export { default as Icon } from './Icon/Icon.svelte';
+export { default as Image } from './Image/Image.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as InputNumber } from './InputNumber/InputNumber.svelte';
+export { default as InputTag } from './InputTag/InputTag.svelte';
+export { default as Link } from './Link/Link.svelte';
+export { default as Loading } from './Loading/Loading.svelte';
+export { default as Menu } from './Menu/Menu.svelte';
+export { default as Message } from './Message/Message.svelte';
+export { default as MessageBox } from './MessageBox/MessageBox.svelte';
+export { default as Notification } from './Notification/Notification.svelte';
+export { default as Pagination } from './Pagination/Pagination.svelte';
+export { default as PinInput } from './PinInput/PinInput.svelte';
+export { default as Popconfirm } from './Popconfirm/Popconfirm.svelte';
+export { default as Popover } from './Popover/Popover.svelte';
+export { default as Progress } from './Progress/Progress.svelte';
+export { default as Radio } from './Radio/Radio.svelte';
+export { default as RadioGroup } from './Radio/RadioGroup.svelte';
+export { default as Rating } from './Rating/Rating.svelte';
+export { default as Result } from './Result/Result.svelte';
+export { default as Segmented } from './Segmented/Segmented.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as Option } from './Select/Option.svelte';
+export { default as OptionGroup } from './Select/OptionGroup.svelte';
+export { default as Skeleton } from './Skeleton/Skeleton.svelte';
+export { default as SkeletonItem } from './Skeleton/SkeletonItem.svelte';
+export { default as Slider } from './Slider/Slider.svelte';
+export { default as Space } from './Space/Space.svelte';
+export { default as Statistic } from './Statistic/Statistic.svelte';
+export { default as Countdown } from './Statistic/Countdown.svelte';
+export { default as Steps } from './Steps/Steps.svelte';
+export { default as Step } from './Steps/Step.svelte';
+export { default as Switch } from './Switch/Switch.svelte';
+export { default as Table } from './Table/Table.svelte';
+export { default as Tabs } from './Tabs/Tabs.svelte';
+export { default as TabPane } from './Tabs/TabPane.svelte';
+export { default as Tag } from './Tag/Tag.svelte';
+export { default as Textarea } from './Textarea/Textarea.svelte';
+export { default as TimePicker } from './TimePicker/TimePicker.svelte';
+export { default as Timeline } from './Timeline/Timeline.svelte';
+export { default as TimelineItem } from './Timeline/TimelineItem.svelte';
+export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as Transfer } from './Transfer/Transfer.svelte';
+export { default as Tree } from './Tree/Tree.svelte';
+export { default as TreeSelect } from './TreeSelect/TreeSelect.svelte';
+export { default as Upload } from './Upload/Upload.svelte';
+export { default as Watermark } from './Watermark/Watermark.svelte';
+// Utilities
+export * from './Message/message';
+export * from './Notification/notification';
+export * from './MessageBox/messageBox';

package/dist/utils/floating.d.ts

@@ -0,0 +1,28 @@
+export type FloatingPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export type TransformOrigin = "top left" | "top center" | "top right" | "center left" | "center" | "center right" | "bottom left" | "bottom center" | "bottom right";
+export type FloatingRectLike = Pick<DOMRect, "top" | "left" | "right" | "bottom" | "width" | "height">;
+export interface FloatingPositionOptions {
+    placement: FloatingPlacement;
+    /** Gap between reference and floating element. */
+    offset?: number;
+    /** Minimum distance to viewport edge. */
+    padding?: number;
+}
+export interface FloatingSize {
+    width: number;
+    height: number;
+}
+export interface FloatingPositionResult {
+    x: number;
+    y: number;
+    placement: FloatingPlacement;
+}
+export declare const getOppositePlacement: (placement: FloatingPlacement) => FloatingPlacement;
+export declare const getTransformOriginForPlacement: (placement: FloatingPlacement) => TransformOrigin;
+/**
+ * Computes a fixed-position (viewport-relative) floating element position.
+ * It will:
+ * - flip on the main axis if the requested placement overflows
+ * - shift/clamp into the viewport on the cross axis
+ */
+export declare const computeFixedFloatingPosition: (referenceRect: FloatingRectLike, floatingSize: FloatingSize, options: FloatingPositionOptions) => FloatingPositionResult;

package/dist/utils/floating.js

@@ -0,0 +1,140 @@
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const getSide = (placement) => {
+    if (placement.startsWith("top"))
+        return "top";
+    if (placement.startsWith("bottom"))
+        return "bottom";
+    if (placement.startsWith("left"))
+        return "left";
+    return "right";
+};
+export const getOppositePlacement = (placement) => {
+    if (placement.startsWith("top"))
+        return placement.replace("top", "bottom");
+    if (placement.startsWith("bottom"))
+        return placement.replace("bottom", "top");
+    if (placement.startsWith("left"))
+        return placement.replace("left", "right");
+    return placement.replace("right", "left");
+};
+export const getTransformOriginForPlacement = (placement) => {
+    switch (placement) {
+        case "top":
+            return "bottom center";
+        case "top-start":
+            return "bottom left";
+        case "top-end":
+            return "bottom right";
+        case "bottom":
+            return "top center";
+        case "bottom-start":
+            return "top left";
+        case "bottom-end":
+            return "top right";
+        case "left":
+            return "center right";
+        case "left-start":
+            return "top right";
+        case "left-end":
+            return "bottom right";
+        case "right":
+            return "center left";
+        case "right-start":
+            return "top left";
+        case "right-end":
+            return "bottom left";
+        default:
+            return "center";
+    }
+};
+const computeCoords = (placement, referenceRect, floatingSize, offset) => {
+    const midX = referenceRect.left + referenceRect.width / 2;
+    const midY = referenceRect.top + referenceRect.height / 2;
+    switch (placement) {
+        case "top":
+            return {
+                x: midX - floatingSize.width / 2,
+                y: referenceRect.top - offset - floatingSize.height,
+            };
+        case "top-start":
+            return { x: referenceRect.left, y: referenceRect.top - offset - floatingSize.height };
+        case "top-end":
+            return { x: referenceRect.right - floatingSize.width, y: referenceRect.top - offset - floatingSize.height };
+        case "bottom":
+            return { x: midX - floatingSize.width / 2, y: referenceRect.bottom + offset };
+        case "bottom-start":
+            return { x: referenceRect.left, y: referenceRect.bottom + offset };
+        case "bottom-end":
+            return { x: referenceRect.right - floatingSize.width, y: referenceRect.bottom + offset };
+        case "left":
+            return {
+                x: referenceRect.left - offset - floatingSize.width,
+                y: midY - floatingSize.height / 2,
+            };
+        case "left-start":
+            return { x: referenceRect.left - offset - floatingSize.width, y: referenceRect.top };
+        case "left-end":
+            return { x: referenceRect.left - offset - floatingSize.width, y: referenceRect.bottom - floatingSize.height };
+        case "right":
+            return { x: referenceRect.right + offset, y: midY - floatingSize.height / 2 };
+        case "right-start":
+            return { x: referenceRect.right + offset, y: referenceRect.top };
+        case "right-end":
+            return { x: referenceRect.right + offset, y: referenceRect.bottom - floatingSize.height };
+        default:
+            return { x: referenceRect.right + offset, y: referenceRect.top };
+    }
+};
+const mainAxisOverflow = (placement, coords, floatingSize, padding, viewportWidth, viewportHeight) => {
+    const side = getSide(placement);
+    switch (side) {
+        case "top":
+            return Math.max(0, padding - coords.y);
+        case "bottom":
+            return Math.max(0, coords.y + floatingSize.height - (viewportHeight - padding));
+        case "left":
+            return Math.max(0, padding - coords.x);
+        case "right":
+            return Math.max(0, coords.x + floatingSize.width - (viewportWidth - padding));
+        default:
+            return 0;
+    }
+};
+const shiftIntoViewport = (placement, coords, floatingSize, padding, viewportWidth, viewportHeight) => {
+    const minX = padding;
+    const maxX = Math.max(padding, viewportWidth - padding - floatingSize.width);
+    const minY = padding;
+    const maxY = Math.max(padding, viewportHeight - padding - floatingSize.height);
+    const side = getSide(placement);
+    // Always clamp cross-axis; clamp main axis only if it overflows.
+    if (side === "top" || side === "bottom") {
+        const x = clamp(coords.x, minX, maxX);
+        const y = coords.y < minY ? minY : coords.y + floatingSize.height > viewportHeight - padding ? maxY : coords.y;
+        return { x, y };
+    }
+    const y = clamp(coords.y, minY, maxY);
+    const x = coords.x < minX ? minX : coords.x + floatingSize.width > viewportWidth - padding ? maxX : coords.x;
+    return { x, y };
+};
+/**
+ * Computes a fixed-position (viewport-relative) floating element position.
+ * It will:
+ * - flip on the main axis if the requested placement overflows
+ * - shift/clamp into the viewport on the cross axis
+ */
+export const computeFixedFloatingPosition = (referenceRect, floatingSize, options) => {
+    const offset = options.offset ?? 12;
+    const padding = options.padding ?? 8;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const requested = options.placement;
+    const requestedCoords = computeCoords(requested, referenceRect, floatingSize, offset);
+    const opposite = getOppositePlacement(requested);
+    const oppositeCoords = computeCoords(opposite, referenceRect, floatingSize, offset);
+    const requestedOverflow = mainAxisOverflow(requested, requestedCoords, floatingSize, padding, viewportWidth, viewportHeight);
+    const oppositeOverflow = mainAxisOverflow(opposite, oppositeCoords, floatingSize, padding, viewportWidth, viewportHeight);
+    const chosenPlacement = requestedOverflow <= oppositeOverflow ? requested : opposite;
+    const chosenCoords = chosenPlacement === requested ? requestedCoords : oppositeCoords;
+    const shifted = shiftIntoViewport(chosenPlacement, chosenCoords, floatingSize, padding, viewportWidth, viewportHeight);
+    return { x: shifted.x, y: shifted.y, placement: chosenPlacement };
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+import { type FlyParams, type ScaleParams, type TransitionConfig } from 'svelte/transition';
+export declare const createDropdownTransition: (reduceMotion: boolean) => (node: Element, params?: FlyParams) => TransitionConfig;
+export declare const createCenteredDropdownTransition: (reduceMotion: boolean) => (node: Element, params?: ScaleParams) => TransitionConfig;