rpr-cli 0.1.25__tar.gz → 0.1.26__tar.gz

{rpr_cli-0.1.25 → rpr_cli-0.1.26}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: rpr-cli
-Version: 0.1.25
+Version: 0.1.26
 Summary: RPR CLI -- React Python Rust monorepo scaffolding orchestrator
 License-Expression: MIT
 License-File: LICENSE
@@ -106,11 +106,15 @@ The scaffold version manifest that powers generated dependency specs and the syn
 Sync project context to your favorite AI tools and add common code patterns.
 
 ```bash
-rpr sync rules               # Sync AI instructions to Cursor, Copilot, Claude Code, and Gemini
-rpr add template mapper_util # Add a common code template to your project
-rpr add template --list      # List all available code templates
+rpr sync rules                         # Sync AI instructions to Cursor, Copilot, Claude Code, and Gemini
+rpr add template python mapper_util    # Add a Python code template to your project
+rpr add template node sticky_navigation --include-tests
+rpr add template node -l               # List available Node/TSX templates
+rpr add template --list                # List all available code templates
 ```
 
+Use `--output-dir` to write generated files to a different directory while keeping the template filenames. Templates with test companions can use `--include-tests`; Node browser-test templates print the extra npm dev dependencies and any Playwright setup notes they need. Existing config files such as `vitest.config.ts` are not merged automatically; RPR leaves them unchanged unless you rerun with `--force` to replace them.
+
 ### 💬 Interactive Shell
 
 `rpr chat` is the primary interactive shell for the product. It runs a Rich-based session with slash commands for both chat controls and existing CLI workflows.

{rpr_cli-0.1.25 → rpr_cli-0.1.26}/README.md

@@ -91,11 +91,15 @@ The scaffold version manifest that powers generated dependency specs and the syn
 Sync project context to your favorite AI tools and add common code patterns.
 
 ```bash
-rpr sync rules               # Sync AI instructions to Cursor, Copilot, Claude Code, and Gemini
-rpr add template mapper_util # Add a common code template to your project
-rpr add template --list      # List all available code templates
+rpr sync rules                         # Sync AI instructions to Cursor, Copilot, Claude Code, and Gemini
+rpr add template python mapper_util    # Add a Python code template to your project
+rpr add template node sticky_navigation --include-tests
+rpr add template node -l               # List available Node/TSX templates
+rpr add template --list                # List all available code templates
 ```
 
+Use `--output-dir` to write generated files to a different directory while keeping the template filenames. Templates with test companions can use `--include-tests`; Node browser-test templates print the extra npm dev dependencies and any Playwright setup notes they need. Existing config files such as `vitest.config.ts` are not merged automatically; RPR leaves them unchanged unless you rerun with `--force` to replace them.
+
 ### 💬 Interactive Shell
 
 `rpr chat` is the primary interactive shell for the product. It runs a Rich-based session with slash commands for both chat controls and existing CLI workflows.

