n8n-editor-ui 1.73.0 → 1.74.1

package/dist/assets/ProjectSettings-BgunHp-2.css

@@ -0,0 +1,286 @@
+/* BEM support Func
+ -------------------------- */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Outline
+-------------------------- */
+/* Box shadow
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+._operation_18zmn_123 {
+  padding: 0 0 var(--spacing-l) var(--spacing-l);
+}/* BEM support Func
+ -------------------------- */
+/* Transition
+-------------------------- */
+/* Color
+-------------------------- */
+/* Link
+-------------------------- */
+/* Border
+-------------------------- */
+/* Outline
+-------------------------- */
+/* Box shadow
+-------------------------- */
+/* Fill
+-------------------------- */
+/* Typography
+-------------------------- */
+/* z-index
+-------------------------- */
+/* Disable base
+-------------------------- */
+/* Icon
+-------------------------- */
+/* Checkbox
+-------------------------- */
+/* Radio
+-------------------------- */
+/* Select
+-------------------------- */
+/* Alert
+-------------------------- */
+/* MessageBox
+-------------------------- */
+/* Message
+-------------------------- */
+/* Notification
+-------------------------- */
+/* Input
+-------------------------- */
+/* Cascader
+-------------------------- */
+/* Group
+-------------------------- */
+/* Tab
+-------------------------- */
+/* Button
+-------------------------- */
+/* cascader
+-------------------------- */
+/* Switch
+-------------------------- */
+/* Dialog
+-------------------------- */
+/* Table
+-------------------------- */
+/* Pagination
+-------------------------- */
+/* Popup
+-------------------------- */
+/* Popover
+-------------------------- */
+/* Tooltip
+-------------------------- */
+/* Tag
+-------------------------- */
+/* Tree
+-------------------------- */
+/* Dropdown
+-------------------------- */
+/* Badge
+-------------------------- */
+/* Card
+--------------------------*/
+/* Slider
+--------------------------*/
+/* Steps
+--------------------------*/
+/* Menu
+--------------------------*/
+/* Rate
+--------------------------*/
+/* DatePicker
+--------------------------*/
+/* Loading
+--------------------------*/
+/* Scrollbar
+--------------------------*/
+/* Carousel
+--------------------------*/
+/* Collapse
+--------------------------*/
+/* Transfer
+--------------------------*/
+/* Header
+  --------------------------*/
+/* Footer
+--------------------------*/
+/* Main
+--------------------------*/
+/* Timeline
+--------------------------*/
+/* Backtop
+--------------------------*/
+/* Link
+--------------------------*/
+/* Calendar
+--------------------------*/
+/* Form
+-------------------------- */
+/* Avatar
+--------------------------*/
+/* Break-point
+--------------------------*/
+/* Break-points
+ -------------------------- */
+/* Scrollbar
+ -------------------------- */
+/* Placeholder
+ -------------------------- */
+/* BEM
+ -------------------------- */
+._projectSettings_1mjy2_123 {
+  display: grid;
+  width: 100%;
+  justify-items: center;
+  grid-auto-rows: max-content;
+}
+._projectSettings_1mjy2_123 form {
+  width: 100%;
+  max-width: var(--content-container-width);
+  padding: 0 var(--spacing-2xl);
+}
+._projectSettings_1mjy2_123 form fieldset {
+  padding-bottom: var(--spacing-2xl);
+}
+._projectSettings_1mjy2_123 form fieldset label {
+  display: block;
+  margin-bottom: var(--spacing-xs);
+  font-size: var(--font-size-xl);
+}
+._header_1mjy2_143 {
+  width: 100%;
+  max-width: var(--content-container-width);
+  padding: var(--spacing-l) var(--spacing-2xl) 0;
+}
+._upgrade_1mjy2_149 {
+  cursor: pointer;
+}
+._buttons_1mjy2_153 {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+._project-name_1mjy2_159 {
+  display: flex;
+  gap: var(--spacing-2xs);
+  align-items: center;
+}
+._project-name_1mjy2_159 ._project-name-input_1mjy2_164 {
+  flex: 1;
+}

package/dist/assets/{ProjectSettings-BO2wFmU7.js → ProjectSettings-CXSvZq_1.js}

@@ -1,5 +1,5 @@
-import { d as defineComponent, fU as mergeModels, fV as useModel, r as ref, q as computed, c as openBlock, e as createBlock, w as withCtx, i as createVNode, k as createTextVNode, t as toDisplayString, l as unref, I as withModifiers, j as createBaseVNode, h as createElementBlock, hz as ProjectSharing, n as normalizeClass, f as createCommentVNode, g as useI18n, m as resolveComponent, _ as _export_sfc, a5 as usePageRedirectionHelper, u as useUsersStore, a1 as useProjectsStore, hZ as useRolesStore, aH as useCloudPlanStore, a as useToast, b as useRouter, a3 as useDocumentTitle, H as watch, ax as onBeforeMount, o as onMounted, h_ as N8nFormInput, F as Fragment, A as renderList, V as VIEWS, c6 as deepCopy, y as nextTick, ak as useTelemetry } from "./index-DYxqsGB9.js";
-import { P as ProjectHeader } from "./ProjectHeader-K-i88xtf.js";
+import { d as defineComponent, ho as mergeModels, hp as useModel, r as ref, q as computed, c as openBlock, e as createBlock, w as withCtx, i as createVNode, k as createTextVNode, t as toDisplayString, l as unref, I as withModifiers, j as createBaseVNode, h as createElementBlock, hD as ProjectSharing, n as normalizeClass, f as createCommentVNode, g as useI18n, m as resolveComponent, _ as _export_sfc, a5 as usePageRedirectionHelper, u as useUsersStore, a1 as useProjectsStore, i3 as useRolesStore, aH as useCloudPlanStore, a as useToast, b as useRouter, a3 as useDocumentTitle, i4 as getAllIconNames, H as watch, ax as onBeforeMount, o as onMounted, i5 as N8nFormInput, F as Fragment, A as renderList, V as VIEWS, b$ as deepCopy, y as nextTick, ak as useTelemetry } from "./index-D0W-rAl_.js";
+import { P as ProjectHeader } from "./ProjectHeader-D7XYidpZ.js";
 const _hoisted_1$2 = { class: "pt-l" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "ProjectDeleteDialog",
@@ -148,7 +148,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const operation = "_operation_1mn5e_1";
+const operation = "_operation_18zmn_123";
 const style0$1 = {
   operation
 };
@@ -262,6 +262,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "project:admin": i18n.baseText("projects.settings.role.admin")
     });
     const nameInput = ref(null);
