aksos-react-native-epub-reader 0.0.0-stage → 0.1.0

package/src/ui/ContentsSheet.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { Alert, FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
+import { HIGHLIGHT_COLORS } from '../themes';
+import type { ChromeColors } from '../themes';
+import type { Bookmark, Highlight, TocItem } from '../types';
+import { Sheet } from './Sheet';
+
+export type ContentsTab = 'contents' | 'bookmarks' | 'notes';
+
+interface Props {
+  visible: boolean;
+  colors: ChromeColors;
+  title: string;
+  /** e.g. "Page 100 of 219" */
+  subtitle: string;
+  toc: TocItem[];
+  currentSpine: number;
+  /** estimated page number in the whole book for a spine item + character offset */
+  pageOf: (spine: number, offset: number) => number;
+  bookmarks: Bookmark[];
+  highlights: Highlight[];
+  initialTab?: ContentsTab;
+  onClose: () => void;
+  onGoToc: (item: TocItem) => void;
+  onGoBookmark: (b: Bookmark) => void;
+  onGoHighlight: (h: Highlight) => void;
+  onDeleteBookmark: (id: string) => void;
+  onDeleteHighlight: (id: string) => void;
+}
+
+const TABS: { id: ContentsTab; label: string }[] = [
+  { id: 'contents', label: 'Chapters' },
+  { id: 'bookmarks', label: 'Bookmarks' },
+  { id: 'notes', label: 'Highlights' }
+];
+
+/** Contents sheet: Chapters | Bookmarks | Highlights, each row with its page number. */
+export function ContentsSheet(p: Props) {
+  const { colors } = p;
+  const [tab, setTab] = useState<ContentsTab>(p.initialTab || 'contents');
+  const confirmDelete = (what: string, fn: () => void) =>
+    Alert.alert(`Delete ${what}?`, undefined, [
+      { text: 'Cancel', style: 'cancel' },
+      { text: 'Delete', style: 'destructive', onPress: fn }
+    ]);
+  const empty = (text: string) => <Text style={[styles.empty, { color: colors.subtext }]}>{text}</Text>;
+  const rowBorder = { borderColor: colors.separator };
+
+  return (
+    <Sheet visible={p.visible} colors={colors} onClose={p.onClose} closeIcon="check" title={p.title} subtitle={p.subtitle} height="90%">
+      <View style={[styles.segment, { backgroundColor: colors.card }]}>
+        {TABS.map((t) => (
+          <Pressable
+            key={t.id}
+            onPress={() => setTab(t.id)}
+            style={[styles.segItem, tab === t.id && { backgroundColor: colors.dark ? 'rgba(255,255,255,0.22)' : '#ffffff' }]}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: tab === t.id }}
+          >
+            <Text style={{ color: colors.text, fontWeight: tab === t.id ? '600' : '400', fontSize: 16 }}>{t.label}</Text>
+          </Pressable>
+        ))}
+      </View>
+
+      {tab === 'contents' && (
+        <FlatList
+          data={p.toc}
+          keyExtractor={(_, i) => String(i)}
+          ListEmptyComponent={empty('No table of contents')}
+          renderItem={({ item }) => {
+            const active = item.spine === p.currentSpine && !item.fragment;
+            return (
+              <Pressable onPress={() => p.onGoToc(item)} style={[styles.row, rowBorder, { paddingStart: 20 + item.level * 18 }]}>
+                <Text style={[styles.rowText, { color: active ? colors.accent : colors.text, flex: 1 }]} numberOfLines={2}>
+                  {item.label}
+                </Text>
+                <Text style={[styles.page, { color: colors.subtext }]}>{p.pageOf(item.spine, 0)}</Text>
+              </Pressable>
+            );
+          }}
+        />
+      )}
+
+      {tab === 'bookmarks' && (
+        <FlatList
+          data={p.bookmarks.slice().sort((a, b) => a.progress - b.progress)}
+          keyExtractor={(b) => b.id}
+          ListEmptyComponent={empty('No bookmarks yet. Tap the bookmark button while reading.')}
+          renderItem={({ item }) => (
+            <Pressable
+              onPress={() => p.onGoBookmark(item)}
+              onLongPress={() => confirmDelete('bookmark', () => p.onDeleteBookmark(item.id))}
+              style={[styles.row, rowBorder]}
+            >
+              <View style={{ flex: 1 }}>
+                <Text style={[styles.meta, { color: colors.accent }]}>{item.chapter}</Text>
+                <Text style={[styles.rowText, { color: colors.text }]} numberOfLines={2}>
+                  {item.excerpt}
+                </Text>
+              </View>
+              <Text style={[styles.page, { color: colors.subtext }]}>{p.pageOf(item.spine, item.offset)}</Text>
+            </Pressable>
+          )}
+        />
+      )}
+
+      {tab === 'notes' && (
+        <FlatList
+          data={p.highlights.slice().sort((a, b) => a.spine - b.spine || a.start - b.start)}
+          keyExtractor={(h) => h.id}
+          ListEmptyComponent={empty('No highlights or notes yet. Select text to add one.')}
+          renderItem={({ item }) => (
+            <Pressable
+              onPress={() => p.onGoHighlight(item)}
+              onLongPress={() => confirmDelete('highlight', () => p.onDeleteHighlight(item.id))}
+              style={[styles.row, rowBorder]}
+            >
+              <View style={[styles.bar, { backgroundColor: HIGHLIGHT_COLORS[item.color] }]} />
+              <View style={{ flex: 1 }}>
+                {!!item.note && <Text style={[styles.rowText, { color: colors.text, fontWeight: '600' }]}>{item.note}</Text>}
+                <Text style={[styles.rowText, { color: item.note ? colors.subtext : colors.text }]} numberOfLines={3}>
+                  {item.text}
+                </Text>
+                {!!item.chapter && <Text style={[styles.meta, { color: colors.subtext }]}>{item.chapter}</Text>}
+              </View>
+              <Text style={[styles.page, { color: colors.subtext }]}>{p.pageOf(item.spine, item.start)}</Text>
+            </Pressable>
+          )}
+        />
+      )}
+    </Sheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  segment: { flexDirection: 'row', marginHorizontal: 16, marginTop: 34, marginBottom: 6, borderRadius: 18, padding: 3 },
+  segItem: { flex: 1, alignItems: 'center', paddingVertical: 8, borderRadius: 15 },
+  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 17, paddingHorizontal: 20, marginHorizontal: 0, borderBottomWidth: StyleSheet.hairlineWidth },
+  rowText: { fontSize: 18, lineHeight: 24 },
+  page: { fontSize: 18, marginStart: 12, minWidth: 34, textAlign: 'right' },
+  meta: { fontSize: 13, marginBottom: 2, fontWeight: '600' },
+  bar: { width: 3, alignSelf: 'stretch', borderRadius: 2, marginEnd: 12 },
+  empty: { textAlign: 'center', padding: 32, fontSize: 16 }
+});

