@bsuite/page-builder 0.2.1 → 0.2.5

package/dist/PageGridLayout.js

@@ -100,7 +100,7 @@ export function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVer
     ]);
     const visibleKeys = useMemo(() => new Set((activeLayouts.lg ?? []).map((item) => item.i)), [activeLayouts.lg]);
     const hiddenWidgetKeys = useMemo(() => [...renderableWidgetKeys].filter((key) => !visibleKeys.has(key)), [renderableWidgetKeys, visibleKeys]);
-    return (_jsxs("div", { className: className, children: [isEditing && (_jsxs("div", { className: "flex flex-col gap-3 p-4 rounded-xl shadow-lg border-2 mb-4", style: { backgroundColor: 'var(--bg-panel, var(--card, #fff))', borderColor: 'var(--accent-primary, var(--primary, #2563eb))' }, children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-10 w-10 rounded-full flex items-center justify-center animate-pulse", style: { backgroundColor: 'var(--bg-shell-accent, rgb(37 99 235 / 0.1))' }, children: _jsx(Settings2, { className: "h-5 w-5 text-primary" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-lg", style: { color: 'var(--text-heading, var(--foreground, #111827))' }, children: "Canvas Editor Active" }), _jsx("span", { className: "text-sm", style: { color: 'var(--text-secondary, var(--muted-foreground, #6b7280))' }, children: "Drag anywhere on a card to move it. Resize with the bottom-right handle." })] })] }), _jsxs("button", { type: "button", className: "shrink-0 inline-flex items-center rounded-md px-3 py-2 text-sm font-medium bg-primary text-primary-foreground shadow", onClick: () => startTransition(() => setIsEditing(false)), children: [_jsx(Save, { className: "h-4 w-4 mr-2" }), "Save & Exit"] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 pt-2 border-t", style: { borderColor: 'var(--border-shell, var(--border, #e5e7eb))' }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutGrid, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "text-sm shrink-0 text-muted-foreground", children: "Columns:" }), _jsx("input", { type: "range", min: 2, max: 24, value: layoutCols, onChange: (event) => handleColumnChange(Number(event.target.value)), className: "w-24 cursor-pointer accent-primary", "aria-label": "Column count" }), _jsx("span", { className: "text-sm font-mono w-5 text-center tabular-nums", children: layoutCols })] }), _jsx("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Column presets", children: [2, 3, 4, 6, 12].map((columnCount) => (_jsx("button", { type: "button", onClick: () => handleColumnChange(columnCount), className: "px-2 py-0.5 rounded text-xs font-medium transition-colors", style: {
+    return (_jsxs("div", { className: className, children: [isEditing && (_jsxs("div", { className: "flex flex-col gap-3 p-4 rounded-xl shadow-lg border-2 mb-4", style: { backgroundColor: 'var(--bg-panel, var(--card, #fff))', borderColor: 'var(--accent-primary, var(--primary, #2563eb))' }, children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-10 w-10 rounded-full flex items-center justify-center animate-pulse", style: { backgroundColor: 'var(--bg-shell-accent, rgb(37 99 235 / 0.1))' }, children: _jsx(Settings2, { className: "h-5 w-5 text-primary" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-lg", style: { color: 'var(--text-heading, var(--foreground, #111827))' }, children: "Canvas Editor Active" }), _jsx("span", { className: "text-sm", style: { color: 'var(--text-secondary, var(--muted-foreground, #6b7280))' }, children: "Drag anywhere on a card to move it. Resize with the bottom-right handle." })] })] }), _jsxs("button", { type: "button", className: "shrink-0 inline-flex items-center rounded-md px-3 py-2 text-sm font-medium bg-primary text-primary-foreground shadow", onClick: () => startTransition(() => setIsEditing(false)), children: [_jsx(Save, { className: "h-4 w-4 mr-2" }), "Save & Exit"] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 pt-2 border-t", style: { borderColor: 'var(--border-shell, var(--border, #e5e7eb))' }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutGrid, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "text-sm shrink-0 text-muted-foreground", children: "Columns:" }), _jsx("input", { type: "range", min: 1, max: 24, value: layoutCols, onChange: (event) => handleColumnChange(Number(event.target.value)), className: "w-24 cursor-pointer accent-primary", "aria-label": "Column count" }), _jsx("span", { className: "text-sm font-mono w-5 text-center tabular-nums", children: layoutCols })] }), _jsx("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Column presets", children: [1, 2, 3, 4, 6, 12].map((columnCount) => (_jsx("button", { type: "button", onClick: () => handleColumnChange(columnCount), className: "px-2 py-0.5 rounded text-xs font-medium transition-colors", style: {
                                         backgroundColor: layoutCols === columnCount ? 'var(--accent-primary, var(--primary, #2563eb))' : 'var(--bg-tertiary, var(--muted, #f3f4f6))',
                                         color: layoutCols === columnCount ? '#fff' : 'var(--text-secondary, var(--muted-foreground, #6b7280))',
                                         border: '1px solid var(--border-shell, var(--border, #e5e7eb))',
@@ -111,7 +111,7 @@ export function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVer
                                         }) })] })), _jsxs("button", { type: "button", onClick: handleCompact, className: "ml-auto inline-flex items-center rounded-md border px-2 py-1 text-sm text-muted-foreground", children: [_jsx(Layers, { className: "h-4 w-4 mr-1" }), "Compact Layout"] }), _jsxs("button", { type: "button", onClick: () => setResetConfirmOpen(true), className: "inline-flex items-center rounded-md border px-2 py-1 text-sm text-muted-foreground", children: [_jsx(RotateCcw, { className: "h-4 w-4 mr-1" }), "Reset to Default"] })] })] })), resetConfirmOpen && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4", role: "dialog", "aria-modal": "true", "aria-labelledby": "page-grid-reset-title", children: _jsxs("div", { className: "max-w-md rounded-lg bg-card p-5 shadow-lg border", children: [_jsx("h2", { id: "page-grid-reset-title", className: "text-lg font-semibold", children: "Reset page layout?" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "This will discard your current layout and restore all widgets to their default positions." }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx("button", { type: "button", className: "rounded-md border px-3 py-2 text-sm", onClick: () => setResetConfirmOpen(false), children: "Cancel" }), _jsx("button", { type: "button", className: "rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground", onClick: () => {
                                         handleReset();
                                         setResetConfirmOpen(false);
