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

mtrl-addons 0.2.2 → 0.2.4

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 (129) hide show

package/{src/components/index.ts → dist/components/index.d.ts} +0 -2
package/dist/components/vlist/config.d.ts +86 -0
package/{src/components/vlist/constants.ts → dist/components/vlist/constants.d.ts} +10 -11
package/dist/components/vlist/features/api.d.ts +7 -0
package/{src/components/vlist/features/index.ts → dist/components/vlist/features/index.d.ts} +0 -2
package/dist/components/vlist/features/selection.d.ts +6 -0
package/dist/components/vlist/features/viewport.d.ts +9 -0
package/dist/components/vlist/features.d.ts +31 -0
package/{src/components/vlist/index.ts → dist/components/vlist/index.d.ts} +1 -10
package/dist/components/vlist/types.d.ts +596 -0
package/dist/components/vlist/vlist.d.ts +29 -0
package/dist/core/compose/features/gestures/index.d.ts +86 -0
package/dist/core/compose/features/gestures/longpress.d.ts +85 -0
package/dist/core/compose/features/gestures/pan.d.ts +108 -0
package/dist/core/compose/features/gestures/pinch.d.ts +111 -0
package/dist/core/compose/features/gestures/rotate.d.ts +111 -0
package/dist/core/compose/features/gestures/swipe.d.ts +149 -0
package/dist/core/compose/features/gestures/tap.d.ts +79 -0
package/{src/core/compose/features/index.ts → dist/core/compose/features/index.d.ts} +1 -2
package/{src/core/compose/index.ts → dist/core/compose/index.d.ts} +2 -11
package/{src/core/gestures/index.ts → dist/core/gestures/index.d.ts} +1 -20
package/dist/core/gestures/longpress.d.ts +23 -0
package/dist/core/gestures/manager.d.ts +14 -0
package/dist/core/gestures/pan.d.ts +12 -0
package/dist/core/gestures/pinch.d.ts +14 -0
package/dist/core/gestures/rotate.d.ts +14 -0
package/dist/core/gestures/swipe.d.ts +20 -0
package/dist/core/gestures/tap.d.ts +12 -0
package/dist/core/gestures/types.d.ts +320 -0
package/dist/core/gestures/utils.d.ts +57 -0
package/dist/core/index.d.ts +13 -0
package/dist/core/layout/config.d.ts +33 -0
package/dist/core/layout/index.d.ts +51 -0
package/dist/core/layout/jsx.d.ts +65 -0
package/dist/core/layout/schema.d.ts +112 -0
package/dist/core/layout/types.d.ts +69 -0
package/dist/core/viewport/constants.d.ts +105 -0
package/dist/core/viewport/features/base.d.ts +14 -0
package/dist/core/viewport/features/collection.d.ts +41 -0
package/dist/core/viewport/features/events.d.ts +13 -0
package/{src/core/viewport/features/index.ts → dist/core/viewport/features/index.d.ts} +0 -7
package/dist/core/viewport/features/item-size.d.ts +30 -0
package/dist/core/viewport/features/loading.d.ts +34 -0
package/dist/core/viewport/features/momentum.d.ts +17 -0
package/dist/core/viewport/features/performance.d.ts +53 -0
package/dist/core/viewport/features/placeholders.d.ts +38 -0
package/dist/core/viewport/features/rendering.d.ts +16 -0
package/dist/core/viewport/features/scrollbar.d.ts +26 -0
package/dist/core/viewport/features/scrolling.d.ts +16 -0
package/dist/core/viewport/features/utils.d.ts +43 -0
package/dist/core/viewport/features/virtual.d.ts +18 -0
package/{src/core/viewport/index.ts → dist/core/viewport/index.d.ts} +1 -17
package/dist/core/viewport/types.d.ts +96 -0
package/dist/core/viewport/utils/speed-tracker.d.ts +22 -0
package/dist/core/viewport/viewport.d.ts +11 -0
package/{src/index.ts → dist/index.d.ts} +0 -4
package/dist/index.js +5143 -0
package/dist/index.mjs +5111 -0
package/dist/styles.css +254 -0
package/dist/styles.css.map +1 -0
package/package.json +16 -2
package/.cursorrules +0 -117
package/AI.md +0 -39
package/CLAUDE.md +0 -882
package/build.js +0 -377
package/index.ts +0 -7
package/scripts/analyze-orphaned-functions.ts +0 -387
package/scripts/debug/vlist-selection.ts +0 -121
package/src/components/vlist/config.ts +0 -323
package/src/components/vlist/features/api.ts +0 -626
package/src/components/vlist/features/selection.ts +0 -436
package/src/components/vlist/features/viewport.ts +0 -59
package/src/components/vlist/features.ts +0 -112
package/src/components/vlist/types.ts +0 -723
package/src/components/vlist/vlist.ts +0 -92
package/src/core/compose/features/gestures/index.ts +0 -227
package/src/core/compose/features/gestures/longpress.ts +0 -383
package/src/core/compose/features/gestures/pan.ts +0 -424
package/src/core/compose/features/gestures/pinch.ts +0 -475
package/src/core/compose/features/gestures/rotate.ts +0 -485
package/src/core/compose/features/gestures/swipe.ts +0 -492
package/src/core/compose/features/gestures/tap.ts +0 -334
package/src/core/gestures/longpress.ts +0 -68
package/src/core/gestures/manager.ts +0 -418
package/src/core/gestures/pan.ts +0 -48
package/src/core/gestures/pinch.ts +0 -58
package/src/core/gestures/rotate.ts +0 -58
package/src/core/gestures/swipe.ts +0 -66
package/src/core/gestures/tap.ts +0 -45
package/src/core/gestures/types.ts +0 -387
package/src/core/gestures/utils.ts +0 -128
package/src/core/index.ts +0 -43
package/src/core/layout/config.ts +0 -102
package/src/core/layout/index.ts +0 -168
package/src/core/layout/jsx.ts +0 -174
package/src/core/layout/schema.ts +0 -1044
package/src/core/layout/types.ts +0 -95
package/src/core/viewport/constants.ts +0 -145
package/src/core/viewport/features/base.ts +0 -73
package/src/core/viewport/features/collection.ts +0 -1182
package/src/core/viewport/features/events.ts +0 -130
package/src/core/viewport/features/item-size.ts +0 -271
package/src/core/viewport/features/loading.ts +0 -263
package/src/core/viewport/features/momentum.ts +0 -269
package/src/core/viewport/features/performance.ts +0 -161
package/src/core/viewport/features/placeholders.ts +0 -335
package/src/core/viewport/features/rendering.ts +0 -962
package/src/core/viewport/features/scrollbar.ts +0 -434
package/src/core/viewport/features/scrolling.ts +0 -634
package/src/core/viewport/features/utils.ts +0 -94
package/src/core/viewport/features/virtual.ts +0 -525
package/src/core/viewport/types.ts +0 -133
package/src/core/viewport/utils/speed-tracker.ts +0 -79
package/src/core/viewport/viewport.ts +0 -265
package/test/benchmarks/layout/advanced.test.ts +0 -656
package/test/benchmarks/layout/comparison.test.ts +0 -519
package/test/benchmarks/layout/performance-comparison.test.ts +0 -274
package/test/benchmarks/layout/real-components.test.ts +0 -733
package/test/benchmarks/layout/simple.test.ts +0 -321
package/test/benchmarks/layout/stress.test.ts +0 -990
package/test/collection/basic.test.ts +0 -304
package/test/components/vlist-selection.test.ts +0 -240
package/test/components/vlist.test.ts +0 -63
package/test/core/collection/adapter.test.ts +0 -161
package/test/core/collection/collection.test.ts +0 -394
package/test/core/layout/layout.test.ts +0 -201
package/test/utils/dom-helpers.ts +0 -275
package/test/utils/performance-helpers.ts +0 -392
package/tsconfig.json +0 -20