+    const availableProjectIcons = getAllIconNames();
+    const projectIcon = ref({
+      type: "icon",
+      value: "layer-group"
+    });
     const usersList = computed(
       () => usersStore.allUsers.filter((user) => {
         const isAlreadySharedWithUser = (formData.value.relations || []).find(
@@ -366,31 +371,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
       }
     };
-    const onSubmit = async () => {
+    const updateProject = async () => {
+      if (!projectsStore.currentProject) {
+        return;
+      }
       try {
-        if (isDirty.value && projectsStore.currentProject) {
-          const diff = makeFormDataDiff();
-          await projectsStore.updateProject({
-            id: projectsStore.currentProject.id,
-            name: formData.value.name,
-            relations: formData.value.relations.map((r) => ({
-              userId: r.id,
-              role: r.role
-            }))
-          });
-          sendTelemetry(diff);
-          isDirty.value = false;
-          toast.showMessage({
-            title: i18n.baseText("projects.settings.save.successful.title", {
-              interpolate: { projectName: formData.value.name ?? "" }
-            }),
-            type: "success"
-          });
-        }
+        await projectsStore.updateProject({
+          id: projectsStore.currentProject.id,
+          name: formData.value.name,
+          icon: projectIcon.value,
+          relations: formData.value.relations.map((r) => ({
+            userId: r.id,
+            role: r.role
+          }))
+        });
+        isDirty.value = false;
       } catch (error) {
         toast.showError(error, i18n.baseText("projects.settings.save.error.title"));
       }
     };
+    const onSubmit = async () => {
+      if (!isDirty.value) {
+        return;
+      }
+      await updateProject();
+      const diff = makeFormDataDiff();
+      sendTelemetry(diff);
+      toast.showMessage({
+        title: i18n.baseText("projects.settings.save.successful.title", {
+          interpolate: { projectName: formData.value.name ?? "" }
+        }),
+        type: "success"
+      });
+    };
     const onDelete = async () => {
       await projectsStore.getAvailableProjects();
       dialogVisible.value = true;
@@ -419,6 +432,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         nameInput.value?.inputRef?.select();
       }
     };
+    const onIconUpdated = async () => {
+      await updateProject();
+      toast.showMessage({
+        title: i18n.baseText("projects.settings.icon.update.successful.title"),
+        type: "success"
+      });
+    };
     watch(
       () => projectsStore.currentProject,
       async () => {
@@ -426,6 +446,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         formData.value.relations = projectsStore.currentProject?.relations ? deepCopy(projectsStore.currentProject.relations) : [];
         await nextTick();
         selectProjectNameIfMatchesDefault();
+        if (projectsStore.currentProject?.icon) {
+          projectIcon.value = projectsStore.currentProject.icon;
+        }
       },
       { immediate: true }
     );
@@ -437,6 +460,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       selectProjectNameIfMatchesDefault();
     });
     return (_ctx, _cache) => {
+      const _component_N8nIconPicker = resolveComponent("N8nIconPicker");
       const _component_N8nIcon = resolveComponent("N8nIcon");
       const _component_N8nUserSelect = resolveComponent("N8nUserSelect");
       const _component_N8nOption = resolveComponent("N8nOption");
@@ -456,20 +480,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, [
           createBaseVNode("fieldset", null, [
             createBaseVNode("label", _hoisted_1, toDisplayString(unref(i18n).baseText("projects.settings.name")), 1),
-            createVNode(unref(N8nFormInput), {
-              id: "projectName",
-              ref_key: "nameInput",
-              ref: nameInput,
-              modelValue: formData.value.name,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formData.value.name = $event),
-              label: "",
-              type: "text",
-              name: "name",
-              required: "",
-              "data-test-id": "project-settings-name-input",
-              onInput: onNameInput,
-              onValidate: _cache[1] || (_cache[1] = ($event) => isValid.value = $event)
-            }, null, 8, ["modelValue"])
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style["project-name"])
+            }, [
+              createVNode(_component_N8nIconPicker, {
+                modelValue: projectIcon.value,
+                "onUpdate:modelValue": [
+                  _cache[0] || (_cache[0] = ($event) => projectIcon.value = $event),
+                  onIconUpdated
+                ],
+                "button-tooltip": unref(i18n).baseText("projects.settings.iconPicker.button.tooltip"),
+                "available-icons": unref(availableProjectIcons)
+              }, null, 8, ["modelValue", "button-tooltip", "available-icons"]),
+              createVNode(unref(N8nFormInput), {
+                id: "projectName",
+                ref_key: "nameInput",
+                ref: nameInput,
+                modelValue: formData.value.name,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => formData.value.name = $event),
+                label: "",
+                type: "text",
+                name: "name",
+                required: "",
+                "data-test-id": "project-settings-name-input",
+                class: normalizeClass(_ctx.$style["project-name-input"]),
+                onInput: onNameInput,
+                onValidate: _cache[2] || (_cache[2] = ($event) => isValid.value = $event)
+              }, null, 8, ["modelValue", "class"])
+            ], 2)
           ]),
           createBaseVNode("fieldset", null, [
             createBaseVNode("label", _hoisted_2, toDisplayString(unref(i18n).baseText("projects.settings.projectMembers")), 1),
@@ -518,7 +556,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             !role.licensed ? (openBlock(), createElementBlock("span", {
                               key: 0,
                               class: normalizeClass(_ctx.$style.upgrade),
-                              onClick: _cache[2] || (_cache[2] = ($event) => upgradeDialogVisible.value = true)
+                              onClick: _cache[3] || (_cache[3] = ($event) => upgradeDialogVisible.value = true)
                             }, "  - " + toDisplayString(unref(i18n).baseText("generic.upgrade")), 3)) : createCommentVNode("", true)
                           ]),
                           _: 2
