@webiny/app-website-builder 6.6.0-alpha.0 → 6.6.0-alpha.2

package/inputRenderers/FileInput.js

@@ -1,15 +1,41 @@
-import react from "react";
-import { FilePicker } from "@webiny/admin-ui";
+import react, { useState } from "react";
+import { FilePicker, ImageEditor, RichItemPreview, getCroppedImageRenderStyles } from "@webiny/admin-ui";
 import { FileManager } from "@webiny/app-admin";
 import { useBreakpoint } from "../BaseEditor/hooks/useBreakpoint.js";
+import { getAssetCropParam, normalizeToAsset } from "@webiny/website-builder-sdk";
 import { fileManagerItemToValue } from "../shared/fileManagerItemToValue.js";
+const isEditableImage = (asset)=>!!asset?.src && "string" == typeof asset.type && asset.type.startsWith("image/") && "image/svg+xml" !== asset.type;
+const hasImageEdit = (image)=>{
+    if (!image?.width || !image?.height) return false;
+    const c = image.crop;
+    const fullCrop = !c || 0 === c.top && 0 === c.left && 0 === c.bottom && 0 === c.right;
+    const fp = image.focalPoint;
+    const centeredFocal = !fp || 0.5 === fp.x && 0.5 === fp.y;
+    return !fullCrop || !centeredFocal;
+};
+const toEditorValue = (image)=>{
+    if (!image) return;
+    return {
+        crop: image.crop,
+        hotspot: image.focalPoint ? {
+            x: image.focalPoint.x,
+            y: image.focalPoint.y,
+            width: 1,
+            height: 1
+        } : void 0,
+        alt: image.alt,
+        caption: image.caption
+    };
+};
 const FileInputRenderer = ({ value, onChange, label, ...props })=>{
     const input = props.input;
     const { isBaseBreakpoint } = useBreakpoint();
+    const [editorOpen, setEditorOpen] = useState(false);
+    const asset = normalizeToAsset(value) ?? void 0;
+    const editable = isEditableImage(asset);
     const onFileChange = (file)=>{
         onChange(({ value })=>{
-            const newValue = fileManagerItemToValue(file);
-            value.set(newValue);
+            value.set(fileManagerItemToValue(file));
         });
     };
     const onRemove = ()=>{
@@ -18,19 +44,78 @@ const FileInputRenderer = ({ value, onChange, label, ...props })=>{
             else value.set(null);
         });
     };
+    const onSaveEdit = (edit)=>{
+        onChange(({ value })=>{
+            if (!asset) return;
+            const image = {
+                width: asset.image?.width,
+                height: asset.image?.height,
+                crop: edit.crop,
+                focalPoint: edit.hotspot ? {
+                    x: edit.hotspot.x,
+                    y: edit.hotspot.y
+                } : void 0,
+                alt: edit.alt,
+                caption: edit.caption
+            };
+            const updated = {
+                ...asset,
+                image
+            };
+            const cropParam = getAssetCropParam(updated);
+            if (cropParam) {
+                const sep = asset.src.includes("?") ? "&" : "?";
+                updated.url = `${asset.src}${sep}crop=${cropParam}`;
+            } else updated.url = asset.src;
+            value.set(updated);
+        });
+    };
     return /*#__PURE__*/ react.createElement(FileManager, {
         accept: input.allowedFileTypes,
         onChange: onFileChange,
-        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FilePicker, {
                 variant: "secondary",
                 label: label,
                 description: input.description,
                 type: "compact",
-                value: value,
+                value: asset?.src,
+                renderFilePreview: editable && asset?.src && hasImageEdit(asset.image) ? (previewProps)=>/*#__PURE__*/ react.createElement(RichItemPreview, {
+                        ...previewProps,
+                        renderImage: ({ name })=>{
+                            const { wrapper, image } = getCroppedImageRenderStyles(asset.image?.width ?? 0, asset.image?.height ?? 0, asset.image?.crop, asset.image?.focalPoint ? {
+                                x: asset.image.focalPoint.x,
+                                y: asset.image.focalPoint.y,
+                                width: 1,
+                                height: 1
+                            } : void 0, {
+                                boxWidth: 1,
+                                boxHeight: 1,
+                                fit: "cover"
+                            });
+                            return /*#__PURE__*/ react.createElement("div", {
+                                style: wrapper
+                            }, /*#__PURE__*/ react.createElement("img", {
+                                src: asset.src,
+                                alt: name,
+                                draggable: false,
+                                style: image
+                            }));
+                        }
+                    }) : void 0,
                 onSelectItem: ()=>showFileManager(),
                 onRemoveItem: onRemove,
-                onEditItem: ()=>showFileManager()
-            })
+                onEditItem: editable ? ()=>setEditorOpen(true) : void 0
+            }), editable ? /*#__PURE__*/ react.createElement(ImageEditor, {
+                open: editorOpen,
+                onClose: ()=>setEditorOpen(false),
+                image: {
+                    src: asset.src,
+                    width: asset.image?.width ?? 0,
+                    height: asset.image?.height ?? 0
+                },
+                value: toEditorValue(asset.image),
+                onSave: onSaveEdit
+            }) : null)
     });
 };
 export { FileInputRenderer };

