aniview 1.0.0

package/src/AniviewPanel.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { View, ViewStyle } from 'react-native';
+import Aniview from './Aniview';
+import { AniviewProps, AniviewFrame } from './useAniviewContext';
+
+const DEFAULT_LAYOUT = {
+  CONTENT_BG: '#FFFFFF',
+  FRAME_INK: '#2D2D2D',
+  FRAME_WOOD: '#C19A6B',
+  BORR: 8,
+  FRAME_WIDTH: 2,
+  OUTLINE_WIDTH: 1,
+  GUTTER_H: 16
+};
+
+/**
+ * PANEL FRAME (Visual Only)
+ */
+interface PanelFrameProps {
+  width?: number | string;
+  height?: number | string;
+  backgroundColor?: string;
+  children?: React.ReactNode;
+  style?: ViewStyle;
+  clipContent?: boolean;
+}
+
+export const PanelFrame = ({
+  width,
+  height,
+  backgroundColor = DEFAULT_LAYOUT.CONTENT_BG,
+  children,
+  style,
+  clipContent = true
+}: PanelFrameProps) => {
+
+  const frameWidth = DEFAULT_LAYOUT.FRAME_WIDTH;
+  const inkWidth = DEFAULT_LAYOUT.OUTLINE_WIDTH;
+
+  return (
+    <View
+      style={{
+        width: width as any,
+        height: height as any,
+        borderWidth: inkWidth,
+        borderColor: DEFAULT_LAYOUT.FRAME_INK,
+        borderRadius: DEFAULT_LAYOUT.BORR,
+        backgroundColor: 'transparent',
+        overflow: clipContent ? 'hidden' : 'visible',
+        ...style
+      }}
+    >
+      <View 
+        style={{
+          flex: 1,
+          borderWidth: frameWidth,
+          borderColor: DEFAULT_LAYOUT.FRAME_WOOD,
+          backgroundColor: 'transparent',
+          overflow: clipContent ? 'hidden' : 'visible'
+        }}
+      >
+        <View 
+          style={{
+            flex: 1,
+            backgroundColor: 'transparent',
+            borderWidth: inkWidth,
+            borderColor: DEFAULT_LAYOUT.FRAME_INK,
+            borderRadius: Math.max(0, DEFAULT_LAYOUT.BORR - frameWidth - inkWidth),
+            overflow: clipContent ? 'hidden' : 'visible'
+          }}
+        >
+          {children}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+/**
+ * ANIVIEW PANEL (Animated component)
+ */
+export interface AniviewPanelProps extends AniviewProps {
+  pageId: number | string;
+  width: number;
+  height: number;
+  marginTop?: number;
+  marginLeft?: number;
+  backgroundColor?: string;
+  frames?: Record<string, AniviewFrame> | AniviewFrame[];
+  style?: ViewStyle;
+  children?: React.ReactNode;
+  clipContent?: boolean;
+}
+
+export const AniviewPanel = (props: AniviewPanelProps) => {
+  const {
+    pageId,
+    width,
+    height,
+    marginTop = 0,
+    marginLeft = 0,
+    backgroundColor,
+    frames,
+    children,
+    style,
+    clipContent = true,
+    ...rest
+  } = props;
+
+  const hasExternalBg = !!(style as any)?.backgroundColor || 
+    (frames && (Array.isArray(frames) 
+      ? frames.some(f => (f.style as any)?.backgroundColor) 
+      : Object.values(frames).some(f => (f.style as any)?.backgroundColor)));
+  
+  const innerBg = hasExternalBg ? 'transparent' : (backgroundColor || 'transparent');
+
+  return (
+    <Aniview
+      pageId={pageId}
+      frames={frames as any}
+      style={{
+        width,
+        height,
+        marginTop,
+        marginLeft,
+        backgroundColor: backgroundColor || (style as any)?.backgroundColor,
+        ...(style as any)
+      }}
+      {...rest}
+    >
+      <PanelFrame
+        width="100%"
+        height="100%"
+        backgroundColor={innerBg}
+        clipContent={clipContent}
+      >
+        {children as React.ReactNode}
+      </PanelFrame>
+    </Aniview>
+  );
+};

package/src/GestureStressTest.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { 
+  GestureDetector, 
+  Gesture,
+} from 'react-native-gesture-handler';
+import Animated, { 
+  useAnimatedStyle, 
+  useSharedValue, 
+  withSpring,
+  runOnJS
+} from 'react-native-reanimated';
+
+import { useAniview } from './useAniview';
+
+export default function GestureStressTest() {
+  const { lock } = useAniview();
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(1);
+
+  // LOGGING UTILITY
+  const logGesture = (name: string, state: string, x?: number, y?: number) => {
+    console.log(`[GESTURE: ${name}] State: ${state} | X: ${Math.round(x || 0)} Y: ${Math.round(y || 0)}`);
+  };
+
+  const panGesture = Gesture.Pan()
+    .onStart((event: any) => {
+      runOnJS(lock)(1); // 1 = Horizontal Lock
+      runOnJS(logGesture)('PAN', 'START', event.x, event.y);
+      opacity.value = 0.8;
+    })
+    .onUpdate((event: any) => {
+      translateX.value = event.translationX;
+      translateY.value = event.translationY;
+    })
+    .onEnd((event: any) => {
+        runOnJS(lock)(0); // Unlock
+        runOnJS(logGesture)('PAN', 'END', event.x, event.y);
+        translateX.value = withSpring(0);
+        translateY.value = withSpring(0);
+        opacity.value = withSpring(1);
+    });
+
+  const tapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd((event: any) => {
+      runOnJS(logGesture)('DOUBLE_TAP', 'END', event.x, event.y);
+      scale.value = withSpring(1.5, {}, () => {
+          scale.value = withSpring(1);
+      });
+    });
+
+  const longPressGesture = Gesture.LongPress()
+    .onEnd((event: any, success: boolean) => {
+      if (success) {
+        runOnJS(logGesture)('LONG_PRESS', 'SUCCESS', event.x, event.y);
+        opacity.value = withSpring(0.3, {}, () => {
+            opacity.value = withSpring(1);
+        });
+      }
+    });
+
+  const composed = Gesture.Simultaneous(panGesture, tapGesture, longPressGesture);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+      { scale: scale.value }
+    ],
+    opacity: opacity.value
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>GESTURE ORCHESTRATION 2.0</Text>
+      
+      <GestureDetector gesture={composed}>
+        <Animated.View style={[styles.box, animatedStyle]}>
+          <Text style={styles.boxText}>PAN / DOUBLE-TAP / LONG-PRESS</Text>
+          <Text style={styles.hint}>Testing Parallel Dispatch (Simultaneous)</Text>
+        </Animated.View>
+      </GestureDetector>
+
+      <View style={styles.logIndicator}>
+        <Text style={styles.logText}>Check Console for Orchestration Traces</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    opacity: 0.6,
+  },
+  box: {
+    width: 300,
+    height: 300,
+    backgroundColor: '#1c1c1e',
+    borderRadius: 30,
+    borderWidth: 1,
+    borderColor: '#38383a',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    elevation: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.5,
+    shadowRadius: 15,
+  },
+  boxText: {
+    color: '#0a84ff',
+    fontSize: 18,
+    fontWeight: '800',
+    textAlign: 'center',
+  },
+  hint: {
+    color: '#8e8e93',
+    marginTop: 10,
+    fontSize: 12,
+  },
+  logIndicator: {
+    marginTop: 30,
+    padding: 10,
+    backgroundColor: 'rgba(255,255,255,0.05)',
+    borderRadius: 10,
+  },
+  logText: {
+    color: '#636366',
+    fontSize: 11,
+  }
+});

