@almadar/ui 5.162.0 → 5.163.0

package/dist/runtime/index.js

@@ -32569,6 +32569,33 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
+
+// lib/relationLabel.ts
+function relationLabel(value) {
+  if (value === null || typeof value !== "object" || Array.isArray(value) || value instanceof Date)
+    return null;
+  for (const key of ["name", "title", "label"]) {
+    const candidate = value[key];
+    if (typeof candidate === "string" && candidate !== "") return candidate;
+  }
+  const id = value.id;
+  return id !== void 0 && id !== null ? String(id) : null;
+}
+function relationDisplayLabels(value, options) {
+  if (value === void 0 || value === null || value === "") return [];
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => relationDisplayLabels(item, options));
+  }
+  const hydrated = relationLabel(value);
+  if (hydrated !== null) return [hydrated];
+  const raw = String(value);
+  const match = options?.find((opt) => opt.value === raw);
+  return [match ? match.label : raw];
+}
+var init_relationLabel = __esm({
+  "lib/relationLabel.ts"() {
+  }
+});
 function renderIconInput3(icon, props) {
   return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, ...props }) : /* @__PURE__ */ jsx(Icon, { icon, ...props });
 }
@@ -32886,6 +32913,7 @@ var init_TableView = __esm({
     "use client";
     init_cn();
     init_format();
+    init_relationLabel();
     init_getNestedValue();
     init_useEventBus();
     init_Box();
@@ -32899,7 +32927,13 @@ var init_TableView = __esm({
     init_Menu();
     init_useDataDnd();
     tableViewLog = createLogger("almadar:ui:table-view");
-    formatCell = (value, format) => formatValue(value, format);
+    formatCell = (value, format) => {
+      if (value !== null && value !== void 0 && typeof value === "object" && !(value instanceof Date)) {
+        const labels = relationDisplayLabels(value);
+        if (labels.length > 0) return labels.join(", ");
+      }
+      return formatValue(value, format);
+    };
     MAX_MEASURED_COL_CH = 32;
     BADGE_CHROME_CH = 4;
     alignClass = {
@@ -36376,6 +36410,13 @@ var init_RichTextEditor = __esm({
         document.execCommand("createLink", false, safe);
         afterEdit();
       }, [afterEdit, t, toolbar.link]);
+      const execImage = useCallback(() => {
+        const url = window.prompt(t("richTextEditor.imagePrompt"));
+        if (!url) return;
+        const safe = safeUrl(url, ["http://", "https://", "data:image/"]) ?? `https://${url}`;
+        document.execCommand("insertImage", false, safe);
+        afterEdit();
+      }, [afterEdit, t]);
       const execRule = useCallback(() => {
         document.execCommand("insertHorizontalRule", false);
         afterEdit();
@@ -36413,6 +36454,7 @@ var init_RichTextEditor = __esm({
               /* @__PURE__ */ jsx(ToolbarButton, { icon: Quote, label: t("richTextEditor.quote"), active: toolbar.block === "blockquote", onExec: () => execBlock("blockquote") }),
               /* @__PURE__ */ jsx(ToolbarButton, { icon: Code, label: t("richTextEditor.code"), active: toolbar.block === "pre", onExec: () => execBlock("pre") }),
               /* @__PURE__ */ jsx(ToolbarButton, { icon: Link$1, label: toolbar.link ? t("richTextEditor.removeLink") : t("richTextEditor.link"), active: toolbar.link, onExec: execLink }),
+              /* @__PURE__ */ jsx(ToolbarButton, { icon: Image$1, label: t("richTextEditor.image"), onExec: execImage }),
               /* @__PURE__ */ jsx(ToolbarButton, { icon: Minus, label: t("richTextEditor.divider"), onExec: execRule })
             ]
           }
@@ -36453,6 +36495,8 @@ function DocumentPanel({
   id,
   title,
   subtitle,
+  coverImage,
+  icon,
   value,
   actions,
   maxInlineActions,
@@ -36528,62 +36572,74 @@ function DocumentPanel({
   const emitWithId = (event) => () => {
     if (event) eventBus.emit(`UI:${event}`, { id: recordId });
   };
-  return /* @__PURE__ */ jsx(Card, { variant: "elevated", className: cn("w-full", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-6 sm:p-8", children: [
-    /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-between items-start", children: [
-      /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
-        titleNode,
-        subtitle ? /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: subtitle }) : null
-      ] }),
-      /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 pt-1 items-center", children: editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "hidden sm:block", children: autosaveHint ?? (t("documentPanel.autosaveHint") || "") }),
-        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: emitWithId(doneEvent), "data-testid": "document-done", children: doneLabel ?? (t("documentPanel.done") || "Done") })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        editEvent && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: emitWithId(editEvent), "data-testid": "document-edit", children: [
-          /* @__PURE__ */ jsx(Icon, { name: "edit", size: "xs", className: "mr-1" }),
-          editLabel ?? (t("documentPanel.edit") || "Edit")
-        ] }),
-        inlineActions.map((action, idx) => /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "primary",
-            size: "sm",
-            onClick: () => fireAction(action),
-            "data-testid": `action-${action.event}`,
-            children: [
-              action.icon && renderIconInput4(action.icon, { size: "xs", className: "mr-1" }),
-              action.label
-            ]
-          },
-          idx
-        )),
-        menuActions.length > 0 && /* @__PURE__ */ jsx(
-          Menu,
-          {
-            position: "bottom-end",
-            trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-            items: menuActions.map((action) => ({
-              label: action.label,
-              icon: action.icon,
-              variant: action.variant === "danger" ? "danger" : "default",
-              onClick: () => fireAction(action)
-            }))
-          }
-        )
-      ] }) })
-    ] }),
-    editing ? /* @__PURE__ */ jsx(RichTextEditor, { value, changeEvent: contentChangeEvent, placeholder }) : /* @__PURE__ */ jsx(
-      Box,
+  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: cn("w-full overflow-hidden", className), children: [
+    coverImage ? /* @__PURE__ */ jsx(Box, { className: "h-44 w-full sm:h-52", "data-testid": "document-cover", children: /* @__PURE__ */ jsx(
+      "img",
       {
-        onClick: emitWithId(editEvent),
-        className: cn(
-          "rounded-md px-1 -mx-1 min-h-[16rem]",
-          editEvent && "cursor-text transition-colors hover:bg-muted/30"
-        ),
-        "data-testid": "document-body",
-        children: value && value !== "" ? /* @__PURE__ */ jsx(RichTextEditor, { value, readOnly: true }) : /* @__PURE__ */ jsx(Typography, { variant: "body", color: "muted", children: placeholder ?? (t("documentPanel.placeholder") || "") })
-      }
-    )
-  ] }) });
+        src: coverImage,
+        alt: "",
+        "aria-hidden": "true",
+        className: "h-full w-full object-cover"
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-6 sm:p-8", children: [
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-between items-start", children: [
+        /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
+          icon ? /* @__PURE__ */ jsx(Box, { className: "text-muted-foreground", "data-testid": "document-icon", children: renderIconInput4(icon, { size: "lg" }) }) : null,
+          titleNode,
+          subtitle ? /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: subtitle }) : null
+        ] }),
+        /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 pt-1 items-center", children: editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "hidden sm:block", children: autosaveHint ?? (t("documentPanel.autosaveHint") || "") }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: emitWithId(doneEvent), "data-testid": "document-done", children: doneLabel ?? (t("documentPanel.done") || "Done") })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          editEvent && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: emitWithId(editEvent), "data-testid": "document-edit", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "edit", size: "xs", className: "mr-1" }),
+            editLabel ?? (t("documentPanel.edit") || "Edit")
+          ] }),
+          inlineActions.map((action, idx) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "primary",
+              size: "sm",
+              onClick: () => fireAction(action),
+              "data-testid": `action-${action.event}`,
+              children: [
+                action.icon && renderIconInput4(action.icon, { size: "xs", className: "mr-1" }),
+                action.label
+              ]
+            },
+            idx
+          )),
+          menuActions.length > 0 && /* @__PURE__ */ jsx(
+            Menu,
+            {
+              position: "bottom-end",
+              trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+              items: menuActions.map((action) => ({
+                label: action.label,
+                icon: action.icon,
+                variant: action.variant === "danger" ? "danger" : "default",
+                onClick: () => fireAction(action)
+              }))
+            }
+          )
+        ] }) })
+      ] }),
+      editing ? /* @__PURE__ */ jsx(RichTextEditor, { value, changeEvent: contentChangeEvent, placeholder }) : /* @__PURE__ */ jsx(
+        Box,
+        {
+          onClick: emitWithId(editEvent),
+          className: cn(
+            "rounded-md px-1 -mx-1 min-h-[16rem]",
+            editEvent && "cursor-text transition-colors hover:bg-muted/30"
+          ),
+          "data-testid": "document-body",
+          children: value && value !== "" ? /* @__PURE__ */ jsx(RichTextEditor, { value, readOnly: true }) : /* @__PURE__ */ jsx(Typography, { variant: "body", color: "muted", children: placeholder ?? (t("documentPanel.placeholder") || "") })
+        }
+      )
+    ] })
+  ] });
 }
 var init_DocumentPanel = __esm({
   "components/core/molecules/DocumentPanel.tsx"() {
@@ -36607,17 +36663,16 @@ function renderIconInput5(icon, props) {
 function fieldName(field) {
   return field.name ?? field.key ?? "";
 }
-function relationLabel(value) {
-  if (value === null || typeof value !== "object" || Array.isArray(value) || value instanceof Date) return null;
-  for (const key of ["name", "title", "label"]) {
-    const candidate = value[key];
-    if (typeof candidate === "string" && candidate !== "") return candidate;
+function relationId(value) {
+  if (value !== null && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date)) {
+    const id = value.id;
+    if (id !== void 0 && id !== null) return String(id);
   }
-  const id = value.id;
-  return id !== void 0 && id !== null ? String(id) : null;
+  return String(value);
 }
 function fieldKind(field, value) {
   if (field.kind) return field.kind;
+  if (field.type === "image") return "image";
   if (field.options && field.options.length > 0) return "select";
   if (typeof value === "boolean" || field.format === "boolean") return "boolean";
   if (Array.isArray(value) || relationLabel(value ?? null) !== null) return "readonly";
@@ -36627,6 +36682,7 @@ function DocumentDetails({
   entity,
   fields,
   metaCommitEvent,
+  relationEvent,
   title,
   className
 }) {
@@ -36641,11 +36697,51 @@ function DocumentDetails({
     if (!metaCommitEvent || next === current) return;
     eventBus.emit(`UI:${metaCommitEvent}`, { id: recordId, patch: { id: recordId, [name]: next } });
   };
+  const relationChip = (item, name, key) => {
+    const label = relationLabel(item) ?? humanizeEnumValue(String(item));
+    if (!relationEvent) {
+      return /* @__PURE__ */ jsx(Badge, { variant: "default", children: label }, key);
+    }
+    const emitClick = () => eventBus.emit(`UI:${relationEvent}`, { field: name, id: relationId(item), name: label });
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "default",
+        role: "button",
+        tabIndex: 0,
+        className: "cursor-pointer transition-colors hover:bg-accent",
+        onClick: emitClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            emitClick();
+          }
+        },
+        "data-testid": `relation-chip-${name}`,
+        children: label
+      },
+      key
+    );
+  };
   const renderValue = (field) => {
     const name = fieldName(field);
     const raw = getNestedValue(entity ?? {}, name);
     const kind = fieldKind(field, raw);
     const label = field.label ?? field.header ?? humanizeFieldName(name);
+    if (kind === "image") {
+      const url = typeof raw === "string" ? raw : "";
+      if (!url) return /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: "\u2014" });
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: url,
+          alt: label,
+          loading: "lazy",
+          className: "max-h-32 w-full rounded-md border border-border object-cover",
+          "data-testid": `document-property-image-${name}`
+        }
+      );
+    }
     if (kind === "boolean") {
       return /* @__PURE__ */ jsx(
         Switch,
@@ -36675,9 +36771,12 @@ function DocumentDetails({
         if (raw.length === 0) {
           return /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: "\u2014" });
         }
-        return /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap", children: raw.map((item, i) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: relationLabel(item) ?? humanizeEnumValue(String(item)) }, i)) });
+        return /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap", children: raw.map((item, i) => relationChip(item, name, i)) });
       }
-      const shown2 = raw === void 0 || raw === null || raw === "" ? "\u2014" : relationLabel(raw) ?? formatValue(raw, field.format);
+      if (raw !== void 0 && raw !== null && raw !== "" && relationLabel(raw) !== null) {
+        return relationChip(raw, name);
+      }
+      const shown2 = raw === void 0 || raw === null || raw === "" ? "\u2014" : formatValue(raw, field.format);
       return /* @__PURE__ */ jsx(Typography, { variant: "small", className: "break-words", children: shown2 });
     }
     if (fieldDraft?.name === name) {
@@ -36746,6 +36845,7 @@ var init_DocumentDetails = __esm({
     init_cn();
     init_format();
     init_getNestedValue();
+    init_relationLabel();
     init_useEventBus();
     init_Box();
     init_Stack();
@@ -41740,7 +41840,18 @@ function renderRichFieldValue(value, fieldName2, fieldType, meta) {
   if (value === void 0 || value === null) return "\u2014";
   const str = String(value);
   switch (fieldType) {
-    case "image":
+    case "image": {
+      if (!str) return "\u2014";
+      return /* @__PURE__ */ jsx(Box, { className: "mt-1 max-w-full", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: str,
+          alt: formatFieldLabel(fieldName2),
+          className: "max-w-full max-h-64 rounded-md object-contain",
+          loading: "lazy"
+        }
+      ) });
+    }
     case "url": {
       if (str.match(/\.(png|jpe?g|gif|svg|webp|avif)(\?|$)/i) || str.startsWith("data:image/")) {
         return /* @__PURE__ */ jsx(Box, { className: "mt-1 max-w-full", children: /* @__PURE__ */ jsx(
@@ -41753,7 +41864,7 @@ function renderRichFieldValue(value, fieldName2, fieldType, meta) {
           }
         ) });
       }
-      if (fieldType === "url" && /^https?:\/\//i.test(str)) {
+      if (/^https?:\/\//i.test(str)) {
         return /* @__PURE__ */ jsx(
           "a",
           {
@@ -41839,8 +41950,10 @@ function renderRichFieldValue(value, fieldName2, fieldType, meta) {
       return str;
     }
     case "relation": {
-      const match = meta?.options?.find((opt) => opt.value === str);
-      return match ? match.label : str;
+      const labels = relationDisplayLabels(value, meta?.options);
+      if (labels.length === 0) return "\u2014";
+      if (labels.length === 1) return labels[0];
+      return /* @__PURE__ */ jsx(HStack, { gap: "xs", wrap: true, children: labels.map((label, i) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: label }, i)) });
     }
     case "file": {
       if (value !== null && typeof value === "object" && !Array.isArray(value)) {
@@ -41942,6 +42055,7 @@ var init_DetailPanel = __esm({
     init_cn();
     init_format();
     init_getNestedValue();
+    init_relationLabel();
     init_useEventBus();
     init_UploadDropZone();
     formatFieldLabel = humanizeFieldName;
@@ -42600,6 +42714,8 @@ function determineInputType(field) {
       return "url";
     case "file":
       return "file";
+    case "image":
+      return "image";
     case "money":
       return "currency";
     case "number":
@@ -43199,6 +43315,49 @@ var init_Form = __esm({
                 }
               }
             );
+          case "image": {
+            const imageUrl = typeof currentValue === "string" ? currentValue : "";
+            return /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+              imageUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: imageUrl,
+                  alt: "",
+                  "aria-hidden": "true",
+                  className: "h-24 w-full max-w-xs rounded-md border border-border object-cover",
+                  "data-testid": `image-preview-${fieldName2}`
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...commonProps,
+                  type: "url",
+                  value: imageUrl,
+                  onChange: (e) => handleChange(fieldName2, e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                UploadDropZone,
+                {
+                  accept: "image/*",
+                  maxFiles: 1,
+                  maxSize: 2 * 1024 * 1024,
+                  disabled: isLoading,
+                  onFiles: (files) => {
+                    const f3 = files[0];
+                    if (!f3) return;
+                    const reader = new FileReader();
+                    reader.onload = () => handleChange(
+                      fieldName2,
+                      typeof reader.result === "string" ? reader.result : ""
+                    );
+                    reader.readAsDataURL(f3);
+                  }
+                }
+              )
+            ] });
+          }
           case "date":
             return /* @__PURE__ */ jsx(
               Input,

package/locales/ar.json

@@ -525,12 +525,12 @@
   "td.victory": "انتصار!",
   "td.wave": "موجة",
   "td.waveInProgress": "الموجة قيد التقدم…",
-  "documentDetails.title": "\u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644",
-  "documentPanel.untitled": "\u0628\u062f\u0648\u0646 \u0639\u0646\u0648\u0627\u0646",
-  "documentPanel.edit": "\u062a\u062d\u0631\u064a\u0631",
-  "documentPanel.done": "\u062a\u0645",
-  "documentPanel.autosaveHint": "\u064a\u064f\u062d\u0641\u0638 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0643\u062a\u0627\u0628\u0629",
-  "documentPanel.placeholder": "\u0627\u0628\u062f\u0623 \u0627\u0644\u0643\u062a\u0627\u0628\u0629\u2026",
+  "documentDetails.title": "التفاصيل",
+  "documentPanel.untitled": "بدون عنوان",
+  "documentPanel.edit": "تحرير",
+  "documentPanel.done": "تم",
+  "documentPanel.autosaveHint": "يُحفظ أثناء الكتابة",
+  "documentPanel.placeholder": "ابدأ الكتابة…",
   "richTextEditor.editorToolbar": "شريط التنسيق",
   "richTextEditor.editorSurface": "محرر النصوص",
   "richTextEditor.bold": "غامق",
@@ -548,5 +548,7 @@
   "richTextEditor.removeLink": "إزالة الرابط",
   "richTextEditor.divider": "فاصل",
   "richTextEditor.linkPrompt": "عنوان الرابط",
+  "richTextEditor.image": "إدراج صورة",
+  "richTextEditor.imagePrompt": "رابط الصورة",
   "richTextEditor.placeholder": "ابدأ الكتابة…"
 }

package/locales/en.json

@@ -530,7 +530,7 @@
   "documentPanel.edit": "Edit",
   "documentPanel.done": "Done",
   "documentPanel.autosaveHint": "Saves as you type",
-  "documentPanel.placeholder": "Start writing\u2026",
+  "documentPanel.placeholder": "Start writing…",
   "richTextEditor.editorToolbar": "Formatting toolbar",
   "richTextEditor.editorSurface": "Rich text editor",
   "richTextEditor.bold": "Bold",
@@ -548,5 +548,7 @@
   "richTextEditor.removeLink": "Remove link",
   "richTextEditor.divider": "Divider",
   "richTextEditor.linkPrompt": "Link address",
+  "richTextEditor.image": "Insert image",
+  "richTextEditor.imagePrompt": "Image URL",
   "richTextEditor.placeholder": "Start writing…"
 }

package/locales/sl.json

@@ -530,7 +530,7 @@
   "documentPanel.edit": "Uredi",
   "documentPanel.done": "Konec",
   "documentPanel.autosaveHint": "Shranjuje se med tipkanjem",
-  "documentPanel.placeholder": "Za\u010dni pisati\u2026",
+  "documentPanel.placeholder": "Začni pisati…",
   "richTextEditor.editorToolbar": "Orodna vrstica za oblikovanje",
   "richTextEditor.editorSurface": "Urejevalnik obogatenega besedila",
   "richTextEditor.bold": "Krepko",
@@ -548,5 +548,7 @@
   "richTextEditor.removeLink": "Odstrani povezavo",
   "richTextEditor.divider": "Ločilo",
   "richTextEditor.linkPrompt": "Naslov povezave",
+  "richTextEditor.image": "Vstavi sliko",
+  "richTextEditor.imagePrompt": "URL slike",
   "richTextEditor.placeholder": "Začnite pisati …"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.162.0",
+  "version": "5.163.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.72.0",
+    "@almadar/core": "^10.73.0",
     "@almadar/evaluator": "^2.42.0",
     "@almadar/logger": "^1.11.0",
-    "@almadar/runtime": "^6.62.0",
-    "@almadar/std": "^16.191.0",
+    "@almadar/runtime": "^6.63.0",
+    "@almadar/std": "^16.192.0",
     "@almadar/syntax": "^1.15.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",