feat(m1): generative Flaeche — Orb + Karten-Renderer (present_view)

Visueller Renderer fuer aria_view: Orb (reanimated-Puls je Zustand), CardView (text/image/list/map/code, Sci-Fi-Chrome), AriaViewCanvas (pannbare Flaeche, 2-Finger-Pan + Pinch, Karten materialisieren gestaffelt). WorkspaceScreen blendet die Flaeche als Overlay ueber Chat/Cockpit ein, sobald ARIA fuers fokussierte Projekt eine Ansicht komponiert. v1/Vorgeschmack, tsc-clean; Markdown=Klartext, Map=Marker-Liste. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-08-15 03:22:08 +02:00
parent 3a8202d2de
commit b6a5d7029f
4 changed files with 432 additions and 6 deletions
@@ -0,0 +1,175 @@
+/**
+ * AriaViewCanvas — die pannbare Flaeche, auf der ARIAs komponierte Ansicht
+ * (aria_view) MATERIALISIERT: Orb oben, darunter die Karten. Erscheint als
+ * Overlay ueber dem Chat, sobald ARIA present_view aufruft ("sag was → Orb denkt
+ * → Karte fliegt rein"). Der erste, greifbare Vorgeschmack aufs generative
+ * Cockpit (M1).
+ *
+ * Bedienung (NoMachine-Prinzip): 2-Finger halten + schieben bewegt die Welt,
+ * Pinch zoomt. Ein-Finger-Touch geht an die Karten durch (Scrollen). Die Welt
+ * traegt gerenderte/gestreamte Inhalte — interaktive native Panels rasten
+ * spaeter bei Scale 1 ein (Chat bleibt separat darunter).
+ *
+ * Geraete-agnostisch gehalten: liest nur die ViewSpec, damit ein spaeterer Web-/
+ * AR-Renderer dieselbe Spec konsumieren kann.
+ */
+
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  FadeInDown,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { ViewSpec } from '../services/ariaView';
+import Orb from './Orb';
+import CardView from './CardView';
+
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 3;
+
+interface Props {
+  view: ViewSpec;
+  onClose: () => void;
+}
+
+const AriaViewCanvas: React.FC<Props> = ({ view, onClose }) => {
+  const tx = useSharedValue(0);
+  const ty = useSharedValue(0);
+  const scale = useSharedValue(1);
+  const savedTx = useSharedValue(0);
+  const savedTy = useSharedValue(0);
+  const savedScale = useSharedValue(1);
+
+  const pan = Gesture.Pan()
+    .minPointers(2)
+    .maxPointers(2)
+    .onUpdate((e) => {
+      tx.value = savedTx.value + e.translationX;
+      ty.value = savedTy.value + e.translationY;
+    })
+    .onEnd(() => {
+      savedTx.value = tx.value;
+      savedTy.value = ty.value;
+    });
+
+  const pinch = Gesture.Pinch()
+    .onUpdate((e) => {
+      const next = savedScale.value * e.scale;
+      scale.value = Math.max(MIN_SCALE, Math.min(MAX_SCALE, next));
+    })
+    .onEnd(() => {
+      savedScale.value = scale.value;
+    });
+
+  const composed = Gesture.Simultaneous(pan, pinch);
+
+  const worldStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: tx.value },
+      { translateY: ty.value },
+      { scale: scale.value },
+    ],
+  }));
+
+  const resetCamera = () => {
+    tx.value = withTiming(0);
+    ty.value = withTiming(0);
+    scale.value = withTiming(1);
+    savedTx.value = 0;
+    savedTy.value = 0;
+    savedScale.value = 1;
+  };
+
+  const cards = Array.isArray(view.cards) ? view.cards : [];
+
+  return (
+    <View style={styles.overlay}>
+      <GestureDetector gesture={composed}>
+        <Animated.View style={[styles.world, worldStyle]}>
+          <View style={styles.orbWrap}>
+            <Orb state={view.orb} size={110} />
+          </View>
+          {!!view.title && <Text style={styles.worldTitle}>{view.title}</Text>}
+          <View style={styles.cards}>
+            {cards.map((c, i) => (
+              <Animated.View
+                key={i}
+                entering={FadeInDown.duration(420).delay(120 + i * 90)}
+              >
+                <CardView card={c} />
+              </Animated.View>
+            ))}
+          </View>
+        </Animated.View>
+      </GestureDetector>
+
+      {/* Steuerung — ausserhalb des Transforms, immer bei Scale 1 bedienbar */}
+      <View style={styles.topBar} pointerEvents="box-none">
+        <TouchableOpacity style={styles.iconBtn} onPress={resetCamera}>
+          <Text style={styles.icon}>⤢</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.iconBtn} onPress={onClose}>
+          <Text style={styles.icon}>✕</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.hintWrap} pointerEvents="none">
+        <Text style={styles.hint}>2 Finger: schieben · Pinch: zoomen</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(6,6,16,0.94)',
+    zIndex: 50,
+  },
+  world: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    paddingTop: 48,
+    paddingHorizontal: 18,
+  },
+  orbWrap: { marginTop: 8, marginBottom: 6 },
+  worldTitle: {
+    color: '#C9C9FF',
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 4,
+    textAlign: 'center',
+  },
+  cards: { width: '100%', maxWidth: 560 },
+  topBar: {
+    position: 'absolute',
+    top: 10,
+    right: 12,
+    flexDirection: 'row',
+  },
+  iconBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    marginLeft: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(30,30,60,0.9)',
+    borderWidth: 1,
+    borderColor: 'rgba(123,92,255,0.4)',
+  },
+  icon: { color: '#C9C9FF', fontSize: 18 },
+  hintWrap: {
+    position: 'absolute',
+    bottom: 14,
+    alignSelf: 'center',
+  },
+  hint: {
+    color: '#6A6A90',
+    fontSize: 12,
+  },
+});
+
+export default AriaViewCanvas;