@innovastudio/contentbox 1.6.200 → 1.6.202

package/index.d.ts

@@ -51,6 +51,12 @@ interface ContentBoxOptions {
 
     htmlButton?: boolean;
     sectionHtmlButton?: boolean;
+    /** Quick section controls under the Section breadcrumb of the panel. Default: false. Users can switch them on in Settings. */
+    sectionQuickTool?: boolean;
+    /** Section tools on the page (move, HTML, settings, remove). Default: true. Users can switch them off in Settings. */
+    sectionTool?: boolean;
+    /** Box tools on the page (background upload & select, box & module settings). Default: true. Users can switch them off in Settings. */
+    boxTool?: boolean;
     undoRedoButtons?: boolean;
     /** Content Size slider on the Box panel. Default: true. */
     contentSizeSlider?: boolean;
@@ -723,6 +729,12 @@ declare class ContentBox {
     openModal(url: string, options?: OpenModalOptions): void;
     screenMode: string;
     openFilePicker(type?: string, callback?: () => void): void;
+    /** Is an asset manager configured for this type of file? */
+    hasFilePicker(type?: string): boolean;
+    /** Upload a file from the user's computer; the callback gets its URL. */
+    openFileUpload(type?: string, callback?: (url: string) => void): void;
+    /** Select and upload buttons for a URL field in a plugin's settings. Select is included only where an asset manager is configured. */
+    createFileButtons(type?: string, callback?: (url: string) => void): HTMLButtonElement[];
     openColorPicker(
         currentColor: string,
         callback: (color: string) => void,

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@innovastudio/contentbox",
-  "version": "1.6.200",
+  "version": "1.6.202",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -23,7 +23,8 @@
     "test:canvas": "node tests/canvas-size.mjs",
     "test:fonts": "node tests/fonts.mjs",
     "test:mode": "node tests/mode-buttons.mjs",
-    "test": "node tests/box-structure.mjs && node tests/content-size-handles.mjs && node tests/spacing-panels.mjs && node tests/panel-section-state.mjs && node tests/device-row.mjs && node tests/canvas-size.mjs && node tests/fonts.mjs && node tests/mode-buttons.mjs"
+    "test:codesource": "node tests/code-source-mapping.mjs",
+    "test": "node tests/box-structure.mjs && node tests/content-size-handles.mjs && node tests/spacing-panels.mjs && node tests/panel-section-state.mjs && node tests/device-row.mjs && node tests/canvas-size.mjs && node tests/fonts.mjs && node tests/mode-buttons.mjs && node tests/code-source-mapping.mjs"
   },
   "keywords": [],
   "author": "",
@@ -71,7 +72,7 @@
     "@gltf-transform/core": "^4.5.0",
     "@gltf-transform/extensions": "^4.5.0",
     "@gltf-transform/functions": "^4.5.0",
-    "@innovastudio/contentbuilder": "^1.5.218",
+    "@innovastudio/contentbuilder": "^1.5.220",
     "js-beautify": "^1.14.0",
     "marked": "^17.0.0",
     "meshoptimizer": "^1.2.0",

package/public/contentbox/contentbox.css

@@ -495,7 +495,7 @@ body.dark .motion-dock iframe, body.dark .cascade-dock iframe, body.dark .is-con
 }
 .builder-ui .panel-plugin label {
   display: flex;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.6;
 }
 .builder-ui .panel-plugin .cb-settings-form {
@@ -553,6 +553,7 @@ body.dark .motion-dock iframe, body.dark .cascade-dock iframe, body.dark .is-con
 .builder-ui .label.checkbox span {
   line-height: 1.2;
   margin-left: 7px;
+  font-weight: 300;
 }
 .builder-ui .label.unit > div {
   display: flex;
@@ -653,17 +654,10 @@ body.dark .motion-dock iframe, body.dark .cascade-dock iframe, body.dark .is-con
   padding: 2px;
   box-sizing: border-box;
 }
-.builder-ui .group:has(> button:nth-child(6)):not(:has(> button:nth-child(7))) {
+.builder-ui .group.inserts:has(> button:nth-child(6)) {
   max-width: 133px;
   margin-right: 7px;
 }
-.builder-ui .group:has(> button:nth-child(7)):not(:has(> button:nth-child(9))) {
-  width: 175px;
-  margin-right: 7px;
-}
-.builder-ui .group:has(> button:nth-child(9)):not(:has(> button:nth-child(11))) {
-  max-width: 216px;
-}
 .builder-ui .group.single {
   border-color: transparent;
   padding: 0;
@@ -928,6 +922,43 @@ body.controlpanel .builder-ui .is-controlpanel {
   right: 0px;
   box-shadow: rgba(0, 0, 0, 0.05) 0 0 16px 0px;
 }
+body.controlpanel [data-cb-ui] .is-modal.cbxsettings div.is-modal-content {
+  width: 400px;
+  max-width: 94vw;
+  min-height: 0;
+  padding: 0 !important;
+}
+body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-set-body {
+  padding: 6px 18px 20px;
+}
+body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-set-row2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cb-seg button.inert {
+  color: var(--cb-text-4);
+  background-color: transparent !important;
+  cursor: default;
+}
+body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cb-seg button.inert:hover {
+  background-color: transparent !important;
+}
+body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-set-sep {
+  height: 1px;
+  background: var(--cb-line);
+  margin: 16px 0;
+}
+body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-themes {
+  display: flex;
+  gap: 6px;
+  margin-top: 3px;
+}
+body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-themes button {
+  width: 30px;
+  height: 26px;
+  border-radius: 5px;
+}
 body.controlpanel [data-cb-ui] .is-modal.elementstyles {
   right: 310px;
 }
@@ -1078,6 +1109,24 @@ body.controlpanel .is-wrapper {
   width: 10px;
   height: 10px;
 }
+.builder-ui .is-controlpanel .panelnav .part-sectionmove.group {
+  width: auto;
+  margin: 10px 0 6px;
+  flex-wrap: nowrap;
+}
+.builder-ui .is-controlpanel .panelnav .part-sectionmove.group button {
+  width: 26px;
+  height: 26px;
+  margin: 1px;
+  flex: none;
+}
+.builder-ui .is-controlpanel .panelnav .part-sectionmove.group button svg {
+  width: 13px;
+  height: 13px;
+}
+.builder-ui .is-controlpanel .panelnav .part-sectionmove.group .btn-sectiondup {
+  margin-left: 6px;
+}
 .builder-ui .is-controlpanel .panelnav h3 {
   font-family: sans-serif;
   font-weight: 300;
@@ -1187,6 +1236,33 @@ body.controlpanel .is-wrapper {
 .builder-ui .is-controlpanel [class^=panel-].panel-pop button {
   flex: none;
 }
+.builder-ui .is-controlpanel [class^=panel-].panel-pop.heightpop {
+  width: auto;
+  flex-direction: column;
+  padding: 12px 12px 8px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-pop.heightpop .label {
+  font-size: 10px;
+  line-height: 1.2;
+  margin: 0 0 6px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-pop.heightpop .group.sectionheight {
+  width: 180px;
+  border: none;
+  padding: 0;
+  margin-bottom: 0;
+  gap: 3px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-pop.heightpop .group.sectionheight button {
+  width: 33.5px;
+  height: 27px;
+  margin: 0;
+  font-size: 10px;
+}
+.builder-ui .is-controlpanel [class^=panel-].panel-pop.heightpop .group.sectionheight button svg {
+  width: 12px;
+  height: 12px;
+}
 .builder-ui .is-controlpanel [class^=panel-].panel-pop.more {
   width: auto;
   flex-direction: column;
@@ -1241,7 +1317,8 @@ body.controlpanel .is-wrapper {
   line-height: 1.5;
   opacity: 0.6;
 }
-.builder-ui .is-controlpanel .panel-overlay .div-overlay-image.stacked {
+.builder-ui .is-controlpanel .panel-overlay .div-overlay-image.stacked,
+.builder-ui .is-controlpanel .panel-overlay .div-overlay-link.stacked {
   margin-top: 22px;
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   padding-top: 16px;
@@ -1442,7 +1519,7 @@ body.controlpanel .is-wrapper {
 .builder-ui .is-controlpanel .panel-iframe .asset-preview div {
   margin-top: 0 !important;
 }
-.builder-ui .is-controlpanel .group.fontsizes, .builder-ui .is-controlpanel .group.fontweight, .builder-ui .is-controlpanel .group.linespacing, .builder-ui .is-controlpanel .group.letterspacing {
+.builder-ui .is-controlpanel .group.fontsizes, .builder-ui .is-controlpanel .group.fontweight, .builder-ui .is-controlpanel .group.linespacing, .builder-ui .is-controlpanel .group.letterspacing, .builder-ui .is-controlpanel .group.wordspacing, .builder-ui .is-controlpanel .group.topspacing, .builder-ui .is-controlpanel .group.bottomspacing {
   width: 217px;
 }
 .builder-ui .is-controlpanel .group.listindent {
@@ -1460,21 +1537,6 @@ body.controlpanel .is-wrapper {
 .builder-ui .is-controlpanel .group.removecontent button {
   width: 100%;
 }
-.builder-ui .is-controlpanel .group.desktopwidth {
-  width: 222px;
-}
-.builder-ui .is-controlpanel .group.desktopwidth button {
-  width: 39px;
-  font-size: 11px;
-}
-.builder-ui .is-controlpanel .group.desktopwidth button.inert {
-  color: var(--cb-text-4);
-  background-color: transparent !important;
-  cursor: default;
-}
-.builder-ui .is-controlpanel .group.desktopwidth button.inert:hover {
-  background-color: transparent !important;
-}
 .builder-ui .is-controlpanel .group.contentsize {
   width: 222px;
 }
@@ -1597,10 +1659,10 @@ body.controlpanel .is-wrapper {
   width: auto;
   padding: 0 14px;
 }
-.builder-ui .is-controlpanel .group.imageeffect, .builder-ui .is-controlpanel .group.aspectratio, .builder-ui .is-controlpanel .group.duration, .builder-ui .is-controlpanel .group.topspacing {
+.builder-ui .is-controlpanel .group.imageeffect, .builder-ui .is-controlpanel .group.aspectratio, .builder-ui .is-controlpanel .group.duration {
   width: 225px;
 }
-.builder-ui .is-controlpanel .group.imageeffect button, .builder-ui .is-controlpanel .group.aspectratio button, .builder-ui .is-controlpanel .group.duration button, .builder-ui .is-controlpanel .group.topspacing button {
+.builder-ui .is-controlpanel .group.imageeffect button, .builder-ui .is-controlpanel .group.aspectratio button, .builder-ui .is-controlpanel .group.duration button {
   width: 50px;
   transition: all 0.15s ease;
 }
@@ -1610,9 +1672,6 @@ body.controlpanel .is-wrapper {
 .builder-ui .is-controlpanel .group.duration button {
   width: 39px;
 }
-.builder-ui .is-controlpanel .group.topspacing button {
-  width: 39px;
-}
 .builder-ui .is-controlpanel button.toggle {
   width: 36px;
   transition: all 0.15s ease;
@@ -2755,9 +2814,6 @@ body.canvas-scaled .is-content-view {
   display: flex;
   align-items: center;
 }
-#_cbhtml .label-checkbox input {
-  margin-right: 8px;
-}
 
 .is-wrapper {
   opacity: 0.01;