{Array.from({ length: bars }).map((_, i) => { const h = 30 + Math.abs(Math.sin(i * 0.6 + seed)) * 70; return (

); })}

); } // Folk icon set — drawn in the spirit of Tunis-village pottery glyphs // and Sinai Bedouin tattoo motifs. Block-print fills, slightly irregular // strokes, dotted ornament — nothing geometrically perfect. // // Visual DNA: // • two-dot or three-dot ornament beside the main shape // • mixed fill + stroke (not pure outline) // • palmette / fan / crescent / oasis vocabulary // • thicker hand-cut lines (1.6–2.0) // • warm strokeLinecap "round" function Icon({ name, size = 22, color = "currentColor", strokeWidth = 1.6 }) { const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }; const f = { ...p, fill: color }; // tiny dot ornament const dots = (cx, cy, n = 2, r = 0.7) => Array.from({ length: n }, (_, i) => ( )); switch (name) { // SUN — desert sun: filled disk with hand-cut rays + two dots case "sun": return ( ); // DROP — water-jar drop with a notch (qulla glyph) case "drop": return ( ); // NO-WATER — drop crossed with bedouin-style x case "no-water": return ( ); // HAND — khamsa (hand of fatima): palm + thumb, dot in center case "hand": return ( ); // LEAF — palm frond (sa'af) with central spine and side blades case "leaf": return ( ); // FIRE — kiln flame, three tongues case "fire": return ( ); // FEATHER — Ma'at feather (Egyptian symbol of truth/balance) case "feather": return ( ); // WAX — wax-seal disc with star imprint case "wax": return ( ); // BOX — woven crate / qaffa basket with weave lines case "box": return ( ); // TRUCK — replaced with CAMEL silhouette (carrying baskets) case "truck": return ( ); // PLAY — palmette-style triangle with dot case "play": return ( ); // PAUSE — two upright wedges (like minarets) case "pause": return ( ); // SEARCH — eye (Eye of Horus simplified, no extras) case "search": return ( ); // GIFT — wrapped bundle (sorra) with knot on top case "gift": return ( ); // PIN — palm tree on a hill (oasis marker) case "pin": return ( ); // LOCK — keyhole shaped like a teardrop, with two dots case "lock": return ( ); // CHECK — block-print check, slightly off-axis case "check": return ( ); // THERMO — kiln thermometer with notches case "thermo": return ( ); // CALENDAR — moon-phase strip (Hijri-feel) case "calendar": return ( ); // SCISSORS — shears with handle dots case "scissors": return ( ); // MOON — crescent (hilal) with star case "moon": return ( ); // —— additional folk icons (new) —— // EYE-OF-HORUS — for "view / details" case "eye": return ( ); // BASKET — qaffa (palm-fibre basket, account icon replacement) case "basket": return ( ); // STAR — eight-point star (najma) case "star": return ( ); // CAMEL — for shipping case "camel": return ( ); // PALM — single date palm (small, for footer / oasis chips) case "palm": return ( ); // OASIS — date palm + water dot (for shipping/pickup origin) case "oasis": return ( ); // KNOT — bedouin braid knot (for "close / cancel") case "knot": return ( ); // ARROW-RIGHT — hand-drawn arrow (folk, slightly waving) case "arrow": return ( ); // CUP — coffee/karkade cup (for hospitality / tea section) case "cup": return ( ); default: return null; } } // Editorial section break — Egyptian/Arabic proverb with translation, // flanked by shamsiyat. Use sparingly between major sections. function ProverbBreak({ ar, en, attribution = null, tone = "paper" }) { return (

« {ar} »

“{en}”

