lightnet 3.10.6 → 3.10.8

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # lightnet
 
+## 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
+
+- [#337](https://github.com/LightNetDev/LightNet/pull/337) [`ac32a7f`](https://github.com/LightNetDev/LightNet/commit/ac32a7f35b58d5aff39dd45531d77247ae24c61f) Thanks [@smn-cds](https://github.com/smn-cds)! - Do not use ALL CAPS casing for primary buttons.
+
+- [#337](https://github.com/LightNetDev/LightNet/pull/337) [`ac32a7f`](https://github.com/LightNetDev/LightNet/commit/ac32a7f35b58d5aff39dd45531d77247ae24c61f) Thanks [@smn-cds](https://github.com/smn-cds)! - Update dependencies
+
 ## 3.10.6
 
 ### 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 }),
@@ -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()

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.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_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.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_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.1_@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.16.1_@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"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_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.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_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.1_@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.16.1_@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"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -7,8 +7,8 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.4",
-    "astro": "^5.15.8",
-    "lightnet": "^3.10.5",
+    "astro": "^5.16.1",
+    "lightnet": "^3.10.7",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "sharp": "^0.34.5",

package/__tests__/utils/markdown.spec.ts

@@ -27,12 +27,28 @@ test("Should remove headers", () => {
   expect(markdownToText("# H1\n## H2 words#")).toBe("H1\nH2 words#")
 })
 
+test("Should remove underline", () => {
+  expect(markdownToText("Some <u>underlined</u> Words /u >")).toBe(
+    "Some underlined Words /u >",
+  )
+})
+
+test("Should remove encoded space", () => {
+  expect(markdownToText("Text&#x20;with&#x20;space&#x20;")).toBe(
+    "Text with space ",
+  )
+})
+
 test("Should remove inline modifiers", async () => {
   expect(markdownToText("this is **some bold** and _italic_ text")).toBe(
     "this is some bold and italic text",
   )
 })
 
+test("Should remove code blocks", async () => {
+  expect(markdownToText("some\n```js \ncode\n```\n")).toBe("some\ncode\n")
+})
+
 test("Should remove list", () => {
   expect(markdownToText("- this is **bold**\n- this is normal")).toBe(
     "this is bold\nthis is normal",

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.6",
+  "version": "3.10.8",
   "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.1",
+    "@mdxeditor/editor": "^3.50.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-virtual": "^3.13.12",
     "daisyui": "^4.12.24",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.6.2",
+    "i18next": "^25.6.3",
     "marked": "^16.4.2",
-    "react-hook-form": "^7.66.0",
+    "react-hook-form": "^7.66.1",
     "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.57.0",
     "@types/node": "^22.19.1",
-    "@types/react": "^19.2.5",
+    "@types/react": "^19.2.7",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.9"
+    "vitest": "^4.0.14"
   },
   "engines": {
     "node": ">=22"

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

@@ -8,10 +8,10 @@ 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 Legend from "./atoms/Legend"
+import Label from "./atoms/Label"
 import { useFieldError } from "./hooks/use-field-error"
 
 export default function DynamicArray<TFieldValues extends FieldValues>({
@@ -43,13 +43,16 @@ export default function DynamicArray<TFieldValues extends FieldValues>({
   const errorMessage = useFieldError({ control, name })
   return (
     <fieldset key={name}>
-      <Legend label={label} />
-      <div className="flex w-full flex-col divide-y divide-gray-300 overflow-hidden rounded-lg border border-gray-300 bg-gray-100 shadow-sm">
+      <legend>
+        <Label label={label} />
+      </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">
         {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 p-2 text-gray-600 transition-colors ease-in-out hover:text-rose-800"
+              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-sky-700"
               type="button"
               onClick={() => remove(index)}
             >
@@ -59,7 +62,7 @@ export default function DynamicArray<TFieldValues extends FieldValues>({
         ))}
         <button
           type="button"
-          className="p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-gray-200"
+          className="rounded-b-lg p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-sky-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700"
           onClick={() => {
             addButton.onClick(append, fields.length)
           }}
@@ -68,7 +71,7 @@ export default function DynamicArray<TFieldValues extends FieldValues>({
         </button>
       </div>
       <ErrorMessage message={errorMessage} />
-      <Hint label={hint} />
+      <Hint preserveSpace={true} label={hint} />
     </fieldset>
   )
 }

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

@@ -1,39 +1,54 @@
+import type { InputHTMLAttributes } from "react"
 import { type Control, type FieldValues, type Path } 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"
 
+type Props<TFieldValues extends FieldValues> = {
+  name: Path<TFieldValues>
+  label?: string
+  labelSize?: "small" | "medium"
+  hint?: string
+  preserveHintSpace?: boolean
+  control: Control<TFieldValues>
+} & InputHTMLAttributes<HTMLInputElement>
+
 export default function Input<TFieldValues extends FieldValues>({
   name,
   label,
-  defaultValue,
+  labelSize,
   hint,
+  preserveHintSpace = true,
   control,
-  type = "text",
-}: {
-  name: Path<TFieldValues>
-  label: string
-  defaultValue?: string
-  hint?: string
-  control: Control<TFieldValues>
-  type?: "text" | "date"
-}) {
+  ...inputProps
+}: Props<TFieldValues>) {
+  const isDirty = useFieldDirty({ control, name })
   const errorMessage = useFieldError({ control, name })
   return (
-    <div key={name} className="flex w-full flex-col">
-      <Label for={name} label={label} />
+    <div key={name} className="group flex w-full flex-col">
+      {label && (
+        <label htmlFor={name}>
+          <Label
+            label={label}
+            size={labelSize}
+            isDirty={isDirty}
+            isInvalid={!!errorMessage}
+          />
+        </label>
+      )}
+
       <input
-        className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
-        type={type}
+        className={`dy-input dy-input-bordered border-gray-300 shadow-inner focus:border-sky-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
         id={name}
-        defaultValue={defaultValue}
         aria-invalid={!!errorMessage}
         {...control.register(name)}
+        {...inputProps}
       />
       <ErrorMessage message={errorMessage} />
-      <Hint label={hint} />
+      <Hint preserveSpace={preserveHintSpace} label={hint} />
     </div>
   )
 }

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

@@ -3,18 +3,20 @@ import "@mdxeditor/editor/style.css"
 import {
   BlockTypeSelect,
   BoldItalicUnderlineToggles,
+  type CodeBlockEditorProps,
+  codeBlockPlugin,
   CreateLink,
-  diffSourcePlugin,
-  DiffSourceToggleWrapper,
   headingsPlugin,
   linkDialogPlugin,
   linkPlugin,
   listsPlugin,
   ListsToggle,
+  markdownShortcutPlugin,
   MDXEditor,
   quotePlugin,
   toolbarPlugin,
   UndoRedo,
+  useCodeBlockEditorContext,
 } from "@mdxeditor/editor"
 import {
   type Control,
@@ -31,12 +33,10 @@ export default function LazyLoadedMarkdownEditor<
   TFieldValues extends FieldValues,
 >({
   control,
-  defaultValue,
   name,
 }: {
   name: Path<TFieldValues>
   control: Control<TFieldValues>
-  defaultValue?: string
 }) {
   return (
     <Controller
@@ -49,26 +49,36 @@ export default function LazyLoadedMarkdownEditor<
           onChange={onChange}
           contentEditableClassName="prose bg-gray-50 h-80 w-full max-w-full overflow-y-auto"
           ref={ref}
+          onError={(error) =>
+            console.error("Error while editing markdown", error)
+          }
           plugins={[
             headingsPlugin(),
             listsPlugin(),
             linkPlugin(),
-            linkDialogPlugin(),
-            diffSourcePlugin({
-              viewMode: "rich-text",
-              diffMarkdown: defaultValue,
+            codeBlockPlugin({
+              codeBlockEditorDescriptors: [
+                {
+                  match: () => true,
+                  priority: 0,
+                  Editor: TextAreaCodeEditor,
+                },
+              ],
             }),
+            linkDialogPlugin(),
             quotePlugin(),
+            markdownShortcutPlugin(),
             toolbarPlugin({
               toolbarContents: () => (
-                <DiffSourceToggleWrapper>
+                <>
                   <UndoRedo />
                   <BoldItalicUnderlineToggles />
                   <BlockTypeSelect />
                   <ListsToggle options={["bullet", "number"]} />
                   <CreateLink />
-                </DiffSourceToggleWrapper>
+                </>
               ),
+              toolbarClassName: "!rounded-none",
             }),
           ]}
         />
@@ -76,3 +86,17 @@ export default function LazyLoadedMarkdownEditor<
     />
   )
 }
+
+function TextAreaCodeEditor(props: CodeBlockEditorProps) {
+  const cb = useCodeBlockEditorContext()
+  return (
+    <div onKeyDown={(e) => e.nativeEvent.stopImmediatePropagation()}>
+      <textarea
+        rows={3}
+        cols={20}
+        defaultValue={props.code}
+        onChange={(e) => cb.setCode(e.target.value)}
+      />
+    </div>
+  )
+}

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

@@ -3,7 +3,8 @@ import { type Control, type FieldValues, type Path } from "react-hook-form"
 
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
-import Legend from "./atoms/Legend"
+import Label from "./atoms/Label"
+import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
 
 const LazyLoadedMarkdownEditor = lazy(
@@ -12,7 +13,6 @@ const LazyLoadedMarkdownEditor = lazy(
 
 export default function MarkdownEditor<TFieldValues extends FieldValues>({
   control,
-  defaultValue,
   name,
   label,
   hint,
@@ -21,15 +21,18 @@ export default function MarkdownEditor<TFieldValues extends FieldValues>({
   label: string
   hint?: string
   control: Control<TFieldValues>
-  defaultValue?: string
 }) {
+  const isDirty = useFieldDirty({ control, name })
   const errorMessage = useFieldError({ control, name })
 
   return (
-    <fieldset key={name}>
-      <Legend label={label} />
+    <fieldset key={name} className="group">
+      <legend>
+        <Label label={label} isDirty={isDirty} isInvalid={!!errorMessage} />
+      </legend>
+
       <div
-        className={`overflow-hidden rounded-lg border border-gray-300 shadow-sm ${errorMessage ? "border-rose-800" : ""}`}
+        className={`overflow-hidden rounded-lg rounded-ss-none border border-gray-300 shadow-sm group-focus-within:border-sky-700 group-focus-within:ring-1 group-focus-within:ring-sky-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""}`}
       >
         <Suspense
           fallback={
@@ -41,12 +44,11 @@ export default function MarkdownEditor<TFieldValues extends FieldValues>({
           <LazyLoadedMarkdownEditor
             control={control as Control<any>}
             name={name}
-            defaultValue={defaultValue}
           />
         </Suspense>
       </div>
       <ErrorMessage message={errorMessage} />
-      <Hint label={hint} />
+      <Hint preserveSpace={true} label={hint} />
     </fieldset>
   )
 }

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

@@ -1,35 +1,50 @@
-import type { Control, FieldValues, Path } from "react-hook-form"
+import { type Control, type FieldValues, type Path } 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"
 
 export default function Select<TFieldValues extends FieldValues>({
   name,
   label,
+  labelSize,
   control,
   defaultValue,
   hint,
+  preserveHintSpace = true,
   options,
 }: {
   name: Path<TFieldValues>
-  label: string
+  label?: string
+  labelSize?: "small" | "medium"
   hint?: string
+  preserveHintSpace?: boolean
   defaultValue?: string
   control: Control<TFieldValues>
   options: { id: string; labelText?: string }[]
 }) {
+  const isDirty = useFieldDirty({ control, name })
   const errorMessage = useFieldError({ control, name })
   return (
-    <div key={name} className="flex w-full flex-col">
-      <Label for={name} label={label} />
+    <div key={name} className="group flex w-full flex-col">
+      {label && (
+        <label htmlFor={name}>
+          <Label
+            label={label}
+            size={labelSize}
+            isDirty={isDirty}
+            isInvalid={!!errorMessage}
+          />
+        </label>
+      )}
       <select
         {...control.register(name)}
         id={name}
         aria-invalid={!!errorMessage}
         defaultValue={defaultValue}
-        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
+        className={`dy-select dy-select-bordered text-base shadow-sm focus:border-sky-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-sky-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
       >
         {options.map(({ id, labelText }) => (
           <option key={id} value={id}>
@@ -38,7 +53,7 @@ export default function Select<TFieldValues extends FieldValues>({
         ))}
       </select>
       <ErrorMessage message={errorMessage} />
-      <Hint label={hint} />
+      <Hint preserveSpace={preserveHintSpace} label={hint} />
     </div>
   )
 }

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

@@ -2,16 +2,16 @@ import { useEffect, useRef, useState } from "react"
 import { type Control, useFormState } from "react-hook-form"
 
 import Icon from "../../../components/Icon"
-import { useI18n } from "../../../i18n/react/useI18n"
+import { useI18n } from "../../../i18n/react/use-i18n"
 import type { MediaItem } from "../../types/media-item"
 
 const SUCCESS_DURATION_MS = 2000
 
 const baseButtonClass =
-  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-4 py-3 font-bold uppercase shadow-sm transition-colors easy-in-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 disabled:cursor-not-allowed"
+  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-4 py-3 font-bold shadow-sm transition-colors easy-in-out focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-sky-700 focus-visible:ring-offset-1 disabled:cursor-not-allowed"
 
 const buttonStateClasses = {
-  idle: "bg-gray-800 text-gray-100 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-600 disabled:text-gray-200",
+  idle: "bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-500 disabled:text-gray-300",
   error:
     "bg-rose-700 text-white hover:bg-rose-800 hover:text-white disabled:bg-rose-600",
   success:
@@ -40,9 +40,10 @@ export default function SubmitButton({
   className?: string
 }) {
   const { t } = useI18n()
-  const { isSubmitting, isSubmitSuccessful, submitCount } = useFormState({
-    control,
-  })
+  const { isSubmitting, isSubmitSuccessful, submitCount, isDirty } =
+    useFormState({
+      control,
+    })
 
   const buttonState = useButtonState(isSubmitSuccessful, submitCount)
   const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]} ${className}`
@@ -50,7 +51,11 @@ export default function SubmitButton({
   const icon = icons[buttonState]
 
   return (
-    <button className={buttonClass} type="submit" disabled={isSubmitting}>
+    <button
+      className={buttonClass}
+      type="submit"
+      disabled={isSubmitting || !isDirty}
+    >
       {icon && <Icon className={icon} ariaLabel="" />}
       {t(label)}
     </button>