@qumra/fanar 0.0.0

package/dist/index.d.ts

@@ -0,0 +1,3172 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ComponentType, CSSProperties, PointerEvent, KeyboardEvent, RefObject } from 'react';
+
+/**
+ * دمج كلاسات — المتأخّر بيكسب المتعارِض معه، والباقي بيفضل.
+ * بيقبل أي قيمة falsy عشان `cond && 'class'` يشتغل حتى لو cond رقم أو نص.
+ */
+type ClassValue = string | false | 0 | 0n | null | undefined;
+declare function cn(...parts: ClassValue[]): string;
+type Tone = 'neutral' | 'brand' | 'amber' | 'green' | 'red' | 'violet';
+declare const TONE_SOFT: Record<Tone, string>;
+declare const TONE_SOLID: Record<Tone, string>;
+/**
+ * يحوّل الأرقام العربية-الهندية للاتينية.
+ *
+ * ── ليه ده لازم ────────────────────────────────────────────────────────
+ * لوحة المفاتيح العربية على الموبايل بتكتب `٥٦٤٦`، والمتصفّح مابيعرفش
+ * إنها أرقام: `Number('٥٦٤٦')` بيدّي `NaN`، و`type="number"` بيرفضها
+ * ويفضّي الحقل من غير ما يقول ليه.
+ *
+ * فالمستخدم بيكتب رقم صح والحقل بيبان فاضي — وأسوأ حاجة في ده إنه
+ * **مابيرميش خطأ**: مفيش رسالة ولا تحقّق، الرقم بيختفي وبس.
+ *
+ * ── والتحويل فوري ──────────────────────────────────────────────────────
+ * وهو بيكتب مش عند الحفظ. لو اتأخّر للحفظ، الحقل بيفضل يعرض `٥٦٤٦`
+ * والحسابات اللي بتتفرّج عليه (الربح، الإجمالي) بتشتغل على `NaN` —
+ * فالشاشة بتقول رقم والحساب بيقول لأ.
+ *
+ * بيغطّي التلات مجموعات: العربية-الهندية (٠-٩) والفارسية-الأردية
+ * (۰-۹) وعلامتَي العشرية والآلاف العربيتين.
+ */
+declare function toLatinDigits(s: string): string;
+type ButtonVariant = 'primary' | 'soft' | 'outline' | 'ghost' | 'danger' | 'link';
+type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * كلاسات الزرار من غير العنصر نفسه.
+ *
+ * موجودة عشان اللينك اللي شكله زرار: `<Button>` بيطلّع `<button>`
+ * دايماً، والحاجة اللي بتوَدّي لصفحة تانية لازم تبقى `<a>` — الوسط
+ * بيضغط عليها يفتح تبويب، وقارئ الشاشة بيقول «رابط» مش «زر».
+ * صفحة الهبوط كلها من النوع ده، فالبديل كان نسخ خرايط الأنماط.
+ */
+declare function buttonClasses(variant?: ButtonVariant, size?: ButtonSize, extra?: string): string;
+
+/** سلّم الخط — الدرجة بعد `text-` */
+declare const TEXT_SCALE: readonly ["micro", "caption", "ui", "body", "lead", "base", "h4", "h3", "h2", "h1", "display", "hero", "title", "mega"];
+type TextSize = (typeof TEXT_SCALE)[number];
+/** نصف القطر بالدور مش بالمقاس — الدرجة بعد `rounded-` */
+declare const RADIUS_SCALE: readonly ["mark", "xs", "sm", "field", "card", "lg", "section", "full"];
+type Radius = (typeof RADIUS_SCALE)[number];
+/** الظل بالدور — الدرجة بعد `shadow-` */
+declare const SHADOW_SCALE: readonly ["raise", "tip", "panel", "pop", "modal", "toast", "sheet"];
+type Shadow = (typeof SHADOW_SCALE)[number];
+/** عرض الحاويات — الدرجة بعد `max-w-` */
+declare const CONTAINER_SCALE: readonly ["page", "shell", "note", "lead"];
+type Container = (typeof CONTAINER_SCALE)[number];
+/** الحركات — الدرجة بعد `animate-` */
+declare const ANIMATE_SCALE: readonly ["qfade", "qslide", "tip", "tip-up", "drawer", "drawer-rtl", "savebar", "skeleton"];
+type Animation = (typeof ANIMATE_SCALE)[number];
+/** أسماء الألوان — الدرجة بعد `bg-` و`text-` و`border-` */
+declare const COLOR_SCALE: readonly ["surface", "bg", "line", "hover", "ink", "ink2", "muted", "muted2", "border", "soft", "soft2", "brand-100", "brand-900", "brand-ink", "brand", "brand-hover", "brand-deep", "skeleton", "tint", "tint2", "mint", "amber-900", "amber", "amber-bg", "amber-ink", "amber-line", "amber-hover", "green", "green-bg", "green-bg2", "green-line", "green-solid", "violet", "violet-bg", "violet-line", "violet-solid", "red-100", "red", "red-bg", "red-line", "danger", "danger-hover", "night", "hero-body", "hero-meta", "hero-dim", "hero-text", "code-bg", "code-plain", "code-key", "code-tag", "code-attr", "code-str", "code-num", "code-note", "code-dim", "code-line", "code-chip"];
+type ColorToken = (typeof COLOR_SCALE)[number];
+/** كل التوكنز بقيمتها في الوضع الفاتح — للكود اللي بياخد اللون كنصّ */
+declare const TOKENS: {
+    readonly '--font-sans': "\"Alexandria\", system-ui, sans-serif";
+    readonly '--color-surface': "#ffffff";
+    readonly '--color-bg': "#f7f9f9";
+    readonly '--color-line': "#edf1f1";
+    readonly '--color-hover': "#f2f6f6";
+    readonly '--color-ink': "#020809";
+    readonly '--color-ink2': "#3d4545";
+    readonly '--color-muted': "#5f6a6a";
+    readonly '--color-muted2': "#687373";
+    readonly '--color-border': "#7f8c8c";
+    readonly '--color-soft': "#eaf2f3";
+    readonly '--color-soft2': "#dceded";
+    readonly '--color-brand-100': "#a5c9cc";
+    readonly '--color-brand-900': "#0a2528";
+    readonly '--color-brand-ink': "#0f4a4e";
+    readonly '--color-brand': "#207982";
+    readonly '--color-brand-hover': "#1a646c";
+    readonly '--color-brand-deep': "#0b3b3e";
+    readonly '--color-skeleton': "#d6dcdc";
+    readonly '--color-tint': "#f4faf8";
+    readonly '--color-tint2': "#eff6f3";
+    readonly '--color-mint': "#7dd3c0";
+    readonly '--color-amber-900': "#3d2a05";
+    readonly '--color-amber': "#f8ac33";
+    readonly '--color-amber-bg': "#fef6e9";
+    readonly '--color-amber-ink': "#85570f";
+    readonly '--color-amber-line': "#fbd79a";
+    readonly '--color-amber-hover': "#de9219";
+    readonly '--color-green': "#1e7a45";
+    readonly '--color-green-bg': "#f1faf4";
+    readonly '--color-green-bg2': "#e9f6ee";
+    readonly '--color-green-line': "#bfe6ce";
+    readonly '--color-green-solid': "#1e7a45";
+    readonly '--color-violet': "#4b3e8e";
+    readonly '--color-violet-bg': "#edeaf6";
+    readonly '--color-violet-line': "#ded8ef";
+    readonly '--color-violet-solid': "#6d5eb8";
+    readonly '--color-red-100': "#f3a79e";
+    readonly '--color-red': "#8e2b20";
+    readonly '--color-red-bg': "#fdecea";
+    readonly '--color-red-line': "#f3c9c4";
+    readonly '--color-danger': "#c94134";
+    readonly '--color-danger-hover': "#a3362b";
+    readonly '--color-night': "#0b0f12";
+    readonly '--color-hero-body': "#bfd9d8";
+    readonly '--color-hero-meta': "#8fb3b2";
+    readonly '--color-hero-dim': "#5e7a79";
+    readonly '--color-hero-text': "#d7e3e2";
+    readonly '--color-code-bg': "#1f1f1f";
+    readonly '--color-code-plain': "#d4d4d4";
+    readonly '--color-code-key': "#569cd6";
+    readonly '--color-code-tag': "#4ec9b0";
+    readonly '--color-code-attr': "#9cdcfe";
+    readonly '--color-code-str': "#ce9178";
+    readonly '--color-code-num': "#b5cea8";
+    readonly '--color-code-note': "#6a9955";
+    readonly '--color-code-dim': "#858585";
+    readonly '--color-code-line': "#303031";
+    readonly '--color-code-chip': "#f4f7f7";
+    readonly '--text-micro': "11px";
+    readonly '--text-caption': "12px";
+    readonly '--text-ui': "13px";
+    readonly '--text-body': "14px";
+    readonly '--text-lead': "15px";
+    readonly '--text-base': "16px";
+    readonly '--text-base--line-height': "initial";
+    readonly '--text-h4': "17px";
+    readonly '--text-h3': "20px";
+    readonly '--text-h2': "24px";
+    readonly '--text-h1': "30px";
+    readonly '--text-display': "36px";
+    readonly '--text-hero': "44px";
+    readonly '--text-title': "40px";
+    readonly '--text-mega': "54px";
+    readonly '--container-page': "1600px";
+    readonly '--container-shell': "1600px";
+    readonly '--container-note': "340px";
+    readonly '--container-lead': "520px";
+    readonly '--radius-mark': "3px";
+    readonly '--radius-xs': "5px";
+    readonly '--radius-sm': "7px";
+    readonly '--radius-field': "9px";
+    readonly '--radius-card': "12px";
+    readonly '--radius-lg': "14px";
+    readonly '--radius-section': "18px";
+    readonly '--radius-full': "999px";
+    readonly '--shadow-raise': "0 1px 3px var(--shadow-color)";
+    readonly '--shadow-tip': "0 6px 18px var(--shadow-color)";
+    readonly '--shadow-panel': "0 10px 30px var(--shadow-color)";
+    readonly '--shadow-pop': "0 18px 44px var(--shadow-color)";
+    readonly '--shadow-modal': "0 24px 60px rgb(2 8 9 / 0.28)";
+    readonly '--shadow-toast': "0 16px 40px rgb(2 8 9 / 0.26)";
+    readonly '--shadow-sheet': "0 -14px 40px rgb(2 8 9 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.06)";
+    readonly '--shadow-color': "rgb(2 8 9 / 0.14)";
+    readonly '--animate-qfade': "qfade 0.16s ease-out";
+    readonly '--animate-qslide': "qslidein 0.22s ease-out";
+    readonly '--animate-tip': "tip-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1)";
+    readonly '--animate-tip-up': "tip-up 0.3s cubic-bezier(0.2, 0.9, 0.2, 1)";
+    readonly '--animate-drawer': "drawer-ltr 0.32s cubic-bezier(0.2, 0.9, 0.2, 1)";
+    readonly '--animate-drawer-rtl': "drawer-rtl 0.32s cubic-bezier(0.2, 0.9, 0.2, 1)";
+    readonly '--animate-savebar': "savebar-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1)";
+    readonly '--animate-skeleton': "skeleton-pulse 1.6s ease-in-out infinite";
+    readonly '--num-align': "right";
+    readonly '--num-align-far': "left";
+    readonly '--num-pad-right': "0.875rem";
+    readonly '--num-pad-left': "3.5rem";
+    readonly '--num-icon-pad-right': "2.5rem";
+    readonly '--num-icon-pad-left': "0.875rem";
+};
+/** التجاوزات في الوضع الداكن — بس اللي بيتغيّر */
+declare const DARK_TOKENS: {
+    readonly '--color-surface': "#101718";
+    readonly '--color-bg': "#0a0f10";
+    readonly '--color-line': "#1e2829";
+    readonly '--color-hover': "#1a2425";
+    readonly '--color-ink': "#f2f6f6";
+    readonly '--color-ink2': "#c7d1d1";
+    readonly '--color-muted': "#93a0a0";
+    readonly '--color-muted2': "#7a8787";
+    readonly '--color-border': "#5e6b6c";
+    readonly '--color-soft': "#12363a";
+    readonly '--color-soft2': "#17454a";
+    readonly '--color-brand-ink': "#7dd3c0";
+    readonly '--color-skeleton': "#2c3232";
+    readonly '--color-amber': "#f8ac33";
+    readonly '--color-amber-bg': "#2b2009";
+    readonly '--color-amber-ink': "#f5c77a";
+    readonly '--color-amber-line': "#5c4415";
+    readonly '--color-green': "#6ecf9a";
+    readonly '--color-green-bg': "#0d2119";
+    readonly '--color-green-bg2': "#102a22";
+    readonly '--color-green-line': "#245140";
+    readonly '--color-violet': "#b9aeea";
+    readonly '--color-violet-bg': "#1e1a33";
+    readonly '--color-violet-line': "#38305c";
+    readonly '--color-red': "#f3a79e";
+    readonly '--color-red-bg': "#2c1613";
+    readonly '--color-red-line': "#5c2a24";
+    readonly '--color-code-chip': "#17201f";
+    readonly '--shadow-color': "rgb(0 0 0 / 0.55)";
+};
+type TokenName = keyof typeof TOKENS;
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** أيقونة قبل النص — بتتقلب مع اتجاه الصفحة تلقائياً */
+    icon?: ReactNode;
+    /** أيقونة بعد النص */
+    iconEnd?: ReactNode;
+    /** زرار أيقونة فقط — لازم معاه aria-label */
+    iconOnly?: boolean;
+    loading?: boolean;
+    block?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * لغة الصفحة كاملةً — لا `boolean`.
+ *
+ * ── لماذا اللغة نفسها لا «إنجليزيّ؟ نعم/لا» ────────────────────────────
+ * كانت الدالّة تُرجع `boolean`، والتنسيق يختار بين `ar-EG` و`en-US`.
+ * وذلك **خطأ في خمس دول عربيّة**: المغرب والجزائر وتونس وليبيا تكتب
+ * الأرقام لاتينيّةً بفواصل أوروبيّة (`1.250,50`)، والإمارات لاتينيّةً
+ * بفواصل إنجليزيّة (`1,250.50`) — بينما مصر والخليج والمشرق تكتبها
+ * عربيّةً هنديّة (`١٬٢٥٠٫٥٠`).
+ *
+ * فتاجر مغربيّ كان يرى أرقاماً مصريّة. و`Intl` يعرف هذا كلّه بشرط أن
+ * يصله `ar-MA` لا `ar-EG`.
+ */
+/**
+ * لغة العرض على الخادم — يمرّرها التطبيق عبر `MoneyProvider`.
+ *
+ * ── لماذا سياق ولا يكفي قارئ الـDOM ────────────────────────────────────
+ * `langStore` يقرأ `document.documentElement.lang`، و`document` لا وجود
+ * له على الخادم. فكانت لقطة الخادم ثابتةً: `() => 'ar'`.
+ *
+ * وهي **خطأ مقيس**: `ar` المجرّدة افتراضها `latn` في CLDR.
+ *
+ *     Intl.NumberFormat('ar').format(1250.5)     → 1,250.50
+ *     Intl.NumberFormat('ar-EG').format(1250.5)  → ١٬٢٥٠٫٥٠
+ *
+ * فكل مبلغ يُرسم على الخادم كان يخرج بأرقام لاتينيّة، ثم ينقلب هنديّاً
+ * بعد الترطيب — ومضة يراها المستخدم، و**عدم تطابق** يشتكي منه React.
+ * والعيب يمرّ بلا انتباه لأن الشكل النهائيّ صحيح.
+ */
+declare const LocaleCtx: react.Context<string | null>;
+/**
+ * لغة العرض.
+ *
+ * تُقرأ من `<html lang>` في المتصفّح — فتبديل اللغة يسري على كلّ مبلغ بلا
+ * تمرير. وعلى الخادم تُؤخذ من `MoneyProvider`، وإن لم يمرّرها التطبيق
+ * فـ`ar-EG` (الأغلب) لا `ar` (الخاطئة).
+ */
+declare function useMoneyLocale(): string;
+/** `true` لما صفحة إنجليزية */
+declare function useMoneyLang(): boolean;
+
+declare const TEXT: {
+    readonly close: readonly ["إغلاق", "Close"];
+    readonly select: readonly ["اختر…", "Select…"];
+    readonly search: readonly ["ابحث…", "Search…"];
+    readonly searchEverything: readonly ["ابحث في كل حاجة…", "Search everything…"];
+    readonly noResults: readonly ["مافيش نتايج", "No results"];
+    readonly searchOrAdd: readonly ["ابحث أو أضف…", "Search or add…"];
+    readonly now: readonly ["الآن", "Now"];
+    readonly videoPlayer: readonly ["مشغّل الفيديو", "Video player"];
+    readonly rating: readonly ["التقييم", "Rating"];
+    readonly activeFilters: readonly ["الفلاتر المطبّقة:", "Active filters:"];
+    readonly clearAll: readonly ["مسح الكل", "Clear all"];
+    readonly row: readonly ["صفّ", "row"];
+    readonly dropImages: readonly ["اسحب الصور هنا", "Drop images here"];
+    readonly chooseFromDevice: readonly ["اختر من الجهاز", "Choose from device"];
+    readonly previousPeriod: readonly ["الفترة السابقة", "Previous period"];
+    readonly less: readonly ["أقل", "Less"];
+    readonly more: readonly ["أكثر", "More"];
+    readonly totalSales: readonly ["إجمالي المبيعات", "Total sales"];
+    readonly netToYou: readonly ["صافي لك", "Net to you"];
+    readonly verifiedAccount: readonly ["حساب موثّق", "Verified account"];
+    readonly grabHint: readonly ["عنصر قابل لإعادة الترتيب. اضغط مسافة لمسكه ثم الأسهم لتحريكه.", "Reorderable item. Press space to grab it, then the arrows to move it."];
+    readonly notifications: readonly ["الإشعارات", "Notifications"];
+    readonly dismiss: readonly ["إخفاء", "Dismiss"];
+    readonly unread: readonly ["غير مقروء", "Unread"];
+    readonly noNotifications: readonly ["مفيش إشعارات", "No notifications"];
+    readonly noNotificationsDesc: readonly ["أول ما يحصل حاجة تستاهل، هتلاقيها هنا.", "When something worth knowing happens, it lands here."];
+    readonly markAllRead: readonly ["تعليم الكل كمقروء", "Mark all as read"];
+    readonly viewAllNotifications: readonly ["عرض كل الإشعارات", "View all notifications"];
+    readonly newNotifications: readonly ["إشعارات جديدة", "New notifications"];
+    readonly reloadPreview: readonly ["إعادة تحميل المعاينة", "Reload preview"];
+    readonly previousMonth: readonly ["الشهر اللي قبله", "Previous month"];
+    readonly nextMonth: readonly ["الشهر اللي بعده", "Next month"];
+    readonly whatIsThisNumber: readonly ["ما معنى هذا الرقم؟", "What does this number mean?"];
+    readonly explainToMe: readonly ["اشرح لي", "Explain this"];
+    readonly clearSearch: readonly ["مسح البحث", "Clear search"];
+    readonly alerts: readonly ["التنبيهات", "Alerts"];
+    readonly whatIsThisOption: readonly ["ما هذا الخيار؟", "What is this option?"];
+    readonly shouldBeHere: readonly ["المفروض تكون هنا", "Should be here"];
+    readonly closeExplainer: readonly ["إغلاق الشرح", "Close explainer"];
+    readonly cancelRecording: readonly ["إلغاء التسجيل", "Cancel recording"];
+    readonly sendRecording: readonly ["إرسال التسجيل", "Send recording"];
+    readonly attachFile: readonly ["إرفاق ملف", "Attach file"];
+    readonly recordVoice: readonly ["تسجيل صوتي", "Record a voice note"];
+    readonly playbackPosition: readonly ["موضع التشغيل", "Playback position"];
+    readonly volume: readonly ["مستوى الصوت", "Volume"];
+    readonly hideSuggestions: readonly ["إخفاء الاقتراحات", "Hide suggestions"];
+    readonly askShehab: readonly ["اسأل شهاب…", "Ask Shehab…"];
+    readonly shehabThinking: readonly ["شهاب بيفكّر…", "Shehab is thinking…"];
+    readonly undo: readonly ["تراجع", "Undo"];
+    readonly from: readonly ["من", "from"];
+    readonly tryAnotherReply: readonly ["جرّب رد تاني", "Try another reply"];
+    readonly helpfulReply: readonly ["رد مفيد", "Helpful reply"];
+    readonly unhelpfulReply: readonly ["رد مش مفيد", "Unhelpful reply"];
+    readonly aiDisclaimer: readonly ["شهاب ممكن يغلط. راجع الأرقام قبل ما تتصرّف عليها.", "Shehab can get things wrong. Check the numbers before acting on them."];
+    readonly back10: readonly ["رجوع ١٠ ثواني", "Back 10 seconds"];
+    readonly forward10: readonly ["تقديم ١٠ ثواني", "Forward 10 seconds"];
+    readonly playbackSpeed: readonly ["سرعة التشغيل", "Playback speed"];
+    readonly arabic: readonly ["العربية", "Arabic"];
+    readonly seeMore: readonly ["شوف كمان", "See more"];
+    readonly pictureInPicture: readonly ["نافذة عائمة", "Picture in picture"];
+};
+type UITextKey = keyof typeof TEXT;
+/**
+ * نصوص المكتبة باللغة المعروضة.
+ *
+ * تُستدعى في جسم المكوّن لا في قيمة الخاصّية الافتراضية — الخطّاف
+ * مايتنادش في توقيع دالة. فالنمط:
+ *
+ *     export function Modal({ closeLabel, … }) {
+ *       const ui = useUIText()
+ *       …
+ *       aria-label={closeLabel ?? ui.close}
+ */
+declare function useUIText(): Record<"select" | "search" | "row" | "from" | "close" | "searchEverything" | "noResults" | "searchOrAdd" | "now" | "videoPlayer" | "rating" | "activeFilters" | "clearAll" | "dropImages" | "chooseFromDevice" | "previousPeriod" | "less" | "more" | "totalSales" | "netToYou" | "verifiedAccount" | "grabHint" | "notifications" | "dismiss" | "unread" | "noNotifications" | "noNotificationsDesc" | "markAllRead" | "viewAllNotifications" | "newNotifications" | "reloadPreview" | "previousMonth" | "nextMonth" | "whatIsThisNumber" | "explainToMe" | "clearSearch" | "alerts" | "whatIsThisOption" | "shouldBeHere" | "closeExplainer" | "cancelRecording" | "sendRecording" | "attachFile" | "recordVoice" | "playbackPosition" | "volume" | "hideSuggestions" | "askShehab" | "shehabThinking" | "undo" | "tryAnotherReply" | "helpfulReply" | "unhelpfulReply" | "aiDisclaimer" | "back10" | "forward10" | "playbackSpeed" | "arabic" | "seeMore" | "pictureInPicture", string>;
+
+type FieldSize = 'sm' | 'md' | 'lg';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: ReactNode;
+    /** فعل ثانوي جنب التسمية — «سجّل بالبريد بدل الهاتف» مثلاً */
+    labelAside?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    size?: FieldSize;
+    hideLabel?: boolean;
+    icon?: ReactNode;
+    /** نص في نهاية الحقل — وحدة عملة مثلاً */
+    suffix?: ReactNode;
+    /** عنصر في نهاية الحقل بيتضغط — زرار إظهار كلمة السر مثلاً */
+    action?: ReactNode;
+    /** للأرقام — بيثبّت الاتجاه LTR جوّه واجهة عربية */
+    numeric?: boolean;
+    wrapperClassName?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+/** حقل بحث — النمط المتكرر في كل شاشة قايمة */
+declare const SearchInput: react.ForwardRefExoticComponent<Omit<InputProps, "icon"> & react.RefAttributes<HTMLInputElement>>;
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    /** التسمية موجودة لقارئ الشاشة بس مخفية بصرياً */
+    hideLabel?: boolean;
+    wrapperClassName?: string;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    size?: FieldSize;
+    hideLabel?: boolean;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    wrapperClassName?: string;
+}
+/**
+ * `<select>` أصلي مقصود — الدروب داون المخصّص بيكسر التنقّل بالكيبورد
+ * وبيتعب على الموبايل.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+interface ChoiceProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    /** الحالة الوسيطة — بعض العناصر التابعة متحدّدة */
+    indeterminate?: boolean;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<ChoiceProps & react.RefAttributes<HTMLInputElement>>;
+declare const Radio: react.ForwardRefExoticComponent<Omit<ChoiceProps, "indeterminate"> & react.RefAttributes<HTMLInputElement>>;
+/**
+ * مجموعة الراديو لازم تتلفّ في fieldset/legend — من غير كده قارئ الشاشة
+ * بيقرا الخيارات من غير ما يعرف السؤال.
+ */
+declare function RadioGroup({ label, children, inline, }: {
+    label: ReactNode;
+    children: ReactNode;
+    inline?: boolean;
+}): react.JSX.Element;
+/**
+ * `role="switch"` مع `aria-checked`. الإبهام بيتحرّك بـinset-inline-start
+ * مش transform، فبيتقلب صح في العربي من غير أي كود إضافي.
+ */
+declare function Switch({ checked, onCheckedChange, label, description, disabled, id: idProp, }: {
+    checked: boolean;
+    onCheckedChange: (v: boolean) => void;
+    label?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    id?: string;
+}): react.JSX.Element;
+
+declare const CURRENCY: {
+    SAR: {
+        short: string;
+        word: string;
+        best: "sign";
+        code: string;
+        sign: react.JSX.Element;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    AED: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    QAR: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    KWD: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    BHD: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    OMR: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    EGP: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: react.JSX.Element;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    JOD: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    IQD: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    LBP: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    SYP: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    YER: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    SDG: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    MAD: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    DZD: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    TND: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    LYD: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    MRU: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    SOS: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    DJF: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    KMF: {
+        short: string;
+        word: string;
+        best: "word";
+        code: string;
+        sign: null;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    USD: {
+        short: string;
+        word: string;
+        best: "sign";
+        code: string;
+        sign: react.JSX.Element;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    EUR: {
+        short: string;
+        word: string;
+        best: "sign";
+        code: string;
+        sign: react.JSX.Element;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+    GBP: {
+        short: string;
+        word: string;
+        best: "sign";
+        code: string;
+        sign: react.JSX.Element;
+        name: string;
+        en: string;
+        decimals: number;
+    };
+};
+/** صيغة الوحدة المعروضة */
+/** الصيغ الصريحة — كلٌّ منها يقول شكلاً بعينه */
+type Base = 'short' | 'word' | 'code' | 'sign';
+/**
+ * صيغة الوحدة المعروضة.
+ *
+ * `short` اختصار عربيّ · `word` الكلمة · `code` رمز ISO · `sign` الرمز
+ * الرسوميّ · `best` ما تختاره المكتبة.
+ *
+ * ── و`best` ليس خوارزميّة بل رأي ────────────────────────────────────────
+ * لكل عملة سطر في الجدول يقول أيّ صيغة تُقرأ أسرع **لها هي**، لأن
+ * الإجابة تختلف بينها:
+ *
+ *   · الريال السعوديّ → رمزه، لأن له رمزاً رسميّاً يعرفه أهله
+ *   · الجنيه والدينار والدرهم → كلمتها، فلا رمز رسميّ لها والاختصار
+ *     يُقرأ حرفين قبل أن يُفهم
+ *   · الدولار واليورو والإسترلينيّ → رموزها، فهي مقروءة عالميّاً
+ *     وأقصر من «دولار»
+ *
+ * ولو حُسبت هذه بقاعدة واحدة («رمز إن وُجد») لخرج الجنيه `£` — وهو
+ * صحيح تقنيّاً ويُقرأ «إسترلينيّاً» في مصر. الرأي المكتوب لكل عملة
+ * أصدق من قاعدة تبدو أنظف.
+ *
+ * ── وفي الإنجليزيّة ────────────────────────────────────────────────────
+ * `best` يصير الرمز إن وُجد وإلّا رمز ISO — الكلمة العربية لا معنى لها
+ * في صفحة إنجليزيّة، و«جنيه» لا تُكتب `pound` لأن ذلك يخلطه بالإسترلينيّ.
+ */
+type SymbolStyle = Base | 'best';
+type Currency = keyof typeof CURRENCY;
+/**
+ * يفحص كود عملة جاءَ من الخادم قبل تمريره إلى `Money`.
+ *
+ * ── لماذا حارس لا `as` ──────────────────────────────────────────────────
+ * `Money.currency` اتّحاد مغلق، والخوادم تُرجع `string`. فكل مستهلك كان
+ * يكتب `code as Currency` — وهذا **إسكات لا فحص**: كود غير معروف
+ * (`XYZ`، أو حقل فارغ) يمرّ ثم يفشل عند القراءة من الجدول.
+ *
+ * والحارس يجعل المجهول `undefined`، و`Money` عندها ترجع إلى عملة المتجر
+ * من `MoneyProvider` — وهو **السلوك الصحيح**: عرض المبلغ بعملة اللوحة
+ * أقلّ ضرراً من عرضه برمز خاطئ أو بلا رمز.
+ *
+ * ```tsx
+ * <Money value={total} currency={isCurrency(code) ? code : undefined} />
+ * ```
+ */
+declare function isCurrency(c?: string | null): c is Currency;
+declare function MoneyProvider({ currency, locale, children, }: {
+    currency: Currency;
+    /**
+     * لغة العرض على الخادم — وسم BCP-47 كامل (`ar-EG` · `ar-MA` · `en`).
+     *
+     * المتصفّح يقرأها من `<html lang>` وحده، فهذه للتصيير من الخادم فقط.
+     * أهملها ولن يُكسر شيء — لكن أوّل رسم سيخرج بأرقام `ar-EG` مهما كانت
+     * لغة الصفحة. الشرح عند `useMoneyLocale`.
+     */
+    locale?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * عملة المتجر الحاليّة.
+ *
+ * لغير `Money`: لاحقة حقل سعر، وعنوان عمود، ونصّ «السعر بالـ…».
+ */
+declare function useCurrency(): Currency;
+declare const SIZE: {
+    readonly inherit: "";
+    readonly sm: "text-caption";
+    readonly md: "text-ui";
+    readonly lg: "text-body font-extrabold";
+    readonly xl: "text-h2 font-black";
+};
+declare const TONE: {
+    readonly inherit: "";
+    readonly muted: "text-muted";
+    readonly ink: "text-ink";
+    readonly green: "text-green";
+    readonly red: "text-red";
+};
+interface MoneyProps {
+    /** المبلغ بالوحدة الكبرى — جنيهات لا قروش */
+    value: number;
+    /** استثناء محلّي يغلب عملة المتجر — سعر بالدولار في متجر مصريّ */
+    currency?: Currency;
+    size?: keyof typeof SIZE;
+    /**
+     * اللون.
+     *
+     * الافتراضيّ يرث لون ما حوله — والسالب **لا يُلوَّن تلقائياً**.
+     * خصم في شلّال ومرتجَع في قائمة كلاهما سالب، والأول محايد والثاني
+     * يستحقّ الأحمر. الفرق يعرفه السياق لا المكوّن.
+     */
+    tone?: keyof typeof TONE;
+    /** يُظهر `+` على الموجب — للفروق لا للأرصدة */
+    signed?: boolean;
+    /** «٧١٫٤ ألف» بدل «٧١٬٤٠٠» — للكروت والرسوم */
+    compact?: boolean;
+    /**
+     * يُخفي الكسور حين تكون أصفاراً.
+     *
+     * قائمة أسعار كلّها `٫٠٠` تضيف ضجيجاً بلا معلومة. لكن **الفاتورة
+     * لا تُخفيه**: المبلغ الرسميّ يُكتب كاملاً.
+     */
+    trimZeros?: boolean;
+    /** السعر قبل الخصم — يُشطب ويوضع بعد الحالي */
+    was?: number;
+    /**
+     * صيغة الوحدة.
+     *
+     * `short` الاختصار العربيّ (افتراضيّ) · `code` رمز ISO للفاتورة
+     * والتصدير · `sign` الرمز الرسوميّ حيث يوجد ويحمله الخطّ.
+     *
+     * و`sign` يرجع إلى `short` تلقائياً للعملة التي لا رمز لها في الخطّ
+     * — والقائمة في أعلى الملفّ تقول أيّها.
+     *
+     * والافتراضيّ يتبع لغة الصفحة: `short` في العربية و`code` في
+     * الإنجليزية — «ج.م» لا تُقرأ لمن لا يقرأ العربية.
+     */
+    symbol?: SymbolStyle;
+    /** يُخفي الوحدة — لعمود جدول عنوانه يحملها */
+    hideSymbol?: boolean;
+    className?: string;
+}
+/**
+ * مبلغ.
+ *
+ * ── لماذا مكوّن لا دالة تنسيق ──────────────────────────────────────────
+ * الدالة تُرجع نصّاً، والنصّ يفقد ثلاثة أشياء يحتاجها المبلغ: العزل
+ * الاتجاهيّ حول الرقم، ومنع القطع بين الرقم وعملته، وأرقام بعرض ثابت
+ * تصطفّ في العمود. كلّها خصائص عرض لا صياغة — فمكانها عنصر.
+ */
+declare function Money({ value, currency, size, tone, signed, compact, trimZeros, was, symbol, hideSymbol, className, }: MoneyProps): react.JSX.Element;
+/**
+ * وحدة العملة وحدها — لعنوان عمود أو لاحقة حقل.
+ *
+ * نفس الرجوع: `sign` غير الموجود في الخطّ يعود إلى `short`، فما يظهر
+ * في عنوان العمود يطابق ما يظهر في صفوفه دائماً.
+ */
+/**
+ * وحدة العملة وحدها — لعنوان عمود أو لاحقة حقل.
+ *
+ * ترجع `ReactNode` لا نصّاً: وحدة الريال في صيغة `word` **رسم** لأن
+ * رمزه الرسميّ هو كلمة «ريال» نفسها. من يحتاج نصّاً خالصاً — عنوان
+ * ملفّ مُصدَّر مثلاً — يطلب `code`.
+ */
+declare function currencySymbol(c?: Currency, style?: SymbolStyle, locale?: string): ReactNode;
+/** الاسم المنطوق — لقارئ الشاشة وللقوائم المنسدلة */
+declare const currencyName: (c?: Currency) => string;
+/**
+ * وحدة العملة تابعةً للغة الصفحة — لعنوان عمود يحمل عملة صفوفه.
+ *
+ * `currencySymbol` الساكنة لا تعرف اللغة، فعنوان العمود كان يظلّ «ج.م»
+ * فوق صفوف مكتوبة `EGP`.
+ */
+declare function useCurrencySymbol(c?: Currency, style?: SymbolStyle): ReactNode;
+
+type Size = 'sm' | 'md' | 'lg';
+interface NumberStepperProps {
+    value: number;
+    onChange: (v: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: Size;
+    /** وحدة صغيرة بجانب الرقم — «قطعة»، «كجم» */
+    unit?: ReactNode;
+    /**
+     * يحلّ محلّ زرّ الناقص عند الحدّ الأدنى.
+     *
+     * زرّ ناقص معطَّل عند القطعة الواحدة يجعل المستخدم يبحث عن «كيف
+     * أزيله». الحدّ الأدنى الحقيقيّ في السلّة صفر ومعناه حذف — فيقولها
+     * الزرّ بدل أن يقف صامتاً.
+     */
+    onRemove?: () => void;
+    disabled?: boolean;
+    /** وصف الحقل لقارئ الشاشة — «كمية بوكيه ورد أبيض» */
+    label?: string;
+    className?: string;
+}
+declare function NumberStepper({ value, onChange, min, max, step, size, unit, onRemove, disabled, label, className, }: NumberStepperProps): react.JSX.Element;
+
+/**
+ * علامة واتساب.
+ *
+ * ── لماذا مرسومة ولماذا مصمتة ───────────────────────────────────────────
+ * كانت `MessageCircle` من lucide، وهي فقاعة كلام عامّة. وفقاعة عامّة
+ * بجانب فقاعة الرسائل النصّيّة تجعل الزرّين متشابهين، والمستخدم يقرأ
+ * «رسالة» و«رسالة» فيتردّد قبل كلّ ضغطة.
+ *
+ * والعلامة مصمتة بين أيقونات محدّدة الخطوط عن قصد: علامة الخدمة تُعرف
+ * بشكلها لا بأسلوب المجموعة، وتحويلها إلى خطوط لتناسب البقيّة يفقدها
+ * الشيء الوحيد الذي تؤدّيه. والمسار من `simple-icons` — لا مرسوم
+ * بالتقدير، لأن علامة خدمة تُخمَّن تخرج علامةً أخرى.
+ */
+declare function WhatsAppIcon({ size, ...rest }: React.SVGProps<SVGSVGElement> & {
+    size?: number;
+}): react.JSX.Element;
+interface PhoneParts {
+    /** المفتاح الدوليّ بلا `+` — فارغ إن لم يُعرف */
+    dial: string;
+    /** الرقم المحلّيّ بلا فواصل */
+    local: string;
+    /** اسم البلد إن عُرف مفتاحه */
+    country?: string;
+}
+/**
+ * يفصل المفتاح عن الرقم المحلّيّ.
+ *
+ * يقبل ما يكتبه الناس فعلاً: `+20 112 505 2692` و`0020112...` و
+ * `01125052692` و`(010) 1234-5678`. ويُصدَّر لأن التحقّق والحفظ
+ * يحتاجانه خارج العرض.
+ */
+declare function parsePhone(raw: string, defaultDial?: string): PhoneParts;
+/**
+ * صيغة الفواصل بين المجموعات.
+ *
+ * `parens` الافتراضيّة: `(101) 234-5678`. القوس يفصل مقدّمة المشغّل
+ * عمّا بعدها، والشرطة تربط ما بقي. والفرق عن المسافات وحدها أن
+ * المسافة فاصل محايد لا يقول أيّ جزء هو أيّ شيء، بينما القوس يقول
+ * «هذا ليس من الرقم بل من المشغّل» — وهو ما يبحث عنه من يقارن رقمين.
+ *
+ * و`spaces` لمن يريد الصورة الدوليّة الخام: `101 234 5678`.
+ */
+type PhoneFormat = 'parens' | 'spaces';
+interface PhoneProps {
+    /** الرقم كما هو في البيانات — منسَّقاً أو خاماً */
+    value: string;
+    /** مفتاح يُفترض للأرقام المحلّيّة */
+    defaultDial?: string;
+    /** يُظهر آخر أربعة فقط */
+    mask?: boolean;
+    /** صيغة الفواصل — `parens` افتراضاً */
+    format?: PhoneFormat;
+    /** زرّ اتصال */
+    call?: boolean;
+    /** زرّ رسالة نصّيّة */
+    sms?: boolean;
+    /** زرّ واتساب */
+    whatsapp?: boolean;
+    /**
+     * `inherit` لا مقاس ولا وزن ولا لون — للرقم داخل صفّ يحدّد
+     * تنسيقه أصلاً: سطر ثانٍ تحت اسم عميل، أو سطر عنوان فرع.
+     * والمكوّن هناك للاتّجاه والتقطيع لا للحجم.
+     */
+    size?: 'inherit' | 'sm' | 'md';
+    className?: string;
+}
+/**
+ * رقم هاتف.
+ *
+ * ── الأرقام لاتينيّة دائماً ─────────────────────────────────────────────
+ * على عكس المبالغ. الهاتف **يُنسخ ويُطلَب**: يُلصق في تطبيق اتصال، ويُملى
+ * في مكالمة، ويُقارن بما على شاشة الجوّال. والأرقام العربيّة الهنديّة
+ * تكسر النسخ في تطبيقات لا تقبلها، وتجعل المقارنة بالشاشة الأخرى عملاً
+ * ذهنيّاً بلا مقابل.
+ *
+ * وهذا استثناء مقصود من قاعدة `[data-num]` — والفرق أن المبلغ يُقرأ
+ * والهاتف يُستعمل.
+ */
+declare function Phone({ value, defaultDial, format, mask, call, sms, whatsapp, size, className, }: PhoneProps): react.JSX.Element;
+
+/**
+ * القيم التقنية داخل واجهة عربية.
+ *
+ * `#C97B8E` في حقل عربي يُعرض `C97B8E#` — علامة الشباك تقفز للطرف
+ * الآخر، و`/shop` يصير `shop/`. السبب خوارزمية الاتجاه الثنائي (bidi):
+ * الرمز محايد الاتجاه، فيرث اتجاه الفقرة المحيطة به لا اتجاه قيمته.
+ *
+ * وهذا ليس تجميلاً: التاجر ينسخ القيمة فتُلصق مقلوبة، أو يحاول كتابتها
+ * فلا يعرف شكلها الصحيح. والألوان أوّل ما يُعدَّل في أيّ ثيم.
+ *
+ * العلاج ثلاث خصائص معاً — ولذلك مكوّن واحد لا ثلاثة أسطر تتكرّر:
+ *  1. `dir="ltr"` على الحقل نفسه — القيمة تُقرأ من اليسار.
+ *  2. `unicode-bidi: isolate` على الحاوية — الحقل لا يزحزح ترتيب ما
+ *     حوله من نصّ عربي، ولا يتأثّر به.
+ *  3. المحاذاة إلى **يمين** الحقل في الصفحة العربية — لأن الحقل جزء من
+ *     نموذج عربي، فحافّته المرئية تتبع الصفحة لا القيمة. وفي الصفحة
+ *     الإنجليزية تعود يساراً وحدها.
+ *
+ * `[dir=rtl]_&` لا `rtl:` — لأن `dir="ltr"` موضوع على العنصر نفسه،
+ * فسمة `rtl:` لن تنطبق عليه أبداً؛ والاستعلام لا بدّ أن يسأل عن **جدّه**.
+ */
+type TechnicalKind = 'hex' | 'url' | 'slug' | 'code' | 'id';
+interface TechnicalInputProps extends Omit<InputProps, 'numeric' | 'type' | 'dir'> {
+    /** نوع القيمة — يضبط لوحة المفاتيح والتلميح فقط، لا يفرض تحقّقاً */
+    kind?: TechnicalKind;
+}
+declare const TechnicalInput: react.ForwardRefExoticComponent<TechnicalInputProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * قيمة تقنية تُقرأ ولا تُحرَّر — رقم إصدار، اختصار لوحة مفاتيح، معرّف.
+ *
+ * نفس علّة الحقل: `⌘K` كان يُعرض `K ⌘`، ورقم الإصدار يتفكّك عند نقطته.
+ */
+declare function TechnicalText({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+/**
+ * مربّع لون + كود hex قابل للتحرير.
+ *
+ * المربّع هو `<input type="color">` الأصلي مخفيّاً خلفه — منتقي النظام
+ * أدقّ من أيّ عجلة مرسومة، ويعمل بلوحة المفاتيح دون كود.
+ *
+ * والوصف تحت التسمية مقصود: التوكن اسمه دوره لا رقمه. «الرئيسي المتوسط
+ * (حلقات وفواصل)» يقول للتاجر أين سيظهر اللون قبل أن يغيّره — وهذا ما
+ * يفرّق نظام ألوان يُفهَم عن أربعة وعشرين مربّعاً مرعبة.
+ */
+declare function ColorField({ label, note, value, onChange, disabled, id: idProp, }: {
+    label: ReactNode;
+    /** دور اللون في الواجهة — لا اسمه التقني */
+    note?: ReactNode;
+    value: string;
+    onChange: (hex: string) => void;
+    disabled?: boolean;
+    id?: string;
+}): react.JSX.Element;
+/** يرجّع `#RRGGBB` بحروف كبيرة، أو `null` لو القيمة ليست لوناً بعد */
+declare function normalizeHex(input: string): string | null;
+
+interface Product3DViewerProps {
+    /** رابط الموديل — GLB أو GLTF */
+    src: string;
+    /**
+     * رابط USDZ — لـQuick Look في iOS.
+     *
+     * غيابه لا يُعطّل العارض، يُعطّل زرّ «شوفه في مكانك» على iPhone وحده:
+     * النظام هناك لا يقرأ GLB. وأندرويد يقرأ `src` نفسه.
+     */
+    iosSrc?: string;
+    /** صورة المنتج — تُرى قبل الموديل، وتبقى مكانه إن سقط */
+    poster: string;
+    /** وصف المنتج — يقرؤه قارئ الشاشة بدل المشهد */
+    alt: string;
+    /** دوران بطيء تلقائيّ. يتوقّف عند `prefers-reduced-motion` */
+    autoRotate?: boolean;
+    onLoad?: () => void;
+    onError?: (reason: string) => void;
+    /** لحظة الضغط على زرّ الواقع المعزّز — رأس القمع لا نهايته */
+    onARLaunch?: () => void;
+    className?: string;
+}
+/**
+ * عارض منتج مجسّم.
+ *
+ * ── والعنصر يُصنع بالـDOM لا بالـJSX ────────────────────────────────────
+ * `<model-viewer>` عنصر مخصّص، ولا يُعرَّف إلّا بعد أن تصل الحزمة. فكتابته
+ * في JSX تعني رسم وسمٍ مجهول ثمّ انتظار ترقيته — وبينهما إطارٌ يظهر فيه
+ * صندوق بلا مقاس. وصنعه بعد `whenDefined` يجعله كامل السلوك من أوّل
+ * لحظة يدخل فيها الصفحة.
+ *
+ * وفيه ربحٌ ثانٍ: أحداثه أحداث DOM مخصّصة (`progress` · `ar-status`)،
+ * ولا يصلها JSX إلّا بجسر. هنا تُسمع كما هي.
+ */
+declare function Product3DViewer({ src, iosSrc, poster, alt, autoRotate, onLoad, onError, onARLaunch, className, }: Product3DViewerProps): react.JSX.Element;
+
+interface TabItem {
+    key: string;
+    label: ReactNode;
+    count?: number;
+    icon?: ComponentType<{
+        size?: number;
+    }>;
+}
+/**
+ * `segmented` = مبدّل داخل حبّة رمادية (قناة البيع، شبكة/قايمة).
+ * `pill` = فلاتر مستقلة بحدود (حالة الطلب، تصنيف المنتج).
+ *
+ * الفرق مقصود: الـsegmented بيقول «اختار واحد من دول»، والـpill بيقول
+ * «فلتر شغّال». خلطهم بيخلّي التاجر مش عارف إيه اللي بيبدّل السياق
+ * وإيه اللي بيفلتر.
+ */
+declare function Tabs({ items, value, onChange, variant, label, className, }: {
+    items: TabItem[];
+    value: string;
+    onChange: (key: string) => void;
+    variant?: 'pill' | 'segmented';
+    /** وصف المجموعة لقارئ الشاشة — «تصنيف السلات»، «حالة الطلب» */
+    label?: string;
+    className?: string;
+}): react.JSX.Element;
+interface FilterChip {
+    label: string;
+    onClear: () => void;
+}
+/**
+ * الفلاتر المطبّقة كشرايح قابلة للإزالة.
+ *
+ * المنتج الحقيقي بيخبّي المطبّق جوّه القوايم المنسدلة، فالتاجر بيفتكر
+ * الجدول فاضي وهو فلتره شغّال على حاجة. الشريحة بتخلّي الفلتر مرئي
+ * وقابل للإلغاء بضغطة.
+ */
+declare function FilterChips({ chips, onClearAll, label, clearAllLabel, }: {
+    chips: FilterChip[];
+    onClearAll?: () => void;
+    label?: string;
+    clearAllLabel?: string;
+}): react.JSX.Element | null;
+
+/**
+ * الـaction sheet — كل حاجة بتطلع من تحت على الموبايل.
+ *
+ * تفاصيل الشكل مقصودة: الخلفية بتغمق **وتتبلّر** فالمحتوى ورا بيرجع
+ * بصرياً؛ راديوس ٢٤px فوق بس لأن الشيت طالع من حافة الشاشة؛ مقبض سحب
+ * كإشارة متعارف عليها؛ و`env(safe-area-inset-bottom)` عشان آخر بند
+ * ما يقعش تحت شريط الإيماءات في الأيفون.
+ */
+declare function Sheet({ open, title, onClose, action, children, closeLabel, }: {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    action?: ReactNode;
+    children: ReactNode;
+    closeLabel?: string;
+}): react.JSX.Element | null;
+declare function Modal({ open, title, description, onClose, footer, children, size, closeLabel, }: {
+    open: boolean;
+    title: ReactNode;
+    description?: ReactNode;
+    onClose: () => void;
+    footer?: ReactNode;
+    children?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    closeLabel?: string;
+}): react.JSX.Element | null;
+/** بيفتح من inline-end — الشمال في العربي واليمين في الإنجليزي، لوحده */
+declare function Drawer({ open, title, description, onClose, footer, children, bodyClassName, closeLabel, }: {
+    open: boolean;
+    title: ReactNode;
+    description?: ReactNode;
+    onClose: () => void;
+    footer?: ReactNode;
+    children?: ReactNode;
+    /** بديل حشوة الجسم — لقايمة بتمشي من حافة لحافة زي الإشعارات */
+    bodyClassName?: string;
+    closeLabel?: string;
+}): react.JSX.Element | null;
+declare function Alert({ tone, title, children, actions, }: {
+    tone?: Tone;
+    title?: ReactNode;
+    children?: ReactNode;
+    actions?: ReactNode;
+}): react.JSX.Element;
+declare function Toast({ children, action, icon, }: {
+    children: ReactNode;
+    action?: ReactNode;
+    icon?: ReactNode;
+}): react.JSX.Element;
+/**
+ * الحالة الفاضية مش زخرفة — هي أول شاشة التاجر الجديد بيشوفها، ولازم
+ * يكون فيها إجراء واضح يطلّعه منها.
+ */
+declare function EmptyState({ icon: Icon, title, description, action, }: {
+    icon?: ComponentType<{
+        size?: number;
+    }>;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+}): react.JSX.Element;
+
+type ToastTone = Extract<Tone, 'brand' | 'green' | 'amber' | 'red'> | 'neutral';
+interface ToastItem {
+    id: number;
+    tone: ToastTone;
+    title: ReactNode;
+    description?: ReactNode;
+    /** نص زرار التراجع — لو موجود التوست بيستنى أطول */
+    actionLabel?: string;
+    onAction?: () => void;
+    /** بالملي ثانية — `0` يعني ميختفيش لوحده */
+    duration?: number;
+    /** لودر بدل الأيقونة — لأفعال بتاخد وقت */
+    pending?: boolean;
+}
+type ToastInput = Omit<ToastItem, 'id'>;
+declare function useToasts(): {
+    toasts: ToastItem[];
+    push: (input: ToastInput) => number;
+    dismiss: (id: number) => void;
+    update: (id: number, patch: Partial<ToastInput>) => void;
+    clear: () => void;
+};
+/**
+ * حاوية التوستات.
+ *
+ * ثابتة تحت في النص على الموبايل وتحت في الجنب على سطح المكتب —
+ * بعيد عن الإبهام وبعيد عن الإجراء الأساسي في الشاشة.
+ */
+declare function ToastHost({ toasts, onDismiss, closeLabel, }: {
+    toasts: ToastItem[];
+    onDismiss: (id: number) => void;
+    closeLabel?: string;
+}): react.JSX.Element | null;
+/**
+ * التولتيب.
+ *
+ * بيظهر على المرور **وعلى التركيز** — لو ظهر على المرور بس بيبقى مخفي
+ * تماماً عن اللي بيتنقّل بالكيبورد. والمحتوى شرح إضافي مش معلومة
+ * أساسية، لأن اللمس مالوش «مرور».
+ */
+declare function Tooltip({ content, children, side, }: {
+    content: ReactNode;
+    children: ReactNode;
+    side?: 'top' | 'bottom';
+}): react.JSX.Element;
+
+interface Option {
+    value: string;
+    label: string;
+    /** سطر تحت الاسم — سعر الشحن، عدد المنتجات… */
+    meta?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+declare function Dropdown({ label, value, onChange, options, placeholder, className, }: {
+    label?: ReactNode;
+    value: string | null;
+    onChange: (value: string) => void;
+    options: Option[];
+    placeholder?: string;
+    className?: string;
+}): react.JSX.Element;
+/**
+ * فوق ١٥ خيار البحث بيبقى ضرورة مش رفاهية — التمرير في ٢٧ محافظة
+ * أبطأ من كتابة حرفين.
+ */
+declare function Combobox({ label, value, onChange, options, placeholder, searchPlaceholder, emptyText, className, }: {
+    label?: ReactNode;
+    value: string | null;
+    onChange: (value: string) => void;
+    options: Option[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    className?: string;
+}): react.JSX.Element;
+declare function MultiSelect({ label, values, onChange, options, placeholder, createLabel, onCreate, className, }: {
+    label?: ReactNode;
+    values: string[];
+    onChange: (values: string[]) => void;
+    options: Option[];
+    placeholder?: string;
+    /** نص زرار «أضف …» لما البحث مالوش نتيجة */
+    createLabel?: (query: string) => string;
+    onCreate?: (query: string) => void;
+    className?: string;
+}): react.JSX.Element;
+interface CommandItem {
+    id: string;
+    title: string;
+    meta?: string;
+    icon?: ReactNode;
+    group: string;
+    onRun?: () => void;
+}
+/**
+ * لوحة الأوامر — ⌘K.
+ *
+ * الفرق عن Combobox إنها **مش حقل اختيار**: بتلاقي وتنفّذ عبر كل المنتج،
+ * فالنتايج متجمّعة بمصدرها (منتجات، طلبات، إعدادات) مش قايمة مسطّحة.
+ */
+declare function CommandPalette({ open, onClose, items, placeholder, emptyText, }: {
+    open: boolean;
+    onClose: () => void;
+    items: CommandItem[];
+    placeholder?: string;
+    emptyText?: string;
+}): react.JSX.Element | null;
+
+interface AccordionItem {
+    key: string;
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ComponentType<{
+        size?: number;
+    }>;
+    children: ReactNode;
+}
+/**
+ * الأكورديون.
+ *
+ * الافتراضي `single` — واحد مفتوح في المرة. ده مقصود في الإعدادات: لما
+ * كل الأقسام تفتح مع بعض الصفحة بترجع تبقى قايمة طويلة والأكورديون
+ * بيفقد فايدته. `multiple` للأسئلة الشائعة اللي القارئ بيقارن فيها.
+ */
+declare function Accordion({ items, mode, defaultOpen, className, }: {
+    items: AccordionItem[];
+    mode?: 'single' | 'multiple';
+    defaultOpen?: string[];
+    className?: string;
+}): react.JSX.Element;
+interface TimelineStep {
+    key: string;
+    title: ReactNode;
+    time?: ReactNode;
+    note?: ReactNode;
+    tone?: Tone;
+}
+/**
+ * الخط الزمني — تتبّع الطلب.
+ *
+ * الخطوات قبل `current` مكتملة، و`current` هي الشغّالة، واللي بعدها
+ * لسه. الخط الواصل بيتلوّن للمكتمل بس — ده اللي بيخلّي التاجر يقرا
+ * «فين وصلنا» من غير ما يقرا كلمة.
+ */
+declare function Timeline({ steps, current, nowLabel, className, }: {
+    steps: TimelineStep[];
+    /** فهرس الخطوة الشغّالة */
+    current: number;
+    /** تسمية الخطوة الحالية — تُترجم من التطبيق */
+    nowLabel?: string;
+    className?: string;
+}): react.JSX.Element;
+interface StepperStep {
+    key: string;
+    title: ReactNode;
+}
+/**
+ * الستيبر — خطوات الإنشاء.
+ *
+ * الفرق عن `Timeline`: ده **أفقي وقابل للنقر** لأنه بيمثّل مهمة التاجر
+ * نفسه (كمّل إعداد متجرك)، مش حدث حصل بره سيطرته (وصل الشحن فين).
+ */
+declare function Stepper({ steps, done, onPick, className, }: {
+    steps: StepperStep[];
+    /** مفاتيح الخطوات المكتملة */
+    done: string[];
+    onPick?: (key: string) => void;
+    className?: string;
+}): react.JSX.Element;
+
+interface Column<T> {
+    key: string;
+    header: ReactNode;
+    cell: (row: T) => ReactNode;
+    /** يحاذي لنهاية العمود — للأرقام والإجراءات */
+    end?: boolean;
+}
+interface DataTableProps<T> {
+    columns: Column<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    /** شبكة CSS للأعمدة، مثال: `34px_2.4fr_1fr_minmax(150px,168px)` */
+    grid: string;
+    /** أقل عرض قبل ما يبدأ التمرير الأفقي جوّه الكرت */
+    minWidth: number;
+    onRowClick?: (row: T) => void;
+    /** بديل الجدول تحت md — الجدول العريض مش مقروء على ٣٩٠px */
+    mobileCard?: (row: T) => ReactNode;
+    empty?: ReactNode;
+    footer?: ReactNode;
+    /**
+     * عدد الصفوف في الصفحة — بيشغّل الترقيم.
+     *
+     * أُغفل = كل الصفوف تُعرض، وهذا هو الافتراض: أغلب جداول اللوحة
+     * عشرة صفوف أو أقلّ، والترقيم عليها يضيف عنصر تحكّم بلا وظيفة.
+     */
+    pageSize?: number;
+    /** ما يُكتب حول أرقام الصفحة — «طلب»، «منتج» */
+    unit?: string;
+    className?: string;
+}
+/**
+ * جدول بيانات.
+ *
+ * التمرير الأفقي **جوّه الكرت** مش على الصفحة — الصفحة نفسها عمرها ما
+ * بتفيض. ولو اتحدّد `mobileCard` بيتحوّل لقايمة كروت تحت md، لأن جدول
+ * بـ٦ أعمدة على ٣٩٠px بيخبّي أهم عمود ورا التمرير.
+ */
+declare function DataTable<T>({ columns, rows, rowKey, grid, minWidth, onRowClick, mobileCard, empty, footer, pageSize, unit, className, }: DataTableProps<T>): react.JSX.Element;
+
+interface StarsProps {
+    /** عدد النجوم المضيئة — بيتقصّ بين ٠ و٥ */
+    value: number;
+    /** ضلع النجمة بالبكسل */
+    size?: number;
+    className?: string;
+}
+/**
+ * عرض التقييم.
+ *
+ * ── الرقم لقارئ الشاشة والنجوم للعين ────────────────────────────────────
+ * الشكل وحده ما يُنطق: خمس أيقونات متتالية بتتقري «صورة صورة صورة صورة
+ * صورة» أو ما تتقريش خالص. فالنجوم `aria-hidden` والرقم في `sr-only`.
+ *
+ * و`4 / 5` بأرقام لاتينية ومحارف لاتينية عن قصد — النسبة مش جملة تُترجم،
+ * وقارئ الشاشة العربي بينطقها صح.
+ */
+declare function Stars({ value, size, className }: StarsProps): react.JSX.Element;
+interface RatingInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    /** يُخفي «٤/٥» جنب النجوم */
+    hideValue?: boolean;
+    className?: string;
+}
+/**
+ * إدخال التقييم.
+ *
+ * ── خمسة أزرار لا قائمة منسدلة ──────────────────────────────────────────
+ * القائمة بتعرض «٣» وبتسيب النجوم في رأس القارئ. والأزرار بتعرض **اللي
+ * العميل هيشوفه** بالظبط.
+ *
+ * ── وهدف الضغط ٣٦ لا ١٣ ─────────────────────────────────────────────────
+ * النجمة المرسومة ٢٢ بكسل، والزرّ حواليها `size-9`. الرسم الصغير مايمنعش
+ * الهدف الكبير — والإبهام مابيصيبش ١٣ بكسل.
+ *
+ * ── ولا يُفرَّغ بإعادة الضغط ─────────────────────────────────────────────
+ * الضغط على النجمة المختارة بيأكّدها لا بيلغيها. «صفر نجوم» مش تقييم،
+ * ومن ضغط عليها تاني كان بيقصد يتأكّد.
+ */
+declare function RatingInput({ value, onChange, disabled, hideValue, className }: RatingInputProps): react.JSX.Element;
+
+interface Range {
+    from: Date | null;
+    to: Date | null;
+}
+declare function daysBetween(from: Date, to: Date): number;
+declare function formatDate(d: Date): string;
+declare function formatRange(r: Range): string;
+/** اختصارات جاهزة — دي اللي التاجر بيستخدمها ٩٠٪ من الوقت */
+declare function presets(today: Date): {
+    key: string;
+    label: string;
+    range: Range;
+}[];
+declare function DateRangePicker({ value, onChange, month, onMonthChange, today, className, }: {
+    value: Range;
+    onChange: (range: Range) => void;
+    /** الشهر المعروض — أول يوم فيه */
+    month: Date;
+    onMonthChange: (month: Date) => void;
+    /** «النهارده» بيتحدّد من برّه عشان الديمو يفضل ثابت */
+    today: Date;
+    className?: string;
+}): react.JSX.Element;
+
+type UploadState = 'uploading' | 'done' | 'rejected';
+interface UploadFile {
+    id: string;
+    name: string;
+    /** بالبايت */
+    size: number;
+    state: UploadState;
+    /** ٠ لـ١٠٠ — بيتعرض بس وقت الرفع */
+    progress?: number;
+    /** سبب الرفض — لازم يتكتب، «فشل» لوحدها مش معلومة */
+    error?: string;
+    /** رابط معاينة (object URL أو data URI) */
+    preview?: string;
+}
+declare function formatBytes(bytes: number): string;
+declare function Dropzone({ onFiles, accept, multiple, disabled, title, hint, buttonLabel, className, }: {
+    onFiles: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    title?: ReactNode;
+    hint?: ReactNode;
+    buttonLabel?: string;
+    className?: string;
+}): react.JSX.Element;
+declare function FileRow({ file, onRemove, coverLabel, isCover, }: {
+    file: UploadFile;
+    onRemove?: () => void;
+    /** شارة «الغلاف» على أول صورة */
+    coverLabel?: string;
+    isCover?: boolean;
+}): react.JSX.Element;
+
+interface UseSortableOptions {
+    /** عدد العناصر — لازم يطابق اللي بيتعرض */
+    count: number;
+    /** يتنادى مرّة واحدة عند الإفلات، وبالفهرسين النهائيين */
+    onMove: (from: number, to: number) => void;
+    disabled?: boolean;
+    /**
+     * مسافة التفعيل بالبكسل.
+     *
+     * تحتها الضغطة ضغطة لا سحب — بدونها كل نقرة على بند فيها اهتزاز
+     * إصبع بتبدأ سحبة، والبند اللي بيُنقر عليه بيتحرّك تحت المؤشّر.
+     */
+    threshold?: number;
+    /** اسم البند لقارئ الشاشة — «البانر الرئيسي» */
+    itemLabel?: (index: number) => string;
+}
+interface SortableItemProps {
+    ref: (el: HTMLElement | null) => void;
+    style: CSSProperties;
+    onPointerDown: (e: PointerEvent<HTMLElement>) => void;
+    onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
+    tabIndex: number;
+    'aria-roledescription': string;
+    'data-dragging'?: string;
+    'data-grabbed'?: string;
+}
+interface SortableApi {
+    /** خصائص البند رقم `index` */
+    item: (index: number) => SortableItemProps;
+    /** الفهرس المسحوب الآن — `null` لو مافيش سحب */
+    dragging: number | null;
+    /** الفهرس الممسوك بالكيبورد */
+    grabbed: number | null;
+    /** الفهرس اللي البند هيقع فيه */
+    over: number | null;
+    /** نص يُعرض في منطقة حيّة — الشرح عند `SortableStatus` */
+    message: string;
+}
+declare function useSortable({ count, onMove, disabled, threshold, itemLabel, }: UseSortableOptions): SortableApi;
+/**
+ * المنطقة الحيّة.
+ *
+ * قارئ الشاشة مابيشوفش البند وهو بيتحرّك، فلازم حد يقول له «انتقل
+ * للموضع الثالث من سبعة». ومكانها خارج القائمة عشان إعادة ترتيب
+ * القائمة ماتلغيش النطق في نصّه.
+ */
+declare function SortableStatus({ message }: {
+    message: string;
+}): react.JSX.Element;
+
+interface CarouselProps {
+    /** اسم العارض — يقوله قارئ الشاشة قبل الشرائح */
+    label: string;
+    children: ReactNode;
+    /**
+     * عدد الشرائح المرئيّة. الكسر مقصود ومفيد: `1.15` يُظهر طرف التالية
+     * فيُقرأ «هنا المزيد» بلا سهم ولا نقطة.
+     *
+     * ── والاستجابة للمقاس تُكتب بالأصناف لا بهذه ──────────────────────
+     * تمريرها يطبع `--per` في `style`، والسطريّ يغلب كل صنف — بما فيه
+     * `lg:[--per:3]`. فللعارض المتجاوب: اتركها، واكتب
+     * `className="sm:[--per:2] lg:[--per:3]"`.
+     */
+    perView?: number;
+    /** الفراغ بين الشرائح بالبكسل — من سلّم الأربعة */
+    gap?: number;
+    /** أسهم على حافّتَي المسار */
+    arrows?: boolean;
+    /** نقطة لكل شريحة */
+    dots?: boolean;
+    /** عدّاد «٣ / ١٢» */
+    counter?: boolean;
+    /**
+     * تشغيل تلقائيّ كل كذا مِلّي.
+     *
+     * يقف على المرور وعلى التركيز وعلى إخفاء التبويب، ولا يبدأ أصلاً عند
+     * `prefers-reduced-motion`. ووجوده يفرض زرّ إيقاف ظاهراً — المعيار
+     * 2.2.2 يشترط أن يملك المستخدم إيقاف ما يتحرّك وحده لأكثر من خمس
+     * ثوانٍ، لا أن يُلاحقه.
+     */
+    autoplay?: number;
+    /** الشريحة النشطة — للتحكّم من برّه (شريط المصغّرات مثلاً) */
+    index?: number;
+    onIndexChange?: (index: number) => void;
+    className?: string;
+    /** أصناف على المسار نفسه — للحشو الذي يجب أن يتمرّر مع الشرائح */
+    trackClassName?: string;
+}
+/**
+ * عارض شرائح أفقيّ.
+ *
+ * ── ولا سحب بالفأرة ─────────────────────────────────────────────────────
+ * محاكاة السحب تتطلّب ابتلاع `pointerdown` ثمّ تخمين: هل هذه سحبة أم
+ * ضغطة؟ والتخمين يخطئ في الاتجاهين — فيبتلع ضغطة على زرّ داخل الشريحة،
+ * أو يبدأ تحديد نصّ في منتصف السحب. ولوحة اللمس والشاشة اللامسة
+ * تمرّران أصلاً، ويبقى الفأر وحده — وله السهمان.
+ */
+declare function Carousel({ label, children, perView, gap, arrows, dots, counter, autoplay, index, onIndexChange, className, trackClassName, }: CarouselProps): react.JSX.Element;
+interface GalleryImage {
+    src: string;
+    /** وصف الصورة — فارغاً إن كانت زخرفةً بحتة */
+    alt: string;
+}
+interface GalleryProps {
+    label: string;
+    images: GalleryImage[];
+    /** نسبة العرض إلى الارتفاع — «4/3» · «1/1» · «16/9» */
+    ratio?: string;
+    /**
+     * `cover` يملأ الإطار ويقصّ، و`contain` يُظهر الصورة كاملةً ويترك فراغاً.
+     *
+     * الافتراضيّ `cover` لأن صور المنتج تُلتقط بنسب مختلفة، وشبكةٌ من
+     * إطارات متساوية تُقرأ كتالوجاً بينما الأخرى تُقرأ ملفّات مرفوعة.
+     */
+    fit?: 'cover' | 'contain';
+    /** شريط المصغّرات تحت الصورة */
+    thumbs?: boolean;
+    /** الضغط على الصورة يفتح العارض الكامل */
+    zoom?: boolean;
+    className?: string;
+}
+/**
+ * معرض صور — صورة كبيرة ومصغّرات تحتها.
+ *
+ * ── لماذا المصغّرات لا النقاط ───────────────────────────────────────────
+ * النقطة تقول «أنت في الثالثة من ثمانٍ» ولا تقول ما في الثالثة. والصور
+ * محتواها هو هويّتها — فالمصغّرة تُغني عن التنقّل بحثاً: من يريد اللون
+ * الأزرق يراه ويضغطه، لا يمرّ على الأحمر في طريقه إليه.
+ *
+ * وتبقى النقاط خياراً لمَن صوره متشابهة (لقطات شاشة لشيء واحد) —
+ * `thumbs={false}` يستبدل بها نقاطاً.
+ */
+declare function Gallery({ label, images, ratio, fit, thumbs, zoom, className, }: GalleryProps): react.JSX.Element | null;
+interface LightboxProps {
+    open: boolean;
+    images: GalleryImage[];
+    index: number;
+    onIndexChange: (index: number) => void;
+    onClose: () => void;
+    label?: string;
+    closeLabel?: string;
+}
+/**
+ * صورة على ملء الشاشة.
+ *
+ * ── و`contain` هنا دائماً ───────────────────────────────────────────────
+ * المعرض يقصّ ليصطفّ، وهذا يُفتح ليُرى — والقصّ في الموضع الذي فُتح
+ * لأجله يُلغي سبب فتحه.
+ *
+ * ── ولا قفل للتمرير ─────────────────────────────────────────────────────
+ * `tokens.css` يضع `overflow: hidden` على `body` أصلاً، فصفحة قمرة لا
+ * تتمرّر خلف الطبقة. القفل هنا كان سيكون احتياطاً من شيء غير قائم.
+ */
+declare function Lightbox({ open, images, index, onIndexChange, onClose, label, closeLabel }: LightboxProps): react.JSX.Element | null;
+
+/**
+ * إطار المتصفّح.
+ *
+ * المعاينة بلا إطار بتتقري **جزءاً من اللوحة**: التاجر بيشوف بانراً
+ * وشبكة منتجات جوّه صندوق أبيض، فبيحكم عليها كأنها عنصر في شاشة
+ * الإعدادات. والإطار بيقول جملة واحدة قبل أي شيء: «ده متجرك كما يراه
+ * الزائر» — فيتبدّل الحكم من «شكل الصندوق ده حلو؟» إلى «متجري كده
+ * كويس؟».
+ *
+ * ── والنقط الثلاث رمادية لا ملوّنة ──────────────────────────────────────
+ * أحمر وأصفر وأخضر تقليد شكليّ لنافذة ماك، وفي نظام اللون فيه **للحالة**
+ * بس: الأخضر «تمّ» والأصفر «انتبه» والأحمر «خطر». تلات نقط بالألوان دي
+ * فوق معاينة متجر بتقول تلات حالات مالهاش أي معنى هنا، والعين بتفحصها
+ * قبل ما تكتشف إنها زخرفة. فالنقط بلون الحدّ: بتقول «نافذة» وبتسكت.
+ *
+ * ── والقياس الحقيقي مصغَّراً ─────────────────────────────────────────────
+ * `contentWidth` بيخلّي الصفحة **تتبني** على عرضها الحقيقي (١٤٤٠ مثلاً)
+ * وتتعرض مصغّرة عشان تدخل في المساحة المتاحة. ده مش تفصيلة تجميل: من
+ * غيره الصفحة بتتبني على عرض اللوحة — ٩٠٠ بكسل — فبتتكسّر نقاط التوقّف
+ * ويشوف التاجر تخطيط تابلت وهو فاكر إنه بيراجع الديسكتوب.
+ */
+interface BrowserFrameProps {
+    /** الرابط في شريط العنوان — بلا بروتوكول، الشكل بيقوله */
+    url: string;
+    /** `mobile` بيرسم إطار جهاز بدل نافذة */
+    device?: 'desktop' | 'mobile';
+    /** اسم التبويب — بيرسم شريط تبويبات فوق شريط العنوان */
+    tab?: string;
+    /** أزرار الرجوع والتقدّم — معطّلة، لأنها معاينة مالهاش تاريخ */
+    nav?: boolean;
+    /** شريط تقدّم رفيع تحت شريط العنوان */
+    loading?: boolean;
+    /**
+     * عرض المحتوى الحقيقي بالبكسل.
+     *
+     * لمّا يتحدّد، المحتوى بيتبني عليه ويتعرض مصغّراً — فنقاط التوقّف
+     * بتشتغل زي ما هي على شاشة الزائر.
+     */
+    contentWidth?: number;
+    /** نسبة التصغير الفعلية بعد الحساب — للعرض جنب المعاينة */
+    onScale?: (scale: number) => void;
+    onReload?: () => void;
+    /** المحتوى — لو الصفحة بتتمرّر، حطّ حاوية التمرير هنا */
+    children: ReactNode;
+    className?: string;
+}
+declare function BrowserFrame({ url, device, tab, nav, loading, contentWidth, onScale, onReload, children, className, }: BrowserFrameProps): react.JSX.Element;
+
+interface BarSeries {
+    label: string;
+    values: number[];
+    /** السلسلة المرجعية — تُرسم بتدرّج أفتح خلف الأساسية */
+    muted?: boolean;
+}
+/**
+ * الأعمدة — للمقارنة بين فترات أو فئات معدودة.
+ *
+ * السلسلتان جنب بعضهما لا فوق بعض: التكديس يخفي أن أحدهما تراجع
+ * حين يرتفع الآخر.
+ */
+declare function BarChart({ labels, series, height, formatValue, className, }: {
+    labels: string[];
+    series: BarSeries[];
+    height?: number;
+    formatValue?: (v: number) => string;
+    className?: string;
+}): react.JSX.Element;
+/**
+ * خطّ الاتجاه — للسلاسل الطويلة التي تُقرأ كشكل لا كقيم.
+ *
+ * ثلاث علامات على المحور الرأسي فقط. الشبكة الكثيفة تُقرأ كضجيج،
+ * والقيمة الدقيقة مكانها الجدول لا الرسم.
+ */
+declare function TrendChart({ labels, values, compare, pointLabels, mode, height, formatValue, compareLabel, className, }: {
+    /** علامات المحور — ثلاث أو أربع، لا واحدة لكل نقطة */
+    labels: string[];
+    values: number[];
+    /** الفترة السابقة — تُرسم خطاً باهتاً بلا تعبئة */
+    compare?: number[];
+    /**
+     * اسم كل نقطة — واحد لكل قيمة، للتلميح ولقارئ الشاشة.
+     *
+     * منفصل عن `labels` عمداً: تلك علامات محور متباعدة («قبل ٣٠ يوماً»
+     * · «قبل ١٥» · «اليوم») وعددها ثلاثة بينما النقاط ثلاثون. الخلط
+     * بينهما يجعل التلميح يعرض `undefined` عند كل نقطة بعد الثالثة.
+     */
+    pointLabels?: string[];
+    /** مساحة أو أعمدة — التبديل بينهما يخصّ الصفحة لا الرسم */
+    mode?: 'area' | 'bars';
+    height?: number;
+    formatValue?: (v: number) => string;
+    /** اسم سلسلة المقارنة في التلميح */
+    compareLabel?: string;
+    className?: string;
+}): react.JSX.Element;
+interface FunnelStage {
+    key: string;
+    label: string;
+    value: number;
+    /** ماذا يعني التسرّب هنا وما العمل — يُعرض عند أكبر تسرّب */
+    advice?: string;
+}
+/**
+ * قمع الشراء.
+ *
+ * أهمّ ما فيه ليس المراحل بل **أكبر تسرّب**: هو المكان الوحيد الذي
+ * يستحقّ عمل هذا الأسبوع. لذلك يُحسب ويُعلَّم ويُشرح، والباقي يبقى
+ * محايداً حتى لا يزاحمه.
+ */
+declare function FunnelChart({ stages, formatValue, className, }: {
+    stages: FunnelStage[];
+    formatValue?: (v: number) => string;
+    className?: string;
+}): react.JSX.Element;
+/**
+ * الخريطة الحرارية — متى يشتري الناس.
+ *
+ * أربع درجات من لون واحد لا تدرّج مستمر: العين لا تفرّق بين ٦٠٪ و٦٥٪
+ * من الشدّة، وأربع فئات تُقرأ فوراً.
+ */
+declare function Heatmap({ rows, cols, values, formatCell, lowLabel, highLabel, className, }: {
+    rows: string[];
+    cols: string[];
+    /** values[rowIndex][colIndex] */
+    values: number[][];
+    formatCell?: (v: number, row: string, col: string) => string;
+    lowLabel?: string;
+    highLabel?: string;
+    className?: string;
+}): react.JSX.Element;
+interface ShareItem {
+    key: string;
+    label: ReactNode;
+    value: number;
+    /** سطر ثانٍ تحت الاسم — في `stacked` فقط */
+    meta?: ReactNode;
+    /**
+     * ما يُكتب في الطرف المقابل بدل الرقم المنسَّق.
+     *
+     * في `stacked` يظهر **قبل** الرقم؛ وفي `inline` يحلّ محلّه — لأن
+     * الصفّ المضغوط ليس فيه مكان لرقمين ونسبة.
+     */
+    trailing?: ReactNode;
+    /** لون الشريط — الافتراضي لون العلامة */
+    tone?: 'brand' | 'amber' | 'red' | 'muted';
+}
+/**
+ * قائمة بحصص — للفئات المرتّبة (المصادر، المنتجات، المدن).
+ *
+ * أفضل من الدائرة: الدائرة تجعل مقارنة شريحتين متقاربتين مستحيلة،
+ * والقائمة مرتّبة أصلاً فالترتيب نفسه معلومة.
+ *
+ * ── تخطيطان لا واحد ────────────────────────────────────────────────────
+ * `stacked` للقائمة التي هي **محتوى الكرت**: الاسم والرقم في سطر
+ * والشريط تحتهما، فيتّسع لاسم طويل وسطر وصف.
+ *
+ * `inline` للقائمة التي هي **جزء من كرت**: الاسم والشريط والرقم في صفّ
+ * واحد بارتفاع سطر. توزيع النجوم بجانب متوسّط التقييم لا يحتمل ثلاثة
+ * أسطر لكل نجمة.
+ *
+ * الاثنان وُلدا من شاشتين قائمتين كانتا ترسمان أشرطتهما بأنفسهما —
+ * لا من تخيّل استعمالات.
+ */
+declare function ShareList({ items, total, layout, showPercent, labelWidth, formatValue, className, }: {
+    items: ShareItem[];
+    /** المجموع الذي تُحسب عليه النسبة — الافتراضي مجموع العناصر */
+    total?: number;
+    layout?: 'stacked' | 'inline';
+    /** النسبة المئوية بجانب الرقم — أطفئها حين يكون العدد نفسه هو المعنى */
+    showPercent?: boolean;
+    /** عرض عمود الاسم في `inline` — ثابت حتى تصطفّ الأشرطة تحت بعضها */
+    labelWidth?: string;
+    /**
+     * `ReactNode` لا `string` — بخلاف `TrendChart`.
+     *
+     * هناك القيمة بتروح جوّه `title=` وهي سمة نصّية، وهنا بتترسم في
+     * الصفحة — فبتقبل عنصراً، و`Money` بيقدر يدخل.
+     */
+    formatValue?: (v: number) => ReactNode;
+    className?: string;
+}): react.JSX.Element;
+
+interface WaterfallStep {
+    key: string;
+    label: ReactNode;
+    /** موجب يزيد، وسالب ينقص */
+    value: number;
+    /** سطر يشرح الخصم — «٤٪ عمولة بوّابة الدفع» */
+    meta?: ReactNode;
+}
+declare function WaterfallChart({ total, steps, totalLabel, netLabel, formatValue, className, }: {
+    /** نقطة البداية — إجمالي المبيعات قبل أي خصم */
+    total: number;
+    /** الخصومات بقيم سالبة، والإضافات بموجبة */
+    steps: WaterfallStep[];
+    totalLabel?: ReactNode;
+    netLabel?: ReactNode;
+    formatValue?: (v: number) => ReactNode;
+    className?: string;
+}): react.JSX.Element;
+/**
+ * الفعليّ مقابل الهدف على مسطرة واحدة.
+ *
+ * ── لماذا شريط لا دائرة ────────────────────────────────────────────────
+ * الدائرة تعرض نسبة، والنسبة وحدها لا تكفي: «٦٨٪ من الهدف» في اليوم
+ * الخامس ممتاز، وفي اليوم الثامن والعشرين كارثة. الشريط يحمل **علامتين**
+ * — الهدف ومقدار ما مضى من الشهر — فيُقرأ الموقف لا الرقم.
+ */
+declare function GoalBar({ value, goal, 
+/** ما مضى من المدّة ٠–١ — تُرسم كعلامة «المفروض تكون هنا» */
+pace, label, formatValue, className, }: {
+    value: number;
+    goal: number;
+    pace?: number;
+    label?: ReactNode;
+    formatValue?: (v: number) => string;
+    className?: string;
+}): react.JSX.Element;
+interface ParetoItem {
+    key: string;
+    label: ReactNode;
+    value: number;
+}
+/**
+ * كم صنفاً يصنع معظم المبيعات.
+ *
+ * ── ما يقوله ولا يقوله `ShareList` ─────────────────────────────────────
+ * `ShareList` يقول «إنستجرام ٤٠٪». وباريتو يقول «أربعة منتجات من ثلاثين
+ * تصنع ٨٠٪ من دخلك» — وهذه جملة تُغيّر قرار الشراء والإعلان معاً.
+ *
+ * الفرق في الخطّ التراكميّ: يُقرأ من اليسار حتى يبلغ ٨٠٪، وعدد الأعمدة
+ * تحته هو الجواب.
+ */
+declare function ParetoChart({ items, height, threshold, formatValue, className, }: {
+    items: ParetoItem[];
+    height?: number;
+    /** الخطّ الأفقيّ الذي يُقرأ عنده العدد — ٨٠٪ افتراضاً */
+    threshold?: number;
+    formatValue?: (v: number) => string;
+    className?: string;
+}): react.JSX.Element;
+interface RunwayItem {
+    key: string;
+    label: ReactNode;
+    /** ما في المخزن الآن */
+    stock: number;
+    /** متوسّط ما يُباع في اليوم */
+    perDay: number;
+}
+/**
+ * كم يوماً يكفي المخزون.
+ *
+ * ── لماذا بالأيام لا بالقطع ────────────────────────────────────────────
+ * «٣ قطع» لا تقول شيئاً: ثلاث قطع من صنف يُباع مرّة في الشهر مخزون
+ * فائض، ومن صنف يُباع خمساً في اليوم نفادٌ غداً. القسمة على معدّل
+ * البيع تحوّل الرقم إلى **وقت**، والوقت هو ما يُتصرّف بناءً عليه.
+ *
+ * والترتيب بالأقرب نفاداً — أوّل سطر هو مكالمة المورّد اليوم.
+ */
+declare function StockRunway({ items, 
+/** ما دون هذا العدد من الأيام يُعلَّم أحمر */
+urgentDays, 
+/** أقصى ما يُعرض على المسطرة — ما فوقه يبلغ الطرف */
+horizonDays, className, }: {
+    items: RunwayItem[];
+    urgentDays?: number;
+    horizonDays?: number;
+    className?: string;
+}): react.JSX.Element;
+
+interface Chapter {
+    /** بالثواني */
+    at: number;
+    title: string;
+}
+declare function Scrubber({ time, duration, buffered, onSeek, chapters, label, size, }: {
+    time: number;
+    duration: number;
+    buffered?: number;
+    onSeek: (to: number) => void;
+    /** علامات على الشريط — فصول الدرس */
+    chapters?: Chapter[];
+    label?: string;
+    size?: 'sm' | 'md';
+}): react.JSX.Element;
+
+interface VideoSuggestion {
+    id: string;
+    title: string;
+    poster?: string;
+    /** المدة بالثواني — بتتعرض على الغلاف */
+    duration?: number;
+    onSelect: () => void;
+}
+interface VideoPlayerProps {
+    src: string;
+    /** صورة الغلاف قبل التشغيل */
+    poster?: string;
+    title?: string;
+    /** فصول الدرس — علامات على الشريط */
+    chapters?: Chapter[];
+    /** ملف ترجمة WebVTT */
+    captions?: string;
+    /** مقاطع مقترحة — بتظهر قبل النهاية وبعدها */
+    suggestions?: VideoSuggestion[];
+    /**
+     * كام ثانية قبل النهاية تبدأ الاقتراحات تبان.
+     * الافتراضي ١٠ — أقل من كده مش كفاية للقراءة والاختيار، وأكتر
+     * بيقطع آخر ربع المقطع وهو غالباً الخلاصة.
+     */
+    suggestAt?: number;
+    autoPlay?: boolean;
+    loop?: boolean;
+    className?: string;
+}
+declare function VideoPlayer({ src, poster, title, chapters, captions, suggestions, suggestAt, autoPlay, loop, className, }: VideoPlayerProps): react.JSX.Element;
+
+interface AudioPlayerProps {
+    src: string;
+    title?: string;
+    /** سطر تحت العنوان — اسم الدرس، المدة، المتحدّث… */
+    meta?: string;
+    /** صورة مربّعة جنب العنوان */
+    cover?: string;
+    /** `row` صف مضغوط للقوايم · `card` كرت كامل بالموجة */
+    variant?: 'card' | 'row';
+    /**
+     * عدد أعمدة الموجة.
+     *
+     * الافتراضي بيتحسب من العرض الفعلي فالكثافة البصرية تفضل واحدة في
+     * أي مكان. حدّده بس لو عايز شكل مختلف عن كده عن قصد.
+     */
+    bars?: number;
+    /**
+     * مستوى الموجة عند الموضع الحالي — ٠ لـ١، بيتنادى مع كل إطار رسم.
+     *
+     * الرقم من **القمم المحسوبة من الملف** مش من الخرج الفعلي: يعني
+     * مابيحسّش بمستوى الصوت ولا الكتم، بس تكلفته صفر لأن الداتا موجودة
+     * أصلاً للموجة. لو محتاج الخرج الحقيقي أو ترددات، استخدم
+     * `useAudioLevel` بدلها.
+     *
+     * **تحذير:** بيتنادى ٦٠ مرة في الثانية. أي `setState` جوّاه معناه
+     * رندر ٦٠ مرة في الثانية عندك — اكتب على الـDOM مباشرةً بـref.
+     */
+    onLevel?: (level: number) => void;
+    /**
+     * بيتملا بعنصر `<audio>` الداخلي — عشان تقدر توصّله بـ`useAudioLevel`
+     * أو أي حاجة محتاجة العنصر نفسه.
+     */
+    mediaRef?: RefObject<HTMLAudioElement | null>;
+    className?: string;
+}
+declare function AudioPlayer({ src, title, meta, cover, variant, bars, onLevel, mediaRef, className, }: AudioPlayerProps): react.JSX.Element;
+
+interface MediaState {
+    playing: boolean;
+    /** بالثواني */
+    time: number;
+    duration: number;
+    /** آخر ثانية اتحمّلت — المؤشّر بيرسمها كطبقة تحت التقدّم */
+    buffered: number;
+    volume: number;
+    muted: boolean;
+    rate: number;
+    /** بيستنى بيانات — المؤشّر واقف والفيديو مش بيتحرّك */
+    waiting: boolean;
+    ended: boolean;
+}
+declare function useMedia<T extends HTMLMediaElement>(): {
+    ref: react.RefObject<T | null>;
+    state: MediaState;
+    toggle: () => void;
+    seek: (to: number) => void;
+    skip: (by: number) => void;
+    setVolume: (v: number) => void;
+    toggleMute: () => void;
+    setRate: (r: number) => void;
+};
+/**
+ * الوقت بصيغة m:ss أو h:mm:ss.
+ *
+ * الساعات بتظهر بس لو موجودة — «0:03:12» على مقطع تلات دقايق بيخلّي
+ * العين تقرا رقم زيادة كل مرة.
+ */
+declare function formatTime(seconds: number): string;
+
+interface AudioLevel {
+    /** مستوى عام ٠–١ — اقرا `.current` جوّه حلقة رسم عندك */
+    level: RefObject<number>;
+    /** طاقة كل نطاق ترددي ٠–١، من الغليظ للحادّ */
+    bands: RefObject<number[]>;
+    /** التحليل اشتغل فعلاً */
+    ready: boolean;
+    /**
+     * فشل التوصيل — غالباً ملف من دومين تاني من غير هيدرز CORS.
+     * مهم تتعامل معاه: Web Audio بيدّي **أصفار** في الحالة دي مش خطأ،
+     * يعني التأثير بيموت بصمت من غير ما حد يعرف ليه.
+     */
+    failed: boolean;
+}
+declare function useAudioLevel(ref: RefObject<HTMLMediaElement | null>, { bands, enabled }?: {
+    bands?: number;
+    enabled?: boolean;
+}): AudioLevel;
+
+type ProviderLevel = 1 | 2 | 3;
+/**
+ * التسميات جوّه المكتبة لا في التطبيق.
+ *
+ * الشارة اللي كل شاشة بتكتب نصّها بإيدها بتتفرّق: «مقدّم محترف» في
+ * السوق و«محترف» في صفحة الخدمة، والاتنين نفس الدرجة. النصّ جزء من
+ * المكوّن زي أسماء العملات في `Money` بالظبط — وهنا هو **الاسم
+ * المتاح الوحيد**، فتفرّقه بيدّي شارتين مالهمش علاقة ببعض.
+ */
+declare const PROVIDER_LEVEL_LABEL: Record<ProviderLevel, string>;
+declare const PROVIDER_LEVEL_LABEL_EN: Record<ProviderLevel, string>;
+interface ProviderMarkProps {
+    level: ProviderLevel;
+    /** ضلع المربّع بالبكسل */
+    size?: number;
+    className?: string;
+}
+/**
+ * العلامة وحدها بلا خلفية — لخليّة جدول ضيّقة أو سطر بيحدّد لونه.
+ *
+ * بلا `aria-label`: العلامة زينة جوّه `ProviderBadge` اللي بيحمل الاسم.
+ */
+declare function ProviderMark({ level, size, className }: ProviderMarkProps): react.JSX.Element;
+/**
+ * المقاسين.
+ *
+ * `sm` أربعة وعشرين — وده **حدّ الهدف اللمسي** لا رقم مختار. الشارة
+ * بتاخد تركيز (تحت)، واللي بياخد تركيز بيتضغط عليه.
+ */
+declare const SIZES: {
+    readonly sm: {
+        readonly box: "size-6";
+        readonly mark: 14;
+    };
+    readonly md: {
+        readonly box: "size-7";
+        readonly mark: 16;
+    };
+};
+type ProviderBadgeSize = keyof typeof SIZES;
+interface ProviderBadgeProps {
+    level: ProviderLevel;
+    /**
+     * المقاس — واحد للتلات درجات في نفس الموضع.
+     *
+     * المقاس على المكوّن لا على الدرجة عن قصد: لو «خبير» أكبر من «جديد»
+     * في نفس العمود بيتقري فرق في **وزن السطر** لا فرق في المستوى.
+     */
+    size?: ProviderBadgeSize;
+    className?: string;
+}
+/**
+ * ── الاسم مش في التولتيب بس ─────────────────────────────────────────────
+ * التولتيب بيظهر على المرور، **واللمس مالوش مرور**. فالاسم متحطّ في
+ * `aria-label` كمان: قارئ الشاشة بينطقه، ومستخدم اللمس بيوصله لأن
+ * العنصر بياخد تركيز فالضغطة بتفتح التولتيب.
+ *
+ * ── والمربّع بحواف لا دايرة ──────────────────────────────────────────────
+ * الشارة بتقع جنب `Avatar` وهو دايرة. دايرة صغيّرة جنب دايرة كبيرة
+ * بتتقري صورة تانية للمقدّم — والشكل المختلف بيقول «دي علامة مش وش».
+ */
+declare function ProviderBadge({ level, size, className }: ProviderBadgeProps): react.JSX.Element;
+interface VerifiedBadgeProps {
+    size?: ProviderBadgeSize;
+    className?: string;
+}
+declare function VerifiedBadge({ size, className }: VerifiedBadgeProps): react.JSX.Element;
+
+/** سطر منطوق مع توقيته — يُضاء أثناء نطقه */
+interface CoachLine {
+    text: string;
+    start: number;
+    end: number;
+}
+/** أين يظهر */
+interface CoachWhere {
+    /** المسار الذي يظهر فيه — أُغفل = كل المسارات */
+    path?: string;
+    /**
+     * مُعرّف العنصر الذي يتكلّم عنه، من `<Coach id="…">`.
+     *
+     * النصيحة تلتصق به، والشرح الصوتي يُضيئه أثناء الكلام. وإن لم يكن
+     * العنصر في الشاشة وقت الظهور فلا يظهر شيء — إرشاد يشير إلى ما لا
+     * وجود له أسوأ من لا إرشاد.
+     */
+    anchor?: string;
+}
+/**
+ * متى يظهر.
+ *
+ * `enter` فور دخول الشاشة · `idle:4s` بعد استقرار المستخدم عليها
+ * · `manual` بنداء `coach.show(id)` من الصفحة.
+ *
+ * والتأخير ليس تجميلاً: الظهور مع تحميل الصفحة يجعل الإرشاد ينافس ما
+ * جاء المستخدم ليقرأه، فيُغلق قبل أن يُقرأ.
+ */
+type CoachWhen = 'enter' | 'manual' | `idle:${number}s`;
+interface CoachBase {
+    id: string;
+    where?: CoachWhere;
+    when?: CoachWhen;
+}
+/**
+ * نصيحة — جملة واحدة بجانب العنصر.
+ *
+ * أرخص نوع وأكثره استعمالاً: لا ملفّ ولا تسجيل، تُكتب وتنتهي. وهذا
+ * سبب وجوده أصلاً — نصف ما يبدو محتاجاً لشرح صوتي لا يحتاج أكثر من
+ * جملة في مكانها.
+ */
+interface CoachHint extends CoachBase {
+    kind: 'hint';
+    text: string;
+    /** عنوان اختياري فوق الجملة */
+    title?: string;
+}
+/** شرح صوتي — يصف **الشاشة**: أين الأشياء وماذا تعني */
+interface CoachAudio extends CoachBase {
+    kind: 'audio';
+    /** ما تقوله البطاقة قبل الضغط — الموضوع لا التحية */
+    headline: string;
+    src: string;
+    lines: CoachLine[];
+    meta?: string;
+}
+type CoachItem = CoachHint | CoachAudio;
+/** المدّة من آخر سطر — لا نطلبها من المتصفّح قبل الضغط */
+declare const coachSeconds: (item: CoachAudio) => number;
+interface CoachApi {
+    /** يعرض عنصراً بمعرّفه — يتجاوز `when` ولا يتجاوز «مرّة واحدة» */
+    show: (id: string) => void;
+    /** يعرضه ولو سبق أن رآه — لزرار «إيه ده؟» */
+    replay: (id: string) => void;
+    close: () => void;
+    /** ما يُعرض الآن */
+    current: CoachItem | null;
+    seen: (id: string) => boolean;
+    /** ينسى المُشاهَد كلّه — للتجريب ولزرار «أعد الإرشاد» في الإعدادات */
+    reset: () => void;
+}
+/** ما يمرّره التطبيق ليرسم الكرة — تبقى `@qumra/manara` خالية من `three` */
+type CoachOrb = (level: RefObject<number>) => ReactNode;
+/**
+ * حدود المساحة التي يشغلها الشرح الصوتيّ.
+ *
+ * افتراضها الشاشة كلّها، وهو الصحيح لتطبيق بلا شِلّ. أمّا لوحة لها
+ * شريط جانبيّ وعلويّ فالحاجب فوقهما يعطّل التنقّل بلا سبب: الشرح
+ * يتكلّم عن **المحتوى**، فليحجب المحتوى وحده. والكرة تتوسّط ما بقي
+ * لا وسط الشاشة — وإلّا بدت مزاحة عن مركزها.
+ *
+ * قيم CSS منطقيّة (`insetInlineStart`) لا يمين/يسار، فتنقلب مع اتجاه
+ * الصفحة بلا نسختين.
+ */
+interface CoachRegion {
+    top?: string;
+    bottom?: string;
+    insetInlineStart?: string;
+    insetInlineEnd?: string;
+}
+
+interface CoachProviderProps {
+    items: CoachItem[];
+    /**
+     * المسار الحالي — من الموجّه عندك.
+     *
+     * خاصية لا استنتاج: `@qumra/manara` لا تعتمد على موجّه بعينه، وقراءة
+     * `useLocation` هنا تربط المكتبة كلّها بـ`react-router`.
+     */
+    path?: string;
+    /** يرسم كرة شهاب أثناء الكلام — يتلقّى مرجع مستوى الصوت */
+    orb?: CoachOrb;
+    /** حدود مساحة الشرح — أُغفلت = الشاشة كلّها */
+    region?: CoachRegion;
+    /** مفتاح `localStorage` لما شُوهد */
+    storageKey?: string;
+    /** يوقف الإرشاد كلّه — لوضع العرض أو تفضيل المستخدم */
+    disabled?: boolean;
+    children: ReactNode;
+}
+declare function CoachProvider({ items, path, orb, region, storageKey, disabled, children, }: CoachProviderProps): react.JSX.Element;
+declare function useCoach(): CoachApi;
+/**
+ * نسخة لا ترمي — لمكوّنات المكتبة نفسها.
+ *
+ * `useCoach` يرمي عمداً: من ناداه في شاشة يريد الإرشاد، والصمت يخفي
+ * الخطأ. أمّا `StatCard` فيُستعمل في معرض المكوّنات وفي شاشات بلا
+ * مزوّد، ولا يصحّ أن يسقط لأن أحدهم لم يشغّل الإرشاد — فيسأل، وإن لم
+ * يجد لم يرسم زرّ الشرح.
+ */
+declare function useCoachOptional(): CoachApi | null;
+
+declare function Coach({ id, asChild, children, }: {
+    id: string;
+    /**
+     * يمرّر المرجع إلى الطفل مباشرةً بدل تغليفه.
+     *
+     * استعملها حين يكون الطفل عنصر DOM أو مكوّناً يمرّر `ref` — أي
+     * `<Button>` في هذه المكتبة. وإن لم يمرّره لم يُسجَّل العنصر
+     * وسقط الإرشاد بصمت، ولهذا ليست هي السلوك الافتراضي.
+     */
+    asChild?: boolean;
+    children: ReactNode;
+}): react.JSX.Element;
+
+interface ChoiceOption {
+    value: string;
+    label: ReactNode;
+    meta?: ReactNode;
+    /** رقم بيتعرض في الجنب — سعر الشحن مثلاً */
+    price?: ReactNode;
+    icon?: ComponentType<{
+        size?: number;
+        strokeWidth?: number;
+    }>;
+    disabled?: boolean;
+    /** سبب التعطيل — «معطّل» من غير سبب بيسيب المستخدم واقف */
+    lockReason?: string;
+    /**
+     * معرّف شرح في سجلّ الإرشاد — يرسم علامة استفهام تفتحه.
+     *
+     * للخيار الذي لا يكفيه سطر: «كتالوج كامل» يفهمها من عمل واحداً قبلاً،
+     * ومن لم يعملها يحتاج أن يعرف ما الملفّ وماذا فيه قبل أن يختار — لا
+     * بعد أن يختار فيجد نفسه في شاشة رفع لا يريدها.
+     */
+    coachId?: string;
+}
+declare function ChoiceCards({ name, value, onChange, options, columns, hideMark, multiple, disabled: allDisabled, className, }: {
+    name: string;
+    /** قايمة لما `multiple` — والمكوّن بيقرا الشكل ده لوحده */
+    value: string | null | string[];
+    onChange: (value: string) => void;
+    options: ChoiceOption[];
+    columns?: 1 | 2 | 3;
+    /**
+     * اختيار متعدّد — تشيك بوكس بدل راديو.
+     *
+     * `onChange` بترجّع **الخيار اللي اتضغط** لا القايمة الجديدة، فاللي
+     * فوق هو اللي بيقرّر يضيف ولا يشيل. المكوّن مايعرفش لو فيه حدّ أقصى
+     * أو خيار بيلغي غيره، واللي عارف هو الشاشة.
+     */
+    multiple?: boolean;
+    /** بيقفل الكل — الكرت اللي اتجاوب عليه بيفضل مقروء ومش قابل للتغيير */
+    disabled?: boolean;
+    /**
+     * يُخفي دائرة الاختيار.
+     *
+     * وظيفتها أن تقول «اختر واحداً» — وهي مفهومة بلا رسم حين يكون
+     * المختار محاطاً بإطار العلامة وأرضيتها وأيقونته معبّأة بلونها.
+     * ثلاث إشارات لشيء واحد، والرابعة زينة. تُترك ظاهرة حين لا يكون
+     * للخيارات أيقونات، فلا يبقى ما يميّز المختار غيرها.
+     */
+    hideMark?: boolean;
+    className?: string;
+}): react.JSX.Element;
+/**
+ * خط اتجاه صغير جنب الرقم.
+ *
+ * مالوش محاور ولا شبكة عن قصد — وظيفته يقول «طالع ولا نازل» في نص
+ * صف جدول، مش يتقري منه قيمة. القيمة الدقيقة مكانها العمود اللي جنبه.
+ *
+ * ── و`fluid` لما يبقى هو المحتوى ───────────────────────────────────────
+ * على شاشة تليفون بعرض ٣٢٠ بكسل، ٣٠ عمود بيبقى كل واحد ٨ بكسل بمسافة
+ * ٢ — والعين بتقرا نسيج مش اتجاه. الخط بيقول «طالع ولا نازل» في نظرة،
+ * وده السؤال الوحيد على التليفون.
+ *
+ * `fluid` بيخلّيه يملا العرض المتاح: الـ`viewBox` بيفضل بمقاسه
+ * و`preserveAspectRatio="none"` بيمطّ أفقياً. وعشان المطّ ده السُمك
+ * بيتحسب من الشاشة لا من المقاس (`vectorEffect`)، وإلا الخط بيرفع
+ * على الشاشة العريضة ويرفع أكتر على الضيقة.
+ */
+declare function Sparkline({ values, width, height, tone, fluid, className, }: {
+    values: number[];
+    width?: number;
+    height?: number;
+    tone?: 'brand' | 'green' | 'red' | 'muted';
+    /** يملا عرض الحاوية بدل المقاس الثابت — `width` بيبقى نسبة الرسم */
+    fluid?: boolean;
+    className?: string;
+}): react.JSX.Element | null;
+
+interface BadgeProps {
+    children: ReactNode;
+    tone?: Tone;
+    variant?: 'soft' | 'solid';
+    size?: 'sm' | 'md';
+    /** نقطة حالة قبل النص */
+    dot?: boolean;
+    icon?: ReactNode;
+    className?: string;
+}
+/** شارة الحالة — النمط اللي كان مكرر في ١١ ملف قبل الاستخراج */
+declare function Badge({ children, tone, variant, size, dot, icon, className, }: BadgeProps): react.JSX.Element;
+declare function Counter({ value, max }: {
+    value: number;
+    max?: number;
+}): react.JSX.Element | null;
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+declare function Avatar({ name, src, size, square, className, }: {
+    name: string;
+    src?: string;
+    size?: AvatarSize;
+    /** مربع بحواف — للمتاجر والمنتجات بدل الدايرة */
+    square?: boolean;
+    className?: string;
+}): react.JSX.Element;
+interface StatCardProps {
+    icon?: ComponentType<{
+        size?: number;
+        strokeWidth?: number;
+    }>;
+    tone?: Tone;
+    label: ReactNode;
+    value: ReactNode;
+    hint?: ReactNode;
+    /**
+     * معرّف شرح في سجلّ الإرشاد — يرسم علامة استفهام تفتحه.
+     *
+     * الرقم بلا تعريفه نصف معلومة: «قيمة يمكن استردادها» يفهمها من كتبها،
+     * ومن يقرأها أول مرّة يسأل: بأي حساب؟ ومن أين؟ والشرح المكتوب تحت كل
+     * رقم يحوّل لوحة إلى كتيّب — فالعلامة تُخفيه حتى يُطلب.
+     *
+     * ولا يُرسم شيء إن لم يكن حول الشاشة `<CoachProvider>`.
+     */
+    coachId?: string;
+    className?: string;
+}
+/**
+ * الكرت الإحصائي — كان مكرر في ٦ ملفات.
+ *
+ * مقصود إنه **مالوش نسبة مئوية**: المنتج الحقيقي بيعرض «+100%» على طلبين،
+ * وده رقم بيهزّ الثقة في باقي الأرقام. لو محتاج مقارنة استخدم `hint`
+ * بجملة صريحة، أو `Delta` تحت لما يكون الأساس كبير كفاية.
+ */
+declare function StatCard({ icon: Icon, tone, label, value, hint, coachId, className, }: StatCardProps): react.JSX.Element;
+declare function Card({ children, padded, className, }: {
+    children: ReactNode;
+    padded?: boolean;
+    className?: string;
+}): react.JSX.Element;
+/**
+ * رأس البطاقة.
+ *
+ * بلا هامش سفليّ: كل بطاقة في اللوحة `flex flex-col gap-*`، والهامش
+ * المدمج كان يُضاف إلى الفجوة فيصير الفراغ تحت العنوان ضعف ما تحت أيّ
+ * شيء آخر فيها. المسافة تخصّ الحاوية لا العنصر.
+ */
+declare function CardHeader({ title, description, action, coachId, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    /**
+     * معرّف شرح في سجلّ الإرشاد — يرسم علامة استفهام تفتحه.
+     *
+     * للقسم الذي لا يكفيه سطر الوصف: «الخصائص والمتغيّرات» جملة تصفه،
+     * لكنّ من لم يعمل متغيّراً قبلاً يحتاج أن يفهم ماذا يحدث حين يضيف
+     * خاصيّة — وشرح ذلك تحت العنوان يحوّل النموذج إلى كتيّب.
+     */
+    coachId?: string;
+}): react.JSX.Element;
+declare function PageHeader({ title, hint, actions, }: {
+    title: ReactNode;
+    hint?: ReactNode;
+    actions?: ReactNode;
+}): react.JSX.Element;
+declare function Progress({ value, max, label, tone, className, }: {
+    value: number;
+    max?: number;
+    label?: ReactNode;
+    tone?: Tone;
+    /** للتحكّم في العرض — الشريط المضغوط جنب رقم مش بعرض الكرت */
+    className?: string;
+}): react.JSX.Element;
+declare function Skeleton({ variant, width, className, }: {
+    variant?: 'text' | 'block' | 'circle';
+    width?: string;
+    className?: string;
+}): react.JSX.Element;
+
+/**
+ * إصدار الصيغة.
+ *
+ * بيتحطّ في كل رسالة عشان المستقبِل يعرف يقرأها. الرسالة بلا `v`
+ * بتتقري على إنها `1` — الرسايل القديمة اتبعتت قبل ما الحقل يوجد.
+ */
+declare const NOTIFICATION_SCHEMA_VERSION = 1;
+/**
+ * أولوية الإشعار — تلات درجات، كل واحدة ليها سلوك.
+ *
+ *   `low`       بيوصل صامت
+ *   `normal`    الافتراضي
+ *   `critical`  بيرنّ أعلى ٣٥٪، ومابيتعلّمش مقروء بـ«تعليم الكل»،
+ *               وبيتعدّ في `needsAction`
+ *
+ * ── وكانت أربعة ─────────────────────────────────────────────────────────
+ * `high` كانت موجودة في نوع الاتحاد وبس — مافيش سطر واحد بيقراها.
+ * أربع درجات وواحدة فيهم مالهاش أثر أوحش من تلاتة كلهم شغّالين: اللي
+ * بيختار بيقعد يفكّر في فرق مش موجود، واللي بيقرا الكود بيدوّر على
+ * سلوك مش هيلاقيه.
+ *
+ * الرسالة اللي لسه بتبعت `high` بتتقرا `normal` بتحذير — مش برفض.
+ */
+type NotificationPriority = 'low' | 'normal' | 'critical';
+declare const NOTIFICATION_PRIORITIES: NotificationPriority[];
+/**
+ * الإجراء — وجهة لا دالة.
+ *
+ * `href` مسار داخلي (`/orders/1052`) أو رابط كامل. المكتبة مابتنقّلش
+ * بنفسها: بتنادي `onAction` واللي بيستخدمها بيوصّله براوتره. كده نفس
+ * الرسالة بتشتغل في تطبيق React Router وتطبيق Next وصفحة ساكنة.
+ */
+interface NotificationAction {
+    label: string;
+    href: string;
+}
+/**
+ * الرسالة على السلك — ده اللي السيرفر بيبعته وقاعدة البيانات بتخزّنه.
+ *
+ * كل الحقول الاختيارية ليها افتراضي في `parseNotification`، فالسيرفر
+ * بيبعت أقل حاجة والباقي بيتحسب.
+ *
+ * @example
+ * {
+ *   "v": 1,
+ *   "id": "ntf_01HZY8K3",
+ *   "kind": "order.created",
+ *   "at": "2026-08-10T14:32:00.000Z",
+ *   "title": "طلب جديد #1052",
+ *   "body": "مدفوع بالكامل، وفي انتظار التجهيز.",
+ *   "priority": "normal",
+ *   "data": { "orderId": "1052", "total": 1480, "currency": "EGP" },
+ *   "action": { "label": "افتح الطلب", "href": "/orders/1052" }
+ * }
+ */
+interface NotificationJSON {
+    /** إصدار الصيغة — غيابه بيتقري `1` */
+    v?: number;
+    /** معرّف فريد وثابت. التكرار بيتلغي بيه، فلازم يكون من السيرفر */
+    id: string;
+    /** اسم الحدث `domain.event` — `order.created`, `stock.depleted` */
+    kind: string;
+    /** ISO 8601 بتوقيت UTC — `2026-08-10T14:32:00.000Z` */
+    at: string;
+    title: string;
+    body?: string;
+    /**
+     * وقت القراية بالـISO — `null` أو غياب يعني غير مقروء.
+     *
+     * ── ليه وقت مش بوليان ───────────────────────────────────────────────
+     * `read: true` أحادي: مفيش طريقة تقول «رجّعه غير مقروء»، ولو عملتها
+     * أول مزامنة بتقلبها تاني — لأن القاعدة «المقروء بيكسب» مالهاش
+     * مرجع تقارن بيه.
+     *
+     * الوقت بيدّي نفس الضمانة (الأحدث بيكسب) وبيفتح تلاتة كمان:
+     * «غير مقروء» بيبقى حدث أحدث، والتراجع بيعرف علامته من علامة جهاز
+     * تاني وصلت في نفس اللحظة، و«الوقت لحد القراية» بيتحسب مجاناً.
+     */
+    readAt?: string | null;
+    /** @deprecated استخدم `readAt` — بتتقرا وبتتحوّل، وهتتشال */
+    read?: boolean;
+    priority?: NotificationPriority;
+    /**
+     * مفتاح تجميع — بيلمّ **الكروت الطايرة وبس**.
+     *
+     * الرسالة الجديدة بتحلّ محلّ اللي قبلها من نفس المجموعة في طابور
+     * الكروت. تلات كروت من نفس المصدر بتنزل مع بعض هي الضجيج اللي
+     * بيخلّي التاجر يطفّي الإشعارات.
+     *
+     * ── والصندوق مابيلمّش ──────────────────────────────────────────────
+     * التلاتة بيفضلوا سطور منفصلة. الكرت بيقاطع فبيستاهل اللمّ؛ السطر
+     * بيتقري بمهلة فاللمّ فيه بيخفي معلومة.
+     *
+     * واللمّ الدائم («٣ مواضيع جديدة» كسطر واحد) شغل السيرفر: هو اللي
+     * شايف النافذة الزمنية كلها. اللمّ على العميل بيلمّ اللي وصل
+     * للتبويب ده بس — والكروت مالهاش المشكلة دي لأنها لكل تبويب أصلاً
+     * وبتعيش تواني ومحدّش بيعدّها.
+     */
+    group?: string;
+    /** حمولة الحدث — المكتبة مابتقراهاش، بتمرّرها للي بيستخدمها */
+    data?: Record<string, unknown>;
+    action?: NotificationAction;
+    /**
+     * تسكيت رسالة واحدة — `'none'` وبس.
+     *
+     * الأصل إن الصوت من النوع في السجلّ. ده للاستثناء: نفس النوع بيوصل
+     * صامت في استيراد بالجملة مثلاً. مفيش قيمة تانية — النغمة مش
+     * قابلة للتبديل من الرسالة.
+     */
+    sound?: 'none';
+}
+/**
+ * الرسالة بعد التحقّق — دي اللي المكوّنات بتشتغل عليها.
+ *
+ * الفرق عن `NotificationJSON`: التاريخ بقى `Date`، والاختياري اتملى
+ * بافتراضياته. فمفيش مكوّن بيعمل `?? 'normal'` ولا `new Date(...)`
+ * تاني — التطبيع بيحصل مرّة على الحدود.
+ */
+interface Notification {
+    v: number;
+    id: string;
+    kind: string;
+    at: Date;
+    title: string;
+    body?: string;
+    /** وقت القراية — `null` يعني غير مقروء */
+    readAt: Date | null;
+    /** اختصار لـ`readAt !== null` — محسوب، مش مخزّن */
+    read: boolean;
+    priority: NotificationPriority;
+    group?: string;
+    data: Record<string, unknown>;
+    action?: NotificationAction;
+    sound?: 'none';
+}
+/**
+ * دالة الترجمة — من نظام المشروع، مش من المكتبة.
+ *
+ * ── ليه المكتبة مابتترجمش بنفسها ────────────────────────────────────────
+ * أول تنفيذ كان `locale.startsWith('ar') ? '…' : '…'` جوّه السجلّ. ده
+ * بيمشي لنوعين وبيقع عند التاني عشر:
+ *
+ *   · النصوص بتبقى مدفونة في كود، فالمترجم مايقدرش يلمسها
+ *   · المثنّى والجمع العربي (طلب · طلبين · ٣ طلبات) مستحيل بـ`startsWith`
+ *   · ولو المشروع عنده نظام ترجمة، ده بيعمل نظام تاني جنبه
+ *
+ * فالمكتبة بتملك **نقطة التعليق** مش الترجمة: بتنادي `t` بمفتاح وقيم،
+ * و`t` بتيجي من `NotificationProvider`. النصوص بتفضل في الكتالوج،
+ * والجمع شغل النظام المتخصّص فيه، والمكتبة تفضل مش عارفة لغة إيه —
+ * زي ما هي مش عارفة `order.created` يعني إيه.
+ */
+type NotificationTranslate = (key: string, vars?: Record<string, unknown>) => ReactNode;
+/**
+ * صوت النوع — نغمة واحدة أو سكوت.
+ *
+ * `notify` هي نغمة الإشعارات الوحيدة، مضمّنة كـdata URI في `chime.ts`
+ * فمفيش ملف يتنسخ ولا مسار يتكسر لما المكتبة تتنقل لمشروع تاني.
+ * و`none` بتسكّت النوع كله — للي بيتقرا ومابيستاهلش مقاطعة.
+ *
+ * والنغمة نفسها **مش قابلة للتبديل**: هي جزء من هوية قمرة زي اللون
+ * والخط. اللي المشروع بيقرّره هو أنهي نوع يرنّ وأنهي نوع يعدّي صامت.
+ */
+type NotificationSoundName = 'notify' | 'none';
+/**
+ * تعريف نوع إشعار — الربط بين اسم الحدث وشكله وصوته.
+ *
+ * ده اللي بيخلّي النظام ينفع لأكتر من مشروع: المكتبة مابتعرفش
+ * `order.created` يعني إيه، بتعرف تقرا السجلّ. والمشروع بيسجّل
+ * أنواعه هو.
+ */
+interface NotificationKind {
+    /** اسم الحدث زي ما بيجي من السيرفر — `order.created` */
+    kind: string;
+    /** اسم مقروء — بيظهر في إعدادات الإشعارات والفلترة */
+    label: string;
+    icon: ComponentType<{
+        size?: number;
+        strokeWidth?: number;
+    }>;
+    /**
+     * نغمة الحالة — والافتراضي محايد عن قصد.
+     *
+     * دي بتقول «الحاجة دي مقلقة» مش «دي من قسم الطلبات». لو كل نوع خد
+     * لون، الصندوق بيبقى قوس قزح والعاجل بيتوّه فيه.
+     */
+    tone?: Tone;
+    /** أولوية النوع لو الرسالة ما حدّدتش */
+    priority?: NotificationPriority;
+    /**
+     * النوع ده يرنّ ولا لأ — الافتراضي `notify`.
+     *
+     * ده القرار الوحيد المتاح في الصوت، وهو قرار منتج مش هوية:
+     * «تحديث تطبيق» مايستاهلش مقاطعة، «فشل تحصيل» يستاهل. النغمة
+     * نفسها والعلوّ والإيقاع ثوابت في المكتبة.
+     */
+    sound?: NotificationSoundName;
+    /**
+     * بناء العنوان من `data` بدل نصّ السيرفر — **اختياري**.
+     *
+     * ── المشكلة اللي بيحلّها ────────────────────────────────────────────
+     * `title` بيتخزّن باللغة اللي كانت وقت الإرسال. التاجر بيبدّل اللغة،
+     * وبيلاقي إشعارات الشهر اللي فات لسه بالقديمة. ده بيحصل في قمرة
+     * فعلاً — التطبيقات عربي وإنجليزي.
+     *
+     * ── وليه اختياري مش الافتراضي ───────────────────────────────────────
+     * لو كل الأنواع بترسم على العميل، تصليح صياغة أو غلطة إملائية بيبقى
+     * محتاج **نشر فرونت**. دلوقتي ده تعديل على السيرفر بيوصل فورًا.
+     * فالنوع اللي عنده قالب بيترجم، واللي مالوش بياخد نصّ السيرفر —
+     * وتتبنّاها نوع نوع للي يستاهل.
+     *
+     * والنوع المش مسجّل بيفضل شغّال بنصّ السيرفر، فالباك إند ينشر نوع
+     * جديد من غير ما يستنّى الفرونت.
+     *
+     * ── والقالب بينادي `t` مابيترجمش ────────────────────────────────────
+     * المفتاح والقيم بس. النصّ في كتالوج مشروعك، والجمع والتشكيل شغل
+     * نظام الترجمة عندك.
+     *
+     * ولو المشروع ما مرّرش `t` للمزوّد، القالب **بيتجاهل** ونصّ السيرفر
+     * بيتعرض — أأمن من مفتاح خام قدّام التاجر.
+     *
+     * @example
+     * {
+     *   kind: 'order.created',
+     *   title: (n, t) => t('notif.order.created', { id: n.data.orderId }),
+     * }
+     */
+    title?: (n: Notification, t: NotificationTranslate) => ReactNode;
+    /** نفس فكرة `title` للنصّ التحته */
+    body?: (n: Notification, t: NotificationTranslate) => ReactNode;
+}
+/**
+ * النوع بعد الحلّ — الشكل والصوت مضمونين، والقوالب لأ.
+ *
+ * غياب `title`/`body` **معنى** مش نقص: يعني «خد نصّ السيرفر». فمفيش
+ * افتراضي يتحطّ لهم، ولو اتحطّ كان هيدوس على نصّ جاي من السيرفر بنصّ
+ * فاضي.
+ */
+interface ResolvedKind extends Required<Omit<NotificationKind, 'title' | 'body'>> {
+    title?: NotificationKind['title'];
+    body?: NotificationKind['body'];
+    /** النوع ده مش مسجّل، والقيم دي من الاحتياطي */
+    unknown: boolean;
+}
+interface NotificationKindRegistry {
+    /** بيرجّع النوع، ولو مش مسجّل بيرجّع الاحتياطي بـ`unknown: true` */
+    get: (kind: string) => ResolvedKind;
+    /** كل الأنواع المسجّلة — لشاشة إعدادات الإشعارات */
+    list: () => ResolvedKind[];
+    has: (kind: string) => boolean;
+}
+
+type NotificationParseResult = {
+    ok: true;
+    value: Notification;
+    warnings: string[];
+} | {
+    ok: false;
+    issues: string[];
+};
+interface NotificationBatch {
+    items: Notification[];
+    /** اللي اتعزل — الرسالة الخام وسبب الرفض، عشان يتسجّل مش يتبلع */
+    rejected: {
+        raw: unknown;
+        issues: string[];
+    }[];
+    /** تحذيرات على رسايل عدّت — حقل اتجاهل، إصدار أحدث */
+    warnings: string[];
+}
+/**
+ * بيحقّق رسالة واحدة ويطبّعها.
+ *
+ * المطلوب: `id` و`kind` و`at` و`title`. الباقي بياخد افتراضي.
+ * `at` لازم يكون تاريخ ISO مقروء — الرقم أو النص المكسور بيترفض، لأن
+ * `Invalid Date` بيعدّي صامت وبيطلع «NaN من كذا دقيقة» في الواجهة.
+ */
+interface ParseOptions {
+    /**
+     * سجلّ الأنواع — منه بييجي افتراضي الأولوية لما الرسالة ما تحدّدش.
+     *
+     * من غيره الرسالة اللي مافيهاش `priority` بتاخد `normal` مهما كان
+     * نوعها — يعني `payment.failed` المسجّل `critical` بيوصل عادي،
+     * والسجلّ بيبقى زينة. وده بيكسر أساس النظام: المكتبة مابتعرفش
+     * `order.created` يعني إيه، بتعرف تقرا السجلّ.
+     */
+    kinds?: NotificationKindRegistry;
+}
+declare function parseNotification(raw: unknown, options?: ParseOptions): NotificationParseResult;
+/**
+ * بيحقّق دفعة ويعزل الوحش.
+ *
+ * بيقبل مصفوفة، أو نص JSON، أو كائن فيه `items`/`notifications` —
+ * التلات أشكال اللي الـAPIs بتبعت بيهم. وبيرتّب بالأحدث، وبيلغّي
+ * تكرار الـ`id` (آخر نسخة بتكسب: التحديث بيوصل بنفس المعرّف).
+ */
+declare function parseNotifications(raw: unknown, options?: ParseOptions): NotificationBatch;
+/**
+ * بيرجّع الرسالة لصيغتها على السلك — للتخزين أو إعادة الإرسال.
+ *
+ * عكس `parseNotification` بالظبط: `parse(serialize(n))` بيدّي `n`.
+ * لازم يفضل كده، وإلا الرسالة اللي اتخزّنت مابترجعش زي ما دخلت.
+ */
+declare function serializeNotification(n: Notification): NotificationJSON;
+
+/**
+ * بينشئ سجلّ أنواع.
+ *
+ * @param kinds الأنواع المسجّلة
+ * @param fallback تجاوز الشكل الاحتياطي للنوع المش معروف
+ *
+ * @example
+ * const KINDS = createKindRegistry([
+ *   { kind: 'ticket.assigned', label: 'تذكرة', icon: Ticket, priority: 'critical' },
+ * ])
+ * KINDS.get('ticket.assigned').icon      // Ticket
+ * KINDS.get('حاجة.غريبة').unknown        // true
+ */
+declare function createKindRegistry(kinds: NotificationKind[], fallback?: Partial<Omit<ResolvedKind, 'kind' | 'unknown'>>): NotificationKindRegistry;
+/**
+ * أنواع التجارة الإلكترونية — طقم جاهز لمنتجات قمرة.
+ *
+ * ده **مثال مسجّل** مش جزء من العقد. المشروع التاني بيبني سجلّه
+ * بـ`createKindRegistry` ومابياخدش الطقم ده.
+ *
+ * ── واللون هنا استثناء مش قاعدة ─────────────────────────────────────────
+ * أربعة بس من اتناشر ليهم نغمة: فشل الدفع والمخزون الخالص والطلب
+ * المتعثّر والمرتجع. الباقي محايد. لو كل نوع خد لونه، مافيش حاجة
+ * بتتشاف قبل حاجة — واللون بيبطّل يعني حالة.
+ *
+ * ── و`critical` تلاتة بس ────────────────────────────────────────────────
+ * القاعدة: نزيف **مستمرّ لحد ما حد يتصرّف**. فشل التحصيل والمخزون
+ * الخالص والطلب المتعثّر بيكلّفوا كل يوم بيعدّي؛ المرتجع حصل وخلاص.
+ * والفرق مش أكاديمي: `critical` مابتتمسحش بـ«تعليم الكل»، فلو اتوسّعت
+ * الحماية بتبقى ضجيج مالوش مفتاح إطفاء.
+ *
+ * ── والقوالب على اتنين بس ───────────────────────────────────────────────
+ * `order.created` و`payout.sent` عندهم قالب بينادي `t` بمفتاح وقيم،
+ * فبيترجموا من كتالوج المشروع. الباقي بياخد نصّ السيرفر — عشان تصليح
+ * صياغة يفضل تعديل سيرفر بيوصل فورًا مش نشر فرونت.
+ *
+ * ومن غير `t` على المزوّد، القوالب بتتجاهل والكل بياخد نصّ السيرفر.
+ *
+ * ── والصوت واحد أو ولا حاجة ─────────────────────────────────────────────
+ * النغمة نفسها لكل نوع بيستاهل مقاطعة، و`none` للي بيتقرا ومابيستاهلش:
+ * تحديث تطبيق وملخّص المجتمع. نغمات متعدّدة بتفترض إن التاجر هيحفظ
+ * إن النازلة يعني دفع فشل — وده مابيحصلش، بيسمع رنّة فبيبصّ.
+ * والإلحاح بيتقال بالعلوّ: `critical` بتعلى ٣٥٪.
+ */
+declare const QUMRA_KINDS: NotificationKind[];
+/** سجلّ قمرة جاهز — `QUMRA_NOTIFICATIONS.get('order.created')` */
+declare const QUMRA_NOTIFICATIONS: NotificationKindRegistry;
+
+/** الصوت الوحيد في المكتبة — `none` بتسكّت النوع */
+declare const NOTIFICATION_SOUNDS: Exclude<NotificationSoundName, 'none'>[];
+interface UseNotificationSoundOptions {
+    /** سجلّ الأنواع — منه بييجي صوت كل نوع (`notify` أو `none`) */
+    kinds: NotificationKindRegistry;
+}
+interface NotificationSoundApi {
+    /** الصوت اتفكّ وجاهز — قبلها أي `play` بتتبلع */
+    ready: boolean;
+    muted: boolean;
+    setMuted: (muted: boolean) => void;
+    /**
+     * بيفكّ الصوت — **لازم من معالج حدث مستخدم حقيقي**.
+     *
+     * بتتنادى لوحدها على أول ضغطة لو `autoUnlock`. النداء اليدوي لزرار
+     * «شغّل الصوت» في الإعدادات.
+     */
+    unlock: () => Promise<boolean>;
+    /** بيرنّ حسب النوع — بيحترم الكتم والحدّ الأدنى والأولوية */
+    play: (n: Notification) => void;
+    /** بيرنّ حالاً — لزرار «جرّب الصوت» في الإعدادات */
+    preview: () => void;
+}
+declare function useNotificationSound({ kinds }: UseNotificationSoundOptions): NotificationSoundApi;
+
+interface NotificationsApi {
+    /** كل الرسايل، الأحدث الأول */
+    items: Notification[];
+    /** عدد غير المقروء — ده اللي الجرس بيعرضه */
+    unread: number;
+    /**
+     * غير المقروء اللي «تعليم الكل» مش بيمسحه — الحرج.
+     *
+     * مفصول عن `unread` عن قصد: بعد «تعليم الكل» العدّاد بينزل لكن
+     * مش لصفر، وده بيتقرا عطل لو مافيش رقم تاني بيفسّره. والفصل بيسمح
+     * بوزن بصري مختلف — نقطة حمرا مابتروحش أبداً بترجّع نفس الضغط
+     * اللي بيخلّي التاجر يطفّي الإشعارات.
+     */
+    needsAction: number;
+    /** الوارد لسه — اللي الكروت الطايرة بتعرضه */
+    arrivals: Notification[];
+    /** المرفوض من آخر `hydrate`/`receive` — للتسجيل مش للعرض */
+    rejected: NotificationBatch['rejected'];
+    /**
+     * بيحمّل الموجود من قبل — **صامت وإضافي**.
+     *
+     * بيضيف ويحدّث ومابيشيلش. ده نداء أول تحميل، وتحميل صفحة تانية،
+     * وأي دفعة قديمة.
+     */
+    hydrate: (raw: unknown) => NotificationBatch;
+    /**
+     * مزامنة — **صامتة وبتشيل**.
+     *
+     * زي `hydrate` بس بتشيل كمان اللي السيرفر مابعتوش، **جوّه المدى
+     * الزمني اللي الدفعة بتغطّيه وبس**. فمزامنة الصفحة الأولى مابتمسحش
+     * الصفحات اللي تحتها.
+     */
+    sync: (raw: unknown) => NotificationBatch;
+    /**
+     * بيستقبل وارد جديد — بيرنّ وبيطلع طاير.
+     *
+     * بياخد رسالة واحدة أو دفعة. الرسالة المرفوضة بتتعزل ومابتوقّعش
+     * الباقي.
+     */
+    receive: (raw: unknown) => NotificationBatch;
+    /**
+     * إشعار محلّي من غير سيرفر — بيملى `id` و`at` و`v` لوحده.
+     *
+     * للأفعال اللي التطبيق بيعرف نتيجتها فوراً. بيعدّي على نفس
+     * التحقّق، فالمحلّي مابياخدش طريق جانبي.
+     */
+    push: (input: Omit<NotificationJSON, 'id' | 'at' | 'v'> & {
+        id?: string;
+        at?: string;
+    }) => string | null;
+    markRead: (id: string) => void;
+    markAllRead: () => void;
+    /**
+     * رجّعهم غير مقروئين — للتراجع، ولزرار «علّمه كغير مقروء».
+     *
+     * فعل باسمه زي باقي الـAPI (`dismiss` · `markAllRead` · `sync`)
+     * بدل `setRead(ids, false)`: العلَم البوليان بيخلّي مكان النداء
+     * يحتاج قراية التوقيع عشان يتفهم.
+     */
+    markUnread: (ids: string[]) => void;
+    /** بيلغي شاهد الشيل وبيرجّع الرسالة — للتراجع لما السيرفر يرفض */
+    restore: (n: Notification) => void;
+    /**
+     * السيرفر أكّد الشيل — الشاهد مابقاش لازم.
+     *
+     * من غيرها الشاهد بيستنّى انتهاء صلاحيته على الفاضي، والمجموعة
+     * بتكبر مع كل شيل في الجلسة.
+     */
+    confirmDismiss: (id: string) => void;
+    dismiss: (id: string) => void;
+    clearArrival: (id: string) => void;
+    clearAllArrivals: () => void;
+}
+interface UseNotificationsOptions {
+    /**
+     * سجلّ الأنواع — منه بييجي افتراضي الأولوية.
+     *
+     * من غيره أي رسالة مافيهاش `priority` بتاخد `normal`، فالنوع
+     * المسجّل `critical` بيوصل عادي و`needsAction` بتعدّ غلط.
+     */
+    kinds?: NotificationKindRegistry;
+    /** رسايل أولية — بتتحمّل صامتة زي `hydrate` */
+    initial?: unknown;
+    /** بيتنادى لكل وارد جديد اتقبل — ده مكان الصوت */
+    onReceive?: (n: Notification) => void;
+    /** بيتنادى لما رسالة تترفض — سجّلها، متبلعهاش */
+    onReject?: (rejected: NotificationBatch['rejected']) => void;
+}
+/** `critical` مابيتعلّمش مقروء بـ«تعليم الكل» — «شفته» مش «عالجته» */
+declare const isBulkReadable: (n: Notification) => boolean;
+declare function useNotifications({ kinds, initial, onReceive, onReject, }?: UseNotificationsOptions): NotificationsApi;
+
+/**
+ * تحديث تفاؤلي بتراجع.
+ *
+ * الواجهة بتتغيّر فوراً، والمزامنة بتجري. لو فشلت، `undo` بترجّع
+ * الحالة و`onError` بيقول للمستخدم — لأن التراجع الصامت أوحش من
+ * الفشل نفسه: العدّاد بيرجع يطلع والمستخدم مايعرفش ليه.
+ *
+ * `run` ممكن يرجّع `void` أو وعد، وممكن يرمي متزامن. التلات حالات
+ * بتتعامل واحد — المستدعي اللي مابيزامنش مابيدفعش تمن، واللي
+ * بيزامن مابيحتاجش يلفّ نداءه في `try`.
+ */
+declare function optimistic(run: (() => void | Promise<void>) | undefined, undo: () => void, onError?: (error: unknown) => void): void;
+interface UseNotificationCenterOptions extends UseNotificationsOptions {
+    /** سجلّ الأنواع — بيروح للصوت وبيترجّع عشان يتحطّ في المزوّد */
+    kinds: NotificationKindRegistry;
+    /**
+     * اتقرا إشعار — بالفتح أو بـ«تعليم كمقروء».
+     *
+     * ده مكان المزامنة مع السيرفر. العلامة بتتحطّ **قبل** النداء
+     * (تفاؤلياً) عشان الواجهة ما تستناش الشبكة.
+     *
+     * ── ولو السيرفر رفض ─────────────────────────────────────────────────
+     * ارمي أو رجّع وعداً بيترفض، والمكتبة بترجّع العلامة لوحدها. من
+     * غير كده الواجهة بتوعد بحاجة السيرفر مانفّذهاش: التاجر بيشوف
+     * العدّاد وقع، وبيفتح من جهاز تاني فيلاقيه زي ما هو.
+     *
+     * @example
+     * onRead: async (n) => { await api.markRead(n.id) }   // الفشل بيرجّع العلامة
+     */
+    onRead?: (n: Notification) => void | Promise<void>;
+    /** اتقرا الكل — نداء واحد بدل نداء لكل رسالة. الفشل بيرجّع الكل */
+    onReadAll?: (ids: string[]) => void | Promise<void>;
+    /** اتشال من الصندوق. الفشل بيرجّع الرسالة لمكانها */
+    onDismiss?: (n: Notification) => void | Promise<void>;
+    /**
+     * فشلت مزامنة مع السيرفر واتراجعنا — اعرض توست هنا.
+     *
+     * التراجع الصامت أوحش من الفشل نفسه: العدّاد بيرجع يطلع والمستخدم
+     * مايعرفش ليه.
+     *
+     * و`items` جوّه السياق عشان الرسالة تبقى مفيدة: «تعذّر حفظ قراية»
+     * بتسأل «قراية إيه؟»، و«تعذّر حفظ قراية ٣ إشعارات» بترد.
+     */
+    onSyncError?: (error: unknown, context: {
+        action: 'read' | 'readAll' | 'dismiss';
+        items: Notification[];
+    }) => void;
+    /**
+     * اتضغط إجراء الإشعار — الوجهة في `n.action.href`.
+     *
+     * وصّلها براوترك. الإشعار بيتعلّم مقروء لوحده قبل النداء.
+     */
+    onOpen?: (n: Notification) => void;
+}
+interface NotificationCenter extends NotificationsApi {
+    sound: NotificationSoundApi;
+    /** نفس السجلّ اللي دخل — عشان `NotificationProvider` ياخده من مصدر واحد */
+    kinds: NotificationKindRegistry;
+    /**
+     * الخصائص الجاهزة للمزوّد والأسطح — بتوصّل الفتح والقراءة لوحدها.
+     *
+     * `<NotificationProvider {...inbox.bind.provider}>` بدل ما تكتب
+     * `onAction` و`onOpen` في كل سطح.
+     */
+    bind: {
+        provider: {
+            kinds: NotificationKindRegistry;
+            onAction: (n: Notification) => void;
+        };
+        surface: {
+            items: Notification[];
+            unread: number;
+            needsAction: number;
+            sound: NotificationSoundApi;
+            onMarkAllRead: () => void;
+            onDismiss: (id: string) => void;
+            onOpen: (n: Notification) => void;
+        };
+    };
+}
+/**
+ * الحالة والصوت موصولين — نداء واحد.
+ *
+ * @example
+ * const inbox = useNotificationCenter({
+ *   kinds: QUMRA_NOTIFICATIONS,
+ *   initial: await api.notifications(),   // بيتحمّل صامت
+ * })
+ *
+ * <NotificationProvider kinds={inbox.kinds} onAction={(n) => navigate(n.action.href)}>
+ *   <NotificationMenu unread={inbox.unread} items={inbox.items} sound={inbox.sound} … />
+ *   <NotificationToastHost items={inbox.arrivals} onClose={inbox.clearArrival} />
+ * </NotificationProvider>
+ *
+ * // والوارد من السوكت — بيرنّ وبيطلع طاير
+ * socket.on('notification', inbox.receive)
+ */
+declare function useNotificationCenter({ kinds, onReceive, onRead, onReadAll, onDismiss, onOpen, onSyncError, ...rest }: UseNotificationCenterOptions): NotificationCenter;
+
+/**
+ * الوقت النسبي — «من دقيقتين»، «إمبارح»، «من ٣ شهور».
+ *
+ * أقل من نصّ دقيقة بيتقري «الآن» بدل «قبل ٣٠ ثانية»: الفرق مالوش
+ * معنى للقارئ، والرقم اللي بيتغيّر كل ثانية بيسحب العين. والنصّ من
+ * `Intl` — فبيشتغل على أي لغة من غير ما المكتبة تعرفها.
+ *
+ * @param at وقت الإشعار
+ * @param locale اللغة — الافتراضي `ar`
+ * @param now لحقن الوقت في الاختبار
+ */
+declare function formatRelativeTime(at: Date, locale?: string, now?: Date): string;
+/**
+ * كل كام يجب إعادة الرسم عشان النصّ يفضل صح.
+ *
+ * «من دقيقة» بيبقى غلط بعد دقيقة، و«من ٣ شهور» بيفضل صح لأسبوع.
+ * المؤقّت بيتظبط على دقّة الوحدة بدل ما يشتغل كل ثانية على قايمة
+ * فيها أربعين سطر.
+ */
+declare function relativeTickMs(at: Date, now?: Date): number;
+
+interface NotificationContext {
+    kinds: NotificationKindRegistry;
+    locale: string;
+    t?: NotificationTranslate;
+    onAction?: (n: Notification) => void;
+}
+interface NotificationProviderProps {
+    /** سجلّ الأنواع — الافتراضي سجلّ قمرة */
+    kinds?: NotificationKindRegistry;
+    /** لغة الوقت النسبي — الافتراضي `ar` */
+    locale?: string;
+    /**
+     * دالة الترجمة من نظام مشروعك — لقوالب عناوين الأنواع.
+     *
+     * من غيرها القوالب بتتجاهل ونصّ السيرفر بيتعرض. المكتبة مابتترجمش
+     * بنفسها: بتنادي `t(key, vars)` وبس، فالنصوص بتفضل في كتالوجك
+     * والجمع شغل نظامك.
+     */
+    t?: NotificationTranslate;
+    /**
+     * التنقّل لوجهة الإشعار.
+     *
+     * المكتبة مابتنقّلش بنفسها لأن الرسالة بتحمل `href` مش دالة.
+     * خدها من `n.action.href` ووصّلها لراوترك.
+     */
+    onAction?: (n: Notification) => void;
+    children: ReactNode;
+}
+/** بيوزّع السجلّ واللغة والتنقّل على كل الأسطح — مرّة في الجذر */
+declare function NotificationProvider({ kinds, locale, t, onAction, children, }: NotificationProviderProps): react.JSX.Element;
+declare const useNotificationContext: () => NotificationContext;
+interface NotificationBellProps {
+    unread: number;
+    /**
+     * منهم كام محتاج إجراء — بيغيّر **شكل** العدّاد مش رقمه.
+     *
+     * نقطة حمرا مابتروحش أبداً بترجّع نفس الضغط اللي بيخلّي التاجر
+     * يطفّي الإشعارات. فالعدّاد بيفضل رقم غير المقروء، والحرج بيتعلّم
+     * بحلقة حواليه — علامة تانية على نفس الرقم مش رقم تاني.
+     */
+    needsAction?: number;
+    onClick: () => void;
+    /** بيوصل لـ`aria-expanded` — الجرس اللي بيفتح لوح لازم يقولها */
+    expanded?: boolean;
+    label?: string;
+    /** «٣ غير مقروءة» — الرقم في `aria-label` مش في الشكل وحده */
+    unreadLabel?: (n: number) => string;
+    className?: string;
+}
+/**
+ * زرّ الجرس بعدّاد غير المقروء.
+ *
+ * العدّاد أحمر ومحاط بحلقة من لون الخلفية — من غيرها الرقم بيتلزق في
+ * أي أيقونة وراه وبيتقرا جزء منها. والرقم في `aria-label` كمان: قارئ
+ * الشاشة مابيشوفش الشارة، وجرس بيقول «الإشعارات» وبس بيخلّي اللي بيسمع
+ * يفتح الصندوق كل مرة عشان يعرف فيه جديد ولا لأ.
+ */
+declare function NotificationBell({ unread, needsAction, onClick, expanded, label, unreadLabel, className, }: NotificationBellProps): react.JSX.Element;
+interface NotificationRowProps {
+    item: Notification;
+    /** بيتنادى بعد فتح الوجهة — علّمه مقروء هنا */
+    onOpen?: (n: Notification) => void;
+    onDismiss?: (id: string) => void;
+    dismissLabel?: string;
+    unreadLabel?: string;
+}
+/**
+ * سطر إشعار واحد.
+ *
+ * غير المقروء بيتعلّم بحاجتين: نقطة وخطّ أتقل. اللون وحده مابيكفيش —
+ * واحد من كل اتني عشر راجل مابيفرّقش بين درجتين رماديين صغيّرين،
+ * والوزن بيتقرا بالعين مهما كان.
+ *
+ * والسطر **مش زرار كله**. الصندوق فيه سطور بتفتح وسطور بتتقري وبس،
+ * ولو السطر كله قابل للضغط اللي عايز يقرا بيدوس بالغلط ويلاقي نفسه في
+ * صفحة تانية. الإجراء زرار له اسم.
+ */
+declare function NotificationRow({ item, onOpen, onDismiss, dismissLabel, unreadLabel, }: NotificationRowProps): react.JSX.Element;
+interface NotificationListProps {
+    items: Notification[];
+    onOpen?: (n: Notification) => void;
+    onDismiss?: (id: string) => void;
+    emptyTitle?: ReactNode;
+    emptyDescription?: ReactNode;
+    className?: string;
+}
+/** القايمة نفسها — نفسها في اللوح المنسدل وفي الدرج الجانبي بالظبط */
+declare function NotificationList({ items, onOpen, onDismiss, emptyTitle, emptyDescription, className, }: NotificationListProps): react.JSX.Element;
+interface NotificationPanelProps extends NotificationListProps {
+    title?: ReactNode;
+    unread?: number;
+    /**
+     * غير المقروء اللي «تعليم الكل» مش بيمسحه.
+     *
+     * لازم يتعرض: العدّاد بينزل من ١٢ لـ٢ وبيقف، واللي مايعرفش ليه
+     * بيدوس تاني ومافيش، فبيتقرا عطل. السطر بيقول السبب مرّة واحدة.
+     */
+    needsAction?: number;
+    onMarkAllRead?: () => void;
+    markAllLabel?: string;
+    /** تذييل «عرض الكل» — من غيره الصندوق بيبقى نهاية الطريق */
+    onViewAll?: () => void;
+    viewAllLabel?: string;
+    /** زرّ كتم الصوت في الترويسة — مرّره من `useNotificationSound` */
+    sound?: {
+        muted: boolean;
+        setMuted: (m: boolean) => void;
+        ready: boolean;
+    };
+}
+/**
+ * اللوح المنسدل — صندوق الإشعارات جنب الجرس.
+ *
+ * ارتفاع القايمة محدود و**بيتمرّر جوّه**: اللوح اللي بيطول بطول القايمة
+ * بيوصل لآخر الشاشة وبيقص آخر إشعار من غير ما يبان إنه مقصوص.
+ *
+ * و«تعليم الكل كمقروء» بيختفي لما يبقى مفيش غير مقروء — زرار بيعمل لا
+ * حاجة موجود دايماً بيعلّم المستخدم إن الأزرار هنا مش بترد.
+ */
+declare function NotificationPanel({ items, title, unread, needsAction, onMarkAllRead, markAllLabel, onViewAll, viewAllLabel, sound, onOpen, onDismiss, emptyTitle, emptyDescription, className, }: NotificationPanelProps): react.JSX.Element;
+interface SoundToggleProps {
+    muted: boolean;
+    setMuted: (m: boolean) => void;
+    /** الصوت اتفكّ — قبلها الزرار بيقول إنه مقفول من المتصفّح مش من المستخدم */
+    ready: boolean;
+    className?: string;
+}
+/**
+ * كتم صوت الإشعارات.
+ *
+ * الحالة التالتة مهمة: **مش مكتوم بس المتصفّح لسه قافل**. الزرار
+ * بيقولها بدل ما يدّعي إن الصوت شغّال — والمستخدم اللي مستني رنّة
+ * مش جاية يستاهل يعرف السبب.
+ */
+declare function SoundToggle({ muted, setMuted, ready, className }: SoundToggleProps): react.JSX.Element;
+interface NotificationMenuProps extends Omit<NotificationPanelProps, 'unread'> {
+    unread: number;
+    bellLabel?: string;
+    /**
+     * الحافة اللي اللوح بيتحاذى عليها مع الجرس — الافتراضي `end`.
+     *
+     * الجرس في الشريط العلوي بيبقى ناحية `end`، فاللوح بيتمدّد ناحية
+     * `start` وبيفضل جوّه الشاشة. لو الجرس اتحرّك لازم ده يتقلب.
+     */
+    align?: 'start' | 'end';
+    /**
+     * فوق الجرس ولا تحته — الافتراضي `bottom`.
+     *
+     * الشريط السفلي على الموبايل محتاج `top`: لوح بينزل من جرس على آخر
+     * الشاشة بيطلع كله برّه.
+     */
+    side?: 'top' | 'bottom';
+    className?: string;
+}
+/**
+ * الجرس واللوح كوحدة — ده اللي الشريط العلوي بيحطّه.
+ *
+ * الإغلاق بالضغط برّه وبـEscape. والاتنين لازمين: الضغط برّه هو
+ * المتوقّع بالفأرة، وEscape هو المخرج الوحيد للي ماسك كيبورد.
+ */
+declare function NotificationMenu({ unread, bellLabel, align, side, className, onViewAll, onOpen, ...panel }: NotificationMenuProps): react.JSX.Element;
+interface NotificationDrawerProps extends NotificationListProps {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    unread?: number;
+    /** زي `NotificationPanel` — الشرح لازم يبان على الموبايل كمان */
+    needsAction?: number;
+    onMarkAllRead?: () => void;
+    markAllLabel?: string;
+    closeLabel?: string;
+}
+/**
+ * الدرج الجانبي — نفس الصندوق لكن من حافة الشاشة.
+ *
+ * ليه التنين مش واحد: اللوح المنسدل معلّق في الجرس، وعلى شاشة ٣٦٠
+ * بكسل ده يعني لوح بيغطّي الشاشة وطرفه بره الحافة. والدرج بيفتح من
+ * `inline-end` — الشمال في العربي واليمين في الإنجليزي، لوحده.
+ *
+ * والقايمة جوّاه **هي هي** بلا فرق حرف: اللي شاف إشعاراً على الديسكتوب
+ * وبصّ له على الموبايل لازم يشوف نفس السطر، وإلا بيفتكرهم اتنين.
+ */
+declare function NotificationDrawer({ open, onClose, items, title, unread, needsAction, onMarkAllRead, markAllLabel, closeLabel, onOpen, onDismiss, emptyTitle, emptyDescription, }: NotificationDrawerProps): react.JSX.Element;
+/**
+ * ركن الشاشة اللي الطاير بينزل فيه.
+ *
+ * `start`/`end` منطقية مش يمين وشمال: `end` يعني الشمال في العربي
+ * واليمين في الإنجليزي. الجرس بيقلب مكانه مع اللغة، والإشعار لازم
+ * يقلب معاه — وإلا بيجي من ناحية وبيتخزّن في ناحية تانية.
+ */
+type NotificationPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+interface NotificationToastHostProps {
+    items: Notification[];
+    onClose: (id: string) => void;
+    onOpen?: (n: Notification) => void;
+    /**
+     * الركن — الافتراضي `top-end` عشان يقع جنب الجرس.
+     *
+     * وخلّيه بعيد عن ركن `ToastHost` (`bottom-start` افتراضاً): التوست
+     * بيقول «الفعل اللي عملته حصل» والإشعار بيقول «حاجة جت من برّه»،
+     * ولو الاتنين طلعوا من نفس المكان بيتقروا طابور واحد.
+     */
+    placement?: NotificationPlacement;
+    /** عرض العمود فوق `sm` — تحتها بياخد العرض كله */
+    width?: string;
+    closeLabel?: string;
+    regionLabel?: string;
+    className?: string;
+}
+/**
+ * الإشعار الطاير — الكرت اللي بينزل لما حاجة توصل.
+ *
+ * `aria-live="polite"` مش `assertive`: الأخير بيقطع قارئ الشاشة في
+ * نصّ الجملة. الإشعار مقاطعة أصلاً، مايستاهلش يقاطع مرتين — اللي بيقرا
+ * هيسمعه لما يخلّص السطر.
+ */
+declare function NotificationToastHost({ items, onClose, onOpen, placement, width, closeLabel, regionLabel, className, }: NotificationToastHostProps): react.JSX.Element | null;
+
+export { ANIMATE_SCALE, Accordion, type AccordionItem, Alert, type Animation, type AudioLevel, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarSize, Badge, type BadgeProps, BarChart, type BarSeries, BrowserFrame, type BrowserFrameProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, COLOR_SCALE, CONTAINER_SCALE, Card, CardHeader, Carousel, type CarouselProps, type Chapter, Checkbox, ChoiceCards, type ChoiceOption, type ChoiceProps, Coach, type CoachApi, type CoachAudio, type CoachHint, type CoachItem, type CoachLine, type CoachOrb, CoachProvider, type CoachProviderProps, type CoachRegion, type CoachWhen, type CoachWhere, ColorField, type ColorToken, type Column, Combobox, type CommandItem, CommandPalette, type Container, Counter, type Currency, DARK_TOKENS, DataTable, type DataTableProps, DateRangePicker, Drawer, Dropdown, Dropzone, EmptyState, type FieldSize, FileRow, type FilterChip, FilterChips, FunnelChart, type FunnelStage, Gallery, type GalleryImage, type GalleryProps, GoalBar, Heatmap, Input, type InputProps, Lightbox, type LightboxProps, LocaleCtx, type MediaState, Modal, Money, type MoneyProps, MoneyProvider, MultiSelect, NOTIFICATION_PRIORITIES, NOTIFICATION_SCHEMA_VERSION, NOTIFICATION_SOUNDS, type Notification, type NotificationAction, type NotificationBatch, NotificationBell, type NotificationBellProps, type NotificationCenter, NotificationDrawer, type NotificationDrawerProps, type NotificationJSON, type NotificationKind, type NotificationKindRegistry, NotificationList, type NotificationListProps, NotificationMenu, type NotificationMenuProps, NotificationPanel, type NotificationPanelProps, type NotificationParseResult, type NotificationPlacement, type NotificationPriority, NotificationProvider, type NotificationProviderProps, NotificationRow, type NotificationRowProps, type NotificationSoundApi, type NotificationSoundName, NotificationToastHost, type NotificationToastHostProps, type NotificationTranslate, type NotificationsApi, NumberStepper, type NumberStepperProps, type Option, PROVIDER_LEVEL_LABEL, PROVIDER_LEVEL_LABEL_EN, PageHeader, ParetoChart, type ParetoItem, type ParseOptions, Phone, type PhoneFormat, type PhoneParts, type PhoneProps, Product3DViewer, type Product3DViewerProps, Progress, ProviderBadge, type ProviderBadgeProps, type ProviderBadgeSize, type ProviderLevel, ProviderMark, type ProviderMarkProps, QUMRA_KINDS, QUMRA_NOTIFICATIONS, RADIUS_SCALE, Radio, RadioGroup, type Radius, type Range, RatingInput, type RatingInputProps, type ResolvedKind, type RunwayItem, SHADOW_SCALE, Scrubber, SearchInput, Select, type SelectProps, type Shadow, type ShareItem, ShareList, Sheet, Skeleton, type SortableApi, type SortableItemProps, SortableStatus, SoundToggle, type SoundToggleProps, Sparkline, Stars, type StarsProps, StatCard, type StatCardProps, Stepper, type StepperStep, StockRunway, Switch, type SymbolStyle, TEXT_SCALE, TOKENS, TONE_SOFT, TONE_SOLID, type TabItem, Tabs, TechnicalInput, type TechnicalInputProps, type TechnicalKind, TechnicalText, type TextSize, Textarea, type TextareaProps, Timeline, type TimelineStep, Toast, ToastHost, type ToastInput, type ToastItem, type ToastTone, type TokenName, type Tone, Tooltip, TrendChart, type UITextKey, type UploadFile, type UploadState, type UseNotificationCenterOptions, type UseNotificationSoundOptions, type UseNotificationsOptions, type UseSortableOptions, VerifiedBadge, type VerifiedBadgeProps, VideoPlayer, type VideoPlayerProps, type VideoSuggestion, WaterfallChart, type WaterfallStep, WhatsAppIcon, buttonClasses, cn, coachSeconds, createKindRegistry, currencyName, currencySymbol, daysBetween, formatBytes, formatDate, formatRange, formatRelativeTime, formatTime, isBulkReadable, isCurrency, normalizeHex, optimistic, parseNotification, parseNotifications, parsePhone, presets, relativeTickMs, serializeNotification, toLatinDigits, useAudioLevel, useCoach, useCoachOptional, useCurrency, useCurrencySymbol, useMedia, useMoneyLang, useMoneyLocale, useNotificationCenter, useNotificationContext, useNotificationSound, useNotifications, useSortable, useToasts, useUIText };