@bleedingdev/modern-js-create 3.2.0-ultramodern.50 → 3.2.0-ultramodern.51

package/dist/index.js

@@ -2192,6 +2192,28 @@ a {
   background: rgba(255, 255, 255, 0.92);
 }
 
+.commerce-boundary-toggle {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.94);
+  border: 0.0625rem solid rgba(23, 23, 23, 0.12);
+  border-radius: 0.8rem;
+  bottom: 1.5rem;
+  box-shadow: 0 0.75rem 2rem rgba(18, 15, 10, 0.14);
+  color: #14120d;
+  display: flex;
+  gap: 0.65rem;
+  left: 1.5rem;
+  padding: 0.8rem 1rem;
+  position: fixed;
+  z-index: 80;
+}
+
+.commerce-boundary-toggle input {
+  accent-color: #00624b;
+  height: 1rem;
+  width: 1rem;
+}
+
 @media (max-width: 860px) {
   .commerce-shell-actions {
     justify-content: flex-start;
@@ -2735,6 +2757,7 @@ function createShellPage() {
 import { Helmet } from '@modern-js/runtime/head';
 import { useLocation } from '@modern-js/plugin-tanstack/runtime';
 import { useEffect, useState, type ComponentType } from 'react';
+import BoundaryOverlay from '../boundary-overlay';
 import { ultramodernLocalisedUrls } from '../ultramodern-route-metadata';
 import { ultramodernUiMarker } from '../../ultramodern-build';
 
@@ -2779,6 +2802,7 @@ export default function ShellHome() {
   return (
     <main className="commerce-shell">
       <LocalizedHead />
+      <BoundaryOverlay />
       {Header ? <Header /> : null}
       <div className="commerce-shell-actions">
         <nav aria-label={t('shell.language.switcher')} className="commerce-language">
@@ -2823,6 +2847,7 @@ function createShellTractorsPage() {
 import { Helmet } from '@modern-js/runtime/head';
 import { useLocation } from '@modern-js/plugin-tanstack/runtime';
 import { useEffect, useState, type ComponentType } from 'react';
+import BoundaryOverlay from '../../boundary-overlay';
 import { ultramodernLocalisedUrls } from '../../ultramodern-route-metadata';
 
 const languageCodes = ['en', 'cs'] as const;
@@ -2866,6 +2891,7 @@ export default function ShellTractorsPage() {
   return (
     <main className="commerce-shell">
       <LocalizedHead />
+      <BoundaryOverlay />
       {Header ? <Header /> : null}
       <div className="commerce-shell-actions">
         <nav aria-label={t('shell.language.switcher')} className="commerce-language">
@@ -2893,6 +2919,7 @@ function createShellProductPage() {
 import { Helmet } from '@modern-js/runtime/head';
 import { useLocation } from '@modern-js/plugin-tanstack/runtime';
 import { useEffect, useState, type ComponentType } from 'react';
+import BoundaryOverlay from '../../../boundary-overlay';
 import { ultramodernLocalisedUrls } from '../../../ultramodern-route-metadata';
 
 const languageCodes = ['en', 'cs'] as const;
@@ -2938,6 +2965,7 @@ export default function ShellProductPage() {
   return (
     <main className="commerce-shell">
       <LocalizedHead />
+      <BoundaryOverlay />
       {Header ? <Header /> : null}
       <div className="commerce-shell-actions">
         <nav aria-label={t('shell.language.switcher')} className="commerce-language">
@@ -2965,6 +2993,7 @@ function createShellCartPage() {
 import { Helmet } from '@modern-js/runtime/head';
 import { useLocation } from '@modern-js/plugin-tanstack/runtime';
 import { useEffect, useState, type ComponentType } from 'react';
+import BoundaryOverlay from '../../boundary-overlay';
 import { ultramodernLocalisedUrls } from '../../ultramodern-route-metadata';
 
 const languageCodes = ['en', 'cs'] as const;
@@ -3006,6 +3035,7 @@ export default function ShellCartPage() {
   return (
     <main className="commerce-shell">
       <LocalizedHead />
+      <BoundaryOverlay />
       {Header ? <Header /> : null}
       <div className="commerce-shell-actions">
         <nav aria-label={t('shell.language.switcher')} className="commerce-language">
@@ -3027,6 +3057,164 @@ export default function ShellCartPage() {
 }
 `;
 }
+function createShellBoundaryOverlay() {
+    return `import { useModernI18n } from '@modern-js/plugin-i18n/runtime';
+import { useEffect, useMemo, useState, type CSSProperties } from 'react';
+
+type BoundaryConfig = {
+  color: string;
+  label: string;
+};
+
+type BoundaryBox = BoundaryConfig & {
+  height: number;
+  id: string;
+  labelPlacement: 'above' | 'inside';
+  left: number;
+  top: number;
+  width: number;
+};
+
+declare global {
+  interface Window {
+    __ULTRAMODERN_BOUNDARIES__?: Partial<Record<string, Partial<BoundaryConfig>>>;
+  }
+}
+
+const defaultBoundaryColors = {
+  checkout: 'var(--um-boundary-checkout, #f6cf45)',
+  decide: 'var(--um-boundary-decide, #30e27a)',
+  explore: 'var(--um-boundary-explore, #ff5a5f)',
+} as const;
+
+const boundaryIds = ['explore', 'decide', 'checkout'] as const;
+
+export default function BoundaryOverlay() {
+  const { i18nInstance, language } = useModernI18n();
+  const [enabled, setEnabled] = useState(false);
+  const [boxes, setBoxes] = useState<BoundaryBox[]>([]);
+  const boundaryConfig = useMemo(() => {
+    const t = i18nInstance['t'].bind(i18nInstance);
+    const runtimeOverrides =
+      typeof window === 'undefined'
+        ? {}
+        : (window.__ULTRAMODERN_BOUNDARIES__ ?? {});
+
+    return Object.fromEntries(
+      boundaryIds.map(id => [
+        id,
+        {
+          color: runtimeOverrides[id]?.color ?? defaultBoundaryColors[id],
+          label: runtimeOverrides[id]?.label ?? t(\`shell.boundaries.\${id}\`),
+        },
+      ]),
+    ) as Record<string, BoundaryConfig>;
+  }, [i18nInstance, language]);
+  const toggleLabel = i18nInstance['t'].bind(i18nInstance)(
+    'shell.boundaries.toggle',
+  );
+
+  useEffect(() => {
+    if (!enabled) {
+      setBoxes([]);
+      return;
+    }
+
+    const readBoxes = () => {
+      const nextBoxes = Array.from(
+        document.querySelectorAll<HTMLElement>('[data-mf-boundary]'),
+      )
+        .map((element, index) => {
+          const id = element.dataset.mfBoundary ?? 'unknown';
+          const rect = element.getBoundingClientRect();
+          if (rect.width <= 0 || rect.height <= 0) {
+            return undefined;
+          }
+          const fallback = {
+            color: 'var(--um-boundary-unknown, #7c8cff)',
+            label: id,
+          };
+          const config = boundaryConfig[id] ?? fallback;
+
+          return {
+            ...config,
+            height: rect.height,
+            id: \`\${id}-\${index}\`,
+            labelPlacement: rect.height < 48 ? 'above' : 'inside',
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+          } satisfies BoundaryBox;
+        })
+        .filter((box): box is BoundaryBox => box !== undefined);
+
+      setBoxes(nextBoxes);
+    };
+
+    readBoxes();
+
+    const resizeObserver = new ResizeObserver(readBoxes);
+    for (const element of document.querySelectorAll<HTMLElement>(
+      '[data-mf-boundary]',
+    )) {
+      resizeObserver.observe(element);
+    }
+
+    const mutationObserver = new MutationObserver(readBoxes);
+    mutationObserver.observe(document.body, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+
+    window.addEventListener('resize', readBoxes);
+    window.addEventListener('scroll', readBoxes, true);
+
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', readBoxes);
+      window.removeEventListener('scroll', readBoxes, true);
+    };
+  }, [boundaryConfig, enabled]);
+
+  return (
+    <>
+      <label className="commerce-boundary-toggle">
+        <input
+          checked={enabled}
+          onChange={event => setEnabled(event.currentTarget.checked)}
+          type="checkbox"
+        />
+        <span>{toggleLabel}</span>
+      </label>
+      {enabled ? (
+        <div aria-hidden="true" className="boundary-overlay">
+          {boxes.map(box => (
+            <div
+              className="boundary-overlay__box"
+              data-label-placement={box.labelPlacement}
+              key={box.id}
+              style={
+                {
+                  '--boundary-color': box.color,
+                  height: box.height,
+                  left: box.left,
+                  top: box.top,
+                  width: box.width,
+                } as CSSProperties
+              }
+            >
+              <span className="boundary-overlay__label">{box.label}</span>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+}
+`;
+}
 function createShellRemoteComponents() {
     return `import { createLazyComponent } from '@module-federation/modern-js-v3/react';
 import { getInstance, loadRemote } from '@module-federation/modern-js-v3/runtime';
@@ -3478,6 +3666,12 @@ function createAppLocaleMessages(app, language) {
                 decide: 'en' === language ? 'Decide Remote' : 'Decide remote',
                 explore: 'en' === language ? 'Explore Remote' : 'Explore remote'
             },
+            boundaries: {
+                checkout: 'en' === language ? 'checkout' : 'pokladna',
+                decide: 'en' === language ? 'decide' : 'rozhodování',
+                explore: 'en' === language ? 'explore' : 'procházení',
+                toggle: 'en' === language ? 'show team boundaries' : 'zobrazit hranice týmů'
+            },
             routes: {
                 cart: 'en' === language ? 'Cart' : 'Košík',
                 home: 'en' === language ? 'Home' : 'Domů',
@@ -5599,6 +5793,7 @@ function writeApp(targetDir, scope, app, packageSource, enableTailwind) {
     for (const route of createRouteOwnedI18nPaths(app))if ('/' !== route.canonicalPath && 'shell' !== app.kind) writeFile(targetDir, createRoutePageFilePath(app, route.canonicalPath), createRouteAliasPage(route.canonicalPath));
     if ('shell' === app.kind) {
         writeFile(targetDir, `${app.directory}/src/routes/remote-components.tsx`, createShellRemoteComponents());
+        writeFile(targetDir, `${app.directory}/src/routes/boundary-overlay.tsx`, createShellBoundaryOverlay());
         writeFile(targetDir, `${app.directory}/src/effect/recommendations-client.ts`, createShellEffectClient(scope));
         writeFile(targetDir, `${app.directory}/src/routes/[lang]/tractors/page.tsx`, createShellTractorsPage());
         writeFile(targetDir, `${app.directory}/src/routes/[lang]/tractors/[slug]/page.tsx`, createShellProductPage());

package/package.json

@@ -21,7 +21,7 @@
   "engines": {
     "node": ">=20"
   },
-  "version": "3.2.0-ultramodern.50",
+  "version": "3.2.0-ultramodern.51",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/index.js",
   "bin": {
@@ -41,7 +41,7 @@
     "@types/node": "^25.9.1",
     "@typescript/native-preview": "7.0.0-dev.20260527.2",
     "tsx": "^4.22.3",
-    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.50"
+    "@modern-js/i18n-utils": "npm:@bleedingdev/modern-js-i18n-utils@3.2.0-ultramodern.51"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -54,6 +54,6 @@
     "start": "node ./dist/index.js"
   },
   "ultramodern": {
-    "frameworkVersion": "3.2.0-ultramodern.50"
+    "frameworkVersion": "3.2.0-ultramodern.51"
   }
 }