@arpproject/recrate 0.1.25 → 0.1.26

package/dist/recrate.es.js

@@ -7927,9 +7927,9 @@ var CheckCircleFilled = function CheckCircleFilled2(props, ref) {
     icon: CheckCircleFilled$1
   }));
 };
-var RefIcon$y = /* @__PURE__ */ React.forwardRef(CheckCircleFilled);
+var RefIcon$z = /* @__PURE__ */ React.forwardRef(CheckCircleFilled);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$y.displayName = "CheckCircleFilled";
+  RefIcon$z.displayName = "CheckCircleFilled";
 }
 var CloseCircleFilled$1 = { "icon": { "tag": "svg", "attrs": { "fill-rule": "evenodd", "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" } }] }, "name": "close-circle", "theme": "filled" };
 var CloseCircleFilled = function CloseCircleFilled2(props, ref) {
@@ -7938,9 +7938,9 @@ var CloseCircleFilled = function CloseCircleFilled2(props, ref) {
     icon: CloseCircleFilled$1
   }));
 };
-var RefIcon$x = /* @__PURE__ */ React.forwardRef(CloseCircleFilled);
+var RefIcon$y = /* @__PURE__ */ React.forwardRef(CloseCircleFilled);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$x.displayName = "CloseCircleFilled";
+  RefIcon$y.displayName = "CloseCircleFilled";
 }
 var CloseOutlined$1 = { "icon": { "tag": "svg", "attrs": { "fill-rule": "evenodd", "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" } }] }, "name": "close", "theme": "outlined" };
 var CloseOutlined = function CloseOutlined2(props, ref) {
@@ -7949,9 +7949,9 @@ var CloseOutlined = function CloseOutlined2(props, ref) {
     icon: CloseOutlined$1
   }));
 };
-var RefIcon$w = /* @__PURE__ */ React.forwardRef(CloseOutlined);
+var RefIcon$x = /* @__PURE__ */ React.forwardRef(CloseOutlined);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$w.displayName = "CloseOutlined";
+  RefIcon$x.displayName = "CloseOutlined";
 }
 var ExclamationCircleFilled$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" } }] }, "name": "exclamation-circle", "theme": "filled" };
 var ExclamationCircleFilled = function ExclamationCircleFilled2(props, ref) {
@@ -7960,9 +7960,9 @@ var ExclamationCircleFilled = function ExclamationCircleFilled2(props, ref) {
     icon: ExclamationCircleFilled$1
   }));
 };
-var RefIcon$v = /* @__PURE__ */ React.forwardRef(ExclamationCircleFilled);
+var RefIcon$w = /* @__PURE__ */ React.forwardRef(ExclamationCircleFilled);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$v.displayName = "ExclamationCircleFilled";
+  RefIcon$w.displayName = "ExclamationCircleFilled";
 }
 var InfoCircleFilled$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" } }] }, "name": "info-circle", "theme": "filled" };
 var InfoCircleFilled = function InfoCircleFilled2(props, ref) {
@@ -7971,9 +7971,9 @@ var InfoCircleFilled = function InfoCircleFilled2(props, ref) {
     icon: InfoCircleFilled$1
   }));
 };
-var RefIcon$u = /* @__PURE__ */ React.forwardRef(InfoCircleFilled);
+var RefIcon$v = /* @__PURE__ */ React.forwardRef(InfoCircleFilled);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$u.displayName = "InfoCircleFilled";
+  RefIcon$v.displayName = "InfoCircleFilled";
 }
 var attributes = "accept acceptCharset accessKey action allowFullScreen allowTransparency\n    alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge\n    charSet checked classID className colSpan cols content contentEditable contextMenu\n    controls coords crossOrigin data dateTime default defer dir disabled download draggable\n    encType form formAction formEncType formMethod formNoValidate formTarget frameBorder\n    headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity\n    is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media\n    mediaGroup method min minLength multiple muted name noValidate nonce open\n    optimum pattern placeholder poster preload radioGroup readOnly rel required\n    reversed role rowSpan rows sandbox scope scoped scrolling seamless selected\n    shape size sizes span spellCheck src srcDoc srcLang srcSet start step style\n    summary tabIndex target title type useMap value width wmode wrap";
 var eventsName = "onCopy onCut onPaste onCompositionEnd onCompositionStart onCompositionUpdate onKeyDown\n    onKeyPress onKeyUp onFocus onBlur onChange onInput onSubmit onClick onContextMenu onDoubleClick\n    onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown\n    onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel\n    onTouchEnd onTouchMove onTouchStart onScroll onWheel onAbort onCanPlay onCanPlayThrough\n    onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata\n    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad onError";
@@ -8714,9 +8714,9 @@ var LoadingOutlined = function LoadingOutlined2(props, ref) {
     icon: LoadingOutlined$1
   }));
 };
