(function (wp) {
     
   const { registerBlockType } = wp.blocks;
   const { InspectorControls } = wp.blockEditor || wp.editor;
   const { PanelBody, TextControl, RangeControl, ToggleControl } = wp.components;
   const { createElement: el } = wp.element;
     
   registerBlockType("allspice/floating-button", {
     title: "Allspice Floating Button",
     icon: "button",
     category: "widgets",
     attributes: {
       id: { type: "string", default: "WIDCON-ea5d" },
       reserve_w: { type: "number", default: 220 },
       reserve_h: { type: "number", default: 196 },
       floating: { type: "boolean", default: false },
       offset_right: { type: "number", default: 20 },
       offset_bottom: { type: "number", default: 20 },
       hide_near_bottom: { type: "boolean", default: true },
     },
     edit: function (props) {
       const { attributes, setAttributes } = props;
       const {
         id, reserve_w, reserve_h,
         floating, offset_right, offset_bottom, hide_near_bottom
       } = attributes;
       const previewStyle = floating
         ? {
             position: "relative",
             border: "1px dashed #ddd",
             padding: "12px",
             minHeight: "140px",
           }
         : {
             border: "1px dashed #ddd",
             padding: "12px",
           };

       return el(
         "div",
         { style: previewStyle },
         el(
           InspectorControls,
           {},
           el(
             PanelBody,
             { title: "Allspice Button Settings", initialOpen: true },
             el(RangeControl, {
               label: "Reserve Width (px)",
               value: reserve_w,
               min: 200,
               max: 1200,
               onChange: (v) => setAttributes({ reserve_w: v || 220 }),
             }),
             el(RangeControl, {
               label: "Reserve Height (px)",
               value: reserve_h,
               min: 56,
               max: 400,
               onChange: (v) => setAttributes({ reserve_h: v || 196 }),
             }),
             el(ToggleControl, {
               label: "Floating (bottom-right)",
               checked: !!floating,
               onChange: (v) => setAttributes({ floating: !!v }),
             }),
             floating &&
               el(
                 "div",
                 {},
                 el(ToggleControl, {
                   label: "Hide near page bottom",
                   checked: !!hide_near_bottom,
                   onChange: (v) => setAttributes({ hide_near_bottom: !!v }),
                 }),
                 el(RangeControl, {
                   label: "Right Offset (px)",
                   value: offset_right,
                   min: 0,
                   max: 80,
                   onChange: (v) => setAttributes({ offset_right: v ?? 20 }),
                 }),
                 el(RangeControl, {
                   label: "Bottom Offset (px)",
                   value: offset_bottom,
                   min: 0,
                   max: 120,
                   onChange: (v) => setAttributes({ offset_bottom: v ?? 20 }),
                 })
               )
           )
         ),
         el(
           "div",
           {},
           el("strong", {}, "Allspice Button Preview"),
           el(
             "div",
             { style: { marginTop: "8px", opacity: 0.8 } },
             `Renders: [Allspice_Button id="WIDCON-ea5d" reserve_w="${reserve_w}" reserve_h="${reserve_h}"] (fixed)`
           )
         )
       );
     },
     save: function () {
       return null;
     },
   });
 })(window.wp);

// [Allspice_Button id="WIDCON-ea5d" reserve_w="220" reserve_h="196" floating="1" offset_right="20" offset_bottom="20" hide_near_bottom="1"]