package/src/ui/CustomizeSheet.tsx

@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
+import { FONTS, getFont, serifFont } from '../themes';
+import type { ChromeColors } from '../themes';
+import type { ColumnsSetting, ReaderSettings, ThemeColors } from '../types';
+import { Icon } from './Icons';
+import type { IconName } from './Icons';
+import { Sheet } from './Sheet';
+import { Slider } from './Slider';
+
+interface Props {
+  visible: boolean;
+  colors: ChromeColors;
+  page: ThemeColors;
+  settings: ReaderSettings;
+  sample: string;
+  onChange: (patch: Partial<ReaderSettings>) => void;
+  onReset: () => void;
+  onClose: () => void;
+}
+
+const COLUMN_LABEL: Record<string, string> = { auto: 'Auto Set', '1': 'One', '2': 'Two' };
+const GREEN = { true: '#34c759' };
+
+function Toggle(props: React.ComponentProps<typeof Switch>) {
+  return (
+    <View style={styles.toggleBox}>
+      <Switch {...props} />
+    </View>
+  );
+}
+
+/** "Customize Theme" sheet: font, bold, spacing, margins, columns, justify, sound. */
+export function CustomizeSheet({ visible, colors, page, settings: s, sample, onChange, onReset, onClose }: Props) {
+  const [fonts, setFonts] = useState(false);
+  const [columnsMenu, setColumnsMenu] = useState(false);
+  const off = !s.customize;
+  const font = getFont(s.fontId);
+  const previewFont = s.fontId === 'system' ? undefined : serifFont;
+  const border = { borderTopWidth: StyleSheet.hairlineWidth, borderColor: colors.separator };
+
+  const sliderRow = (label: string, icon: IconName, value: number, min: number, max: number, step: number, show: string, key: keyof ReaderSettings) => (
+    <View style={[styles.sliderBlock, border, off && styles.dim]} pointerEvents={off ? 'none' : 'auto'}>
+      <Text style={[styles.caption, { color: colors.subtext }]}>{label}</Text>
+      <View style={styles.sliderRow}>
+        <Icon name={icon} color={colors.text} size={24} />
+        <View style={{ flex: 1, marginHorizontal: 12 }}>
+          <Slider value={value} min={min} max={max} step={step} onChange={(v) => onChange({ [key]: v } as Partial<ReaderSettings>)} color={colors.text} track={colors.separator} thumbColor="#ffffff" />
+        </View>
+        <Text style={[styles.value, { color: colors.subtext }]}>{show}</Text>
+      </View>
+    </View>
+  );
+
+  const row = (icon: IconName, label: string, right: React.ReactNode, onPress?: () => void, top = true, iconActive = false) => {
+    const content = (
+      <>
+        <View style={styles.rowIcon}>
+          <Icon name={icon} color={colors.text} size={22} active={iconActive} />
+        </View>
+        <Text style={[styles.label, { color: colors.text }]}>{label}</Text>
+        {right}
+      </>
+    );
+    return onPress ? (
+      <Pressable style={[styles.line, top && border]} onPress={onPress}>
+        {content}
+      </Pressable>
+    ) : (
+      <View style={[styles.line, top && border]}>{content}</View>
+    );
+  };
+
+  const close = () => {
+    setFonts(false);
+    setColumnsMenu(false);
+    onClose();
+  };
+
+  return (
+    <Sheet visible={visible} colors={colors} onClose={close} closeIcon="check" title="Customize Theme" height="92%">
+      <View style={[styles.preview, { backgroundColor: page.bg }]}>
+        <Text style={[styles.aa, { color: page.fg, fontFamily: previewFont }]}>Aa</Text>
+        <Text
+          numberOfLines={4}
+          style={{
+            color: page.fg, fontFamily: previewFont, fontSize: Math.min(s.fontSize, 22),
+            lineHeight: Math.min(s.fontSize, 22) * (s.customize ? s.lineHeight : 1.5),
+            fontWeight: s.bold ? '700' : '400', textAlign: s.justify ? 'justify' : 'auto'
+          }}
+        >
+          {sample}
+        </Text>
+      </View>
+
+      <ScrollView contentContainerStyle={styles.pad}>
+        <View style={[styles.group, { backgroundColor: colors.card }]}>
+          {row(
+            'textSize',
+            'Font',
+            <View style={styles.value2}>
+              <Text style={{ color: colors.subtext, fontSize: 17 }}>{font.name}</Text>
+              <Icon name={fonts ? 'chevronUp' : 'chevronRight'} color={colors.subtext} size={18} />
+            </View>,
+            () => setFonts((v) => !v),
+            false
+          )}
+          {fonts &&
+            FONTS.map((f) => (
+              <Pressable
+                key={f.id}
+                onPress={() => {
+                  onChange({ fontId: f.id });
+                  setFonts(false);
+                }}
+                style={[styles.line, border]}
+              >
+                <View style={styles.check}>{s.fontId === f.id && <Icon name="check" color={colors.text} size={20} />}</View>
+                <Text style={[styles.label, { color: colors.text }]}>{f.name}</Text>
+              </Pressable>
+            ))}
+          {row('bold', 'Bold Text', <Toggle value={s.bold} onValueChange={(v) => onChange({ bold: v })} trackColor={GREEN} />)}
+        </View>
+
+        <Text style={[styles.heading, { color: colors.text }]}>Accessibility & Layout Options</Text>
+        <View style={[styles.group, { backgroundColor: colors.card }]}>
+          {row('sliders', 'Customize', <Toggle value={s.customize} onValueChange={(v) => onChange({ customize: v })} trackColor={GREEN} />, undefined, false)}
+          {sliderRow('LINE SPACING', 'lineSpacing', s.lineHeight, 1.1, 2.2, 0.05, s.lineHeight.toFixed(2), 'lineHeight')}
+          {sliderRow('CHARACTER SPACING', 'charSpacing', s.letterSpacing, -50, 100, 5, `${s.letterSpacing}%`, 'letterSpacing')}
+          {sliderRow('WORD SPACING', 'wordSpacing', s.wordSpacing, -50, 100, 5, `${s.wordSpacing}%`, 'wordSpacing')}
+          {sliderRow('MARGINS', 'margins', s.margins, -50, 100, 5, `${s.margins}%`, 'margins')}
+        </View>
+
+        <View style={[styles.group, { backgroundColor: colors.card, marginTop: 16 }]}>
+          {row(
+            'columns',
+            'Columns',
+            <View style={styles.value2}>
+              <Text style={{ color: colors.subtext, fontSize: 17 }}>{COLUMN_LABEL[String(s.columns)]}</Text>
+              <Icon name={columnsMenu ? 'chevronUp' : 'chevronDown'} color={colors.subtext} size={18} />
+            </View>,
+            () => setColumnsMenu((v) => !v),
+            false
+          )}
+          {columnsMenu &&
+            (['auto', 1, 2] as ColumnsSetting[]).map((c) => (
+              <Pressable
+                key={String(c)}
+                style={[styles.line, border]}
+                onPress={() => {
+                  onChange({ columns: c });
+                  setColumnsMenu(false);
+                }}
+              >
+                <View style={styles.check}>{s.columns === c && <Icon name="check" color={colors.text} size={20} />}</View>
+                <Text style={[styles.label, { color: colors.text }]}>{COLUMN_LABEL[String(c)]}</Text>
+              </Pressable>
+            ))}
+          {row('justify', 'Justify Text', <Toggle value={s.justify} onValueChange={(v) => onChange({ justify: v })} trackColor={GREEN} />)}
+          {row(s.pageSound ? 'sound' : 'soundOff', 'Page Turn Sound', <Toggle value={s.pageSound} onValueChange={(v) => onChange({ pageSound: v })} trackColor={GREEN} />)}
+        </View>
+
+        <Pressable onPress={onReset} style={[styles.reset, { backgroundColor: colors.card }]}>
+          <Text style={{ color: '#ff3b30', fontSize: 18, fontWeight: '600' }}>Reset Theme</Text>
+        </Pressable>
+      </ScrollView>
+    </Sheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  preview: { paddingHorizontal: 22, paddingTop: 12, paddingBottom: 18, marginBottom: 10 },
+  aa: { fontSize: 34, textAlign: 'right', marginBottom: 6 },
+  pad: { paddingHorizontal: 16, paddingBottom: 40 },
+  group: { borderRadius: 24, overflow: 'hidden' },
+  line: { flexDirection: 'row', alignItems: 'center', minHeight: 56, paddingHorizontal: 18 },
+  rowIcon: { width: 34, height: 28, alignItems: 'flex-start', justifyContent: 'center' },
+  toggleBox: { height: 31, minWidth: 51, alignItems: 'center', justifyContent: 'center' },
+  label: { flex: 1, fontSize: 18, lineHeight: 24 },
+  check: { width: 34, height: 24, justifyContent: 'center' },
+  value2: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+  heading: { fontSize: 22, fontWeight: '700', marginTop: 26, marginBottom: 10, marginStart: 4 },
+  sliderBlock: { paddingHorizontal: 18, paddingTop: 10, paddingBottom: 6 },
+  dim: { opacity: 0.45 },
+  caption: { fontSize: 14, marginBottom: 2 },
+  sliderRow: { flexDirection: 'row', alignItems: 'center' },
+  value: { width: 50, textAlign: 'right', fontSize: 17, lineHeight: 22 },
+  reset: { marginTop: 18, height: 58, borderRadius: 29, alignItems: 'center', justifyContent: 'center' }
+});