-var RefIcon$t = /* @__PURE__ */ React.forwardRef(LoadingOutlined);
+var RefIcon$u = /* @__PURE__ */ React.forwardRef(LoadingOutlined);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$t.displayName = "LoadingOutlined";
+  RefIcon$u.displayName = "LoadingOutlined";
 }
 function mergeProps$1(...items) {
   const ret = {};
@@ -8775,7 +8775,7 @@ const useClosable = (propCloseCollection, contextCloseCollection, fallbackCloseC
   const [contextLocale] = useLocale$1("global", localeValues.global);
   const closeBtnIsDisabled = typeof propCloseConfig !== "boolean" ? !!(propCloseConfig === null || propCloseConfig === void 0 ? void 0 : propCloseConfig.disabled) : false;
   const mergedFallbackCloseCollection = React__default.useMemo(() => Object.assign({
-    closeIcon: /* @__PURE__ */ React__default.createElement(RefIcon$w, null)
+    closeIcon: /* @__PURE__ */ React__default.createElement(RefIcon$x, null)
   }, fallbackCloseCollection), [fallbackCloseCollection]);
   const mergedClosableConfig = React__default.useMemo(() => {
     if (propCloseConfig === false) {
@@ -9100,11 +9100,11 @@ const useStyle$u = genStyleHooks("Message", (token2) => {
   return t2;
 });
 const TypeIcon = {
-  info: /* @__PURE__ */ React.createElement(RefIcon$u, null),
-  success: /* @__PURE__ */ React.createElement(RefIcon$y, null),
-  error: /* @__PURE__ */ React.createElement(RefIcon$x, null),
-  warning: /* @__PURE__ */ React.createElement(RefIcon$v, null),
-  loading: /* @__PURE__ */ React.createElement(RefIcon$t, null)
+  info: /* @__PURE__ */ React.createElement(RefIcon$v, null),
+  success: /* @__PURE__ */ React.createElement(RefIcon$z, null),
+  error: /* @__PURE__ */ React.createElement(RefIcon$y, null),
+  warning: /* @__PURE__ */ React.createElement(RefIcon$w, null),
+  loading: /* @__PURE__ */ React.createElement(RefIcon$u, null)
 };
 const PureContent$1 = ({
   prefixCls,
@@ -9191,7 +9191,7 @@ const Holder$1 = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const getNotificationMotion = () => getMotion$3(prefixCls, transitionName);
   const mergedCloseIcon = /* @__PURE__ */ React.createElement("span", {
     className: `${prefixCls}-close-x`
-  }, /* @__PURE__ */ React.createElement(RefIcon$w, {
+  }, /* @__PURE__ */ React.createElement(RefIcon$x, {
     className: `${prefixCls}-close-icon`
   }));
   const [api2, holder] = useNotification$1({
@@ -10231,7 +10231,7 @@ const InnerLoadingIcon = /* @__PURE__ */ forwardRef((props, ref) => {
     className: mergedIconCls,
     style: style2,
     ref
-  }, /* @__PURE__ */ React__default.createElement(RefIcon$t, {
+  }, /* @__PURE__ */ React__default.createElement(RefIcon$u, {
     className: iconClassName
   }));
 });
@@ -10967,9 +10967,9 @@ var RightOutlined = function RightOutlined2(props, ref) {
     icon: RightOutlined$1
   }));
 };
-var RefIcon$s = /* @__PURE__ */ React.forwardRef(RightOutlined);
+var RefIcon$t = /* @__PURE__ */ React.forwardRef(RightOutlined);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$s.displayName = "RightOutlined";
+  RefIcon$t.displayName = "RightOutlined";
 }
 const genCollapseMotion = (token2) => ({
   [token2.componentCls]: {
@@ -17078,7 +17078,7 @@ const NormalOkBtn = () => {
 function renderCloseIcon(prefixCls, closeIcon) {
   return /* @__PURE__ */ React__default.createElement("span", {
     className: `${prefixCls}-close-x`
-  }, closeIcon || /* @__PURE__ */ React__default.createElement(RefIcon$w, {
+  }, closeIcon || /* @__PURE__ */ React__default.createElement(RefIcon$x, {
     className: `${prefixCls}-close-icon`
   }));
 }
@@ -17670,7 +17670,7 @@ const Modal = (props) => {
   })) : null;
   const [mergedClosable, mergedCloseIcon, closeBtnIsDisabled, ariaProps] = useClosable(pickClosable(props), pickClosable(modalContext), {
     closable: true,
-    closeIcon: /* @__PURE__ */ React.createElement(RefIcon$w, {
+    closeIcon: /* @__PURE__ */ React.createElement(RefIcon$x, {
       className: `${prefixCls}-close-icon`
     }),
     closeIconRender: (icon2) => renderCloseIcon(prefixCls, icon2)
@@ -17867,16 +17867,16 @@ const ConfirmContent = (props) => {
   if (!icon2 && icon2 !== null) {
     switch (type4) {
       case "info":
-        mergedIcon = /* @__PURE__ */ React.createElement(RefIcon$u, null);
+        mergedIcon = /* @__PURE__ */ React.createElement(RefIcon$v, null);
         break;
       case "success":
-        mergedIcon = /* @__PURE__ */ React.createElement(RefIcon$y, null);
+        mergedIcon = /* @__PURE__ */ React.createElement(RefIcon$z, null);
         break;
       case "error":
-        mergedIcon = /* @__PURE__ */ React.createElement(RefIcon$x, null);
+        mergedIcon = /* @__PURE__ */ React.createElement(RefIcon$y, null);
         break;
       default:
-        mergedIcon = /* @__PURE__ */ React.createElement(RefIcon$v, null);
+        mergedIcon = /* @__PURE__ */ React.createElement(RefIcon$w, null);
     }
   }
   const mergedOkCancel = okCancel !== null && okCancel !== void 0 ? okCancel : type4 === "confirm";
@@ -18640,15 +18640,15 @@ function getCloseIcon(prefixCls, closeIcon) {
   if (closeIcon === null || closeIcon === false) {
     return null;
   }
-  return closeIcon || /* @__PURE__ */ React.createElement(RefIcon$w, {
+  return closeIcon || /* @__PURE__ */ React.createElement(RefIcon$x, {
     className: `${prefixCls}-close-icon`
   });
 }
 const typeToIcon = {
-  success: RefIcon$y,
-  info: RefIcon$u,
-  error: RefIcon$x,
-  warning: RefIcon$v
+  success: RefIcon$z,
+  info: RefIcon$v,
+  error: RefIcon$y,
+  warning: RefIcon$w
 };
 const PureContent = (props) => {
   const {
@@ -25259,9 +25259,9 @@ var CheckOutlined = function CheckOutlined2(props, ref) {
     icon: CheckOutlined$1
   }));
 };
-var RefIcon$r = /* @__PURE__ */ React.forwardRef(CheckOutlined);
+var RefIcon$s = /* @__PURE__ */ React.forwardRef(CheckOutlined);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$r.displayName = "CheckOutlined";
+  RefIcon$s.displayName = "CheckOutlined";
 }
 var DownOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" } }] }, "name": "down", "theme": "outlined" };
 var DownOutlined = function DownOutlined2(props, ref) {
@@ -25270,9 +25270,9 @@ var DownOutlined = function DownOutlined2(props, ref) {
     icon: DownOutlined$1
   }));
 };
-var RefIcon$q = /* @__PURE__ */ React.forwardRef(DownOutlined);
+var RefIcon$r = /* @__PURE__ */ React.forwardRef(DownOutlined);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$q.displayName = "DownOutlined";
+  RefIcon$r.displayName = "DownOutlined";
 }
 var SearchOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" } }] }, "name": "search", "theme": "outlined" };
 var SearchOutlined = function SearchOutlined2(props, ref) {
@@ -25281,9 +25281,9 @@ var SearchOutlined = function SearchOutlined2(props, ref) {
     icon: SearchOutlined$1
   }));
 };
-var RefIcon$p = /* @__PURE__ */ React.forwardRef(SearchOutlined);
+var RefIcon$q = /* @__PURE__ */ React.forwardRef(SearchOutlined);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$p.displayName = "SearchOutlined";
+  RefIcon$q.displayName = "SearchOutlined";
 }
 function useIcons$1({
   suffixIcon,
@@ -25303,7 +25303,7 @@ function useIcons$1({
     const warning3 = devUseWarning(componentName);
     warning3.deprecated(!clearIcon, "clearIcon", "allowClear={{ clearIcon: React.ReactNode }}");
   }
-  const mergedClearIcon = clearIcon !== null && clearIcon !== void 0 ? clearIcon : /* @__PURE__ */ React.createElement(RefIcon$x, null);
+  const mergedClearIcon = clearIcon !== null && clearIcon !== void 0 ? clearIcon : /* @__PURE__ */ React.createElement(RefIcon$y, null);
   const getSuffixIconNode = (arrowIcon) => {
     if (suffixIcon === null && !hasFeedback && !showArrow) {
       return null;
@@ -25314,7 +25314,7 @@ function useIcons$1({
   if (suffixIcon !== void 0) {
     mergedSuffixIcon = getSuffixIconNode(suffixIcon);
   } else if (loading) {
-    mergedSuffixIcon = getSuffixIconNode(/* @__PURE__ */ React.createElement(RefIcon$t, {
+    mergedSuffixIcon = getSuffixIconNode(/* @__PURE__ */ React.createElement(RefIcon$u, {
       spin: true
     }));
   } else {
@@ -25324,11 +25324,11 @@ function useIcons$1({
       showSearch
     }) => {
       if (open && showSearch) {
-        return getSuffixIconNode(/* @__PURE__ */ React.createElement(RefIcon$p, {
+        return getSuffixIconNode(/* @__PURE__ */ React.createElement(RefIcon$q, {
           className: iconCls
         }));
       }
-      return getSuffixIconNode(/* @__PURE__ */ React.createElement(RefIcon$q, {
+      return getSuffixIconNode(/* @__PURE__ */ React.createElement(RefIcon$r, {
         className: iconCls
       }));
     };
@@ -25337,7 +25337,7 @@ function useIcons$1({
   if (menuItemSelectedIcon !== void 0) {
     mergedItemIcon = menuItemSelectedIcon;
   } else if (multiple) {
-    mergedItemIcon = /* @__PURE__ */ React.createElement(RefIcon$r, null);
+    mergedItemIcon = /* @__PURE__ */ React.createElement(RefIcon$s, null);
   } else {
     mergedItemIcon = null;
   }
@@ -25345,7 +25345,7 @@ function useIcons$1({
   if (removeIcon !== void 0) {
     mergedRemoveIcon = removeIcon;
   } else {
-    mergedRemoveIcon = /* @__PURE__ */ React.createElement(RefIcon$w, null);
+    mergedRemoveIcon = /* @__PURE__ */ React.createElement(RefIcon$x, null);
   }
   return {
     clearIcon: mergedClearIcon,
@@ -27672,9 +27672,9 @@ var LeftOutlined = function LeftOutlined2(props, ref) {
     icon: LeftOutlined$1
   }));
 };
-var RefIcon$o = /* @__PURE__ */ React.forwardRef(LeftOutlined);
+var RefIcon$p = /* @__PURE__ */ React.forwardRef(LeftOutlined);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$o.displayName = "LeftOutlined";
+  RefIcon$p.displayName = "LeftOutlined";
 }
 var ESC$1 = KeyCode.ESC, TAB = KeyCode.TAB;
 function useAccessibility$1(_ref) {
@@ -29263,9 +29263,9 @@ var EllipsisOutlined = function EllipsisOutlined2(props, ref) {
     icon: EllipsisOutlined$1
   }));
 };
-var RefIcon$n = /* @__PURE__ */ React.forwardRef(EllipsisOutlined);
+var RefIcon$o = /* @__PURE__ */ React.forwardRef(EllipsisOutlined);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$n.displayName = "EllipsisOutlined";
+  RefIcon$o.displayName = "EllipsisOutlined";
 }
 var dayjs_min$1 = { exports: {} };
 var dayjs_min = dayjs_min$1.exports;
@@ -37374,9 +37374,9 @@ var PlusOutlined = function PlusOutlined2(props, ref) {
     icon: PlusOutlined$1
   }));
 };
-var RefIcon$m = /* @__PURE__ */ React.forwardRef(PlusOutlined);
+var RefIcon$n = /* @__PURE__ */ React.forwardRef(PlusOutlined);
 if (process.env.NODE_ENV !== "production") {
-  RefIcon$m.displayName = "PlusOutlined";
+  RefIcon$n.displayName = "PlusOutlined";
 }
 const TabContext = /* @__PURE__ */ createContext(null);
 var useIndicator = function useIndicator2(options) {
@@ -39672,8 +39672,8 @@ const InternalTabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       }) => {
         onEdit === null || onEdit === void 0 ? void 0 : onEdit(editType === "add" ? event : key, editType);
       },
-      removeIcon: (_a2 = removeIcon !== null && removeIcon !== void 0 ? removeIcon : tabs === null || tabs === void 0 ? void 0 : tabs.removeIcon) !== null && _a2 !== void 0 ? _a2 : /* @__PURE__ */ React.createElement(RefIcon$w, null),
-      addIcon: (addIcon !== null && addIcon !== void 0 ? addIcon : tabs === null || tabs === void 0 ? void 0 : tabs.addIcon) || /* @__PURE__ */ React.createElement(RefIcon$m, null),
+      removeIcon: (_a2 = removeIcon !== null && removeIcon !== void 0 ? removeIcon : tabs === null || tabs === void 0 ? void 0 : tabs.removeIcon) !== null && _a2 !== void 0 ? _a2 : /* @__PURE__ */ React.createElement(RefIcon$x, null),
+      addIcon: (addIcon !== null && addIcon !== void 0 ? addIcon : tabs === null || tabs === void 0 ? void 0 : tabs.addIcon) || /* @__PURE__ */ React.createElement(RefIcon$n, null),
       showAdd: hideAdd !== true
     };
   }
@@ -39708,7 +39708,7 @@ const InternalTabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     style: mergedStyle,
     editable: editable2,
     more: Object.assign({
-      icon: (_l = (_k = (_j = (_h = tabs === null || tabs === void 0 ? void 0 : tabs.more) === null || _h === void 0 ? void 0 : _h.icon) !== null && _j !== void 0 ? _j : tabs === null || tabs === void 0 ? void 0 : tabs.moreIcon) !== null && _k !== void 0 ? _k : moreIcon) !== null && _l !== void 0 ? _l : /* @__PURE__ */ React.createElement(RefIcon$n, null),
+      icon: (_l = (_k = (_j = (_h = tabs === null || tabs === void 0 ? void 0 : tabs.more) === null || _h === void 0 ? void 0 : _h.icon) !== null && _j !== void 0 ? _j : tabs === null || tabs === void 0 ? void 0 : tabs.moreIcon) !== null && _k !== void 0 ? _k : moreIcon) !== null && _l !== void 0 ? _l : /* @__PURE__ */ React.createElement(RefIcon$o, null),
       transitionName: `${rootPrefixCls}-slide-up`
     }, more),
     prefixCls,
@@ -41217,6 +41217,17 @@ const Divider = (props) => {
 if (process.env.NODE_ENV !== "production") {
   Divider.displayName = "Divider";
 }
+var UpOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z" } }] }, "name": "up", "theme": "outlined" };
+var UpOutlined = function UpOutlined2(props, ref) {
+  return /* @__PURE__ */ React.createElement(Icon$2, _extends$1({}, props, {
+    ref,
+    icon: UpOutlined$1
+  }));
+};
+var RefIcon$m = /* @__PURE__ */ React.forwardRef(UpOutlined);
+if (process.env.NODE_ENV !== "production") {
+  RefIcon$m.displayName = "UpOutlined";
+}
 function hasAddon(props) {
   return !!(props.addonBefore || props.addonAfter);
 }
@@ -41575,7 +41586,7 @@ const getAllowClear = (allowClear) => {
     mergedAllowClear = allowClear;
   } else if (allowClear) {
     mergedAllowClear = {
-      clearIcon: /* @__PURE__ */ React__default.createElement(RefIcon$x, null)
+      clearIcon: /* @__PURE__ */ React__default.createElement(RefIcon$y, null)
     };
   }
   return mergedAllowClear;
@@ -44587,10 +44598,10 @@ const FormItemLabel = ({
   }, labelChildren));
 };
 const iconMap = {
-  success: RefIcon$y,
-  warning: RefIcon$v,
-  error: RefIcon$x,
-  validating: RefIcon$t
+  success: RefIcon$z,
+  warning: RefIcon$w,
+  error: RefIcon$y,
+  validating: RefIcon$u
 };
 function StatusProvider({
   children,
@@ -45607,7 +45618,7 @@ const Search = /* @__PURE__ */ React.forwardRef((props, ref) => {
     customOnPressEnter === null || customOnPressEnter === void 0 ? void 0 : customOnPressEnter(e3);
     onSearch(e3);
   };
-  const searchIcon = typeof enterButton === "boolean" ? /* @__PURE__ */ React.createElement(RefIcon$p, null) : null;
+  const searchIcon = typeof enterButton === "boolean" ? /* @__PURE__ */ React.createElement(RefIcon$q, null) : null;
   const btnClassName = `${prefixCls}-button`;
   let button;
   const enterButtonAsElement = enterButton || {};
@@ -47521,12 +47532,12 @@ const Pagination2 = (props) => {
       className: `${prefixCls}-item-link`,
       type: "button",
       tabIndex: -1
-    }, direction === "rtl" ? /* @__PURE__ */ React.createElement(RefIcon$s, null) : /* @__PURE__ */ React.createElement(RefIcon$o, null));
+    }, direction === "rtl" ? /* @__PURE__ */ React.createElement(RefIcon$t, null) : /* @__PURE__ */ React.createElement(RefIcon$p, null));
     const nextIcon = /* @__PURE__ */ React.createElement("button", {
       className: `${prefixCls}-item-link`,
       type: "button",
       tabIndex: -1
-    }, direction === "rtl" ? /* @__PURE__ */ React.createElement(RefIcon$o, null) : /* @__PURE__ */ React.createElement(RefIcon$s, null));
+    }, direction === "rtl" ? /* @__PURE__ */ React.createElement(RefIcon$p, null) : /* @__PURE__ */ React.createElement(RefIcon$t, null));
     const jumpPrevIcon = (
       // biome-ignore lint/a11y/useValidAnchor: it is hard to refactor
       /* @__PURE__ */ React.createElement("a", {
@@ -47986,7 +47997,7 @@ const InternalSwitch = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const prefixCls = getPrefixCls("switch", customizePrefixCls);
   const loadingIcon = /* @__PURE__ */ React.createElement("div", {
     className: `${prefixCls}-handle`
-  }, loading && /* @__PURE__ */ React.createElement(RefIcon$t, {
+  }, loading && /* @__PURE__ */ React.createElement(RefIcon$u, {
     className: `${prefixCls}-loading-icon`
   }));
   const [wrapCSSVar, hashId, cssVarCls] = useStyle$2(prefixCls);
@@ -49122,7 +49133,7 @@ const CopyBtn = ({
     onClick: onCopy,
     "aria-label": ariaLabel,
     tabIndex
-  }, copied ? getNode(iconNodes[1], /* @__PURE__ */ React.createElement(RefIcon$r, null), true) : getNode(iconNodes[0], btnLoading ? /* @__PURE__ */ React.createElement(RefIcon$t, null) : /* @__PURE__ */ React.createElement(RefIcon$a, null), true)));
+  }, copied ? getNode(iconNodes[1], /* @__PURE__ */ React.createElement(RefIcon$s, null), true) : getNode(iconNodes[0], btnLoading ? /* @__PURE__ */ React.createElement(RefIcon$u, null) : /* @__PURE__ */ React.createElement(RefIcon$a, null), true)));
 };
 const MeasureText = /* @__PURE__ */ React.forwardRef(({
   style: style2,
@@ -60049,7 +60060,7 @@ const Text$2 = ({
           color: "green",
           size: "middle",
           danger: !isValidTextValue,
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$r, {})
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$s, {})
         }
       )
     ] }),
@@ -67987,7 +67998,7 @@ const NumberComponent = ({
           color: "green",
           size: "middle",
           disabled: !isValidNumber || !isValidConstraints,
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$r, {})
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$s, {})
         }
       )
     ] }),
@@ -68125,7 +68136,7 @@ const Url = ({
           color: "green",
           size: "middle",
           danger: !isValidUrl,
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$r, {})
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$s, {})
         }
       )
     ] }),
