@themarioga/grid-editor 7.2.0 → 7.3.0

package/dist/plugins/grideditor.visibility.js

@@ -56,7 +56,7 @@
     return node;
   }
 
-  // src/js/plugins/grideditor.visibility.js
+  // src/js/style/visibility.js
   Object.assign(GridEditor.locales.en, {
     "utility.visibility": "Visibility",
     "utility.visibility_hidden": "Hidden",
@@ -67,8 +67,8 @@
   });
   var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/;
   var NODES = ".row, .column, .ge-content, .ge-element, [data-ge-container]";
-  GridEditor.utilities.visibility = function(ge) {
-    var options = Object.assign({ drawer: true }, ge.settings.utilities.visibility);
+  function visibilityPart(ge, given) {
+    var options = Object.assign({ drawer: true }, given);
     function shown(kind) {
       return kind === "row" ? "flex" : "block";
     }
@@ -159,5 +159,11 @@
       onRefresh: mark,
       onDeinit: unmark
     };
+  }
+
+  // src/js/plugins/grideditor.visibility.js
+  GridEditor.utilities.visibility = function(ge) {
+    ge.warn('the "visibility" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');
+    return visibilityPart(ge, ge.settings.utilities.visibility);
   };
 })();

package/dist/plugins/grideditor.visibility.min.js

