// Hand-drawn-feeling SVG accents. Slightly wobbly paths, never geometric perfection.
// Each component is a span/svg you place absolutely or inline.
const Scribble = {};
// Rough oval circling a word. Two passes (slightly offset) for the "scribbled twice" look.
Scribble.Circle = ({ color = "#E63946", strokeWidth = 3, rough = 0.6, style = {} }) => (
);
// Wobbly underline that sits below text.
Scribble.Underline = ({ color = "#2867D5", strokeWidth = 4, style = {} }) => (
);
// Highlighter swipe — fat translucent stroke behind text.
Scribble.Highlight = ({ color = "#FFE166", style = {} }) => (
);
// Strikethrough wobble.
Scribble.Strike = ({ color = "#1A1714", strokeWidth = 3, style = {} }) => (
);
// Curving arrow with arrowhead. direction: 'down-right' | 'down-left' | 'right' | 'down'
Scribble.Arrow = ({ color = "#1A1714", strokeWidth = 2.5, direction = "down-right", style = {} }) => {
const paths = {
"down-right": { vb: "0 0 140 120", d: "M 12 14 Q 8 60, 50 80 Q 92 96, 120 92", head: "M 110 84 L 124 92 L 116 106" },
"down-left": { vb: "0 0 140 120", d: "M 128 14 Q 132 60, 90 80 Q 48 96, 20 92", head: "M 30 84 L 16 92 L 24 106" },
"right": { vb: "0 0 160 60", d: "M 8 30 Q 60 14, 120 30 Q 140 36, 152 32", head: "M 142 22 L 154 32 L 142 42" },
"down": { vb: "0 0 80 140", d: "M 30 8 Q 70 50, 38 90 Q 30 110, 40 130", head: "M 30 122 L 40 134 L 52 124" },
"up-right": { vb: "0 0 140 120", d: "M 12 106 Q 8 60, 50 40 Q 92 24, 120 28", head: "M 110 36 L 124 28 L 116 14" },
};
const p = paths[direction] || paths["down-right"];
return (
);
};
// Star/sparkle scribble for emphasis.
Scribble.Star = ({ color = "#E63946", strokeWidth = 2, size = 28, style = {} }) => (
);
// Rough numbered circle (for steps).
Scribble.NumberCircle = ({ n, color = "#1A1714", fill = "transparent", strokeWidth = 2.5, size = 64 }) => (
);
// A coffee-cup ring stain (warm brown, semi-translucent).
Scribble.CoffeeStain = ({ color = "#8B6F47", style = {} }) => (
);
// Dashed/dotted hand-drawn divider line.
Scribble.Divider = ({ color = "#1A1714", style = {} }) => (
);
// A loose tape-strip background, like washi tape.
Scribble.Tape = ({ color = "#FFE166", style = {} }) => (
);
window.Scribble = Scribble;