@innovastudio/contentbuilder 1.5.216 → 1.5.217

package/index.d.ts

@@ -212,6 +212,9 @@ interface ContentBuilderOptions {
     pluginSettingsPosition?: 'center' | 'right' | 'left' | { top?: string | number; left?: string | number; right?: string | number; bottom?: string | number };
     /** Default position of the button editor modal. Default 'center'. */
     buttonEditorPosition?: 'center' | 'right' | 'left' | { top?: string | number; left?: string | number; right?: string | number; bottom?: string | number };
+
+    /** Default position of the element editor dock. Unset keeps the position from the stylesheet. */
+    elementEditorPosition?: 'right' | 'left' | { top?: string | number; left?: string | number; right?: string | number; bottom?: string | number };
     useLightbox?: boolean;
     lightboxArrow?: boolean;
     imageRenameOnEdit?: boolean;
@@ -282,6 +285,27 @@ interface ContentBuilderOptions {
     demoConversations?: any[];
     startCodeChat?: boolean;
 
+    /**
+     * Which Code Chat engine handles a request.
+     *
+     * 'v1' (default) is the original: it plans the whole request up front, then
+     * carries the plan out. 'v2' is closed-loop — it acts, looks at the result,
+     * and decides the next step, editing one row at a time.
+     *
+     * 'v2' requires your `sendCommandUrl` route to handle the conversational
+     * request shape (a `messages` array plus `tools`, returning `message`).
+     * The bundled Node, PHP and Next.js examples already do. If yours does not,
+     * Code Chat says so on the first send rather than failing obscurely.
+     *
+     * Ignored in canvas mode: a freeform layout has no rows for v2's row-based
+     * editing, so Code Chat stays on 'v1' there.
+     *
+     * Both engines share the same chat panel, settings and model list, so
+     * switching changes how requests are fulfilled, not what users see.
+     * @default 'v1'
+     */
+    chatEngine?: 'v1' | 'v2';
+
     //-- Code Chat: vision / attachments
     /** Let files be attached to a chat message. Off by default: the attach
      *  button is hidden and drag-and-drop and paste are not accepted. */
@@ -350,21 +374,6 @@ interface ContentBuilderOptions {
     generateMediaUrl_Fal?: string;
     checkRequestStatusUrl_Fal?: string;
     getResultUrl_Fal?: string;
-    /** OpenRouter image provider (defaultImageGenerationProvider: 'openrouter').
-     *  Same three-step request/status/result contract as the _Fal endpoints,
-     *  including reference-image features (restyle / edit existing photos),
-     *  which all three providers serve. */
-    generateMediaUrl_OpenRouter?: string;
-    checkRequestStatusUrl_OpenRouter?: string;
-    getResultUrl_OpenRouter?: string;
-    /** OpenAI image provider (defaultImageGenerationProvider: 'openai').
-     *  The same three-step request/status/result contract as the _Fal and
-     *  _OpenRouter endpoints, including reference-image features (an entry with
-     *  image_input: true routes to /v1/images/edits). Distinct from the older
-     *  one-shot generateMediaUrl_OpenAI_CreateImage(Edit) below. */
-    generateMediaUrl_OpenAI?: string;
-    checkRequestStatusUrl_OpenAI?: string;
-    getResultUrl_OpenAI?: string;
     minimizeImageUrl?: string;
     cleanup?: string;
     generateMediaUrl_OpenAI_CreateImage?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@innovastudio/contentbuilder",
-  "version": "1.5.216",
+  "version": "1.5.217",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -288,8 +288,8 @@ button:focus-visible {
 .is-builder table.default td {
   border: transparent 1px dashed;
 }
-.is-builder .cell-active .elm-active:not(button, table, [data-cb-type]) {
-  background: var(--cb-surface-2);
+.is-builder .cell-active .elm-active:not(button, table, [data-cb-type], [data-cb-nohighlight]) {
+  background-image: linear-gradient(var(--cb-surface-2), var(--cb-surface-2));
 }
 .is-builder .cell-active table.default td,
 .is-builder .cell-active table.default th {
@@ -311,7 +311,7 @@ button:focus-visible {
   outline: 1px solid var(--cb-outline-inspected) !important;
 }
 .is-builder .elm-inspected .elm-active {
-  background: none;
+  background-image: none;
 }
 @keyframes elm-inspected-anim {
   0% {
@@ -917,14 +917,18 @@ button:focus-visible {
   position: fixed;
   overflow: hidden;
   width: 420px;
-  height: 600px;
-  top: 50%;
+  height: fit-content;
+  max-height: min(600px, 100vh - 130px);
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
   left: calc(50% - 200px);
   right: 30%;
-  margin-top: -300px;
-  box-sizing: content-box;
-  flex-direction: row;
-  align-items: flex-start;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
 }
 [data-cb-ui] .is-modal.pluginsettings.active {
   display: flex;
@@ -932,6 +936,8 @@ button:focus-visible {
 [data-cb-ui] .is-modal.pluginsettings > div:not(.is-draggable) {
   width: 100%;
   margin-top: 30px;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 [data-cb-ui] .is-modal.pluginsettings .is-modal-overlay {
   display: none !important;
@@ -1144,11 +1150,14 @@ button:focus-visible {
   z-index: 10002;
   overflow: hidden;
   width: 380px;
-  height: 600px;
-  top: 50%;
+  height: fit-content;
+  max-height: min(537px, 100vh - 130px);
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
   left: calc(50% - 190px);
   right: auto;
-  margin-top: -300px;
   box-sizing: border-box;
   padding: 0;
   flex-direction: column;
@@ -2266,24 +2275,24 @@ button:focus-visible {
 [data-cb-ui] .is-modal [class^=image-larger] {
   flex: none;
 }
-[data-cb-ui] .is-tool#divImageTool, [data-cb-ui] .is-tool.is-video-tool, [data-cb-ui] .is-tool.is-audio-tool, [data-cb-ui] .is-tool.is-plugin-tool, [data-cb-ui] .is-tool.is-iframe-tool {
+[data-cb-ui] .is-tool#divImageTool, [data-cb-ui] .is-tool.is-video-tool, [data-cb-ui] .is-tool.is-audio-tool, [data-cb-ui] .is-tool.is-plugin-tool, [data-cb-ui] .is-tool.is-cbcode-tool, [data-cb-ui] .is-tool.is-iframe-tool {
   background: var(--cb-tool-surface) !important;
   border: transparent 1px solid;
   box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
   border-radius: 20px;
 }
-[data-cb-ui] .is-tool#divImageTool > div, [data-cb-ui] .is-tool#divImageTool > button, [data-cb-ui] .is-tool.is-video-tool > div, [data-cb-ui] .is-tool.is-video-tool > button, [data-cb-ui] .is-tool.is-audio-tool > div, [data-cb-ui] .is-tool.is-audio-tool > button, [data-cb-ui] .is-tool.is-plugin-tool > div, [data-cb-ui] .is-tool.is-plugin-tool > button, [data-cb-ui] .is-tool.is-iframe-tool > div, [data-cb-ui] .is-tool.is-iframe-tool > button {
+[data-cb-ui] .is-tool#divImageTool > div, [data-cb-ui] .is-tool#divImageTool > button, [data-cb-ui] .is-tool.is-video-tool > div, [data-cb-ui] .is-tool.is-video-tool > button, [data-cb-ui] .is-tool.is-audio-tool > div, [data-cb-ui] .is-tool.is-audio-tool > button, [data-cb-ui] .is-tool.is-plugin-tool > div, [data-cb-ui] .is-tool.is-plugin-tool > button, [data-cb-ui] .is-tool.is-cbcode-tool > div, [data-cb-ui] .is-tool.is-cbcode-tool > button, [data-cb-ui] .is-tool.is-iframe-tool > div, [data-cb-ui] .is-tool.is-iframe-tool > button {
   width: 35px;
   height: 35px;
   background: transparent;
 }
-[data-cb-ui] .is-tool#divImageTool svg, [data-cb-ui] .is-tool.is-video-tool svg, [data-cb-ui] .is-tool.is-audio-tool svg, [data-cb-ui] .is-tool.is-plugin-tool svg, [data-cb-ui] .is-tool.is-iframe-tool svg {
+[data-cb-ui] .is-tool#divImageTool svg, [data-cb-ui] .is-tool.is-video-tool svg, [data-cb-ui] .is-tool.is-audio-tool svg, [data-cb-ui] .is-tool.is-plugin-tool svg, [data-cb-ui] .is-tool.is-cbcode-tool svg, [data-cb-ui] .is-tool.is-iframe-tool svg {
   width: 17px;
   height: 17px;
   fill: var(--cb-tool-icon) !important;
   color: var(--cb-tool-icon) !important;
 }
-[data-cb-ui] .is-tool.is-video-tool > button, [data-cb-ui] .is-tool.is-audio-tool > button, [data-cb-ui] .is-tool.is-plugin-tool > button, [data-cb-ui] .is-tool.is-iframe-tool > button {
+[data-cb-ui] .is-tool.is-video-tool > button, [data-cb-ui] .is-tool.is-audio-tool > button, [data-cb-ui] .is-tool.is-plugin-tool > button, [data-cb-ui] .is-tool.is-cbcode-tool > button, [data-cb-ui] .is-tool.is-iframe-tool > button {
   width: 35px !important;
   height: 35px !important;
 }
@@ -3221,20 +3230,15 @@ button:focus-visible {
   gap: 3px;
 }
 [data-cb-ui] .elementstyles {
-  width: 300px;
   font-size: 13px;
-  z-index: 10004;
 }
 [data-cb-ui] .elementstyles .elm-list {
-  z-index: 1;
-  width: 100%;
-  position: absolute;
-  top: 36px;
-  left: 18px;
+  flex: none;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  padding: 0 20px 8px;
   font-size: 12px;
   line-height: 1.3;
 }
@@ -4092,7 +4096,7 @@ button:focus-visible {
   display: none;
 }
 .is-builder[hideelementhighlight] .cell-active .elm-active {
-  background-color: transparent;
+  background-image: none;
 }
 .is-builder[minimal] .is-tool.is-col-tool .cell-more {
   display: none;
@@ -10343,6 +10347,9 @@ iframe.wait-autoplay {
 [data-cb-ui] #chatPanel .message.user .message-content {
   background: var(--cb-fill);
   color: var(--cb-text);
+  /* Keep the line breaks of pasted text; long unbroken URLs still wrap */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 [data-cb-ui] #chatPanel .message.assistant .message-content {
   background: var(--cb-chat-bubble-bg);
@@ -10535,12 +10542,18 @@ iframe.wait-autoplay {
 [data-cb-ui] #chatPanel .copy-button:hover {
   background: var(--cb-fill-hover);
 }
-[data-cb-ui] #chatPanel .quick-image-size-button {
-  width: 48px;
+[data-cb-ui] #chatPanel .input-area button.quick-image-size-button {
+  /* Square for a short label ("4:3", "auto"), wider for a pixel size
+     ("1536x1024"), which does not fit in 48px. */
+  min-width: 48px;
+  width: auto;
+  padding: 0 10px;
+  flex: 0 0 auto;
+  white-space: nowrap;
   height: 48px;
   border: none;
   border-radius: 8px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
   cursor: pointer;
   transition: background 0.2s;
@@ -10550,10 +10563,10 @@ iframe.wait-autoplay {
   background: var(--cb-fill);
   color: var(--cb-text);
 }
-[data-cb-ui] #chatPanel .quick-image-size-button:hover:not(:disabled) {
+[data-cb-ui] #chatPanel .input-area button.quick-image-size-button:hover:not(:disabled) {
   background: var(--cb-fill-hover);
 }
-[data-cb-ui] #chatPanel .quick-image-size-button:disabled {
+[data-cb-ui] #chatPanel .input-area button.quick-image-size-button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
@@ -12210,6 +12223,51 @@ iframe.wait-autoplay {
   outline: var(--cb-field-focus-outline);
   outline-offset: -2px;
 }
+[data-cb-ui] .is-modal.elementstyles {
+  position: fixed;
+  top: 105px;
+  right: 38px;
+  left: auto;
+  bottom: auto;
+  width: 320px;
+  height: auto;
+  max-height: calc(100vh - 130px);
+  background: var(--cb-modal-bg);
+  display: none;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  z-index: 10004;
+}
+[data-cb-ui] .is-modal.elementstyles.active {
+  display: flex;
+}
+[data-cb-ui] .is-modal.elementstyles .elm-dock {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding-top: 38px;
+}
+[data-cb-ui] .is-modal.elementstyles .elm-dock-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+}
+[data-cb-ui] .is-modal.elementstyles .elm-dock-foot {
+  flex: none;
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 12px 10px;
+  border-top: 1px solid var(--cb-line);
+}
+[data-cb-ui] .is-modal.elementstyles .elm-dock-foot .elm-editstyle {
+  width: 40px;
+  height: 25px;
+  font-family: sans-serif;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 0;
+}
 [data-cb-ui] .is-modal.edittablestyle {
   z-index: 10002;
   position: fixed;