@@ -1 +1 @@
-(()=>{var a=window.GridEditor;if(!a||typeof a.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");function s(t,n){return t?Array.prototype.slice.call(t.querySelectorAll(n)):[]}function x(t,n){if(!t)return[];var r=s(t,n);return t.nodeType===1&&t.matches(n)&&r.unshift(t),r}function p(t,n){return t?Array.prototype.filter.call(t.children,function(r){return!n||r.matches(n)}):[]}function b(t,n){return!!t&&t.nodeType===1&&t.matches(n)}function w(t,n){return E(n).forEach(function(r){t.classList.remove(r)}),t}function d(t,n,r){return E(n).forEach(function(u){r===void 0?t.classList.toggle(u):t.classList.toggle(u,!!r)}),t}function E(t){return String(t||"").split(/\s+/).filter(Boolean)}function A(t){return t.getAttribute("class")||t.removeAttribute("class"),t}Object.assign(a.locales.en,{"utility.visibility":"Visibility","utility.visibility_hidden":"Hidden","utility.visibility_shown":"Shown","tool.hide_in_view":"Hide in this view","tool.show_in_view":"Show in this view","badge.hidden_in":"Hidden at {breakpoints}"});var O=/(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/,H=".row, .column, .ge-content, .ge-element, [data-ge-container]";a.utilities.visibility=function(t){var n=Object.assign({drawer:!0},t.settings.utilities.visibility);function r(i){return i==="row"?"flex":"block"}function u(i,e){return e==="row"||e==="column"||e==="element"||e==="text"||e==="plain"||b(i,"[data-ge-container]")}function c(i,e){return t.getUtility(i,"visibility",e)==="none"}function h(i){return t.breakpoints.filter(function(e){return c(i,e)})}function v(i){return t.view()==="all"?h(i).length===t.breakpoints.length:c(i,t.view())}function m(i){var e=t.breakpoints.indexOf(t.view());return e>0&&c(i,t.breakpoints[e-1])}function T(i,e){var l=!v(i),o;t.view()==="all"?o=l?"none":null:l?o=m(i)?null:"none":o=m(i)?r(e):null,t.setUtility(i,"visibility",o,{source:"tool"})}function C(i){x(i,H).forEach(function(e){var l=t.kindOf(e),o=u(e,l)&&O.test(e.getAttribute("class")||""),g=o?h(e):[],f=o&&v(e),_=o&&t.view()==="all"&&g.length>0&&!f;d(e,"ge-visibility",o),d(e,"ge-hidden-in-view",f),_?e.setAttribute("data-ge-hidden-in",t.t("badge.hidden_in",{breakpoints:g.join(", ")})):e.removeAttribute("data-ge-hidden-in"),p(e,".ge-tools-drawer").forEach(function(B){p(B,".ge-visibility-tool").forEach(function(y){y.setAttribute("title",f?t.t("tool.show_in_view"):t.t("tool.hide_in_view")),s(y,"i").forEach(function(k){k.setAttribute("class",f?"bi bi-eye-slash":"bi bi-eye")})})})})}function S(){s(t.canvas,".ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]").forEach(function(i){w(i,"ge-visibility ge-hidden-in-view"),i.removeAttribute("data-ge-hidden-in"),A(i)})}return{families:[{name:"visibility",prefix:"d",values:["none","block","flex"],appliesTo:["row","column","text","element","container"],labelKey:"utility.visibility",choices:function(i,e){return["none",r(e)]},label:function(i){return i==="none"?t.t("utility.visibility_hidden"):t.t("utility.visibility_shown")}}],drawerTools:function(i,e,l){!n.drawer||!u(e,l)||t.createTool(i,t.t("tool.hide_in_view"),"ge-visibility-tool","bi bi-eye",function(){T(e,l)})},onRefresh:C,onDeinit:S}};})();
+(()=>{var u=window.GridEditor;if(!u||typeof u.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");function s(t,n){return t?Array.prototype.slice.call(t.querySelectorAll(n)):[]}function x(t,n){if(!t)return[];var r=s(t,n);return t.nodeType===1&&t.matches(n)&&r.unshift(t),r}function d(t,n){return t?Array.prototype.filter.call(t.children,function(r){return!n||r.matches(n)}):[]}function w(t,n){return!!t&&t.nodeType===1&&t.matches(n)}function E(t,n){return A(n).forEach(function(r){t.classList.remove(r)}),t}function p(t,n,r){return A(n).forEach(function(a){r===void 0?t.classList.toggle(a):t.classList.toggle(a,!!r)}),t}function A(t){return String(t||"").split(/\s+/).filter(Boolean)}function T(t){return t.getAttribute("class")||t.removeAttribute("class"),t}Object.assign(u.locales.en,{"utility.visibility":"Visibility","utility.visibility_hidden":"Hidden","utility.visibility_shown":"Shown","tool.hide_in_view":"Hide in this view","tool.show_in_view":"Show in this view","badge.hidden_in":"Hidden at {breakpoints}"});var H=/(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/,N=".row, .column, .ge-content, .ge-element, [data-ge-container]";function C(t,n){var r=Object.assign({drawer:!0},n);function a(i){return i==="row"?"flex":"block"}function v(i,e){return e==="row"||e==="column"||e==="element"||e==="text"||e==="plain"||w(i,"[data-ge-container]")}function c(i,e){return t.getUtility(i,"visibility",e)==="none"}function h(i){return t.breakpoints.filter(function(e){return c(i,e)})}function m(i){return t.view()==="all"?h(i).length===t.breakpoints.length:c(i,t.view())}function y(i){var e=t.breakpoints.indexOf(t.view());return e>0&&c(i,t.breakpoints[e-1])}function S(i,e){var l=!m(i),o;t.view()==="all"?o=l?"none":null:l?o=y(i)?null:"none":o=y(i)?a(e):null,t.setUtility(i,"visibility",o,{source:"tool"})}function _(i){x(i,N).forEach(function(e){var l=t.kindOf(e),o=v(e,l)&&H.test(e.getAttribute("class")||""),g=o?h(e):[],f=o&&m(e),k=o&&t.view()==="all"&&g.length>0&&!f;p(e,"ge-visibility",o),p(e,"ge-hidden-in-view",f),k?e.setAttribute("data-ge-hidden-in",t.t("badge.hidden_in",{breakpoints:g.join(", ")})):e.removeAttribute("data-ge-hidden-in"),d(e,".ge-tools-drawer").forEach(function(L){d(L,".ge-visibility-tool").forEach(function(b){b.setAttribute("title",f?t.t("tool.show_in_view"):t.t("tool.hide_in_view")),s(b,"i").forEach(function(O){O.setAttribute("class",f?"bi bi-eye-slash":"bi bi-eye")})})})})}function B(){s(t.canvas,".ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]").forEach(function(i){E(i,"ge-visibility ge-hidden-in-view"),i.removeAttribute("data-ge-hidden-in"),T(i)})}return{families:[{name:"visibility",prefix:"d",values:["none","block","flex"],appliesTo:["row","column","text","element","container"],labelKey:"utility.visibility",choices:function(i,e){return["none",a(e)]},label:function(i){return i==="none"?t.t("utility.visibility_hidden"):t.t("utility.visibility_shown")}}],drawerTools:function(i,e,l){!r.drawer||!v(e,l)||t.createTool(i,t.t("tool.hide_in_view"),"ge-visibility-tool","bi bi-eye",function(){S(e,l)})},onRefresh:_,onDeinit:B}}u.utilities.visibility=function(t){return t.warn('the "visibility" plugin is deprecated and will be removed in 8.0: load grideditor.style.js'),C(t,t.settings.utilities.visibility)};})();

package/dist/plugins/grideditor.visibility.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/js/register.js", "../../src/js/dom.js", "../../src/js/plugins/grideditor.visibility.js"],
-  "sourcesContent": ["/**\n * What a plugin's or a locale's classic script imports in place of the\n * editor: the GridEditor the page already loaded.\n *\n * The build points `import { GridEditor } from '../grideditor.js'` here for\n * the classic scripts, so each registers on the editor the page has rather\n * than bringing its own. Loaded before the editor there is nothing to\n * register on, and saying so is better than a TypeError three calls later.\n */\nvar GridEditor = window.GridEditor;\n\nif (!GridEditor || typeof GridEditor.get !== 'function') {\n    throw new Error('grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, ' +\n        'its locales and grideditor.jquery.js');\n}\n\nexport { GridEditor };\nexport default GridEditor;\n", "/**\n * The DOM, the way grid-editor uses it.\n *\n * Small helpers over the browser's own API, for the core and the shipped\n * plugins. Not a public API: a plugin of a host's own is free to write its\n * DOM code however it likes, and this file makes no promise to it.\n *\n * Stateless on purpose. The build puts a copy of this file in each plugin's\n * classic script, so anything kept here would be kept once per copy; a\n * module that needs to remember something about a node keeps its own\n * WeakMap.\n */\n\n/** Every element under `root` matching `selector`, as an array. */\nexport function all(root, selector) {\n    return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];\n}\n\n/** The first element under `root` matching `selector`, or null. */\nexport function one(root, selector) {\n    return root ? root.querySelector(selector) : null;\n}\n\n/** `root` itself when it matches, then every element under it that does. */\nexport function selfAndAll(root, selector) {\n    if (!root) { return []; }\n\n    var found = all(root, selector);\n    if (root.nodeType === 1 && root.matches(selector)) { found.unshift(root); }\n    return found;\n}\n\n/** The element children of `node`, those matching `selector` if one is given. */\nexport function children(node, selector) {\n    if (!node) { return []; }\n\n    return Array.prototype.filter.call(node.children, function(each) {\n        return !selector || each.matches(selector);\n    });\n}\n\n/** The first element child matching `selector`, or null. */\nexport function child(node, selector) {\n    return children(node, selector)[0] || null;\n}\n\n/** The nearest ancestor-or-self matching `selector` below `stopAt`, or null. */\nexport function closest(node, selector, stopAt) {\n    var found = node && node.nodeType === 1 ? node.closest(selector) : null;\n\n    if (found && stopAt && found !== stopAt && !stopAt.contains(found)) { return null; }\n    return found;\n}\n\n/** Whether `node` is an element matching `selector`. */\nexport function is(node, selector) {\n    return !!node && node.nodeType === 1 && node.matches(selector);\n}\n\n/** Whether `node` is in the document. */\nexport function attached(node) {\n    return !!node && document.documentElement.contains(node);\n}\n\n/** The element siblings after `node` that match `selector`. */\nexport function nextAll(node, selector) {\n    var found = [];\n\n    for (var next = node.nextElementSibling; next; next = next.nextElementSibling) {\n        if (!selector || next.matches(selector)) { found.push(next); }\n    }\n    return found;\n}\n\n/** The ancestors of `node` up to, and not including, `stop`, nearest first. */\nexport function parentsUntil(node, stop) {\n    var found = [];\n\n    for (var parent = node.parentElement; parent && parent !== stop; parent = parent.parentElement) {\n        found.push(parent);\n    }\n    return found;\n}\n\n/**\n * The nodes the html parses into, detached. Parsed the way innerHTML parses,\n * so a <script> in it never runs, here or once it is in the page.\n */\nexport function parse(html) {\n    var template = document.createElement('template');\n    template.innerHTML = html;\n    return Array.prototype.slice.call(template.content.childNodes);\n}\n\n/** The one element the html is, detached. */\nexport function create(html) {\n    var nodes = parse(html.trim());\n\n    for (var i = 0; i < nodes.length; i++) {\n        if (nodes[i].nodeType === 1) { return nodes[i]; }\n    }\n    return null;\n}\n\n/** An element of `tag`, with `attributes` and `text`. */\nexport function element(tag, attributes, text) {\n    var node = document.createElement(tag);\n\n    Object.keys(attributes || {}).forEach(function(name) {\n        var value = attributes[name];\n        if (value !== null && value !== undefined && value !== false) { node.setAttribute(name, value); }\n    });\n    if (text !== undefined && text !== null) { node.textContent = text; }\n\n    return node;\n}\n\n/** Replace what `node` holds with `html`. A <script> in it does not run. */\nexport function setHtml(node, html) {\n    node.innerHTML = html === undefined || html === null ? '' : String(html);\n    return node;\n}\n\n/** Add one or several space separated classes. */\nexport function addClass(node, names) {\n    split(names).forEach(function(name) { node.classList.add(name); });\n    return node;\n}\n\nexport function removeClass(node, names) {\n    split(names).forEach(function(name) { node.classList.remove(name); });\n    return node;\n}\n\n/** Each class on, or off, or flipped when `on` is not given. */\nexport function toggleClass(node, names, state) {\n    split(names).forEach(function(name) {\n        if (state === undefined) {\n            node.classList.toggle(name);\n        } else {\n            node.classList.toggle(name, !!state);\n        }\n    });\n    return node;\n}\n\nexport function hasClass(node, name) {\n    return !!node && node.nodeType === 1 && node.classList.contains(name);\n}\n\nfunction split(names) {\n    return String(names || '').split(/\\s+/).filter(Boolean);\n}\n\n/** Take the class attribute off when there is nothing left in it. */\nexport function dropEmptyClass(node) {\n    if (!node.getAttribute('class')) { node.removeAttribute('class'); }\n    return node;\n}\n\n/** Take the style attribute off when there is nothing left in it. */\nexport function dropEmptyStyle(node) {\n    if (!node.getAttribute('style')) { node.removeAttribute('style'); }\n    return node;\n}\n\n/** Set attributes; a null or undefined value takes the attribute off. */\nexport function attr(node, attributes) {\n    Object.keys(attributes).forEach(function(name) {\n        var value = attributes[name];\n\n        if (value === null || value === undefined) {\n            node.removeAttribute(name);\n        } else {\n            node.setAttribute(name, value);\n        }\n    });\n    return node;\n}\n\n/**\n * Inline styles, by css property name. A number is pixels for the properties\n * that take a length, as jQuery had it; an empty string takes one off.\n */\nexport function css(node, styles) {\n    Object.keys(styles).forEach(function(property) {\n        var value = styles[property];\n\n        if (typeof value === 'number' && !UNITLESS[property]) { value = value + 'px'; }\n        node.style.setProperty(property, value === null || value === undefined ? '' : String(value));\n    });\n    return node;\n}\n\nvar UNITLESS = { opacity: true, 'z-index': true, 'flex-grow': true, 'flex-shrink': true, order: true };\n\n/** What an element of this tag shows as when nothing hides it. */\nvar defaultDisplays = {};\n\nfunction defaultDisplay(node) {\n    var tag = node.nodeName;\n\n    if (!defaultDisplays[tag]) {\n        var probe = document.body.appendChild(document.createElement(tag));\n        defaultDisplays[tag] = getComputedStyle(probe).display;\n        probe.remove();\n        if (defaultDisplays[tag] === 'none') { defaultDisplays[tag] = 'block'; }\n    }\n    return defaultDisplays[tag];\n}\n\n/** Show a node: its inline display:none off, and a display of its own if a stylesheet hides it. */\nexport function show(node) {\n    node.style.removeProperty('display');\n    if (getComputedStyle(node).display === 'none') { node.style.display = defaultDisplay(node); }\n    return node;\n}\n\nexport function hide(node) {\n    node.style.display = 'none';\n    return node;\n}\n\n/** Show or hide; flip when `on` is not given. */\nexport function toggle(node, state) {\n    if (state === undefined) { state = !visible(node); }\n    return state ? show(node) : hide(node);\n}\n\n/** Whether a node takes up room: what jQuery's :visible meant. */\nexport function visible(node) {\n    return !!(node.offsetWidth || node.offsetHeight || node.getClientRects().length);\n}\n\n/** The border box's width, fractions included. */\nexport function outerWidth(node) {\n    return node.getBoundingClientRect().width;\n}\n\nexport function outerHeight(node) {\n    return node.getBoundingClientRect().height;\n}\n\n/** The content box's height, which is what jQuery's height() gave. */\nexport function contentHeight(node) {\n    var style = getComputedStyle(node);\n    return node.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);\n}\n\n/** Where a node is on the page, not in the window. */\nexport function offset(node) {\n    var box = node.getBoundingClientRect();\n    return { top: box.top + window.pageYOffset, left: box.left + window.pageXOffset };\n}\n\n/** Its index among its parent's element children, those matching `selector` if given. */\nexport function indexIn(node, selector) {\n    return children(node.parentElement, selector).indexOf(node);\n}\n\n/** Put `node` right after `reference`. */\nexport function insertAfter(node, reference) {\n    reference.parentNode.insertBefore(node, reference.nextSibling);\n    return node;\n}\n\n/** Replace `node` with what it holds. */\nexport function unwrap(node) {\n    var parent = node.parentNode;\n\n    while (node.firstChild) { parent.insertBefore(node.firstChild, node); }\n    node.remove();\n}\n\n/** Put `node` inside `wrapper`, where `node` was. */\nexport function wrap(node, wrapper) {\n    node.parentNode.insertBefore(wrapper, node);\n    wrapper.appendChild(node);\n    return wrapper;\n}\n\n/**\n * Listen on `root` for `types` (space separated) on descendants that match\n * `selector`, with `this` the matched element, as jQuery's delegated\n * handlers had it. Hands back the listener, for removeEventListener; a\n * signal in `options` removes it too.\n */\nexport function delegate(root, types, selector, handler, options) {\n    var listener = function(event) {\n        var match = closest(event.target, selector, root);\n        if (match && root.contains(match)) { return handler.call(match, event); }\n        return undefined;\n    };\n\n    split(types).forEach(function(type) { root.addEventListener(type, listener, options); });\n    return listener;\n}\n\n/** Listen for several space separated event types with one handler. */\nexport function on(target, types, handler, options) {\n    split(types).forEach(function(type) { target.addEventListener(type, handler, options); });\n    return handler;\n}\n\nexport function off(target, types, handler, options) {\n    split(types).forEach(function(type) { target.removeEventListener(type, handler, options); });\n}\n\n/** A mouse event of `type` sent to `node`, the way a pointer would. */\nexport function fire(node, type) {\n    node.dispatchEvent(new MouseEvent(type, { bubbles: type !== 'mouseenter' && type !== 'mouseleave' }));\n}\n\n/* ------------------------------------------------------------------\n * Taking a node away, visibly.\n *\n * The durations are the ones 6.x had through jQuery: 400 ms unless the\n * caller says otherwise. `done` runs once the node is out of sight, which is\n * when the caller removes it; a node that is already out of sight is done at\n * once, on the next task, as jQuery had it.\n * ------------------------------------------------------------------ */\n\nvar DEFAULT_DURATION = 400;\n\nfunction animateAway(node, frames, duration, done) {\n    duration = duration === undefined ? DEFAULT_DURATION : duration;\n\n    var finish = function() {\n        hide(node);\n        if (done) { done(); }\n    };\n\n    if (!visible(node) || !node.animate || duration <= 0) {\n        window.setTimeout(finish, 0);\n        return;\n    }\n\n    var animation = node.animate(frames(getComputedStyle(node)), {\n        duration: duration,\n        easing: 'ease-in-out',\n    });\n    var called = false;\n    var once = function() {\n        if (called) { return; }\n        called = true;\n        finish();\n    };\n\n    animation.onfinish = once;\n    animation.oncancel = once;\n}\n\n/** Fold a node up to nothing, then hide it. */\nexport function slideUp(node, duration, done) {\n    if (typeof duration === 'function') {\n        done = duration;\n        duration = undefined;\n    }\n\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        return [\n            {\n                height: style.height,\n                paddingTop: style.paddingTop,\n                paddingBottom: style.paddingBottom,\n                marginTop: style.marginTop,\n                marginBottom: style.marginBottom,\n            },\n            { height: '0px', paddingTop: '0px', paddingBottom: '0px', marginTop: '0px', marginBottom: '0px' },\n        ];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n\n/** Fade a node out, then hide it. */\nexport function fadeOut(node, duration, done) {\n    animateAway(node, function(style) {\n        return [{ opacity: style.opacity }, { opacity: 0 }];\n    }, duration, done);\n}\n\n/** Fade and fold a node, in height and, with `width`, sideways too, then hide it. */\nexport function shrinkAway(node, duration, done, width) {\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        var from = { opacity: style.opacity, height: style.height };\n        var to = { opacity: 0, height: '0px' };\n\n        if (width) {\n            from.width = style.width;\n            to.width = '0px';\n        }\n        return [from, to];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n", "/**\n * Visibility for grid-editor.\n *\n * A utility plugin: load this file after the editor and every row, column,\n * element and container can be hidden at some breakpoints and shown at\n * others, with Bootstrap's d-{breakpoint}-none and d-{breakpoint}-block (or\n * -flex, for a row, which is a flex container and stops being a grid as a\n * block). What it can ask the editor for is the handle its factory is called\n * with, described in docs/plugins.md.\n *\n *   <script src=\"dist/grideditor.min.js\"></script>\n *   <script src=\"dist/plugins/grideditor.visibility.min.js\"></script>\n *\n * A hidden node is never hidden from the editor, which would leave nothing to\n * click to show it again. It stays on the canvas, faded and striped in a view\n * where it is hidden, and in the all view says at which breakpoints it is.\n *\n * utilities.visibility.drawer: false leaves the eye out of the drawers, and\n * the panel field is the only control.\n */\nimport { GridEditor } from '../grideditor.js';\nimport * as dom from '../dom.js';\n\nObject.assign(GridEditor.locales.en, {\n    'utility.visibility': 'Visibility',\n    'utility.visibility_hidden': 'Hidden',\n    'utility.visibility_shown': 'Shown',\n    'tool.hide_in_view': 'Hide in this view',\n    'tool.show_in_view': 'Show in this view',\n    'badge.hidden_in': 'Hidden at {breakpoints}',\n});\n\n/** A node that carries any class of the family, at any breakpoint. */\nvar CLASS_PATTERN = /(?:^|\\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\\s|$)/;\n\nvar NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';\n\nGridEditor.utilities.visibility = function(ge) {\n\n    var options = Object.assign({ drawer: true }, ge.settings.utilities.visibility);\n\n    /** What \"shown\" is written as on this kind of node. */\n    function shown(kind) {\n        return kind === 'row' ? 'flex' : 'block';\n    }\n\n    function applies(node, kind) {\n        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||\n            dom.is(node, '[data-ge-container]');\n    }\n\n    function hiddenAt(node, view) {\n        return ge.getUtility(node, 'visibility', view) === 'none';\n    }\n\n    /** The breakpoints at which the node is hidden, smallest first. */\n    function hiddenTiers(node) {\n        return ge.breakpoints.filter(function(key) { return hiddenAt(node, key); });\n    }\n\n    /**\n     * Whether the node is hidden in the view being edited. In the all view\n     * that means hidden at every breakpoint, since \"hidden at some\" is what\n     * the badge is for.\n     */\n    function hiddenHere(node) {\n        return ge.view() === 'all'\n            ? hiddenTiers(node).length === ge.breakpoints.length\n            : hiddenAt(node, ge.view());\n    }\n\n    /** What the breakpoint below the view shows, which an inherit falls back to. */\n    function hiddenBelow(node) {\n        var index = ge.breakpoints.indexOf(ge.view());\n\n        return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);\n    }\n\n    /**\n     * Hide or show the node in the view being edited, with as few classes as\n     * that takes. In a breakpoint view that is often none at all: showing a\n     * node the breakpoint below shows removes this breakpoint's d-*-none\n     * rather than writing a d-*-block on top of it. In the all view a node\n     * is hidden everywhere or shown everywhere, and shown is no class.\n     */\n    function toggle(node, kind) {\n        var hide = !hiddenHere(node);\n        var value;\n\n        if (ge.view() === 'all') {\n            value = hide ? 'none' : null;\n        } else if (hide) {\n            value = hiddenBelow(node) ? null : 'none';\n        } else {\n            value = hiddenBelow(node) ? shown(kind) : null;\n        }\n\n        ge.setUtility(node, 'visibility', value, { source: 'tool' });\n    }\n\n    /**\n     * The canvas shows each node as the view sees it. ge-visibility keeps a\n     * node Bootstrap would hide on the canvas, ge-hidden-in-view fades it,\n     * and data-ge-hidden-in carries the badge text for the all view.\n     */\n    function mark(scope) {\n        dom.selfAndAll(scope, NODES).forEach(function(node) {\n            var kind = ge.kindOf(node);\n            var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute('class') || '');\n            var tiers = carries ? hiddenTiers(node) : [];\n            var here = carries && hiddenHere(node);\n            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;\n\n            dom.toggleClass(node, 'ge-visibility', carries);\n            dom.toggleClass(node, 'ge-hidden-in-view', here);\n\n            if (partly) {\n                node.setAttribute('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));\n            } else {\n                node.removeAttribute('data-ge-hidden-in');\n            }\n\n            dom.children(node, '.ge-tools-drawer').forEach(function(drawer) {\n                dom.children(drawer, '.ge-visibility-tool').forEach(function(tool) {\n                    tool.setAttribute('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'));\n                    dom.all(tool, 'i').forEach(function(icon) {\n                        icon.setAttribute('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');\n                    });\n                });\n            });\n        });\n    }\n\n    function unmark() {\n        dom.all(ge.canvas, '.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').forEach(function(node) {\n            dom.removeClass(node, 'ge-visibility ge-hidden-in-view');\n            node.removeAttribute('data-ge-hidden-in');\n            dom.dropEmptyClass(node);\n        });\n    }\n\n    return {\n        families: [{\n            name: 'visibility',\n            prefix: 'd',\n            values: ['none', 'block', 'flex'],\n            appliesTo: ['row', 'column', 'text', 'element', 'container'],\n            labelKey: 'utility.visibility',\n\n            /** Hidden, or shown the way this kind of node is shown. */\n            choices: function(node, kind) {\n                return ['none', shown(kind)];\n            },\n\n            label: function(value) {\n                return value === 'none' ? ge.t('utility.visibility_hidden') : ge.t('utility.visibility_shown');\n            },\n        }],\n\n        drawerTools: function(drawer, node, kind) {\n            if (!options.drawer || !applies(node, kind)) { return; }\n\n            ge.createTool(drawer, ge.t('tool.hide_in_view'), 'ge-visibility-tool', 'bi bi-eye', function() {\n                toggle(node, kind);\n            });\n        },\n\n        onRefresh: mark,\n        onDeinit: unmark,\n    };\n};\n"],
-  "mappings": "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",
-  "names": ["GridEditor", "all", "root", "selector", "selfAndAll", "root", "selector", "found", "all", "children", "node", "each", "is", "node", "selector", "removeClass", "node", "names", "split", "name", "toggleClass", "state", "split", "names", "dropEmptyClass", "node", "GridEditor", "CLASS_PATTERN", "NODES", "ge", "options", "shown", "kind", "applies", "node", "is", "hiddenAt", "view", "hiddenTiers", "key", "hiddenHere", "hiddenBelow", "index", "toggle", "hide", "value", "mark", "scope", "selfAndAll", "carries", "tiers", "here", "partly", "toggleClass", "children", "drawer", "tool", "all", "icon", "unmark", "removeClass", "dropEmptyClass"]
+  "sources": ["../../src/js/register.js", "../../src/js/dom.js", "../../src/js/style/visibility.js", "../../src/js/plugins/grideditor.visibility.js"],
+  "sourcesContent": ["/**\n * What a plugin's or a locale's classic script imports in place of the\n * editor: the GridEditor the page already loaded.\n *\n * The build points `import { GridEditor } from '../grideditor.js'` here for\n * the classic scripts, so each registers on the editor the page has rather\n * than bringing its own. Loaded before the editor there is nothing to\n * register on, and saying so is better than a TypeError three calls later.\n */\nvar GridEditor = window.GridEditor;\n\nif (!GridEditor || typeof GridEditor.get !== 'function') {\n    throw new Error('grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, ' +\n        'its locales and grideditor.jquery.js');\n}\n\nexport { GridEditor };\nexport default GridEditor;\n", "/**\n * The DOM, the way grid-editor uses it.\n *\n * Small helpers over the browser's own API, for the core and the shipped\n * plugins. Not a public API: a plugin of a host's own is free to write its\n * DOM code however it likes, and this file makes no promise to it.\n *\n * Stateless on purpose. The build puts a copy of this file in each plugin's\n * classic script, so anything kept here would be kept once per copy; a\n * module that needs to remember something about a node keeps its own\n * WeakMap.\n */\n\n/** Every element under `root` matching `selector`, as an array. */\nexport function all(root, selector) {\n    return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];\n}\n\n/** The first element under `root` matching `selector`, or null. */\nexport function one(root, selector) {\n    return root ? root.querySelector(selector) : null;\n}\n\n/** `root` itself when it matches, then every element under it that does. */\nexport function selfAndAll(root, selector) {\n    if (!root) { return []; }\n\n    var found = all(root, selector);\n    if (root.nodeType === 1 && root.matches(selector)) { found.unshift(root); }\n    return found;\n}\n\n/** The element children of `node`, those matching `selector` if one is given. */\nexport function children(node, selector) {\n    if (!node) { return []; }\n\n    return Array.prototype.filter.call(node.children, function(each) {\n        return !selector || each.matches(selector);\n    });\n}\n\n/** The first element child matching `selector`, or null. */\nexport function child(node, selector) {\n    return children(node, selector)[0] || null;\n}\n\n/** The nearest ancestor-or-self matching `selector` below `stopAt`, or null. */\nexport function closest(node, selector, stopAt) {\n    var found = node && node.nodeType === 1 ? node.closest(selector) : null;\n\n    if (found && stopAt && found !== stopAt && !stopAt.contains(found)) { return null; }\n    return found;\n}\n\n/** Whether `node` is an element matching `selector`. */\nexport function is(node, selector) {\n    return !!node && node.nodeType === 1 && node.matches(selector);\n}\n\n/** Whether `node` is in the document. */\nexport function attached(node) {\n    return !!node && document.documentElement.contains(node);\n}\n\n/** The element siblings after `node` that match `selector`. */\nexport function nextAll(node, selector) {\n    var found = [];\n\n    for (var next = node.nextElementSibling; next; next = next.nextElementSibling) {\n        if (!selector || next.matches(selector)) { found.push(next); }\n    }\n    return found;\n}\n\n/** The ancestors of `node` up to, and not including, `stop`, nearest first. */\nexport function parentsUntil(node, stop) {\n    var found = [];\n\n    for (var parent = node.parentElement; parent && parent !== stop; parent = parent.parentElement) {\n        found.push(parent);\n    }\n    return found;\n}\n\n/**\n * The nodes the html parses into, detached. Parsed the way innerHTML parses,\n * so a <script> in it never runs, here or once it is in the page.\n */\nexport function parse(html) {\n    var template = document.createElement('template');\n    template.innerHTML = html;\n    return Array.prototype.slice.call(template.content.childNodes);\n}\n\n/** The one element the html is, detached. */\nexport function create(html) {\n    var nodes = parse(html.trim());\n\n    for (var i = 0; i < nodes.length; i++) {\n        if (nodes[i].nodeType === 1) { return nodes[i]; }\n    }\n    return null;\n}\n\n/** An element of `tag`, with `attributes` and `text`. */\nexport function element(tag, attributes, text) {\n    var node = document.createElement(tag);\n\n    Object.keys(attributes || {}).forEach(function(name) {\n        var value = attributes[name];\n        if (value !== null && value !== undefined && value !== false) { node.setAttribute(name, value); }\n    });\n    if (text !== undefined && text !== null) { node.textContent = text; }\n\n    return node;\n}\n\n/** Replace what `node` holds with `html`. A <script> in it does not run. */\nexport function setHtml(node, html) {\n    node.innerHTML = html === undefined || html === null ? '' : String(html);\n    return node;\n}\n\n/** Add one or several space separated classes. */\nexport function addClass(node, names) {\n    split(names).forEach(function(name) { node.classList.add(name); });\n    return node;\n}\n\nexport function removeClass(node, names) {\n    split(names).forEach(function(name) { node.classList.remove(name); });\n    return node;\n}\n\n/** Each class on, or off, or flipped when `on` is not given. */\nexport function toggleClass(node, names, state) {\n    split(names).forEach(function(name) {\n        if (state === undefined) {\n            node.classList.toggle(name);\n        } else {\n            node.classList.toggle(name, !!state);\n        }\n    });\n    return node;\n}\n\nexport function hasClass(node, name) {\n    return !!node && node.nodeType === 1 && node.classList.contains(name);\n}\n\nfunction split(names) {\n    return String(names || '').split(/\\s+/).filter(Boolean);\n}\n\n/** Take the class attribute off when there is nothing left in it. */\nexport function dropEmptyClass(node) {\n    if (!node.getAttribute('class')) { node.removeAttribute('class'); }\n    return node;\n}\n\n/** Take the style attribute off when there is nothing left in it. */\nexport function dropEmptyStyle(node) {\n    if (!node.getAttribute('style')) { node.removeAttribute('style'); }\n    return node;\n}\n\n/** Set attributes; a null or undefined value takes the attribute off. */\nexport function attr(node, attributes) {\n    Object.keys(attributes).forEach(function(name) {\n        var value = attributes[name];\n\n        if (value === null || value === undefined) {\n            node.removeAttribute(name);\n        } else {\n            node.setAttribute(name, value);\n        }\n    });\n    return node;\n}\n\n/**\n * Inline styles, by css property name. A number is pixels for the properties\n * that take a length, as jQuery had it; an empty string takes one off.\n */\nexport function css(node, styles) {\n    Object.keys(styles).forEach(function(property) {\n        var value = styles[property];\n\n        if (typeof value === 'number' && !UNITLESS[property]) { value = value + 'px'; }\n        node.style.setProperty(property, value === null || value === undefined ? '' : String(value));\n    });\n    return node;\n}\n\nvar UNITLESS = { opacity: true, 'z-index': true, 'flex-grow': true, 'flex-shrink': true, order: true };\n\n/** What an element of this tag shows as when nothing hides it. */\nvar defaultDisplays = {};\n\nfunction defaultDisplay(node) {\n    var tag = node.nodeName;\n\n    if (!defaultDisplays[tag]) {\n        var probe = document.body.appendChild(document.createElement(tag));\n        defaultDisplays[tag] = getComputedStyle(probe).display;\n        probe.remove();\n        if (defaultDisplays[tag] === 'none') { defaultDisplays[tag] = 'block'; }\n    }\n    return defaultDisplays[tag];\n}\n\n/** Show a node: its inline display:none off, and a display of its own if a stylesheet hides it. */\nexport function show(node) {\n    node.style.removeProperty('display');\n    if (getComputedStyle(node).display === 'none') { node.style.display = defaultDisplay(node); }\n    return node;\n}\n\nexport function hide(node) {\n    node.style.display = 'none';\n    return node;\n}\n\n/** Show or hide; flip when `on` is not given. */\nexport function toggle(node, state) {\n    if (state === undefined) { state = !visible(node); }\n    return state ? show(node) : hide(node);\n}\n\n/** Whether a node takes up room: what jQuery's :visible meant. */\nexport function visible(node) {\n    return !!(node.offsetWidth || node.offsetHeight || node.getClientRects().length);\n}\n\n/** The border box's width, fractions included. */\nexport function outerWidth(node) {\n    return node.getBoundingClientRect().width;\n}\n\nexport function outerHeight(node) {\n    return node.getBoundingClientRect().height;\n}\n\n/** The content box's height, which is what jQuery's height() gave. */\nexport function contentHeight(node) {\n    var style = getComputedStyle(node);\n    return node.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);\n}\n\n/** Where a node is on the page, not in the window. */\nexport function offset(node) {\n    var box = node.getBoundingClientRect();\n    return { top: box.top + window.pageYOffset, left: box.left + window.pageXOffset };\n}\n\n/** Its index among its parent's element children, those matching `selector` if given. */\nexport function indexIn(node, selector) {\n    return children(node.parentElement, selector).indexOf(node);\n}\n\n/** Put `node` right after `reference`. */\nexport function insertAfter(node, reference) {\n    reference.parentNode.insertBefore(node, reference.nextSibling);\n    return node;\n}\n\n/** Replace `node` with what it holds. */\nexport function unwrap(node) {\n    var parent = node.parentNode;\n\n    while (node.firstChild) { parent.insertBefore(node.firstChild, node); }\n    node.remove();\n}\n\n/** Put `node` inside `wrapper`, where `node` was. */\nexport function wrap(node, wrapper) {\n    node.parentNode.insertBefore(wrapper, node);\n    wrapper.appendChild(node);\n    return wrapper;\n}\n\n/**\n * Listen on `root` for `types` (space separated) on descendants that match\n * `selector`, with `this` the matched element, as jQuery's delegated\n * handlers had it. Hands back the listener, for removeEventListener; a\n * signal in `options` removes it too.\n */\nexport function delegate(root, types, selector, handler, options) {\n    var listener = function(event) {\n        var match = closest(event.target, selector, root);\n        if (match && root.contains(match)) { return handler.call(match, event); }\n        return undefined;\n    };\n\n    split(types).forEach(function(type) { root.addEventListener(type, listener, options); });\n    return listener;\n}\n\n/** Listen for several space separated event types with one handler. */\nexport function on(target, types, handler, options) {\n    split(types).forEach(function(type) { target.addEventListener(type, handler, options); });\n    return handler;\n}\n\nexport function off(target, types, handler, options) {\n    split(types).forEach(function(type) { target.removeEventListener(type, handler, options); });\n}\n\n/** A mouse event of `type` sent to `node`, the way a pointer would. */\nexport function fire(node, type) {\n    node.dispatchEvent(new MouseEvent(type, { bubbles: type !== 'mouseenter' && type !== 'mouseleave' }));\n}\n\n/* ------------------------------------------------------------------\n * Taking a node away, visibly.\n *\n * The durations are the ones 6.x had through jQuery: 400 ms unless the\n * caller says otherwise. `done` runs once the node is out of sight, which is\n * when the caller removes it; a node that is already out of sight is done at\n * once, on the next task, as jQuery had it.\n * ------------------------------------------------------------------ */\n\nvar DEFAULT_DURATION = 400;\n\nfunction animateAway(node, frames, duration, done) {\n    duration = duration === undefined ? DEFAULT_DURATION : duration;\n\n    var finish = function() {\n        hide(node);\n        if (done) { done(); }\n    };\n\n    if (!visible(node) || !node.animate || duration <= 0) {\n        window.setTimeout(finish, 0);\n        return;\n    }\n\n    var animation = node.animate(frames(getComputedStyle(node)), {\n        duration: duration,\n        easing: 'ease-in-out',\n    });\n    var called = false;\n    var once = function() {\n        if (called) { return; }\n        called = true;\n        finish();\n    };\n\n    animation.onfinish = once;\n    animation.oncancel = once;\n}\n\n/** Fold a node up to nothing, then hide it. */\nexport function slideUp(node, duration, done) {\n    if (typeof duration === 'function') {\n        done = duration;\n        duration = undefined;\n    }\n\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        return [\n            {\n                height: style.height,\n                paddingTop: style.paddingTop,\n                paddingBottom: style.paddingBottom,\n                marginTop: style.marginTop,\n                marginBottom: style.marginBottom,\n            },\n            { height: '0px', paddingTop: '0px', paddingBottom: '0px', marginTop: '0px', marginBottom: '0px' },\n        ];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n\n/** Fade a node out, then hide it. */\nexport function fadeOut(node, duration, done) {\n    animateAway(node, function(style) {\n        return [{ opacity: style.opacity }, { opacity: 0 }];\n    }, duration, done);\n}\n\n/** Fade and fold a node, in height and, with `width`, sideways too, then hide it. */\nexport function shrinkAway(node, duration, done, width) {\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        var from = { opacity: style.opacity, height: style.height };\n        var to = { opacity: 0, height: '0px' };\n\n        if (width) {\n            from.width = style.width;\n            to.width = '0px';\n        }\n        return [from, to];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n", "/**\n * Visibility, a part of the style plugin: hiding and showing per breakpoint, with Bootstrap's d-{breakpoint}-none\n * and d-{breakpoint}-block or -flex classes, and the eye in the drawers.\n *\n * The part is what the visibility plugin was up to 7.2 - its families, and\n * whatever it did on the canvas - as a function of the handle and its options.\n * grideditor.style.js puts it in its sections; the deprecated\n * grideditor.visibility.js still registers it on its own, as it always did.\n */\nimport { GridEditor } from '../grideditor.js';\nimport * as dom from '../dom.js';\n\nObject.assign(GridEditor.locales.en, {\n    'utility.visibility': 'Visibility',\n    'utility.visibility_hidden': 'Hidden',\n    'utility.visibility_shown': 'Shown',\n    'tool.hide_in_view': 'Hide in this view',\n    'tool.show_in_view': 'Show in this view',\n    'badge.hidden_in': 'Hidden at {breakpoints}',\n});\n\n/** A node that carries any class of the family, at any breakpoint. */\nvar CLASS_PATTERN = /(?:^|\\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\\s|$)/;\n\nvar NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';\n\nexport function visibilityPart(ge, given) {\n\n    var options = Object.assign({ drawer: true }, given);\n\n    /** What \"shown\" is written as on this kind of node. */\n    function shown(kind) {\n        return kind === 'row' ? 'flex' : 'block';\n    }\n\n    function applies(node, kind) {\n        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||\n            dom.is(node, '[data-ge-container]');\n    }\n\n    function hiddenAt(node, view) {\n        return ge.getUtility(node, 'visibility', view) === 'none';\n    }\n\n    /** The breakpoints at which the node is hidden, smallest first. */\n    function hiddenTiers(node) {\n        return ge.breakpoints.filter(function(key) { return hiddenAt(node, key); });\n    }\n\n    /**\n     * Whether the node is hidden in the view being edited. In the all view\n     * that means hidden at every breakpoint, since \"hidden at some\" is what\n     * the badge is for.\n     */\n    function hiddenHere(node) {\n        return ge.view() === 'all'\n            ? hiddenTiers(node).length === ge.breakpoints.length\n            : hiddenAt(node, ge.view());\n    }\n\n    /** What the breakpoint below the view shows, which an inherit falls back to. */\n    function hiddenBelow(node) {\n        var index = ge.breakpoints.indexOf(ge.view());\n\n        return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);\n    }\n\n    /**\n     * Hide or show the node in the view being edited, with as few classes as\n     * that takes. In a breakpoint view that is often none at all: showing a\n     * node the breakpoint below shows removes this breakpoint's d-*-none\n     * rather than writing a d-*-block on top of it. In the all view a node\n     * is hidden everywhere or shown everywhere, and shown is no class.\n     */\n    function toggle(node, kind) {\n        var hide = !hiddenHere(node);\n        var value;\n\n        if (ge.view() === 'all') {\n            value = hide ? 'none' : null;\n        } else if (hide) {\n            value = hiddenBelow(node) ? null : 'none';\n        } else {\n            value = hiddenBelow(node) ? shown(kind) : null;\n        }\n\n        ge.setUtility(node, 'visibility', value, { source: 'tool' });\n    }\n\n    /**\n     * The canvas shows each node as the view sees it. ge-visibility keeps a\n     * node Bootstrap would hide on the canvas, ge-hidden-in-view fades it,\n     * and data-ge-hidden-in carries the badge text for the all view.\n     */\n    function mark(scope) {\n        dom.selfAndAll(scope, NODES).forEach(function(node) {\n            var kind = ge.kindOf(node);\n            var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute('class') || '');\n            var tiers = carries ? hiddenTiers(node) : [];\n            var here = carries && hiddenHere(node);\n            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;\n\n            dom.toggleClass(node, 'ge-visibility', carries);\n            dom.toggleClass(node, 'ge-hidden-in-view', here);\n\n            if (partly) {\n                node.setAttribute('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));\n            } else {\n                node.removeAttribute('data-ge-hidden-in');\n            }\n\n            dom.children(node, '.ge-tools-drawer').forEach(function(drawer) {\n                dom.children(drawer, '.ge-visibility-tool').forEach(function(tool) {\n                    tool.setAttribute('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'));\n                    dom.all(tool, 'i').forEach(function(icon) {\n                        icon.setAttribute('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');\n                    });\n                });\n            });\n        });\n    }\n\n    function unmark() {\n        dom.all(ge.canvas, '.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').forEach(function(node) {\n            dom.removeClass(node, 'ge-visibility ge-hidden-in-view');\n            node.removeAttribute('data-ge-hidden-in');\n            dom.dropEmptyClass(node);\n        });\n    }\n\n    return {\n        families: [{\n            name: 'visibility',\n            prefix: 'd',\n            values: ['none', 'block', 'flex'],\n            appliesTo: ['row', 'column', 'text', 'element', 'container'],\n            labelKey: 'utility.visibility',\n\n            /** Hidden, or shown the way this kind of node is shown. */\n            choices: function(node, kind) {\n                return ['none', shown(kind)];\n            },\n\n            label: function(value) {\n                return value === 'none' ? ge.t('utility.visibility_hidden') : ge.t('utility.visibility_shown');\n            },\n        }],\n\n        drawerTools: function(drawer, node, kind) {\n            if (!options.drawer || !applies(node, kind)) { return; }\n\n            ge.createTool(drawer, ge.t('tool.hide_in_view'), 'ge-visibility-tool', 'bi bi-eye', function() {\n                toggle(node, kind);\n            });\n        },\n\n        onRefresh: mark,\n        onDeinit: unmark,\n    };\n}\n", "/**\n * Visibility for grid-editor.\n *\n * A utility plugin: load this file after the editor and every row, column,\n * element and container can be hidden at some breakpoints and shown at\n * others, with Bootstrap's d-{breakpoint}-none and d-{breakpoint}-block (or\n * -flex, for a row, which is a flex container and stops being a grid as a\n * block). What it can ask the editor for is the handle its factory is called\n * with, described in docs/plugins.md.\n *\n *   <script src=\"dist/grideditor.min.js\"></script>\n *   <script src=\"dist/plugins/grideditor.visibility.min.js\"></script>\n *\n * A hidden node is never hidden from the editor, which would leave nothing to\n * click to show it again. It stays on the canvas, faded and striped in a view\n * where it is hidden, and in the all view says at which breakpoints it is.\n *\n * utilities.visibility.drawer: false leaves the eye out of the drawers, and\n * the panel field is the only control.\n *\n * Deprecated since 7.3, and gone in 8.0: grideditor.style.js carries this\n * plugin's families, and edits them in its own sections. This file is that\n * part on its own, as it was, and says so once per editor. Loaded beside\n * the style plugin, it stands down.\n */\nimport { GridEditor } from '../grideditor.js';\nimport { visibilityPart } from '../style/visibility.js';\n\nGridEditor.utilities.visibility = function(ge) {\n    ge.warn('the \"visibility\" plugin is deprecated and will be removed in 8.0: load grideditor.style.js');\n    return visibilityPart(ge, ge.settings.utilities.visibility);\n};\n"],
+  "mappings": "MASA,IAAIA,EAAa,OAAO,WAExB,GAAI,CAACA,GAAc,OAAOA,EAAW,KAAQ,WACzC,MAAM,IAAI,MAAM,wHAC0B,ECCvC,SAASC,EAAIC,EAAMC,EAAU,CAChC,OAAOD,EAAO,MAAM,UAAU,MAAM,KAAKA,EAAK,iBAAiBC,CAAQ,CAAC,EAAI,CAAC,CACjF,CAQO,SAASC,EAAWC,EAAMC,EAAU,CACvC,GAAI,CAACD,EAAQ,MAAO,CAAC,EAErB,IAAIE,EAAQC,EAAIH,EAAMC,CAAQ,EAC9B,OAAID,EAAK,WAAa,GAAKA,EAAK,QAAQC,CAAQ,GAAKC,EAAM,QAAQF,CAAI,EAChEE,CACX,CAGO,SAASE,EAASC,EAAMJ,EAAU,CACrC,OAAKI,EAEE,MAAM,UAAU,OAAO,KAAKA,EAAK,SAAU,SAASC,EAAM,CAC7D,MAAO,CAACL,GAAYK,EAAK,QAAQL,CAAQ,CAC7C,CAAC,EAJmB,CAAC,CAKzB,CAgBO,SAASM,EAAGC,EAAMC,EAAU,CAC/B,MAAO,CAAC,CAACD,GAAQA,EAAK,WAAa,GAAKA,EAAK,QAAQC,CAAQ,CACjE,CAwEO,SAASC,EAAYC,EAAMC,EAAO,CACrC,OAAAC,EAAMD,CAAK,EAAE,QAAQ,SAASE,EAAM,CAAEH,EAAK,UAAU,OAAOG,CAAI,CAAG,CAAC,EAC7DH,CACX,CAGO,SAASI,EAAYJ,EAAMC,EAAOI,EAAO,CAC5C,OAAAH,EAAMD,CAAK,EAAE,QAAQ,SAASE,EAAM,CAC5BE,IAAU,OACVL,EAAK,UAAU,OAAOG,CAAI,EAE1BH,EAAK,UAAU,OAAOG,EAAM,CAAC,CAACE,CAAK,CAE3C,CAAC,EACML,CACX,CAMA,SAASM,EAAMC,EAAO,CAClB,OAAO,OAAOA,GAAS,EAAE,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO,CAC1D,CAGO,SAASC,EAAeC,EAAM,CACjC,OAAKA,EAAK,aAAa,OAAO,GAAKA,EAAK,gBAAgB,OAAO,EACxDA,CACX,CClJA,OAAO,OAAOC,EAAW,QAAQ,GAAI,CACjC,qBAAsB,aACtB,4BAA6B,SAC7B,2BAA4B,QAC5B,oBAAqB,oBACrB,oBAAqB,oBACrB,kBAAmB,yBACvB,CAAC,EAGD,IAAIC,EAAgB,iEAEhBC,EAAQ,+DAEL,SAASC,EAAeC,EAAIC,EAAO,CAEtC,IAAIC,EAAU,OAAO,OAAO,CAAE,OAAQ,EAAK,EAAGD,CAAK,EAGnD,SAASE,EAAMC,EAAM,CACjB,OAAOA,IAAS,MAAQ,OAAS,OACrC,CAEA,SAASC,EAAQC,EAAMF,EAAM,CACzB,OAAOA,IAAS,OAASA,IAAS,UAAYA,IAAS,WAAaA,IAAS,QAAUA,IAAS,SACxFG,EAAGD,EAAM,qBAAqB,CAC1C,CAEA,SAASE,EAASF,EAAMG,EAAM,CAC1B,OAAOT,EAAG,WAAWM,EAAM,aAAcG,CAAI,IAAM,MACvD,CAGA,SAASC,EAAYJ,EAAM,CACvB,OAAON,EAAG,YAAY,OAAO,SAASW,EAAK,CAAE,OAAOH,EAASF,EAAMK,CAAG,CAAG,CAAC,CAC9E,CAOA,SAASC,EAAWN,EAAM,CACtB,OAAON,EAAG,KAAK,IAAM,MACfU,EAAYJ,CAAI,EAAE,SAAWN,EAAG,YAAY,OAC5CQ,EAASF,EAAMN,EAAG,KAAK,CAAC,CAClC,CAGA,SAASa,EAAYP,EAAM,CACvB,IAAIQ,EAAQd,EAAG,YAAY,QAAQA,EAAG,KAAK,CAAC,EAE5C,OAAOc,EAAQ,GAAKN,EAASF,EAAMN,EAAG,YAAYc,EAAQ,CAAC,CAAC,CAChE,CASA,SAASC,EAAOT,EAAMF,EAAM,CACxB,IAAIY,EAAO,CAACJ,EAAWN,CAAI,EACvBW,EAEAjB,EAAG,KAAK,IAAM,MACdiB,EAAQD,EAAO,OAAS,KACjBA,EACPC,EAAQJ,EAAYP,CAAI,EAAI,KAAO,OAEnCW,EAAQJ,EAAYP,CAAI,EAAIH,EAAMC,CAAI,EAAI,KAG9CJ,EAAG,WAAWM,EAAM,aAAcW,EAAO,CAAE,OAAQ,MAAO,CAAC,CAC/D,CAOA,SAASC,EAAKC,EAAO,CACbC,EAAWD,EAAOrB,CAAK,EAAE,QAAQ,SAASQ,EAAM,CAChD,IAAIF,EAAOJ,EAAG,OAAOM,CAAI,EACrBe,EAAUhB,EAAQC,EAAMF,CAAI,GAAKP,EAAc,KAAKS,EAAK,aAAa,OAAO,GAAK,EAAE,EACpFgB,EAAQD,EAAUX,EAAYJ,CAAI,EAAI,CAAC,EACvCiB,EAAOF,GAAWT,EAAWN,CAAI,EACjCkB,EAASH,GAAWrB,EAAG,KAAK,IAAM,OAASsB,EAAM,OAAS,GAAK,CAACC,EAEhEE,EAAYnB,EAAM,gBAAiBe,CAAO,EAC1CI,EAAYnB,EAAM,oBAAqBiB,CAAI,EAE3CC,EACAlB,EAAK,aAAa,oBAAqBN,EAAG,EAAE,kBAAmB,CAAE,YAAasB,EAAM,KAAK,IAAI,CAAE,CAAC,CAAC,EAEjGhB,EAAK,gBAAgB,mBAAmB,EAGxCoB,EAASpB,EAAM,kBAAkB,EAAE,QAAQ,SAASqB,EAAQ,CACxDD,EAASC,EAAQ,qBAAqB,EAAE,QAAQ,SAASC,EAAM,CAC/DA,EAAK,aAAa,QAASL,EAAOvB,EAAG,EAAE,mBAAmB,EAAIA,EAAG,EAAE,mBAAmB,CAAC,EACnF6B,EAAID,EAAM,GAAG,EAAE,QAAQ,SAASE,EAAM,CACtCA,EAAK,aAAa,QAASP,EAAO,kBAAoB,WAAW,CACrE,CAAC,CACL,CAAC,CACL,CAAC,CACL,CAAC,CACL,CAEA,SAASQ,GAAS,CACVF,EAAI7B,EAAG,OAAQ,yDAAyD,EAAE,QAAQ,SAASM,EAAM,CAC7F0B,EAAY1B,EAAM,iCAAiC,EACvDA,EAAK,gBAAgB,mBAAmB,EACpC2B,EAAe3B,CAAI,CAC3B,CAAC,CACL,CAEA,MAAO,CACH,SAAU,CAAC,CACP,KAAM,aACN,OAAQ,IACR,OAAQ,CAAC,OAAQ,QAAS,MAAM,EAChC,UAAW,CAAC,MAAO,SAAU,OAAQ,UAAW,WAAW,EAC3D,SAAU,qBAGV,QAAS,SAASA,EAAMF,EAAM,CAC1B,MAAO,CAAC,OAAQD,EAAMC,CAAI,CAAC,CAC/B,EAEA,MAAO,SAASa,EAAO,CACnB,OAAOA,IAAU,OAASjB,EAAG,EAAE,2BAA2B,EAAIA,EAAG,EAAE,0BAA0B,CACjG,CACJ,CAAC,EAED,YAAa,SAAS2B,EAAQrB,EAAMF,EAAM,CAClC,CAACF,EAAQ,QAAU,CAACG,EAAQC,EAAMF,CAAI,GAE1CJ,EAAG,WAAW2B,EAAQ3B,EAAG,EAAE,mBAAmB,EAAG,qBAAsB,YAAa,UAAW,CAC3Fe,EAAOT,EAAMF,CAAI,CACrB,CAAC,CACL,EAEA,UAAWc,EACX,SAAUa,CACd,CACJ,CCnIAG,EAAW,UAAU,WAAa,SAASC,EAAI,CAC3C,OAAAA,EAAG,KAAK,4FAA4F,EAC7FC,EAAeD,EAAIA,EAAG,SAAS,UAAU,UAAU,CAC9D",
+  "names": ["GridEditor", "all", "root", "selector", "selfAndAll", "root", "selector", "found", "all", "children", "node", "each", "is", "node", "selector", "removeClass", "node", "names", "split", "name", "toggleClass", "state", "split", "names", "dropEmptyClass", "node", "GridEditor", "CLASS_PATTERN", "NODES", "visibilityPart", "ge", "given", "options", "shown", "kind", "applies", "node", "is", "hiddenAt", "view", "hiddenTiers", "key", "hiddenHere", "hiddenBelow", "index", "toggle", "hide", "value", "mark", "scope", "selfAndAll", "carries", "tiers", "here", "partly", "toggleClass", "children", "drawer", "tool", "all", "icon", "unmark", "removeClass", "dropEmptyClass", "GridEditor", "ge", "visibilityPart"]
 }

package/docs/locale-keys.md

@@ -221,8 +221,11 @@ key, so a locale covers a new breakpoint by adding `view.<key>`. Short strings
 utility.*
 ---------
 
-The Responsive section of a settings panel, which the utility plugins fill.
-The labels of each utility and its values are the plugins' own keys.
+The Responsive section of a settings panel, which the utility plugins fill,
+and the per breakpoint fields of the style plugin's sections. The labels of
+each utility and its values are the plugins' own keys. The spacing,
+textalign, visibility and float fields were plugins of their own up to 7.2,
+and are the style plugin's now.
 
 | Key | English | Where |
 | --- | --- | --- |
@@ -235,10 +238,10 @@ The labels of each utility and its values are the plugins' own keys.
 | `utility.default` | Default | The empty choice of a field when nothing below the view sets the utility, and always in the all view |
 | `utility.inherit` | Inherit: {value} (from {breakpoint}) | The empty choice in a breakpoint view when a smaller breakpoint sets the utility. `{breakpoint}` is its key, `sm` |
 | `utility.varies` | Changes at {breakpoints}; choosing here replaces that | Note under a field in the all view when breakpoints set their own value. `{breakpoints}` is a list of keys |
-| `utility.visibility` | Visibility | Label of the visibility plugin's field |
+| `utility.visibility` | Visibility | Label of the visibility field, in the style plugin's Display section |
 | `utility.visibility_hidden` | Hidden | Its choice for `d-*-none` |
 | `utility.visibility_shown` | Shown | Its choice for `d-*-block`, or `d-*-flex` on a row |
-| `tool.hide_in_view` | Hide in this view | The visibility plugin's eye, on a node shown in the view being edited |
+| `tool.hide_in_view` | Hide in this view | The style plugin's visibility eye, on a node shown in the view being edited |
 | `tool.show_in_view` | Show in this view | The same eye, on a node hidden there |
 | `utility.order` | Order | Label of the order plugin's field |
 | `utility.order_first` | First | Its choice for `order-*-first` |
@@ -251,7 +254,7 @@ The labels of each utility and its values are the plugins' own keys.
 | `utility.gutters` | Gutters | The gutters plugin's `g-*` field, on a row |
 | `utility.gutters_x` | Horizontal gutters | Its `gx-*` field |
 | `utility.gutters_y` | Vertical gutters | Its `gy-*` field |
-| `utility.padding` | Padding | The spacing plugin's padding group |
+| `utility.padding` | Padding | The padding group, in the style plugin's Spacing section |
 | `utility.margin` | Margin | Its margin group |
 | `utility.side_all` | All sides | The side of `p-*` and `m-*` in a group's side choice |
 | `utility.side_x` | Left and right | The side of `px-*` and `mx-*` |
@@ -260,17 +263,93 @@ The labels of each utility and its values are the plugins' own keys.
 | `utility.side_b` | Bottom | The side of `pb-*` and `mb-*` |
 | `utility.side_s` | Start | The side of `ps-*` and `ms-*` |
 | `utility.side_e` | End | The side of `pe-*` and `me-*` |
-| `utility.text_align` | Text alignment | Label of the textalign plugin's field |
+| `utility.text_align` | Text alignment | Label of the text alignment field, in the style plugin's Text section |
 | `utility.text_start` | Start | Its choice for `text-*-start` |
 | `utility.text_center` | Center | Its choice for `text-*-center` |
 | `utility.text_end` | End | Its choice for `text-*-end` |
-| `utility.float` | Float | Label of the float plugin's field, on an element |
+| `utility.float` | Float | Label of the float field, in the style plugin's Position section, on an element |
 | `utility.float_start` | Start | Its choice for `float-*-start` |
 | `utility.float_end` | End | Its choice for `float-*-end` |
 | `utility.float_none` | None | Its choice for `float-*-none` |
 | `utility.spacing_gutter` | A column's side padding is its gutter: changing it changes the gutter | Note in a column's spacing group while it carries side padding |
 
 
+style.*
+-------
+
+The style plugin's accordion, in a node's settings panel or in the dialog.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `style.section_title` | Style | The style plugin's accordion, and the button that opens it in the dialog when `settings_panel` is `popover` or `inline` |
+| `style.dialog_title` | Style: {kind} | Title of that dialog. `{kind}` is what the panel's title calls the node |
+| `style.section_size` | Size | The accordion's section header |
+| `style.section_spacing` | Spacing | The accordion's section header |
+| `style.section_border` | Border | The accordion's section header |
+| `style.section_background` | Background | The accordion's section header |
+| `style.section_text` | Text | The accordion's section header |
+| `style.section_typography` | Typography | The accordion's section header |
+| `style.section_display` | Display | The accordion's section header |
+| `style.section_position` | Position | The accordion's section header |
+| `style.section_custom` | Custom css | The accordion's section header |
+| `style.all_sizes` | Applies to every size | Note over a section's inline fields in a breakpoint view: the style attribute is not responsive |
+| `style.overridden` | The class {class} takes priority over this value | Note under an inline field whose property a Bootstrap utility on the node also sets. `{class}` is that class |
+| `style.invalid` | Not a value this property takes | Tooltip of an inline field holding a value the browser refused |
+| `style.catalog` | Bootstrap classes | Heading of a section's Bootstrap class chips |
+| `style.shadow_x` | X | A part of the shadow builder |
+| `style.shadow_y` | Y | A part of the shadow builder |
+| `style.shadow_blur` | Blur | A part of the shadow builder |
+| `style.shadow_spread` | Spread | A part of the shadow builder |
+| `style.shadow_color` | Color | A part of the shadow builder |
+| `style.shadow_inset` | Inset | The shadow builder's inset checkbox |
+| `style.shadow_text_mode` | Edit as text | Link under the shadow builder that edits the value as text |
+| `style.prop_width` | Width | Label of the `width` field |
+| `style.prop_height` | Height | Label of the `height` field |
+| `style.prop_min_width` | Min width | Label of the `min-width` field |
+| `style.prop_min_height` | Min height | Label of the `min-height` field |
+| `style.prop_max_width` | Max width | Label of the `max-width` field |
+| `style.prop_max_height` | Max height | Label of the `max-height` field |
+| `style.prop_margin_top` | Margin top | Label of the `margin-top` field |
+| `style.prop_margin_right` | Margin right | Label of the `margin-right` field |
+| `style.prop_margin_bottom` | Margin bottom | Label of the `margin-bottom` field |
+| `style.prop_margin_left` | Margin left | Label of the `margin-left` field |
+| `style.prop_padding_top` | Padding top | Label of the `padding-top` field |
+| `style.prop_padding_right` | Padding right | Label of the `padding-right` field |
+| `style.prop_padding_bottom` | Padding bottom | Label of the `padding-bottom` field |
+| `style.prop_padding_left` | Padding left | Label of the `padding-left` field |
+| `style.prop_border_width` | Border width | Label of the `border-width` field |
+| `style.prop_border_style` | Border style | Label of the `border-style` field |
+| `style.prop_border_color` | Border color | Label of the `border-color` field |
+| `style.prop_border_radius` | Border radius | Label of the `border-radius` field |
+| `style.prop_box_shadow` | Shadow | Label of the `box-shadow` field |
+| `style.prop_background_color` | Background color | Label of the `background-color` field |
+| `style.prop_background_image` | Background image | Label of the `background-image` field |
+| `style.prop_background_size` | Background size | Label of the `background-size` field |
+| `style.prop_background_position` | Background position | Label of the `background-position` field |
+| `style.prop_background_repeat` | Background repeat | Label of the `background-repeat` field |
+| `style.prop_color` | Color | Label of the `color` field |
+| `style.prop_font_size` | Font size | Label of the `font-size` field |
+| `style.prop_text_align` | Text align | Label of the `text-align` field |
+| `style.prop_text_shadow` | Text shadow | Label of the `text-shadow` field |
+| `style.prop_font_family` | Font family | Label of the `font-family` field |
+| `style.prop_font_weight` | Font weight | Label of the `font-weight` field |
+| `style.prop_font_style` | Font style | Label of the `font-style` field |
+| `style.prop_line_height` | Line height | Label of the `line-height` field |
+| `style.prop_letter_spacing` | Letter spacing | Label of the `letter-spacing` field |
+| `style.prop_text_transform` | Text transform | Label of the `text-transform` field |
+| `style.prop_text_decoration` | Text decoration | Label of the `text-decoration` field |
+| `style.prop_display` | Display | Label of the `display` field |
+| `style.prop_opacity` | Opacity | Label of the `opacity` field |
+| `style.prop_overflow` | Overflow | Label of the `overflow` field |
+| `style.prop_visibility` | Visibility | Label of the `visibility` field |
+| `style.prop_position` | Position | Label of the `position` field |
+| `style.prop_top` | Top | Label of the `top` field |
+| `style.prop_right` | Right | Label of the `right` field |
+| `style.prop_bottom` | Bottom | Label of the `bottom` field |
+| `style.prop_left` | Left | Label of the `left` field |
+| `style.prop_z_index` | Z-index | Label of the `z-index` field |
+
+
 badge.*
 -------
 

package/docs/plugins.md

@@ -160,6 +160,9 @@ array.
 | `ge.nodeHtml(node)` | One node's markup as `getHtml` would give it. The canvas leaves editing to read it and comes back, as it does for `getHtml` |
 | `ge.toolbarItems(name)` | An array of the toolbar buttons the feature plugin `name` declared, for showing and hiding them |
 | `ge.bareStyle(node, family, property)` | A css property's value on the node with none of the family's classes: what a preview shows when no class applies and that is not a constant |
+| `ge.hostStyle(node, property?)` | `{ value, priority }` of one property of the node's own style, as the host wrote it: never a breakpoint preview's. With no property, the whole of it as css text |
+| `ge.setHostStyle(node, property, value, priority?)` | Write one property of the node's own style, or take it off with `''`. Under a breakpoint preview it is the host's value that changes, and the preview goes back on top. False, and nothing written, for a value the browser refuses. A priority left out keeps the one the property had; no `style=""` is left behind |
+| `ge.openDialog(title, body, opener?)` / `ge.closeDialog()` | A modal of the editor's own, over whatever settings panel is open, which stays open under it. `body` is moved in, and back where it was when the dialog closes; `opener` has the focus back. Bootstrap's modal when Bootstrap's javascript is there, one of the editor's own when it is not. Escape closes the dialog and nothing else; `deinit`, `getHtml`, `setLocale`, `destroy` and closing the panel close it |
 
 The add, delete and move events for a container and its panes are fired by the
 editor, not by the plugin: `createPaneControls` handles a pane's delete, and
@@ -192,6 +195,7 @@ GridEditor.features.elements = function(ge) {
         accepts: function(region, node) { … },  // false turns a block away from a region
         toolbar: [{ labelKey: …, kind: …, create: function() { … } }],  // buttons beside the containers'
         drawerTools: function(drawer, node, kind) { … },  // tools beside the gear, in every drawer
+        panelSection: function(node, kind) { … },  // a section of the node's settings panel, see below
     };
 };
 ```
@@ -224,6 +228,43 @@ needs to put a new kind of block on the canvas:
   child: it sits beside it, in a wrapper that only exists while editing, so
   `ge.drawerOf(node)` is how to find it.
 
+### A section of the settings panel
+
+**`panelSection(node, kind)`**, which any kind of plugin can have, returns a
+section for the node's settings panel - `{ labelKey, titleKey, body }` - or
+null where it has none. The editor puts the sections between the panel's
+general fields and *Responsive*, in the order the plugins were registered.
+Where the panel has room for it, in the offcanvas and the modal, `body` is in
+the panel. A popover, or a panel inline in the drawer, gets a button with the
+label instead, and `body` opens in the dialog, titled `titleKey` - with the
+node's kind as `{kind}` - or the label. `body` stays the panel's either way,
+so `ge.detailsOf(node)` finds what is in it.
+
+A field made with `ge.utilityField` in a section follows the view and the
+classes field as the Responsive section's do, wherever the section is at the
+time. The style plugin's accordion is a section, and what the spacing,
+textalign, visibility and float fields are in: its families are
+`panel: false`, and it makes their fields itself.
+
+A section that writes css should write it with `ge.setHostStyle` and read it
+with `ge.hostStyle`: in a breakpoint view the node's `style` holds the
+preview's `!important` values too, and they come off on `deinit` with
+whatever was written under them.
+
+### A plugin that takes the place of others
+
+A factory with **`replaces: ['old', …]`** on it - the function, not what it
+returns, since it is read before any factory is called - stands in for those
+plugins. Loaded beside it, they stand down, with a warning, and none of their
+families is declared twice; an old name in the `plugins` setting asks for it,
+with a warning that the name is deprecated. This is how the style plugin
+takes the spacing, textalign, visibility and float plugins' place:
+
+```javascript
+GridEditor.utilities.style = function(ge) { … };
+GridEditor.utilities.style.replaces = ['spacing', 'textalign', 'visibility', 'float'];
+```
+
 ### Settings of your own, saved on the node
 
 A tool that opens a dialog and saves what the user chose on the node is a
@@ -477,19 +518,20 @@ tool does not belong. A tool writes with `ge.setUtility(node, family, value,
 `onRefresh(scope)` runs whenever the preview is redrawn — on `init`, on a view
 change, after a write, after the user types in a classes field — with the node
 whose utilities changed, or the canvas. It is for what a plugin marks the canvas
-with beyond inline styles: the visibility plugin keeps hidden nodes on the
+with beyond inline styles: the style plugin's visibility keeps hidden nodes on the
 canvas and fades them there. Whatever it adds, `onDeinit` takes away.
 
 ### A panel of your own
 
 A field per family is the right panel for most plugins and the wrong one for
-some: spacing has fourteen families, and fourteen fields. Such a plugin marks
+some: spacing, part of the style plugin, has fourteen families, and fourteen
+fields. Such a plugin marks
 its families `panel: false` and returns its own element from
 `panel(node, kind)` — or null where it does not apply — and the editor puts it
 in the Responsive section. Inside it, `ge.utilityField(node, family)` makes the
 same field the editor would, and the editor keeps every such field up to date
 with the view and the classes; swapping one field for another is the plugin's
-business. The spacing plugin's panel is a side and one field, and choosing a
+business. The spacing panel is a side and one field, and choosing a
 side swaps the field for that side's family.
 
 The same plugins tend to need the node as a whole for the preview, because
@@ -509,6 +551,8 @@ Two plugins cannot declare the same family name: the second one is ignored,
 with a warning.
 
 Plugin options live in the `utilities` setting, under the plugin's name:
-`utilities: { spacing: { values: ['0', '2', '4'] } }`. The editor passes the
-setting through as it is; each plugin fills in its own defaults.
+`utilities: { gutters: { scale: [...] } }`. The editor passes the
+setting through as it is; each plugin fills in its own defaults. The style
+plugin's are the `style` setting, since most of them are about its inline
+css; `utilities.spacing` and `utilities.visibility` are read there until 8.0.
 

package/example/index.html

@@ -48,6 +48,12 @@
             gutters and spacing — per breakpoint. See
             <a href="utilities.html">Responsive utilities</a>.
         </p>
+        <p class="text-body-secondary">
+            New in 7.3: the style plugin, inline css by section with
+            Bootstrap's classes as chips, which also carries visibility,
+            spacing, text alignment and float. See
+            <a href="style.html">Style</a>.
+        </p>
 
         <div class="list-group my-4">
 
@@ -131,6 +137,14 @@
                 <span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: visibility, column order, alignment, gutters, spacing, text alignment and float</span>
             </a>
 
+            <a class="list-group-item list-group-item-action" href="style.html">
+                <div class="d-flex justify-content-between">
+                    <strong>Style</strong>
+                    <code class="text-body-secondary">style.html</code>
+                </div>
+                <span class="text-body-secondary">The style plugin: inline css for rows, columns, containers and elements, by section, with Bootstrap's classes for each as chips</span>
+            </a>
+
             <a class="list-group-item list-group-item-action" href="locale.html">
                 <div class="d-flex justify-content-between">
                     <strong>Languages</strong>

package/example/style.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+
+    <!-- Javascript dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+
+    <!-- The editor, the elements and tabs plugins so there is one of each
+         kind of node, and the style plugin. -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/grideditor.min.js"></script>
+    <script src="../dist/plugins/grideditor.elements.min.js"></script>
+    <script src="../dist/plugins/grideditor.tabs.min.js"></script>
+    <script src="../dist/plugins/grideditor.style.min.js"></script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            var grid = document.getElementById('myGrid');
+            var panel = document.getElementById('panel');
+            var narrow = document.getElementById('narrow');
+            var editor;
+
+            function start() {
+                editor = new GridEditor(grid, {
+                    new_row_layouts: [[12], [6,6], [4,4,4], [8,4]],
+                    content_types: [],
+
+                    // Where a node's settings open. In a popover, or inline
+                    // in the drawer, the Style accordion opens in a dialog
+                    settings_panel: panel.value,
+
+                    // Every section, unless the host says otherwise: this
+                    // leaves out position and keeps the border section to
+                    // three fields with no chips
+                    style: narrow.checked ? {
+                        sections: {
+                            position: false,
+                            border: { properties: ['border-width', 'border-style', 'border-color'], catalog: false },
+                        },
+                    } : {},
+                });
+            }
+            start();
+
+            // The same canvas, started again with the other settings
+            function restart() {
+                var html = editor.getHtml();
+                editor.destroy();
+                grid.innerHTML = html;
+                start();
+            }
+            panel.addEventListener('change', restart);
+            narrow.addEventListener('change', restart);
+
+            document.getElementById('output').addEventListener('click', function() {
+                document.getElementById('html').textContent = editor.getHtml();
+            });
+        });
+    </script>
+
+    <title>Grid Editor style example</title>
+</head>
+<body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
+    <div class="container">
+
+        <div class="row my-3">
+            <div class="col-lg-8">
+                <h1 class="h4">Style</h1>
+                <p class="form-text">
+                    The gear of a row, a column, a container, a tab, an element
+                    or a section has a <strong>Style</strong> accordion: size,
+                    spacing, border, background, text, typography, display,
+                    position and free css. What you type is written to the
+                    node's own <code>style</code>; a value the browser does
+                    not take is marked and not written.
+                </p>
+                <p class="form-text">
+                    Each section also offers Bootstrap's classes for what it
+                    styles, as chips: one puts its class in the classes field,
+                    and pressing it again takes it off. Bootstrap's utilities
+                    are <code>!important</code>, so a field whose property a
+                    class on the node also sets says the class wins.
+                </p>
+                <p class="form-text">
+                    The inline style is the same at every size. Padding and
+                    margin, text alignment, visibility and float are
+                    Bootstrap's responsive classes, edited per breakpoint in
+                    their sections: pick a breakpoint in the dropdown.
+                </p>
+                <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
+                    <div class="d-flex align-items-center gap-2">
+                        <label class="form-label mb-0" for="panel">A gear opens its settings in</label>
+                        <select class="form-select form-select-sm w-auto" id="panel">
+                            <option value="offcanvas">a side panel (offcanvas)</option>
+                            <option value="popover">a popover</option>
+                            <option value="modal">a modal</option>
+                            <option value="inline">the drawer itself (inline)</option>
+                        </select>
+                    </div>
+                    <div class="form-check mb-0">
+                        <input class="form-check-input" type="checkbox" id="narrow">
+                        <label class="form-check-label" for="narrow">Fewer sections: no position, a shorter border</label>
+                    </div>
+                </div>
+                <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
+                <pre id="html" class="form-text"></pre>
+            </div>
+        </div>
+
+        <div id="myGrid">
+
+            <div class="row" style="background-color: #f0f4ff; border-radius: 12px;">
+                <div class="col-12 col-md-8" style="padding-top: 1rem; padding-bottom: 1rem;">
+                    <h2 class="h5">Styled inline</h2>
+                    <p>This row has a background and a radius in its <code>style</code>; open its gear and look in Background and Border.</p>
+                </div>
+                <div class="col-12 col-md-4 shadow-sm rounded-3" style="box-shadow: 0 4px 12px rgba(0, 0, 0, .15)">
+                    <h2 class="h5">A class and a style</h2>
+                    <p>It has <code>shadow-sm</code> and an inline shadow: the class wins, and the Border section says so.</p>
+                </div>
+            </div>
+
+            <div class="row my-3">
+                <div class="col-6">
+                    <div data-ge-element="callout" data-ge-label="Callout" class="p-3 border-start border-4 bg-body-tertiary" style="font-style: italic; letter-spacing: .02em">
+                        An element, with a few classes from the catalog and some typography of its own.
+                    </div>
+                </div>
+                <div class="col-6">
+                    <p>Try Size on this column: it offers only the min- and max- widths and heights, since its width is the grid's.</p>
+                </div>
+            </div>
+
+        </div> <!-- /#myGrid -->
+    </div> <!-- /.container -->
+
+</body>
+</html>