@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/compositions/layout.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { ArrowLeftIcon } from "lucide-react";
+//#region src/compositions/layout.tsx
+function Page({ actions, backLink, children, className, subtitle, title, titleMetadata, ...props }) {
+	return /* @__PURE__ */ jsxs("main", {
+		...props,
+		className: cn("soft-page", className),
+		children: [
+			backLink && /* @__PURE__ */ jsxs(Link, {
+				...backLink,
+				className: "mb-3 inline-flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {
+					"aria-hidden": "true",
+					size: 16
+				}), backLink.label]
+			}),
+			/* @__PURE__ */ jsxs("header", {
+				className: "soft-page-header",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [/* @__PURE__ */ jsx("h1", { children: title }), titleMetadata]
+				}), subtitle && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-muted-foreground",
+					children: subtitle
+				})] }), actions && /* @__PURE__ */ jsx("div", {
+					className: "soft-page-actions",
+					children: actions
+				})]
+			}),
+			children
+		]
+	});
+}
+function Section({ actions, children, className, title, ...props }) {
+	return /* @__PURE__ */ jsxs("section", {
+		...props,
+		className: cn("soft-section", className),
+		children: [title && /* @__PURE__ */ jsxs("div", {
+			className: "mb-2 flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "soft-section-title",
+				children: title
+			}), actions]
+		}), children]
+	});
+}
+const gaps = {
+	default: "var(--soft-space-4)",
+	large: "var(--soft-space-6)",
+	none: "0",
+	small: "var(--soft-space-2)"
+};
+function Stack({ align = "stretch", className, direction = "vertical", gap = "default", justify = "start", style, wrap = direction === "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("soft-stack", className),
+		style: {
+			"--soft-gap": gaps[gap],
+			alignItems: align,
+			flexDirection: direction === "horizontal" ? "row" : "column",
+			flexWrap: wrap ? "wrap" : "nowrap",
+			justifyContent: justify === "between" ? "space-between" : justify,
+			...style
+		}
+	});
+}
+function Grid({ className, columns = 2, gap = "default", style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("soft-grid", className),
+		style: {
+			"--soft-columns": columns,
+			"--soft-gap": gaps[gap],
+			...style
+		}
+	});
+}
+function Link({ className, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		className: cn("soft-link", className)
+	});
+}
+//#endregion
+export { Grid, Link, Page, Section, Stack };

package/dist/compositions/state-blocks/state-blocks.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+//#region src/compositions/state-blocks/state-blocks.d.ts
+type EmptyStateProps = {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Icon shown in a muted tile above the title. */
+  icon?: React.ReactNode;
+  /** Next step, such as a button that creates the first item. */
+  action?: React.ReactNode;
+  className?: string;
+};
+/**
+ * Shown when a view has loaded and holds nothing. Exported as `EmptyState`
+ * because the `Empty` name belongs to the shadcn primitive it is built on.
+ */
+declare function EmptyState({ title, description, icon, action, className }: EmptyStateProps): React.JSX.Element;
+type LoadingProps = {
+  /** Announced to assistive technology while the skeleton shows. */
+  label?: string;
+  /** Number of placeholder rows. */
+  rows?: number;
+  /** `list` draws an avatar and two lines per row; `text` draws paragraph lines. */
+  variant?: "list" | "text";
+  className?: string;
+};
+/** Skeleton placeholder shown while a view's data loads. */
+declare function Loading({ label, rows, variant, className }: LoadingProps): React.JSX.Element;
+type ErrorStateProps = {
+  title?: React.ReactNode;
+  /** What failed, in the words the owner needs to decide on a retry. */
+  description?: React.ReactNode;
+  /** Shows a retry button. Retrying is always the owner's action, never automatic. */
+  onRetry?: () => void;
+  retryLabel?: string;
+  /** Disables the retry button and shows a spinner while a retry runs. */
+  isRetrying?: boolean;
+  className?: string;
+};
+/** Destructive alert for a failed load or action, with an optional retry. */
+declare function ErrorState({ title, description, onRetry, retryLabel, isRetrying, className }: ErrorStateProps): React.JSX.Element;
+//#endregion
+export { EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Loading, type LoadingProps };

package/dist/compositions/state-blocks/state-blocks.js