package/inputRenderers/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputRenderers/FileInput.js","sources":["../../src/inputRenderers/FileInput.tsx"],"sourcesContent":["import React from \"react\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue.js\";\n\nexport const FileInputRenderer = ({\n    value,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value }) => {\n            const newValue = fileManagerItemToValue(file);\n            value.set(newValue);\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n        });\n    };\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    variant={\"secondary\"}\n                    label={label}\n                    description={input.description}\n                    type=\"compact\"\n                    value={value}\n                    onSelectItem={() => showFileManager()}\n                    onRemoveItem={onRemove}\n                    onEditItem={() => showFileManager()}\n                />\n            )}\n        />\n    );\n};\n"],"names":["FileInputRenderer","value","onChange","label","props","input","isBaseBreakpoint","useBreakpoint","onFileChange","file","newValue","fileManagerItemToValue","onRemove","undefined","FileManager","showFileManager","FilePicker"],"mappings":";;;;;AAQO,MAAMA,oBAAoB,CAAC,EAC9BC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACL,GAAGC,OACqB;IACxB,MAAMC,QAAQD,MAAM,KAAK;IACzB,MAAM,EAAEE,gBAAgB,EAAE,GAAGC;IAE7B,MAAMC,eAAe,CAACC;QAClBP,SAAS,CAAC,EAAED,KAAK,EAAE;YACf,MAAMS,WAAWC,uBAAuBF;YACxCR,MAAM,GAAG,CAACS;QACd;IACJ;IAEA,MAAME,WAAW;QACbV,SAAS,CAAC,EAAED,KAAK,EAAE;YACf,IAAIK,kBACAL,MAAM,GAAG,CAACY;iBAEVZ,MAAM,GAAG,CAAC;QAElB;IACJ;IAEA,OAAO,WAAP,GACI,oBAACa,aAAWA;QACR,QAAQT,MAAM,gBAAgB;QAC9B,UAAUG;QACV,QAAQ,CAAC,EAAEO,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,SAAS;gBACT,OAAOb;gBACP,aAAaE,MAAM,WAAW;gBAC9B,MAAK;gBACL,OAAOJ;gBACP,cAAc,IAAMc;gBACpB,cAAcH;gBACd,YAAY,IAAMG;;;AAKtC"}
+{"version":3,"file":"inputRenderers/FileInput.js","sources":["../../src/inputRenderers/FileInput.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n    FilePicker,\n    ImageEditor,\n    RichItemPreview,\n    getCroppedImageRenderStyles,\n    type ImageEditorValue\n} from \"@webiny/admin-ui\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { FileManager, type FileManagerFileItem } from \"@webiny/app-admin\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport {\n    normalizeToAsset,\n    getAssetCropParam,\n    type Asset,\n    type AssetImage\n} from \"@webiny/website-builder-sdk\";\nimport type { FileInput } from \"@webiny/website-builder-sdk\";\nimport { fileManagerItemToValue } from \"~/shared/fileManagerItemToValue.js\";\n\nconst isEditableImage = (asset: Asset | undefined): asset is Asset => {\n    return (\n        !!asset?.src &&\n        typeof asset.type === \"string\" &&\n        asset.type.startsWith(\"image/\") &&\n        asset.type !== \"image/svg+xml\"\n    );\n};\n\n/** True when the image carries a non-trivial crop or focal point worth previewing. */\nconst hasImageEdit = (image: AssetImage | undefined): boolean => {\n    if (!image?.width || !image?.height) {\n        return false;\n    }\n    const c = image.crop;\n    const fullCrop = !c || (c.top === 0 && c.left === 0 && c.bottom === 0 && c.right === 0);\n    const fp = image.focalPoint;\n    const centeredFocal = !fp || (fp.x === 0.5 && fp.y === 0.5);\n    return !fullCrop || !centeredFocal;\n};\n\n/** Map the stored asset image into the shared `ImageEditor` value (focalPoint → hotspot). */\nconst toEditorValue = (image: AssetImage | undefined): ImageEditorValue | undefined => {\n    if (!image) {\n        return undefined;\n    }\n    return {\n        crop: image.crop,\n        hotspot: image.focalPoint\n            ? { x: image.focalPoint.x, y: image.focalPoint.y, width: 1, height: 1 }\n            : undefined,\n        alt: image.alt,\n        caption: image.caption\n    };\n};\n\nexport const FileInputRenderer = ({\n    value,\n    onChange,\n    label,\n    ...props\n}: ElementInputRendererProps) => {\n    const input = props.input as FileInput;\n    const { isBaseBreakpoint } = useBreakpoint();\n    const [editorOpen, setEditorOpen] = useState(false);\n\n    const asset = normalizeToAsset(value) ?? undefined;\n    const editable = isEditableImage(asset);\n\n    const onFileChange = (file: FileManagerFileItem) => {\n        onChange(({ value }) => {\n            value.set(fileManagerItemToValue(file));\n        });\n    };\n\n    const onRemove = () => {\n        onChange(({ value }) => {\n            if (isBaseBreakpoint) {\n                value.set(undefined);\n            } else {\n                value.set(null);\n            }\n        });\n    };\n\n    // Save the per-usage crop / focal point / alt override onto the element value,\n    // writing the unified asset shape (hotspot → focalPoint).\n    const onSaveEdit = (edit: ImageEditorValue) => {\n        onChange(({ value }) => {\n            if (!asset) {\n                return;\n            }\n            const image: AssetImage = {\n                width: asset.image?.width,\n                height: asset.image?.height,\n                crop: edit.crop,\n                focalPoint: edit.hotspot ? { x: edit.hotspot.x, y: edit.hotspot.y } : undefined,\n                alt: edit.alt,\n                caption: edit.caption\n            };\n            const updated = { ...asset, image };\n            const cropParam = getAssetCropParam(updated);\n            if (cropParam) {\n                const sep = asset.src.includes(\"?\") ? \"&\" : \"?\";\n                updated.url = `${asset.src}${sep}crop=${cropParam}`;\n            } else {\n                updated.url = asset.src;\n            }\n            value.set(updated);\n        });\n    };\n\n    return (\n        <FileManager\n            accept={input.allowedFileTypes}\n            onChange={onFileChange}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        variant={\"secondary\"}\n                        label={label}\n                        description={input.description}\n                        type=\"compact\"\n                        value={asset?.src}\n                        // Reflect the per-usage crop + focal point in the thumbnail.\n                        renderFilePreview={\n                            editable && asset?.src && hasImageEdit(asset.image)\n                                ? previewProps => (\n                                      <RichItemPreview\n                                          {...previewProps}\n                                          renderImage={({ name }) => {\n                                              const { wrapper, image } =\n                                                  getCroppedImageRenderStyles(\n                                                      asset.image?.width ?? 0,\n                                                      asset.image?.height ?? 0,\n                                                      asset.image?.crop,\n                                                      asset.image?.focalPoint\n                                                          ? {\n                                                                x: asset.image.focalPoint.x,\n                                                                y: asset.image.focalPoint.y,\n                                                                width: 1,\n                                                                height: 1\n                                                            }\n                                                          : undefined,\n                                                      { boxWidth: 1, boxHeight: 1, fit: \"cover\" }\n                                                  );\n                                              return (\n                                                  <div style={wrapper}>\n                                                      <img\n                                                          src={asset.src as string}\n                                                          alt={name}\n                                                          draggable={false}\n                                                          style={image}\n                                                      />\n                                                  </div>\n                                              );\n                                          }}\n                                      />\n                                  )\n                                : undefined\n                        }\n                        onSelectItem={() => showFileManager()}\n                        onRemoveItem={onRemove}\n                        // The \"Edit\" (pencil) action edits the image (crop / focal\n                        // point / alt). Replacing the file is done by clicking the\n                        // preview. For non-images there is nothing to edit, so the\n                        // pencil is hidden.\n                        onEditItem={editable ? () => setEditorOpen(true) : undefined}\n                    />\n                    {editable ? (\n                        <ImageEditor\n                            open={editorOpen}\n                            onClose={() => setEditorOpen(false)}\n                            image={{\n                                src: asset.src,\n                                width: asset.image?.width ?? 0,\n                                height: asset.image?.height ?? 0\n                            }}\n                            value={toEditorValue(asset.image)}\n                            onSave={onSaveEdit}\n                        />\n                    ) : null}\n                </>\n            )}\n        />\n    );\n};\n"],"names":["isEditableImage","asset","hasImageEdit","image","c","fullCrop","fp","centeredFocal","toEditorValue","undefined","FileInputRenderer","value","onChange","label","props","input","isBaseBreakpoint","useBreakpoint","editorOpen","setEditorOpen","useState","normalizeToAsset","editable","onFileChange","file","fileManagerItemToValue","onRemove","onSaveEdit","edit","updated","cropParam","getAssetCropParam","sep","FileManager","showFileManager","FilePicker","previewProps","RichItemPreview","name","wrapper","getCroppedImageRenderStyles","ImageEditor"],"mappings":"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"}