package/src/__tests__/AniviewLock.test.ts

@@ -0,0 +1,58 @@
+/**
+ * AniviewLock — Bitmask generation unit tests
+ *
+ * Enable/disable: ANIVIEW_TEST_LOCK=1 npm test
+ * Or: npx jest --testPathPattern=AniviewLock
+ */
+
+import { AniviewLock } from '../core/AniviewLock';
+
+describe('AniviewLock.mask', () => {
+  test('empty object returns 0 (no locks)', () => {
+    expect(AniviewLock.mask({})).toBe(0);
+  });
+
+  test('left = 1', () => {
+    expect(AniviewLock.mask({ left: true })).toBe(1);
+  });
+
+  test('right = 2', () => {
+    expect(AniviewLock.mask({ right: true })).toBe(2);
+  });
+
+  test('up = 4', () => {
+    expect(AniviewLock.mask({ up: true })).toBe(4);
+  });
+
+  test('down = 8', () => {
+    expect(AniviewLock.mask({ down: true })).toBe(8);
+  });
+
+  test('left + right = 3', () => {
+    expect(AniviewLock.mask({ left: true, right: true })).toBe(3);
+  });
+
+  test('up + down = 12', () => {
+    expect(AniviewLock.mask({ up: true, down: true })).toBe(12);
+  });
+
+  test('all directions = 15', () => {
+    expect(AniviewLock.mask({ left: true, right: true, up: true, down: true })).toBe(15);
+  });
+
+  test('false values are ignored', () => {
+    expect(AniviewLock.mask({ left: false, right: true })).toBe(2);
+  });
+
+  test('undefined values are ignored', () => {
+    expect(AniviewLock.mask({ left: undefined, up: true })).toBe(4);
+  });
+
+  test('horizontal only (left + right) blocks horizontal axis', () => {
+    const mask = AniviewLock.mask({ left: true, right: true });
+    expect(mask & 1).toBeTruthy(); // left blocked
+    expect(mask & 2).toBeTruthy(); // right blocked
+    expect(mask & 4).toBeFalsy();  // up open
+    expect(mask & 8).toBeFalsy();  // down open
+  });
+});

