@proulr/sdui-components 0.1.66 → 0.1.67

package/src/renderer/ui/app-glyphs.tsx

@@ -1,2082 +0,0 @@
-import { Platform, StyleSheet, Text, View } from 'react-native';
-import { m3Colors } from '../theme/proulr-theme';
-
-export type AppChromeGlyphProps = {
-  color?: string;
-  size?: number;
-};
-
-function strokeFor(size: number) {
-  return Math.max(1.8, size * 0.075);
-}
-
-export function AppChromeSearchGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const lens = size * 0.48;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: lens,
-          height: lens,
-          borderRadius: lens / 2,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          width: size * 0.26,
-          height: stroke,
-          borderRadius: 1,
-          backgroundColor: color,
-          transform: [{ rotate: '45deg' }],
-          bottom: size * 0.14,
-          right: size * 0.12,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeHuntGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const ring = size * 0.82;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: ring,
-          height: ring,
-          borderRadius: ring / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: ring * 0.3,
-            height: ring * 0.3,
-            borderRadius: ring * 0.15,
-            backgroundColor: color,
-          }}
-        />
-      </View>
-      <View style={[styles.crosshair, { width: size * 0.92, height: stroke, backgroundColor: color }]} />
-      <View style={[styles.crosshair, { width: stroke, height: size * 0.92, backgroundColor: color }]} />
-    </View>
-  );
-}
-
-export function AppChromeBackGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size) + 0.2;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: size * 0.36,
-          height: size * 0.36,
-          borderLeftWidth: stroke,
-          borderBottomWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '45deg' }],
-          marginLeft: size * 0.1,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeOverflowGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
-  const dot = size * 0.13;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center', gap: dot * 0.75 }}>
-      <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: color }} />
-      <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: color }} />
-      <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: color }} />
-    </View>
-  );
-}
-
-export function AppChromeLocationGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const head = size * 0.42;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: head,
-          height: head,
-          borderRadius: head / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'absolute',
-          top: size * 0.06,
-        }}
-      >
-        <View
-          style={{
-            width: head * 0.34,
-            height: head * 0.34,
-            borderRadius: head * 0.17,
-            backgroundColor: color,
-          }}
-        />
-      </View>
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.04,
-          width: 0,
-          height: 0,
-          borderLeftWidth: head * 0.52,
-          borderRightWidth: head * 0.52,
-          borderTopWidth: size * 0.3,
-          borderLeftColor: 'transparent',
-          borderRightColor: 'transparent',
-          borderTopColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeMicGlyph({ color = m3Colors.onPrimary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const capsuleW = size * 0.38;
-  const capsuleH = size * 0.56;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: capsuleW,
-          height: capsuleH,
-          borderRadius: capsuleW / 2,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-      <View style={{ width: size * 0.48, height: stroke, backgroundColor: color, marginTop: 2 }} />
-      <View style={{ width: stroke, height: size * 0.16, backgroundColor: color }} />
-    </View>
-  );
-}
-
-export function AppChromeSendGlyph({ color = m3Colors.onPrimary, size = 24 }: AppChromeGlyphProps) {
-  const wingSpan = size * 0.17;
-  const bodyLength = size * 0.5;
-
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ transform: [{ rotate: '-42deg' }] }}>
-        <View
-          style={{
-            width: 0,
-            height: 0,
-            borderTopWidth: wingSpan,
-            borderBottomWidth: wingSpan,
-            borderLeftWidth: bodyLength,
-            borderTopColor: 'transparent',
-            borderBottomColor: 'transparent',
-            borderLeftColor: color,
-            marginLeft: size * 0.04,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeChatGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const bubbleW = size * 0.86;
-  const bubbleH = size * 0.62;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: bubbleW,
-          height: bubbleH,
-          borderRadius: size * 0.16,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.1,
-          left: size * 0.18,
-          width: size * 0.16,
-          height: size * 0.16,
-          borderBottomWidth: stroke,
-          borderLeftWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '-45deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeCloseGlyph({ color = m3Colors.onSurface, size = 20 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const bar = size * 0.68;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={[styles.diag, { width: bar, height: stroke, backgroundColor: color, transform: [{ rotate: '45deg' }] }]} />
-      <View style={[styles.diag, { width: bar, height: stroke, backgroundColor: color, transform: [{ rotate: '-45deg' }] }]} />
-    </View>
-  );
-}
-
-export function AppChromeChevronDownGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: size * 0.36,
-          height: size * 0.36,
-          borderRightWidth: stroke,
-          borderBottomWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '45deg' }],
-          marginTop: -size * 0.06,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeChevronRightGlyph({ color = m3Colors.onSurfaceVariant, size = 20 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: size * 0.36,
-          height: size * 0.36,
-          borderRightWidth: stroke,
-          borderBottomWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '-45deg' }],
-          marginLeft: -size * 0.06,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeFlipCameraGlyph({ color = m3Colors.onPrimary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const ring = size * 0.78;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: ring,
-          height: ring,
-          borderRadius: ring / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          borderTopColor: 'transparent',
-          transform: [{ rotate: '45deg' }],
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.1,
-          right: size * 0.12,
-          width: 0,
-          height: 0,
-          borderTopWidth: size * 0.11,
-          borderBottomWidth: size * 0.11,
-          borderLeftWidth: size * 0.13,
-          borderTopColor: 'transparent',
-          borderBottomColor: 'transparent',
-          borderLeftColor: color,
-          transform: [{ rotate: '-30deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-/** Flash — estalo / sinal de interesse (centro + 4 raios longos + 4 curtos). */
-export function AppChromeFlashGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const core = size * 0.22;
-  const mainRayW = Math.max(2.6, size * 0.12);
-  const mainRayLen = size * 0.42;
-  const diagRayW = Math.max(2, size * 0.09);
-  const diagRayLen = size * 0.28;
-  const mainAngles = [0, 90, 180, 270];
-  const diagAngles = [45, 135, 225, 315];
-
-  const rayStyle = (rayW: number, rayLen: number, angle: number) => ({
-    position: 'absolute' as const,
-    width: rayW,
-    height: rayLen,
-    borderRadius: rayW / 2,
-    backgroundColor: color,
-    left: size / 2 - rayW / 2,
-    top: size / 2 - rayLen / 2,
-    transform: [{ rotate: `${angle}deg` }, { translateY: -size * 0.28 }],
-  });
-
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      {mainAngles.map((angle) => (
-        <View key={`m-${angle}`} style={rayStyle(mainRayW, mainRayLen, angle)} />
-      ))}
-      {diagAngles.map((angle) => (
-        <View key={`d-${angle}`} style={rayStyle(diagRayW, diagRayLen, angle)} />
-      ))}
-      <View
-        style={{
-          width: core,
-          height: core,
-          borderRadius: core / 2,
-          backgroundColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeTabDiscoverGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  return <AppChromeHuntGlyph color={color} size={size} />;
-}
-
-/** Vibes — play em círculo (feed de vídeo / mídia). */
-export function AppChromeTabVibesGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const ring = size * 0.84;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: ring,
-          height: ring,
-          borderRadius: ring / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: 0,
-            height: 0,
-            borderTopWidth: size * 0.14,
-            borderBottomWidth: size * 0.14,
-            borderLeftWidth: size * 0.22,
-            borderTopColor: 'transparent',
-            borderBottomColor: 'transparent',
-            borderLeftColor: color,
-            marginLeft: size * 0.05,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeTabFlashGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  return <AppChromeFlashGlyph color={color} size={size} />;
-}
-
-export function AppChromeTabChatGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  return <AppChromeChatGlyph color={color} size={size} />;
-}
-
-/** Tab Randoms — shuffle / chance (dois nós ligados). */
-export function AppChromeTabRandomGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const node = size * 0.22;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          position: 'absolute',
-          left: size * 0.14,
-          top: size * 0.18,
-          width: node,
-          height: node,
-          borderRadius: node / 2,
-          backgroundColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          right: size * 0.14,
-          bottom: size * 0.18,
-          width: node,
-          height: node,
-          borderRadius: node / 2,
-          backgroundColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          width: size * 0.55,
-          height: stroke,
-          backgroundColor: color,
-          borderRadius: 1,
-          transform: [{ rotate: '45deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-/** Configurações — sliders horizontais (não confundir com alvo de caçar). */
-export function AppChromeSettingsGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const trackW = size * 0.72;
-  const knob = size * 0.14;
-  const rows = [
-    { top: size * 0.22, knobLeft: size * 0.14 },
-    { top: size * 0.44, knobLeft: size * 0.42 },
-    { top: size * 0.66, knobLeft: size * 0.24 },
-  ];
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      {rows.map((row) => (
-        <View
-          key={row.top}
-          style={{
-            position: 'absolute',
-            top: row.top,
-            width: trackW,
-            height: stroke,
-            backgroundColor: color,
-            borderRadius: 1,
-            opacity: 0.45,
-          }}
-        />
-      ))}
-      {rows.map((row) => (
-        <View
-          key={`knob-${row.top}`}
-          style={{
-            position: 'absolute',
-            top: row.top - knob / 2 + stroke / 2,
-            left: row.knobLeft,
-            width: knob,
-            height: knob,
-            borderRadius: knob / 2,
-            borderWidth: stroke,
-            borderColor: color,
-            backgroundColor: color,
-          }}
-        />
-      ))}
-    </View>
-  );
-}
-
-export function AppChromeBoostGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const bodyW = size * 0.34;
-  const bodyH = size * 0.46;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.1,
-          width: 0,
-          height: 0,
-          borderLeftWidth: size * 0.12,
-          borderRightWidth: size * 0.12,
-          borderBottomWidth: size * 0.18,
-          borderLeftColor: 'transparent',
-          borderRightColor: 'transparent',
-          borderBottomColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.26,
-          width: bodyW,
-          height: bodyH,
-          borderRadius: size * 0.06,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: bodyW * 0.38,
-            height: bodyW * 0.38,
-            borderRadius: bodyW * 0.19,
-            borderWidth: stroke * 0.8,
-            borderColor: color,
-          }}
-        />
-      </View>
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.14,
-          left: size * 0.28,
-          width: size * 0.16,
-          height: size * 0.12,
-          borderBottomWidth: stroke,
-          borderLeftWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '-35deg' }],
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.14,
-          right: size * 0.28,
-          width: size * 0.16,
-          height: size * 0.12,
-          borderBottomWidth: stroke,
-          borderRightWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '35deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeFireGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const w = size * 0.5;
-  const h = size * 0.7;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: w,
-          height: h,
-          borderTopLeftRadius: w * 0.55,
-          borderTopRightRadius: w * 0.55,
-          borderBottomLeftRadius: w * 0.22,
-          borderBottomRightRadius: w * 0.22,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.18,
-          width: w * 0.34,
-          height: h * 0.46,
-          borderTopLeftRadius: w * 0.22,
-          borderTopRightRadius: w * 0.22,
-          borderBottomLeftRadius: w * 0.12,
-          borderBottomRightRadius: w * 0.12,
-          backgroundColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-/**
- * Right Now — flame (🔥). Source SVG: assets/icons/right-now.svg
- * Outline teardrop + solid inner tongue (reads at 12–24px chrome sizes).
- */
-export function AppChromeRightNowGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const outerW = size * 0.5;
-  const outerH = size * 0.74;
-  const innerW = outerW * 0.4;
-  const innerH = outerH * 0.42;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: outerW,
-          height: outerH,
-          borderTopLeftRadius: outerW * 0.58,
-          borderTopRightRadius: outerW * 0.58,
-          borderBottomLeftRadius: outerW * 0.46,
-          borderBottomRightRadius: outerW * 0.46,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-          paddingBottom: size * 0.11,
-        }}
-      >
-        <View
-          style={{
-            width: innerW,
-            height: innerH,
-            backgroundColor: color,
-            borderTopLeftRadius: innerW * 0.55,
-            borderTopRightRadius: innerW * 0.55,
-            borderBottomLeftRadius: innerW * 0.42,
-            borderBottomRightRadius: innerW * 0.42,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-/** Editar perfil — só lápis (corpo + ponta). */
-export function AppChromeEditGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const bodyW = Math.max(3, size * 0.17);
-  const bodyH = size * 0.64;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: bodyW,
-          height: bodyH,
-          borderRadius: bodyW / 2,
-          backgroundColor: color,
-          transform: [{ rotate: '-45deg' }],
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.17,
-          left: size * 0.17,
-          width: 0,
-          height: 0,
-          borderLeftWidth: bodyW * 0.95,
-          borderRightWidth: bodyW * 0.95,
-          borderTopWidth: size * 0.13,
-          borderLeftColor: 'transparent',
-          borderRightColor: 'transparent',
-          borderTopColor: color,
-          transform: [{ rotate: '-45deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-/** Cortar imagem — tesoura (duas lâminas + pivô). */
-export function AppChromeCropGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const bladeW = Math.max(2, size * 0.12);
-  const bladeH = size * 0.52;
-  const pivot = Math.max(4, size * 0.2);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          position: 'absolute',
-          width: bladeW,
-          height: bladeH,
-          borderRadius: bladeW,
-          backgroundColor: color,
-          transform: [{ rotate: '-28deg' }, { translateY: -size * 0.06 }],
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          width: bladeW,
-          height: bladeH,
-          borderRadius: bladeW,
-          backgroundColor: color,
-          transform: [{ rotate: '28deg' }, { translateY: -size * 0.06 }],
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.18,
-          width: pivot,
-          height: pivot,
-          borderRadius: pivot / 2,
-          borderWidth: Math.max(1.5, size * 0.07),
-          borderColor: color,
-          backgroundColor: 'transparent',
-        }}
-      />
-    </View>
-  );
-}
-
-/** Story — anel com ponto central (criar story). */
-export function AppChromeStoryGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const ring = size * 0.82;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: ring,
-          height: ring,
-          borderRadius: ring / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: ring * 0.34,
-            height: ring * 0.34,
-            borderRadius: ring * 0.17,
-            backgroundColor: color,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeStoryMusicGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const head = size * 0.18;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          position: 'absolute',
-          left: size * 0.22,
-          bottom: size * 0.18,
-          width: head,
-          height: head,
-          borderRadius: head / 2,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          left: size * 0.3,
-          bottom: size * 0.34,
-          width: stroke,
-          height: size * 0.42,
-          backgroundColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.16,
-          right: size * 0.24,
-          width: size * 0.28,
-          height: stroke,
-          backgroundColor: color,
-          transform: [{ rotate: '32deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeStoryStickerGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const frame = size * 0.78;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: frame,
-          height: frame,
-          borderRadius: size * 0.14,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            flexDirection: 'row',
-            gap: frame * 0.14,
-            marginBottom: frame * 0.08,
-          }}
-        >
-          <View style={{ width: frame * 0.1, height: frame * 0.1, borderRadius: frame * 0.05, backgroundColor: color }} />
-          <View style={{ width: frame * 0.1, height: frame * 0.1, borderRadius: frame * 0.05, backgroundColor: color }} />
-        </View>
-        <View
-          style={{
-            width: frame * 0.34,
-            height: frame * 0.16,
-            borderBottomLeftRadius: frame * 0.17,
-            borderBottomRightRadius: frame * 0.17,
-            borderWidth: stroke,
-            borderTopWidth: 0,
-            borderColor: color,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeStoryTextGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const frame = size * 0.78;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: frame,
-          height: frame * 0.72,
-          borderRadius: size * 0.1,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 1 }}>
-          <View style={{ width: stroke * 1.1, height: size * 0.28, backgroundColor: color, borderRadius: 1 }} />
-          <View style={{ width: size * 0.2, height: size * 0.2, borderRadius: size * 0.1, borderWidth: stroke, borderColor: color }} />
-        </View>
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeStoryEffectsGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  return <AppChromeFlashGlyph color={color} size={size} />;
-}
-
-export function AppChromeStoryMentionGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const ring = size * 0.78;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: ring,
-          height: ring,
-          borderRadius: ring / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View
-          style={{
-            width: stroke * 1.2,
-            height: size * 0.34,
-            backgroundColor: color,
-            borderRadius: 1,
-          }}
-        />
-        <View
-          style={{
-            position: 'absolute',
-            bottom: size * 0.22,
-            width: size * 0.14,
-            height: size * 0.14,
-            borderRadius: size * 0.07,
-            borderWidth: stroke,
-            borderColor: color,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeRepostGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const shaft = size * 0.36;
-  const head = size * 0.1;
-  const rowH = stroke;
-
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      {/* seta superior → */}
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.28,
-          left: size * 0.2,
-          width: shaft,
-          height: rowH,
-          backgroundColor: color,
-          borderRadius: 1,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.28 + rowH / 2 - head,
-          left: size * 0.2 + shaft - head * 0.15,
-          width: 0,
-          height: 0,
-          borderTopWidth: head,
-          borderBottomWidth: head,
-          borderLeftWidth: head * 1.15,
-          borderTopColor: 'transparent',
-          borderBottomColor: 'transparent',
-          borderLeftColor: color,
-        }}
-      />
-      {/* seta inferior ← */}
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.56,
-          left: size * 0.28,
-          width: shaft,
-          height: rowH,
-          backgroundColor: color,
-          borderRadius: 1,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.56 + rowH / 2 - head,
-          left: size * 0.22,
-          width: 0,
-          height: 0,
-          borderTopWidth: head,
-          borderBottomWidth: head,
-          borderRightWidth: head * 1.15,
-          borderTopColor: 'transparent',
-          borderBottomColor: 'transparent',
-          borderRightColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-type HeartGlyphProps = AppChromeGlyphProps & { filled?: boolean };
-
-function AppChromeHeartShape({ color = m3Colors.primary, size = 24, filled = false }: HeartGlyphProps) {
-  const glyph = filled ? '♥' : '♡';
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <Text
-        style={{
-          color,
-          fontSize: size * 0.9,
-          lineHeight: size,
-          height: size,
-          textAlign: 'center',
-          ...(Platform.OS === 'android'
-            ? { includeFontPadding: false, textAlignVertical: 'center' as const }
-            : null),
-        }}
-      >
-        {glyph}
-      </Text>
-    </View>
-  );
-}
-
-export function AppChromePlayGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: 0,
-          height: 0,
-          borderTopWidth: size * 0.2,
-          borderBottomWidth: size * 0.2,
-          borderLeftWidth: size * 0.32,
-          borderTopColor: 'transparent',
-          borderBottomColor: 'transparent',
-          borderLeftColor: color,
-          marginLeft: size * 0.07,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromePauseGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const barW = Math.max(2.4, size * 0.14);
-  const barH = size * 0.4;
-  const gap = size * 0.1;
-  return (
-    <View
-      style={{
-        width: size,
-        height: size,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap,
-      }}
-    >
-      <View style={{ width: barW, height: barH, borderRadius: 2, backgroundColor: color }} />
-      <View style={{ width: barW, height: barH, borderRadius: 2, backgroundColor: color }} />
-    </View>
-  );
-}
-
-export function AppChromeHeartGlyph(props: AppChromeGlyphProps) {
-  return <AppChromeHeartShape {...props} filled={false} />;
-}
-
-export function AppChromeHeartFilledGlyph(props: AppChromeGlyphProps) {
-  return <AppChromeHeartShape {...props} filled />;
-}
-
-type ThumbsUpGlyphProps = AppChromeGlyphProps & { filled?: boolean };
-
-function AppChromeThumbsUpShape({ color = m3Colors.primary, size = 24, filled = false }: ThumbsUpGlyphProps) {
-  const stroke = strokeFor(size);
-  const palmW = size * 0.46;
-  const palmH = size * 0.34;
-  const thumbW = size * 0.2;
-  const thumbH = size * 0.36;
-  const fill = filled ? color : 'transparent';
-  const borderW = filled ? 0 : stroke;
-  const radius = Math.max(2, size * 0.07);
-
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ width: palmW, height: palmH + thumbH * 0.62 }}>
-        <View
-          style={{
-            position: 'absolute',
-            top: 0,
-            right: palmW * 0.04,
-            width: thumbW,
-            height: thumbH,
-            borderRadius: thumbW / 2,
-            backgroundColor: fill,
-            borderWidth: borderW,
-            borderColor: color,
-          }}
-        />
-        <View
-          style={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            width: palmW,
-            height: palmH,
-            borderRadius: radius,
-            backgroundColor: fill,
-            borderWidth: borderW,
-            borderColor: color,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeThumbsUpGlyph(props: AppChromeGlyphProps) {
-  return <AppChromeThumbsUpShape {...props} filled={false} />;
-}
-
-export function AppChromeThumbsUpFilledGlyph(props: AppChromeGlyphProps) {
-  return <AppChromeThumbsUpShape {...props} filled />;
-}
-
-export function AppChromePlusGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const arm = size * 0.46;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ width: arm, height: stroke, backgroundColor: color, borderRadius: 1 }} />
-      <View style={{ position: 'absolute', width: stroke, height: arm, backgroundColor: color, borderRadius: 1 }} />
-    </View>
-  );
-}
-
-/** Publicar — documento com + central. */
-export function AppChromePublishGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const frame = size * 0.74;
-  const plusLen = frame * 0.42;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: frame,
-          height: frame,
-          borderRadius: size * 0.12,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View style={{ width: plusLen, height: stroke, backgroundColor: color, borderRadius: 1 }} />
-        <View
-          style={{
-            position: 'absolute',
-            width: stroke,
-            height: plusLen,
-            backgroundColor: color,
-            borderRadius: 1,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeIncognitoGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const frameW = size * 0.86;
-  const frameH = size * 0.34;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: frameW,
-          height: frameH,
-          borderRadius: frameH / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          marginTop: size * 0.08,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.34,
-          width: frameW * 0.72,
-          height: frameH * 0.9,
-          borderBottomLeftRadius: frameH * 0.45,
-          borderBottomRightRadius: frameH * 0.45,
-          borderWidth: stroke,
-          borderTopWidth: 0,
-          borderColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeEventsGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const pole = size * 0.12;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ position: 'absolute', left: size * 0.22, width: pole, height: size * 0.72, backgroundColor: color }} />
-      <View style={{ position: 'absolute', right: size * 0.22, width: pole, height: size * 0.72, backgroundColor: color }} />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.12,
-          width: size * 0.72,
-          height: size * 0.34,
-          borderTopLeftRadius: size * 0.08,
-          borderTopRightRadius: size * 0.08,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeShieldGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const w = size * 0.62;
-  const h = size * 0.76;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: w,
-          height: h,
-          borderTopLeftRadius: w * 0.2,
-          borderTopRightRadius: w * 0.2,
-          borderBottomLeftRadius: w * 0.45,
-          borderBottomRightRadius: w * 0.45,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeProfileGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const head = size * 0.28;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: head,
-          height: head,
-          borderRadius: head / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          marginBottom: size * 0.04,
-        }}
-      />
-      <View
-        style={{
-          width: size * 0.62,
-          height: size * 0.3,
-          borderTopLeftRadius: size * 0.3,
-          borderTopRightRadius: size * 0.3,
-          borderWidth: stroke,
-          borderColor: color,
-          borderBottomWidth: 0,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeBookmarkGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const w = size * 0.52;
-  const h = size * 0.72;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: w,
-          height: h,
-          borderWidth: stroke,
-          borderColor: color,
-          borderBottomWidth: 0,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.12,
-          width: 0,
-          height: 0,
-          borderLeftWidth: w / 2,
-          borderRightWidth: w / 2,
-          borderTopWidth: size * 0.16,
-          borderLeftColor: 'transparent',
-          borderRightColor: 'transparent',
-          borderTopColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeListGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const lineW = size * 0.62;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center', gap: size * 0.1 }}>
-      {[0, 1, 2].map((row) => (
-        <View key={row} style={{ flexDirection: 'row', alignItems: 'center', gap: size * 0.08 }}>
-          <View style={{ width: size * 0.14, height: size * 0.14, borderRadius: size * 0.07, borderWidth: stroke, borderColor: color }} />
-          <View style={{ width: lineW, height: stroke, backgroundColor: color }} />
-        </View>
-      ))}
-    </View>
-  );
-}
-
-export function AppChromeCommunitiesGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const head = size * 0.22;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ flexDirection: 'row', gap: size * 0.08, marginBottom: size * 0.04 }}>
-        <View style={{ width: head, height: head, borderRadius: head / 2, borderWidth: stroke, borderColor: color }} />
-        <View style={{ width: head, height: head, borderRadius: head / 2, borderWidth: stroke, borderColor: color }} />
-      </View>
-      <View
-        style={{
-          width: size * 0.72,
-          height: size * 0.26,
-          borderTopLeftRadius: size * 0.16,
-          borderTopRightRadius: size * 0.16,
-          borderWidth: stroke,
-          borderColor: color,
-          borderBottomWidth: 0,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeStarGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const arm = size * 0.34;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ position: 'absolute', width: arm, height: stroke, backgroundColor: color }} />
-      <View style={{ position: 'absolute', width: stroke, height: arm, backgroundColor: color }} />
-      <View style={{ position: 'absolute', width: arm, height: stroke, backgroundColor: color, transform: [{ rotate: '45deg' }] }} />
-      <View style={{ position: 'absolute', width: arm, height: stroke, backgroundColor: color, transform: [{ rotate: '-45deg' }] }} />
-      <View
-        style={{
-          width: size * 0.2,
-          height: size * 0.2,
-          borderRadius: size * 0.1,
-          backgroundColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeSignOutGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          position: 'absolute',
-          left: size * 0.12,
-          width: size * 0.34,
-          height: size * 0.34,
-          borderRadius: size * 0.17,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-      <View style={{ position: 'absolute', right: size * 0.1, width: size * 0.34, height: stroke, backgroundColor: color }} />
-      <View
-        style={{
-          position: 'absolute',
-          right: size * 0.1,
-          width: size * 0.16,
-          height: size * 0.16,
-          borderRightWidth: stroke,
-          borderTopWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '45deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-/** Olho aberto — mostrar senha. */
-export function AppChromeVisibilityGlyph({ color = m3Colors.onSurfaceVariant, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const eyeW = size * 0.82;
-  const eyeH = size * 0.46;
-  const pupil = size * 0.18;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: eyeW,
-          height: eyeH,
-          borderRadius: eyeH / 2,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          width: pupil,
-          height: pupil,
-          borderRadius: pupil / 2,
-          backgroundColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-/** Olho riscado — ocultar senha. */
-export function AppChromeVisibilityOffGlyph({ color = m3Colors.onSurfaceVariant, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const eyeW = size * 0.82;
-  const eyeH = size * 0.46;
-  const pupil = size * 0.18;
-  const slash = size * 0.88;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: eyeW,
-          height: eyeH,
-          borderRadius: eyeH / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          opacity: 0.72,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          width: pupil,
-          height: pupil,
-          borderRadius: pupil / 2,
-          backgroundColor: color,
-          opacity: 0.72,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          width: slash,
-          height: stroke,
-          backgroundColor: color,
-          borderRadius: 1,
-          transform: [{ rotate: '-35deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeCheckGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size) + 0.2;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: size * 0.42,
-          height: size * 0.22,
-          borderLeftWidth: stroke,
-          borderBottomWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '-45deg' }],
-          marginTop: -size * 0.06,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeArrowRightGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const shaft = size * 0.5;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ width: shaft, height: stroke, backgroundColor: color, borderRadius: 1, marginRight: size * 0.08 }} />
-      <View
-        style={{
-          position: 'absolute',
-          width: size * 0.28,
-          height: size * 0.28,
-          borderTopWidth: stroke,
-          borderRightWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '45deg' }],
-          right: size * 0.18,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeArrowUpRightGlyph({ color = m3Colors.onSurfaceVariant, size = 16 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ position: 'absolute', width: size * 0.55, height: stroke, backgroundColor: color, transform: [{ rotate: '-45deg' }] }} />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.18,
-          right: size * 0.18,
-          width: size * 0.32,
-          height: size * 0.32,
-          borderTopWidth: stroke,
-          borderRightWidth: stroke,
-          borderColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeArrowDownRightGlyph({ color = m3Colors.onSurfaceVariant, size = 16 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ position: 'absolute', width: size * 0.55, height: stroke, backgroundColor: color, transform: [{ rotate: '45deg' }] }} />
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.18,
-          right: size * 0.18,
-          width: size * 0.32,
-          height: size * 0.32,
-          borderBottomWidth: stroke,
-          borderRightWidth: stroke,
-          borderColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeReplyGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: size * 0.28,
-          height: size * 0.28,
-          borderLeftWidth: stroke,
-          borderBottomWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '45deg' }],
-          marginRight: size * 0.2,
-          marginTop: -size * 0.08,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          width: size * 0.42,
-          height: size * 0.36,
-          borderRightWidth: stroke,
-          borderBottomWidth: stroke,
-          borderColor: color,
-          borderBottomRightRadius: size * 0.2,
-          right: size * 0.16,
-          top: size * 0.28,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromePendingGlyph({ color = m3Colors.onSurfaceVariant, size = 16 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const dial = size * 0.72;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: dial,
-          height: dial,
-          borderRadius: dial / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View style={{ position: 'absolute', width: stroke, height: dial * 0.28, backgroundColor: color, top: dial * 0.14, borderRadius: 1 }} />
-        <View
-          style={{
-            position: 'absolute',
-            width: dial * 0.22,
-            height: stroke,
-            backgroundColor: color,
-            borderRadius: 1,
-            transform: [{ rotate: '45deg' }],
-            top: dial * 0.36,
-            left: dial * 0.4,
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeDownloadGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ width: stroke, height: size * 0.42, backgroundColor: color, borderRadius: 1, marginBottom: size * 0.08 }} />
-      <View
-        style={{
-          position: 'absolute',
-          width: size * 0.28,
-          height: size * 0.28,
-          borderRightWidth: stroke,
-          borderBottomWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '45deg' }],
-          top: size * 0.34,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.14,
-          width: size * 0.5,
-          height: stroke,
-          backgroundColor: color,
-          borderRadius: 1,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeRadioUncheckedGlyph({ color = m3Colors.onSurfaceVariant, size = 20 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const ring = size * 0.72;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: ring,
-          height: ring,
-          borderRadius: ring / 2,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeCopyGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const sheet = size * 0.46;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.14,
-          left: size * 0.18,
-          width: sheet,
-          height: sheet * 1.15,
-          borderRadius: size * 0.06,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.26,
-          left: size * 0.32,
-          width: sheet,
-          height: sheet * 1.15,
-          borderRadius: size * 0.06,
-          borderWidth: stroke,
-          borderColor: color,
-          backgroundColor: 'transparent',
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeAttachmentGlyph({ color = m3Colors.onSurfaceVariant, size = 16 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: size * 0.28,
-          height: size * 0.62,
-          borderRadius: size * 0.14,
-          borderWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '35deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromePollGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const barW = Math.max(2.2, size * 0.12);
-  const gap = size * 0.1;
-  return (
-    <View
-      style={{
-        width: size,
-        height: size,
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        justifyContent: 'center',
-        gap,
-        paddingBottom: size * 0.14,
-      }}
-    >
-      <View style={{ width: barW, height: size * 0.28, borderRadius: 1, backgroundColor: color }} />
-      <View style={{ width: barW, height: size * 0.48, borderRadius: 1, backgroundColor: color }} />
-      <View style={{ width: barW, height: size * 0.36, borderRadius: 1, backgroundColor: color }} />
-    </View>
-  );
-}
-
-export function AppChromeLockGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const body = size * 0.5;
-  const shackle = size * 0.34;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: shackle,
-          height: shackle * 0.7,
-          borderTopLeftRadius: shackle / 2,
-          borderTopRightRadius: shackle / 2,
-          borderWidth: stroke,
-          borderBottomWidth: 0,
-          borderColor: color,
-          marginBottom: -stroke,
-        }}
-      />
-      <View
-        style={{
-          width: body,
-          height: body * 0.72,
-          borderRadius: size * 0.08,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View style={{ width: size * 0.1, height: size * 0.14, borderRadius: 1, backgroundColor: color }} />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeVolumeOnGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: size * 0.22,
-          height: size * 0.28,
-          backgroundColor: color,
-          borderRadius: 2,
-          marginRight: size * 0.22,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          left: size * 0.28,
-          width: 0,
-          height: 0,
-          borderTopWidth: size * 0.22,
-          borderBottomWidth: size * 0.22,
-          borderRightWidth: size * 0.2,
-          borderTopColor: 'transparent',
-          borderBottomColor: 'transparent',
-          borderRightColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          right: size * 0.12,
-          width: size * 0.28,
-          height: size * 0.28,
-          borderRadius: size * 0.14,
-          borderWidth: stroke,
-          borderColor: color,
-          borderLeftWidth: 0,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeVolumeOffGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <AppChromeVolumeOnGlyph color={color} size={size} />
-      <View
-        style={{
-          position: 'absolute',
-          width: size * 0.72,
-          height: stroke,
-          backgroundColor: color,
-          borderRadius: 1,
-          transform: [{ rotate: '-35deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeInfoGlyph({ color = m3Colors.onSurface, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const ring = size * 0.78;
-  const dot = Math.max(2, size * 0.1);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: ring,
-          height: ring,
-          borderRadius: ring / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: color, marginBottom: size * 0.06 }} />
-        <View style={{ width: stroke, height: size * 0.22, borderRadius: 1, backgroundColor: color }} />
-      </View>
-    </View>
-  );
-}
-
-export function AppChromeWarningGlyph({ color = m3Colors.error, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const dot = Math.max(2, size * 0.1);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: 0,
-          height: 0,
-          borderLeftWidth: size * 0.38,
-          borderRightWidth: size * 0.38,
-          borderBottomWidth: size * 0.66,
-          borderLeftColor: 'transparent',
-          borderRightColor: 'transparent',
-          borderBottomColor: color,
-          opacity: 0.2,
-        }}
-      />
-      <View style={{ position: 'absolute', width: stroke, height: size * 0.22, backgroundColor: color, top: size * 0.28, borderRadius: 1 }} />
-      <View style={{ position: 'absolute', width: dot, height: dot, borderRadius: dot / 2, backgroundColor: color, bottom: size * 0.22 }} />
-    </View>
-  );
-}
-
-export function AppChromeSignalGlyph({ color = m3Colors.onSurfaceVariant, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: size * 0.55,
-          height: size * 0.55,
-          borderRadius: size * 0.28,
-          borderWidth: stroke,
-          borderColor: color,
-          borderBottomWidth: 0,
-          borderLeftWidth: 0,
-          transform: [{ rotate: '-45deg' }],
-          marginTop: size * 0.1,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          width: size * 0.32,
-          height: size * 0.32,
-          borderRadius: size * 0.16,
-          borderWidth: stroke,
-          borderColor: color,
-          borderBottomWidth: 0,
-          borderLeftWidth: 0,
-          transform: [{ rotate: '-45deg' }],
-          top: size * 0.34,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          width: size * 0.12,
-          height: size * 0.12,
-          borderRadius: size * 0.06,
-          backgroundColor: color,
-          bottom: size * 0.22,
-        }}
-      />
-    </View>
-  );
-}
-
-export function AppChromeHourglassGlyph({ color = m3Colors.onSurfaceVariant, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const frame = size * 0.5;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View style={{ width: frame, height: stroke, backgroundColor: color, borderRadius: 1 }} />
-      <View
-        style={{
-          width: frame * 0.7,
-          height: size * 0.22,
-          borderLeftWidth: stroke,
-          borderRightWidth: stroke,
-          borderColor: color,
-          marginVertical: 1,
-        }}
-      />
-      <View style={{ width: frame * 0.35, height: stroke, backgroundColor: color, borderRadius: 1 }} />
-      <View
-        style={{
-          width: frame * 0.7,
-          height: size * 0.22,
-          borderLeftWidth: stroke,
-          borderRightWidth: stroke,
-          borderColor: color,
-          marginVertical: 1,
-        }}
-      />
-      <View style={{ width: frame, height: stroke, backgroundColor: color, borderRadius: 1 }} />
-    </View>
-  );
-}
-
-export function AppChromeBellGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const body = size * 0.52;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: body * 0.28,
-          height: body * 0.18,
-          borderTopLeftRadius: body * 0.14,
-          borderTopRightRadius: body * 0.14,
-          borderWidth: stroke,
-          borderBottomWidth: 0,
-          borderColor: color,
-          marginBottom: -1,
-        }}
-      />
-      <View
-        style={{
-          width: body,
-          height: body * 0.7,
-          borderTopLeftRadius: body * 0.5,
-          borderTopRightRadius: body * 0.5,
-          borderWidth: stroke,
-          borderColor: color,
-        }}
-      />
-      <View style={{ width: body * 1.15, height: stroke, backgroundColor: color, borderRadius: 1, marginTop: 1 }} />
-      <View
-        style={{
-          width: body * 0.22,
-          height: body * 0.14,
-          borderBottomLeftRadius: body * 0.11,
-          borderBottomRightRadius: body * 0.11,
-          backgroundColor: color,
-          marginTop: 1,
-        }}
-      />
-    </View>
-  );
-}
-
-/** Share / export — box with upward arrow. */
-export function AppChromeShareGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          position: 'absolute',
-          bottom: size * 0.18,
-          width: size * 0.62,
-          height: size * 0.42,
-          borderWidth: stroke,
-          borderTopWidth: 0,
-          borderColor: color,
-          borderBottomLeftRadius: size * 0.1,
-          borderBottomRightRadius: size * 0.1,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.16,
-          width: stroke,
-          height: size * 0.38,
-          backgroundColor: color,
-          borderRadius: 1,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.14,
-          width: size * 0.28,
-          height: size * 0.28,
-          borderLeftWidth: stroke,
-          borderTopWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: '45deg' }],
-        }}
-      />
-    </View>
-  );
-}
-
-/** Gift / referral reward — box with ribbon. */
-export function AppChromeGiftGlyph({ color = m3Colors.primary, size = 24 }: AppChromeGlyphProps) {
-  const stroke = strokeFor(size);
-  const box = size * 0.55;
-  return (
-    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
-      <View
-        style={{
-          width: box,
-          height: box * 0.72,
-          marginTop: size * 0.12,
-          borderWidth: stroke,
-          borderColor: color,
-          borderRadius: size * 0.06,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.22,
-          width: box,
-          height: stroke,
-          backgroundColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.28,
-          width: stroke,
-          height: box * 0.72,
-          backgroundColor: color,
-        }}
-      />
-      <View
-        style={{
-          position: 'absolute',
-          top: size * 0.1,
-          width: size * 0.22,
-          height: size * 0.16,
-          borderWidth: stroke,
-          borderColor: color,
-          borderRadius: size * 0.11,
-        }}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  crosshair: {
-    position: 'absolute',
-    borderRadius: 1,
-  },
-  diag: {
-    position: 'absolute',
-    borderRadius: 1,
-  },
-});