/* primitives.jsx — shared UI atoms, icons, palette tokens, the book-cover SVG */
const PALETTES = {
terracotta: {
name: "טרקוטה וכחול דיו",
bg: "#F4EEDF", // warm parchment
surface: "#FAF6EB", // soft cream card
ink: "#1C1815", // deep warm black
ink2: "#4A3F36", // muted brown
accent: "#B85738", // terracotta
accent2: "#1F2D4A", // deep navy
gold: "#C9A24E",
rose: "#E5C7B6",
line: "rgba(28,24,21,.12)",
},
sage: {
name: "מרווה וזהב",
bg: "#F1EEE6",
surface: "#F8F5EC",
ink: "#171815",
ink2: "#3D4239",
accent: "#4A6147",
accent2: "#1B1F1A",
gold: "#B8945A",
rose: "#D9C7A8",
line: "rgba(23,24,21,.12)",
},
rose: {
name: "רוז׳ ושוקולד",
bg: "#F6EDE7",
surface: "#FBF3EE",
ink: "#2B1C18",
ink2: "#5A3F35",
accent: "#A04A3B",
accent2: "#3A1F1A",
gold: "#C58F5A",
rose: "#E8B7A0",
line: "rgba(43,28,24,.12)",
},
ink: {
name: "דיו לילה",
bg: "#171716",
surface: "#1F1F1D",
ink: "#F2EDE2",
ink2: "#A39E92",
accent: "#E5894D",
accent2: "#F2EDE2",
gold: "#D9B574",
rose: "#3A2E26",
line: "rgba(242,237,226,.16)",
},
};
const FONT_PAIRS = {
editorial: { name: "אדיטוריאל", display: "Frank Ruhl Libre", body: "Assistant" },
literary: { name: "ספרותי", display: "Noto Serif Hebrew", body: "Heebo" },
modern: { name: "מודרני", display: "Rubik", body: "Rubik" },
classic: { name: "קלאסי", display: "Frank Ruhl Libre", body: "Heebo" },
};
/* ─────────── Icons (stroke-based, 1.6px) ─────────── */
const Icon = ({ d, size = 20, stroke = "currentColor", strokeWidth = 1.6, fill = "none", children }) => (
);
const IconHeart = (p) => ;
const IconChat = (p) => ;
const IconShield= (p) => ;
const IconSpark = (p) => ;
const IconBag = (p) => ;
const IconSearch= (p) => ;
const IconMenu = (p) => ;
const IconClose = (p) => ;
const IconArrowL= (p) => ; /* points left = "next" in RTL */
const IconArrowR= (p) => ;
const IconPlus = (p) => ;
const IconCheck = (p) => ;
const IconQuote = (p) => ;
const IconStar = (p) => ;
const IconWa = (p) => {
const size = p.size || 20;
const fill = p.fill || "currentColor";
return (
);
};
const IconMail = (p) => ;
const IconPhone = (p) => ;
const IconInsta = (p) => ;
const IconBook = (p) => ;
const IconCards = (p) => ;
const IconGroup = (p) => ;
const IconGift = (p) => ;
const IconChevD = (p) => ;
/* ─────────── Book cover (real image) ─────────── */
function BookCover({ width = 260, palette, rotate = 0, style = {} }) {
const w = width, h = width * 1.5;
return (
);
}
/* ─────────── Buttons ─────────── */
function PrimaryBtn({ children, onClick, palette, size="md", as, href, ...rest }){
const pad = size==="lg" ? "17px 32px" : size==="sm" ? "9px 18px" : "13px 26px";
const fs = size==="lg" ? 14.5 : size==="sm" ? 12.5 : 13.5;
const Tag = as || (href ? "a" : "button");
return (
{ e.currentTarget.style.background = palette.accent; e.currentTarget.style.letterSpacing = ".08em"; }}
onMouseLeave={e=>{ e.currentTarget.style.background = palette.ink; e.currentTarget.style.letterSpacing = ".04em"; }}
onMouseDown={e=>e.currentTarget.style.transform="scale(.98)"}
onMouseUp={e=>e.currentTarget.style.transform="none"}
>{children}
);
}
function GhostBtn({ children, onClick, palette, size="md", as, href, ...rest }){
const pad = size==="lg" ? "16px 30px" : size==="sm" ? "8px 16px" : "12px 24px";
const fs = size==="lg" ? 14.5 : size==="sm" ? 12.5 : 13.5;
const Tag = as || (href ? "a" : "button");
return (
{ e.currentTarget.style.background = palette.ink; e.currentTarget.style.color = palette.bg; }}
onMouseLeave={e=>{ e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = palette.ink; }}
>{children}
);
}
function LinkArrow({ children, palette, color }){
return (
{children}
);
}
/* ─────────── Section eyebrow ─────────── */
function Eyebrow({ children, palette, color, mark }){
const c = color || palette.accent;
return (
{mark}
{children}
);
}
/* ─────────── Pill chip ─────────── */
function Chip({ children, palette, tone="default" }){
const styles = tone==="solid"
? { background: palette.ink, color: palette.bg }
: tone==="gold"
? { background: "transparent", color: palette.ink, border:`1px solid ${palette.gold}` }
: { background: "transparent", color: palette.ink2, border:`1px solid ${palette.line}` };
return (
{children}
);
}
/* ─────────── Photo placeholder ─────────── */
function PhotoPlaceholder({ label, ratio = "4/5", palette, tone="rose", style={} }){
const bg = tone==="rose" ? palette.rose : tone==="navy" ? palette.accent2 : tone==="gold" ? palette.gold : palette.ink;
const fg = tone==="rose" ? palette.accent2 : palette.bg;
return (
);
}
/* ─────────── Reveal-on-scroll wrapper ─────────── */
function Reveal({ children, delay = 0, y = 14, once = true, as: Tag = "div", style = {}, ...rest }) {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el || typeof IntersectionObserver === "undefined") { setShown(true); return; }
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {
setShown(true);
if (once) io.disconnect();
} else if (!once) {
setShown(false);
}
}, { threshold: 0.15, rootMargin: "0px 0px -40px 0px" });
io.observe(el);
return () => io.disconnect();
}, [once]);
return (
{children}
);
}
/* ─────────── Helpers ─────────── */
const formatILS = (n) => `₪${n.toLocaleString("he-IL")}`;
/* rich text — content edited in /admin can mark a word with **two asterisks**
to have it emphasised. Anything else is rendered as plain text. */
function rt(text, color, underline) {
if (text == null) return null;
return String(text).split("**").map((part, i) =>
i % 2
? {part}
: {part}
);
}
/* icons pickable from /admin, by name */
const ICONS_BY_NAME = {
heart: IconHeart, chat: IconChat, spark: IconSpark, shield: IconShield,
gift: IconGift, book: IconBook, cards: IconCards, group: IconGroup, star: IconStar,
};
const iconByName = (name) => ICONS_BY_NAME[name] || IconHeart;
/* publish */
Object.assign(window, {
PALETTES, FONT_PAIRS,
Icon, IconHeart, IconChat, IconShield, IconSpark, IconBag, IconSearch, IconMenu, IconClose,
IconArrowL, IconArrowR, IconPlus, IconCheck, IconQuote, IconStar, IconWa, IconMail, IconPhone, IconInsta,
IconBook, IconCards, IconGroup, IconGift, IconChevD,
BookCover, PrimaryBtn, GhostBtn, LinkArrow, Eyebrow, Chip, PhotoPlaceholder, formatILS, Reveal,
rt, iconByName,
});