package/src/__tests__/AniviewMath.test.ts

@@ -0,0 +1,211 @@
+/**
+ * AniviewMath — Pure function unit tests
+ *
+ * Enable/disable: ANIVIEW_TEST_MATH=1 npm test
+ * Or: npx jest --testPathPattern=AniviewMath
+ */
+import {
+  pageIdToMatrixPos,
+  calculateAxisOffset,
+  getPageOffset,
+  getWorldBounds,
+} from '../core/AniviewMath';
+
+// ──────────────────────────────────────────────
+// pageIdToMatrixPos
+// ──────────────────────────────────────────────
+describe('pageIdToMatrixPos', () => {
+  const ROW_3  = [[1, 1, 1]];         // 1 row, 3 cols
+  const GRID_2x2 = [[1, 1], [1, 1]];  // 2 rows, 2 cols
+  const SINGLE  = [[1]];              // 1 page
+
+  test('maps ID 0 to (0,0) in a 1×3 layout', () => {
+    expect(pageIdToMatrixPos(0, ROW_3)).toEqual({ r: 0, c: 0 });
+  });
+
+  test('maps ID 2 to (0,2) in a 1×3 layout', () => {
+    expect(pageIdToMatrixPos(2, ROW_3)).toEqual({ r: 0, c: 2 });
+  });
+
+  test('maps ID 3 to (1,0) in a 2×2 layout', () => {
+    expect(pageIdToMatrixPos(3, GRID_2x2)).toEqual({ r: 1, c: 1 });
+  });
+
+  test('maps ID 2 to (1,0) in a 2×2 layout', () => {
+    expect(pageIdToMatrixPos(2, GRID_2x2)).toEqual({ r: 1, c: 0 });
+  });
+
+  test('handles single-page layout', () => {
+    expect(pageIdToMatrixPos(0, SINGLE)).toEqual({ r: 0, c: 0 });
+  });
+
+  test('returns sentinel for negative ID', () => {
+    expect(pageIdToMatrixPos(-1, ROW_3)).toEqual({ r: 9999, c: 9999 });
+  });
+
+  test('returns sentinel for out-of-bounds ID', () => {
+    expect(pageIdToMatrixPos(5, ROW_3)).toEqual({ r: 9999, c: 9999 });
+  });
+
+  test('returns sentinel for ID exactly past max', () => {
+    // 1×3 layout → max valid ID is 2
+    expect(pageIdToMatrixPos(3, ROW_3)).toEqual({ r: 9999, c: 9999 });
+  });
+});
+
+
+// ──────────────────────────────────────────────
+// calculateAxisOffset
+// ──────────────────────────────────────────────
+describe('calculateAxisOffset', () => {
+  const W = 400; // page width/height
+
+  test('returns 0 when from === to', () => {
+    expect(calculateAxisOffset(0, 0, W, [])).toBe(0);
+  });
+
+  test('returns screenWidth for 1 step with no overlap', () => {
+    expect(calculateAxisOffset(0, 1, W, [0])).toBe(W);
+  });
+
+  test('returns half screenWidth when overlap is 0.5', () => {
+    expect(calculateAxisOffset(0, 1, W, [0.5])).toBe(W * 0.5);
+  });
+
+  test('returns negative offset for reverse direction', () => {
+    expect(calculateAxisOffset(1, 0, W, [0])).toBe(-W);
+  });
+
+  test('accumulates correctly over 3 steps with no overlap', () => {
+    expect(calculateAxisOffset(0, 3, W, [0, 0, 0])).toBe(W * 3);
+  });
+
+  test('accumulates with mixed overlaps (layout)', () => {
+    // uses cols: [0.5, 0.4] for 3 columns
+    // Step 0→1: W * (1 - 0.5) = 200
+    // Step 1→2: W * (1 - 0.4) = 240
+    // Total: 440
+    expect(calculateAxisOffset(0, 2, W, [0.5, 0.4])).toBe(440);
+  });
+
+  test('handles missing overlaps (treated as 0)', () => {
+    // Only 1 overlap value but crossing 2 gaps
+    // Step 0→1: W * (1 - 0.3) = 280
+    // Step 1→2: W * (1 - 0) = 400 (missing overlap → 0)
+    expect(calculateAxisOffset(0, 2, W, [0.3])).toBe(680);
+  });
+
+  test('single step with full overlap (1.0) returns 0', () => {
+    expect(calculateAxisOffset(0, 1, W, [1.0])).toBe(0);
+  });
+});
+
+
+// ──────────────────────────────────────────────
+// getPageOffset
+// ──────────────────────────────────────────────
+describe('getPageOffset', () => {
+  const DIMS = { width: 400, height: 800 };
+
+  test('origin page returns (0, 0)', () => {
+    const layout = [[1, 1, 1]];
+    expect(getPageOffset(1, layout, DIMS, 1, [], [0, 0])).toEqual({ x: 0, y: 0 });
+  });
+
+  test('adjacent page with no overlap returns (screenWidth, 0)', () => {
+    const layout = [[1, 1]];
+    expect(getPageOffset(1, layout, DIMS, 0, [], [0])).toEqual({ x: 400, y: 0 });
+  });
+
+  test('page below origin returns (0, screenHeight)', () => {
+    const layout = [[1], [1]];
+    expect(getPageOffset(1, layout, DIMS, 0, [0], [])).toEqual({ x: 0, y: 800 });
+  });
+
+  test('page to left of origin returns negative x', () => {
+    const layout = [[1, 1, 1]];
+    expect(getPageOffset(0, layout, DIMS, 1, [], [0, 0])).toEqual({ x: -400, y: 0 });
+  });
+
+  test('layout: CANVAS from ROOM (overlap 0.5)', () => {
+    // Layout: [[1,1,1]], origin = 1 (ROOM), cols overlap = [0.5, 0.4]
+    const layout = [[1, 1, 1]];
+    const offset = getPageOffset(0, layout, DIMS, 1, [], [0.5, 0.4]);
+    // CANVAS (col 0) to ROOM (col 1): -W * (1 - 0.5) = -200
+    expect(offset).toEqual({ x: -200, y: 0 });
+  });
+
+  test('layout: DRAWERS from ROOM (overlap 0.4)', () => {
+    const layout = [[1, 1, 1]];
+    const offset = getPageOffset(2, layout, DIMS, 1, [], [0.5, 0.4]);
+    // DRAWERS (col 2) to ROOM (col 1): W * (1 - 0.4) = 240
+    expect(offset).toEqual({ x: 240, y: 0 });
+  });
+
+  test('2×2 grid: diagonal page offset', () => {
+    const layout = [[1, 1], [1, 1]];
+    // Page 3 is (1,1), origin 0 is (0,0)
+    const offset = getPageOffset(3, layout, DIMS, 0, [0], [0]);
+    expect(offset).toEqual({ x: 400, y: 800 });
+  });
+});
+
+
+// ──────────────────────────────────────────────
+// getWorldBounds
+// ──────────────────────────────────────────────
+describe('getWorldBounds', () => {
+  const DIMS = { width: 400, height: 800 };
+
+  test('single page returns all zeros', () => {
+    const bounds = getWorldBounds([0], [[1]], DIMS, 0, [], []);
+    expect(bounds).toEqual({ minX: 0, maxX: 0, minY: 0, maxY: 0 });
+  });
+
+  test('empty pages array returns all zeros', () => {
+    const bounds = getWorldBounds([], [[1]], DIMS, 0, [], []);
+    expect(bounds).toEqual({ minX: 0, maxX: 0, minY: 0, maxY: 0 });
+  });
+
+  test('3 horizontal pages, no overlap, origin at 0', () => {
+    const layout = [[1, 1, 1]];
+    const bounds = getWorldBounds([0, 1, 2], layout, DIMS, 0, [], [0, 0]);
+    expect(bounds.minX).toBe(0);
+    expect(bounds.maxX).toBe(800); // 2 × 400
+    expect(bounds.minY).toBe(0);
+    expect(bounds.maxY).toBe(0);
+  });
+
+  test('3 horizontal pages, origin at center', () => {
+    const layout = [[1, 1, 1]];
+    const bounds = getWorldBounds([0, 1, 2], layout, DIMS, 1, [], [0, 0]);
+    expect(bounds.minX).toBe(-400);
+    expect(bounds.maxX).toBe(400);
+  });
+
+  test('layout bounds (overlaps, origin at ROOM)', () => {
+    const layout = [[1, 1, 1]];
+    const bounds = getWorldBounds([0, 1, 2], layout, DIMS, 1, [], [0.5, 0.4]);
+    // CANVAS: -200, ROOM: 0, DRAWERS: +240
+    expect(bounds.minX).toBe(-200);
+    expect(bounds.maxX).toBe(240);
+    expect(bounds.minY).toBe(0);
+    expect(bounds.maxY).toBe(0);
+  });
+
+  test('2×2 grid spans both axes', () => {
+    const layout = [[1, 1], [1, 1]];
+    const bounds = getWorldBounds([0, 1, 2, 3], layout, DIMS, 0, [0], [0]);
+    expect(bounds.minX).toBe(0);
+    expect(bounds.maxX).toBe(400);
+    expect(bounds.minY).toBe(0);
+    expect(bounds.maxY).toBe(800);
+  });
+
+  test('overlaps reduce bounds magnitude', () => {
+    const layout = [[1, 1]];
+    const noOverlap = getWorldBounds([0, 1], layout, DIMS, 0, [], [0]);
+    const withOverlap = getWorldBounds([0, 1], layout, DIMS, 0, [], [0.5]);
+    expect(withOverlap.maxX).toBe(noOverlap.maxX * 0.5);
+  });
+});