@@ -0,0 +1,81 @@
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "../../components/ui/alert.js";
+import { Button } from "../../components/ui/button.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../../components/ui/empty.js";
+import { Skeleton } from "../../components/ui/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CircleAlertIcon, Loader2Icon, RotateCwIcon } from "lucide-react";
+//#region src/compositions/state-blocks/state-blocks.tsx
+/**
+* Shown when a view has loaded and holds nothing. Exported as `EmptyState`
+* because the `Empty` name belongs to the shadcn primitive it is built on.
+*/
+function EmptyState({ title, description, icon, action, className }) {
+	return /* @__PURE__ */ jsxs(Empty, {
+		"data-slot": "empty-state",
+		className: cn("border border-dashed", className),
+		children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [
+			icon ? /* @__PURE__ */ jsx(EmptyMedia, {
+				variant: "icon",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+			description ? /* @__PURE__ */ jsx(EmptyDescription, { children: description }) : null
+		] }), action ? /* @__PURE__ */ jsx(EmptyContent, { children: action }) : null]
+	});
+}
+const TEXT_LINE_WIDTHS = [
+	"w-full",
+	"w-11/12",
+	"w-4/5",
+	"w-3/5"
+];
+/** Skeleton placeholder shown while a view's data loads. */
+function Loading({ label = "Loading", rows = 3, variant = "list", className }) {
+	const rowKeys = Array.from({ length: Math.max(rows, 0) }, (_, row) => `loading-row-${row}`);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-busy": "true",
+		"data-slot": "loading",
+		"data-variant": variant,
+		className: cn("flex w-full flex-col", variant === "list" ? "gap-4" : "gap-2.5", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		}), rowKeys.map((key, row) => variant === "list" ? /* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0 rounded-full motion-reduce:animate-none" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 flex-col gap-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-2/5 motion-reduce:animate-none" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-4/5 motion-reduce:animate-none" })]
+			})]
+		}, key) : /* @__PURE__ */ jsx(Skeleton, {
+			"aria-hidden": "true",
+			className: cn("h-3 motion-reduce:animate-none", TEXT_LINE_WIDTHS[row % TEXT_LINE_WIDTHS.length])
+		}, key))]
+	});
+}
+/** Destructive alert for a failed load or action, with an optional retry. */
+function ErrorState({ title = "Something went wrong", description, onRetry, retryLabel = "Retry", isRetrying = false, className }) {
+	return /* @__PURE__ */ jsxs(Alert, {
+		variant: "destructive",
+		"data-slot": "error-state",
+		className,
+		children: [
+			/* @__PURE__ */ jsx(CircleAlertIcon, {}),
+			/* @__PURE__ */ jsx(AlertTitle, { children: title }),
+			description ? /* @__PURE__ */ jsx(AlertDescription, { children: description }) : null,
+			onRetry ? /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				size: "xs",
+				className: "text-foreground",
+				onClick: () => onRetry(),
+				disabled: isRetrying,
+				"aria-busy": isRetrying || void 0,
+				children: [isRetrying ? /* @__PURE__ */ jsx(Loader2Icon, { className: "animate-spin motion-reduce:animate-none" }) : /* @__PURE__ */ jsx(RotateCwIcon, {}), retryLabel]
+			}) }) : null
+		]
+	});
+}
+//#endregion
+export { EmptyState, ErrorState, Loading };

package/dist/compositions/status-panel/status-panel.d.ts