@@ -571,10 +609,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, 8, ["disabled"])
           ], 2),
           createBaseVNode("fieldset", null, [
-            _cache[5] || (_cache[5] = createBaseVNode("hr", { class: "mb-2xl" }, null, -1)),
+            _cache[6] || (_cache[6] = createBaseVNode("hr", { class: "mb-2xl" }, null, -1)),
             createBaseVNode("h3", _hoisted_4, toDisplayString(unref(i18n).baseText("projects.settings.danger.title")), 1),
             createBaseVNode("small", null, toDisplayString(unref(i18n).baseText("projects.settings.danger.message")), 1),
-            _cache[6] || (_cache[6] = createBaseVNode("br", null, null, -1)),
+            _cache[7] || (_cache[7] = createBaseVNode("br", null, null, -1)),
             createVNode(_component_N8nButton, {
               type: "tertiary",
               "native-type": "button",
@@ -591,14 +629,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ], 32),
         createVNode(ProjectDeleteDialog, {
           modelValue: dialogVisible.value,
-          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => dialogVisible.value = $event),
+          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => dialogVisible.value = $event),
           "current-project": unref(projectsStore).currentProject,
           projects: projects.value,
           onConfirmDelete
         }, null, 8, ["modelValue", "current-project", "projects"]),
         createVNode(_sfc_main$1, {
           modelValue: upgradeDialogVisible.value,
-          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => upgradeDialogVisible.value = $event),
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => upgradeDialogVisible.value = $event),
           limit: unref(projectsStore).teamProjectsLimit,
           "plan-name": unref(cloudPlanStore).currentPlanData?.displayName
         }, null, 8, ["modelValue", "limit", "plan-name"])