rpr_cli-0.1.26/Sample-dot-github/scaffolds/frontend/virtual-list/VirtualComponent.spec.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { flushSync } from 'react-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { VirtualComponent } from './VirtualComponent';
+
+const createRect = (height: number) =>
+  ({
+    x: 0,
+    y: 0,
+    width: 100,
+    height,
+    top: 0,
+    right: 100,
+    bottom: height,
+    left: 0,
+    toJSON: () => ({}),
+  }) as DOMRect;
+
+class MockResizeObserver implements ResizeObserver {
+  static instances: MockResizeObserver[] = [];
+
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+
+  constructor(private readonly callback: ResizeObserverCallback) {
+    MockResizeObserver.instances.push(this);
+  }
+
+  emit() {
+    this.callback([], this);
+  }
+}
+
+describe('VirtualComponent', () => {
+  let measuredHeight = 72;
+
+  beforeEach(() => {
+    MockResizeObserver.instances = [];
+    measuredHeight = 72;
+    vi.stubGlobal('ResizeObserver', MockResizeObserver);
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function getBoundingClientRect(this: HTMLElement) {
+        return (this as HTMLElement).classList.contains('virtual-component-item')
+          ? createRect(measuredHeight)
+          : createRect(0);
+      }
+    );
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        return measuredHeight;
+      },
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('preserves the measured height when hidden and unmounts children', async () => {
+    function Harness() {
+      const [isVisible, setIsVisible] = useState(true);
+
+      return (
+        <>
+          <button onClick={() => setIsVisible((current) => !current)}>
+            Toggle
+          </button>
+          <VirtualComponent isVisible={isVisible}>
+            <div>Measured child</div>
+          </VirtualComponent>
+        </>
+      );
+    }
+
+    const screen = await render(<Harness />);
+
+    const item = document.querySelector<HTMLDivElement>('.virtual-component-item');
+
+    expect(item).toBeTruthy();
+    expect(item?.style.flexShrink).toBe('0');
+    await expect.element(screen.getByText('Measured child')).toBeInTheDocument();
+
+    await screen.getByRole('button', { name: 'Toggle' }).click();
+
+    await expect.element(screen.getByText('Measured child')).not.toBeInTheDocument();
+    expect(item?.style.height).toBe('72px');
+    expect(item?.style.visibility).toBe('hidden');
+    expect(item?.dataset.virtualVisible).toBe('false');
+
+    await screen.getByRole('button', { name: 'Toggle' }).click();
+
+    await expect.element(screen.getByText('Measured child')).toBeInTheDocument();
+    expect(item?.style.height).toBe('');
+    expect(item?.style.flexShrink).toBe('0');
+    expect(item?.style.visibility).toBe('');
+    expect(item?.dataset.virtualVisible).toBe('true');
+  });
+
+  it('uses the latest ResizeObserver measurement before hiding', async () => {
+    function Harness() {
+      const [isVisible, setIsVisible] = useState(true);
+
+      return (
+        <>
+          <button onClick={() => setIsVisible(false)}>Hide</button>
+          <VirtualComponent isVisible={isVisible}>
+            <div>Resizable child</div>
+          </VirtualComponent>
+        </>
+      );
+    }
+
+    const screen = await render(<Harness />);
+
+    measuredHeight = 96;
+    flushSync(() => {
+      MockResizeObserver.instances[0].emit();
+    });
+
+    const item = document.querySelector<HTMLDivElement>('.virtual-component-item');
+
+    await screen.getByRole('button', { name: 'Hide' }).click();
+
+    await expect.element(screen.getByText('Resizable child')).not.toBeInTheDocument();
+    expect(item?.style.height).toBe('96px');
+    expect(item?.style.visibility).toBe('hidden');
+  });
+
+  it('observes on mount and disconnects on unmount', async () => {
+    const { unmount } = await render(
+      <VirtualComponent>
+        <div>Observed child</div>
+      </VirtualComponent>
+    );
+
+    expect(MockResizeObserver.instances).toHaveLength(1);
+    expect(MockResizeObserver.instances[0].observe).toHaveBeenCalledTimes(1);
+
+    await unmount();
+
+    expect(MockResizeObserver.instances[0].disconnect).toHaveBeenCalledTimes(1);
+  });
+});

rpr_cli-0.1.26/Sample-dot-github/scaffolds/frontend/virtual-list/VirtualComponent.tsx