{attribution && (

— {attribution}

)}

); } // ════════════════════════════════════════════════════════════════════════ // BRAND FORM CONTROLS // Shared, reusable, bilingual + RTL-correct replacements for native form // controls (select, date/datetime, file) and alert(). Other UI files import // these off `window` — see the API doc returned with this change. // Styles live in styles.css §20. Everything is logical-property driven so it // mirrors automatically in RTL; pass `dir`/`lang` for text + chevron mirror. // ════════════════════════════════════════════════════════════════════════ // Small inline chevron used by BrandSelect (kept local so primitives has no // hard dependency on a specific Icon glyph for this control). function BfChevron({ size = 14 }) { return ( ); } function BfCalendar({ size = 18 }) { // reuse the folk calendar glyph for brand consistency return ; } // ── window.BrandSelect ────────────────────────────────────────────────── // A fully custom dropdown (button + listbox) so the OPTION LIST is brand // styled too. Keyboard accessible (↑/↓/Home/End/Enter/Esc/type-ahead), // focus-visible terracotta ring, paper surface, RTL-correct. // // Props: // value — currently selected option value (string|number) // onChange — (value) => void · receives the raw option `value` // options — [{ value, label, disabled? }] // placeholder — shown when no value selected (string) // lang — "en" | "ar" (defaults to if omitted) // dir — "ltr" | "rtl" (defaults from lang) // disabled — boolean // ariaLabel — accessible name for the trigger (string) // id, name — optional pass-throughs function BrandSelect({ value, onChange, options = [], placeholder, lang, dir, disabled = false, ariaLabel, id, name, style, }) { const _lang = lang || (typeof document !== "undefined" ? document.documentElement.lang : "en") || "en"; const _dir = dir || (_lang === "ar" ? "rtl" : "ltr"); const ph = placeholder != null ? placeholder : (_lang === "ar" ? "اختر…" : "Select…"); const [open, setOpen] = React.useState(false); const [active, setActive] = React.useState(-1); // keyboard-highlighted index const [up, setUp] = React.useState(false); const rootRef = React.useRef(null); const triggerRef = React.useRef(null); const listRef = React.useRef(null); const typeahead = React.useRef({ str: "", t: 0 }); const selectedIdx = options.findIndex(o => String(o.value) === String(value)); const selectedLabel = selectedIdx >= 0 ? options[selectedIdx].label : null; // Close on outside click / Esc React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, [open]); // Decide open direction + seed the active row when opening const openList = () => { if (disabled) return; const r = triggerRef.current && triggerRef.current.getBoundingClientRect(); if (r) setUp((window.innerHeight - r.bottom) < 240 && r.top > 240); setActive(selectedIdx >= 0 ? selectedIdx : firstEnabled()); setOpen(true); }; const firstEnabled = () => options.findIndex(o => !o.disabled); const lastEnabled = () => { for (let i = options.length - 1; i >= 0; i--) if (!options[i].disabled) return i; return -1; }; const nextEnabled = (from, step) => { let i = from; for (let n = 0; n < options.length; n++) { i = (i + step + options.length) % options.length; if (!options[i].disabled) return i; } return from; }; const choose = (idx) => { const o = options[idx]; if (!o || o.disabled) return; onChange && onChange(o.value); setOpen(false); triggerRef.current && triggerRef.current.focus(); }; // keep active row scrolled into view React.useEffect(() => { if (!open || active < 0 || !listRef.current) return; const el = listRef.current.children[active]; if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" }); }, [active, open]); const onKeyDown = (e) => { if (disabled) return; if (!open) { if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) { e.preventDefault(); openList(); } return; } switch (e.key) { case "Escape": e.preventDefault(); setOpen(false); triggerRef.current && triggerRef.current.focus(); break; case "ArrowDown": e.preventDefault(); setActive(a => nextEnabled(a < 0 ? -1 : a, 1)); break; case "ArrowUp": e.preventDefault(); setActive(a => nextEnabled(a < 0 ? 0 : a, -1)); break; case "Home": e.preventDefault(); setActive(firstEnabled()); break; case "End": e.preventDefault(); setActive(lastEnabled()); break; case "Enter": case " ": e.preventDefault(); choose(active); break; case "Tab": setOpen(false); break; default: // type-ahead if (e.key.length === 1) { const now = Date.now(); typeahead.current.str = (now - typeahead.current.t < 700 ? typeahead.current.str : "") + e.key.toLowerCase(); typeahead.current.t = now; const hit = options.findIndex(o => !o.disabled && String(o.label).toLowerCase().startsWith(typeahead.current.str)); if (hit >= 0) setActive(hit); } } }; const listId = (id || name || "bsel") + "-list"; return (