package/inputRenderers/LexicalInput/LexicalEditor.js

@@ -1,35 +1,42 @@
 import react from "react";
-import { CompositionScope, LexicalEditor } from "@webiny/app-admin";
+import { AdminConfig, CompositionScope, LexicalEditor } from "@webiny/app-admin";
 import { StaticToolbar } from "@webiny/lexical-editor";
 import { createLexicalTokens } from "@webiny/lexical-theme/createLexicalEditorTokens.js";
 import { useWebsiteBuilderTheme } from "../../BaseEditor/components/index.js";
 import "./wbStaticToolbar.css";
 const placeholderStyles = {
     position: "absolute",
-    top: 40,
-    left: 25
+    top: 0,
+    left: 0,
+    padding: "8px 12px",
+    marginTop: 0,
+    color: "var(--text-color-neutral-muted)"
 };
 const contentEditableStyles = {
     minHeight: 200,
     display: "block",
-    padding: 10
+    padding: "8px 12px"
 };
 const styles = {
-    backgroundColor: "#fff",
-    border: "1px solid #e1e1e1",
-    padding: "10px 14px",
+    backgroundColor: "var(--color-neutral-base)",
+    border: "1px solid var(--border-color-neutral-muted)",
+    borderTop: "none",
+    borderRadius: "0 0 var(--radius-md) var(--radius-md)",
     minHeight: 200,
     maxHeight: 350,
     fontFamily: "var(--wb-theme-font-family)"
 };
 const lexicalTokens = createLexicalTokens("wb-lx-");