@@ -0,0 +1,94 @@
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+
+type VirtualComponentProps = React.PropsWithChildren<{
+  isVisible?: boolean;
+}>;
+
+const setForwardedRef = (
+  ref: React.ForwardedRef<HTMLDivElement>,
+  node: HTMLDivElement | null
+) => {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+};
+
+export const VirtualComponent = React.memo(
+  React.forwardRef<HTMLDivElement, VirtualComponentProps>(
+    ({ children, isVisible = true }, forwardedRef) => {
+      const ref = useRef<HTMLDivElement>(null);
+      const measuredHeight = useRef<number | null>(null);
+      const [height, setHeight] = useState<number | null>(null);
+
+      const setRef = useCallback(
+        (node: HTMLDivElement | null) => {
+          ref.current = node;
+          setForwardedRef(forwardedRef, node);
+        },
+        [forwardedRef]
+      );
+
+      const measureHeight = useCallback(() => {
+        const node = ref.current;
+        if (!node) return;
+
+        const nextHeight = Math.ceil(
+          Math.max(node.getBoundingClientRect().height, node.scrollHeight)
+        );
+
+        if (nextHeight > 0 && measuredHeight.current !== nextHeight) {
+          measuredHeight.current = nextHeight;
+          setHeight(nextHeight);
+        }
+      }, []);
+
+      const shouldRenderChildren = isVisible || height === null;
+
+      useLayoutEffect(() => {
+        if (shouldRenderChildren) {
+          measureHeight();
+        }
+      }, [measureHeight, shouldRenderChildren]);
+
+      useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || typeof ResizeObserver === 'undefined') return;
+
+        const observer = new ResizeObserver(() => {
+          if (shouldRenderChildren) {
+            measureHeight();
+          }
+        });
+
+        observer.observe(node);
+
+        return () => {
+          observer.disconnect();
+        };
+      }, [measureHeight, shouldRenderChildren]);
+
+      const visibleStyle: React.CSSProperties = { flexShrink: 0 };
+      const hiddenStyle: React.CSSProperties = height
+        ? {
+            flexShrink: 0,
+            height,
+            overflow: 'hidden',
+            visibility: 'hidden',
+          }
+        : visibleStyle;
+
+      return (
+        <div
+          ref={setRef}
+          className="virtual-component-item"
+          data-virtual-visible={isVisible ? 'true' : 'false'}
+          style={isVisible ? visibleStyle : hiddenStyle}
+        >
+          {shouldRenderChildren ? children : null}
+        </div>
+      );
+    }
+  )
+);

rpr_cli-0.1.26/Sample-dot-github/scaffolds/frontend/virtual-list/VirtualComponentList.spec.tsx

