@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/components/BlurhashPlaceholder/index.js

@@ -0,0 +1,150 @@
+import { injectComponentCSS } from '../../chunk-RMLTPW5S.js';
+import { clsx } from 'clsx';
+import { useRef, useState, useInsertionEffect, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/BlurhashPlaceholder/BlurhashPlaceholder.css.ts
+var BLURHASH_PLACEHOLDER_CSS = `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * BLURHASH PLACEHOLDER
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-blurhash-placeholder {
+  position: absolute;
+  inset: 0;
+  z-index: var(--sv-z-placeholder, 1);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: opacity 200ms ease-out;
+}
+
+.sv-blurhash-placeholder--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Canvas used for decoding - always hidden */
+.sv-blurhash-placeholder__canvas {
+  display: none !important;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * REDUCE MOTION
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+@media (prefers-reduced-motion: reduce) {
+  .sv-blurhash-placeholder {
+    transition: none;
+  }
+}
+`;
+var imageCache = /* @__PURE__ */ new Map();
+var decodePromise = null;
+function getBlurhashDecoder() {
+  if (!decodePromise) {
+    decodePromise = import('blurhash').then((m) => ({ decode: m.decode }));
+  }
+  return decodePromise;
+}
+function getCacheKey(blurhash, width, height, punch) {
+  return `${blurhash}:${width}:${height}:${punch}`;
+}
+function BlurhashPlaceholderHeadless({
+  blurhash,
+  width = 32,
+  height = 32,
+  punch = 1,
+  isHidden = false,
+  className,
+  testId
+}) {
+  const canvasRef = useRef(null);
+  const cacheKey = getCacheKey(blurhash, width, height, punch);
+  const [dataUrl, setDataUrl] = useState(() => {
+    return imageCache.get(cacheKey) ?? null;
+  });
+  useInsertionEffect(() => {
+    return injectComponentCSS("blurhash-placeholder", BLURHASH_PLACEHOLDER_CSS);
+  }, []);
+  useEffect(() => {
+    if (dataUrl) return void 0;
+    let cancelled = false;
+    async function decode() {
+      try {
+        const { decode: decodeBlurhash } = await getBlurhashDecoder();
+        if (cancelled) return;
+        const pixels = decodeBlurhash(blurhash, width, height, punch);
+        if (cancelled) return;
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const imageData = ctx.createImageData(width, height);
+        imageData.data.set(pixels);
+        ctx.putImageData(imageData, 0, 0);
+        const url = canvas.toDataURL();
+        imageCache.set(cacheKey, url);
+        if (!cancelled) {
+          setDataUrl(url);
+        }
+      } catch {
+      }
+    }
+    decode();
+    return () => {
+      cancelled = true;
+    };
+  }, [blurhash, width, height, punch, cacheKey, dataUrl]);
+  if (!dataUrl && !canvasRef.current) {
+    return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "sv-blurhash-placeholder__canvas" });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "sv-blurhash-placeholder__canvas" }),
+    dataUrl && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "sv-blurhash-placeholder",
+          isHidden && "sv-blurhash-placeholder--hidden",
+          className
+        ),
+        style: { backgroundImage: `url(${dataUrl})` },
+        "aria-hidden": "true",
+        "data-testid": testId
+      }
+    )
+  ] });
+}
+function clearBlurhashCache() {
+  imageCache.clear();
+}
+function getBlurhashCacheSize() {
+  return imageCache.size;
+}
+async function preloadBlurhash(blurhash, width = 32, height = 32, punch = 1) {
+  const cacheKey = getCacheKey(blurhash, width, height, punch);
+  const cached = imageCache.get(cacheKey);
+  if (cached) return cached;
+  try {
+    const { decode } = await getBlurhashDecoder();
+    const pixels = decode(blurhash, width, height, punch);
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    const imageData = ctx.createImageData(width, height);
+    imageData.data.set(pixels);
+    ctx.putImageData(imageData, 0, 0);
+    const url = canvas.toDataURL();
+    imageCache.set(cacheKey, url);
+    return url;
+  } catch {
+    return null;
+  }
+}
+
+export { BLURHASH_PLACEHOLDER_CSS, BlurhashPlaceholderHeadless, clearBlurhashCache, getBlurhashCacheSize, preloadBlurhash };

package/dist/components/CommentSheet/index.d.ts