package/src/ui/Glass.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// expo-blur is optional: with it the controls are frosted glass, without it they are plain translucent.
+let BlurView: React.ComponentType<any> | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  BlurView = require('expo-blur').BlurView;
+} catch {
+  BlurView = null;
+}
+
+interface Props {
+  style?: StyleProp<ViewStyle>;
+  /** translucent tint drawn over the blur (use ChromeColors.glass or .sheetGlass) */
+  background: string;
+  border?: string;
+  dark: boolean;
+  /** blur strength 0..100 */
+  intensity?: number;
+  children?: React.ReactNode;
+}
+
+/** Frosted glass surface: blurs the book behind it so reading is not interrupted. */
+export function Glass({ style, background, border, dark, intensity = 38, children }: Props) {
+  const base: ViewStyle = { overflow: 'hidden', borderWidth: border ? StyleSheet.hairlineWidth : 0, borderColor: border };
+  if (BlurView) {
+    return (
+      <BlurView intensity={intensity} tint={dark ? 'dark' : 'light'} style={[base, style]}>
+        <View style={[StyleSheet.absoluteFill, { backgroundColor: background }]} pointerEvents="none" />
+        {children}
+      </BlurView>
+    );
+  }
+  return <View style={[base, { backgroundColor: background }, style]}>{children}</View>;
+}