+const { useAdminConfig: useAdminConfig } = AdminConfig;
 const LexicalEditorComponent = (props)=>{
     const { theme } = useWebsiteBuilderTheme();
+    const { lexicalTheme } = useAdminConfig();
     const editorTheme = {
         colors: theme?.colors ?? [],
         typography: theme?.typography ?? {},
         fontSizes: theme?.fontSizes ?? [],
-        tokens: lexicalTokens
+        tokens: lexicalTokens,
+        allowCustomColors: theme?.allowCustomColors ?? lexicalTheme.allowCustomColors
     };
     return /*#__PURE__*/ react.createElement(LexicalEditor, {
         ...props,

package/inputRenderers/LexicalInput/LexicalEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputRenderers/LexicalInput/LexicalEditor.js","sources":["../../../src/inputRenderers/LexicalInput/LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditor as BaseLexicalEditor } from \"@webiny/app-admin\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { createLexicalTokens } from \"@webiny/lexical-theme/createLexicalEditorTokens.js\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport \"./wbStaticToolbar.css\";\nimport { CompositionScope } from \"@webiny/app-admin\";\n\nconst placeholderStyles: React.CSSProperties = { position: \"absolute\", top: 40, left: 25 };\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: 10\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"#fff\",\n    border: \"1px solid #e1e1e1\",\n    padding: \"10px 14px\",\n    minHeight: 200,\n    maxHeight: 350,\n    fontFamily: \"var(--wb-theme-font-family)\"\n};\n\nconst lexicalTokens = createLexicalTokens(\"wb-lx-\");\n\nexport type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, \"theme\">;\n\nconst LexicalEditorComponent = (props: LexicalEditorProps) => {\n    const { theme } = useWebsiteBuilderTheme();\n\n    const editorTheme: EditorTheme = {\n        colors: theme?.colors ?? [],\n        typography: theme?.typography ?? {},\n        fontSizes: theme?.fontSizes ?? [],\n        tokens: lexicalTokens\n    };\n\n    return (\n        <BaseLexicalEditor\n            {...props}\n            staticToolbar={<StaticToolbar className={\"wb-static-toolbar\"} />}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n            theme={editorTheme}\n        />\n    );\n};\n\nconst ExpandedLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"expanded\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nconst CompactLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"compact\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nexport const LexicalEditor = {\n    Expanded: ExpandedLexicalEditor,\n    Compact: CompactLexicalEditor\n};\n"],"names":["placeholderStyles","contentEditableStyles","styles","lexicalTokens","createLexicalTokens","LexicalEditorComponent","props","theme","useWebsiteBuilderTheme","editorTheme","BaseLexicalEditor","StaticToolbar","ExpandedLexicalEditor","CompositionScope","CompactLexicalEditor","LexicalEditor"],"mappings":";;;;;;AASA,MAAMA,oBAAyC;IAAE,UAAU;IAAY,KAAK;IAAI,MAAM;AAAG;AAEzF,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IACR,SAAS;IACT,WAAW;IACX,WAAW;IACX,YAAY;AAChB;AAEA,MAAMC,gBAAgBC,oBAAoB;AAI1C,MAAMC,yBAAyB,CAACC;IAC5B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAElB,MAAMC,cAA2B;QAC7B,QAAQF,OAAO,UAAU,EAAE;QAC3B,YAAYA,OAAO,cAAc,CAAC;QAClC,WAAWA,OAAO,aAAa,EAAE;QACjC,QAAQJ;IACZ;IAEA,OAAO,WAAP,GACI,oBAACO,eAAiBA;QACb,GAAGJ,KAAK;QACT,6BAAe,oBAACK,eAAaA;YAAC,WAAW;;QACzC,KAAK;QACL,aAAaL,OAAO,eAAe;QACnC,mBAAmBN;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOO;;AAGnB;AAEA,MAAMG,wBAAwB,CAACN,QACpB,WAAP,GACI,oBAACO,kBAAgBA;QAAC,MAAM;qBACpB,oBAACR,wBAA2BC;AAKxC,MAAMQ,uBAAuB,CAACR,QACnB,WAAP,GACI,oBAACO,kBAAgBA;QAAC,MAAM;qBACpB,oBAACR,wBAA2BC;AAKjC,MAAMS,8BAAgB;IACzB,UAAUH;IACV,SAASE;AACb"}
+{"version":3,"file":"inputRenderers/LexicalInput/LexicalEditor.js","sources":["../../../src/inputRenderers/LexicalInput/LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditor as BaseLexicalEditor, AdminConfig } from \"@webiny/app-admin\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { createLexicalTokens } from \"@webiny/lexical-theme/createLexicalEditorTokens.js\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport \"./wbStaticToolbar.css\";\nimport { CompositionScope } from \"@webiny/app-admin\";\n\n// Overlay the contentEditable: same origin + same padding as `contentEditableStyles`, and\n// neutralize the Placeholder component's default -20px margin. This makes the placeholder's\n// first line land exactly on the editor's text start.\nconst placeholderStyles: React.CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    padding: \"8px 12px\",\n    marginTop: 0,\n    // Font size/family come from the paragraph typography class (applied by RichTextEditor);\n    // keep the placeholder muted.\n    color: \"var(--text-color-neutral-muted)\"\n};\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: \"8px 12px\"\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"var(--color-neutral-base)\",\n    border: \"1px solid var(--border-color-neutral-muted)\",\n    // The static toolbar carries the top border; the body drops it and rounds only the\n    // bottom corners so the two read as one seamless rounded box (matches Figma).\n    borderTop: \"none\",\n    borderRadius: \"0 0 var(--radius-md) var(--radius-md)\",\n    // Padding lives on the contentEditable only (avoids doubled inset).\n    minHeight: 200,\n    maxHeight: 350,\n    fontFamily: \"var(--wb-theme-font-family)\"\n};\n\nconst lexicalTokens = createLexicalTokens(\"wb-lx-\");\n\nexport type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, \"theme\">;\n\nconst { useAdminConfig } = AdminConfig;\n\nconst LexicalEditorComponent = (props: LexicalEditorProps) => {\n    const { theme } = useWebsiteBuilderTheme();\n    const { lexicalTheme } = useAdminConfig();\n\n    const editorTheme: EditorTheme = {\n        colors: theme?.colors ?? [],\n        typography: theme?.typography ?? {},\n        fontSizes: theme?.fontSizes ?? [],\n        tokens: lexicalTokens,\n        allowCustomColors: theme?.allowCustomColors ?? lexicalTheme.allowCustomColors\n    };\n\n    return (\n        <BaseLexicalEditor\n            {...props}\n            staticToolbar={<StaticToolbar className={\"wb-static-toolbar\"} />}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n            theme={editorTheme}\n        />\n    );\n};\n\nconst ExpandedLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"expanded\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nconst CompactLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"compact\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nexport const LexicalEditor = {\n    Expanded: ExpandedLexicalEditor,\n    Compact: CompactLexicalEditor\n};\n"],"names":["placeholderStyles","contentEditableStyles","styles","lexicalTokens","createLexicalTokens","useAdminConfig","AdminConfig","LexicalEditorComponent","props","theme","useWebsiteBuilderTheme","lexicalTheme","editorTheme","BaseLexicalEditor","StaticToolbar","ExpandedLexicalEditor","CompositionScope","CompactLexicalEditor","LexicalEditor"],"mappings":";;;;;;AAYA,MAAMA,oBAAyC;IAC3C,UAAU;IACV,KAAK;IACL,MAAM;IACN,SAAS;IACT,WAAW;IAGX,OAAO;AACX;AAEA,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IAGR,WAAW;IACX,cAAc;IAEd,WAAW;IACX,WAAW;IACX,YAAY;AAChB;AAEA,MAAMC,gBAAgBC,oBAAoB;AAI1C,MAAM,EAAEC,gBAAAA,cAAc,EAAE,GAAGC;AAE3B,MAAMC,yBAAyB,CAACC;IAC5B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,MAAMO,cAA2B;QAC7B,QAAQH,OAAO,UAAU,EAAE;QAC3B,YAAYA,OAAO,cAAc,CAAC;QAClC,WAAWA,OAAO,aAAa,EAAE;QACjC,QAAQN;QACR,mBAAmBM,OAAO,qBAAqBE,aAAa,iBAAiB;IACjF;IAEA,OAAO,WAAP,GACI,oBAACE,eAAiBA;QACb,GAAGL,KAAK;QACT,6BAAe,oBAACM,eAAaA;YAAC,WAAW;;QACzC,KAAK;QACL,aAAaN,OAAO,eAAe;QACnC,mBAAmBR;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOU;;AAGnB;AAEA,MAAMG,wBAAwB,CAACP,QACpB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKxC,MAAMS,uBAAuB,CAACT,QACnB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKjC,MAAMU,8BAAgB;IACzB,UAAUH;IACV,SAASE;AACb"}

package/inputRenderers/LexicalInput/TypographyDropDown.js

@@ -47,14 +47,15 @@ const TypographyDropDown = ()=>{
         element
     ]);
     return /*#__PURE__*/ react.createElement(react.Fragment, null, styles?.length ? /*#__PURE__*/ react.createElement(DropDown, {
-        buttonClassName: "toolbar-item typography-dropdown",
+        buttonClassName: "toolbar-item typography-dropdown block-type-dropdown",
         buttonAriaLabel: "Typography formatting options",
         buttonLabel: value?.label || "Typography",
         stopCloseOnClickSelf: true,
         disabled: false,
         showScroll: true
     }, styles?.map((option)=>/*#__PURE__*/ react.createElement(DropDownItem, {
-            className: `item typography-item ${value?.id === option.id ? "active dropdown-item-active" : ""}`,
+            className: "item typography-item",
+            selected: value?.id === option.id,
             onClick: ()=>applyTypography(option),
             key: option.id
         }, /*#__PURE__*/ react.createElement("span", {

package/inputRenderers/LexicalInput/TypographyDropDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputRenderers/LexicalInput/TypographyDropDown.js","sources":["../../../src/inputRenderers/LexicalInput/TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport type { TypographyStyle } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useWebsiteBuilderTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.typography) {\n            return [];\n        }\n        const headingsStyles = theme.typography?.headings || [];\n        const paragraphStyles = theme.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.typography) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.typography]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.label || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className={`item typography-item ${\n                                value?.id === option.id ? \"active dropdown-item-active\" : \"\"\n                            }`}\n                            onClick={() => applyTypography(option)}\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.label}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"names":["TypographyDropDown","value","applyTypography","useTypographyAction","theme","useWebsiteBuilderTheme","styles","setStyles","useState","element","useCurrentElement","rangeSelection","useCurrentSelection","getAllTextStyles","headingsStyles","paragraphStyles","useEffect","getListStyles","tag","listStyles","x","fallbackTag","$isParagraphNode","$isHeadingNode","$isListNode","type","anchorNode","parentList","$getNearestNodeOfType","ListNode","$isQuoteNode","DropDown","option","DropDownItem"],"mappings":";;;;;AAmBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGC;IACnC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAA4B,EAAE;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAE3B,MAAMC,mBAAmB;QACrB,IAAI,CAACT,OAAO,YACR,OAAO,EAAE;QAEb,MAAMU,iBAAiBV,MAAM,UAAU,EAAE,YAAY,EAAE;QACvD,MAAMW,kBAAkBX,MAAM,UAAU,EAAE,cAAc,EAAE;QAC1D,OAAO;eAAIU;eAAmBC;SAAgB;IAClD;IAEAC,UAAU;QAEN,IAAIZ,OAAO,YACPG,UAAUM;IAElB,GAAG;QAACT,OAAO;KAAW;IAEtB,MAAMa,gBAAgB,CAACC;QACnB,MAAMC,aAAaf,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKF,QAAQ,EAAE;QAC5E,IAAIC,WAAW,MAAM,GAAG,GACpB,OAAOA;QAGX,MAAME,cAAcH,AAAQ,SAARA,MAAe,OAAO;QAC1C,OAAOd,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKC,gBAAgB,EAAE;IAC5E;IAEAL,UAAU;QACN,IAAI,CAACP,WAAW,CAACE,gBACb;QAGJ,IAAIW,iBAAiBb,YAAYc,eAAed,UAC5CF,UAAUM;aACP,IAAIW,YAAYf,UAAU;YAC7B,IAAIgB;YACJ,IAAI;gBACA,MAAMC,aAAaf,eAAe,MAAM,CAAC,OAAO;gBAChD,MAAMgB,aAAaC,sBAAgCF,YAAYG;gBAC/D,IAAIF,YACAF,OAAOE,WAAW,WAAW;YAErC,EAAE,OAAM;gBACJF,OAAOhB,QAAQ,WAAW;YAC9B;YAEa,aAATgB,OACAlB,UAAUU,cAAc,SAExBV,UAAUU,cAAc;QAEhC,OAAWa,aAAarB,WACpBF,UAAUH,OAAO,YAAY,UAAU,EAAE,IAEzCG,UAAU,EAAE;IAEpB,GAAG;QAACE;KAAQ;IAEZ,OAAO,WAAP,GACI,0CACK,AAAEH,QAAQ,SAAS,WAAT,GACP,oBAACyB,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,aAAa9B,OAAO,SAAS;QAC7B,sBAAsB;QACtB,UAAU;QACV,YAAY;OAEXK,QAAQ,IAAI0B,CAAAA,SAAAA,WAAAA,GACT,oBAACC,cAAYA;YACT,WAAW,CAAC,qBAAqB,EAC7BhC,OAAO,OAAO+B,OAAO,EAAE,GAAG,gCAAgC,IAC5D;YACF,SAAS,IAAM9B,gBAAgB8B;YAC/B,KAAKA,OAAO,EAAE;yBAEd,oBAAC;YAAK,WAAU;WAAQA,OAAO,KAAK,OAIhD;AAGhB"}
+{"version":3,"file":"inputRenderers/LexicalInput/TypographyDropDown.js","sources":["../../../src/inputRenderers/LexicalInput/TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport type { TypographyStyle } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useWebsiteBuilderTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.typography) {\n            return [];\n        }\n        const headingsStyles = theme.typography?.headings || [];\n        const paragraphStyles = theme.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.typography) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.typography]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown block-type-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.label || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className=\"item typography-item\"\n                            selected={value?.id === option.id}\n                            onClick={() => applyTypography(option)}\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.label}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"names":["TypographyDropDown","value","applyTypography","useTypographyAction","theme","useWebsiteBuilderTheme","styles","setStyles","useState","element","useCurrentElement","rangeSelection","useCurrentSelection","getAllTextStyles","headingsStyles","paragraphStyles","useEffect","getListStyles","tag","listStyles","x","fallbackTag","$isParagraphNode","$isHeadingNode","$isListNode","type","anchorNode","parentList","$getNearestNodeOfType","ListNode","$isQuoteNode","DropDown","option","DropDownItem"],"mappings":";;;;;AAmBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGC;IACnC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAA4B,EAAE;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAE3B,MAAMC,mBAAmB;QACrB,IAAI,CAACT,OAAO,YACR,OAAO,EAAE;QAEb,MAAMU,iBAAiBV,MAAM,UAAU,EAAE,YAAY,EAAE;QACvD,MAAMW,kBAAkBX,MAAM,UAAU,EAAE,cAAc,EAAE;QAC1D,OAAO;eAAIU;eAAmBC;SAAgB;IAClD;IAEAC,UAAU;QAEN,IAAIZ,OAAO,YACPG,UAAUM;IAElB,GAAG;QAACT,OAAO;KAAW;IAEtB,MAAMa,gBAAgB,CAACC;QACnB,MAAMC,aAAaf,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKF,QAAQ,EAAE;QAC5E,IAAIC,WAAW,MAAM,GAAG,GACpB,OAAOA;QAGX,MAAME,cAAcH,AAAQ,SAARA,MAAe,OAAO;QAC1C,OAAOd,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKC,gBAAgB,EAAE;IAC5E;IAEAL,UAAU;QACN,IAAI,CAACP,WAAW,CAACE,gBACb;QAGJ,IAAIW,iBAAiBb,YAAYc,eAAed,UAC5CF,UAAUM;aACP,IAAIW,YAAYf,UAAU;YAC7B,IAAIgB;YACJ,IAAI;gBACA,MAAMC,aAAaf,eAAe,MAAM,CAAC,OAAO;gBAChD,MAAMgB,aAAaC,sBAAgCF,YAAYG;gBAC/D,IAAIF,YACAF,OAAOE,WAAW,WAAW;YAErC,EAAE,OAAM;gBACJF,OAAOhB,QAAQ,WAAW;YAC9B;YAEa,aAATgB,OACAlB,UAAUU,cAAc,SAExBV,UAAUU,cAAc;QAEhC,OAAWa,aAAarB,WACpBF,UAAUH,OAAO,YAAY,UAAU,EAAE,IAEzCG,UAAU,EAAE;IAEpB,GAAG;QAACE;KAAQ;IAEZ,OAAO,WAAP,GACI,0CACK,AAAEH,QAAQ,SAAS,WAAT,GACP,oBAACyB,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,aAAa9B,OAAO,SAAS;QAC7B,sBAAsB;QACtB,UAAU;QACV,YAAY;OAEXK,QAAQ,IAAI0B,CAAAA,SAAAA,WAAAA,GACT,oBAACC,cAAYA;YACT,WAAU;YACV,UAAUhC,OAAO,OAAO+B,OAAO,EAAE;YACjC,SAAS,IAAM9B,gBAAgB8B;YAC/B,KAAKA,OAAO,EAAE;yBAEd,oBAAC;YAAK,WAAU;WAAQA,OAAO,KAAK,OAIhD;AAGhB"}

package/inputRenderers/LexicalInput/wbStaticToolbar.css

@@ -1,11 +1,19 @@
+/*
+ * Mirrors @webiny/lexical-editor's StaticToolbar.css, scoped to `.wb-static-toolbar`.
+ * The dropdown menu (`.lexical-dropdown`) is styled by the shared file (always imported),
+ * so only the toolbar rules + website-builder-only bits live here.
+ */
 .wb-static-toolbar {
   display: flex;
   position: relative;
   padding: 4px;
   vertical-align: middle;
-  border: 1px solid #eee;
+  border: 1px solid var(--border-color-neutral-muted);
+  /* No divider between toolbar and body: the body carries the bottom border. */
+  border-bottom: none;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
   will-change: transform;
-  background: #fff;
+  background: var(--color-neutral-base);
   flex-wrap: wrap;
   z-index: 1;
 }
@@ -13,8 +21,10 @@
 .wb-static-toolbar button.popup-item {
   border: 0;
   display: flex;
-  background: #fff;
-  border-radius: 10px;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: var(--radius-md);
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
@@ -28,43 +38,33 @@
   margin-right: 2px;
 }
 
-.wb-static-toolbar button.popup-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  margin-top: 2px;
-  vertical-align: -0.25em;
+.wb-static-toolbar button.popup-item .format {
   display: flex;
-}
-
-.wb-static-toolbar button.popup-item:disabled i.format {
-  opacity: 0.2;
+  height: 16px;
+  width: 16px;
+  flex-shrink: 0;
 }
 
 .wb-static-toolbar button.popup-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.wb-static-toolbar button.popup-item.active i {
-  opacity: 1;
+  background-color: var(--color-primary-subtle);
 }
 
 .wb-static-toolbar .popup-item:hover:not([disabled]) {
-  background-color: #eee;
+  /* Matches admin-ui ghost IconButton hover (bg-neutral-dark/5). */
+  background-color: color-mix(in oklab, var(--color-neutral-dark) 5%, transparent);
 }
 
 .wb-static-toolbar select.popup-item {
   border: 0;
   display: flex;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   padding: 8px;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 70px;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
 }
 
@@ -76,12 +76,11 @@
 .wb-static-toolbar .popup-item .text {
   display: flex;
   line-height: 20px;
-  width: 200px;
+  width: 70px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
-  width: 70px;
   overflow: hidden;
   height: 20px;
   text-align: left;
@@ -89,25 +88,20 @@
 
 .wb-static-toolbar .popup-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   user-select: none;
-  line-height: 16px;
-  background-size: contain;
 }
 
-.wb-static-toolbar i.chevron-down {
-  margin-top: 3px;
+.wb-static-toolbar .chevron-down {
   width: 16px;
   height: 16px;
   display: flex;
+  flex-shrink: 0;
   user-select: none;
 }
 
-.wb-static-toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
+.wb-static-toolbar .chevron-down.inside {
   margin-left: -25px;
   margin-top: 11px;
   margin-right: 10px;
@@ -116,30 +110,20 @@
 
 .wb-static-toolbar .divider {
   width: 1px;
-  background-color: #eee;
+  background-color: var(--border-color-neutral-dimmed);
   margin: 0 4px;
 }
 
-.wb-static-toolbar .icon.bullet-list,
-.wb-static-toolbar .icon.bullet {
-  background-image: url("./icons/list-ul.svg");
-}
-
-.wb-static-toolbar .icon.numbered-list,
-.wb-static-toolbar .icon.number {
-  background-image: url("./icons/list-ol.svg");
-}
-
 .wb-static-toolbar .link-editor .button.active,
 .wb-static-toolbar .button.active {
-  background-color: rgb(223, 232, 250);
+  background-color: var(--color-primary-subtle);
 }
 
 .wb-static-toolbar button.toolbar-item {
   border: 0;
   display: flex;
   background: none;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
@@ -156,33 +140,26 @@
   margin-right: 2px;
 }
 
-.wb-static-toolbar button.toolbar-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  vertical-align: -0.25em;
+.wb-static-toolbar button.toolbar-item .format {
   display: flex;
-  opacity: 0.6;
+  height: 16px;
+  width: 16px;
+  flex-shrink: 0;
 }
 
 .wb-static-toolbar button.toolbar-item:disabled .icon,
 .wb-static-toolbar button.toolbar-item:disabled .text,
-.wb-static-toolbar button.toolbar-item:disabled i.format,
 .wb-static-toolbar button.toolbar-item:disabled .chevron-down {
   opacity: 0.2;
 }
 
 .wb-static-toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.wb-static-toolbar button.toolbar-item.active i {
-  opacity: 1;
+  background-color: var(--color-primary-subtle);
 }
 
 .wb-static-toolbar .toolbar-item:hover:not([disabled]) {
-  background-color: #eee;
+  /* Matches admin-ui ghost IconButton hover (bg-neutral-dark/5). */
+  background-color: color-mix(in oklab, var(--color-neutral-dark) 5%, transparent);
 }
 
 .wb-static-toolbar .toolbar-item.font-family .text {
@@ -194,12 +171,20 @@
   width: 150px;
 }
 
+/* Fixed-width label so the trigger doesn't resize as the selected heading changes. */
+.wb-static-toolbar .block-type-dropdown .dropdown-button-text {
+  width: 92px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .wb-static-toolbar .toolbar-item .text {
   display: flex;
   line-height: 20px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
   overflow: hidden;
   height: 20px;
@@ -209,56 +194,40 @@
 
 .wb-static-toolbar .toolbar-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
-}
-
-.wb-static-toolbar i.chevron-down {
-  margin-top: 3px;
   width: 16px;
   height: 16px;
-  display: flex;
   user-select: none;
 }
 
-.wb-static-toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  margin-left: -25px;
-  margin-top: 11px;
-  margin-right: 10px;
-  pointer-events: none;
+/*
+ * Toolbar icons are inline SVGs from @webiny/icons (shared action components);
+ * color via `fill`.
+ */
+.wb-static-toolbar .format,
+.wb-static-toolbar .icon {
+  fill: var(--fill-neutral-xstrong);
 }
 
-.wb-static-toolbar .divider {
-  width: 1px;
-  background-color: #eee;
-  margin: 0 4px;
+.wb-static-toolbar .chevron-down {
+  fill: var(--fill-neutral-strong);
 }
 
-.lexical-dropdown-container {
-  position: absolute;
-  bottom: -5px;
-  left: 0;
-}
-
-.wb-static-toolbar button.item i {
-  opacity: 0.6;
-}
-
-.wb-static-toolbar button.item.dropdown-item-active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.wb-static-toolbar button.item.dropdown-item-active i {
-  opacity: 1;
+.wb-static-toolbar button:disabled .format,
+.wb-static-toolbar button:disabled .icon,
+.wb-static-toolbar button:disabled .chevron-down {
+  fill: var(--fill-neutral-disabled);
 }
 
+/* Website-builder-only: fullscreen/expand toggle (still a background-image glyph). */
 .wb-static-toolbar i.expand {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
   background-image: url("./icons/fullscreen.svg");
 }
+
+.lexical-dropdown-container {
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+}

package/modules/AbTesting.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const AbTesting: () => React.JSX.Element;

package/modules/AbTesting.js

@@ -0,0 +1,19 @@
+import react from "react";
+import { RegisterFeature } from "@webiny/app-admin";
+import { ExperimentsFeature } from "../features/experiments/index.js";
+import { ExperimentsEditorPresenterFeature } from "../presentation/experiments/ExperimentsEditor/index.js";
+import { ExperimentsManagerPresenterFeature } from "../presentation/experiments/ExperimentsManager/index.js";
+import { ExperimentFormPresenterFeature } from "../presentation/experiments/ExperimentForm/index.js";
+import { ExperimentsEditorConfig } from "../presentation/experiments/config/ExperimentsEditorConfig.js";
+const AbTesting = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: ExperimentsFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: ExperimentsEditorPresenterFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: ExperimentsManagerPresenterFeature
+    }), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: ExperimentFormPresenterFeature
+    }), /*#__PURE__*/ react.createElement(ExperimentsEditorConfig, null));
+export { AbTesting };
+
+//# sourceMappingURL=AbTesting.js.map

package/modules/AbTesting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modules/AbTesting.js","sources":["../../src/modules/AbTesting.tsx"],"sourcesContent":["import React from \"react\";\nimport { RegisterFeature } from \"@webiny/app-admin\";\nimport { ExperimentsFeature } from \"~/features/experiments/index.js\";\nimport { ExperimentsEditorPresenterFeature } from \"~/presentation/experiments/ExperimentsEditor/index.js\";\nimport { ExperimentsManagerPresenterFeature } from \"~/presentation/experiments/ExperimentsManager/index.js\";\nimport { ExperimentFormPresenterFeature } from \"~/presentation/experiments/ExperimentForm/index.js\";\nimport { ExperimentsEditorConfig } from \"~/presentation/experiments/config/ExperimentsEditorConfig.js\";\n\nexport const AbTesting = () => {\n    return (\n        <>\n            <RegisterFeature feature={ExperimentsFeature} />\n            <RegisterFeature feature={ExperimentsEditorPresenterFeature} />\n            <RegisterFeature feature={ExperimentsManagerPresenterFeature} />\n            <RegisterFeature feature={ExperimentFormPresenterFeature} />\n            <ExperimentsEditorConfig />\n        </>\n    );\n};\n"],"names":["AbTesting","RegisterFeature","ExperimentsFeature","ExperimentsEditorPresenterFeature","ExperimentsManagerPresenterFeature","ExperimentFormPresenterFeature","ExperimentsEditorConfig"],"mappings":";;;;;;;AAQO,MAAMA,YAAY,IACd,WAAP,GACI,wDACI,oBAACC,iBAAeA;QAAC,SAASC;sBAC1B,oBAACD,iBAAeA;QAAC,SAASE;sBAC1B,oBAACF,iBAAeA;QAAC,SAASG;sBAC1B,oBAACH,iBAAeA;QAAC,SAASI;sBAC1B,oBAACC,yBAAuBA"}