@@ -0,0 +1,94 @@
+import { StatusTone } from "../../lib/status-tone.js";
+import * as React from "react";
+//#region src/compositions/status-panel/status-panel.d.ts
+export type StatusPanelTone = StatusTone;
+export interface StatusPanelState {
+  /** The state chip's text, for example "Granted" or "Revoked". */
+  label: string;
+  /** How the state reads at a glance. Defaults to `neutral`. */
+  tone?: StatusPanelTone;
+}
+export interface StatusPanelCounter {
+  label: string;
+  value: React.ReactNode;
+}
+/** What the confirmation says before a toggle runs. */
+export interface StatusPanelConfirm {
+  /** The question, for example "Revoke sending?". */
+  title: string;
+  /** Plain text naming what happens if the owner confirms. */
+  consequence: string;
+  /** Label of the confirm button, for example "Revoke". */
+  confirmLabel: string;
+  /** Style the confirm button as a destructive action. */
+  destructive?: boolean;
+}
+export interface StatusPanelToggle {
+  /** Whether the switch is on. The panel never flips it: the app does, once `onToggle` settles. */
+  checked: boolean;
+  /** The switch's visible label, for example "Sending allowed". */
+  label: string;
+  /**
+   * The confirmation for each direction: `on` before switching on, `off`
+   * before switching off. Every toggle confirms first.
+   */
+  confirm: {
+    on: StatusPanelConfirm;
+    off: StatusPanelConfirm;
+  };
+  /** Disable the switch for a reason other than a pending toggle. */
+  disabled?: boolean;
+}
+export interface StatusPanelItem {
+  id: string;
+  label: string;
+  description?: string;
+  /** The item's current state, shown as a chip. */
+  state: StatusPanelState;
+  /** Small numbers about the item, for example "Sent today: 4". */
+  counters?: readonly StatusPanelCounter[];
+  /** A guarded on/off control. */
+  toggle?: StatusPanelToggle;
+}
+export interface StatusPanelToggleError {
+  /** The item whose toggle failed. */
+  itemId: string;
+  /** Plain-text error, for example the server's message. */
+  message: string;
+}
+export interface StatusPanelProps {
+  items: readonly StatusPanelItem[];
+  /** Runs a confirmed toggle. It is never called without the owner's confirmation. */
+  onToggle: (itemId: string, next: boolean) => void;
+  /** Whether an item's toggle is in flight. Its switch is disabled meanwhile. */
+  isPending?: (itemId: string) => boolean;
+  /**
+   * The last failed toggle (FAILED). It shows on its item until the owner
+   * dismisses it. The panel never retries.
+   */
+  toggleError?: StatusPanelToggleError | null;
+  /** The owner dismissed `toggleError` (FAILED to IDLE). Clear it here. */
+  onDismissToggleError?: () => void;
+  /** Accessible name of the panel. */
+  label?: string;
+  /** Show placeholder rows while the first load is in flight. */
+  isLoading?: boolean;
+  /**
+   * Plain-text load error. With items on screen they stay visible below it,
+   * as the last good data.
+   */
+  error?: string;
+  /** Offer a retry next to `error`. Retrying is the owner's action. */
+  onRetry?: () => void;
+  /** Text shown when there are no items. */
+  emptyLabel?: string;
+  className?: string;
+}
+/**
+ * Status cards (the gate rail: grant, revoke, reopen), each with a state chip,
+ * counters and an optional switch. Every switch goes through ConfirmAction
+ * before `onToggle` runs; the switch is disabled while its toggle is pending,
+ * and a failed toggle shows on its card until the owner dismisses it.
+ */
+export declare function StatusPanel({ items, onToggle, isPending, toggleError, onDismissToggleError, label, isLoading, error, onRetry, emptyLabel, className }: StatusPanelProps): React.JSX.Element;
+//#endregion

package/dist/compositions/status-panel/status-panel.js