{open && ( )}

); } // ── window.BrandDate / window.BrandDateTime ───────────────────────────── // A brand-styled, locale-aware date (or datetime) control that NEVER shows a // raw mm/dd/yyyy. A real is layered // transparently on top (so the native picker + keyboard still work) while a // localized formatted value renders beneath via fmtDate/fmtDateTime. // // Props: // value — "" | "yyyy-mm-dd" (date) // "" | "yyyy-mm-ddThh:mm" (datetime, withTime) // onChange — (value) => void · emits the SAME format above (or "" when cleared) // withTime — boolean → datetime-local instead of date // lang, dir — locale + direction (default from ) // min, max — native bounds, same format as value // placeholder — empty-state text (defaults bilingual) // ariaLabel — accessible name // disabled — boolean // id, name — pass-throughs function BrandDate({ value, onChange, withTime = false, lang, dir, min, max, placeholder, ariaLabel, disabled = false, id, name, style, }) { const _lang = lang || (typeof document !== "undefined" ? document.documentElement.lang : "en") || "en"; const _dir = dir || (_lang === "ar" ? "rtl" : "ltr"); const ph = placeholder != null ? placeholder : (_lang === "ar" ? (withTime ? "اختر التاريخ والوقت" : "اختر تاريخًا") : (withTime ? "Pick date & time" : "Pick a date")); // The native needs a parseable value. date → yyyy-mm-dd as-is; // datetime-local → yyyy-mm-ddThh:mm as-is. We pass value through unchanged. const nativeType = withTime ? "datetime-local" : "date"; // Localized display. For datetime we feed an ISO-ish string to fmtDateTime; // datetime-local has no zone so we treat it as local wall-clock. let display = null; if (value) { display = withTime ? (window.fmtDateTime ? window.fmtDateTime(value, _lang, { day: "numeric", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit" }) : value) : (window.fmtDate ? window.fmtDate(value, _lang, { day: "numeric", month: "long", year: "numeric" }) : value); } return (

onChange && onChange(e.target.value)} />

); } function BrandDateTime(props) { return ; } // ── window.BrandFileDrop / window.BrandFileInput ──────────────────────── // A styled upload affordance: dashed paper dropzone + bilingual label + // custom button, wrapping a hidden . Drag-and-drop aware, // shows selected filenames, RTL-correct. // // IMPORTANT: this component only surfaces the chosen File objects via // `onFiles`. It does NOT upload. Callers keep their own storage-path / // getPublicUrl logic — never store full URLs. // // Props: // onFiles — (FileList-as-Array) => void · the chosen File[] // accept — input accept string (e.g. "image/jpeg,image/png") // multiple — boolean // lang, dir — locale + direction (default from ) // label — primary line override (string); defaults bilingual // hint — secondary line (e.g. "JPEG · PNG — up to 8 MB") // disabled — boolean // showList — show the selected-file list (default true) // ariaLabel — accessible name for the hidden input // id, name — pass-throughs function BrandFileDrop({ onFiles, accept, multiple = false, lang, dir, label, hint, disabled = false, showList = true, ariaLabel, id, name, style, }) { const _lang = lang || (typeof document !== "undefined" ? document.documentElement.lang : "en") || "en"; const _dir = dir || (_lang === "ar" ? "rtl" : "ltr"); const inputRef = React.useRef(null); const [drag, setDrag] = React.useState(false); const [files, setFiles] = React.useState([]); const primary = label != null ? label : (_lang === "ar" ? (multiple ? "اسحب الصور هنا، أو اختر من جهازك" : "اسحب الصورة هنا، أو اختر من جهازك") : (multiple ? "Drag images here, or choose from your device" : "Drag an image here, or choose from your device")); const cta = _lang === "ar" ? "اختر ملفًا" : "Choose file"; const fmtSize = (b) => { if (b < 1024) return b + " B"; if (b < 1024 * 1024) return (b / 1024).toFixed(0) + " KB"; return (b / 1024 / 1024).toFixed(1) + " MB"; }; const emit = (list) => { const arr = Array.from(list || []); setFiles(arr); onFiles && onFiles(arr); }; const onInput = (e) => emit(e.target.files); const onDrop = (e) => { e.preventDefault(); setDrag(false); if (disabled) return; emit(e.dataTransfer.files); }; const openPicker = () => { if (!disabled && inputRef.current) inputRef.current.click(); }; const removeAt = (i) => { const next = files.filter((_, j) => j !== i); setFiles(next); onFiles && onFiles(next); if (inputRef.current) inputRef.current.value = ""; }; return (