@@ -79852,7 +79863,8 @@ const PaginateLinkedEntities = ({
   readonly = false,
   className = "",
   onLoadEntity,
-  onUnlinkEntity
+  onUnlinkEntity,
+  onPageChange
 }) => {
   var _a2, _b;
   const { t: t2 } = useTranslation();
@@ -79903,6 +79915,10 @@ const PaginateLinkedEntities = ({
   useEffect(() => {
     filterAndChunkEntitiesForDisplay();
   }, [filter2, currentPage]);
+  const handlePageChange = (page) => {
+    onPageChange == null ? void 0 : onPageChange();
+    setCurrentPage(page);
+  };
   const handleFilterChange = (event) => {
     setFilter(event.target.value);
   };
@@ -79913,7 +79929,7 @@ const PaginateLinkedEntities = ({
         current: currentPage,
         pageSize,
         total,
-        onChange: setCurrentPage,
+        onChange: handlePageChange,
         showSizeChanger: false,
         hideOnSinglePage: true,
         showTotal: (total2) => t2("pagination_total", { total: total2 })
@@ -79947,7 +79963,7 @@ const PaginateLinkedEntities = ({
         current: currentPage,
         pageSize,
         total,
-        onChange: setCurrentPage,
+        onChange: handlePageChange,
         showSizeChanger: false,
         hideOnSinglePage: true,
         showTotal: (total2) => t2("pagination_total", { total: total2 })
@@ -80014,7 +80030,7 @@ const AddControl = ({
         type: "primary",
         size: "middle",
         className: "focus:outline-none focus:border-2 focus:border-green-600",
-        icon: !selectedType || selectedType !== type4 ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$m, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$w, {}),
+        icon: !selectedType || selectedType !== type4 ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$n, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$x, {}),
         children: [
           " ",
           getTypeLabelFromProfile(type4)
@@ -80028,7 +80044,7 @@ const AddControl = ({
         type: "primary",
         size: "middle",
         className: "focus:outline-none focus:border-2 focus:border-green-600",
-        icon: !selectedType || selectedType !== "bulkAdd" ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$1, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$w, {}),
+        icon: !selectedType || selectedType !== "bulkAdd" ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$1, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$x, {}),
         children: "  Bulk Add"
       }
     ) })
@@ -81176,7 +81192,7 @@ const AutoComplete = ({ type: type4, onLinkEntity, onCreateEntity }) => {
           variant: "solid",
           color: "green",
           block: true,
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$m, {}),
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$n, {}),
           children: [
             t2("create_new_of_type", { type: entity["@type"] }),
             ": ",
@@ -81323,7 +81339,7 @@ const BulkAdd = ({ types: types2, primitives, onCreateEntity }) => {
         {
           type: "primary",
           onClick: addRow,
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$m, {}),
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$n, {}),
           children: "Add row"
         }
       ),
@@ -81576,6 +81592,7 @@ const EntityProperty = ({
   const profileManager = useContext(ProfileManagerContext);
   const crateManager = useContext(CrateManagerContext);
   const state = useStateStore();
+  const propertyRef = useRef(null);
   const propertyDefinition = (_a2 = profileManager == null ? void 0 : profileManager.getPropertyDefinition({
     property,
     entity
@@ -81603,9 +81620,17 @@ const EntityProperty = ({
       ["value.@id"]
     );
   }, [values]);
+  const scrollToPropertyTop = useCallback(() => {
+    var _a3;
+    (_a3 = propertyRef.current) == null ? void 0 : _a3.scrollIntoView({
+      block: "start",
+      behavior: "auto"
+    });
+  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
+      ref: propertyRef,
       className: `flex flex-row flex-grow p-2 describo-property-background ${highlightRequired && isRequired && !isValid ? "bg-red-200" : ""} ${savedProperty ? "bg-green-100 transition-colors duration-1000" : ""} describo-property describo-property-name-${property}`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-32 w-1/3 xl:w-1/5 flex flex-col describo-property-heading", children: [
@@ -81661,7 +81686,8 @@ const EntityProperty = ({
               property,
               readonly: propertyDefinition == null ? void 0 : propertyDefinition.readonly,
               onLoadEntity,
-              onUnlinkEntity
+              onUnlinkEntity,
+              onPageChange: scrollToPropertyTop
             }
           ),
           showAddControl && !((_b = state.configuration) == null ? void 0 : _b.readonly) && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -81691,26 +81717,49 @@ const DialogAddProperty = ({
   const { t: t2 } = useTranslation();
   const profileManager = useContext(ProfileManagerContext);
   const [filter2, setFilter] = useState("");
+  const [selectedPropertyName, setSelectedPropertyName] = useState(null);
+  useEffect(() => {
+    if (open) {
+      setSelectedPropertyName(null);
+    }
+  }, [open]);
   const inputs = React__default.useMemo(() => {
     if (!(entity == null ? void 0 : entity["@type"])) return [];
     const { inputs: inputs2 } = profileManager.getAllInputs({ entity });
     if (!filter2) return inputs2;
+    const query = filter2.toLowerCase();
     return inputs2.filter((i) => {
-      var _a2, _b;
-      const re2 = new RegExp(filter2, "i");
-      return ((_a2 = i == null ? void 0 : i.name) == null ? void 0 : _a2.match(re2)) || ((_b = i == null ? void 0 : i.help) == null ? void 0 : _b.match(re2));
+      return String((i == null ? void 0 : i.name) || "").toLowerCase().includes(query) || String((i == null ? void 0 : i.help) || "").toLowerCase().includes(query);
     });
   }, [entity, filter2, profileManager]);
   const handlePropertySelection = (item) => {
-    onAddPropertyPlaceholder(item.name);
+    if (!(item == null ? void 0 : item.name) || selectedPropertyName === item.name) return;
+    setSelectedPropertyName(item.name);
+    window.setTimeout(() => {
+      onAddPropertyPlaceholder(item.name);
+      onClose();
+    }, 120);
+  };
+  const handlePropertyKeyDown = (event, item) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    handlePropertySelection(item);
+  };
+  const handleDrawerClose = () => {
+    setSelectedPropertyName(null);
     onClose();
   };
+  const renderPropertyType = (type4) => {
+    if (Array.isArray(type4)) return type4.join(", ");
+    return type4 || "";
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Drawer2,
     {
-      title: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Title, { className: "m-2", level: 4, children: t2("add_properties_to_this_entity") || "Add properties to this entity" }),
+      rootClassName: "describo-add-property-drawer",
+      title: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Title, { className: "describo-add-property-title", level: 4, children: t2("add_properties_to_this_entity") || "Add properties to this entity" }),
       placement: "left",
-      onClose,
+      onClose: handleDrawerClose,
       open,
       width: 600,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { vertical: true, className: "h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { vertical: true, gap: 16, className: "overflow-auto flex-grow", children: [
@@ -81726,22 +81775,30 @@ const DialogAddProperty = ({
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { type: "primary", size: "middle", children: t2("search") || "Search" })
         ] }),
-        inputs.map((item, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: "cursor-pointer p-2 hover:bg-blue-100 hover:rounded active:bg-blue-400",
-            onClick: () => handlePropertySelection(item),
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { vertical: true, className: "text-black", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { align: "center", gap: 4, className: "border-b border-gray-700", children: [
-                item.label ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { className: "text-nowrap", children: item.label }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { className: "text-black", children: item.name }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$7, {}),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { className: "text-balance", children: Array.isArray(item.type) ? item.type.join(", ") : item.type || "" })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { type: "secondary", className: "w-full", children: item.help })
-            ] })
-          },
-          idx
-        ))
+        inputs.map((item, idx) => {
+          const isSelected = selectedPropertyName === item.name;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: `describo-add-property-row ${isSelected ? "describo-add-property-row-selected" : ""}`,
+              role: "button",
+              tabIndex: 0,
+              "aria-pressed": isSelected,
+              onClick: () => handlePropertySelection(item),
+              onKeyDown: (event) => handlePropertyKeyDown(event, item),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { vertical: true, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { align: "center", gap: 6, className: "describo-add-property-row-header", children: [
+                  item.label ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { className: "describo-add-property-row-name", children: item.label }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { className: "describo-add-property-row-name", children: item.name }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$7, {}),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { className: "describo-add-property-row-type", children: renderPropertyType(item.type) }),
+                  isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$s, { className: "describo-add-property-row-check" })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { type: "secondary", className: "describo-add-property-row-help", children: item.help })
+              ] })
+            },
+            `${item.name}-${idx}`
+          );
+        })
       ] }) })
     }
   );