@@ -0,0 +1,164 @@
+export { n as COMMENT_SHEET_CSS, f as CommentInput, g as CommentInputProps, h as CommentItemComponent, i as CommentItemProps, d as CommentList, e as CommentListProps, C as CommentSheet, j as CommentSheetContext, l as CommentSheetContextValue, a as CommentSheetHeadless, b as CommentSheetHeadlessProps, m as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, c as SheetHeaderProps, u as useCommentSheetContext, k as useOptionalCommentSheetContext } from '../../CommentSheet.css-BeCrEaUG.js';
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { CommentItem, ReplyItem } from '@xhub-short/contracts';
+
+interface CommentMenuContextValue {
+    /** Comment data */
+    comment: CommentItem | ReplyItem;
+    /** Whether this is a reply */
+    isReply: boolean;
+    /** Parent comment ID (for replies) */
+    parentId?: string;
+    /** Whether menu is open */
+    isOpen: boolean;
+    /** Open menu */
+    open: () => void;
+    /** Close menu */
+    close: () => void;
+    /** Toggle menu */
+    toggle: () => void;
+    /** Trigger button ref */
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    /** Menu container ref */
+    menuRef: React.RefObject<HTMLDivElement | null>;
+    /** Show confirmation dialog */
+    showConfirm: (config: ConfirmDialogConfig) => void;
+    /** i18n strings */
+    i18n: CommentMenuI18n;
+}
+interface ConfirmDialogConfig {
+    title: string;
+    message: string;
+    confirmText: string;
+    cancelText: string;
+    danger?: boolean;
+    onConfirm: () => Promise<void> | void;
+}
+interface CommentMenuI18n {
+    deleteText: string;
+    editText: string;
+    reportText: string;
+    deleteConfirmTitle: string;
+    deleteConfirmMessage: string;
+    deleteConfirmButton: string;
+    cancelButton: string;
+}
+declare function useCommentMenuContext(): CommentMenuContextValue;
+interface DeleteConfirmDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    isDeleting?: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    danger?: boolean;
+}
+declare const DeleteConfirmDialog: react.NamedExoticComponent<DeleteConfirmDialogProps>;
+interface CommentMenuProps {
+    /** Comment or Reply data */
+    comment: CommentItem | ReplyItem;
+    /** Whether this is a reply */
+    isReply?: boolean;
+    /** Parent comment ID (required for replies) */
+    parentId?: string;
+    /** Custom class */
+    className?: string;
+    /** Children (compound components) */
+    children: ReactNode;
+}
+declare function CommentMenuRoot({ comment, isReply, parentId, className, children, }: CommentMenuProps): ReactElement;
+interface CommentMenuTriggerProps {
+    /** Custom class */
+    className?: string;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Aria label */
+    'aria-label'?: string;
+}
+declare function Trigger({ className, icon, 'aria-label': ariaLabel, }: CommentMenuTriggerProps): ReactElement;
+interface CommentMenuDropdownProps {
+    /** Custom class */
+    className?: string;
+    /** Children (menu items) */
+    children: ReactNode;
+}
+declare function Dropdown({ className, children }: CommentMenuDropdownProps): ReactElement | null;
+interface CommentMenuItemProps {
+    /** Icon element */
+    icon?: ReactNode;
+    /** Danger style (red) */
+    danger?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom class */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Children (label) */
+    children: ReactNode;
+}
+declare function Item({ icon, danger, disabled, className, onClick, children, }: CommentMenuItemProps): ReactElement;
+interface DeleteItemProps {
+    /** Override confirm behavior (skip dialog if false) */
+    requireConfirm?: boolean;
+    /**
+     * Custom delete handler - overrides default context action
+     * @param id - Comment/Reply ID
+     * @param isReply - Whether this is a reply
+     * @param parentId - Parent comment ID (for replies)
+     */
+    onDelete?: (id: string, isReply: boolean, parentId?: string) => Promise<void> | void;
+    /** Custom label text */
+    label?: string;
+    /** Custom class */
+    className?: string;
+}
+declare function DeleteItem({ requireConfirm, onDelete, label, className }: DeleteItemProps): ReactElement;
+interface EditItemProps {
+    /**
+     * Edit handler - receives comment ID and current content
+     * If not provided, item will be disabled
+     */
+    onEdit?: (id: string, content: string) => void;
+    /** Custom label text */
+    label?: string;
+    /** Custom class */
+    className?: string;
+}
+declare function EditItem({ onEdit, label, className }: EditItemProps): ReactElement;
+interface ReportItemProps {
+    /**
+     * Custom report handler - overrides default context action
+     * @param id - Comment/Reply ID
+     */
+    onReport?: (id: string) => void;
+    /** Default report reason (used when onReport not provided) */
+    reason?: string;
+    /** Custom label text */
+    label?: string;
+    /** Custom class */
+    className?: string;
+}
+declare function ReportItem({ onReport, reason, label, className, }: ReportItemProps): ReactElement;
+declare const CommentMenu: react.NamedExoticComponent<CommentMenuProps> & {
+    readonly type: typeof CommentMenuRoot;
+} & {
+    Trigger: react.MemoExoticComponent<typeof Trigger>;
+    Dropdown: react.MemoExoticComponent<typeof Dropdown>;
+    Item: react.MemoExoticComponent<typeof Item>;
+    DeleteItem: react.MemoExoticComponent<typeof DeleteItem>;
+    EditItem: react.MemoExoticComponent<typeof EditItem>;
+    ReportItem: react.MemoExoticComponent<typeof ReportItem>;
+};
+
+declare const CommentItemSkeleton: react.NamedExoticComponent<object>;
+interface CommentListSkeletonProps {
+    /** Number of skeleton items to show (default: 5) */
+    count?: number;
+}
+declare const CommentListSkeleton: react.NamedExoticComponent<CommentListSkeletonProps>;
+
+export { CommentItemSkeleton, CommentListSkeleton, type CommentListSkeletonProps, CommentMenu, type CommentMenuContextValue, type CommentMenuDropdownProps, type CommentMenuI18n, type CommentMenuItemProps, type CommentMenuProps, type CommentMenuTriggerProps, type ConfirmDialogConfig, DeleteConfirmDialog, type DeleteConfirmDialogProps, type DeleteItemProps, type EditItemProps, type ReportItemProps, useCommentMenuContext };