package/src/ui/HighlightMenu.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { HIGHLIGHT_COLORS } from '../themes';
+import type { ChromeColors } from '../themes';
+import type { Highlight, HighlightColor } from '../types';
+import { Glass } from './Glass';
+import { Icon } from './Icons';
+
+interface Props {
+  highlight: Highlight;
+  rect: { x: number; y: number; width: number; height: number };
+  screen: { width: number; height: number };
+  colors: ChromeColors;
+  onColor: (c: HighlightColor) => void;
+  onToggleUnderline: () => void;
+  onNote: () => void;
+  onDelete: () => void;
+  onDismiss: () => void;
+}
+
+const W = 316;
+const H = 50;
+
+/** Floating glass palette shown over a highlight, like Apple Books. */
+export function HighlightMenu({ highlight, rect, screen, colors, onColor, onToggleUnderline, onNote, onDelete, onDismiss }: Props) {
+  const left = Math.max(8, Math.min(screen.width - W - 8, rect.x + rect.width / 2 - W / 2));
+  const above = rect.y - H - 10;
+  const top = above > 60 ? above : rect.y + rect.height + 10;
+  return (
+    <>
+      <Pressable style={StyleSheet.absoluteFill} onPress={onDismiss} accessibilityLabel="Dismiss" />
+      <Glass dark={colors.dark} background={colors.sheetGlass} border={colors.glassBorder} intensity={55} style={[styles.menu, { left, top }]}>
+        {(Object.keys(HIGHLIGHT_COLORS) as HighlightColor[]).map((c) => (
+          <Pressable key={c} onPress={() => onColor(c)} hitSlop={4} accessibilityLabel={`${c} highlight`}>
+            <View style={[styles.dot, { backgroundColor: HIGHLIGHT_COLORS[c], borderWidth: highlight.color === c ? 2 : 0, borderColor: colors.text }]} />
+          </Pressable>
+        ))}
+        <Pressable onPress={onToggleUnderline} hitSlop={6} accessibilityLabel="Underline">
+          <Icon name="underline" color={colors.text} size={22} active={highlight.style === 'underline'} strokeWidth={highlight.style === 'underline' ? 2.4 : 1.8} />
+        </Pressable>
+        <Pressable onPress={onNote} hitSlop={6} accessibilityLabel="Note">
+          <Icon name="pencil" color={colors.text} size={22} />
+        </Pressable>
+        <Pressable onPress={onDelete} hitSlop={6} accessibilityLabel="Remove highlight">
+          <Icon name="trash" color="#ff3b30" size={22} />
+        </Pressable>
+      </Glass>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  menu: {
+    position: 'absolute',
+    width: W,
+    height: H,
+    borderRadius: 25,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    paddingHorizontal: 12
+  },
+  dot: { width: 26, height: 26, borderRadius: 13 }
+});