@@ -606,15 +644,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const projectSettings = "_projectSettings_1pak5_1";
-const header = "_header_1pak5_21";
-const upgrade = "_upgrade_1pak5_27";
-const buttons = "_buttons_1pak5_31";
+const projectSettings = "_projectSettings_1mjy2_123";
+const header = "_header_1mjy2_143";
+const upgrade = "_upgrade_1mjy2_149";
+const buttons = "_buttons_1mjy2_153";
 const style0 = {
   projectSettings,
   header,
   upgrade,
-  buttons
+  buttons,
+  "project-name": "_project-name_1mjy2_159",
+  "project-name-input": "_project-name-input_1mjy2_164"
 };
 const cssModules = {
   "$style": style0

package/dist/assets/{PushConnectionTracker.vue_vue_type_script_setup_true_lang-a7Fc7Xy7.js → PushConnectionTracker.vue_vue_type_script_setup_true_lang-B8guxlKC.js}

@@ -1,4 +1,4 @@
-import { d as defineComponent, Z as useRootStore, q as computed, c as openBlock, h as createElementBlock, i as createVNode, w as withCtx, ay as withDirectives, l as unref, j as createBaseVNode, k as createTextVNode, t as toDisplayString, s as renderSlot, g as useI18n, m as resolveComponent, cW as resolveDirective } from "./index-DYxqsGB9.js";
+import { d as defineComponent, Z as useRootStore, q as computed, c as openBlock, h as createElementBlock, i as createVNode, w as withCtx, ay as withDirectives, l as unref, j as createBaseVNode, k as createTextVNode, t as toDisplayString, s as renderSlot, g as useI18n, m as resolveComponent, cO as resolveDirective } from "./index-D0W-rAl_.js";
 const _hoisted_1 = {
   key: 0,
   class: "push-connection-lost primary-color"

package/dist/assets/{ResourcesListLayout-CRrq5kQe.js → ResourcesListLayout-BhSNEyun.js}

@@ -1,6 +1,6 @@
-import { _ as _export_sfc, c as openBlock, h as createElementBlock, s as renderSlot, j as createBaseVNode, n as normalizeClass, d as defineComponent, f as createCommentVNode, r as ref, a1 as useProjectsStore, q as computed, H as watch, ax as onBeforeMount, e as createBlock, w as withCtx, i as createVNode, ay as withDirectives, az as vShow, k as createTextVNode, t as toDisplayString, l as unref, a8 as EnterpriseEditionFeature, hz as ProjectSharing, g as useI18n, m as resolveComponent, U as useRoute, J as useDebounce, u as useUsersStore, o as onMounted, y as nextTick, aV as normalizeProps, aW as guardReactiveProps, F as Fragment, A as renderList, ak as useTelemetry } from "./index-DYxqsGB9.js";
-const wrapper$1 = "_wrapper_a9xcf_1";
-const content = "_content_a9xcf_12";
+import { _ as _export_sfc, c as openBlock, h as createElementBlock, s as renderSlot, j as createBaseVNode, n as normalizeClass, d as defineComponent, f as createCommentVNode, r as ref, a1 as useProjectsStore, q as computed, H as watch, ax as onBeforeMount, e as createBlock, w as withCtx, i as createVNode, ay as withDirectives, az as vShow, k as createTextVNode, t as toDisplayString, l as unref, a8 as EnterpriseEditionFeature, hD as ProjectSharing, g as useI18n, m as resolveComponent, U as useRoute, J as useDebounce, u as useUsersStore, o as onMounted, y as nextTick, aY as normalizeProps, aZ as guardReactiveProps, F as Fragment, A as renderList, ak as useTelemetry } from "./index-D0W-rAl_.js";
+const wrapper$1 = "_wrapper_1x8n3_123";
+const content = "_content_1x8n3_139";
 const style0$3 = {
   wrapper: wrapper$1,
   content
@@ -51,10 +51,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const wrapper = "_wrapper_183my_1";
-const overflow = "_overflow_183my_6";
-const list = "_list_183my_6";
-const body = "_body_183my_6";
+const wrapper = "_wrapper_hn9dc_123";
+const overflow = "_overflow_hn9dc_128";
+const list = "_list_hn9dc_128";
+const body = "_body_hn9dc_128";
 const style0$2 = {
   wrapper,
   overflow,
@@ -143,17 +143,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           }, {
             default: withCtx(() => [
               withDirectives(createVNode(_component_n8n_badge, {
-                theme: "primary",
-                class: "mr-4xs"
+                class: normalizeClass(_ctx.$style["filter-button-count"]),
+                theme: "primary"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(filtersLength.value), 1)
                 ]),
                 _: 1
-              }, 512), [
+              }, 8, ["class"]), [
                 [vShow, filtersLength.value > 0]
               ]),
-              createTextVNode(" " + toDisplayString(unref(i18n).baseText("forms.resourceFiltersDropdown.filters")), 1)
+              createBaseVNode("span", {
+                class: normalizeClass(_ctx.$style["filter-button-text"])
+              }, toDisplayString(unref(i18n).baseText("forms.resourceFiltersDropdown.filters")), 3)
             ]),
             _: 1
           }, 8, ["active", "class"])