package/dist/components/CommentSheet/index.js

@@ -0,0 +1 @@
+export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentItemSkeleton, CommentList, CommentListSkeleton, CommentMenu, CommentSheet, CommentSheetContext, CommentSheetHeadless, DeleteConfirmDialog, SheetHeader, useCommentMenuContext, useCommentSheetContext, useOptionalCommentSheetContext } from '../../chunk-FNXTPQ6L.js';

package/dist/components/ErrorBoundary/index.js

@@ -1 +1 @@
-export { ErrorBoundary } from '../../chunk-SSJDO24Q.js';
+export { ErrorBoundary } from '../../chunk-SZXFH334.js';

package/dist/components/OfflineIndicator/index.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+
+/**
+ * OfflineIndicatorHeadless - Network status indicator
+ *
+ * Shows a banner when network is offline or poor.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Indicator status type
+ */
+type IndicatorStatus = 'offline' | 'poor';
+/**
+ * Props for OfflineIndicatorHeadless
+ */
+interface OfflineIndicatorHeadlessProps {
+    /** Current connection status */
+    status: IndicatorStatus;
+    /** Whether to show the indicator */
+    isVisible: boolean;
+    /** Custom offline message */
+    offlineMessage?: string;
+    /** Custom poor connection message */
+    poorMessage?: string;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Additional CSS class */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+/**
+ * OfflineIndicatorHeadless - Network status indicator
+ *
+ * @example
+ * ```tsx
+ * const { isOnline, status } = useOnlineStatus();
+ *
+ * <OfflineIndicatorHeadless
+ *   status={status === 'offline' ? 'offline' : 'poor'}
+ *   isVisible={!isOnline || status === 'poor'}
+ * />
+ * ```
+ */
+declare function OfflineIndicatorHeadless({ status, isVisible, offlineMessage, poorMessage, icon, className, testId, }: OfflineIndicatorHeadlessProps): React.ReactElement | null;
+
+/**
+ * OfflineIndicator CSS
+ *
+ * Styles for network status indicator.
+ */
+declare const OFFLINE_INDICATOR_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * OFFLINE INDICATOR\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-offline-indicator {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--sv-offline-bg, rgba(220, 53, 69, 0.95));\n  color: var(--sv-offline-color, #fff);\n  font-size: 14px;\n  font-weight: 500;\n  z-index: var(--sv-z-toast, 1200);\n  animation: sv-offline-slide-down 200ms ease-out;\n}\n\n.sv-offline-indicator--poor {\n  background: var(--sv-offline-poor-bg, rgba(255, 193, 7, 0.95));\n  color: var(--sv-offline-poor-color, #000);\n}\n\n.sv-offline-indicator__icon {\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n}\n\n.sv-offline-indicator__message {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ANIMATIONS\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@keyframes sv-offline-slide-down {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * REDUCE MOTION\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-offline-indicator {\n    animation: none;\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * SAFE AREA (Notch devices)\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@supports (padding-top: env(safe-area-inset-top)) {\n  .sv-offline-indicator {\n    padding-top: calc(8px + env(safe-area-inset-top));\n  }\n}\n";
+
+export { type IndicatorStatus, OFFLINE_INDICATOR_CSS, OfflineIndicatorHeadless, type OfflineIndicatorHeadlessProps };

package/dist/components/OfflineIndicator/index.js

@@ -0,0 +1,151 @@
+import { injectComponentCSS } from '../../chunk-RMLTPW5S.js';
+import { clsx } from 'clsx';
+import { useInsertionEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/OfflineIndicator/OfflineIndicator.css.ts
+var OFFLINE_INDICATOR_CSS = `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * OFFLINE INDICATOR
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-offline-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--sv-offline-bg, rgba(220, 53, 69, 0.95));
+  color: var(--sv-offline-color, #fff);
+  font-size: 14px;
+  font-weight: 500;
+  z-index: var(--sv-z-toast, 1200);
+  animation: sv-offline-slide-down 200ms ease-out;
+}
+
+.sv-offline-indicator--poor {
+  background: var(--sv-offline-poor-bg, rgba(255, 193, 7, 0.95));
+  color: var(--sv-offline-poor-color, #000);
+}
+
+.sv-offline-indicator__icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.sv-offline-indicator__message {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * ANIMATIONS
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+@keyframes sv-offline-slide-down {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * REDUCE MOTION
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+@media (prefers-reduced-motion: reduce) {
+  .sv-offline-indicator {
+    animation: none;
+  }
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * SAFE AREA (Notch devices)
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  .sv-offline-indicator {
+    padding-top: calc(8px + env(safe-area-inset-top));
+  }
+}
+`;
+var DEFAULT_MESSAGES = {
+  offline: "No internet connection",
+  poor: "Poor connection"
+};
+function OfflineIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "sv-offline-indicator__icon",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zM17.04 15.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7L12 21.5l3.07-4.21 4.54 4.54 1.27-1.27-3.84-3.85zM12 4c1.23 0 2.37.14 3.42.36l-3.45 4.74L12 4z" })
+    }
+  );
+}
+function PoorConnectionIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "sv-offline-indicator__icon",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 3C7.46 3 3.34 4.78.29 7.67c-.18.18-.29.43-.29.71 0 .28.11.53.29.71l11 11c.18.18.43.29.71.29s.53-.11.71-.29l11-11c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71C20.66 4.78 16.54 3 12 3zM2.92 8.38C5.43 6.34 8.59 5 12 5s6.57 1.34 9.08 3.38L12 17.5 2.92 8.38z",
+            opacity: "0.5"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M12 21.5l4.5-6.19c-.93-.76-2.14-1.31-3.5-1.31s-2.57.55-3.5 1.31L12 21.5z" })
+      ]
+    }
+  );
+}
+function OfflineIndicatorHeadless({
+  status,
+  isVisible,
+  offlineMessage,
+  poorMessage,
+  icon,
+  className,
+  testId
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("offline-indicator", OFFLINE_INDICATOR_CSS);
+  }, []);
+  if (!isVisible) return null;
+  const message = status === "offline" ? offlineMessage ?? DEFAULT_MESSAGES.offline : poorMessage ?? DEFAULT_MESSAGES.poor;
+  const defaultIcon = status === "offline" ? /* @__PURE__ */ jsx(OfflineIcon, {}) : /* @__PURE__ */ jsx(PoorConnectionIcon, {});
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      className: clsx("sv-offline-indicator", `sv-offline-indicator--${status}`, className),
+      "data-testid": testId,
+      children: [
+        icon ?? defaultIcon,
+        /* @__PURE__ */ jsx("span", { className: "sv-offline-indicator__message", children: message })
+      ]
+    }
+  );
+}
+
+export { OFFLINE_INDICATOR_CSS, OfflineIndicatorHeadless };