package/src/__tests__/AniviewSnapshot.test.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { View, Text, StyleSheet } from 'react-native';
+
+// Mock Reanimated
+jest.mock('react-native-reanimated', () => {
+    const Reanimated = require('react-native-reanimated/mock');
+    return Reanimated;
+});
+
+// Mock Aniview component to verify layout logic
+jest.mock('../Aniview', () => {
+  const { View } = require('react-native');
+  return jest.fn((props: any) => {
+    return <View testID="aniview-mock" style={props.style}>{props.children}</View>;
+  });
+});
+
+import Aniview from '../Aniview';
+
+describe('Aniview Snapshot Suite', () => {
+  
+  const TestLayout = ({ outerFlex, innerFlex, textPos }: any) => (
+    <Aniview pageId={1} style={[styles.outer, outerFlex]}>
+        <View style={[styles.inner, innerFlex]}>
+          <Text style={[styles.text, textPos]}>Main Content</Text>
+          <Aniview pageId={2} style={styles.nested}>
+             <Text>Nested Item</Text>
+          </Aniview>
+        </View>
+    </Aniview>
+  );
+
+  it('Scenario 1: Default Center Aligned', () => {
+    const tree = renderer.create(
+      <TestLayout 
+        outerFlex={{ justifyContent: 'center', alignItems: 'center' }}
+        innerFlex={{ padding: 20, backgroundColor: '#eee' }}
+        textPos={{ fontSize: 20 }}
+      />
+    ).toJSON();
+    console.log('TREE 1:', JSON.stringify(tree)); // DEBUG
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Scenario 2: Space-Between Flex with Absolute Text', () => {
+    const tree = renderer.create(
+      <TestLayout 
+        outerFlex={{ justifyContent: 'space-between', flexDirection: 'row' }}
+        innerFlex={{ flex: 1, alignItems: 'flex-end' }}
+        textPos={{ position: 'absolute', top: 10, right: 10, color: 'blue' }}
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Scenario 3: Column Reverse with Margin Auto', () => {
+    const tree = renderer.create(
+        <TestLayout 
+          outerFlex={{ flexDirection: 'column-reverse' }}
+          innerFlex={{ marginTop: 'auto', marginBottom: 20 }}
+          textPos={{ textAlign: 'center', fontWeight: 'bold' }}
+        />
+      ).toJSON();
+      expect(tree).toMatchSnapshot();
+  });
+});
+
+const styles = StyleSheet.create({
+  outer: {
+    width: '100%',
+    height: '100%',
+  },
+  inner: {
+    borderRadius: 10,
+  },
+  text: {
+    fontFamily: 'System',
+  },
+  nested: {
+    width: 100,
+    height: 50,
+    backgroundColor: 'rgba(0,0,0,0.1)',
+  }
+});

package/src/__tests__/__snapshots__/AniviewSnapshot.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Aniview Snapshot Suite Scenario 1: Default Center Aligned 1`] = `null`;
+
+exports[`Aniview Snapshot Suite Scenario 2: Space-Between Flex with Absolute Text 1`] = `null`;
+
+exports[`Aniview Snapshot Suite Scenario 3: Column Reverse with Margin Auto 1`] = `null`;