@@ -0,0 +1,189 @@
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "../../components/ui/alert.js";
+import { Spinner } from "../../components/ui/spinner.js";
+import { Button } from "../../components/ui/button.js";
+import { Badge } from "../../components/ui/badge.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/ui/card.js";
+import { Label } from "../../components/ui/label.js";
+import { Switch } from "../../components/ui/switch.js";
+import { ConfirmAction } from "../confirm-action/confirm-action.js";
+import { ToneDot } from "../../lib/status-tone.js";
+import { EmptyState, ErrorState, Loading } from "../state-blocks/state-blocks.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { AlertCircleIcon } from "lucide-react";
+//#region src/compositions/status-panel/status-panel.tsx
+/**
+* Status cards (the gate rail: grant, revoke, reopen), each with a state chip,
+* counters and an optional switch. Every switch goes through ConfirmAction
+* before `onToggle` runs; the switch is disabled while its toggle is pending,
+* and a failed toggle shows on its card until the owner dismisses it.
+*/
+function StatusPanel({ items, onToggle, isPending, toggleError, onDismissToggleError, label = "Status", isLoading = false, error, onRetry, emptyLabel = "Nothing to show", className }) {
+	const baseId = React.useId();
+	const switches = React.useRef(/* @__PURE__ */ new Map());
+	const [confirmation, setConfirmation] = React.useState(null);
+	const [confirmOpen, setConfirmOpen] = React.useState(false);
+	const pending = (itemId) => isPending?.(itemId) ?? false;
+	const hasItems = items.length > 0;
+	const requestToggle = (item, next) => {
+		const toggle = item.toggle;
+		if (!toggle || toggle.disabled || pending(item.id)) return;
+		setConfirmation({
+			item,
+			toggle,
+			next
+		});
+		setConfirmOpen(true);
+	};
+	const registerSwitch = (itemId) => (element) => {
+		if (element) switches.current.set(itemId, element);
+		else switches.current.delete(itemId);
+	};
+	const dismissFailure = (itemId) => {
+		switches.current.get(itemId)?.focus();
+		onDismissToggleError?.();
+	};
+	const confirmText = confirmation ? confirmation.toggle.confirm[confirmation.next ? "on" : "off"] : void 0;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		"aria-busy": isLoading || void 0,
+		"data-slot": "status-panel",
+		className: cn("flex w-full flex-col gap-3 text-xs/relaxed", className),
+		children: [
+			error ? /* @__PURE__ */ jsx(ErrorState, {
+				title: error,
+				description: hasItems ? "Showing the last status loaded." : void 0,
+				onRetry
+			}) : null,
+			isLoading && !hasItems ? /* @__PURE__ */ jsx(Card, {
+				size: "sm",
+				"data-slot": "status-panel-loading",
+				children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Loading, {
+					label: `Loading ${label.toLowerCase()}`,
+					variant: "text",
+					rows: 4
+				}) })
+			}) : null,
+			!isLoading && !hasItems && !error ? /* @__PURE__ */ jsx(EmptyState, { title: emptyLabel }) : null,
+			hasItems ? /* @__PURE__ */ jsx("ul", {
+				"aria-label": label,
+				className: "grid grid-cols-[repeat(auto-fill,minmax(min(100%,16rem),1fr))] gap-3",
+				children: items.map((item) => {
+					const tone = item.state.tone ?? "neutral";
+					const titleId = `${baseId}-${item.id}-title`;
+					const descriptionId = `${baseId}-${item.id}-description`;
+					const stateId = `${baseId}-${item.id}-state`;
+					const switchId = `${baseId}-${item.id}-switch`;
+					const errorId = `${baseId}-${item.id}-error`;
+					const isItemPending = pending(item.id);
+					const failure = toggleError?.itemId === item.id ? toggleError : null;
+					return /* @__PURE__ */ jsx("li", {
+						className: "flex",
+						children: /* @__PURE__ */ jsxs(Card, {
+							size: "sm",
+							role: "group",
+							"aria-labelledby": titleId,
+							"aria-describedby": item.description ? descriptionId : void 0,
+							"aria-busy": isItemPending || void 0,
+							"data-slot": "status-panel-item",
+							"data-pending": isItemPending || void 0,
+							"data-failed": failure ? true : void 0,
+							className: "w-full data-failed:ring-destructive/60",
+							children: [
+								/* @__PURE__ */ jsxs(CardHeader, { children: [
+									/* @__PURE__ */ jsx(CardTitle, {
+										id: titleId,
+										children: item.label
+									}),
+									item.description ? /* @__PURE__ */ jsx(CardDescription, {
+										id: descriptionId,
+										children: item.description
+									}) : null,
+									/* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs(Badge, {
+										id: stateId,
+										"data-slot": "status-panel-state",
+										"data-tone": tone,
+										variant: tone === "critical" ? "destructive" : "outline",
+										children: [/* @__PURE__ */ jsx(ToneDot, { tone }), item.state.label]
+									}) })
+								] }),
+								item.counters && item.counters.length > 0 ? /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("dl", {
+									className: "grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-3",
+									children: item.counters.map((counter) => /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col gap-0.5",
+										children: [/* @__PURE__ */ jsx("dt", {
+											className: "text-muted-foreground",
+											children: counter.label
+										}), /* @__PURE__ */ jsx("dd", {
+											className: "font-heading text-sm font-medium tabular-nums",
+											children: counter.value
+										})]
+									}, counter.label))
+								}) }) : null,
+								failure ? /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Alert, {
+									variant: "destructive",
+									"data-slot": "status-panel-toggle-error",
+									children: [
+										/* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" }),
+										/* @__PURE__ */ jsx(AlertTitle, { children: "Change failed" }),
+										/* @__PURE__ */ jsx(AlertDescription, {
+											id: errorId,
+											children: failure.message
+										}),
+										onDismissToggleError ? /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(Button, {
+											type: "button",
+											size: "xs",
+											variant: "outline",
+											className: "text-foreground",
+											onClick: () => dismissFailure(item.id),
+											children: "Dismiss"
+										}) }) : null
+									]
+								}) }) : null,
+								item.toggle ? /* @__PURE__ */ jsxs(CardFooter, {
+									className: "mt-auto gap-2 border-t",
+									children: [
+										/* @__PURE__ */ jsx(Switch, {
+											ref: registerSwitch(item.id),
+											id: switchId,
+											checked: item.toggle.checked,
+											disabled: item.toggle.disabled || isItemPending,
+											"aria-describedby": failure ? `${stateId} ${errorId}` : stateId,
+											onCheckedChange: (next) => requestToggle(item, next)
+										}),
+										/* @__PURE__ */ jsx(Label, {
+											htmlFor: switchId,
+											children: item.toggle.label
+										}),
+										isItemPending ? /* @__PURE__ */ jsx(Spinner, {
+											"aria-label": "Pending",
+											className: "ml-auto size-3.5"
+										}) : null
+									]
+								}) : null
+							]
+						})
+					}, item.id);
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(ConfirmAction, {
+				open: confirmOpen,
+				onOpenChange: setConfirmOpen,
+				title: confirmText?.title ?? "",
+				consequence: confirmText?.consequence ?? "",
+				confirmLabel: confirmText?.confirmLabel ?? "",
+				tone: confirmText?.destructive ? "destructive" : "default",
+				isPending: confirmation ? pending(confirmation.item.id) : false,
+				finalFocus: () => confirmation && switches.current.get(confirmation.item.id) || true,
+				onConfirm: () => {
+					if (!confirmation) return;
+					setConfirmOpen(false);
+					onToggle(confirmation.item.id, confirmation.next);
+				}
+			})
+		]
+	});
+}
+//#endregion
+export { StatusPanel };