@@ -106842,7 +106899,7 @@ const RenderControls = ({
       {
         onClick: () => toggle("addProperty"),
         type: "primary",
-        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$m, {}),
+        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$n, {}),
         children: t2("add_label")
       }
     ),
@@ -110642,8 +110699,56 @@ xe.displayName = "Allotment";
 var Ve = Object.assign(xe, {
   Pane: Ie
 });
+const getProfileTabKey = (tab) => String((tab == null ? void 0 : tab.profileUrl) || (tab == null ? void 0 : tab.name) || "");
+const isProfileTab = (tab) => {
+  const name2 = String((tab == null ? void 0 : tab.name) || "").toLowerCase();
+  const label = String((tab == null ? void 0 : tab.label) || (tab == null ? void 0 : tab.name) || "").toLowerCase();
+  return !["about", "overflow", "other"].includes(name2) && !["about", "other"].includes(label);
+};
+const findAddedProfileTab = (tabs, previousTabKeys) => {
+  const profileTabs = tabs.filter(isProfileTab);
+  return profileTabs.find((tab) => !previousTabKeys.has(getProfileTabKey(tab))) ?? profileTabs[profileTabs.length - 1];
+};
+const findTabForProperty = (tabs, property) => tabs.find((tab) => {
+  var _a2;
+  return (_a2 = tab == null ? void 0 : tab.inputs) == null ? void 0 : _a2.some((input) => (input == null ? void 0 : input.name) === property);
+}) ?? tabs.find((tab) => ["overflow", "other"].includes(String((tab == null ? void 0 : tab.name) || "").toLowerCase()));
+const getPendingAddedProfileStorageKey = (entityId) => `recrate.pending-added-profile-tab.${entityId}`;
+const readPendingAddedProfileTabKeys = (entityId) => {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(getPendingAddedProfileStorageKey(entityId));
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    const requestedAt = Number(parsed == null ? void 0 : parsed.requestedAt) || 0;
+    if (requestedAt && Date.now() - requestedAt > 10 * 60 * 1e3) {
+      clearPendingAddedProfileTabKeys(entityId);
+      return null;
+    }
+    return Array.isArray(parsed == null ? void 0 : parsed.tabKeys) ? parsed.tabKeys : null;
+  } catch {
+    return null;
+  }
+};
+const writePendingAddedProfileTabKeys = (entityId, tabKeys) => {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(
+      getPendingAddedProfileStorageKey(entityId),
+      JSON.stringify({ tabKeys, requestedAt: Date.now() })
+    );
+  } catch {
+  }
+};
+const clearPendingAddedProfileTabKeys = (entityId) => {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.removeItem(getPendingAddedProfileStorageKey(entityId));
+  } catch {
+  }
+};
 const RenderEntity = forwardRef((props, ref) => {
-  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k;
   const { entity, onLoadEntity, onSaveCrate, onSaveEntityTemplate, onWarning, onError, onAddNewProfileRequest, onRemoveProfile } = props;
   const state = useStateStore();
   const profileManager = useContext(ProfileManagerContext);
@@ -110668,7 +110773,7 @@ const RenderEntity = forwardRef((props, ref) => {
   }, []);
   const [tabPaneWidth, setTabPaneWidth] = useState(initialTabPaneWidth);
   const persistTabWidth = useMemo$1(() => debounce((w2) => {
-    const minClamp = iconView ? 70 : 100;
+    const minClamp = iconView ? 80 : 100;
     const maxClamp = 250;
     const clamped = Math.max(minClamp, Math.min(maxClamp, Math.round(w2)));
     localStorage.setItem("recrate.verticalTabWidth", String(clamped));
@@ -110677,10 +110782,14 @@ const RenderEntity = forwardRef((props, ref) => {
   const [scrollRestoreNonce, setScrollRestoreNonce] = useState(0);
   const contentContainerRef = useRef(null);
   const activeContentRef = useRef(null);
+  const tabRailListRef = useRef(null);
   const editorPanelRef = useRef(null);
   const navigationRestoreReadyRef = useRef(false);
   const pendingRestoredTabRef = useRef(null);
   const restoreInProgressRef = useRef(false);
+  const pendingAddedProfileSelectionRef = useRef(null);
+  const pendingAddedPropertyRef = useRef(null);
+  const [tabRailScrollState, setTabRailScrollState] = useState({ canScrollUp: false, canScrollDown: false });
   const debugScroll = (...args) => console.log("[recrate-scroll-debug]", ...args);
   const getVisibleContextMarkers = (selector, dataAttribute) => {
     const source = activeContentRef.current;
@@ -110781,6 +110890,33 @@ const RenderEntity = forwardRef((props, ref) => {
       window.clearTimeout(delayedMeasure);
     };
   }, [computeScrollViewportHeight, activeTab, renderTabs, tabs.length, contextEntity == null ? void 0 : contextEntity["@id"], reverseSidebarVisible]);
+  const updateTabRailScrollState = () => {
+    const list = tabRailListRef.current;
+    if (!list) {
+      setTabRailScrollState({ canScrollUp: false, canScrollDown: false });
+      return;
+    }
+    const maxScrollTop = Math.max(0, list.scrollHeight - list.clientHeight);
+    const nextState = {
+      canScrollUp: list.scrollTop > 2,
+      canScrollDown: list.scrollTop < maxScrollTop - 2
+    };
+    setTabRailScrollState((previousState) => previousState.canScrollUp === nextState.canScrollUp && previousState.canScrollDown === nextState.canScrollDown ? previousState : nextState);
+  };
+  useEffect(() => {
+    const list = tabRailListRef.current;
+    if (!list || !renderTabs) return;
+    const activeTabElement = list.querySelector('[aria-selected="true"]');
+    activeTabElement == null ? void 0 : activeTabElement.scrollIntoView({ block: "nearest" });
+    updateTabRailScrollState();
+    const resizeObserver2 = new ResizeObserver(updateTabRailScrollState);
+    resizeObserver2.observe(list);
+    const frame = requestAnimationFrame(updateTabRailScrollState);
+    return () => {
+      resizeObserver2.disconnect();
+      cancelAnimationFrame(frame);
+    };
+  }, [activeTab, iconView, renderTabs, scrollViewportHeight, tabPaneWidth, tabs.length]);
   useImperativeHandle(ref, () => ({
     setTab: (tabName) => {
       setActiveTab(tabName);
@@ -110790,7 +110926,14 @@ const RenderEntity = forwardRef((props, ref) => {
     }
   }));
   useEffect(() => {
+    var _a3, _b2;
     navigationRestoreReadyRef.current = false;
+    if (((_a3 = pendingAddedProfileSelectionRef.current) == null ? void 0 : _a3.entityId) !== (entity == null ? void 0 : entity["@id"])) {
+      pendingAddedProfileSelectionRef.current = null;
+    }
+    if (((_b2 = pendingAddedPropertyRef.current) == null ? void 0 : _b2.entityId) !== (entity == null ? void 0 : entity["@id"])) {
+      pendingAddedPropertyRef.current = null;
+    }
     if ((contextEntity == null ? void 0 : contextEntity["@id"]) && (entity == null ? void 0 : entity["@id"]) && contextEntity["@id"] !== entity["@id"]) {
       captureViewContext(activeTab);
     }
@@ -110803,8 +110946,8 @@ const RenderEntity = forwardRef((props, ref) => {
       init2({ entity: entityObj });
     }
   }, [profileManager == null ? void 0 : profileManager.$key]);
-  const init2 = ({ entity: entity2 }) => {
-    var _a3, _b2, _c2, _d2, _e3;
+  const init2 = ({ entity: entity2, extraPropertiesOverride }) => {
+    var _a3, _b2, _c2, _d2, _e3, _f2;
     if (!entity2["@id"]) return;
     const latestEntry = state.editorState.latest();
     const isCurrentHistoryEntity = (latestEntry == null ? void 0 : latestEntry.id) === entity2["@id"];
@@ -110812,7 +110955,7 @@ const RenderEntity = forwardRef((props, ref) => {
       configuration: state.configuration,
       profileManager,
       entity: entity2,
-      extraProperties
+      extraProperties: extraPropertiesOverride ?? extraProperties
     });
     setContextEntity(layout.entity);
     setRenderTabs(layout.renderTabs);
@@ -110822,6 +110965,53 @@ const RenderEntity = forwardRef((props, ref) => {
     const tabNames = layout.tabs.map((tab) => tab.name);
     const fallbackTab = tabNames.includes("about") ? "about" : tabNames[0] ?? "about";
     const restoredTab = layout.renderTabs && (navState == null ? void 0 : navState.activeTab) && tabNames.includes(navState.activeTab) ? navState.activeTab : fallbackTab;
+    const pendingAddedProfileSelection = pendingAddedProfileSelectionRef.current;
+    const pendingAddedProfileTabKeys = Array.isArray((_a3 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _a3.pendingAddedProfileTabKeys) ? navState.uiState.pendingAddedProfileTabKeys : readPendingAddedProfileTabKeys(entity2["@id"]);
+    let nextActiveTab = restoredTab;
+    if (layout.renderTabs && pendingAddedProfileSelection && pendingAddedProfileSelection.entityId === entity2["@id"]) {
+      const previousTabKeys = new Set(pendingAddedProfileSelection.tabKeys);
+      const addedProfileTab = findAddedProfileTab(layout.tabs, previousTabKeys);
+      if (addedProfileTab == null ? void 0 : addedProfileTab.name) {
+        nextActiveTab = addedProfileTab.name;
+        pendingAddedProfileSelectionRef.current = null;
+        clearPendingAddedProfileTabKeys(entity2["@id"]);
+      }
+    }
+    if (layout.renderTabs && pendingAddedProfileTabKeys) {
+      const previousTabKeys = new Set(pendingAddedProfileTabKeys);
+      const addedProfileTab = findAddedProfileTab(layout.tabs, previousTabKeys);
+      if (addedProfileTab == null ? void 0 : addedProfileTab.name) {
+        nextActiveTab = addedProfileTab.name;
+        pendingAddedProfileSelectionRef.current = null;
+        clearPendingAddedProfileTabKeys(entity2["@id"]);
+        const clearPendingSelection = {
+          uiState: {
+            pendingAddedProfileTabKeys: void 0,
+            pendingAddedProfileRequestedAt: void 0
+          }
+        };
+        if (isCurrentHistoryEntity) {
+          state.editorState.updateNavigationState(clearPendingSelection);
+        } else {
+          state.editorState.updateNavigationStateForId(entity2["@id"], clearPendingSelection);
+        }
+      }
+    }
+    const pendingAddedProperty = pendingAddedPropertyRef.current;
+    let willScrollToAddedProperty = false;
+    if (pendingAddedProperty && pendingAddedProperty.entityId === entity2["@id"]) {
+      const propertyTab = layout.renderTabs ? findTabForProperty(layout.tabs, pendingAddedProperty.property) : null;
+      if (propertyTab == null ? void 0 : propertyTab.name) {
+        nextActiveTab = propertyTab.name;
+        pendingAddedPropertyRef.current = {
+          ...pendingAddedProperty,
+          tabName: propertyTab.name
+        };
+        willScrollToAddedProperty = true;
+      } else if (!layout.renderTabs) {
+        willScrollToAddedProperty = true;
+      }
+    }
     debugScroll("init", {
       entityId: entity2["@id"],
       latestId: latestEntry == null ? void 0 : latestEntry.id,
@@ -110829,21 +111019,25 @@ const RenderEntity = forwardRef((props, ref) => {
       renderTabs: layout.renderTabs,
       tabNames,
       restoredTab,
+      nextActiveTab,
       navState
     });
-    pendingRestoredTabRef.current = restoredTab;
-    setActiveTab(restoredTab);
-    if (typeof ((_a3 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _a3.showAddPanel) === "boolean") setShowAddPanel(navState.uiState.showAddPanel);
-    if (typeof ((_b2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _b2.reverseSidebarVisible) === "boolean") setReverseSidebarVisible(navState.uiState.reverseSidebarVisible);
-    if (typeof ((_c2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _c2.highlightRequiredProperties) === "boolean") setHighlightRequiredProperties(navState.uiState.highlightRequiredProperties);
-    if (typeof ((_d2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _d2.iconView) === "boolean") setIconView(navState.uiState.iconView);
-    if (typeof ((_e3 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _e3.tabPaneWidth) === "number") setTabPaneWidth(navState.uiState.tabPaneWidth);
+    pendingRestoredTabRef.current = willScrollToAddedProperty ? null : nextActiveTab;
+    setActiveTab(nextActiveTab);
+    if (typeof ((_b2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _b2.showAddPanel) === "boolean") setShowAddPanel(navState.uiState.showAddPanel);
+    if (typeof ((_c2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _c2.reverseSidebarVisible) === "boolean") setReverseSidebarVisible(navState.uiState.reverseSidebarVisible);
+    if (typeof ((_d2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _d2.highlightRequiredProperties) === "boolean") setHighlightRequiredProperties(navState.uiState.highlightRequiredProperties);
+    if (typeof ((_e3 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _e3.iconView) === "boolean") setIconView(navState.uiState.iconView);
+    if (typeof ((_f2 = navState == null ? void 0 : navState.uiState) == null ? void 0 : _f2.tabPaneWidth) === "number") setTabPaneWidth(navState.uiState.tabPaneWidth);
     if (isCurrentHistoryEntity) {
       if (layout.renderTabs) {
-        state.editorState.update({ id: entity2["@id"], tab: restoredTab });
+        state.editorState.update({ id: entity2["@id"], tab: nextActiveTab });
+        state.editorState.updateNavigationState({ activeTab: nextActiveTab });
       } else {
         state.editorState.deleteFromState({ property: "tab" });
       }
+    } else if (layout.renderTabs) {
+      state.editorState.updateNavigationStateForId(entity2["@id"], { activeTab: nextActiveTab });
     }
   };
   const refresh = () => {
@@ -110875,12 +111069,13 @@ const RenderEntity = forwardRef((props, ref) => {
     }
   }, [extraProperties]);
   useEffect(() => {
-    var _a3, _b2, _c2;
+    var _a3, _b2, _c2, _d2;
     if (!navigationRestoreReadyRef.current) return;
     if (!(contextEntity == null ? void 0 : contextEntity["@id"])) return;
+    if (((_a3 = pendingAddedPropertyRef.current) == null ? void 0 : _a3.entityId) === contextEntity["@id"]) return;
     const viewport = activeContentRef.current;
     if (!viewport) return;
-    const restoreTarget = ((_c2 = (_b2 = (_a3 = state.editorState.getNavigationState(contextEntity["@id"])) == null ? void 0 : _a3.tabStates) == null ? void 0 : _b2[activeTab]) == null ? void 0 : _c2.scrollTop) ?? 0;
+    const restoreTarget = ((_d2 = (_c2 = (_b2 = state.editorState.getNavigationState(contextEntity["@id"])) == null ? void 0 : _b2.tabStates) == null ? void 0 : _c2[activeTab]) == null ? void 0 : _d2.scrollTop) ?? 0;
     debugScroll("restore.start", {
       entityId: contextEntity["@id"],
       activeTab,
@@ -110955,8 +111150,10 @@ const RenderEntity = forwardRef((props, ref) => {
     };
   }, [activeTab, contextEntity == null ? void 0 : contextEntity["@id"], renderTabs, tabs.length, scrollRestoreNonce]);
   useEffect(() => {
+    var _a3;
     const pendingTab = pendingRestoredTabRef.current;
     if (!(contextEntity == null ? void 0 : contextEntity["@id"])) return;
+    if (((_a3 = pendingAddedPropertyRef.current) == null ? void 0 : _a3.entityId) === contextEntity["@id"]) return;
     if (pendingTab) {
       debugScroll("restore.pending-tab", {
         entityId: contextEntity["@id"],
@@ -110975,18 +111172,112 @@ const RenderEntity = forwardRef((props, ref) => {
     if (!navigationRestoreReadyRef.current) return;
     captureViewContext(activeTab);
   }, [activeTab, showAddPanel, reverseSidebarVisible, highlightRequiredProperties, iconView, tabPaneWidth, contextEntity == null ? void 0 : contextEntity["@id"]]);
+  useEffect(() => {
+    const pendingAddedProperty = pendingAddedPropertyRef.current;
+    if (!pendingAddedProperty || pendingAddedProperty.entityId !== (contextEntity == null ? void 0 : contextEntity["@id"])) return;
+    if (pendingAddedProperty.tabName && pendingAddedProperty.tabName !== activeTab) return;
+    let cancelled = false;
+    let attempts = 0;
+    let timerId = 0;
+    let rafId = 0;
+    const maxAttempts = 30;
+    const finishAddedPropertyScroll = (viewport) => {
+      navigationRestoreReadyRef.current = true;
+      pendingAddedPropertyRef.current = null;
+      captureViewContext(activeTab, viewport == null ? void 0 : viewport.scrollTop);
+      setScrollRestoreNonce((prev2) => prev2 + 1);
+    };
+    const scheduleRetry = () => {
+      if (attempts < maxAttempts) {
+        timerId = window.setTimeout(() => {
+          rafId = window.requestAnimationFrame(scrollToAddedProperty);
+        }, 50);
+        return;
+      }
+      finishAddedPropertyScroll(activeContentRef.current);
+    };
+    const scrollToAddedProperty = () => {
+      var _a3;
+      if (cancelled) return;
+      attempts += 1;
+      const propertyElement = Array.from(
+        ((_a3 = activeContentRef.current) == null ? void 0 : _a3.querySelectorAll("[data-recrate-property]")) ?? []
+      ).find((element) => element.dataset.recrateProperty === pendingAddedProperty.property);
+      if (propertyElement) {
+        const viewport = activeContentRef.current;
+        const viewportRect = viewport == null ? void 0 : viewport.getBoundingClientRect();
+        const propertyRect = propertyElement.getBoundingClientRect();
+        if (viewport && viewportRect) {
+          const targetTop = viewport.scrollTop + propertyRect.top - viewportRect.top;
+          const maxScrollable = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+          const target = Math.max(0, Math.min(targetTop, maxScrollable));
+          viewport.scrollTo({ top: target, behavior: "auto" });
+          rafId = window.requestAnimationFrame(() => {
+            if (cancelled) return;
+            const nextViewportRect = viewport.getBoundingClientRect();
+            const nextPropertyRect = propertyElement.getBoundingClientRect();
+            const nextMaxScrollable = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+            const expectedTop = Math.max(0, Math.min(targetTop, nextMaxScrollable));
+            const targetReachable = targetTop <= nextMaxScrollable + 2;
+            const propertyTopVisible = nextPropertyRect.top >= nextViewportRect.top - 2 && nextPropertyRect.top <= nextViewportRect.bottom - 24;
+            const reachedExpectedTop = Math.abs(viewport.scrollTop - expectedTop) <= 2;
+            if (propertyTopVisible || targetReachable && reachedExpectedTop) {
+              finishAddedPropertyScroll(viewport);
+              return;
+            }
+            scheduleRetry();
+          });
+          return;
+        } else {
+          propertyElement.scrollIntoView({ block: "start", behavior: "auto" });
+          finishAddedPropertyScroll();
+          return;
+        }
+      }
+      scheduleRetry();
+    };
+    rafId = requestAnimationFrame(scrollToAddedProperty);
+    return () => {
+      cancelled = true;
+      window.cancelAnimationFrame(rafId);
+      window.clearTimeout(timerId);
+    };
+  }, [activeTab, contextEntity == null ? void 0 : contextEntity["@id"], tabs.length, extraProperties.length]);
   const handleAddPropertyPlaceholder = (property) => {
     try {
+      pendingAddedPropertyRef.current = {
+        entityId: entity["@id"],
+        property
+      };
       const newExtraProperties = [...extraProperties, property];
       setExtraProperties(newExtraProperties);
+      init2({ entity: contextEntity, extraPropertiesOverride: newExtraProperties });
     } catch (error2) {
       console.error(error2);
       onError();
     }
   };
   const handleAddNewProfile = () => {
+    var _a3;
     try {
       const next2 = !showAddPanel;
+      const currentProfileTabKeys = tabs.filter(isProfileTab).map(getProfileTabKey).filter(Boolean);
+      pendingAddedProfileSelectionRef.current = {
+        entityId: entity["@id"],
+        tabKeys: currentProfileTabKeys
+      };
+      writePendingAddedProfileTabKeys(entity["@id"], currentProfileTabKeys);
+      const pendingSelectionState = {
+        uiState: {
+          pendingAddedProfileTabKeys: currentProfileTabKeys,
+          pendingAddedProfileRequestedAt: Date.now()
+        }
+      };
+      if (((_a3 = state.editorState.latest()) == null ? void 0 : _a3.id) === entity["@id"]) {
+        state.editorState.updateNavigationState(pendingSelectionState);
+      } else {
+        state.editorState.updateNavigationStateForId(entity["@id"], pendingSelectionState);
+      }
       setShowAddPanel(next2);
       onAddNewProfileRequest == null ? void 0 : onAddNewProfileRequest(true);
     } catch (error2) {
@@ -111151,57 +111442,20 @@ const RenderEntity = forwardRef((props, ref) => {
   const toggleIconView = () => {
     if (!iconView) {
       setIconView(true);
-      setTabPaneWidth(70);
-      localStorage.setItem("recrate.verticalTabWidth", "50");
+      setTabPaneWidth(80);
+      localStorage.setItem("recrate.verticalTabWidth", "80");
     } else {
       setIconView(false);
       setTabPaneWidth(250);
       localStorage.setItem("recrate.verticalTabWidth", "250");
     }
   };
-  const makeTabLabel = (tab, idx) => iconView ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "describo-tab-icon", children: (idx ?? 0) + 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col w-full group", onMouseEnter: () => setHoveredTabKey(tab.name), onMouseLeave: () => setHoveredTabKey(null), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center justify-between w-full relative", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: "text-left text-base font-medium text-gray-700 describo-tab-label whitespace-normal break-words",
-          style: { maxWidth: "100%" },
-          children: tab.label || tab.name
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ml-2 flex items-center space-x-2", children: [
-        tab.missingRequiredData && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-red-600", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCircleXmark, size: "lg" }) }),
-        tab.hasData && !tab.missingRequiredData && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-green-600", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCircleCheck, size: "lg" }) }),
-        !(["about", "overflow", "other"].includes((tab.name || "").toLowerCase()) || ["about", "other"].includes((tab.label || tab.name || "").toLowerCase())) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button$1,
-          {
-            "aria-label": "Remove profile",
-            type: "text",
-            style: { display: hoveredTabKey === tab.name ? "inline-flex" : "none" },
-            onClick: (e3) => {
-              e3.stopPropagation();
-              handleRemoveProfile(tab);
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$d, { style: { color: "oklch(57.7% 0.245 27.325)" } })
-          }
-        )
-      ] })
-    ] }),
-    tab.description && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "text-left text-gray-500 font-light text-xs describo-tab-description whitespace-normal break-words",
-        style: { maxWidth: "100%" },
-        children: tab.description
-      }
-    )
-  ] });
   const addProfileTabLabel = /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip2, { title: t2("add_profile_button_tooltip"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     Button$1,
     {
       type: "default",
       shape: "circle",
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$m, {}),
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$n, {}),
       "aria-label": "Add Profile",
       "aria-controls": "add-property-panel",
       "aria-expanded": showAddPanel,
@@ -111232,11 +111486,146 @@ const RenderEntity = forwardRef((props, ref) => {
     ) }),
     className: "ant-tabs-tab-toggle-view"
   };
-  const tabItems = [
-    toggleViewTabItem,
-    ...tabs.map((tab, idx) => ({ key: tab.name, label: makeTabLabel(tab, idx), children: void 0 })),
-    addProfileTabItem
-  ];
+  const handleSelectTab = (tabName) => {
+    if (tabName === activeTab) return;
+    captureViewContext(activeTab);
+    setActiveTab(tabName);
+    saveTabToState(tabName);
+  };
+  const scrollTabRail = (direction) => {
+    const list = tabRailListRef.current;
+    if (!list) return;
+    const distance = Math.max(120, Math.floor(list.clientHeight * 0.6));
+    list.scrollBy({
+      top: direction === "up" ? -distance : distance,
+      behavior: "smooth"
+    });
+    window.setTimeout(updateTabRailScrollState, 260);
+  };
+  const renderProfileRailActions = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "describo-tab-rail-actions", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip2, { title: iconView ? t2("switch_to_label_view") : t2("switch_to_icon_view"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button$1,
+      {
+        type: iconView ? "primary" : "default",
+        shape: "circle",
+        icon: iconView ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$9, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {}),
+        "aria-pressed": iconView,
+        onClick: (e3) => {
+          e3.stopPropagation();
+          toggleIconView();
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip2, { title: t2("add_profile_button_tooltip"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button$1,
+      {
+        type: "default",
+        shape: "circle",
+        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$n, {}),
+        "aria-label": "Add Profile",
+        "aria-controls": "add-property-panel",
+        "aria-expanded": showAddPanel,
+        onClick: handleAddNewProfile
+      }
+    ) })
+  ] });
+  const renderProfileActionRail = () => /* @__PURE__ */ jsxRuntimeExports.jsx("nav", { className: "describo-tab-rail describo-tab-rail-actions-only", "aria-label": "Profile actions", children: renderProfileRailActions() });
+  const renderProfileTabRail = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "nav",
+    {
+      className: `describo-tab-rail ${tabRailScrollState.canScrollUp ? "describo-tab-rail-can-scroll-up" : ""} ${tabRailScrollState.canScrollDown ? "describo-tab-rail-can-scroll-down" : ""}`,
+      "aria-label": "Profile sections",
+      children: [
+        renderProfileRailActions(),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            ref: tabRailListRef,
+            className: "describo-tab-rail-list",
+            role: "tablist",
+            "aria-orientation": "vertical",
+            onScroll: updateTabRailScrollState,
+            children: tabs.map((tab, idx) => {
+              const isActive2 = tab.name === activeTab;
+              const canRemove = !(["about", "overflow", "other"].includes((tab.name || "").toLowerCase()) || ["about", "other"].includes((tab.label || tab.name || "").toLowerCase()));
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  role: "tab",
+                  tabIndex: 0,
+                  "aria-selected": isActive2,
+                  className: `describo-tab-rail-item ${isActive2 ? "describo-tab-rail-item-active" : ""} ${iconView ? "describo-tab-rail-item-icon" : ""}`,
+                  onClick: () => handleSelectTab(tab.name),
+                  onKeyDown: (e3) => {
+                    if (e3.key === "Enter" || e3.key === " ") {
+                      e3.preventDefault();
+                      handleSelectTab(tab.name);
+                    }
+                  },
+                  onMouseEnter: () => setHoveredTabKey(tab.name),
+                  onMouseLeave: () => setHoveredTabKey(null),
+                  children: iconView ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "describo-tab-icon", children: idx + 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "describo-tab-rail-row", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "describo-tab-rail-title", children: tab.label || tab.name }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "describo-tab-rail-status", children: [
+                        tab.missingRequiredData && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-600", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCircleXmark, size: "lg" }) }),
+                        tab.hasData && !tab.missingRequiredData && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-green-600", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCircleCheck, size: "lg" }) }),
+                        canRemove && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          Button$1,
+                          {
+                            "aria-label": "Remove profile",
+                            type: "text",
+                            size: "small",
+                            className: "describo-tab-rail-remove-button",
+                            style: {
+                              visibility: hoveredTabKey === tab.name ? "visible" : "hidden",
+                              opacity: hoveredTabKey === tab.name ? 1 : 0,
+                              pointerEvents: hoveredTabKey === tab.name ? "auto" : "none"
+                            },
+                            onClick: (e3) => {
+                              e3.stopPropagation();
+                              handleRemoveProfile(tab);
+                            },
+                            children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$d, { style: { color: "oklch(57.7% 0.245 27.325)" } })
+                          }
+                        )
+                      ] })
+                    ] }),
+                    tab.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "describo-tab-rail-description", children: tab.description })
+                  ] })
+                },
+                tab.name
+              );
+            })
+          }
+        ),
+        tabRailScrollState.canScrollUp && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button$1,
+          {
+            type: "default",
+            shape: "circle",
+            size: "small",
+            className: "describo-tab-rail-scroll-button describo-tab-rail-scroll-button-up",
+            icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$m, {}),
+            "aria-label": "Scroll profile tabs up",
+            onClick: () => scrollTabRail("up")
+          }
+        ),
+        tabRailScrollState.canScrollDown && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button$1,
+          {
+            type: "default",
+            shape: "circle",
+            size: "small",
+            className: "describo-tab-rail-scroll-button describo-tab-rail-scroll-button-down",
+            icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$r, {}),
+            "aria-label": "Scroll profile tabs down",
+            onClick: () => scrollTabRail("down")
+          }
+        )
+      ]
+    }
+  );
   if (!entity || !entity["@id"]) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "No entity selected" });
   }
