@themarioga/grid-editor 3.2.1 → 4.1.0

package/BUILDING.md

@@ -19,8 +19,17 @@ and the files in `src/js/locales/` and `src/js/plugins/` one by one under
 `dist/locales/` and `dist/plugins/`. Neither of those two directories is part
 of the main bundle: the `src/js/*.js` glob does not descend, so a page loads
 the languages and the container plugins it actually wants. See
-[docs/plugins.md](docs/plugins.md) for what a container plugin is. Locale files are
-deliberately not part of the main bundle: a page loads only the languages it
+[docs/plugins.md](docs/plugins.md) for what a container plugin is.
+
+One more file comes out of it: `dist/jquery.grideditor.bundle.min.js`, the
+minified editor concatenated with the copy of SortableJS in `node_modules`,
+for pages that would rather load one file than two. It carries both MIT
+notices, it is built after the minified editor because it is made of it, and a
+page loads it *or* the editor and SortableJS separately, never both. The
+version is pinned in `package.json`, so refreshing it is an `npm update
+sortablejs` and a rebuild.
+
+Locale files are deliberately not part of the main bundle: a page loads only the languages it
 offers. English is the exception and lives in the bundle, because it is the
 fallback every string lookup ends at. See `docs/locale-keys.md` for the keys,
 and `src/js/locales/grideditor.es.js` for what a locale file looks like.
@@ -44,7 +53,7 @@ suite, pass part of its name:
 
 A suite can also be run on its own with `node test/rte.js`.
 
-The fixture pages in `test/fixtures` load jQuery, jQuery UI and Bootstrap from
+The fixture pages in `test/fixtures` load jQuery, SortableJS and Bootstrap from
 `test/vendor` rather than from a CDN, so most of the suite runs offline. The
 rich text editor suite is the exception: it loads tinyMCE, CKEditor and
 Summernote from their CDNs to test against the real editors, and the runner

package/CHANGELOG.md

