playbook_ui 18.0.0.pre.alpha.PLAY323219731 → 18.0.0.pre.alpha.PLAY323219732

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 134e64bef59f08a763ab0b45a1bb404dae1d6b435b243a07551455983a92696e
-  data.tar.gz: a5d30ad8a5065712dae2137286b1410f3f025a5034c0a0e974a39e4747c614bc
+  metadata.gz: 702601751c0fd5c028b371a8daee1fa45544f6a1b212e924e91a68436f663b3e
+  data.tar.gz: 42d98672288c51cf43e762b28d094eec228145dddbb62a56869baab16149897c
 SHA512:
-  metadata.gz: 85b4699843c3b6160e7171400ace59258f9d385b4823a1c175c353c4823ea32742a0dc47e6ba9ef4234e63038994a313f2d3bd71272d1cf75152f9ce8c8fade8
-  data.tar.gz: a08acad0f987fb16655ec999ac88b108dc8362e4af3744107f28fb0e06d5a149ee471553e08e60c1956d6a044cf7bd4545180bfffc0131c9d59441cc11652b25
+  metadata.gz: e8582dd5511729d758e3110a3224b9a0d55c1f37f10d5c28fd3e16475d72694b4116cff6783631fc2f92d63a85eebbd3bd0c576f5674f9d03ef8ed92ea1cef4d
+  data.tar.gz: 856c48ef6c7bf02b8d69ea3c8e418bf151936c8c3fe5a28c4227e8e337ce91cdf820e7c26d50150ad532e991cb086c057f2108e0b5053b189502724a84842615

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import Background from "../../pb_background/_background";
 import Flex from "../../pb_flex/_flex";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
@@ -11,13 +11,71 @@ import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
+const STACK_HYSTERESIS_PX = 32;
+
 const ToolbarSeparator = (): React.ReactElement => (
   <div className="toolbar_separator">
     <SectionSeparator orientation="vertical" />
   </div>
 );
 