package/dist/fonts/inter.css

@@ -0,0 +1,15 @@
+/*
+ * Inter 4.1 variable, upright, by Rasmus Andersson (SIL OFL 1.1, see
+ * licenses/Inter-OFL.txt). Unmodified file from the official release:
+ *   https://github.com/rsms/inter/releases/download/v4.1/Inter-4.1.zip
+ *   archive SHA-256 9883fdd4a49d4fb66bd8177ba6625ef9a64aa45899767dde3d36aa425756b11e
+ *   web/InterVariable.woff2 SHA-256 693b77d4f32ee9b8bfc995589b5fad5e99adf2832738661f5402f9978429a8e3
+ * The release ships no Latin-only subset; this is the full variable file.
+ */
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./InterVariable.woff2") format("woff2");
+}

package/dist/hooks/use-attachment-src.js

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useAuiState } from "@assistant-ui/react";
+import { useShallow } from "zustand/react/shallow";
+//#region src/hooks/use-attachment-src.ts
+const useFileSrc = (file) => {
+	const [entry, setEntry] = useState(void 0);
+	useEffect(() => {
+		if (!file) {
+			setEntry(void 0);
+			return;
+		}
+		const objectUrl = URL.createObjectURL(file);
+		setEntry({
+			file,
+			url: objectUrl
+		});
+		return () => {
+			URL.revokeObjectURL(objectUrl);
+		};
+	}, [file]);
+	return entry !== void 0 && entry.file === file ? entry.url : void 0;
+};
+const useAttachmentSrc = () => {
+	const { file, src } = useAuiState(useShallow((s) => {
+		if (s.attachment.type !== "image") return {};
+		if (s.attachment.file) return { file: s.attachment.file };
+		const src = s.attachment.content?.filter((c) => c.type === "image")[0]?.image;
+		if (!src) return {};
+		return { src };
+	}));
+	return useFileSrc(file) ?? src;
+};
+//#endregion
+export { useAttachmentSrc };

package/dist/hooks/use-copy-to-clipboard.js

@@ -0,0 +1,34 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/use-copy-to-clipboard.ts
+const useCopyToClipboard = ({ copiedDuration = 3e3 } = {}) => {
+	const [isCopied, setIsCopied] = useState(false);
+	const copiedTimerRef = useRef(void 0);
+	const scopeGenerationRef = useRef(0);
+	useEffect(() => () => {
+		scopeGenerationRef.current += 1;
+		if (copiedTimerRef.current === void 0) return;
+		clearTimeout(copiedTimerRef.current);
+		copiedTimerRef.current = void 0;
+		setIsCopied(false);
+	}, []);
+	const copyToClipboard = (value) => {
+		if (!value || typeof navigator === "undefined" || !navigator.clipboard) return;
+		const scopeGeneration = scopeGenerationRef.current;
+		navigator.clipboard.writeText(value).then(() => {
+			if (scopeGeneration !== scopeGenerationRef.current) return;
+			if (copiedTimerRef.current !== void 0) clearTimeout(copiedTimerRef.current);
+			setIsCopied(true);
+			copiedTimerRef.current = setTimeout(() => {
+				copiedTimerRef.current = void 0;
+				setIsCopied(false);
+			}, copiedDuration);
+		}, () => {});
+	};
+	return {
+		isCopied,
+		copyToClipboard
+	};
+};
+//#endregion
+export { useCopyToClipboard };

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,3 @@
+//#region src/hooks/use-mobile.d.ts
+export declare function useIsMobile(): boolean;
+//#endregion

package/dist/hooks/use-mobile.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+//#region src/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState(void 0);
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: 767px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+//#endregion
+export { useIsMobile };