npm - mtrl-addons - Versions diffs - 0.1.2 → 0.2.2 - Mend

mtrl-addons 0.1.2 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/AI.md +28 -230
package/CLAUDE.md +882 -0
package/build.js +253 -24
package/package.json +14 -4
package/scripts/debug/vlist-selection.ts +121 -0
package/src/components/index.ts +5 -41
package/src/components/{list → vlist}/config.ts +66 -95
package/src/components/vlist/constants.ts +23 -0
package/src/components/vlist/features/api.ts +626 -0
package/src/components/vlist/features/index.ts +10 -0
package/src/components/vlist/features/selection.ts +436 -0
package/src/components/vlist/features/viewport.ts +59 -0
package/src/components/vlist/index.ts +17 -0
package/src/components/{list → vlist}/types.ts +242 -32
package/src/components/vlist/vlist.ts +92 -0
package/src/core/compose/features/gestures/index.ts +227 -0
package/src/core/compose/features/gestures/longpress.ts +383 -0
package/src/core/compose/features/gestures/pan.ts +424 -0
package/src/core/compose/features/gestures/pinch.ts +475 -0
package/src/core/compose/features/gestures/rotate.ts +485 -0
package/src/core/compose/features/gestures/swipe.ts +492 -0
package/src/core/compose/features/gestures/tap.ts +334 -0
package/src/core/compose/features/index.ts +2 -38
package/src/core/compose/index.ts +13 -29
package/src/core/gestures/index.ts +31 -0
package/src/core/gestures/longpress.ts +68 -0
package/src/core/gestures/manager.ts +418 -0
package/src/core/gestures/pan.ts +48 -0
package/src/core/gestures/pinch.ts +58 -0
package/src/core/gestures/rotate.ts +58 -0
package/src/core/gestures/swipe.ts +66 -0
package/src/core/gestures/tap.ts +45 -0
package/src/core/gestures/types.ts +387 -0
package/src/core/gestures/utils.ts +128 -0
package/src/core/index.ts +27 -151
package/src/core/layout/schema.ts +153 -72
package/src/core/layout/types.ts +5 -2
package/src/core/viewport/constants.ts +145 -0
package/src/core/viewport/features/base.ts +73 -0
package/src/core/viewport/features/collection.ts +1182 -0
package/src/core/viewport/features/events.ts +130 -0
package/src/core/viewport/features/index.ts +20 -0
package/src/core/{list-manager/features/viewport → viewport/features}/item-size.ts +31 -34
package/src/core/{list-manager/features/viewport → viewport/features}/loading.ts +4 -4
package/src/core/viewport/features/momentum.ts +269 -0
package/src/core/viewport/features/placeholders.ts +335 -0
package/src/core/viewport/features/rendering.ts +962 -0
package/src/core/viewport/features/scrollbar.ts +434 -0
package/src/core/viewport/features/scrolling.ts +634 -0
package/src/core/viewport/features/utils.ts +94 -0
package/src/core/viewport/features/virtual.ts +525 -0
package/src/core/viewport/index.ts +31 -0
package/src/core/viewport/types.ts +133 -0
package/src/core/viewport/utils/speed-tracker.ts +79 -0
package/src/core/viewport/viewport.ts +265 -0
package/src/index.ts +0 -7
package/src/styles/components/_vlist.scss +352 -0
package/src/styles/index.scss +1 -1
package/test/components/vlist-selection.test.ts +240 -0
package/test/components/vlist.test.ts +63 -0
package/test/core/collection/adapter.test.ts +161 -0
package/bun.lock +0 -792
package/src/components/list/api.ts +0 -314
package/src/components/list/constants.ts +0 -56
package/src/components/list/features/api.ts +0 -428
package/src/components/list/features/index.ts +0 -31
package/src/components/list/features/list-manager.ts +0 -502
package/src/components/list/index.ts +0 -39
package/src/components/list/list.ts +0 -234
package/src/core/collection/base-collection.ts +0 -100
package/src/core/collection/collection-composer.ts +0 -178
package/src/core/collection/collection.ts +0 -745
package/src/core/collection/constants.ts +0 -172
package/src/core/collection/events.ts +0 -428
package/src/core/collection/features/api/loading.ts +0 -279
package/src/core/collection/features/operations/data-operations.ts +0 -147
package/src/core/collection/index.ts +0 -104
package/src/core/collection/state.ts +0 -497
package/src/core/collection/types.ts +0 -404
package/src/core/compose/features/collection.ts +0 -119
package/src/core/compose/features/selection.ts +0 -213
package/src/core/compose/features/styling.ts +0 -108
package/src/core/list-manager/api.ts +0 -599
package/src/core/list-manager/config.ts +0 -593
package/src/core/list-manager/constants.ts +0 -268
package/src/core/list-manager/features/api.ts +0 -58
package/src/core/list-manager/features/collection/collection.ts +0 -705
package/src/core/list-manager/features/collection/index.ts +0 -17
package/src/core/list-manager/features/viewport/constants.ts +0 -42
package/src/core/list-manager/features/viewport/index.ts +0 -16
package/src/core/list-manager/features/viewport/placeholders.ts +0 -281
package/src/core/list-manager/features/viewport/rendering.ts +0 -575
package/src/core/list-manager/features/viewport/scrollbar.ts +0 -495
package/src/core/list-manager/features/viewport/scrolling.ts +0 -795
package/src/core/list-manager/features/viewport/template.ts +0 -220
package/src/core/list-manager/features/viewport/viewport.ts +0 -654
package/src/core/list-manager/features/viewport/virtual.ts +0 -309
package/src/core/list-manager/index.ts +0 -279
package/src/core/list-manager/list-manager.ts +0 -206
package/src/core/list-manager/types.ts +0 -439
package/src/core/list-manager/utils/calculations.ts +0 -290
package/src/core/list-manager/utils/range-calculator.ts +0 -349
package/src/core/list-manager/utils/speed-tracker.ts +0 -273
package/src/styles/components/_list.scss +0 -244
package/src/types/mtrl.d.ts +0 -6
package/test/components/list.test.ts +0 -256
package/test/core/collection/failed-ranges.test.ts +0 -270
package/test/core/compose/features.test.ts +0 -183
package/test/core/list-manager/features/collection.test.ts +0 -704
package/test/core/list-manager/features/viewport.test.ts +0 -698
package/test/core/list-manager/list-manager.test.ts +0 -593
package/test/core/list-manager/utils/calculations.test.ts +0 -433
package/test/core/list-manager/utils/range-calculator.test.ts +0 -569
package/test/core/list-manager/utils/speed-tracker.test.ts +0 -530
package/tsconfig.build.json +0 -23
/package/src/components/{list → vlist}/features.ts +0 -0
/package/src/core/{compose → viewport}/features/performance.ts +0 -0

