@brightspot/ui 6.0.7-pr.248 → 6.0.7-pr.257

package/dist/storybook/project.json

@@ -1 +1 @@
-{"generatedAt":1786134497683,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.0.18","playwright":"1.58.2","vitest":"4.0.18"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}
+{"generatedAt":1786549621414,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.0.18","playwright":"1.58.2","vitest":"4.0.18"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "6.0.7-pr.248",
+  "version": "6.0.7-pr.257",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",

package/src/legacy/tool-ui/src/ContentEdit.css

@@ -1,10 +1,11 @@
 :root {
   --edit-banner-h: minmax(48px, auto);
   --right-toolbar-w: calc(theme(iconSize.md) + theme(padding.12));
-  --contentForm-w-min: 360px;
+  --contentForm-w-min: 320px;
   --contentForm-w-max: calc(100cqw - var(--right-toolbar-w));
   --contentPreview-w-min: 320px;
   --contentWidget-w-min: 320px;
+  --contentWidget-w: 360px;
   --contentForm-resized-safe-w: clamp(
     var(--contentForm-w-min),
     var(--contentForm-resized-w),
@@ -366,8 +367,9 @@
     @apply !blokk;
   }
 
+  /* Hug the device width (plus borders) when it fits so the iframe renders unscaled. */
   & .PreviewFrame-typeDisplay {
-    @apply [grid-area:preview] [grid-column:container-start/container-end];
+    @apply w-[min(100%,calc(var(--ContentEdit-previewWidth,100%)_+_2px))] justify-self-center [grid-area:preview] [grid-column:container-start/container-end];
   }
 
   & .PreviewFrame-typeControls .ComboInput:not(:has(~ .ComboInput)) {

package/src/legacy/tool-ui/src/ContentEditDrawer.css

@@ -13,14 +13,40 @@
   }
 }
 
-/* Shelf responsive width adjustments */
+/* Shelf width tracks the content form's right edge so the open shelf never
+   overlaps the preview/widget. Below 900 the form is minmax(--contentForm-w-min,
+   1fr), sharing the row 50/50 with the one visible panel; minmax() is invalid as
+   a width, so reproduce it: half the content area, floored at the form min. */
 .Page-content.is-previewing,
 .Page-content.has-widget-panel-open,
 .Popup-content.is-previewing,
 .Popup-content.has-widget-panel-open {
-  /* When any panel is visible (preview OR widgets), use constrained width */
   .ContentEditDrawer.is-open {
-    @apply md:w-[var(--contentForm-resized-safe-w,var(--contentForm-w))];
+    @apply md:w-[max(var(--contentForm-w-min),calc((100cqw_-_var(--right-toolbar-w))_/_2))];
+  }
+}
+
+/* >=900 the form column resolves to a definite length; track it. Overrides omit
+   `md:` on purpose: container >=900 already implies desktop, and the
+   `@container > @media` order that `md:` emits is silently merged away by the
+   build's cssnano 4, dropping the gate. */
+@container (min-width: 900px) {
+  .Page-content.is-previewing,
+  .Page-content.has-widget-panel-open,
+  .Popup-content.is-previewing,
+  .Popup-content.has-widget-panel-open {
+    .ContentEditDrawer.is-open {
+      @apply w-[var(--contentForm-resized-safe-w,var(--contentForm-w))];
+    }
+  }
+
+  /* Widget only: form fills up to the fixed rail, so anchor to the rail's
+     leading edge rather than the unused resized form width. */
+  .Page-content:not(.is-previewing).has-widget-panel-open,
+  .Popup-content:not(.is-previewing).has-widget-panel-open {
+    .ContentEditDrawer.is-open {
+      @apply w-auto right-[calc(var(--right-toolbar-w)_+_var(--contentWidget-w)_+_var(--offset))];
+    }
   }
 }
 

package/src/legacy/tool-ui/src/ContentInputGroup.css

@@ -147,6 +147,15 @@
   }
 }
 
+/* Fields marked with @NotePosition(ABOVE) (defaulted for embedded/clustered fields) */
+.CIG-row > .CIG-note.is-note-above {
+  @apply order-[-1] mb-1.5 mt-0 w-full basis-full;
+}
+
+.CIG-row > .CIG-note.is-note-above > .CIG-noteItem {
+  @apply mt-0;
+}
+
 /* Equalize the ComboInput widths so that they look aligned. */
 .CIG .ComboInput {
   @apply w-auto min-w-[25cqw] max-w-[100cqw];

package/src/legacy/tool-ui/src/Page.css

@@ -563,18 +563,21 @@
     &.is-previewing.has-widget-panel-open {
       --contentForm-w: calc(
         var(--contentForm-w-base) - var(--contentPreview-w-min) -
-          var(--contentWidget-w-min)
+          var(--contentWidget-w)
       );
-      /* Safe widths' maximum is the form max, minus the min width of the visible columns (preview & widget) */
+      /* Safe widths' maximum is the form max, minus the fixed widget width and the min preview width, so the preview never drops below its minimum. */
       --contentForm-resized-safe-w: clamp(
         var(--contentForm-w-min),
         var(--contentForm-resized-w),
         calc(
           var(--contentForm-w-max) - var(--contentPreview-w-min) -
-            var(--contentWidget-w-min)
+            var(--contentWidget-w)
         )
       );
-      @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_1fr_1fr_var(--right-toolbar-w)];
+      /* Preview floors at its min; the rail flexes down to its min to yield
+         space so the preview never collapses. The JS DUAL_PANEL_MIN_WIDTH gate
+         closes a panel before both hit their mins, so this never overflows. */
+      @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_minmax(var(--contentPreview-w-min),_1fr)_minmax(var(--contentWidget-w-min),_var(--contentWidget-w))_var(--right-toolbar-w)];
     }
 
     /* Preview only */
@@ -588,15 +591,17 @@
       @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_1fr_0px_var(--right-toolbar-w)];
     }
 
-    /* Widget only */
+    /* Widget only — preview is closed, so the content form reclaims the freed
+       space (1fr) while the rail stays a fixed-width sidebar. Resizing is
+       disabled here since there is no preview to size the form against. */
     &:not(.is-previewing).has-widget-panel-open {
-      /* Safe widths' maximum is the form max, minus the min width of the visible column (widget) */
-      --contentForm-resized-safe-w: clamp(
-        var(--contentForm-w-min),
-        var(--contentForm-resized-w),
-        calc(var(--contentForm-w-max) - var(--contentWidget-w-min))
-      );
-      @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_0px_1fr_var(--right-toolbar-w)];
+      .ContentEdit-resizeWrapper {
+        @apply pointer-events-none;
+      }
+      /* Deliberately no --contentForm-resized-w reset: this state's form track
+         doesn't consume it, and leaving it set lets the resized width persist
+         for when the preview reopens. */
+      @apply md:grid-cols-[minmax(var(--contentForm-w-min),_1fr)_0px_var(--contentWidget-w)_var(--right-toolbar-w)];
     }
   }
 }