package/src/ui/Icons.tsx

@@ -0,0 +1,246 @@
+import React from 'react';
+import Svg, { Circle, G, Line, Path, Rect } from 'react-native-svg';
+
+/**
+ * Vector icon set (24 x 24 grid, rounded strokes). Every icon takes the colour it is drawn in, so it follows the
+ * theme (light / dark / any page colour). Some icons carry state: `active` fills or closes them
+ * (bookmark, rotation lock, line guide).
+ */
+export type IconName =
+  | 'close' | 'check' | 'chevronRight' | 'chevronUp' | 'chevronDown'
+  | 'list' | 'search' | 'textSize' | 'share' | 'bookmark' | 'rotationLock' | 'lineGuide' | 'undo'
+  | 'sun' | 'sunLow' | 'moon' | 'contrast'
+  | 'pageSlide' | 'pageCurl' | 'pageFade' | 'pageScroll'
+  | 'sliders' | 'lineSpacing' | 'charSpacing' | 'wordSpacing' | 'margins' | 'columns' | 'bold' | 'justify'
+  | 'trash' | 'pencil' | 'underline' | 'highlighter' | 'sound' | 'soundOff';
+
+interface Props {
+  name: IconName;
+  color: string;
+  size?: number;
+  /** filled / closed state for bookmark, rotation lock, line guide */
+  active?: boolean;
+  strokeWidth?: number;
+}
+
+const RAYS = [0, 45, 90, 135, 180, 225, 270, 315].map((deg) => {
+  const a = (deg * Math.PI) / 180;
+  return { x1: 12 + 6.6 * Math.cos(a), y1: 12 + 6.6 * Math.sin(a), x2: 12 + 9.2 * Math.cos(a), y2: 12 + 9.2 * Math.sin(a) };
+});
+
+export function Icon({ name, color, size = 24, active = false, strokeWidth = 1.8 }: Props) {
+  const p = { stroke: color, strokeWidth, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' };
+  let body: React.ReactNode = null;
+
+  switch (name) {
+    case 'close':
+      body = <Path d="M6 6 L18 18 M18 6 L6 18" {...p} />;
+      break;
+    case 'check':
+      body = <Path d="M5 12.5 L10 17.5 L19 7" {...p} />;
+      break;
+    case 'chevronRight':
+      body = <Path d="M9 5.5 L15.5 12 L9 18.5" {...p} />;
+      break;
+    case 'chevronUp':
+      body = <Path d="M5.5 15 L12 8.5 L18.5 15" {...p} />;
+      break;
+    case 'chevronDown':
+      body = <Path d="M5.5 9 L12 15.5 L18.5 9" {...p} />;
+      break;
+    case 'list':
+      body = (
+        <G>
+          {[7, 12, 17].map((y) => (
+            <G key={y}>
+              <Circle cx={4.8} cy={y} r={1.25} fill={color} />
+              <Path d={`M9 ${y} H20`} {...p} />
+            </G>
+          ))}
+        </G>
+      );
+      break;
+    case 'search':
+      body = (
+        <G>
+          <Circle cx={10.8} cy={10.8} r={6.3} {...p} />
+          <Path d="M15.6 15.6 L20.5 20.5" {...p} />
+        </G>
+      );
+      break;
+    case 'textSize':
+      body = (
+        <G>
+          <Path d="M2.8 18 L6.3 9.2 L9.8 18 M4.1 14.9 H8.5" {...p} />
+          <Path d="M11.6 18 L16.6 5.6 L21.6 18 M13.5 13.6 H19.7" {...p} />
+        </G>
+      );
+      break;
+    case 'share':
+      body = (
+        <G>
+          <Path d="M8.5 10 H7 A1.7 1.7 0 0 0 5.3 11.7 V19 A1.7 1.7 0 0 0 7 20.7 H17 A1.7 1.7 0 0 0 18.7 19 V11.7 A1.7 1.7 0 0 0 17 10 H15.5" {...p} />
+          <Path d="M12 14.5 V3.5 M8.2 7.3 L12 3.5 L15.8 7.3" {...p} />
+        </G>
+      );
+      break;
+    case 'bookmark':
+      body = (
+        <Path
+          d="M7.2 3.8 H16.8 A1.2 1.2 0 0 1 18 5 V20.2 L12 16.2 L6 20.2 V5 A1.2 1.2 0 0 1 7.2 3.8 Z"
+          {...p}
+          fill={active ? color : 'none'}
+        />
+      );
+      break;
+    case 'rotationLock':
+      body = (
+        <G>
+          <Path d="M20.2 13 A8.2 8.2 0 1 1 17 5.9" {...p} />
+          <Path d="M17.2 2.8 V6.2 H13.8" {...p} />
+          <Rect x={9} y={11.2} width={6} height={5} rx={1.2} {...p} fill={active ? color : 'none'} />
+          <Path d={active ? 'M10.4 11.2 V10 A1.6 1.6 0 0 1 13.6 10 V11.2' : 'M10.4 11.2 V9.9 A1.6 1.6 0 0 1 13.6 9.9'} {...p} />
+        </G>
+      );
+      break;
+    case 'lineGuide':
+      body = (
+        <G>
+          <Path d="M4 6.2 H20 M4 17.8 H20" {...p} opacity={0.5} />
+          <Rect x={2.8} y={9.2} width={18.4} height={5.6} rx={2.8} {...p} fill={active ? color : 'none'} fillOpacity={active ? 0.28 : 0} />
+        </G>
+      );
+      break;
+    case 'undo':
+      body = <Path d="M8.5 6 L4 10.5 L8.5 15 M4.5 10.5 H14.5 A5 5 0 0 1 14.5 20.5 H11" {...p} />;
+      break;
+    case 'sun':
+      body = (
+        <G>
+          <Circle cx={12} cy={12} r={3.9} {...p} />
+          {RAYS.map((r, i) => (
+            <Line key={i} x1={r.x1} y1={r.y1} x2={r.x2} y2={r.y2} {...p} />
+          ))}
+        </G>
+      );
+      break;
+    case 'sunLow':
+      body = (
+        <G>
+          <Circle cx={12} cy={12} r={2.4} {...p} />
+          {RAYS.map((r, i) => (
+            <Line key={i} x1={12 + (r.x1 - 12) * 0.8} y1={12 + (r.y1 - 12) * 0.8} x2={12 + (r.x2 - 12) * 0.62} y2={12 + (r.y2 - 12) * 0.62} {...p} />
+          ))}
+        </G>
+      );
+      break;
+    case 'moon':
+      body = <Path d="M20 14.2 A8.4 8.4 0 1 1 9.8 4 A6.6 6.6 0 0 0 20 14.2 Z" {...p} />;
+      break;
+    case 'contrast':
+      body = (
+        <G>
+          <Circle cx={12} cy={12} r={8.2} {...p} />
+          <Path d="M12 3.8 A8.2 8.2 0 0 1 12 20.2 Z" fill={color} stroke={color} strokeWidth={1} />
+        </G>
+      );
+      break;
+    case 'pageSlide':
+      body = (
+        <G>
+          <Path d="M9 5.2 H5.2 A1.9 1.9 0 0 0 3.3 7.1 V17.9 A1.9 1.9 0 0 0 5.2 19.8 H9" {...p} opacity={0.55} />
+          <Rect x={8} y={3.2} width={12.7} height={16.6} rx={2.4} {...p} />
+        </G>
+      );
+      break;
+    case 'pageCurl':
+      body = (
+        <G>
+          <Path d="M6.7 3.5 H14.5 L20 9 V18.6 A1.9 1.9 0 0 1 18.1 20.5 H6.7 A1.9 1.9 0 0 1 4.8 18.6 V5.4 A1.9 1.9 0 0 1 6.7 3.5 Z" {...p} />
+          <Path d="M14.5 3.5 V7.4 A1.6 1.6 0 0 0 16.1 9 H20" {...p} />
+        </G>
+      );
+      break;
+    case 'pageFade':
+      body = <Path d="M13.2 2.8 L5.2 13.2 H11 L10.2 21.2 L18.8 10.4 H13 Z" {...p} />;
+      break;
+    case 'pageScroll':
+      body = (
+        <G>
+          <Rect x={5} y={3} width={14} height={18} rx={2.4} {...p} />
+          <Path d="M9.4 9.6 L12 7 L14.6 9.6 M9.4 14.4 L12 17 L14.6 14.4" {...p} />
+        </G>
+      );
+      break;
+    case 'sliders':
+      body = (
+        <G>
+          <Path d="M3.5 8 H9.2 M14.8 8 H20.5 M3.5 16 H14.2 M19.8 16 H20.5" {...p} />
+          <Circle cx={12} cy={8} r={2.8} {...p} />
+          <Circle cx={17} cy={16} r={2.8} {...p} />
+        </G>
+      );
+      break;
+    case 'lineSpacing':
+      body = <Path d="M10.5 6.5 H20.5 M10.5 12 H20.5 M10.5 17.5 H20.5 M5 4.5 V19.5 M2.9 6.6 L5 4.5 L7.1 6.6 M2.9 17.4 L5 19.5 L7.1 17.4" {...p} />;
+      break;
+    case 'charSpacing':
+      body = <Path d="M7.6 13.6 L12 3.8 L16.4 13.6 M9.2 10.4 H14.8 M3.8 19.2 H20.2 M6.2 16.9 L3.8 19.2 L6.2 21.5 M17.8 16.9 L20.2 19.2 L17.8 21.5" {...p} />;
+      break;
+    case 'wordSpacing':
+      body = (
+        <G>
+          <Rect x={2.8} y={4.5} width={7} height={4.2} rx={1.2} {...p} />
+          <Rect x={14.2} y={4.5} width={7} height={4.2} rx={1.2} {...p} />
+          <Path d="M3.8 15.2 H20.2 M6.2 12.9 L3.8 15.2 L6.2 17.5 M17.8 12.9 L20.2 15.2 L17.8 17.5" {...p} />
+        </G>
+      );
+      break;
+    case 'margins':
+      body = (
+        <G>
+          <Rect x={3.8} y={3} width={16.4} height={18} rx={2.4} {...p} />
+          <Path d="M8 7 V17 M16 7 V17" {...p} />
+        </G>
+      );
+      break;
+    case 'columns':
+      body = (
+        <G>
+          <Rect x={3.5} y={4} width={7.6} height={16} rx={1.8} {...p} />
+          <Rect x={12.9} y={4} width={7.6} height={16} rx={1.8} {...p} />
+        </G>
+      );
+      break;
+    case 'bold':
+      body = <Path d="M8 4.6 V19.4 M8 4.6 H13 A3.6 3.6 0 0 1 13 11.8 H8 M8 11.8 H14 A3.8 3.8 0 0 1 14 19.4 H8" {...p} strokeWidth={strokeWidth + 0.5} />;
+      break;
+    case 'justify':
+      body = <Path d="M4 6 H20 M4 10 H20 M4 14 H20 M4 18 H20" {...p} />;
+      break;
+    case 'trash':
+      body = <Path d="M4.5 7 H19.5 M9.3 7 V4.6 H14.7 V7 M6.6 7 L7.6 19.6 A1.2 1.2 0 0 0 8.8 20.7 H15.2 A1.2 1.2 0 0 0 16.4 19.6 L17.4 7 M10.2 10.8 V16.4 M13.8 10.8 V16.4" {...p} />;
+      break;
+    case 'pencil':
+      body = <Path d="M4 20 L5.2 15.2 L16.2 4.2 A2.2 2.2 0 0 1 19.4 7.4 L8.4 18.4 Z M14 6.4 L17.2 9.6" {...p} />;
+      break;
+    case 'highlighter':
+      body = <Path d="M14.2 4.6 L19.4 9.8 L10.6 18.6 L5.4 13.4 Z M5.4 13.4 L4.2 17.6 L7.6 18.6 M3.5 21 H12.5" {...p} />;
+      break;
+    case 'underline':
+      body = <Path d="M7.4 4.4 V11 A4.6 4.6 0 0 0 16.6 11 V4.4 M5 20 H19" {...p} />;
+      break;
+    case 'sound':
+      body = <Path d="M4 9.5 H7.5 L12.5 5.2 V18.8 L7.5 14.5 H4 Z M16 9 A4.2 4.2 0 0 1 16 15 M18.6 6.6 A7.6 7.6 0 0 1 18.6 17.4" {...p} />;
+      break;
+    case 'soundOff':
+      body = <Path d="M4 9.5 H7.5 L12.5 5.2 V18.8 L7.5 14.5 H4 Z M16.2 9.4 L21 14.6 M21 9.4 L16.2 14.6" {...p} />;
+      break;
+  }
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24">
+      {body}
+    </Svg>
+  );
+}