+const toolsAreWrapped = (root: HTMLElement | null): boolean => {
+  if (!root) return false;
+
+  const format = root.querySelector<HTMLElement>(".toolbar_group_format");
+  const tools = root.querySelector<HTMLElement>(".toolbar_group_tools");
+  if (!format || !tools) return false;
+
+  return tools.offsetTop > format.offsetTop + 1;
+};
+
 const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.ReactElement => {
+  const toolbarInnerRef = useRef<HTMLDivElement>(null);
+  const stackedAtWidthRef = useRef(0);
+  const [toolsStacked, setToolsStacked] = useState(false);
+
+  useLayoutEffect(() => {
+    if (simple) return;
+
+    const root = toolbarInnerRef.current;
+    if (!root) return;
+
+    const toolbar = root.closest(".toolbar");
+
+    const update = () => {
+      const wrapped = toolsAreWrapped(root);
+      const width = toolbar?.clientWidth ?? root.clientWidth;
+
+      setToolsStacked((stacked) => {
+        if (!stacked && wrapped) {
+          stackedAtWidthRef.current = width;
+          return true;
+        }
+
+        if (stacked && !wrapped && width > stackedAtWidthRef.current + STACK_HYSTERESIS_PX) {
+          return false;
+        }
+
+        if (stacked && wrapped) {
+          stackedAtWidthRef.current = Math.min(stackedAtWidthRef.current, width);
+        }
+
+        return stacked;
+      });
+    };
+
+    update();
+    const rafId = requestAnimationFrame(update);
+    const observer = new ResizeObserver(update);
+    observer.observe(root);
+    if (toolbar) observer.observe(toolbar);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
+  }, [extensions, simple]);
+
   const simpleToolbaritems = [
     {
         icon: "bold",
@@ -33,10 +91,16 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
     },
   ]
 
+  const toolbarClassName = [
+    "toolbar",
+    toolsStacked && "toolbar_tools_stacked",
+    sticky && "pb_rich_text_editor_tiptap_toolbar_sticky",
+  ].filter(Boolean).join(" ");
+
   return (
-    <Background backgroundColor="white"
-        className={`toolbar ${sticky ? 'pb_rich_text_editor_tiptap_toolbar_sticky' : ''}`}
-        
+    <Background
+        backgroundColor="white"
+        className={toolbarClassName}
     >
       {
         simple ? (
@@ -63,7 +127,10 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             </div>
           </div>
         ) : (
-          <div className="toolbar_inner">
+          <div
+              className="toolbar_inner"
+              ref={toolbarInnerRef}
+          >
             <Flex
                 align="center"
                 className="toolbar_controls"

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -131,7 +131,8 @@
     container-type: inline-size;
     position: relative;
 
-    // Prefer one row; undo/redo stay top-right. Stack tools only when they cannot share a line.
+    // Prefer one row; undo/redo stay top-right.
+    // `.toolbar_tools_stacked` is set in JS when tools wrap to a second row.
     &_inner {
       box-sizing: border-box;
       min-height: $space_lg + $space_xxs + $space_xxs * 2; // 36px button + vertical padding
@@ -140,8 +141,7 @@
       position: relative;
     }
 
-    // Tools on their own row: drop undo gutter so the tools scrollport can go edge-to-edge.
-    &:has(.toolbar_group_more) .toolbar_inner {
+    &.toolbar_tools_stacked .toolbar_inner {
       padding-right: $space_sm;
     }
 
@@ -177,18 +177,12 @@
 
       &_tools {
         box-sizing: border-box;
+        flex-grow: 1;
         flex-wrap: nowrap;
         max-width: 100%;
         min-width: 0;
         order: 2;
         overflow-x: auto;
-
-        // Hide leading pipe by default — tools often wrap before container queries
-        // force a full-width stack, which left a lone "|" at the start of row 2.
-        // Only show it when the bar is wide enough for a reliable single row.
-        > .toolbar_separator:first-child {
-          display: none;
-        }
       }
 
       &_more {
@@ -196,30 +190,27 @@
       }
     }
 
-    // With "more": stack tools under format|more until wide enough for one row
+    &.toolbar_tools_stacked .toolbar_group_tools > .toolbar_separator:first-child {
+      display: none;
+    }
+
+    // With "more": format|more on row 1, tools on row 2 until wide
     &_controls:has(.toolbar_group_more) {
       .toolbar_group_more {
         order: 2;
       }
 
       .toolbar_group_tools {
-        flex: 1 1 100%;
+        flex-basis: 100%;
+        flex-grow: 1;
         order: 3;
       }
     }
 
     @container rte-toolbar (min-width: 42rem) {
-      &:has(.toolbar_group_more) .toolbar_inner {
-        padding-right: $history-gutter;
-      }
-
-      .toolbar_group_tools > .toolbar_separator:first-child {
-        display: flex;
-      }
-
       .toolbar_controls:has(.toolbar_group_more) {
         .toolbar_group_tools {
-          flex: 0 1 auto;
+          flex-basis: auto;
           order: 2;
           overflow-x: visible;
         }
@@ -230,17 +221,6 @@
       }
     }
 
-    // No "more": full-width tools row + no undo gutter when stacked
-    @container rte-toolbar (max-width: 40rem) {
-      &:not(:has(.toolbar_group_more)) .toolbar_inner {
-        padding-right: $space_sm;
-      }
-
-      .toolbar_controls:not(:has(.toolbar_group_more)) .toolbar_group_tools {
-        flex: 1 1 100%;
-      }
-    }
-
     // Separators: slightly inset from button height; xxs gap left/right
     &_separator {
       align-items: stretch;

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_rails.js

@@ -103,6 +103,49 @@ function runToolbarAction(editor, action, { alignment, prompt = window.prompt, n
   if (chainMethod && typeof chain[chainMethod] === "function") chain[chainMethod]().run();
 }
 
+const TOOLBAR_STACK_HYSTERESIS_PX = 32;
+
+function syncToolbarToolsStacked(toolbar, state = { stacked: false, stackedAtWidth: 0 }) {
+  if (!toolbar) return state;
+
+  const format = toolbar.querySelector(".toolbar_group_format");
+  const tools = toolbar.querySelector(".toolbar_group_tools");
+  if (!format || !tools) return state;
+
+  const wrapped = tools.offsetTop > format.offsetTop + 1;
+  const width = toolbar.clientWidth;
+  let { stacked, stackedAtWidth } = state;
+
+  if (!stacked && wrapped) {
+    stacked = true;
+    stackedAtWidth = width;
+  } else if (stacked && !wrapped && width > stackedAtWidth + TOOLBAR_STACK_HYSTERESIS_PX) {
+    stacked = false;
+  } else if (stacked && wrapped) {
+    stackedAtWidth = Math.min(stackedAtWidth, width);
+  }
+
+  toolbar.classList.toggle("toolbar_tools_stacked", stacked);
+  return { stacked, stackedAtWidth };
+}
+
+function watchToolbarToolsStacked(toolbar) {
+  if (!toolbar) return;
+
+  let state = { stacked: false, stackedAtWidth: 0 };
+  const update = () => {
+    state = syncToolbarToolsStacked(toolbar, state);
+  };
+
+  update();
+  requestAnimationFrame(update);
+
+  if (typeof ResizeObserver === "undefined") return;
+
+  const observer = new ResizeObserver(update);
+  observer.observe(toolbar);
+}
+
 async function initPlaybookRichTextEditorRails(container) {
   if (!container || container.dataset.pbRteInitialized || container.dataset.pbRtePending) return;
   container.dataset.pbRtePending = "true";
@@ -403,6 +446,7 @@ async function initPlaybookRichTextEditorRails(container) {
     editor.on("selectionUpdate", updateActiveStates);
     editor.on("transaction", updateActiveStates);
     updateActiveStates();
+    watchToolbarToolsStacked(toolbar);
 
     container.dataset.pbRteInitialized = "true";
   } finally {

data/dist/ai/forms.json

@@ -1,6 +1,6 @@
 {
   "metadataVersion": 1,
-  "version": "18.0.0-alpha.PLAY323219731",
+  "version": "18.0.0-alpha.PLAY323219732",
   "builder": {
     "class": "Playbook::Forms::Builder",
     "helper": "pb_form_with",

data/dist/ai/index.json

@@ -1,8 +1,8 @@
 {
-  "version": "18.0.0-alpha.PLAY323219731",
+  "version": "18.0.0-alpha.PLAY323219732",
   "metadataVersion": 1,
   "forms": "forms.json",
-  "generated": "2026-10-01T20:08:22.688Z",
+  "generated": "2026-10-01T20:51:10.526Z",
   "schemas": {
     "globalProps": "global-props.schema.json",
     "globalEventProps": "global-event-props.schema.json",