package/test/components/list.test.ts DELETED Viewed

@@ -1,256 +0,0 @@
-/**
- * Basic list component tests
- *
- * Tests the pipe composition list component that wraps the collection system
- */
-import { describe, test, expect, beforeEach } from "bun:test";
-import { JSDOM } from "jsdom";
-// Mock DOM environment for testing
-const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
-global.document = dom.window.document;
-global.HTMLElement = dom.window.HTMLElement;
-global.window = dom.window as any;
-global.navigator = dom.window.navigator;
-global.requestAnimationFrame = (cb: FrameRequestCallback) => {
-  setTimeout(cb, 0);
-  return 0;
-};
-// Mock scrollIntoView since JSDOM doesn't implement it
-global.HTMLElement.prototype.scrollIntoView = function (
-  options?: ScrollIntoViewOptions
-) {
-  // Mock implementation - just logs the call
-  console.log(`Mock scrollIntoView called with options:`, options);
-};
-// Import our list component
-import { createList, type ListItem } from "../../src/components/list";
-// Test data interface
-interface TestUser extends ListItem {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-}
-// Test data
-const testUsers: TestUser[] = [
-  { id: "1", name: "John Doe", email: "john@example.com", age: 30 },
-  { id: "2", name: "Jane Smith", email: "jane@example.com", age: 25 },
-  { id: "3", name: "Bob Johnson", email: "bob@example.com", age: 35 },
-];
-describe("List Component (Pipe Composition)", () => {
-  let container: HTMLElement;
-  beforeEach(() => {
-    // Create a fresh container for each test
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-  test("creates list with pipe composition pattern", () => {
-    const list = createList<TestUser>({
-      container,
-      items: testUsers,
-      className: "user-list",
-      ariaLabel: "User List",
-    });
-    // mtrl creates a new element and mounts it to the container
-    expect(list.element).not.toBe(container);
-    expect(list.element.parentElement).toBe(container);
-    expect(list.getSize()).toBe(3);
-    expect(list.isEmpty()).toBe(false);
-    expect(list.element.classList.contains("mtrl-list")).toBe(true);
-    expect(list.element.getAttribute("aria-label")).toBe("User List");
-    expect(list.element.getAttribute("role")).toBe("list");
-  });
-  test("applies list styling through composition", async () => {
-    const list = createList<TestUser>({
-      container,
-      items: testUsers,
-      listStyle: {
-        itemSize: 60,
-        gap: 8,
-        padding: 16,
-        striped: true,
-        hoverable: true,
-        bordered: false,
-      },
-    });
-    // Wait for rendering
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    // Check styling on the list element, not the container
-    expect(list.element.style.getPropertyValue("--mtrl-list-gap")).toBe("8px");
-    expect(list.element.style.getPropertyValue("--mtrl-list-padding")).toBe(
-      "16px"
-    );
-    expect(list.element.style.getPropertyValue("--mtrl-list-item-height")).toBe(
-      "60px"
-    );
-    expect(list.element.classList.contains("mtrl-list--striped")).toBe(true);
-    expect(list.element.classList.contains("mtrl-list--hoverable")).toBe(true);
-    expect(list.element.classList.contains("mtrl-list--bordered")).toBe(false);
-  });
-  test("enables selection through composition", async () => {
-    const list = createList<TestUser>({
-      container,
-      items: testUsers,
-      selection: {
-        enabled: true,
-        multiple: true,
-      },
-    });
-    // Wait for rendering
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    // Test selection methods exist
-    expect(typeof list.selectItem).toBe("function");
-    expect(typeof list.deselectItem).toBe("function");
-    expect(typeof list.selectAll).toBe("function");
-    expect(typeof list.deselectAll).toBe("function");
-    expect(typeof list.getSelectedItems).toBe("function");
-    expect(typeof list.getSelectedIds).toBe("function");
-    // Test selection functionality
-    list.selectItem("1");
-    expect(list.getSelectedIds()).toContain("1");
-    expect(list.getSelectedItems().length).toBe(1);
-    list.selectItem("2");
-    expect(list.getSelectedIds()).toHaveLength(2);
-    list.deselectItem("1");
-    expect(list.getSelectedIds()).toHaveLength(1);
-    expect(list.getSelectedIds()).toContain("2");
-    list.deselectAll();
-    expect(list.getSelectedIds()).toHaveLength(0);
-  });
-  test("tracks performance through composition", async () => {
-    const list = createList<TestUser>({
-      container,
-      items: testUsers,
-      performance: {
-        recycleElements: true,
-        bufferSize: 50,
-      },
-    });
-    // Wait for rendering
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    // Test performance methods exist
-    expect(typeof list.getMetrics).toBe("function");
-    expect(typeof list.resetMetrics).toBe("function");
-    const metrics = list.getMetrics();
-    expect(typeof metrics.renderCount).toBe("number");
-    expect(typeof metrics.scrollCount).toBe("number");
-    expect(typeof metrics.averageRenderTime).toBe("number");
-    expect(typeof metrics.averageScrollTime).toBe("number");
-  });
-  test("provides list API through composition", async () => {
-    const list = createList<TestUser>({
-      container,
-      items: testUsers,
-    });
-    // Wait for rendering
-    await new Promise((resolve) => setTimeout(resolve, 10));
-    // Test API methods exist
-    expect(typeof list.scrollToItem).toBe("function");
-    expect(typeof list.scrollToIndex).toBe("function");
-    expect(typeof list.scrollToPage).toBe("function");
-    // Test scrolling doesn't crash
-    list.scrollToItem("2");
-    list.scrollToIndex(1);
-  });
-  test("maintains collection functionality", async () => {
-    const list = createList<TestUser>({
-      container,
-      items: [testUsers[0]],
-    });
-    // Test collection methods still work
-    expect(list.getSize()).toBe(1);
-    const newUser: TestUser = {
-      id: "4",
-      name: "Alice Brown",
-      email: "alice@example.com",
-      age: 28,
-    };
-    await list.add(newUser);
-    expect(list.getSize()).toBe(2);
-    expect(list.getItem("4")?.name).toBe("Alice Brown");
-    await list.remove("1");
-    expect(list.getSize()).toBe(1);
-    expect(list.getItem("1")).toBeUndefined();
-  });
-  test("console shows pipe composition pattern", () => {
-    // Capture console logs
-    const logs: string[] = [];
-    const originalLog = console.log;
-    console.log = (message: string) => {
-      logs.push(message);
-    };
-    try {
-      createList<TestUser>({
-        container,
-        items: testUsers,
-        selection: { enabled: true },
-        listStyle: { striped: true },
-      });
-      // Restore console
-      console.log = originalLog;
-      // Verify composition pattern logs
-      expect(
-        logs.some((log) =>
-          log.includes("Creating list component (mtrl compose system)")
-        )
-      ).toBe(true);
-      expect(
-        logs.some((log) => log.includes("Adding collection capabilities"))
-      ).toBe(true);
-      expect(
-        logs.some((log) => log.includes("Adding styling capabilities"))
-      ).toBe(true);
-      expect(
-        logs.some((log) => log.includes("Adding selection capabilities"))
-      ).toBe(true);
-      expect(
-        logs.some((log) => log.includes("Adding performance tracking"))
-      ).toBe(true);
-      expect(logs.some((log) => log.includes("Adding list API methods"))).toBe(
-        true
-      );
-      expect(
-        logs.some((log) => log.includes("created via mtrl compose system"))
-      ).toBe(true);
-    } finally {
-      console.log = originalLog;
-    }
-  });
-});

package/test/core/collection/failed-ranges.test.ts DELETED Viewed

@@ -1,270 +0,0 @@
-// test/core/collection/failed-ranges.test.ts
-import { describe, test, expect, beforeEach, mock, afterEach } from "bun:test";
-import { createListManager } from "../../../src/core/list-manager/list-manager";
-import { withCollection } from "../../../src/core/list-manager/features/collection/collection";
-import type { ListManagerConfig } from "../../../src/core/list-manager/types";
-describe("Collection - Failed Range Tracking", () => {
-  let container: HTMLElement;
-  let config: ListManagerConfig;
-  let mockAdapter: any;
-  beforeEach(() => {
-    container = document.createElement("div");
-    container.style.height = "600px";
-    container.style.width = "400px";
-    document.body.appendChild(container);
-    // Mock adapter that can simulate failures
-    mockAdapter = {
-      read: mock(),
-    };
-    config = {
-      container,
-      items: [],
-      template: {
-        template: (item: any) => `<div>Item ${item.id}</div>`,
-      },
-      virtual: {
-        enabled: true,
-        itemSize: 84,
-        estimatedItemSize: 84,
-        overscan: 5,
-      },
-    };
-  });
-  afterEach(() => {
-    container.remove();
-    mock.restore();
-  });
-  test("should track failed ranges when data loading fails", async () => {
-    // Configure adapter to fail
-    mockAdapter.read.mockRejectedValueOnce(new Error("Network error"));
-    const manager = createListManager(config);
-    const enhancedManager = withCollection({
-      collection: mockAdapter,
-      rangeSize: 20,
-    })(manager);
-    // Try to load a range
-    try {
-      await enhancedManager.collection.loadRange(0, 20);
-    } catch (error) {
-      // Expected to fail
-    }
-    // Check that failed range is tracked
-    const failedRanges = enhancedManager.collection.getFailedRanges();
-    expect(failedRanges.size).toBe(1);
-    expect(failedRanges.has(0)).toBe(true);
-    const failedInfo = failedRanges.get(0);
-    expect(failedInfo?.attempts).toBe(1);
-    expect(failedInfo?.error.message).toBe("Network error");
-  });
-  test("should not reload failed ranges immediately", async () => {
-    // Configure adapter to fail
-    mockAdapter.read.mockRejectedValue(new Error("Network error"));
-    const manager = createListManager(config);
-    const enhancedManager = withCollection({
-      collection: mockAdapter,
-      rangeSize: 20,
-    })(manager);
-    // First attempt - should fail
-    try {
-      await enhancedManager.collection.loadRange(0, 20);
-    } catch (error) {
-      // Expected
-    }
-    // Reset mock
-    mockAdapter.read.mockClear();
-    // Try to load missing ranges immediately - should skip failed range
-    await enhancedManager.collection.loadMissingRanges({ start: 0, end: 19 });
-    // Should not have tried to load again
-    expect(mockAdapter.read).not.toHaveBeenCalled();
-  });
-  test("should retry failed ranges after clearing lastAttempt", async () => {
-    // Configure adapter to fail first, then succeed
-    mockAdapter.read
-      .mockRejectedValueOnce(new Error("Network error"))
-      .mockResolvedValueOnce({
-        items: Array.from({ length: 20 }, (_, i) => ({
-          id: i,
-          name: `Item ${i}`,
-        })),
-        meta: { total: 100 },
-      });
-    const manager = createListManager(config);
-    const enhancedManager = withCollection({
-      collection: mockAdapter,
-      rangeSize: 20,
-    })(manager);
-    // First attempt - should fail
-    try {
-      await enhancedManager.collection.loadRange(0, 20);
-    } catch (error) {
-      // Expected
-    }
-    // Manually retry failed ranges
-    await enhancedManager.collection.retryFailedRanges();
-    // Check that failed range was cleared after success
-    const failedRanges = enhancedManager.collection.getFailedRanges();
-    expect(failedRanges.size).toBe(0);
-    // Check that data was loaded
-    const loadedRanges = enhancedManager.collection.getLoadedRanges();
-    expect(loadedRanges.has(0)).toBe(true);
-  });
-  test("should track multiple attempts", async () => {
-    // Configure adapter to fail multiple times
-    mockAdapter.read.mockRejectedValue(new Error("Network error"));
-    const manager = createListManager(config);
-    const enhancedManager = withCollection({
-      collection: mockAdapter,
-      rangeSize: 20,
-    })(manager);
-    // Multiple attempts
-    for (let i = 0; i < 3; i++) {
-      try {
-        // Clear lastAttempt to allow immediate retry
-        const failedRanges = enhancedManager.collection.getFailedRanges();
-        failedRanges.forEach((info) => {
-          info.lastAttempt = 0;
-        });
-        await enhancedManager.collection.loadRange(0, 20);
-      } catch (error) {
-        // Expected
-      }
-    }
-    // Check attempt count
-    const failedRanges = enhancedManager.collection.getFailedRanges();
-    const failedInfo = failedRanges.get(0);
-    expect(failedInfo?.attempts).toBe(3);
-  });
-  test("should clear failed ranges", async () => {
-    // Configure adapter to fail
-    mockAdapter.read.mockRejectedValue(new Error("Network error"));
-    const manager = createListManager(config);
-    const enhancedManager = withCollection({
-      collection: mockAdapter,
-      rangeSize: 20,
-    })(manager);
-    // Fail to load some ranges
-    try {
-      await enhancedManager.collection.loadRange(0, 20);
-    } catch (error) {
-      // Expected
-    }
-    try {
-      await enhancedManager.collection.loadRange(40, 20);
-    } catch (error) {
-      // Expected
-    }
-    // Should have 2 failed ranges
-    expect(enhancedManager.collection.getFailedRanges().size).toBe(2);
-    // Clear failed ranges
-    enhancedManager.collection.clearFailedRanges();
-    // Should have no failed ranges
-    expect(enhancedManager.collection.getFailedRanges().size).toBe(0);
-  });
-  test("should handle concurrent failures correctly", async () => {
-    // Configure adapter to fail
-    mockAdapter.read.mockRejectedValue(new Error("Network error"));
-    const manager = createListManager(config);
-    const enhancedManager = withCollection({
-      collection: mockAdapter,
-      rangeSize: 20,
-    })(manager);
-    // Try to load multiple ranges concurrently
-    const promises = [
-      enhancedManager.collection.loadRange(0, 20),
-      enhancedManager.collection.loadRange(20, 20),
-      enhancedManager.collection.loadRange(40, 20),
-    ];
-    // All should fail
-    const results = await Promise.allSettled(promises);
-    expect(results.every((r) => r.status === "rejected")).toBe(true);
-    // Should have 3 failed ranges
-    const failedRanges = enhancedManager.collection.getFailedRanges();
-    expect(failedRanges.size).toBe(3);
-    expect(failedRanges.has(0)).toBe(true);
-    expect(failedRanges.has(1)).toBe(true);
-    expect(failedRanges.has(2)).toBe(true);
-  });
-  test("should respect exponential backoff", async () => {
-    // Configure adapter to fail
-    mockAdapter.read.mockRejectedValue(new Error("Network error"));
-    const manager = createListManager(config);
-    const enhancedManager = withCollection({
-      collection: mockAdapter,
-      rangeSize: 20,
-    })(manager);
-    // First failure
-    try {
-      await enhancedManager.collection.loadRange(0, 20);
-    } catch (error) {
-      // Expected
-    }
-    // Try again immediately - should be blocked
-    mockAdapter.read.mockClear();
-    try {
-      await enhancedManager.collection.loadRange(0, 20);
-    } catch (error) {
-      // Should re-throw the same error without calling adapter
-      expect(error.message).toBe("Network error");
-    }
-    expect(mockAdapter.read).not.toHaveBeenCalled();
-    // Simulate time passing (clear lastAttempt)
-    const failedRanges = enhancedManager.collection.getFailedRanges();
-    const failedInfo = failedRanges.get(0);
-    if (failedInfo) {
-      failedInfo.lastAttempt = Date.now() - 2000; // 2 seconds ago
-    }
-    // Now it should try again
-    mockAdapter.read.mockRejectedValueOnce(new Error("Still failing"));
-    try {
-      await enhancedManager.collection.loadRange(0, 20);
-    } catch (error) {
-      expect(error.message).toBe("Still failing");
-    }
-    expect(mockAdapter.read).toHaveBeenCalledTimes(1);
-  });
-});

package/test/core/compose/features.test.ts DELETED Viewed

@@ -1,183 +0,0 @@
-/**
- * Modular compose features tests
- *
- * Tests that our extracted features work independently and can be reused
- */
-import { describe, test, expect, beforeEach } from "bun:test";
-import { JSDOM } from "jsdom";
-// Mock DOM environment for testing
-const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
-global.document = dom.window.document;
-global.HTMLElement = dom.window.HTMLElement;
-global.window = dom.window as any;
-global.navigator = dom.window.navigator;
-global.requestAnimationFrame = (cb: FrameRequestCallback) => {
-  setTimeout(cb, 0);
-  return 0;
-};
-// Import compose features
-import {
-  pipe,
-  createBase,
-  withElement,
-  withEvents,
-  withCollection,
-  withStyling,
-  withSelection,
-  withPerformance,
-} from "../../../src/core/compose";
-describe("Modular Compose Features", () => {
-  let container: HTMLElement;
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-  test("withStyling works independently", () => {
-    const component = pipe(
-      createBase,
-      withElement({ componentName: "test" }),
-      withStyling({
-        gap: 16,
-        padding: 20,
-        striped: true,
-        componentName: "test",
-      })
-    )({ prefix: "mtrl" });
-    expect(component.element.style.getPropertyValue("--mtrl-test-gap")).toBe(
-      "16px"
-    );
-    expect(
-      component.element.style.getPropertyValue("--mtrl-test-padding")
-    ).toBe("20px");
-    expect(component.element.classList.contains("mtrl-test--striped")).toBe(
-      true
-    );
-    expect(typeof component.setStyle).toBe("function");
-    expect(typeof component.getStyle).toBe("function");
-  });
-  test.skip("withSelection works independently", async () => {
-    // TODO: Debug why selection doesn't work in isolated test
-    // This works fine in the full list component tests
-    expect(true).toBe(true);
-  });
-  test("withPerformance works independently", () => {
-    const component = pipe(
-      createBase,
-      withElement({ componentName: "test" }),
-      withEvents(),
-      withPerformance({
-        trackMemory: true,
-        maxSamples: 50,
-      })
-    )({ prefix: "mtrl" });
-    // Mock getItems method that performance expects
-    component.getItems = () => [{ id: "1" }, { id: "2" }];
-    expect(typeof component.getMetrics).toBe("function");
-    expect(typeof component.resetMetrics).toBe("function");
-    const metrics = component.getMetrics();
-    expect(typeof metrics.renderCount).toBe("number");
-    expect(typeof metrics.scrollCount).toBe("number");
-  });
-  test("withCollection works independently", () => {
-    const testData = [
-      { id: "1", name: "Item 1" },
-      { id: "2", name: "Item 2" },
-    ];
-    const component = pipe(
-      createBase,
-      withElement({ componentName: "test" }),
-      withCollection({
-        items: testData,
-      })
-    )({ prefix: "mtrl" });
-    expect(typeof component.add).toBe("function");
-    expect(typeof component.remove).toBe("function");
-    expect(typeof component.getItems).toBe("function");
-    expect(typeof component.getItem).toBe("function");
-    expect(component.getSize()).toBe(2);
-    expect(component.isEmpty()).toBe(false);
-  });
-  test("features can be combined flexibly", () => {
-    const testData = [
-      { id: "1", name: "Test Item 1" },
-      { id: "2", name: "Test Item 2" },
-    ];
-    // Create a custom component with a different combination
-    const customComponent = pipe(
-      createBase,
-      withElement({ componentName: "custom" }),
-      withEvents(),
-      withStyling({
-        gap: 12,
-        hoverable: true,
-        componentName: "custom",
-      }),
-      withCollection({
-        items: testData,
-      }),
-      withPerformance({
-        trackMemory: false,
-      })
-      // Note: deliberately omitting withSelection to show flexibility
-    )({ prefix: "mtrl" });
-    // Should have styling
-    expect(
-      customComponent.element.style.getPropertyValue("--mtrl-custom-gap")
-    ).toBe("12px");
-    expect(
-      customComponent.element.classList.contains("mtrl-custom--hoverable")
-    ).toBe(true);
-    // Should have collection
-    expect(customComponent.getSize()).toBe(2);
-    expect(customComponent.getItem("1").name).toBe("Test Item 1");
-    // Should have performance
-    expect(typeof customComponent.getMetrics).toBe("function");
-    // Should NOT have selection (proving modularity)
-    expect(customComponent.selectItem).toBeUndefined();
-  });
-  test("features maintain mtrl patterns", () => {
-    const component = pipe(
-      createBase,
-      withElement({ componentName: "pattern-test" }),
-      withStyling({
-        striped: true,
-        componentName: "pattern-test",
-      })
-    )({ prefix: "mtrl" });
-    // Should follow mtrl class naming conventions
-    expect(component.element.classList.contains("mtrl-pattern-test")).toBe(
-      true
-    );
-    expect(
-      component.element.classList.contains("mtrl-pattern-test--striped")
-    ).toBe(true);
-    // Should have mtrl prefix utilities
-    expect(typeof component.getClass).toBe("function");
-    expect(typeof component.getModifierClass).toBe("function");
-    expect(component.getClass("item")).toBe("mtrl-item");
-  });
-});