{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openPicker(); } }} onDragOver={(e) => { e.preventDefault(); if (!disabled) setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={onDrop} > {primary} {hint && {hint}} {cta} +

{showList && files.length > 0 && (

{f.name} {fmtSize(f.size)}

)}

); } // ── window.toast(message, { type, lang, duration }) ───────────────────── // Minimal, brand-styled, RTL-aware, auto-dismiss toast. Imperative API so it // can replace alert() anywhere (inside or outside React). Stacks; each toast // auto-dismisses. Returns a dismiss() function. // type — "info" (default) | "success" | "error" // lang — "en" | "ar" (only affects font/dir of the toast; default ) // duration — ms before auto-dismiss (default 3600; 0 = sticky) const toast = (function () { let host = null; const ensureHost = () => { if (host && document.body.contains(host)) return host; host = document.createElement("div"); host.className = "bf-toast-host"; host.setAttribute("role", "status"); host.setAttribute("aria-live", "polite"); document.body.appendChild(host); return host; }; return function toast(message, opts = {}) { const { type = "info", lang, duration = 3600 } = opts; const _lang = lang || (typeof document !== "undefined" ? document.documentElement.lang : "en") || "en"; const _dir = _lang === "ar" ? "rtl" : "ltr"; const h = ensureHost(); const el = document.createElement("div"); el.className = "bf-toast " + (type || "info") + (_lang === "ar" ? " ar" : ""); el.setAttribute("dir", _dir); const iconName = type === "success" ? "check" : type === "error" ? "knot" : "star"; el.innerHTML = '' + ''; // render the folk icon as inline SVG via a tiny React-free draw el.querySelector(".bf-toast-text").textContent = message == null ? "" : String(message); // simple SVG glyphs (avoid pulling React render into an imperative API) const glyphs = { check: '', knot: '', star: '', }; el.querySelector(".bf-toast-icon").innerHTML = glyphs[iconName] || glyphs.star; h.appendChild(el); let done = false; const dismiss = () => { if (done) return; done = true; el.classList.add("out"); el.addEventListener("animationend", () => { if (el.parentNode) el.parentNode.removeChild(el); }, { once: true }); // safety removal in case animationend doesn't fire setTimeout(() => { if (el.parentNode) el.parentNode.removeChild(el); }, 400); }; el.addEventListener("click", dismiss); if (duration > 0) setTimeout(dismiss, duration); return dismiss; }; })(); Object.assign(window, { Star8, ArabesqueStrip, GeoPatternBg, ArabicCalligraphyBg, DiagonalLinesBg, Placeholder, BiLabel, Wordmark, Shamsiya, QrMark, WaxSeal, Waveform, Icon, ProverbBreak, IconGalleryPage, BrandSelect, BrandDate, BrandDateTime, BrandFileDrop, BrandFileInput: BrandFileDrop, toast, }); // Folk-icon gallery page — for review at #/icons function IconGalleryPage({ lang = "en" }) { const groups = [ { h: "Care & material", ar: "العناية والخامات", icons: [ { n: "sun", l: "Sun-dry", a: "تجفّفه الشمس" }, { n: "moon", l: "Hand-wash cool", a: "غسيل بارد" }, { n: "drop", l: "Damp cloth", a: "قماشة مبلولة" }, { n: "no-water", l: "No water", a: "بدون ماء" }, { n: "fire", l: "Kiln-fired", a: "محروق بفرن" }, { n: "thermo", l: "Heat 1180°", a: "حرارة" }, { n: "leaf", l: "Plant fibre", a: "ألياف نباتية" }, { n: "feather", l: "Light/airy", a: "خفيف" }, ]}, { h: "Process & make", ar: "الصُنع", icons: [ { n: "hand", l: "Khamsa", a: "خمسة" }, { n: "wax", l: "Wax-sealed", a: "ختم شمعي" }, { n: "scissors", l: "Trimmed", a: "مقصوص" }, { n: "calendar", l: "Made over weeks", a: "أسابيع" }, { n: "check", l: "Verified", a: "موثّق" }, { n: "lock", l: "Reserved", a: "محجوز" }, ]}, { h: "Place & journey", ar: "المكان والرحلة", icons: [ { n: "pin", l: "Atelier mark", a: "موقع المحترف" }, { n: "palm", l: "Palm tree", a: "نخلة" }, { n: "oasis", l: "Oasis origin", a: "واحة" }, { n: "camel", l: "Slow ship", a: "شحن بطيء" }, { n: "box", l: "Qaffa box", a: "قَفّة" }, { n: "basket", l: "Basket", a: "سلة" }, ]}, { h: "Action & UI", ar: "الواجهة", icons: [ { n: "search", l: "Look", a: "بحث" }, { n: "eye", l: "View detail", a: "مشاهدة" }, { n: "play", l: "Play film", a: "تشغيل" }, { n: "pause", l: "Pause", a: "إيقاف" }, { n: "arrow", l: "Continue", a: "تابع" }, { n: "knot", l: "Close (knot)", a: "إغلاق" }, { n: "gift", l: "Gift wrap", a: "هديّة" }, { n: "star", l: "Featured", a: "مميّزة" }, { n: "cup", l: "Hospitality", a: "ضيافة" }, ]}, ]; return ( <>