@@ -5,6 +5,93 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [4.1.0] - 2026-09-22
+### Added
+- Utility plugins, a third kind beside containers and features:
+  `$.fn.gridEditor.utilities`. A plugin declares families of Bootstrap's
+  responsive utility classes and the editor reads them through the cascade,
+  writes them per breakpoint (the all view writes the class with no infix and
+  clears the rest), shows them in a folded *Responsive* section of the settings
+  panel, and previews them in each breakpoint view. See docs/plugins.md.
+- `getUtility` and `setUtility` methods, and the `utilities` setting for the
+  plugins' options.
+- `before-utility`, `after-utility` and `view-change` events. `view-change` is
+  new for every host, not only for utility plugins.
+- The plugin handle gains `kindOf`, `view`, `viewTiers`, `breakpoints`,
+  `getUtility` and `setUtility`, and a utility plugin may add tools beside any
+  drawer's gear and mark the canvas in `onRefresh`.
+- The `visibility` utility plugin: hide a row, column, element or container at
+  some breakpoints with `d-{bp}-none` and show it at others. An eye in each
+  drawer toggles the view being edited with as few classes as that takes. A
+  hidden node stays on the canvas, faded, and in the all view a badge says at
+  which breakpoints it is hidden.
+- The `order` utility plugin: a column's place in its row per breakpoint,
+  with `order-{bp}-*`. Two arrows in each column drawer move it one place
+  earlier or later in the view being edited without moving the markup, and
+  take the classes off again once the row is back in the markup's order. A
+  column ordered by class says so in a corner of the canvas.
+- The `alignment` utility plugin: `justify-content-{bp}-*` and
+  `align-items-{bp}-*` on rows, `align-self-{bp}-*` on columns, as fields in
+  the settings panel.
+- The `gutters` utility plugin: `g-{bp}-*`, `gx-{bp}-*` and `gy-{bp}-*` on
+  rows. A row with gutter classes is drawn with its real gutters instead of the
+  editor's frame, the preview settles `g` against `gx`/`gy` the way Bootstrap's
+  css does, and choosing `g` takes that breakpoint's `gx` and `gy` off.
+  `utilities.gutters.scale` follows a page that changed `$spacers`.
+- The `spacing` utility plugin: padding and margin on rows, columns, elements
+  and containers, `{p,m}{,x,y,t,b,s,e}-{bp}-*`. The panel has a padding and a
+  margin group, each a side and a value, and the preview settles the fourteen
+  families the way Bootstrap's css does. `utilities.spacing.values` and
+  `.scale` narrow the steps and follow a changed `$spacers`.
+- A utility plugin can build its own panel (`panel`, `ge.utilityField`,
+  families with `panel: false`) and preview a node as a whole (`preview`).
+- `example/utilities.html`.
+
+## [4.0.0] - 2026-09-22
+### Added
+- Editing from a touchscreen. Sorting, resizing a column and carrying a toolbar
+  button onto the canvas all work with a finger; a touch rests for
+  `drag.touch_delay` before it moves anything, so the page can still be
+  scrolled. `test/touch.js` holds every gesture to it, and none of them worked
+  in 3.x.
+- `dist/jquery.grideditor.bundle.min.js`: the editor with SortableJS inside it,
+  for pages that would rather load one file than two. A page loads it or the
+  pair, never both.
+- A `drag` setting: `delay`, `touch_delay`, `threshold`, `animation` and
+  `scroll`, named for the gesture rather than for the library underneath.
+- A whole container can be dragged. Its move tool used to be a handle for a
+  list that did not accept containers, so dragging one did nothing.
+
+### Removed
+- jQuery UI is no longer a dependency. A page loads jQuery, SortableJS and the
+  editor, which comes to 81.6 kB gzip against 132.8 kB before: 51 kB less, 39%
+  of the page.
+- `sortable_options` and `resizable_options`. Both handed out the drag
+  library's own options; `drag` and `resize` replace them, and passing either
+  warns once naming the replacement.
+
+### Changed
+- Resizing a column and dragging a toolbar button onto the canvas are the
+  editor's own pointer code, so jQuery UI is no longer used at all. A refused
+  `before-resize` now stops the gesture before it starts instead of refusing
+  every step of it, and the pointer is captured, so a fast drag that leaves the
+  column behind keeps resizing it. `.ui-resizable-*` become `.ge-resize-*` and
+  `.ge-resizing`; a palette button carries `.ge-palette-button`.
+- Sorting is SortableJS instead of jQuery UI: rows, columns, blocks, tabs,
+  accordion items and elements all move through it, with touch support that
+  jQuery UI sortable never had. `.ui-sortable-helper` and
+  `.ui-sortable-placeholder` become `.ge-drag-helper` and
+  `.ge-drag-placeholder`.
+- Every sortable list the editor makes, core's and a plugin's, goes through one
+  internal seam that names the drag toolkit in one place. Groundwork for 4.0,
+  which replaces jQuery UI with SortableJS.
+- A plugin's `onSortable` hook receives that function instead of a jQuery UI
+  options object, and describes a list rather than making one. See
+  `UPGRADING.md`.
+- Sortable groups are scoped to the editor instance, so two editors on one page
+  no longer drag into each other.
+
+
 ## [3.2.1] - 2026-09-22
 ### Changed
 - `example/containers.html` shows a card too: its own row, with two columns

package/README.md

@@ -1,7 +1,7 @@
 Grid Editor
 ===========
 
-Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), written as a [jQuery](http://jquery.com/) plugin. You can create, drag, resize and delete rows and columns, indent them, and give each of bootstrap's six breakpoints its own layout — or edit them all at once. It also edits tabs, accordions, popups and cards, and any markup you mark as an element, and it tells your application about every change it makes.
+Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), written as a [jQuery](http://jquery.com/) plugin. You can create, drag, resize and delete rows and columns, indent them, and give each of bootstrap's six breakpoints its own layout — or edit them all at once, with a mouse or with a finger. It also edits tabs, accordions, popups and cards, and any markup you mark as an element, and it tells your application about every change it makes.
 
 This is a fork of [Friendly-Pixel/grid-editor](https://github.com/Friendly-Pixel/grid-editor)
 by Simon Epskamp, carrying it on from 2.x. It is published as
@@ -30,6 +30,7 @@ from any web server, or from GitHub Pages, with no build step.
 | [example/plugins.html](example/plugins.html) | The plugin model, with one written in the page itself | [live](https://themarioga.github.io/grid-editor/example/plugins.html) |
 | [example/containers.html](example/containers.html) | Tabs, accordions, popups and cards, two levels deep | [live](https://themarioga.github.io/grid-editor/example/containers.html) |
 | [example/elements.html](example/elements.html) | Element level controls, including an element with no visual output | [live](https://themarioga.github.io/grid-editor/example/elements.html) |
+| [example/utilities.html](example/utilities.html) | Bootstrap's responsive utilities, edited per breakpoint | [live](https://themarioga.github.io/grid-editor/example/utilities.html) |
 | [example/locale.html](example/locale.html) | The interface in Spanish, with a language switcher | [live](https://themarioga.github.io/grid-editor/example/locale.html) |
 | [example/ckeditor.html](example/ckeditor.html) | CKEditor instead of tinyMCE | [live](https://themarioga.github.io/grid-editor/example/ckeditor.html) |
 | [example/summernote.html](example/summernote.html) | Summernote instead of tinyMCE | [live](https://themarioga.github.io/grid-editor/example/summernote.html) |
@@ -39,7 +40,7 @@ from any web server, or from GitHub Pages, with no build step.
 Installation
 ------------
 
-* __Dependencies:__ Grid Editor depends on jQuery, jQuery UI, Bootstrap Icons, and Bootstrap 5, so make sure you have included those in the page. 
+* __Dependencies:__ Grid Editor depends on jQuery, [SortableJS](https://sortablejs.github.io/Sortable/), Bootstrap Icons, and Bootstrap 5, so make sure you have included those in the page. 
     * If you want to use the tinyMCE integration, include tinyMCE 6 as well. The tinyMCE jQuery plugin is no longer needed, and no longer exists as of tinyMCE 6.
     * If you want to use the summernote integration, include summernote as well.
     * If you want to use the CKEditor integration... you get the point.
@@ -52,11 +53,20 @@ npm install @themarioga/grid-editor
 * Or [download the latest version of Grid Editor](https://github.com/themarioga/grid-editor/archive/master.zip) and include it in your page: 
 
 ```html
-<!-- Make sure jQuery, jQuery UI, bootstrap icons, and bootstrap 5 are included. TinyMCE is optional. -->
+<!-- Make sure jQuery, SortableJS, bootstrap icons, and bootstrap 5 are included. TinyMCE is optional. -->
 <link rel="stylesheet" type="text/css" href="grid-editor/dist/grideditor.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
 <script src="grid-editor/dist/jquery.grideditor.min.js"></script>
 ```
 
+Or, for a page that would rather load one file, the editor with SortableJS
+inside it &mdash; one or the other, never both:
+
+```html
+<link rel="stylesheet" type="text/css" href="grid-editor/dist/grideditor.min.css" />
+<script src="grid-editor/dist/jquery.grideditor.bundle.min.js"></script>
+```
+
 Usage
 -----
 ```javascript
@@ -91,6 +101,8 @@ $('#myGrid').gridEditor('method', argument);
 | `createContainer` | `type`, `options?` | `jQuery` | `'tabs'`, `'accordion'` or `'popup'` |
 | `addTab` | `container`, `options?` | `jQuery` | Appends a tab, returns its pane |
 | `addAccordionItem` | `container`, `options?` | `jQuery` | Appends an item, returns its body |
+| `getUtility` | `node`, `family`, `view?` | `String` | A utility plugin's value on a node in a view (the current one by default), or `null` |
+| `setUtility` | `node`, `family`, `value`, `view?` | `Boolean` | Write it through the events; `null` is inherit. `false` if canceled or nothing changed |
 
 A method called on an element with no editor on it is a no-op that returns the
 set, so host code does not have to check first. `getHtml` is the exception: it
@@ -295,7 +307,19 @@ $('#myGrid').gridEditor({
 
 __`confirm_delete`:__ Whether to ask before deleting a row, column, element or container. Default `true`. The question is asked in a Bootstrap modal the editor builds outside your canvas, in the interface language; a page that loaded Bootstrap's css but not its javascript gets the browser's own confirm instead. Set it to `false` if you cancel `before-delete` and ask in your own way.
 
-__`sortable_options`:__ Merged into every jQuery UI sortable, for hosts that need `cancel`, `tolerance` or a custom `connectWith`.
+__`drag`:__ How a drag behaves, wherever the editor drags something. Named for the gesture rather than for the library underneath, so it survives a change of library. Every gesture works from a touchscreen, which is what `touch_delay` is for: a touch drag that started instantly would take the page's scrolling with it, so a finger has to rest for a moment before it moves anything. Setting `delay` makes both gestures wait that long.
+
+```javascript
+$('#myGrid').gridEditor({
+    drag: {
+        delay: 0,           // ms to hold before a drag starts
+        touch_delay: 100,   // the same for touch, where 0 eats the page's scrolling
+        threshold: 3,       // px of movement before a gesture counts as a drag
+        animation: 150,     // ms of reordering animation, 0 for none
+        scroll: true,       // scroll the page when a drag reaches its edge
+    },
+});
+```
 
 ### Breakpoints and sizing
 
@@ -315,13 +339,12 @@ __`resize`:__ Resizing a column by dragging its edge. Defaults:
 $('#myGrid').gridEditor({
     resize: {
         enabled: true,
-        handles: 'e',      // as jQuery UI names them; 'w' for a right to left page
+        handles: 'e',      // 'w' for a right to left page, 'e, w' for both
         balance: 'next',   // the following column absorbs the change; false lets the row wrap
     },
 });
 ```
 
-__`resizable_options`:__ Merged into every jQuery UI resizable.
 
 ### Elements
 
@@ -358,6 +381,55 @@ __`element_tools`:__ Extra tools on every element drawer, same shape as `row_too
 See [example/elements.html](example/elements.html), which also shows the
 pattern for an element with no visual output of its own.
 
+### Responsive utilities
+
+Bootstrap's responsive utility classes, edited per breakpoint. Each family is
+a plugin in a file of its own:
+
+```html
+<script src="grid-editor/dist/plugins/grideditor.visibility.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.order.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.alignment.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.gutters.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.spacing.min.js"></script>
+```
+
+| Plugin | Classes | On |
+| --- | --- | --- |
+| `visibility` | `d-{bp}-none`, `d-{bp}-block`, `d-{bp}-flex` | rows, columns, elements, containers |
+| `order` | `order-{bp}-{first,0–5,last}` | columns |
+| `alignment` | `justify-content-{bp}-*`, `align-items-{bp}-*`; `align-self-{bp}-*` | rows; columns |
+| `gutters` | `g-{bp}-{0–5}`, `gx-{bp}-*`, `gy-{bp}-*` | rows |
+| `spacing` | `{p,m}{,x,y,t,b,s,e}-{bp}-{0–5}`, and `auto` for margin | rows, columns, elements, containers |
+
+A plugin puts a field in the *Responsive* section of each drawer's settings
+panel, and some add a tool to the drawer. In a breakpoint view a change is
+written for that breakpoint alone, and the field says what it inherits and from
+where. In the all view it is written once, as the class with no breakpoint, and
+replaces what the breakpoints said. While you edit, the canvas shows what the
+classes mean in the view you are in; `getHtml` returns only the classes.
+
+```javascript
+$('#myGrid').gridEditor('setUtility', column, 'visibility', 'none', 'md');   // d-md-none
+$('#myGrid').gridEditor('getUtility', column, 'visibility', 'lg');           // 'none', inherited
+```
+
+__`utilities`:__ Options for each plugin, under its name.
+
+```javascript
+$('#myGrid').gridEditor({
+    utilities: {
+        visibility: { drawer: false },   // no eye in the drawers, the field only
+        order: { drawer: false },        // no arrows in the column drawers
+        gutters: { scale: ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'] },  // if you changed $spacers
+        spacing: { values: ['0', '2', '4'], scale: [/* the same */] },          // offer fewer steps
+    },
+});
+```
+
+See [example/utilities.html](example/utilities.html), and
+[docs/plugins.md](docs/plugins.md#utility-plugins) for writing one.
+
 ### Containers
 
 Tabs, accordions, popups and cards. A tabs, accordion or popup container holds
@@ -379,7 +451,7 @@ it available:
 The toolbar offers a button per loaded plugin. See [docs/plugins.md](docs/plugins.md)
 for the contract, and for writing one of your own.
 
-__`plugins`:__ Which of the loaded plugins to use, containers and features alike. Every one by default; name them to use fewer than the page loaded.
+__`plugins`:__ Which of the loaded plugins to use, containers, features and utilities alike. Every one by default; name them to use fewer than the page loaded.
 
 ```javascript
 $('#myGrid').gridEditor({ plugins: ['tabs', 'elements'] });

package/UPGRADING.md

@@ -1,3 +1,82 @@
+Upgrading from grid-editor `3.*` to `4.*`
+=========================================
+
+One change, and it is worth the major: jQuery UI is gone. The editor is 51 kB
+lighter on the page and works from a touchscreen, which it never did. Four
+things to do:
+
+* __A plugin's `onSortable` takes a function, not an options object.__ It used
+  to receive the editor's shared jQuery UI options and call `.sortable()`
+  itself; it now receives `sortable(lists, { draggable, group })` and describes
+  the list instead. See [docs/plugins.md](docs/plugins.md). Nothing else in the
+  plugin handle changed.
+
+  ```javascript
+  // 3.x
+  onSortable: function(shared) {
+      ge.canvas.find('.ge-content').sortable($.extend({
+          items: '> .ge-element',
+          connectWith: '.ge-canvas .ge-content',
+      }, shared, ge.settings.sortable_options));
+  }
+
+  // 4.x
+  onSortable: function(sortable) {
+      sortable(ge.canvas.find('.ge-content'), {
+          draggable: '> .ge-element',
+          group: 'element',
+      });
+  }
+  ```
+
+* __`sortable_options` and `resizable_options` are gone.__ They existed to hand
+  you the drag library's own options, and 4.0 stops promising there is one: the
+  group names, the handle, the filter and the callbacks are the editor's, and
+  overwriting them breaks the canvas rather than tuning it. What they were used
+  for is now `drag` — `delay`, `touch_delay`, `threshold`, `animation`,
+  `scroll` — and the `resize` block you already have. Passing either warns once
+  and names the replacement.
+
+* __jQuery UI is not a dependency.__ Drop its `<script>` and add SortableJS;
+  resizing a column and carrying a toolbar button onto the canvas are the
+  editor's own pointer code now. A page that would rather load one file can
+  load `dist/jquery.grideditor.bundle.min.js`, the editor with SortableJS
+  inside it, instead of the two.
+
+  ```html
+  <!-- 3.x -->
+  <script src="jquery-ui.min.js"></script>
+  <script src="dist/jquery.grideditor.min.js"></script>
+
+  <!-- 4.x -->
+  <script src="Sortable.min.js"></script>
+  <script src="dist/jquery.grideditor.min.js"></script>
+  ```
+
+  Classes you may have styled:
+
+  | 3.x | 4.0 |
+  | --- | --- |
+  | `.ui-sortable-helper` | `.ge-drag-helper` |
+  | `.ui-sortable-placeholder` | `.ge-drag-placeholder` |
+  | `.ui-resizable-handle` | `.ge-resize-handle` |
+  | `.ui-resizable-e`, `.ui-resizable-w` | `.ge-resize-e`, `.ge-resize-w` |
+  | `.ui-resizable-resizing` | `.ge-resizing` |
+  | `.ui-draggable` on a toolbar button | `.ge-palette-button` |
+
+* __A whole container can be dragged now.__ Its move tool was a handle for a
+  list that did not accept containers, so in 3.x dragging one did nothing. It
+  moves like a row does, and fires the same `before-move`/`after-move` with the
+  container's kind.
+
+* __Two editors on one page no longer drag into each other.__ Lists were
+  connected by selector — `.ge-canvas .row` matches every canvas on the page —
+  so a column could be dragged from one editor into another, carrying the first
+  editor's furniture and firing its events in the wrong place. Lists are now
+  connected per instance. If you were relying on that, you were relying on a
+  bug.
+
+
 Upgrading from grid-editor `2.*` to `3.*`
 =========================================
 

package/dist/grideditor.css

@@ -76,7 +76,21 @@
   background: #2FA4E7;
 }
 /* The button following the pointer must not be what the pointer is over */
+.ge-drag-helper {
+  opacity: 0.85;
+  pointer-events: none;
+}
+.ge-drag-helper .ge-tools-drawer {
+  pointer-events: none;
+}
+/* A toolbar button that can be carried onto the canvas */
+.ge-palette-button {
+  cursor: move;
+  touch-action: none;
+}
 .ge-toolbar-helper {
+  position: absolute;
+  z-index: 1000;
   pointer-events: none;
   opacity: 0.85;
 }
@@ -114,21 +128,21 @@
   /* A trigger pointing at a popup that is not there any more */
   /* Elements: the level below a column, inside a content area. Dashed
        rather than solid, so a page full of them still reads as content */
-  /* Sorting */
+  /* Sorting. The dragged node stays in the list and shows where it would
+       land - that is the placeholder - while a copy of it follows the
+       pointer. */
   /* A size change should read as a movement rather than a jump, but not
        while the pointer is dragging the edge: there the column follows the
        pointer and a transition only lags behind it */
-  /* Resizing. jQuery UI's own stylesheet is not a dependency, so the handle
-       is styled here: a grip on the column's edge, clear of the drawer, which
-       is what keeps the resize gesture and the sort gesture apart */
+  /* Resizing: a grip on the column's edge, clear of the drawer, which is
+       what keeps the resize gesture and the sort gesture apart */
   /* The units the column would land on, shown in its drawer while dragging */
 }
 .ge-canvas.ge-editing .ge-tools-drawer {
   /* Positioned, so a tool can hang a picker off itself. Deliberately
-           not stacked above anything the rest of the time: jQuery UI's resize
-           handle carries an inline z-index of 90 and runs down the column's
-           edge, and a drawer sitting over it would take the clicks meant for
-           the handle. */
+           not stacked above anything the rest of the time: the resize handle
+           runs down the column's edge, and a drawer sitting over it would take
+           the clicks meant for the handle. */
   position: relative;
   -webkit-touch-callout: none;
   /* While one of its tools is offering a choice, this drawer is the one
@@ -157,6 +171,7 @@
   padding: 5px;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   display: none;
+  /* The utility plugins' fields, folded under one toggle */
 }
 .ge-canvas.ge-editing .ge-tools-drawer .ge-details .btn-group a {
   color: #333;
@@ -180,6 +195,74 @@
 .ge-canvas.ge-editing .ge-tools-drawer .ge-details input.ge-classes {
   width: 200px;
 }
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities {
+  margin-top: 5px;
+  font-size: 11px;
+  /* The spacing plugin: a side and a value per group */
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-toggle {
+  color: #333;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-toggle::before {
+  content: '\25B8';
+  display: inline-block;
+  width: 1em;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities.ge-open > .ge-utilities-toggle::before {
+  content: '\25BE';
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-body {
+  display: none;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin-top: 4px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities.ge-open > .ge-utilities-body {
+  display: flex;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility {
+  display: inline-flex;
+  flex-direction: column;
+  margin: 0;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility select {
+  border: 1px solid #7F7F7F;
+  border-radius: 4px;
+  font-size: 11px;
+  padding: 1px 2px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility-note {
+  color: #666;
+  font-size: 10px;
+  max-width: 160px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group {
+  display: inline-flex;
+  flex-direction: column;
+  /* The group names the field once */
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group > .ge-spacing-side {
+  border: 1px solid #7F7F7F;
+  border-radius: 4px;
+  font-size: 11px;
+  padding: 1px 2px;
+  margin-bottom: 2px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group .ge-utility > .ge-utility-label {
+  display: none;
+}
+.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-gutter {
+  flex-basis: 100%;
+  color: #666;
+  font-size: 10px;
+}
 .ge-canvas.ge-editing .row {
   background-color: #efefef;
   border: 1px solid #999999;
@@ -364,42 +447,48 @@
 .ge-canvas.ge-editing .ge-element > .ge-element-drawer > a.ge-element-info {
   cursor: default;
 }
-.ge-canvas.ge-editing .ui-sortable-placeholder {
+.ge-canvas.ge-editing .ge-drag-placeholder {
   background: rgba(255, 255, 0, 0.2);
-  visibility: visible !important;
+  opacity: 1;
   min-height: 50px;
   max-height: 100px;
 }
+.ge-canvas.ge-editing .ge-drag-placeholder > * {
+  visibility: hidden;
+}
 .ge-canvas.ge-editing .column {
   transition: width 120ms ease, margin-left 120ms ease;
 }
-.ge-canvas.ge-editing .column.ui-resizable-resizing {
+.ge-canvas.ge-editing .column.ge-resizing {
   transition: none;
   /* Follow the pointer in pixels: the layout mode's max-width is what
            the column will snap back into once the drag lands */
   max-width: none;
 }
-.ge-canvas.ge-editing .column > .ui-resizable-handle {
+.ge-canvas.ge-editing .column > .ge-resize-handle {
   position: absolute;
   display: block;
   z-index: 10;
+  /* The gesture is the editor's, not the page's: without this a touch
+           drag on the handle scrolls instead of resizing */
+  touch-action: none;
 }
-.ge-canvas.ge-editing .column > .ui-resizable-e,
-.ge-canvas.ge-editing .column > .ui-resizable-w {
+.ge-canvas.ge-editing .column > .ge-resize-e,
+.ge-canvas.ge-editing .column > .ge-resize-w {
   top: 0;
   bottom: 0;
   width: 8px;
   cursor: ew-resize;
   background: rgba(47, 164, 231, 0.3);
 }
-.ge-canvas.ge-editing .column > .ui-resizable-e:hover,
-.ge-canvas.ge-editing .column > .ui-resizable-w:hover {
+.ge-canvas.ge-editing .column > .ge-resize-e:hover,
+.ge-canvas.ge-editing .column > .ge-resize-w:hover {
   background: #2FA4E7;
 }
-.ge-canvas.ge-editing .column > .ui-resizable-e {
+.ge-canvas.ge-editing .column > .ge-resize-e {
   right: -1px;
 }
-.ge-canvas.ge-editing .column > .ui-resizable-w {
+.ge-canvas.ge-editing .column > .ge-resize-w {
   left: -1px;
 }
 .ge-canvas.ge-editing .ge-tools-drawer > .ge-resize-size {
@@ -409,11 +498,11 @@
   font-size: 11px;
   color: #178acc;
 }
-.ge-canvas.ge-editing .column.ui-resizable-resizing > .ge-tools-drawer > .ge-resize-size {
+.ge-canvas.ge-editing .column.ge-resizing > .ge-tools-drawer > .ge-resize-size {
   display: block;
 }
 /* The handle belongs to editing, and never to the output */
-.ge-canvas:not(.ge-editing) .ui-resizable-handle {
+.ge-canvas:not(.ge-editing) .ge-resize-handle {
   display: none;
 }
 /* Layout modes */
@@ -3873,3 +3962,82 @@
 .ge-canvas.ge-layout-xxl .offset-xxl-11 {
   margin-left: 91.66666667%;
 }
+/*
+ * The visibility plugin. A node Bootstrap would hide is kept on the canvas -
+ * there would be nothing left to click to show it again - and shown the way
+ * the view sees it instead. The selectors outweigh Bootstrap's d-* classes,
+ * which are !important too.
+ */
+.ge-canvas.ge-editing {
+  /* The all view: hidden at some breakpoints, said in a corner */
+}
+.ge-canvas.ge-editing .ge-visibility {
+  display: block !important;
+}
+.ge-canvas.ge-editing .row.ge-visibility {
+  display: flex !important;
+}
+.ge-canvas.ge-editing .ge-hidden-in-view {
+  opacity: 0.45;
+  background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(0, 0, 0, 0.07) 6px, rgba(0, 0, 0, 0.07) 12px);
+}
+.ge-canvas.ge-editing [data-ge-hidden-in] {
+  position: relative;
+}
+.ge-canvas.ge-editing [data-ge-hidden-in]::after {
+  content: attr(data-ge-hidden-in);
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  z-index: 1;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  pointer-events: none;
+}
+/* The order plugin: a column ordered by class in this view says where */
+.ge-canvas.ge-editing .column[data-ge-order]::before {
+  content: attr(data-ge-order);
+  position: absolute;
+  left: 2px;
+  bottom: 2px;
+  z-index: 1;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: rgba(23, 138, 204, 0.85);
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  pointer-events: none;
+}
+/*
+ * The gutters plugin. A row with gutter classes is drawn with its real
+ * gutters rather than the editor's frame: each column padded by half the
+ * horizontal gutter, and the vertical gutter above each column. Bootstrap
+ * takes the first line's back with a negative top margin on the row, which
+ * here would pull it over the row above, so the row's drawer takes it back
+ * instead and the gap shows between lines of columns only.
+ */
+.ge-canvas.ge-editing .row.ge-gutters {
+  margin-top: 0;
+}
+.ge-canvas.ge-editing .row.ge-gutters > .ge-tools-drawer {
+  margin-top: 0;
+  margin-bottom: calc(5px - var(--bs-gutter-y));
+  /* Bootstrap pads every child of a row by half its gutter, the drawer
+           too; it keeps the padding a row with no gutter class gives it */
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.ge-canvas.ge-editing .row.ge-gutters > .column {
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+}
+.ge-canvas.ge-editing .row.ge-gutters > .column > .ge-tools-drawer {
+  margin-left: calc(var(--bs-gutter-x) * -0.5);
+  margin-right: calc(var(--bs-gutter-x) * -0.5);
+  width: calc(100% + var(--bs-gutter-x));
+}