@@ -211,9 +213,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const style0$1 = {
-  "filter-button": "_filter-button_i7gly_1",
-  "filters-dropdown": "_filters-dropdown_i7gly_6",
-  "filters-dropdown-footer": "_filters-dropdown-footer_i7gly_10"
+  "filter-button": "_filter-button_1aonz_123",
+  "filter-button-count": "_filter-button-count_1aonz_127",
+  "filter-button-text": "_filter-button-text_1aonz_136",
+  "filters-dropdown": "_filters-dropdown_1aonz_144",
+  "filters-dropdown-footer": "_filters-dropdown-footer_1aonz_148"
 };
 const cssModules$1 = {
   "$style": style0$1
@@ -622,22 +626,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const filters = "_filters_eysnt_1";
-const search = "_search_eysnt_16";
-const listWrapper = "_listWrapper_eysnt_20";
-const datatable = "_datatable_eysnt_30";
+const filters = "_filters_12sb3_123";
+const search = "_search_12sb3_149";
+const listWrapper = "_listWrapper_12sb3_158";
+const datatable = "_datatable_12sb3_173";
 const style0 = {
-  "filters-row": "_filters-row_eysnt_1",
+  "filters-row": "_filters-row_12sb3_123",
   filters,
   search,
   listWrapper,
-  "sort-and-filter": "_sort-and-filter_eysnt_26",
+  "sort-and-filter": "_sort-and-filter_12sb3_164",
   datatable
 };
 const cssModules = {
   "$style": style0
 };
-const ResourcesListLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-90cdff4f"]]);
+const ResourcesListLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-0a75287f"]]);
 export {
   ResourcesListLayout as R
 };