-                                    }, children: "Reset to Default" })] })] }) })), _jsx("div", { ref: containerRef, className: isEditing ? 'min-h-[200px]' : '', style: { backgroundColor: isEditing ? 'rgb(0 0 0 / 0.03)' : 'transparent' }, children: _jsx("div", { style: { opacity: containerWidth > 0 ? 1 : 0 }, "aria-busy": containerWidth <= 0, children: _jsx(Responsive, { width: Math.max(containerWidth, 1), className: "layout", layouts: activeLayouts, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }, rowHeight: 32, onLayoutChange: onLayoutChange, dragConfig: { enabled: isEditing, handle: '.drag-handle', bounded: false, cancel: '.react-resizable-handle' }, resizeConfig: { enabled: resizeEnabled, handles: resizeHandles }, constraints: resizeConstraints, compactor: activeCompactor, cols: activeCols, margin: [6, 6], children: activeLayouts.lg.map((layoutItem) => {
+                                    }, children: "Reset to Default" })] })] }) })), _jsx("div", { ref: containerRef, className: isEditing ? 'min-h-[200px]' : '', style: { backgroundColor: isEditing ? 'rgb(0 0 0 / 0.03)' : 'transparent' }, children: _jsx("div", { style: { opacity: containerWidth > 0 ? 1 : 0 }, "aria-busy": containerWidth <= 0, children: _jsx(Responsive, { width: Math.max(containerWidth, 1), className: "layout", layouts: activeLayouts, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }, rowHeight: 32, onLayoutChange: onLayoutChange, dragConfig: { enabled: isEditing, handle: '.drag-handle', bounded: false, cancel: '.react-resizable-handle' }, resizeConfig: { enabled: resizeEnabled, handles: resizeHandles }, constraints: resizeEnabled ? resizeConstraints : undefined, compactor: activeCompactor, cols: activeCols, margin: [6, 6], children: activeLayouts.lg.map((layoutItem) => {
                             const content = allWidgets[layoutItem.i];
                             if (content === undefined || content === null)
                                 return null;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { PageGridLayout } from './PageGridLayout.js';
 export { usePageGridLayout, DEFAULT_EDITOR_EVENT_NAMES } from './usePageGridLayout.js';
 export { rescaleLayout } from './rescaleLayout.js';
+export { WYSIWYG_REQUIRED_PRIMITIVES, WYSIWYG_SURFACE_CONTRACTS, assertWysiwygPrimitiveCoverage, getWysiwygSurfaceContract, } from './wysiwygContract.js';
+export type { WysiwygPrimitive, WysiwygSurfaceContract, WysiwygSurfaceId, } from './wysiwygContract.js';
 export { buildResponsiveLayouts, RESPONSIVE_BREAKPOINTS, } from './buildResponsiveLayouts.js';
 export type { BuildResponsiveLayoutsOptions, ResponsiveBreakpoint, } from './buildResponsiveLayouts.js';
 export { useLocalPreference, defaultPreferenceAdapter } from './preferences.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EACL,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,6BAA6B,EAC7B,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAChF,YAAY,EACV,kBAAkB,EAClB,0BAA0B,EAC1B,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EACxB,uBAAuB,EACvB,UAAU,GACX,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,EACzB,8BAA8B,EAC9B,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EACV,6BAA6B,EAC7B,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAChF,YAAY,EACV,kBAAkB,EAClB,0BAA0B,EAC1B,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EACxB,uBAAuB,EACvB,UAAU,GACX,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -1,5 +1,6 @@
 export { PageGridLayout } from './PageGridLayout.js';
 export { usePageGridLayout, DEFAULT_EDITOR_EVENT_NAMES } from './usePageGridLayout.js';
 export { rescaleLayout } from './rescaleLayout.js';
+export { WYSIWYG_REQUIRED_PRIMITIVES, WYSIWYG_SURFACE_CONTRACTS, assertWysiwygPrimitiveCoverage, getWysiwygSurfaceContract, } from './wysiwygContract.js';
 export { buildResponsiveLayouts, RESPONSIVE_BREAKPOINTS, } from './buildResponsiveLayouts.js';
 export { useLocalPreference, defaultPreferenceAdapter } from './preferences.js';

package/dist/usePageGridLayout.js

@@ -62,8 +62,8 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
         setSavedLayout,
         setSavedLayoutVersion,
     ]);
-    const layoutCols = Math.max(2, savedLayoutCols ?? defaultCols);
-    const baseCols = Math.max(2, savedBaseCols ?? defaultCols);
+    const layoutCols = Math.max(1, savedLayoutCols ?? defaultCols);
+    const baseCols = Math.max(1, savedBaseCols ?? defaultCols);
     const rawLayouts = useMemo(() => {
         if (Object.keys(savedLayout || {}).length === 0)
             return defaultLayouts;

package/dist/wysiwygContract.d.ts

@@ -0,0 +1,43 @@
+export type WysiwygPrimitive = 'react-flow' | 'tanstack-query' | 'resizable-cards' | 'dnd-kit';
+export type WysiwygSurfaceId = 'schema-builder' | 'page-builder' | 'form-layout-builder' | 'custom-page-renderer';
+export interface WysiwygSurfaceContract {
+    id: WysiwygSurfaceId;
+    ownerPackage: '@bsuite/schema-builder' | '@bsuite/page-builder' | 'crm7';
+    requiredPrimitives: readonly WysiwygPrimitive[];
+    interactionPrimitive: WysiwygPrimitive | 'read-only';
+    persistencePrimitive: WysiwygPrimitive | 'custom-pages-read-only' | 'page-grid-preference-adapter';
+}
+export declare const WYSIWYG_REQUIRED_PRIMITIVES: readonly ["react-flow", "tanstack-query", "resizable-cards", "dnd-kit"];
+export declare const WYSIWYG_SURFACE_CONTRACTS: {
+    readonly 'schema-builder': {
+        readonly id: "schema-builder";
+        readonly ownerPackage: "@bsuite/schema-builder";
+        readonly requiredPrimitives: readonly ["react-flow", "tanstack-query"];
+        readonly interactionPrimitive: "react-flow";
+        readonly persistencePrimitive: "tanstack-query";
+    };
+    readonly 'page-builder': {
+        readonly id: "page-builder";
+        readonly ownerPackage: "@bsuite/page-builder";
+        readonly requiredPrimitives: readonly ["resizable-cards", "tanstack-query"];
+        readonly interactionPrimitive: "resizable-cards";
+        readonly persistencePrimitive: "page-grid-preference-adapter";
+    };
+    readonly 'form-layout-builder': {
+        readonly id: "form-layout-builder";
+        readonly ownerPackage: "crm7";
+        readonly requiredPrimitives: readonly ["dnd-kit", "tanstack-query"];
+        readonly interactionPrimitive: "dnd-kit";
+        readonly persistencePrimitive: "tanstack-query";
+    };
+    readonly 'custom-page-renderer': {
+        readonly id: "custom-page-renderer";
+        readonly ownerPackage: "@bsuite/page-builder";
+        readonly requiredPrimitives: readonly ["tanstack-query"];
+        readonly interactionPrimitive: "read-only";
+        readonly persistencePrimitive: "custom-pages-read-only";
+    };
+};
+export declare function getWysiwygSurfaceContract(surfaceId: WysiwygSurfaceId): WysiwygSurfaceContract;
+export declare function assertWysiwygPrimitiveCoverage(contracts?: Record<WysiwygSurfaceId, WysiwygSurfaceContract>): void;
+//# sourceMappingURL=wysiwygContract.d.ts.map

package/dist/wysiwygContract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wysiwygContract.d.ts","sourceRoot":"","sources":["../src/wysiwygContract.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,SAAS,CAAC;AAE/F,MAAM,MAAM,gBAAgB,GACxB,gBAAgB,GAChB,cAAc,GACd,qBAAqB,GACrB,sBAAsB,CAAC;AAE3B,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,gBAAgB,CAAC;IACrB,YAAY,EAAE,wBAAwB,GAAG,sBAAsB,GAAG,MAAM,CAAC;IACzE,kBAAkB,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAChD,oBAAoB,EAAE,gBAAgB,GAAG,WAAW,CAAC;IACrD,oBAAoB,EAAE,gBAAgB,GAAG,wBAAwB,GAAG,8BAA8B,CAAC;CACpG;AAED,eAAO,MAAM,2BAA2B,yEAKQ,CAAC;AAEjD,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B+B,CAAC;AAEtE,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,gBAAgB,GAAG,sBAAsB,CAE7F;AAED,wBAAgB,8BAA8B,CAC5C,SAAS,GAAE,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CAA6B,GACtF,IAAI,CAcN"}

package/dist/wysiwygContract.js

@@ -0,0 +1,51 @@
+export const WYSIWYG_REQUIRED_PRIMITIVES = [
+    'react-flow',
+    'tanstack-query',
+    'resizable-cards',
+    'dnd-kit',
+];
+export const WYSIWYG_SURFACE_CONTRACTS = {
+    'schema-builder': {
+        id: 'schema-builder',
+        ownerPackage: '@bsuite/schema-builder',
+        requiredPrimitives: ['react-flow', 'tanstack-query'],
+        interactionPrimitive: 'react-flow',
+        persistencePrimitive: 'tanstack-query',
+    },
+    'page-builder': {
+        id: 'page-builder',
+        ownerPackage: '@bsuite/page-builder',
+        requiredPrimitives: ['resizable-cards', 'tanstack-query'],
+        interactionPrimitive: 'resizable-cards',
+        persistencePrimitive: 'page-grid-preference-adapter',
+    },
+    'form-layout-builder': {
+        id: 'form-layout-builder',
+        ownerPackage: 'crm7',
+        requiredPrimitives: ['dnd-kit', 'tanstack-query'],
+        interactionPrimitive: 'dnd-kit',
+        persistencePrimitive: 'tanstack-query',
+    },
+    'custom-page-renderer': {
+        id: 'custom-page-renderer',
+        ownerPackage: '@bsuite/page-builder',
+        requiredPrimitives: ['tanstack-query'],
+        interactionPrimitive: 'read-only',
+        persistencePrimitive: 'custom-pages-read-only',
+    },
+};
+export function getWysiwygSurfaceContract(surfaceId) {
+    return WYSIWYG_SURFACE_CONTRACTS[surfaceId];
+}
+export function assertWysiwygPrimitiveCoverage(contracts = WYSIWYG_SURFACE_CONTRACTS) {
+    const covered = new Set();
+    for (const contract of Object.values(contracts)) {
+        for (const primitive of contract.requiredPrimitives) {
+            covered.add(primitive);
+        }
+    }
+    const missing = WYSIWYG_REQUIRED_PRIMITIVES.filter((primitive) => !covered.has(primitive));
+    if (missing.length > 0) {
+        throw new Error(`WYSIWYG primitive coverage missing: ${missing.join(', ')}`);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/page-builder",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",
@@ -58,13 +58,14 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.2.0",
-    "jsdom": "^28.1.0",
-    "lucide-react": "^0.576.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-grid-layout": "^2.2.2",
-    "react-resizable": "^3.0.5",
-    "typescript": "~5.7.3",
-    "vitest": "^3.2.4"
+    "jsdom": "^29.1.1",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-grid-layout": "^2.2.3",
+    "react-resizable": "^3.1.3",
+    "typescript": "~6.0.3",
+    "vite": "^6.4.2",
+    "vitest": "^4.1.5"
   }
 }

package/src/styles/react-grid-layout-overrides.css

@@ -1,3 +1,17 @@
+/*
+ * BSuite page-builder — react-grid-layout style overrides + base handle styles
+ *
+ * react-grid-layout requires base CSS from `react-grid-layout/css/styles.css`
+ * + `react-resizable/css/styles.css` to render the resize handle visibly.
+ * Consumer apps usually don't import those, so we inline the handle styles
+ * here. Without this, the handle has zero size and corner-drag is silently
+ * non-functional (issue #539, 2026-05-06).
+ *
+ * The handle is only rendered into the DOM when the grid is in edit mode
+ * (rgl reads `isResizable` per item), so we don't need a separate edit-mode
+ * gate — the styles below apply only when the handle is present.
+ */
+
 .react-grid-layout {
   position: relative;
   transition: height 200ms ease;
@@ -13,6 +27,44 @@
   opacity: 0.16;
 }
 
+/* Resize handle (bottom-right corner). Visible 20×20 hit target with a
+ * diagonal-arrow marker. z-index sits above widget content but below
+ * modal overlays. */
 .react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
   z-index: 35;
+  padding: 0 3px 3px 0;
+  box-sizing: border-box;
+  background-color: transparent;
+  /* Subtle by default — opacity ramps on widget hover. */
+  opacity: 0.5;
+  transition: opacity 120ms ease;
+}
+
+/* Stronger handle when hovering the parent widget so users discover it. */
+.react-grid-item:hover > .react-resizable-handle {
+  opacity: 1;
+}
+
+/* Diagonal-arrow marker (two L-shaped border lines). */
+.react-grid-item > .react-resizable-handle::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 6px;
+  height: 6px;
+  border-right: 2px solid var(--text-secondary, rgba(0, 0, 0, 0.45));
+  border-bottom: 2px solid var(--text-secondary, rgba(0, 0, 0, 0.45));
+}
+
+/* Highlight the marker when hovering the handle itself. */
+.react-grid-item > .react-resizable-handle:hover::after {
+  border-right-color: var(--accent-primary, var(--primary, #2563eb));
+  border-bottom-color: var(--accent-primary, var(--primary, #2563eb));
 }