package/test/benchmarks/layout/real-components.test.ts DELETED Viewed

@@ -1,733 +0,0 @@
-// test/integration/real-components.test.ts - Integration Tests with Real mtrl Components
-// @ts-nocheck
-import { describe, test, expect, beforeAll, afterAll } from "bun:test";
-import { JSDOM } from "jsdom";
-// Setup for DOM testing environment
-let dom: JSDOM;
-let window: Window;
-let document: Document;
-let originalGlobalDocument: any;
-let originalGlobalWindow: any;
-// High-resolution timer
-const hrTimer = (() => {
-  const start = Date.now();
-  return () => Date.now() - start;
-})();
-beforeAll(() => {
-  // Create JSDOM instance
-  dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
-    url: "http://localhost/",
-    pretendToBeVisual: true,
-    resources: "usable",
-  });
-  window = dom.window as any;
-  document = window.document;
-  // Store original globals
-  originalGlobalDocument = global.document;
-  originalGlobalWindow = global.window;
-  // Set globals
-  global.document = document;
-  global.window = window as any;
-  global.Element = (window as any).Element;
-  global.HTMLElement = (window as any).HTMLElement;
-  global.DocumentFragment = (window as any).DocumentFragment;
-  // Fix performance.now conflict
-  (global as any).performance = {
-    now: hrTimer,
-    mark: () => {},
-    measure: () => {},
-    getEntriesByType: () => [],
-    clearMarks: () => {},
-    clearMeasures: () => {},
-  };
-  // Add DOM APIs
-  global.getComputedStyle = () => ({
-    position: "static",
-    getPropertyValue: () => "",
-  });
-});
-afterAll(() => {
-  // Restore globals
-  global.document = originalGlobalDocument;
-  global.window = originalGlobalWindow;
-  window.close();
-});
-// Import after DOM setup
-import {
-  createLayout,
-  performance as addonsPerformance,
-} from "../../../src/core/layout";
-// Import real mtrl components
-import {
-  createButton,
-  createCard,
-  createTextfield,
-  createCheckbox,
-  createSelect,
-  createTabs,
-  createList,
-} from "mtrl";
-describe("Real Component Integration Tests", () => {
-  beforeAll(() => {
-    // Clear all caches before tests
-    addonsPerformance.clearAll();
-  });
-  describe("Real Component Performance", () => {
-    test("layout system with real mtrl buttons", () => {
-      const iterations = 1000;
-      console.log(`\n🔘 Real Button Components (${iterations} layouts):`);
-      console.log(`   Testing mtrl-addons layout + real mtrl.createButton()`);
-      const createButtonLayoutSchema = () => [
-        "div",
-        "button-container",
-        {
-          layout: { type: "row", gap: "1rem", wrap: true },
-          class: "button-demo",
-        },
-        // Primary button
-        [
-          "div",
-          "btn-1",
-          {
-            component: {
-              creator: () =>
-                createButton({
-                  type: "filled",
-                  label: "Primary Action",
-                  icon: "check",
-                }),
-              options: {},
-            },
-          },
-        ],
-        // Secondary button
-        [
-          "div",
-          "btn-2",
-          {
-            component: {
-              creator: () =>
-                createButton({
-                  type: "outlined",
-                  label: "Secondary",
-                  disabled: false,
-                }),
-              options: {},
-            },
-          },
-        ],
-        // Text button
-        [
-          "div",
-          "btn-3",
-          {
-            component: {
-              creator: () =>
-                createButton({
-                  type: "text",
-                  label: "Cancel",
-                }),
-              options: {},
-            },
-          },
-        ],
-      ];
-      addonsPerformance.clearAll();
-      const start = hrTimer();
-      const layouts = [];
-      for (let i = 0; i < iterations; i++) {
-        layouts.push(createLayout(createButtonLayoutSchema()));
-      }
-      const createTime = hrTimer() - start;
-      const destroyStart = hrTimer();
-      layouts.forEach((layout) => layout.destroy());
-      const destroyTime = hrTimer() - destroyStart;
-      const totalTime = createTime + destroyTime;
-      const avgTimePerLayout = totalTime / iterations;
-      const totalComponents = iterations * 3;
-      console.log(`   Creation: ${createTime.toFixed(2)}ms`);
-      console.log(`   Cleanup:  ${destroyTime.toFixed(2)}ms`);
-      console.log(`   Total:    ${totalTime.toFixed(2)}ms`);
-      console.log(`   Per layout: ${avgTimePerLayout.toFixed(3)}ms`);
-      console.log(
-        `   Per button: ${(totalTime / totalComponents).toFixed(4)}ms`
-      );
-      console.log(
-        `   Throughput: ${Math.round(
-          iterations / (totalTime / 1000)
-        ).toLocaleString()} layouts/sec`
-      );
-      expect(totalTime).toBeLessThan(10000); // Should complete within 10 seconds
-      expect(avgTimePerLayout).toBeLessThan(10); // Should be under 10ms per layout
-    });
-    test("complex form with real mtrl components", () => {
-      const iterations = 200;
-      console.log(`\n📝 Real Form Components (${iterations} forms):`);
-      console.log(`   Testing complex forms with real mtrl components`);
-      const createFormLayoutSchema = () => [
-        "form",
-        "registration-form",
-        {
-          layout: { type: "stack", gap: "1.5rem" },
-          class: "registration-form",
-        },
-        // Form header
-        [
-          "div",
-          "form-header",
-          {
-            layout: { type: "stack", gap: "0.5rem" },
-            class: "form-header",
-          },
-          [
-            "h2",
-            "title",
-            { textContent: "User Registration", class: "form-title" },
-          ],
-          [
-            "p",
-            "subtitle",
-            {
-              textContent: "Please fill in your details",
-              class: "form-subtitle",
-            },
-          ],
-        ],
-        // Personal info section
-        [
-          "fieldset",
-          "personal-info",
-          {
-            layout: { type: "grid", columns: 2, gap: "1rem" },
-            class: "form-section",
-          },
-          [
-            "legend",
-            "personal-legend",
-            { textContent: "Personal Information" },
-          ],
-          // First name field
-          [
-            "div",
-            "first-name",
-            {
-              component: {
-                creator: () =>
-                  createTextfield({
-                    label: "First Name",
-                    placeholder: "Enter your first name",
-                    required: true,
-                  }),
-                options: {},
-              },
-            },
-          ],
-          // Last name field
-          [
-            "div",
-            "last-name",
-            {
-              component: {
-                creator: () =>
-                  createTextfield({
-                    label: "Last Name",
-                    placeholder: "Enter your last name",
-                    required: true,
-                  }),
-                options: {},
-              },
-            },
-          ],
-          // Email field
-          [
-            "div",
-            "email",
-            {
-              layoutItem: { span: 2 },
-              component: {
-                creator: () =>
-                  createTextfield({
-                    label: "Email",
-                    type: "email",
-                    placeholder: "user@example.com",
-                    required: true,
-                  }),
-                options: {},
-              },
-            },
-          ],
-        ],
-        // Preferences section
-        [
-          "fieldset",
-          "preferences",
-          {
-            layout: { type: "stack", gap: "1rem" },
-            class: "form-section",
-          },
-          ["legend", "preferences-legend", { textContent: "Preferences" }],
-          // Country select
-          [
-            "div",
-            "country",
-            {
-              component: {
-                creator: () =>
-                  createSelect({
-                    label: "Country",
-                    options: [
-                      { value: "us", label: "United States" },
-                      { value: "ca", label: "Canada" },
-                      { value: "uk", label: "United Kingdom" },
-                      { value: "de", label: "Germany" },
-                      { value: "fr", label: "France" },
-                    ],
-                  }),
-                options: {},
-              },
-            },
-          ],
-          // Additional text field
-          [
-            "div",
-            "bio",
-            {
-              layoutItem: { span: 1 },
-              component: {
-                creator: () =>
-                  createTextfield({
-                    label: "Bio",
-                    placeholder: "Tell us about yourself",
-                    multiline: true,
-                  }),
-                options: {},
-              },
-            },
-          ],
-          // Notifications checkbox
-          [
-            "div",
-            "notifications",
-            {
-              component: {
-                creator: () =>
-                  createCheckbox({
-                    label: "Receive email notifications",
-                    checked: true,
-                  }),
-                options: {},
-              },
-            },
-          ],
-          // Newsletter checkbox
-          [
-            "div",
-            "newsletter",
-            {
-              component: {
-                creator: () =>
-                  createCheckbox({
-                    label: "Subscribe to newsletter",
-                    checked: false,
-                  }),
-                options: {},
-              },
-            },
-          ],
-        ],
-        // Form actions
-        [
-          "div",
-          "form-actions",
-          {
-            layout: { type: "row", gap: "1rem", justify: "flex-end" },
-            class: "form-actions",
-          },
-          [
-            "div",
-            "cancel-btn",
-            {
-              component: {
-                creator: () =>
-                  createButton({
-                    type: "text",
-                    label: "Cancel",
-                  }),
-                options: {},
-              },
-            },
-          ],
-          [
-            "div",
-            "submit-btn",
-            {
-              component: {
-                creator: () =>
-                  createButton({
-                    type: "filled",
-                    label: "Register",
-                    icon: "person_add",
-                  }),
-                options: {},
-              },
-            },
-          ],
-        ],
-      ];
-      addonsPerformance.clearAll();
-      const start = hrTimer();
-      const layouts = [];
-      for (let i = 0; i < iterations; i++) {
-        layouts.push(createLayout(createFormLayoutSchema()));
-      }
-      const createTime = hrTimer() - start;
-      const destroyStart = hrTimer();
-      layouts.forEach((layout) => layout.destroy());
-      const destroyTime = hrTimer() - destroyStart;
-      const totalTime = createTime + destroyTime;
-      const avgTimePerForm = totalTime / iterations;
-      const totalComponents = iterations * 10; // ~10 real components per form
-      console.log(`   Creation: ${createTime.toFixed(2)}ms`);
-      console.log(`   Cleanup:  ${destroyTime.toFixed(2)}ms`);
-      console.log(`   Total:    ${totalTime.toFixed(2)}ms`);
-      console.log(`   Per form: ${avgTimePerForm.toFixed(3)}ms`);
-      console.log(
-        `   Per component: ${(totalTime / totalComponents).toFixed(4)}ms`
-      );
-      console.log(
-        `   Throughput: ${Math.round(
-          iterations / (totalTime / 1000)
-        ).toLocaleString()} forms/sec`
-      );
-      expect(totalTime).toBeLessThan(30000); // Should complete within 30 seconds
-      expect(avgTimePerForm).toBeLessThan(150); // Should be under 150ms per form
-    });
-    test("dashboard with real mtrl cards and lists", () => {
-      const iterations = 100;
-      console.log(`\n📊 Real Dashboard Components (${iterations} dashboards):`);
-      console.log(`   Testing dashboard layouts with cards, lists, and tabs`);
-      const createDashboardSchema = () => [
-        "div",
-        "dashboard",
-        {
-          layout: { type: "grid", columns: 12, gap: "1.5rem" },
-          class: "dashboard-layout",
-        },
-        // Header
-        [
-          "header",
-          "dashboard-header",
-          {
-            layoutItem: { span: 12 },
-            layout: {
-              type: "row",
-              gap: "1rem",
-              align: "center",
-              justify: "space-between",
-            },
-          },
-          [
-            "h1",
-            "dashboard-title",
-            { textContent: "Dashboard", class: "dashboard-title" },
-          ],
-          [
-            "div",
-            "header-actions",
-            {
-              component: {
-                creator: () =>
-                  createButton({
-                    type: "filled",
-                    label: "New Item",
-                    icon: "add",
-                  }),
-                options: {},
-              },
-            },
-          ],
-        ],
-        // Stats cards
-        [
-          "div",
-          "stats-row",
-          {
-            layoutItem: { span: 12 },
-            layout: { type: "grid", columns: 4, gap: "1rem" },
-          },
-          [
-            "div",
-            "stat-card-1",
-            {
-              component: {
-                creator: () =>
-                  createCard({
-                    title: "Total Sales",
-                    content: "$24,567",
-                    variant: "elevated",
-                  }),
-                options: {},
-              },
-            },
-          ],
-          [
-            "div",
-            "stat-card-2",
-            {
-              component: {
-                creator: () =>
-                  createCard({
-                    title: "New Customers",
-                    content: "156",
-                    variant: "elevated",
-                  }),
-                options: {},
-              },
-            },
-          ],
-          [
-            "div",
-            "stat-card-3",
-            {
-              component: {
-                creator: () =>
-                  createCard({
-                    title: "Conversion Rate",
-                    content: "3.24%",
-                    variant: "elevated",
-                  }),
-                options: {},
-              },
-            },
-          ],
-          [
-            "div",
-            "stat-card-4",
-            {
-              component: {
-                creator: () =>
-                  createCard({
-                    title: "Active Users",
-                    content: "1,247",
-                    variant: "elevated",
-                  }),
-                options: {},
-              },
-            },
-          ],
-        ],
-        // Main content area
-        [
-          "div",
-          "main-content",
-          {
-            layoutItem: { span: 8 },
-            layout: { type: "stack", gap: "1.5rem" },
-          },
-          // Tabs for different views
-          [
-            "div",
-            "content-tabs",
-            {
-              component: {
-                creator: () =>
-                  createTabs({
-                    tabs: [
-                      { id: "overview", label: "Overview", active: true },
-                      { id: "analytics", label: "Analytics" },
-                      { id: "reports", label: "Reports" },
-                    ],
-                  }),
-                options: {},
-              },
-            },
-          ],
-          // Data card
-          [
-            "div",
-            "data-card",
-            {
-              component: {
-                creator: () =>
-                  createCard({
-                    title: "Recent Activity",
-                    content: "Loading recent activities...",
-                    variant: "outlined",
-                  }),
-                options: {},
-              },
-            },
-          ],
-        ],
-        // Sidebar
-        [
-          "aside",
-          "sidebar",
-          {
-            layoutItem: { span: 4 },
-            layout: { type: "stack", gap: "1rem" },
-          },
-          // Quick actions list
-          [
-            "div",
-            "quick-actions",
-            {
-              component: {
-                creator: () =>
-                  createList({
-                    title: "Quick Actions",
-                    items: [
-                      {
-                        id: "1",
-                        text: "Create new project",
-                        icon: "add_circle",
-                      },
-                      { id: "2", text: "View reports", icon: "assessment" },
-                      { id: "3", text: "Manage users", icon: "people" },
-                      { id: "4", text: "Settings", icon: "settings" },
-                    ],
-                  }),
-                options: {},
-              },
-            },
-          ],
-          // Notifications card
-          [
-            "div",
-            "notifications",
-            {
-              component: {
-                creator: () =>
-                  createCard({
-                    title: "Notifications",
-                    content: "You have 3 new notifications",
-                    variant: "filled",
-                  }),
-                options: {},
-              },
-            },
-          ],
-        ],
-      ];
-      addonsPerformance.clearAll();
-      const start = hrTimer();
-      const layouts = [];
-      for (let i = 0; i < iterations; i++) {
-        layouts.push(createLayout(createDashboardSchema()));
-      }
-      const createTime = hrTimer() - start;
-      const destroyStart = hrTimer();
-      layouts.forEach((layout) => layout.destroy());
-      const destroyTime = hrTimer() - destroyStart;
-      const totalTime = createTime + destroyTime;
-      const avgTimePerDashboard = totalTime / iterations;
-      const totalComponents = iterations * 12; // ~12 real components per dashboard
-      console.log(`   Creation: ${createTime.toFixed(2)}ms`);
-      console.log(`   Cleanup:  ${destroyTime.toFixed(2)}ms`);
-      console.log(`   Total:    ${totalTime.toFixed(2)}ms`);
-      console.log(`   Per dashboard: ${avgTimePerDashboard.toFixed(3)}ms`);
-      console.log(
-        `   Per component: ${(totalTime / totalComponents).toFixed(4)}ms`
-      );
-      console.log(
-        `   Throughput: ${Math.round(
-          iterations / (totalTime / 1000)
-        ).toLocaleString()} dashboards/sec`
-      );
-      expect(totalTime).toBeLessThan(60000); // Should complete within 1 minute
-      expect(avgTimePerDashboard).toBeLessThan(600); // Should be under 600ms per dashboard
-    });
-  });
-  describe("Integration Performance Summary", () => {
-    test("real component performance summary", () => {
-      console.log(`\n🎯 Real Component Integration Summary:`);
-      console.log(`============================================`);
-      console.log(`✅ Button layouts: Real mtrl.createButton() components`);
-      console.log(`✅ Form layouts: Complex forms with multiple field types`);
-      console.log(`✅ Dashboard layouts: Cards, lists, tabs, and navigation`);
-      console.log(`\n📊 Expected Performance with Real Components:`);
-      console.log(`   • Simple button layout: ~5-15ms`);
-      console.log(`   • Complex form: ~50-150ms`);
-      console.log(`   • Full dashboard: ~200-600ms`);
-      console.log(`\n💡 Real vs Mock Component Overhead:`);
-      console.log(`   • Mock components: ~0.02-0.05ms per component`);
-      console.log(`   • Real components: ~2-15ms per component`);
-      console.log(`   • Overhead factor: ~100-300x (expected)`);
-      console.log(`\n🚀 Production Optimization:`);
-      console.log(`   • Component pooling: Reuse component instances`);
-      console.log(`   • Lazy loading: Create components on demand`);
-      console.log(`   • Batch operations: Group component creation`);
-      console.log(`   • Fragment optimization: Already implemented`);
-      console.log(`\n🏆 CONCLUSION: mtrl-addons + real mtrl components`);
-      console.log(
-        `   perform excellently even with component creation overhead!`
-      );
-      expect(true).toBe(true); // This is a summary test
-    });
-  });
-});