@@ -0,0 +1,277 @@
+import { flushSync } from 'react-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { VirtualComponentList } from './VirtualComponentList';
+
+const createRect = (height: number) =>
+  ({
+    x: 0,
+    y: 0,
+    width: 100,
+    height,
+    top: 0,
+    right: 100,
+    bottom: height,
+    left: 0,
+    toJSON: () => ({}),
+  }) as DOMRect;
+
+class MockIntersectionObserver implements IntersectionObserver {
+  static instances: MockIntersectionObserver[] = [];
+
+  readonly root: Element | Document | null;
+  readonly rootMargin: string;
+  readonly scrollMargin: string;
+  readonly thresholds: ReadonlyArray<number>;
+  observedElements = new Set<Element>();
+  observe = vi.fn((element: Element) => {
+    this.observedElements.add(element);
+  });
+  unobserve = vi.fn((element: Element) => {
+    this.observedElements.delete(element);
+  });
+  disconnect = vi.fn(() => {
+    this.observedElements.clear();
+  });
+  takeRecords = vi.fn(() => []);
+
+  constructor(
+    private readonly callback: IntersectionObserverCallback,
+    options: IntersectionObserverInit = {}
+  ) {
+    this.root = options.root ?? null;
+    this.rootMargin = options.rootMargin ?? '0px';
+    this.scrollMargin = '0px';
+    this.thresholds = Array.isArray(options.threshold)
+      ? options.threshold
+      : [options.threshold ?? 0];
+    MockIntersectionObserver.instances.push(this);
+  }
+
+  emit(entries: Array<{ target: Element; isIntersecting: boolean }>) {
+    this.callback(
+      entries.map(
+        (entry) =>
+          ({
+            boundingClientRect: createRect(0),
+            intersectionRatio: entry.isIntersecting ? 1 : 0,
+            intersectionRect: createRect(0),
+            isIntersecting: entry.isIntersecting,
+            rootBounds: createRect(0),
+            target: entry.target,
+            time: 0,
+          }) as IntersectionObserverEntry
+      ),
+      this
+    );
+  }
+}
+
+class MockResizeObserver implements ResizeObserver {
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+
+  constructor(private readonly callback: ResizeObserverCallback) {}
+
+  emit() {
+    this.callback([], this);
+  }
+}
+
+const renderItems = (count: number) =>
+  Array.from({ length: count }, (_, index) => <div key={index}>Item {index}</div>);
+
+const paragraphHeights = [56, 104, 148, 92, 180, 128, 72, 156, 116, 204];
+
+const renderVariableParagraphs = (count: number) =>
+  Array.from({ length: count }, (_, index) => (
+    <section key={index} data-paragraph-index={index}>
+      <h3>Paragraph container {index + 1}</h3>
+      {Array.from({ length: (index % 4) + 1 }, (__, paragraphIndex) => (
+        <p key={paragraphIndex}>
+          Paragraph {index + 1}.{paragraphIndex + 1} has variable content.
+        </p>
+      ))}
+    </section>
+  ));
+
+const getVirtualItems = () =>
+  Array.from(document.querySelectorAll<HTMLDivElement>('.virtual-component-item'));
+
+describe('VirtualComponentList', () => {
+  beforeEach(() => {
+    MockIntersectionObserver.instances = [];
+    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
+    vi.stubGlobal('ResizeObserver', MockResizeObserver);
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function getBoundingClientRect(this: HTMLElement) {
+        const textContent = (this as HTMLElement).textContent ?? '';
+        const itemMatch = /Item (\d+)/.exec(textContent);
+        const paragraphMatch = /Paragraph container (\d+)/.exec(textContent);
+        const height = itemMatch
+          ? 40 + Number(itemMatch[1]) * 10
+          : paragraphMatch
+          ? paragraphHeights[Number(paragraphMatch[1]) - 1] ?? 80
+          : 0;
+
+        return createRect(height);
+      }
+    );
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      get() {
+        const textContent = (this as HTMLElement).textContent ?? '';
+        const itemMatch = /Item (\d+)/.exec(textContent);
+        const paragraphMatch = /Paragraph container (\d+)/.exec(textContent);
+
+        if (itemMatch) return 40 + Number(itemMatch[1]) * 10;
+        if (paragraphMatch) {
+          return paragraphHeights[Number(paragraphMatch[1]) - 1] ?? 80;
+        }
+
+        return 0;
+      },
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('observes children on mount and disconnects the observer on unmount', async () => {
+    const { unmount } = await render(
+      <VirtualComponentList>{renderItems(3)}</VirtualComponentList>
+    );
+
+    const observer = MockIntersectionObserver.instances[0];
+
+    expect(observer.root).toBe(document.getElementById('virtual-component-list'));
+    expect(observer.rootMargin).toBe('100% 0px');
+    expect(observer.observe).toHaveBeenCalledTimes(3);
+    expect(observer.observedElements.size).toBe(3);
+
+    await unmount();
+
+    expect(observer.disconnect).toHaveBeenCalledTimes(1);
+    expect(observer.observedElements.size).toBe(0);
+  });
+
+  it('unmounts hidden item content from intersection events while preserving height', async () => {
+    const screen = await render(
+      <VirtualComponentList>{renderItems(3)}</VirtualComponentList>
+    );
+
+    const observer = MockIntersectionObserver.instances[0];
+    const items = getVirtualItems();
+
+    flushSync(() => {
+      observer.emit([{ target: items[1], isIntersecting: false }]);
+    });
+
+    await expect.element(screen.locator.getByText('Item 1')).not.toBeInTheDocument();
+    expect(items[1].style.height).toBe('50px');
+    expect(items[1].style.flexShrink).toBe('0');
+    expect(items[1].style.visibility).toBe('hidden');
+    expect(items[1].dataset.virtualVisible).toBe('false');
+    await expect.element(screen.locator.getByText('Item 0')).toBeInTheDocument();
+    await expect.element(screen.locator.getByText('Item 2')).toBeInTheDocument();
+
+    flushSync(() => {
+      observer.emit([{ target: items[1], isIntersecting: true }]);
+    });
+
+    await expect.element(screen.locator.getByText('Item 1')).toBeInTheDocument();
+    expect(items[1].style.height).toBe('');
+    expect(items[1].style.visibility).toBe('');
+    expect(items[1].dataset.virtualVisible).toBe('true');
+  });
+
+  it('preserves each measured height for variable-sized paragraph containers', async () => {
+    const screen = await render(
+      <VirtualComponentList>{renderVariableParagraphs(10)}</VirtualComponentList>
+    );
+
+    const observer = MockIntersectionObserver.instances[0];
+    const items = getVirtualItems();
+
+    flushSync(() => {
+      observer.emit([
+        { target: items[1], isIntersecting: false },
+        { target: items[4], isIntersecting: false },
+        { target: items[8], isIntersecting: false },
+      ]);
+    });
+
+    await expect
+      .element(screen.locator.getByText('Paragraph container 2'))
+      .not.toBeInTheDocument();
+    await expect
+      .element(screen.locator.getByText('Paragraph container 5'))
+      .not.toBeInTheDocument();
+    await expect
+      .element(screen.locator.getByText('Paragraph container 9'))
+      .not.toBeInTheDocument();
+    expect(items[1].style.height).toBe('104px');
+    expect(items[4].style.height).toBe('180px');
+    expect(items[8].style.height).toBe('116px');
+    expect(items[1].style.flexShrink).toBe('0');
+    expect(items[4].style.flexShrink).toBe('0');
+    expect(items[8].style.flexShrink).toBe('0');
+
+    flushSync(() => {
+      observer.emit([{ target: items[4], isIntersecting: true }]);
+    });
+
+    await expect
+      .element(screen.locator.getByText('Paragraph container 5'))
+      .toBeInTheDocument();
+    expect(items[4].style.height).toBe('');
+    expect(items[1].style.height).toBe('104px');
+    expect(items[8].style.height).toBe('116px');
+  });
+
+  it('unobserves removed children without disconnecting the whole list observer', async () => {
+    const { rerender } = await render(
+      <VirtualComponentList>{renderItems(3)}</VirtualComponentList>
+    );
+
+    const observer = MockIntersectionObserver.instances[0];
+    const removedItem = getVirtualItems()[2];
+
+    await rerender(<VirtualComponentList>{renderItems(2)}</VirtualComponentList>);
+
+    expect(observer.unobserve).toHaveBeenCalledWith(removedItem);
+    expect(observer.disconnect).not.toHaveBeenCalled();
+  });
+
+  it('does not re-render the parent container when item visibility changes', async () => {
+    const onParentRender = vi.fn();
+
+    function Parent() {
+      onParentRender();
+
+      return <VirtualComponentList>{renderItems(3)}</VirtualComponentList>;
+    }
+
+    await render(<Parent />);
+
+    const parentRenderCount = onParentRender.mock.calls.length;
+    const observer = MockIntersectionObserver.instances[0];
+    const items = getVirtualItems();
+
+    flushSync(() => {
+      observer.emit([
+        { target: items[0], isIntersecting: false },
+        { target: items[1], isIntersecting: false },
+      ]);
+    });
+
+    flushSync(() => {
+      observer.emit([{ target: items[0], isIntersecting: true }]);
+    });
+
+    expect(onParentRender).toHaveBeenCalledTimes(parentRenderCount);
+  });
+});

rpr_cli-0.1.26/Sample-dot-github/scaffolds/frontend/virtual-list/VirtualComponentList.tsx

@@ -0,0 +1,112 @@
+import { Stack, type BoxProps } from '@mui/material';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { VirtualComponent } from './VirtualComponent';
+
+type VirtualListProps = {
+  children: React.ReactNode;
+  sx?: BoxProps['sx'];
+}
+
+type VisibilityListener = (isVisible: boolean) => void;
+
+type RegisterVirtualComponent = (
+  node: HTMLElement,
+  onVisibilityChange: VisibilityListener
+) => () => void;
+
+type VirtualComponentListItemProps = React.PropsWithChildren<{
+  registerVirtualComponent: RegisterVirtualComponent;
+}>;
+
+const VirtualComponentListItem = React.memo(
+  ({ children, registerVirtualComponent }: VirtualComponentListItemProps) => {
+    const [isVisible, setIsVisible] = useState(true);
+    const nodeRef = useRef<HTMLDivElement | null>(null);
+
+    const setNodeRef = useCallback((node: HTMLDivElement | null) => {
+      nodeRef.current = node;
+    }, []);
+
+    useLayoutEffect(() => {
+      const node = nodeRef.current;
+      if (!node) return;
+
+      return registerVirtualComponent(node, (nextIsVisible) => {
+        setIsVisible((currentIsVisible) =>
+          currentIsVisible === nextIsVisible ? currentIsVisible : nextIsVisible
+        );
+      });
+    }, [registerVirtualComponent]);
+
+    return (
+      <VirtualComponent ref={setNodeRef} isVisible={isVisible}>
+        {children}
+      </VirtualComponent>
+    );
+  }
+);
+
+export const VirtualComponentList = ({ children, sx }: VirtualListProps) => {
+  const stackSx = useMemo(() => [
+    {
+      overflowY: 'auto',
+      height: '100%',
+      justifyContent: 'flex-start',
+      alignItems: 'stretch',
+    },
+    ...(Array.isArray(sx) ? sx : [sx]),
+  ], [sx]);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const intersectionObserver = useRef<IntersectionObserver | null>(null);
+  const visibilityListeners = useRef(new Map<Element, VisibilityListener>());
+
+  const registerVirtualComponent = useCallback<RegisterVirtualComponent>(
+    (node, onVisibilityChange) => {
+      visibilityListeners.current.set(node, onVisibilityChange);
+      intersectionObserver.current?.observe(node);
+
+      return () => {
+        intersectionObserver.current?.unobserve(node);
+        visibilityListeners.current.delete(node);
+      };
+    },
+    []
+  );
+
+  useLayoutEffect(() => {
+    const currentVisibilityListeners = visibilityListeners.current;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          currentVisibilityListeners.get(entry.target)?.(entry.isIntersecting);
+        });
+      },
+      {
+        root: containerRef.current,
+        rootMargin: '100% 0px',
+      }
+    );
+
+    intersectionObserver.current = observer;
+    currentVisibilityListeners.forEach((_, node) => {
+      observer.observe(node);
+    });
+
+    return () => {
+      observer.disconnect();
+      intersectionObserver.current = null;
+      currentVisibilityListeners.clear();
+    };
+  }, [])
+  
+  return (<Stack id='virtual-component-list' sx={stackSx} direction="column" ref={containerRef}>
+    {React.Children.map(children, (child) => {
+      return (
+        <VirtualComponentListItem registerVirtualComponent={registerVirtualComponent}>
+          {child}
+        </VirtualComponentListItem>
+      );
+    })}
+  </Stack>)
+}

rpr_cli-0.1.26/Sample-dot-github/scaffolds/frontend/virtual-list/index.ts

@@ -0,0 +1 @@
+export * from './VirtualComponentList';