{lang === "en" ? "Folk icon set · v0.1" : "الأيقونات الشعبية · ٠٫١"}

{lang === "en" ? <>Drawn by hand,
not by software. : <>مرسومة باليد، لا ببرنامج.}

{lang === "en" ? "Tunis-village pottery glyphs and Sinai Bedouin tattoo motifs — adapted for a marketplace, kept rough on purpose. No off-the-shelf icon kits." : "نقوش فخار قرية تونس ووشم بدو سيناء — مُعدَّلة لسوقٍ رقمي، محتفظة بخشونتها."}

{groups.map((g, gi) => (

{lang === "en" ? g.h : g.ar}

({g.icons.length})

{g.icons.map((ic, i) => (

{lang === "en" ? ic.l : ic.a}

{ic.n}

))}

))} {/* Scale & color test */}

{lang === "en" ? "At every size & on every surface" : "بكل حجم وعلى كل خلفية"}

{[ { bg: "var(--paper)", c: "var(--ink)", l: "Paper / ink" }, { bg: "var(--ink)", c: "var(--gold-soft)", l: "Ink / gold" }, { bg: "var(--terracotta)", c: "var(--paper)", l: "Terracotta / paper" }, { bg: "var(--paper-2)", c: "var(--olive)", l: "Sand / olive" }, ].map((t, i) => (

{t.l}

{["sun", "hand", "palm", "camel", "star", "wax", "eye", "moon"].map(n => ( ))}

{[16, 22, 32, 48, 64].map(s => )}

))}

); }

{lang === "en" ? <>Drawn by hand,not by software. : <>مرسومة باليد، لا ببرنامج.}

{lang === "en" ? g.h : g.ar}

{lang === "en" ? "At every size & on every surface" : "بكل حجم وعلى كل خلفية"}

{lang === "en" ? <>Drawn by hand,
not by software. : <>مرسومة باليد، لا ببرنامج.}