@@ -111278,20 +111667,8 @@ const RenderEntity = forwardRef((props, ref) => {
         setTabPaneWidth(w2);
         persistTabWidth(w2);
       }, children: [
-        ((_e2 = state.configuration) == null ? void 0 : _e2.tabLocation) === "left" && /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? 70 : 100, maxSize: iconView ? 70 : 250, preferredSize: iconView ? 50 : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full border-r border-slate-200", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Tabs,
-            {
-              className: "describo-add-only-tabs",
-              tabPosition: "left",
-              items: [
-                toggleViewTabItem,
-                addProfileTabItem
-              ],
-              style: { width: "100%" },
-              tabBarStyle: { width: "100%" }
-            }
-          ),
+        ((_e2 = state.configuration) == null ? void 0 : _e2.tabLocation) === "left" && /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? 80 : 100, maxSize: iconView ? 80 : 250, preferredSize: iconView ? 80 : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full border-r border-slate-200", children: [
+          renderProfileActionRail(),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-slate-300 opacity-0 group-hover:opacity-100" })
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: activeContentRef, className: "describo-editor-scroll flex-1 overflow-y-auto scroll-smooth min-h-0 p-3", children: [
@@ -111325,6 +111702,7 @@ const RenderEntity = forwardRef((props, ref) => {
               return /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
+                  "data-recrate-property": property,
                   className: `my-2 hover:bg-sky-100 ${savedProperty === property ? "bg-green-200 hover:bg-green-200" : ""}`,
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     EntityProperty,
@@ -111350,20 +111728,8 @@ const RenderEntity = forwardRef((props, ref) => {
             return null;
           })
         ] }) }),
