@passui/react 0.1.16 → 0.1.19

package/src/icons/icons.tsx

@@ -1,13 +1,30 @@
 import {
+    LanguagesIcon,
+    Logout01Icon,
+    MoreVertical,
+    SentIcon,
+    InboxIcon as InboxGlyph,
+    LaptopIcon as LaptopGlyph,
+    SmartPhone01Icon,
+    Tablet01Icon,
+    Home01Icon,
+    LibraryIcon as LibraryGlyph,
+    UserIcon,
+    Analytics01Icon,
+    CustomerSupportIcon,
+    Key01Icon,
+    LockPasswordIcon,
     Add01Icon,
     AiMagicIcon,
     AlarmClockIcon,
     Alert02Icon,
+    Archive01Icon,
     ArrowDown01Icon,
     ArrowLeft01Icon,
     ArrowRight01Icon,
     ArrowUp01Icon,
     BirthdayCakeIcon,
+    Bookmark02Icon,
     Book02Icon,
     BookOpen01Icon,
     BubbleChatIcon,
@@ -43,6 +60,7 @@ import {
     ThumbsUpIcon as HugeThumbsUpIcon,
     UndoIcon as HugeUndoIcon,
     Image01Icon,
+    InformationCircleIcon,
     Invoice03Icon,
     LayoutGridIcon,
     LeftToRightListBulletIcon,
@@ -50,6 +68,9 @@ import {
     Location01Icon,
     LockIcon as LockIconSvg,
     Mic01Icon,
+    Menu01Icon,
+    Mail01Icon,
+    MailReply01Icon,
     Moon02Icon,
     MoreHorizontalIcon,
     Mortarboard01Icon,
@@ -74,6 +95,11 @@ import {
     Share08Icon,
     Store01Icon,
     Task01Icon,
+    TextAlignCenterIcon,
+    TextAlignLeftIcon,
+    TextBoldIcon,
+    TextItalicIcon,
+    TextUnderlineIcon,
     Tick02Icon,
     Time04Icon,
     Touch01Icon,
@@ -84,28 +110,61 @@ import {
     ViewOffSlashIcon,
     Wallet01Icon,
 } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react"
 import {
-    HugeiconsIcon,
-    type IconSvgElement,
-} from "@hugeicons/react"
+    Analytics01Icon as CatalogAnalyticsGlyph,
+    Calendar03Icon as CatalogCalendarGlyph,
+    Clock01Icon as CatalogClockGlyph,
+    ColorsIcon as CatalogColorsGlyph,
+    InputTextIcon as CatalogInputTextGlyph,
+    LabelIcon as CatalogLabelGlyph,
+    LayoutTwoColumnIcon as CatalogColumnsGlyph,
+    ListViewIcon as CatalogListGlyph,
+    LockPasswordIcon as CatalogPasswordGlyph,
+    Search01Icon as CatalogSearchGlyph,
+    SearchList01Icon as CatalogSearchListGlyph,
+    Settings02Icon as CatalogSettingsGlyph,
+    StatusIcon as CatalogStatusGlyph,
+    Tag01Icon as CatalogTagGlyph,
+    Tap01Icon as CatalogTapGlyph,
+    TextAlignLeftIcon as CatalogTextGlyph,
+    ToggleOnIcon as CatalogToggleGlyph,
+    UnfoldMoreIcon as CatalogUnfoldGlyph,
+    UserCircleIcon as CatalogUserGlyph,
+    LayoutTopIcon as CatalogLayoutTopGlyph,
+    LayoutBottomIcon as CatalogLayoutBottomGlyph,
+    SidebarLeftIcon as CatalogSidebarGlyph,
+    BrowserIcon as CatalogBrowserGlyph,
+    Table01Icon as CatalogTableGlyph,
+    CardsIcon as CatalogCardsGlyph,
+    Message01Icon as CatalogMessageGlyph,
+    Sun03Icon as CatalogSunGlyph,
+    AlertSquareIcon as CatalogAlertGlyph,
+    PanelBottomIcon as CatalogPanelGlyph,
+    BubbleChatIcon as CatalogBubbleGlyph,
+    Notification03Icon as CatalogNotificationGlyph,
+    MenuSquareIcon as CatalogMenuGlyph,
+    HelpCircleIcon as CatalogHelpGlyph,
+    TranslateIcon as CatalogTranslateGlyph,
+    PaintBoardIcon as GuidePaintGlyph,
+    TextIcon as GuideTextGlyph,
+    Layers01Icon as GuideLayersGlyph,
+    ArrowUp02Icon as UploadGlyph,
+    PlusSignIcon as AttachGlyph,
+} from "@hugeicons/core-free-icons"
 import type { SVGProps } from "react"
 import { cn } from "../lib/class-names"
 
-export type IconProps = Omit<
-    SVGProps<SVGSVGElement>,
-    "ref"
-> & {
+export type IconProps = Omit<SVGProps<SVGSVGElement>, "ref"> & {
+    /** Width and height in CSS pixels. @default 20 */
     size?: number
+    /** Stroke weight shared across Passui icons. @default 1.6 */
     strokeWidth?: number
 }
 
-/** Hugeicons (stroke rounded), sized and weighted for the Notables UI. */
+/** Rounded stroke icons with Passui's default size, weight, and decorative semantics. */
 function icon(svg: IconSvgElement, displayName: string) {
-    const Icon = ({
-        size = 20,
-        strokeWidth = 1.6,
-        ...props
-    }: IconProps) => (
+    const Icon = ({ size = 20, strokeWidth = 1.6, ...props }: IconProps) => (
         <HugeiconsIcon
             icon={svg}
             size={size}
@@ -119,80 +178,102 @@ function icon(svg: IconSvgElement, displayName: string) {
 }
 
 /** A filled variant for toggled states (hearted, starred). */
-function toggleIcon(
-    svg: IconSvgElement,
-    displayName: string
-) {
+function toggleIcon(svg: IconSvgElement, displayName: string) {
     const Base = icon(svg, displayName)
-    const Icon = ({
-        filled = false,
-        className,
-        ...props
-    }: IconProps & { filled?: boolean }) => (
-        <Base
-            className={cn(
-                filled && "[&_path]:fill-current",
-                className
-            )}
-            {...props}
-        />
+    const Icon = ({ filled = false, className, ...props }: IconProps & { filled?: boolean }) => (
+        <Base className={cn(filled && "[&_path]:fill-current", className)} {...props} />
     )
     Icon.displayName = displayName
     return Icon
 }
 
+/** Existing catalog glyphs rendered through PassUI's common icon contract. */
+export const catalogIcons = {
+    tap: icon(CatalogTapGlyph, "CatalogTapIcon"),
+    settings: icon(CatalogSettingsGlyph, "CatalogSettingsIcon"),
+    tag: icon(CatalogTagGlyph, "CatalogTagIcon"),
+    input: icon(CatalogInputTextGlyph, "CatalogInputIcon"),
+    password: icon(CatalogPasswordGlyph, "CatalogPasswordIcon"),
+    search: icon(CatalogSearchGlyph, "CatalogSearchIcon"),
+    toggle: icon(CatalogToggleGlyph, "CatalogToggleIcon"),
+    columns: icon(CatalogColumnsGlyph, "CatalogColumnsIcon"),
+    unfold: icon(CatalogUnfoldGlyph, "CatalogUnfoldIcon"),
+    colors: icon(CatalogColorsGlyph, "CatalogColorsIcon"),
+    calendar: icon(CatalogCalendarGlyph, "CatalogCalendarIcon"),
+    clock: icon(CatalogClockGlyph, "CatalogClockIcon"),
+    text: icon(CatalogTextGlyph, "CatalogTextIcon"),
+    searchList: icon(CatalogSearchListGlyph, "CatalogSearchListIcon"),
+    list: icon(CatalogListGlyph, "CatalogListIcon"),
+    label: icon(CatalogLabelGlyph, "CatalogLabelIcon"),
+    table: icon(CatalogTableGlyph, "CatalogTableIcon"),
+    cards: icon(CatalogCardsGlyph, "CatalogCardsIcon"),
+    message: icon(CatalogMessageGlyph, "CatalogMessageIcon"),
+    sun: icon(CatalogSunGlyph, "CatalogSunIcon"),
+    status: icon(CatalogStatusGlyph, "CatalogStatusIcon"),
+    analytics: icon(CatalogAnalyticsGlyph, "CatalogAnalyticsIcon"),
+    alert: icon(CatalogAlertGlyph, "CatalogAlertIcon"),
+    panel: icon(CatalogPanelGlyph, "CatalogPanelIcon"),
+    bubble: icon(CatalogBubbleGlyph, "CatalogBubbleIcon"),
+    notification: icon(CatalogNotificationGlyph, "CatalogNotificationIcon"),
+    menu: icon(CatalogMenuGlyph, "CatalogMenuIcon"),
+    help: icon(CatalogHelpGlyph, "CatalogHelpIcon"),
+    translate: icon(CatalogTranslateGlyph, "CatalogTranslateIcon"),
+    layoutTop: icon(CatalogLayoutTopGlyph, "CatalogLayoutTopIcon"),
+    layoutBottom: icon(CatalogLayoutBottomGlyph, "CatalogLayoutBottomIcon"),
+    sidebar: icon(CatalogSidebarGlyph, "CatalogSidebarIcon"),
+    browser: icon(CatalogBrowserGlyph, "CatalogBrowserIcon"),
+    user: icon(CatalogUserGlyph, "CatalogUserIcon"),
+} as const
+
 export const NoteIcon = icon(Note01Icon, "NoteIcon")
+export const LanguageIcon = icon(LanguagesIcon, "LanguageIcon")
+export const SignOutIcon = icon(Logout01Icon, "SignOutIcon")
+export const MoreVerticalIcon = icon(MoreVertical, "MoreVerticalIcon")
+export const SendIcon = icon(SentIcon, "SendIcon")
+export const InboxIcon = icon(InboxGlyph, "InboxIcon")
+export const LaptopIcon = icon(LaptopGlyph, "LaptopIcon")
+export const SmartphoneIcon = icon(SmartPhone01Icon, "SmartphoneIcon")
+export const TabletIcon = icon(Tablet01Icon, "TabletIcon")
+export const HomeIcon = icon(Home01Icon, "HomeIcon")
+export const LibraryIcon = icon(LibraryGlyph, "LibraryIcon")
+export const PersonIcon = icon(UserIcon, "PersonIcon")
+export const ChartIcon = icon(Analytics01Icon, "ChartIcon")
+export const SupportIcon = icon(CustomerSupportIcon, "SupportIcon")
+export const KeyIcon = icon(Key01Icon, "KeyIcon")
+export const PasswordIcon = icon(LockPasswordIcon, "PasswordIcon")
 export const JournalIcon = icon(NotebookIcon, "JournalIcon")
 export const PenIcon = icon(PencilEdit02Icon, "PenIcon")
 export const StoryIcon = icon(QuillWrite02Icon, "StoryIcon")
 export const BookIcon = icon(BookOpen01Icon, "BookIcon")
 export const ArticleIcon = icon(Book02Icon, "ArticleIcon")
 export const CanvasIcon = icon(HugeCanvasIcon, "CanvasIcon")
-export const LessonIcon = icon(
-    Mortarboard01Icon,
-    "LessonIcon"
-)
+export const LessonIcon = icon(Mortarboard01Icon, "LessonIcon")
 export const PlanIcon = icon(CheckListIcon, "PlanIcon")
 export const MicIcon = icon(Mic01Icon, "MicIcon")
 export const GlobeIcon = icon(Globe02Icon, "GlobeIcon")
-export const ChecklistIcon = icon(
-    CheckmarkCircle02Icon,
-    "ChecklistIcon"
-)
+export const ChecklistIcon = icon(CheckmarkCircle02Icon, "ChecklistIcon")
 export const DrawIcon = icon(PencilIcon, "DrawIcon")
 export const ShareIcon = icon(Share08Icon, "ShareIcon")
 export const SearchIcon = icon(Search01Icon, "SearchIcon")
-export const ChevronLeftIcon = icon(
-    ArrowLeft01Icon,
-    "ChevronLeftIcon"
-)
-export const ChevronRightIcon = icon(
-    ArrowRight01Icon,
-    "ChevronRightIcon"
-)
-export const ChevronUpIcon = icon(
-    ArrowUp01Icon,
-    "ChevronUpIcon"
-)
-export const ChevronDownIcon = icon(
-    ArrowDown01Icon,
-    "ChevronDownIcon"
-)
+export const ChevronLeftIcon = icon(ArrowLeft01Icon, "ChevronLeftIcon")
+export const ChevronRightIcon = icon(ArrowRight01Icon, "ChevronRightIcon")
+export const ChevronUpIcon = icon(ArrowUp01Icon, "ChevronUpIcon")
+export const ChevronDownIcon = icon(ArrowDown01Icon, "ChevronDownIcon")
 export const CloseIcon = icon(Cancel01Icon, "CloseIcon")
+export const MenuIcon = icon(Menu01Icon, "MenuIcon")
+export const ThemingIcon = icon(GuidePaintGlyph, "ThemingIcon")
+export const TypesetIcon = icon(GuideTextGlyph, "TypesetIcon")
+export const LayersIcon = icon(GuideLayersGlyph, "LayersIcon")
+export const UploadIcon = icon(UploadGlyph, "UploadIcon")
+export const AttachIcon = icon(AttachGlyph, "AttachIcon")
 export const PlusIcon = icon(Add01Icon, "PlusIcon")
 export const LinkIcon = icon(Link01Icon, "LinkIcon")
 export const CommentIcon = icon(Comment01Icon, "CommentIcon")
 export const TrashIcon = icon(Delete02Icon, "TrashIcon")
 export const PinIcon = icon(Pin02Icon, "PinIcon")
 export const SidebarIcon = icon(PanelLeftIcon, "SidebarIcon")
-export const SettingsIcon = icon(
-    Settings02Icon,
-    "SettingsIcon"
-)
-export const DragHandleIcon = icon(
-    DragDropVerticalIcon,
-    "DragHandleIcon"
-)
+export const SettingsIcon = icon(Settings02Icon, "SettingsIcon")
+export const DragHandleIcon = icon(DragDropVerticalIcon, "DragHandleIcon")
 export const VisibleIcon = icon(ViewIcon, "VisibleIcon")
 export const HiddenIcon = icon(ViewOffSlashIcon, "HiddenIcon")
 export const CheckIcon = icon(Tick02Icon, "CheckIcon")
@@ -200,57 +281,27 @@ export const InvoiceIcon = icon(Invoice03Icon, "InvoiceIcon")
 export const QrCodeGlyph = icon(QrCodeIcon, "QrCodeGlyph")
 export const WalletIcon = icon(Wallet01Icon, "WalletIcon")
 export const ScanCodeIcon = icon(ScanIcon, "ScanCodeIcon")
-export const VerifiedIcon = icon(
-    CheckmarkBadge01Icon,
-    "VerifiedIcon"
-)
+export const VerifiedIcon = icon(CheckmarkBadge01Icon, "VerifiedIcon")
 export const WarningIcon = icon(Alert02Icon, "WarningIcon")
 export const PrintIcon = icon(PrinterIcon, "PrintIcon")
 export const ImportIcon = icon(FileImportIcon, "ImportIcon")
-export const DownloadIcon = icon(
-    Download01Icon,
-    "DownloadIcon"
-)
+export const DownloadIcon = icon(Download01Icon, "DownloadIcon")
 export const PlayIcon = icon(HugePlayIcon, "PlayIcon")
 export const PauseIcon = icon(HugePauseIcon, "PauseIcon")
-export const SkipBackIcon = icon(
-    GoBackward15SecIcon,
-    "SkipBackIcon"
-)
-export const SkipForwardIcon = icon(
-    GoForward30SecIcon,
-    "SkipForwardIcon"
-)
-export const PreviousTrackIcon = icon(
-    PreviousIcon,
-    "PreviousTrackIcon"
-)
+export const SkipBackIcon = icon(GoBackward15SecIcon, "SkipBackIcon")
+export const SkipForwardIcon = icon(GoForward30SecIcon, "SkipForwardIcon")
+export const PreviousTrackIcon = icon(PreviousIcon, "PreviousTrackIcon")
 export const NextTrackIcon = icon(NextIcon, "NextTrackIcon")
-export const HeadphonesIcon = icon(
-    HugeHeadphonesIcon,
-    "HeadphonesIcon"
-)
-export const HighlighterIcon = icon(
-    HugeHighlighterIcon,
-    "HighlighterIcon"
-)
-export const ChaptersIcon = icon(
-    LeftToRightListBulletIcon,
-    "ChaptersIcon"
-)
+export const HeadphonesIcon = icon(HugeHeadphonesIcon, "HeadphonesIcon")
+export const HighlighterIcon = icon(HugeHighlighterIcon, "HighlighterIcon")
+export const ChaptersIcon = icon(LeftToRightListBulletIcon, "ChaptersIcon")
 export const SleepIcon = icon(Moon02Icon, "SleepIcon")
 export const ExpandIcon = icon(FullScreenIcon, "ExpandIcon")
 export const SparkleIcon = icon(AiMagicIcon, "SparkleIcon")
 export const BellIcon = icon(Notification03Icon, "BellIcon")
 export const BusinessIcon = icon(Store01Icon, "BusinessIcon")
-export const CalendarIcon = icon(
-    Calendar03Icon,
-    "CalendarIcon"
-)
-export const BirthdayIcon = icon(
-    BirthdayCakeIcon,
-    "BirthdayIcon"
-)
+export const CalendarIcon = icon(Calendar03Icon, "CalendarIcon")
+export const BirthdayIcon = icon(BirthdayCakeIcon, "BirthdayIcon")
 export const AlarmIcon = icon(AlarmClockIcon, "AlarmIcon")
 export const RepeatIcon = icon(HugeRepeatIcon, "RepeatIcon")
 export const UndoIcon = icon(HugeUndoIcon, "UndoIcon")
@@ -262,32 +313,17 @@ export const BubbleIcon = icon(BubbleChatIcon, "BubbleIcon")
 export const BrushIcon = icon(PaintBrush02Icon, "BrushIcon")
 export const LayoutIcon = icon(LayoutGridIcon, "LayoutIcon")
 export const ZoomIcon = icon(SearchAddIcon, "ZoomIcon")
-export const SelectorIcon = icon(
-    UnfoldMoreIcon,
-    "SelectorIcon"
-)
+export const SelectorIcon = icon(UnfoldMoreIcon, "SelectorIcon")
 export const MoreIcon = icon(MoreHorizontalIcon, "MoreIcon")
 export const PeopleIcon = icon(UserMultipleIcon, "PeopleIcon")
-export const AddPersonIcon = icon(
-    UserAdd01Icon,
-    "AddPersonIcon"
-)
+export const AddPersonIcon = icon(UserAdd01Icon, "AddPersonIcon")
 export const ClockIcon = icon(Clock01Icon, "ClockIcon")
-export const LocationIcon = icon(
-    Location01Icon,
-    "LocationIcon"
-)
+export const LocationIcon = icon(Location01Icon, "LocationIcon")
 export const TaskIcon = icon(Task01Icon, "TaskIcon")
 export const FolderIcon = icon(Folder01Icon, "FolderIcon")
 export const RecentIcon = icon(Time04Icon, "RecentIcon")
-export const ThumbsUpIcon = toggleIcon(
-    HugeThumbsUpIcon,
-    "ThumbsUpIcon"
-)
-export const HeartIcon = toggleIcon(
-    FavouriteIcon,
-    "HeartIcon"
-)
+export const ThumbsUpIcon = toggleIcon(HugeThumbsUpIcon, "ThumbsUpIcon")
+export const HeartIcon = toggleIcon(FavouriteIcon, "HeartIcon")
 export const StarIcon = toggleIcon(HugeStarIcon, "StarIcon")
 
 // Wallet: adding, copying and protecting cards.
@@ -296,3 +332,13 @@ export const CopyIcon = icon(Copy01Icon, "CopyIcon")
 export const LockIcon = icon(LockIconSvg, "LockIcon")
 export const NfcReadIcon = icon(NfcIcon, "NfcReadIcon")
 export const PhotoIcon = icon(Image01Icon, "PhotoIcon")
+export const BookmarkIcon = icon(Bookmark02Icon, "BookmarkIcon")
+export const MailIcon = icon(Mail01Icon, "MailIcon")
+export const ReplyIcon = icon(MailReply01Icon, "ReplyIcon")
+export const ArchiveIcon = icon(Archive01Icon, "ArchiveIcon")
+export const InfoIcon = icon(InformationCircleIcon, "InfoIcon")
+export const AlignCenterIcon = icon(TextAlignCenterIcon, "AlignCenterIcon")
+export const AlignLeftIcon = icon(TextAlignLeftIcon, "AlignLeftIcon")
+export const BoldIcon = icon(TextBoldIcon, "BoldIcon")
+export const ItalicIcon = icon(TextItalicIcon, "ItalicIcon")
+export const UnderlineIcon = icon(TextUnderlineIcon, "UnderlineIcon")

package/src/index.ts

@@ -30,6 +30,9 @@ export * from "./components/picker/picker"
 export * from "./components/popover/popover"
 export * from "./components/search-field/search-field"
 export * from "./components/section/section"
+export * from "./components/inline-disclosure/inline-disclosure"
+export * from "./components/disclosure-group/disclosure-group"
+export * from "./components/menu/menu"
 export * from "./components/segmented-control/segmented-control"
 export * from "./components/sheet/sheet"
 export * from "./components/sidebar/sidebar"
@@ -43,15 +46,19 @@ export {
 } from "./components/toast/toast-store"
 export * from "./components/toast/toaster"
 export * from "./components/toggle/toggle"
+export * from "./components/slider/slider"
+export * from "./components/stepper/stepper"
+export * from "./components/progress-view/progress-view"
+export * from "./components/divider/divider"
 export * from "./components/tooltip/tooltip-host"
 export * from "./hooks/use-anchored-placement"
 export * from "./hooks/use-dismiss"
 export * from "./hooks/use-media-query"
-export * from "./hooks/use-minimize-on-scroll"
 export * from "./icons/icons"
 export * from "./lib/anchored-placement"
 export * from "./lib/class-names"
 export * from "./lib/haptics"
+export * from "./lib/clipboard"
 export * from "./lib/screen-edges"
 export * from "./motion/transitions"
 export * from "./appearance"
@@ -62,6 +69,7 @@ export * from "./components/compact-time-picker/compact-time-picker"
 
 export { Dialog } from "./components/dialog"
 export type {
+    DialogProps,
     DialogPresentation,
     DialogTone,
 } from "./components/dialog/dialog"

package/src/lib/anchored-placement.ts

@@ -37,16 +37,9 @@ export function placeInViewport(
     needed: number,
     gap = 6
 ): AnchoredPlacement {
-    const fitted = Math.min(
-        width,
-        viewport.width - edges.left - edges.right
-    )
-    const left = Math.min(
-        Math.max(edges.left, anchor.left),
-        viewport.width - fitted - edges.right
-    )
-    const roomBelow =
-        viewport.height - anchor.bottom - gap - edges.bottom
+    const fitted = Math.min(width, viewport.width - edges.left - edges.right)
+    const left = Math.min(Math.max(edges.left, anchor.left), viewport.width - fitted - edges.right)
+    const roomBelow = viewport.height - anchor.bottom - gap - edges.bottom
     const roomAbove = anchor.top - gap - edges.top
     const above = roomBelow < needed && roomAbove > roomBelow
     const room = above ? roomAbove : roomBelow
@@ -54,9 +47,7 @@ export function placeInViewport(
         left,
         width: fitted,
         above,
-        ...(above
-            ? { bottom: viewport.height - anchor.top + gap }
-            : { top: anchor.bottom + gap }),
+        ...(above ? { bottom: viewport.height - anchor.top + gap } : { top: anchor.bottom + gap }),
     }
     if (room < needed) placement.maxHeight = room
     return placement
@@ -80,8 +71,7 @@ export function placeAnchored(
             },
             viewport: {
                 width: viewport?.width ?? window.innerWidth,
-                height:
-                    viewport?.height ?? window.innerHeight,
+                height: viewport?.height ?? window.innerHeight,
             },
             edges: screenEdges(),
         },

package/src/lib/class-names.ts

@@ -4,8 +4,7 @@ import { extendTailwindMerge } from "tailwind-merge"
 import { textStyles } from "@passui/tokens/typography"
 
 const textStyleClasses = Object.keys(textStyles).map(
-    (name) =>
-        `text-${name.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)}`
+    (name) => `text-${name.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)}`
 )
 
 const twMerge = extendTailwindMerge({

package/src/lib/clipboard.ts

@@ -0,0 +1,14 @@
+/**
+ * Copies text after a user action. Returns true only after the browser confirms
+ * the write. Returns false when unavailable or denied, so the app can offer
+ * manual copying. This helper never reads the clipboard or adds feedback.
+ */
+export async function copyText(text: string): Promise<boolean> {
+    try {
+        if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return false
+        await navigator.clipboard.writeText(text)
+        return true
+    } catch {
+        return false
+    }
+}

package/src/lib/date.ts

@@ -37,10 +37,7 @@ export type DatePreset = keyof typeof PRESETS
 
 const formatters = new Map<string, Intl.DateTimeFormat>()
 
-function formatter(
-    key: string,
-    options: Intl.DateTimeFormatOptions
-) {
+function formatter(key: string, options: Intl.DateTimeFormatOptions) {
     let cached = formatters.get(key)
     if (!cached) {
         cached = new Intl.DateTimeFormat(LOCALE, options)
@@ -50,10 +47,7 @@ function formatter(
 }
 
 /** A stored UTC timestamp shown as its UTC wall-clock time, whatever the viewer's timezone. */
-export function formatUtc(
-    date: Date | string | number,
-    preset: DatePreset
-) {
+export function formatUtc(date: Date | string | number, preset: DatePreset) {
     return formatter(`utc:${preset}`, {
         ...PRESETS[preset],
         timeZone: "UTC",
@@ -83,14 +77,9 @@ export function fromNow(date: Date | string | number) {
     relative ??= new Intl.RelativeTimeFormat(LOCALE, {
         numeric: "auto",
     })
-    const seconds =
-        (new Date(date).getTime() - Date.now()) / 1000
+    const seconds = (new Date(date).getTime() - Date.now()) / 1000
     for (const [unit, size] of UNITS) {
-        if (Math.abs(seconds) >= size)
-            return relative.format(
-                Math.round(seconds / size),
-                unit
-            )
+        if (Math.abs(seconds) >= size) return relative.format(Math.round(seconds / size), unit)
     }
     return relative.format(0, "second")
 }

package/src/lib/floating-layers.ts

@@ -3,18 +3,12 @@ export const FLOATING_LAYER = "data-floating-layer"
 const anchors = new WeakMap<Element, Element>()
 
 /** Portals retain the ownership of the control that opened them. */
-export function registerFloatingLayer(
-    layer: Element,
-    anchor: Element
-): () => void {
+export function registerFloatingLayer(layer: Element, anchor: Element): () => void {
     anchors.set(layer, anchor)
     return () => anchors.delete(layer)
 }
 
-export function ownsFloatingLayer(
-    container: Element,
-    target: Element | null
-): boolean {
+export function ownsFloatingLayer(container: Element, target: Element | null): boolean {
     let layer = target?.closest(`[${FLOATING_LAYER}]`)
     const visited = new Set<Element>()
     while (layer && !visited.has(layer)) {
@@ -26,3 +20,19 @@ export function ownsFloatingLayer(
     }
     return false
 }
+
+/** An element belongs to a surface either directly or through a portaled child layer. */
+export function belongsToFloatingSurface(surface: Element, target: Element | null): boolean {
+    return Boolean(target && (surface.contains(target) || ownsFloatingLayer(surface, target)))
+}
+
+/** Whether a pointer target is outside both an anchored surface and its nested portals. */
+export function isOutsideFloatingSurface(
+    surface: Element | null,
+    anchor: Element,
+    target: EventTarget | null
+): boolean {
+    if (!target || !("closest" in target) || !("contains" in target)) return false
+    const element = target as Element
+    return !anchor.contains(element) && (!surface || !belongsToFloatingSurface(surface, element))
+}

package/src/lib/haptics.ts

@@ -14,9 +14,7 @@ let player: (kind: HapticKind) => void = () => {}
  * Components only ask for feedback; the app decides how it plays on this
  * device (system haptics, a vibration, or nothing) and whether it's on.
  */
-export function setHapticPlayer(
-    next: (kind: HapticKind) => void
-): void {
+export function setHapticPlayer(next: (kind: HapticKind) => void): void {
     player = next
 }
 

package/src/lib/language.ts

@@ -3,16 +3,11 @@ export function getNativeLanguageName(tag: string) {
     const name = new Intl.DisplayNames([tag], {
         type: "language",
     }).of(tag)
-    return name
-        ? name.charAt(0).toUpperCase() + name.slice(1)
-        : tag
+    return name ? name.charAt(0).toUpperCase() + name.slice(1) : tag
 }
 
 /** A language's name as read in `displayLocale`: "French" in English. */
-export function getLocalizedLanguageName(
-    tag: string,
-    displayLocale: string
-) {
+export function getLocalizedLanguageName(tag: string, displayLocale: string) {
     return (
         new Intl.DisplayNames([displayLocale], {
             type: "language",

package/src/lib/range-value.ts

@@ -0,0 +1,32 @@
+/** Keep controlled numeric inputs within finite bounds without floating-point drift. */
+export function clampRange(value: number, min: number, max: number): number {
+    if (!Number.isFinite(value)) return min
+    return Math.min(max, Math.max(min, value))
+}
+
+/** The nearest reachable step from min, optionally allowing an exact maximum. */
+export function stepRange(
+    value: number,
+    direction: -1 | 1,
+    min: number,
+    max: number,
+    step: number
+): number {
+    const precision = Math.min(12, Math.max(0, ...[min, max, step].map(decimalPlaces)))
+    const factor = 10 ** precision
+    const low = Math.round(min * factor)
+    const high = Math.round(max * factor)
+    const increment = Math.max(1, Math.round(step * factor))
+    const current = Math.round(clampRange(value, min, max) * factor)
+    const next =
+        direction > 0
+            ? low + (Math.floor((current - low) / increment) + 1) * increment
+            : low + (Math.ceil((current - low) / increment) - 1) * increment
+    return clampRange(Math.min(high, Math.max(low, next)) / factor, min, max)
+}
+
+function decimalPlaces(value: number): number {
+    const text = String(value)
+    const [mantissa, exponent] = text.toLowerCase().split("e")
+    return Math.max(0, (mantissa?.split(".")[1]?.length ?? 0) - Number(exponent ?? 0))
+}