lightnet 3.10.7 → 3.11.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # lightnet
 
+## 3.11.0
+
+### Minor Changes
+
+- [#347](https://github.com/LightNetDev/LightNet/pull/347) [`17ea3d9`](https://github.com/LightNetDev/LightNet/commit/17ea3d9b599d9456b36e1974d3a8f5dc7d39fb65) Thanks [@ajjn](https://github.com/ajjn)! - Add translation for Urdu
+
+### Patch Changes
+
+- [#344](https://github.com/LightNetDev/LightNet/pull/344) [`a48d2a7`](https://github.com/LightNetDev/LightNet/commit/a48d2a7ec9b782c763950b02cdbe420b1ed000ec) Thanks [@smn-cds](https://github.com/smn-cds)! - Remove preload React logic
+
+## 3.10.8
+
+### Patch Changes
+
+- [#340](https://github.com/LightNetDev/LightNet/pull/340) [`6162179`](https://github.com/LightNetDev/LightNet/commit/6162179b90e987359934bd08ac9d4500eb560e25) Thanks [@smn-cds](https://github.com/smn-cds)! - Tighten locale detection to avoid partial matches
+
+  When the URL path starts with a locale-like prefix, only full segment matches should be treated as a locale. Previously `/enx` was parsed as locale `en`; now only `/en/...` (or just `/en`) will match.
+
+- [#346](https://github.com/LightNetDev/LightNet/pull/346) [`2bc1560`](https://github.com/LightNetDev/LightNet/commit/2bc15600b0a9bcfc3410f155191b7ea1c9c5306a) Thanks [@smn-cds](https://github.com/smn-cds)! - Fixes an issue where top menus would not close when tapping outside the menu on iOS Safari.
+  This update also improves overall menu accessibility.
+
+- [#345](https://github.com/LightNetDev/LightNet/pull/345) [`1e6cddb`](https://github.com/LightNetDev/LightNet/commit/1e6cddba0e783f9d59da7d36dd154dbcd784ed6b) Thanks [@smn-cds](https://github.com/smn-cds)! - Fix menu not working on ios safari
+
+- [#340](https://github.com/LightNetDev/LightNet/pull/340) [`6162179`](https://github.com/LightNetDev/LightNet/commit/6162179b90e987359934bd08ac9d4500eb560e25) Thanks [@smn-cds](https://github.com/smn-cds)! - Update dependencies
+
 ## 3.10.7
 
 ### Patch Changes

package/__e2e__/admin.spec.ts

@@ -25,13 +25,13 @@ test.describe("Edit button on details page", () => {
     await expect(editButton).toBeHidden()
   })
 
-  test("Should show `Edit` button on book details page after visiting `/en/admin/` path.", async ({
+  test("Should show `Edit` button on book details page after visiting `/admin/` path.", async ({
     page,
     lightnet,
   }) => {
     const ln = await lightnet()
 
-    await page.goto(ln.resolveURL("/en/admin/"))
+    await page.goto(ln.resolveURL("/admin/"))
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
     ).toBeVisible()
@@ -45,15 +45,15 @@ test.describe("Edit button on details page", () => {
     await expect(editButton).toBeVisible()
     await expect(editButton).toHaveAttribute(
       "href",
-      "/en/admin/media/faithful-freestyle--en",
+      "/admin/media/faithful-freestyle--en",
     )
   })
 
-  test("Should show `Edit` button on video details page after visiting `/en/admin/` path.", async ({
+  test("Should show `Edit` button on video details page after visiting `/admin/` path.", async ({
     page,
     lightnet,
   }) => {
-    const ln = await lightnet("/en/admin/")
+    const ln = await lightnet("/admin/")
 
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
@@ -68,15 +68,15 @@ test.describe("Edit button on details page", () => {
     await expect(editButton).toBeVisible()
     await expect(editButton).toHaveAttribute(
       "href",
-      "/en/admin/media/how-to-kickflip--de",
+      "/admin/media/how-to-kickflip--de",
     )
   })
 
-  test("Should show `Edit` button on audio details page after visiting `/en/admin/` path.", async ({
+  test("Should show `Edit` button on audio details page after visiting `/admin/` path.", async ({
     page,
     lightnet,
   }) => {
-    const ln = await lightnet("/en/admin/")
+    const ln = await lightnet("/admin/")
 
     await expect(
       page.getByText("Admin features are enabled now.", { exact: true }),
@@ -91,7 +91,7 @@ test.describe("Edit button on details page", () => {
     await expect(editButton).toBeVisible()
     await expect(editButton).toHaveAttribute(
       "href",
-      "/en/admin/media/skate-sounds--en",
+      "/admin/media/skate-sounds--en",
     )
   })
 
@@ -99,7 +99,7 @@ test.describe("Edit button on details page", () => {
     page,
     lightnet,
   }) => {
-    const ln = await lightnet("/en/admin/")
+    const ln = await lightnet("/admin/")
     await ln.goto("/en/media/faithful-freestyle--en")
 
     const editButton = page.locator("#edit-btn")
@@ -107,7 +107,7 @@ test.describe("Edit button on details page", () => {
 
     await editButton.click()
     await expect(page).toHaveURL(
-      ln.resolveURL("/en/admin/media/faithful-freestyle--en"),
+      ln.resolveURL("/admin/media/faithful-freestyle--en"),
     )
     await expect(
       page.getByText("Edit media item", { exact: false }),
@@ -139,7 +139,7 @@ test.describe("Media item edit page", () => {
   }
 
   const getPublishButton = (page: Page) =>
-    page.getByRole("button", { name: "Publish Changes" }).first()
+    page.getByRole("button", { name: "Publish changes" }).first()
 
   const expectPublishedMessage = (page: Page) =>
     expect(
@@ -147,7 +147,7 @@ test.describe("Media item edit page", () => {
     ).toBeVisible()
 
   test("should edit title", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const updatedTitle = "Faithful Freestyle (Edited)"
@@ -175,7 +175,7 @@ test.describe("Media item edit page", () => {
   })
 
   test("Should update media type", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const typeSelect = page.getByLabel("Type").first()
@@ -198,7 +198,7 @@ test.describe("Media item edit page", () => {
   })
 
   test("Should update author name", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const authorsFieldset = page.getByRole("group", { name: "Authors" })
@@ -223,7 +223,7 @@ test.describe("Media item edit page", () => {
   })
 
   test("Should add author", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const authorsFieldset = page.getByRole("group", { name: "Authors" })
@@ -249,7 +249,7 @@ test.describe("Media item edit page", () => {
   })
 
   test("Should remove author", async ({ page, lightnet }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
     const writeFileRequest = await recordWriteFile(page)
 
     const authorsFieldset = page.getByRole("group", { name: "Authors" })
@@ -283,7 +283,7 @@ test.describe("Media item edit page", () => {
     page,
     lightnet,
   }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
 
     const commonIdInput = page.getByLabel("Common ID")
     await expect(commonIdInput).toHaveValue("faithful-freestyle")
@@ -302,7 +302,7 @@ test.describe("Media item edit page", () => {
     page,
     lightnet,
   }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
 
     const categoriesFieldset = page.getByRole("group", { name: "Categories" })
     await page.getByRole("button", { name: "Add Category" }).click()
@@ -325,7 +325,7 @@ test.describe("Media item edit page", () => {
     page,
     lightnet,
   }) => {
-    await lightnet("/en/admin/media/faithful-freestyle--en")
+    await lightnet("/admin/media/faithful-freestyle--en")
 
     const categoriesFieldset = page.getByRole("group", { name: "Categories" })
     await page.getByRole("button", { name: "Add Category" }).click()
@@ -347,4 +347,38 @@ test.describe("Media item edit page", () => {
       "true",
     )
   })
+
+  test("should not submit the form on enter", async ({ page, lightnet }) => {
+    await lightnet("/admin/media/faithful-freestyle--en")
+    const writeFileRequest = await recordWriteFile(page)
+    const writePromise = writeFileRequest()
+
+    const updatedTitle = "Faithful Freestyle (Enter key)"
+    const titleInput = page.getByLabel("Title")
+    await titleInput.fill(updatedTitle)
+
+    const publishButton = getPublishButton(page)
+    await expect(publishButton).toBeEnabled()
+
+    await titleInput.press("Enter")
+
+    const enterResult = await Promise.race([
+      writePromise.then(() => "submitted"),
+      page.waitForTimeout(500).then(() => "timeout"),
+    ])
+    expect(enterResult).toBe("timeout")
+    await expect(publishButton).toBeEnabled()
+
+    await publishButton.click()
+
+    const expectedMediaItem = JSON.parse(
+      await readFile(faithfulFreestyleMediaUrl, "utf-8"),
+    )
+    const { body } = await writePromise
+    expect(body).toEqual({
+      ...expectedMediaItem,
+      title: updatedTitle,
+    })
+    await expectPublishedMessage(page)
+  })
 })

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.54.0_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.54.0_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.54.0_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.54.0_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/node_modules/.bin/tailwind

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../tailwindcss/lib/cli.js" "$@"

package/__e2e__/fixtures/basics/node_modules/.bin/tailwindcss

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.18_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.19_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../tailwindcss/lib/cli.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -7,12 +7,12 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.4",
-    "astro": "^5.15.9",
-    "lightnet": "^3.10.6",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "astro": "^5.16.6",
+    "lightnet": "^3.11.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "sharp": "^0.34.5",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3"
   },
   "engines": {

package/__tests__/pages/details-page/create-content-metadata.spec.ts

@@ -102,9 +102,29 @@ test("Should create complete content metadata", () => {
       type: "package",
     },
   },
-].forEach(({ url, expected }) => {
-  test(`Should create content metadata for url ${url}`, () => {
-    expect(createContentMetadata({ url })).toMatchObject(expected)
+  {
+    url: "/some.zip",
+    label: "foo",
+    expected: {
+      label: "foo",
+      isExternal: false,
+      extension: "zip",
+      type: "package",
+    },
+  },
+  {
+    url: "/some.zip",
+    label: "",
+    expected: {
+      label: "some",
+      isExternal: false,
+      extension: "zip",
+      type: "package",
+    },
+  },
+].forEach(({ url, expected, label }) => {
+  test(`Should create content metadata for url '${url}' ${label !== undefined ? `and label '${label}'` : ""}`, () => {
+    expect(createContentMetadata({ url, label })).toMatchObject(expected)
   })
 })
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "3.10.7",
+  "version": "3.11.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -50,24 +50,24 @@
     "@hookform/resolvers": "^5.2.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
-    "@mdxeditor/editor": "^3.49.3",
+    "@mdxeditor/editor": "^3.52.1",
     "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/react-virtual": "^3.13.12",
+    "@tanstack/react-virtual": "^3.13.13",
     "daisyui": "^4.12.24",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.6.3",
+    "i18next": "^25.7.3",
     "marked": "^16.4.2",
-    "react-hook-form": "^7.66.1",
-    "yaml": "^2.8.1"
+    "react-hook-form": "^7.69.0",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.56.1",
-    "@types/node": "^22.19.1",
-    "@types/react": "^19.2.6",
+    "@playwright/test": "^1.57.0",
+    "@types/node": "^22.19.3",
+    "@types/react": "^19.2.7",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.10"
+    "vitest": "^4.0.16"
   },
   "engines": {
     "node": ">=22"

package/src/admin/components/form/DynamicArray.tsx

@@ -8,70 +8,122 @@ import {
 } from "react-hook-form"
 
 import Icon from "../../../components/Icon"
-import { useI18n } from "../../../i18n/react/useI18n"
+import { useI18n } from "../../../i18n/react/use-i18n"
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
+import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
+import { getBorderClass } from "./utils/get-border-class"
 
 export default function DynamicArray<TFieldValues extends FieldValues>({
   control,
   name,
   label,
+  required = false,
   hint,
   renderElement,
-  addButton,
+  renderElementMeta,
+  renderAddButton,
 }: {
   name: ArrayPath<TFieldValues>
+  required?: boolean
   label: string
   hint?: string
   control: Control<TFieldValues>
   renderElement: (index: number) => ReactNode
-  addButton: {
-    label: string
-    onClick: (
-      append: UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>,
-      elementIndex: number,
-    ) => void
-  }
+  renderElementMeta?: (index: number) => ReactNode
+  renderAddButton: (args: {
+    addElement: UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>
+    index: number
+  }) => ReactNode
 }) {
-  const { fields, append, remove } = useFieldArray({
+  const { fields, append, remove, swap } = useFieldArray({
     name,
     control,
   })
-  const { t } = useI18n()
   const errorMessage = useFieldError({ control, name })
+  const isDirty = useFieldDirty({ control, name })
   return (
     <fieldset key={name}>
       <legend>
-        <Label label={label} />
+        <Label
+          required={required}
+          label={label}
+          isDirty={isDirty}
+          isInvalid={!!errorMessage}
+        />
       </legend>
 
-      <div className="flex w-full flex-col divide-y divide-gray-300 rounded-lg rounded-ss-none border border-gray-300 bg-gray-100 shadow-sm">
+      <div
+        className={`flex w-full flex-col gap-1 rounded-xl rounded-ss-none ${getBorderClass({ isDirty, errorMessage })} bg-slate-200 p-1 shadow-inner`}
+      >
         {fields.map((field, index) => (
-          <div className="flex w-full items-center gap-2 p-2" key={field.id}>
-            <div className="flex grow flex-col">{renderElement(index)}</div>
-            <button
-              className="flex items-center rounded-md p-2 text-gray-600 transition-colors ease-in-out hover:text-rose-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700"
-              type="button"
-              onClick={() => remove(index)}
+          <div
+            className="w-full gap-2 rounded-xl bg-slate-50 px-2 pb-4 shadow-sm"
+            key={field.id}
+          >
+            <div
+              className={`flex items-center ${renderElementMeta ? "justify-between" : "justify-end"}`}
             >
-              <Icon className="mdi--remove" ariaLabel={t("ln.admin.remove")} />
-            </button>
+              {renderElementMeta && renderElementMeta(index)}
+              <div className="-me-2 flex">
+                <ItemActionButton
+                  icon="mdi--arrow-up"
+                  label="ln.admin.move-up"
+                  disabled={index === 0}
+                  onClick={() => swap(index, index - 1)}
+                />
+                <ItemActionButton
+                  icon="mdi--arrow-down"
+                  label="ln.admin.move-down"
+                  disabled={index === fields.length - 1}
+                  onClick={() => swap(index, index + 1)}
+                />
+                <ItemActionButton
+                  icon="mdi--remove"
+                  label="ln.admin.remove"
+                  onClick={() => remove(index)}
+                  className="hover:!text-rose-800"
+                />
+              </div>
+            </div>
+
+            {renderElement(index)}
           </div>
         ))}
-        <button
-          type="button"
-          className="rounded-b-lg p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700"
-          onClick={() => {
-            addButton.onClick(append, fields.length)
-          }}
-        >
-          {t(addButton.label)}
-        </button>
+        <div className="flex flex-col items-center py-2">
+          {renderAddButton({ addElement: append, index: fields.length })}
+        </div>
       </div>
       <ErrorMessage message={errorMessage} />
       <Hint preserveSpace={true} label={hint} />
     </fieldset>
   )
 }
+
+function ItemActionButton({
+  label,
+  icon,
+  onClick,
+  disabled = false,
+  className,
+}: {
+  label: string
+  icon: string
+  disabled?: boolean
+  onClick: () => void
+  className?: string
+}) {
+  const { t } = useI18n()
+  return (
+    <button
+      className={`flex items-center rounded-xl p-2 text-slate-600 transition-colors ease-in-out hover:text-sky-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700 disabled:text-slate-300 ${className}`}
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <Icon className={icon} ariaLabel={t(label)} />
+    </button>
+  )
+}

package/src/admin/components/form/Input.tsx

@@ -1,19 +1,27 @@
 import type { InputHTMLAttributes } from "react"
-import { type Control, type FieldValues, type Path } from "react-hook-form"
+import {
+  type Control,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+} from "react-hook-form"
 
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
 import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
+import { getBorderClass } from "./utils/get-border-class"
 
 type Props<TFieldValues extends FieldValues> = {
   name: Path<TFieldValues>
+  required?: boolean
   label?: string
   labelSize?: "small" | "medium"
   hint?: string
   preserveHintSpace?: boolean
   control: Control<TFieldValues>
+  registerOptions?: RegisterOptions<TFieldValues>
 } & InputHTMLAttributes<HTMLInputElement>
 
 export default function Input<TFieldValues extends FieldValues>({
@@ -23,10 +31,14 @@ export default function Input<TFieldValues extends FieldValues>({
   hint,
   preserveHintSpace = true,
   control,
+  className,
+  required = false,
+  registerOptions,
   ...inputProps
 }: Props<TFieldValues>) {
   const isDirty = useFieldDirty({ control, name })
   const errorMessage = useFieldError({ control, name })
+
   return (
     <div key={name} className="group flex w-full flex-col">
       {label && (
@@ -36,15 +48,17 @@ export default function Input<TFieldValues extends FieldValues>({
             size={labelSize}
             isDirty={isDirty}
             isInvalid={!!errorMessage}
+            required={required}
           />
         </label>
       )}
 
       <input
-        className={`dy-input dy-input-bordered border-gray-300 shadow-inner focus:border-blue-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
+        className={`rounded-xl ${getBorderClass({ isDirty, errorMessage })} px-4 py-3 shadow-inner disabled:text-slate-500 ${label ? "rounded-ss-none" : ""} ${className}`}
         id={name}
         aria-invalid={!!errorMessage}
-        {...control.register(name)}
+        aria-required={required}
+        {...control.register(name, registerOptions)}
         {...inputProps}
       />
       <ErrorMessage message={errorMessage} />

package/src/admin/components/form/LazyLoadedMarkdownEditor.tsx

@@ -47,7 +47,7 @@ export default function LazyLoadedMarkdownEditor<
           markdown={value ?? ""}
           onBlur={onBlur}
           onChange={onChange}
-          contentEditableClassName="prose bg-gray-50 h-80 w-full max-w-full overflow-y-auto"
+          contentEditableClassName="prose bg-slate-50 h-80 w-full max-w-full overflow-y-auto"
           ref={ref}
           onError={(error) =>
             console.error("Error while editing markdown", error)
@@ -78,7 +78,7 @@ export default function LazyLoadedMarkdownEditor<
                   <CreateLink />
                 </>
               ),
-              toolbarClassName: "!rounded-none",
+              toolbarClassName: "!rounded-none !bg-slate-200",
             }),
           ]}
         />

package/src/admin/components/form/MarkdownEditor.tsx

@@ -6,6 +6,7 @@ import Hint from "./atoms/Hint"
 import Label from "./atoms/Label"
 import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
+import { getBorderClass } from "./utils/get-border-class"
 
 const LazyLoadedMarkdownEditor = lazy(
   () => import("./LazyLoadedMarkdownEditor"),
@@ -14,11 +15,13 @@ const LazyLoadedMarkdownEditor = lazy(
 export default function MarkdownEditor<TFieldValues extends FieldValues>({
   control,
   name,
+  required = false,
   label,
   hint,
 }: {
   name: Path<TFieldValues>
   label: string
+  required?: boolean
   hint?: string
   control: Control<TFieldValues>
 }) {
@@ -28,16 +31,21 @@ export default function MarkdownEditor<TFieldValues extends FieldValues>({
   return (
     <fieldset key={name} className="group">
       <legend>
-        <Label label={label} isDirty={isDirty} isInvalid={!!errorMessage} />
+        <Label
+          required={required}
+          label={label}
+          isDirty={isDirty}
+          isInvalid={!!errorMessage}
+        />
       </legend>
 
       <div
-        className={`overflow-hidden rounded-lg rounded-ss-none border border-gray-300 shadow-sm group-focus-within:border-blue-700 group-focus-within:ring-1 group-focus-within:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""}`}
+        className={`overflow-hidden rounded-xl rounded-ss-none ${getBorderClass({ isDirty, errorMessage, focusWithin: true })} shadow-sm`}
       >
         <Suspense
           fallback={
-            <div className="h-[22.75rem] w-full bg-gray-50">
-              <div className="h-10 bg-gray-100"></div>
+            <div className="h-[22.75rem] w-full bg-slate-50">
+              <div className="h-10 bg-slate-100"></div>
             </div>
           }
         >