-        ((_g = state.configuration) == null ? void 0 : _g.tabLocation) === "right" && /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? 70 : 100, maxSize: iconView ? 70 : 250, preferredSize: iconView ? 70 : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full border-l border-slate-200", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Tabs,
-            {
-              className: "describo-add-only-tabs",
-              tabPosition: "right",
-              items: [
-                toggleViewTabItem,
-                addProfileTabItem
-              ],
-              style: { width: "100%" },
-              tabBarStyle: { width: "100%" }
-            }
-          ),
+        ((_g = state.configuration) == null ? void 0 : _g.tabLocation) === "right" && /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? 80 : 100, maxSize: iconView ? 80 : 250, preferredSize: iconView ? 80 : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full border-l border-slate-200", children: [
+          renderProfileActionRail(),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-slate-300 opacity-0 group-hover:opacity-100" })
         ] }) })
       ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: contentContainerRef, className: "flex min-h-0 overflow-hidden", style: {
@@ -111413,6 +111779,7 @@ const RenderEntity = forwardRef((props, ref) => {
               return /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
+                  "data-recrate-property": property,
                   className: `my-2 hover:bg-sky-100 ${savedProperty === property ? "bg-green-200 hover:bg-green-200" : ""}`,
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     EntityProperty,
@@ -111445,27 +111812,12 @@ const RenderEntity = forwardRef((props, ref) => {
         setTabPaneWidth(w2);
         persistTabWidth(w2);
       }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? 70 : 100, maxSize: iconView ? 70 : 250, preferredSize: iconView ? 70 : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Tabs,
-            {
-              className: "describo-tabs-vertical-center-add",
-              activeKey: activeTab,
-              onChange: (key) => {
-                captureViewContext(activeTab);
-                setActiveTab(key);
-                saveTabToState(key);
-              },
-              tabPosition: ((_i = state.configuration) == null ? void 0 : _i.tabLocation) === "left" ? "left" : ((_j = state.configuration) == null ? void 0 : _j.tabLocation) === "right" ? "right" : "top",
-              style: { width: "100%" },
-              tabBarStyle: ((_k = state.configuration) == null ? void 0 : _k.tabLocation) === "left" || ((_l = state.configuration) == null ? void 0 : _l.tabLocation) === "right" ? { width: "100%" } : void 0,
-              items: tabItems
-            }
-          ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { minSize: iconView ? 80 : 100, maxSize: iconView ? 80 : 250, preferredSize: iconView ? 80 : tabPaneWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative group h-full", children: [
+          renderProfileTabRail(),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-slate-300 opacity-0 group-hover:opacity-100" })
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Ve.Pane, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: activeContentRef, className: "describo-editor-scroll h-full overflow-y-auto scroll-smooth min-h-0 p-3", children: [
-          !((_m = state.configuration) == null ? void 0 : _m.readonly) && ((_n = tabs.find((t22) => t22.name === activeTab)) == null ? void 0 : _n.missingRequiredData) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-red-600 float-right mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          !((_i = state.configuration) == null ? void 0 : _i.readonly) && ((_j = tabs.find((t22) => t22.name === activeTab)) == null ? void 0 : _j.missingRequiredData) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-red-600 float-right mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
               className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded text-sm",
@@ -111489,25 +111841,33 @@ const RenderEntity = forwardRef((props, ref) => {
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(EntityName, { entity: contextEntity, onUpdate: handleUpdateEntity })
               }
             ),
-            (_o = tabs.find((tab) => tab.name === "about")) == null ? void 0 : _o.inputs.map((input) => {
+            (_k = tabs.find((tab) => tab.name === "about")) == null ? void 0 : _k.inputs.map((input) => {
               if (!["@id", "@type", "name", "@reverse"].includes(input.name)) {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-2 hover:bg-sky-100 ${savedProperty === input.name ? "bg-green-200 hover:bg-green-200" : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  EntityProperty,
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
                   {
-                    entity: contextEntity,
-                    property: input.name,
-                    values: Array.isArray(contextEntity[input.name]) ? contextEntity[input.name] : [contextEntity[input.name]],
-                    highlightRequired: highlightRequiredProperties,
-                    savedProperty: savedProperty === input.name,
-                    onLoadEntity: handleLoadEntityWithContext,
-                    onCreateEntity: handleCreateEntity,
-                    onLinkEntity: handleLinkEntity,
-                    onUnlinkEntity: handleUnlinkEntity,
-                    onCreateProperty: handleCreateProperty,
-                    onSaveProperty: handleUpdateEntity,
-                    onDeleteProperty: handleDeleteProperty
-                  }
-                ) }, input.name);
+                    "data-recrate-property": input.name,
+                    className: `p-2 hover:bg-sky-100 ${savedProperty === input.name ? "bg-green-200 hover:bg-green-200" : ""}`,
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      EntityProperty,
+                      {
+                        entity: contextEntity,
+                        property: input.name,
+                        values: Array.isArray(contextEntity[input.name]) ? contextEntity[input.name] : [contextEntity[input.name]],
+                        highlightRequired: highlightRequiredProperties,
+                        savedProperty: savedProperty === input.name,
+                        onLoadEntity: handleLoadEntityWithContext,
+                        onCreateEntity: handleCreateEntity,
+                        onLinkEntity: handleLinkEntity,
+                        onUnlinkEntity: handleUnlinkEntity,
+                        onCreateProperty: handleCreateProperty,
+                        onSaveProperty: handleUpdateEntity,
+                        onDeleteProperty: handleDeleteProperty
+                      }
+                    )
+                  },
+                  input.name
+                );
               }
               return null;
             })
@@ -111519,6 +111879,7 @@ const RenderEntity = forwardRef((props, ref) => {
                   return /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "div",
                     {
+                      "data-recrate-property": input.name,
                       className: `p-2 hover:bg-sky-100 ${savedProperty === input.name ? "bg-green-200 hover:bg-green-200" : ""}`,
                       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                         EntityProperty,