@nixxie-cms/core 2.1.0 → 2.2.0

package/internal-unstable/admin-ui/pages/CreateItemPage/dist/nixxie-cms-core-internal-unstable-admin-ui-pages-CreateItemPage.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var router = require('next/router');
 var button = require('@keystar/ui/button');
 var layout = require('@keystar/ui/layout');
-var adminUi_context_dist_nixxieCmsCoreAdminUiContext = require('../../../../../dist/context-b5204629.cjs.js');
+var adminUi_context_dist_nixxieCmsCoreAdminUiContext = require('../../../../../dist/context-2ce61d0b.cjs.js');
 require('@keystar/ui/table');
 var jsxRuntime = require('react/jsx-runtime');
 require('@keystar/ui/style');
@@ -20,10 +20,10 @@ require('@keystar/ui/icon/icons/alertTriangleIcon');
 require('@keystar/ui/notice');
 require('@keystar/ui/slots');
 require('next/link');
-var PageContainer = require('../../../../../dist/PageContainer-abd7159f.cjs.js');
-var Fields = require('../../../../../dist/Fields-e2c28056.cjs.js');
-var useCreateItem = require('../../../../../dist/useCreateItem-1be4987e.cjs.js');
-var GraphQLErrorNotice = require('../../../../../dist/GraphQLErrorNotice-cd74180d.cjs.js');
+var PageContainer = require('../../../../../dist/PageContainer-4095555a.cjs.js');
+var usePreventNavigation = require('../../../../../dist/usePreventNavigation-d4f9f4fa.cjs.js');
+var useCreateItem = require('../../../../../dist/useCreateItem-acf06f77.cjs.js');
+var GraphQLErrorNotice = require('../../../../../dist/GraphQLErrorNotice-c8890f80.cjs.js');
 require('fast-deep-equal');
 require('graphql');
 var common = require('../../../../../dist/common-5933f758.cjs.js');
@@ -35,8 +35,8 @@ require('@nixxie-cms/core/admin-ui/router');
 require('@keystar/ui/icon/icons/chevronLeftIcon');
 require('@keystar/ui/icon/icons/chevronRightIcon');
 require('@keystar/ui/icon/icons/undo2Icon');
+require('@keystar/ui/number-field');
 require('@keystar/ui/picker');
-require('@keystar/ui/tag');
 require('@keystar/ui/tooltip');
 require('../../../../../dist/admin-meta-graphql-306c224a.cjs.js');
 require('@apollo/client');
@@ -97,7 +97,7 @@ function CreateItemPage({
           minWidth: 0,
           children: [/*#__PURE__*/jsxRuntime.jsx(GraphQLErrorNotice.GraphQLErrorNotice, {
             errors: [createItem.error]
-          }), /*#__PURE__*/jsxRuntime.jsx(Fields.Fields, {
+          }), /*#__PURE__*/jsxRuntime.jsx(usePreventNavigation.Fields, {
             ...createItem.props
           })]
         }), /*#__PURE__*/jsxRuntime.jsx(common.BaseToolbar, {

package/internal-unstable/admin-ui/pages/CreateItemPage/dist/nixxie-cms-core-internal-unstable-admin-ui-pages-CreateItemPage.esm.js

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { Button } from '@keystar/ui/button';
 import { VStack } from '@keystar/ui/layout';
-import { a as useList } from '../../../../../dist/context-af9957ed.esm.js';
+import { a as useList } from '../../../../../dist/context-2924eaaa.esm.js';
 import '@keystar/ui/table';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@keystar/ui/style';
@@ -16,10 +16,10 @@ import '@keystar/ui/icon/icons/alertTriangleIcon';
 import '@keystar/ui/notice';
 import '@keystar/ui/slots';
 import 'next/link';
-import { P as PageContainer } from '../../../../../dist/PageContainer-5ae731cc.esm.js';
-import { F as Fields } from '../../../../../dist/Fields-956d9a14.esm.js';
-import { u as useCreateItem } from '../../../../../dist/useCreateItem-1f94d252.esm.js';
-import { G as GraphQLErrorNotice } from '../../../../../dist/GraphQLErrorNotice-d9f0931b.esm.js';
+import { P as PageContainer } from '../../../../../dist/PageContainer-355cfbfa.esm.js';
+import { F as Fields } from '../../../../../dist/usePreventNavigation-093389dd.esm.js';
+import { u as useCreateItem } from '../../../../../dist/useCreateItem-36a75f1c.esm.js';
+import { G as GraphQLErrorNotice } from '../../../../../dist/GraphQLErrorNotice-7594a9f8.esm.js';
 import 'fast-deep-equal';
 import 'graphql';
 import { I as ItemPageHeader, C as ColumnLayout, B as BaseToolbar } from '../../../../../dist/common-ea5c441a.esm.js';
@@ -31,8 +31,8 @@ import '@nixxie-cms/core/admin-ui/router';
 import '@keystar/ui/icon/icons/chevronLeftIcon';
 import '@keystar/ui/icon/icons/chevronRightIcon';
 import '@keystar/ui/icon/icons/undo2Icon';
+import '@keystar/ui/number-field';
 import '@keystar/ui/picker';
-import '@keystar/ui/tag';
 import '@keystar/ui/tooltip';
 import '../../../../../dist/admin-meta-graphql-0e6e606e.esm.js';
 import '@apollo/client';

package/internal-unstable/admin-ui/pages/HomePage/dist/nixxie-cms-core-internal-unstable-admin-ui-pages-HomePage.cjs.js

@@ -7,9 +7,9 @@ var style = require('@keystar/ui/style');
 var typography = require('@keystar/ui/typography');
 var client = require('@apollo/client');
 var react$1 = require('@apollo/client/react');
-var GraphQLErrorNotice = require('../../../../../dist/GraphQLErrorNotice-cd74180d.cjs.js');
-var PageContainer = require('../../../../../dist/PageContainer-abd7159f.cjs.js');
-var adminUi_context_dist_nixxieCmsCoreAdminUiContext = require('../../../../../dist/context-b5204629.cjs.js');
+var GraphQLErrorNotice = require('../../../../../dist/GraphQLErrorNotice-c8890f80.cjs.js');
+var PageContainer = require('../../../../../dist/PageContainer-4095555a.cjs.js');
+var adminUi_context_dist_nixxieCmsCoreAdminUiContext = require('../../../../../dist/context-2ce61d0b.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('@keystar/ui/layout');
 require('@keystar/ui/notice');
@@ -17,6 +17,7 @@ require('@keystar/ui/slots');
 require('next/head');
 require('next/link');
 require('next/router');
+require('@react-aria/utils');
 require('apollo-upload-client/UploadHttpLink.mjs');
 require('@keystar/ui/core');
 require('@keystar/ui/toast');
@@ -26,8 +27,8 @@ require('@keystar/ui/icon');
 require('@keystar/ui/icon/icons/chevronLeftIcon');
 require('@keystar/ui/icon/icons/chevronRightIcon');
 require('@keystar/ui/icon/icons/undo2Icon');
+require('@keystar/ui/number-field');
 require('@keystar/ui/picker');
-require('@keystar/ui/tag');
 require('@keystar/ui/tooltip');
 require('../../../../../dist/admin-meta-graphql-306c224a.cjs.js');
 require('../../../../../dist/filters-b3e5eb50.cjs.js');
@@ -42,14 +43,14 @@ function CollectionCard({
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: style.css({
       position: 'relative',
-      backgroundColor: '#ffffff',
-      border: '1px solid #ebebeb',
+      backgroundColor: style.tokenSchema.color.background.canvas,
+      border: `1px solid ${style.tokenSchema.color.border.muted}`,
       borderRadius: 8,
       overflow: 'hidden',
       transition: 'box-shadow 180ms, border-color 180ms',
       '&:hover': {
-        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
-        borderColor: '#d8d8d8'
+        boxShadow: `0 2px 12px ${style.tokenSchema.color.shadow.muted}`,
+        borderColor: style.tokenSchema.color.border.emphasis
       }
     }),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -63,7 +64,7 @@ function CollectionCard({
           fontWeight: 600,
           letterSpacing: '0.09em',
           textTransform: 'uppercase',
-          color: '#a3a3a3',
+          color: style.tokenSchema.color.foreground.neutralSecondary,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between'
@@ -83,11 +84,11 @@ function CollectionCard({
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
-            width: 22,
-            height: 22,
+            width: 28,
+            height: 28,
             borderRadius: 5,
-            border: '1px solid #ebebeb',
-            color: '#a3a3a3',
+            border: `1px solid ${style.tokenSchema.color.border.muted}`,
+            color: style.tokenSchema.color.foreground.neutralSecondary,
             textDecoration: 'none',
             fontSize: 14,
             lineHeight: 1,
@@ -95,9 +96,9 @@ function CollectionCard({
             marginLeft: 6,
             transition: 'border-color 130ms, color 130ms, background 130ms',
             '&:hover': {
-              borderColor: '#000000',
-              color: '#000000',
-              background: '#f5f5f5'
+              borderColor: style.tokenSchema.color.scale.black,
+              color: style.tokenSchema.color.foreground.neutralEmphasis,
+              background: style.tokenSchema.color.background.surfaceSecondary
             }
           }),
           children: "+"
@@ -119,7 +120,7 @@ function CollectionCard({
             fontSize: 34,
             fontWeight: 700,
             letterSpacing: '-0.05em',
-            color: count === null ? '#e8e8e8' : '#000000',
+            color: count === null ? style.tokenSchema.color.border.muted : style.tokenSchema.color.foreground.neutralEmphasis,
             lineHeight: 1,
             fontVariantNumeric: 'tabular-nums'
           }),
@@ -128,13 +129,13 @@ function CollectionCard({
           className: style.css({
             margin: 0,
             fontSize: 12,
-            color: '#c8c8c8',
+            color: style.tokenSchema.color.foreground.neutralSecondary,
             display: 'flex',
             alignItems: 'center',
             gap: 4,
             transition: 'color 130ms',
             'a:hover &': {
-              color: '#636363'
+              color: style.tokenSchema.color.foreground.neutralEmphasis
             }
           }),
           children: [list.isSingleton ? 'Open' : 'View all', /*#__PURE__*/jsxRuntime.jsx("svg", {
@@ -175,7 +176,7 @@ function QuickCreate() {
         fontWeight: 600,
         letterSpacing: '0.10em',
         textTransform: 'uppercase',
-        color: '#b8b8b8'
+        color: style.tokenSchema.color.foreground.neutralSecondary
       }),
       children: "Quick Create"
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -193,17 +194,17 @@ function QuickCreate() {
           paddingInline: '12px',
           paddingBlock: '6px',
           borderRadius: 6,
-          border: '1px solid #e8e8e8',
-          backgroundColor: '#ffffff',
+          border: `1px solid ${style.tokenSchema.color.border.muted}`,
+          backgroundColor: style.tokenSchema.color.background.canvas,
           fontSize: 12.5,
           fontWeight: 500,
-          color: '#525252',
+          color: style.tokenSchema.color.foreground.neutral,
           textDecoration: 'none',
           transition: 'border-color 130ms, color 130ms, background 130ms',
           '&:hover': {
-            borderColor: '#000000',
-            color: '#000000',
-            background: '#fafafa'
+            borderColor: style.tokenSchema.color.scale.black,
+            color: style.tokenSchema.color.foreground.neutralEmphasis,
+            background: style.tokenSchema.color.background.surface
           }
         }),
         children: [/*#__PURE__*/jsxRuntime.jsx("svg", {
@@ -268,20 +269,20 @@ function HomePage() {
         className: style.css({
           marginBottom: 28
         }),
-        children: [/*#__PURE__*/jsxRuntime.jsx("h1", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("h2", {
           className: style.css({
             margin: '0 0 4px',
             fontSize: 20,
             fontWeight: 700,
             letterSpacing: '-0.03em',
-            color: '#0a0a0a'
+            color: style.tokenSchema.color.foreground.neutralEmphasis
           }),
           children: "Overview"
         }), /*#__PURE__*/jsxRuntime.jsxs("p", {
           className: style.css({
             margin: 0,
             fontSize: 13,
-            color: '#a3a3a3'
+            color: style.tokenSchema.color.foreground.neutralSecondary
           }),
           children: [visibleLists.length, " collection", visibleLists.length !== 1 ? 's' : '']
         })]
@@ -308,7 +309,7 @@ function HomePage() {
         className: style.css({
           marginTop: 48,
           fontSize: 11.5,
-          color: '#d4d4d4',
+          color: style.tokenSchema.color.foreground.neutralSecondary,
           display: 'flex',
           alignItems: 'center',
           gap: 6
@@ -317,12 +318,12 @@ function HomePage() {
           className: style.css({
             display: 'inline-flex',
             padding: '1px 6px',
-            background: '#ffffff',
-            border: '1px solid #ebebeb',
+            background: style.tokenSchema.color.background.canvas,
+            border: `1px solid ${style.tokenSchema.color.border.muted}`,
             borderRadius: 4,
             fontSize: 10.5,
             fontFamily: 'inherit',
-            color: '#a3a3a3'
+            color: style.tokenSchema.color.foreground.neutralSecondary
           }),
           children: "\u2318K"
         }), /*#__PURE__*/jsxRuntime.jsx("span", {

package/internal-unstable/admin-ui/pages/HomePage/dist/nixxie-cms-core-internal-unstable-admin-ui-pages-HomePage.esm.js

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
-import { css } from '@keystar/ui/style';
+import { css, tokenSchema } from '@keystar/ui/style';
 import { Heading } from '@keystar/ui/typography';
 import { gql } from '@apollo/client';
 import { useQuery } from '@apollo/client/react';
-import { G as GraphQLErrorNotice } from '../../../../../dist/GraphQLErrorNotice-d9f0931b.esm.js';
-import { P as PageContainer } from '../../../../../dist/PageContainer-5ae731cc.esm.js';
-import { u as useNixxie, a as useList } from '../../../../../dist/context-af9957ed.esm.js';
+import { G as GraphQLErrorNotice } from '../../../../../dist/GraphQLErrorNotice-7594a9f8.esm.js';
+import { P as PageContainer } from '../../../../../dist/PageContainer-355cfbfa.esm.js';
+import { u as useNixxie, a as useList } from '../../../../../dist/context-2924eaaa.esm.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@keystar/ui/layout';
 import '@keystar/ui/notice';
@@ -13,6 +13,7 @@ import '@keystar/ui/slots';
 import 'next/head';
 import 'next/link';
 import 'next/router';
+import '@react-aria/utils';
 import 'apollo-upload-client/UploadHttpLink.mjs';
 import '@keystar/ui/core';
 import '@keystar/ui/toast';
@@ -22,8 +23,8 @@ import '@keystar/ui/icon';
 import '@keystar/ui/icon/icons/chevronLeftIcon';
 import '@keystar/ui/icon/icons/chevronRightIcon';
 import '@keystar/ui/icon/icons/undo2Icon';
+import '@keystar/ui/number-field';
 import '@keystar/ui/picker';
-import '@keystar/ui/tag';
 import '@keystar/ui/tooltip';
 import '../../../../../dist/admin-meta-graphql-0e6e606e.esm.js';
 import '../../../../../dist/filters-8c8616f9.esm.js';
@@ -38,14 +39,14 @@ function CollectionCard({
   return /*#__PURE__*/jsx("div", {
     className: css({
       position: 'relative',
-      backgroundColor: '#ffffff',
-      border: '1px solid #ebebeb',
+      backgroundColor: tokenSchema.color.background.canvas,
+      border: `1px solid ${tokenSchema.color.border.muted}`,
       borderRadius: 8,
       overflow: 'hidden',
       transition: 'box-shadow 180ms, border-color 180ms',
       '&:hover': {
-        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
-        borderColor: '#d8d8d8'
+        boxShadow: `0 2px 12px ${tokenSchema.color.shadow.muted}`,
+        borderColor: tokenSchema.color.border.emphasis
       }
     }),
     children: /*#__PURE__*/jsxs("div", {
@@ -59,7 +60,7 @@ function CollectionCard({
           fontWeight: 600,
           letterSpacing: '0.09em',
           textTransform: 'uppercase',
-          color: '#a3a3a3',
+          color: tokenSchema.color.foreground.neutralSecondary,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between'
@@ -79,11 +80,11 @@ function CollectionCard({
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
-            width: 22,
-            height: 22,
+            width: 28,
+            height: 28,
             borderRadius: 5,
-            border: '1px solid #ebebeb',
-            color: '#a3a3a3',
+            border: `1px solid ${tokenSchema.color.border.muted}`,
+            color: tokenSchema.color.foreground.neutralSecondary,
             textDecoration: 'none',
             fontSize: 14,
             lineHeight: 1,
@@ -91,9 +92,9 @@ function CollectionCard({
             marginLeft: 6,
             transition: 'border-color 130ms, color 130ms, background 130ms',
             '&:hover': {
-              borderColor: '#000000',
-              color: '#000000',
-              background: '#f5f5f5'
+              borderColor: tokenSchema.color.scale.black,
+              color: tokenSchema.color.foreground.neutralEmphasis,
+              background: tokenSchema.color.background.surfaceSecondary
             }
           }),
           children: "+"
@@ -115,7 +116,7 @@ function CollectionCard({
             fontSize: 34,
             fontWeight: 700,
             letterSpacing: '-0.05em',
-            color: count === null ? '#e8e8e8' : '#000000',
+            color: count === null ? tokenSchema.color.border.muted : tokenSchema.color.foreground.neutralEmphasis,
             lineHeight: 1,
             fontVariantNumeric: 'tabular-nums'
           }),
@@ -124,13 +125,13 @@ function CollectionCard({
           className: css({
             margin: 0,
             fontSize: 12,
-            color: '#c8c8c8',
+            color: tokenSchema.color.foreground.neutralSecondary,
             display: 'flex',
             alignItems: 'center',
             gap: 4,
             transition: 'color 130ms',
             'a:hover &': {
-              color: '#636363'
+              color: tokenSchema.color.foreground.neutralEmphasis
             }
           }),
           children: [list.isSingleton ? 'Open' : 'View all', /*#__PURE__*/jsx("svg", {
@@ -171,7 +172,7 @@ function QuickCreate() {
         fontWeight: 600,
         letterSpacing: '0.10em',
         textTransform: 'uppercase',
-        color: '#b8b8b8'
+        color: tokenSchema.color.foreground.neutralSecondary
       }),
       children: "Quick Create"
     }), /*#__PURE__*/jsx("div", {
@@ -189,17 +190,17 @@ function QuickCreate() {
           paddingInline: '12px',
           paddingBlock: '6px',
           borderRadius: 6,
-          border: '1px solid #e8e8e8',
-          backgroundColor: '#ffffff',
+          border: `1px solid ${tokenSchema.color.border.muted}`,
+          backgroundColor: tokenSchema.color.background.canvas,
           fontSize: 12.5,
           fontWeight: 500,
-          color: '#525252',
+          color: tokenSchema.color.foreground.neutral,
           textDecoration: 'none',
           transition: 'border-color 130ms, color 130ms, background 130ms',
           '&:hover': {
-            borderColor: '#000000',
-            color: '#000000',
-            background: '#fafafa'
+            borderColor: tokenSchema.color.scale.black,
+            color: tokenSchema.color.foreground.neutralEmphasis,
+            background: tokenSchema.color.background.surface
           }
         }),
         children: [/*#__PURE__*/jsx("svg", {
@@ -264,20 +265,20 @@ function HomePage() {
         className: css({
           marginBottom: 28
         }),
-        children: [/*#__PURE__*/jsx("h1", {
+        children: [/*#__PURE__*/jsx("h2", {
           className: css({
             margin: '0 0 4px',
             fontSize: 20,
             fontWeight: 700,
             letterSpacing: '-0.03em',
-            color: '#0a0a0a'
+            color: tokenSchema.color.foreground.neutralEmphasis
           }),
           children: "Overview"
         }), /*#__PURE__*/jsxs("p", {
           className: css({
             margin: 0,
             fontSize: 13,
-            color: '#a3a3a3'
+            color: tokenSchema.color.foreground.neutralSecondary
           }),
           children: [visibleLists.length, " collection", visibleLists.length !== 1 ? 's' : '']
         })]
@@ -304,7 +305,7 @@ function HomePage() {
         className: css({
           marginTop: 48,
           fontSize: 11.5,
-          color: '#d4d4d4',
+          color: tokenSchema.color.foreground.neutralSecondary,
           display: 'flex',
           alignItems: 'center',
           gap: 6
@@ -313,12 +314,12 @@ function HomePage() {
           className: css({
             display: 'inline-flex',
             padding: '1px 6px',
-            background: '#ffffff',
-            border: '1px solid #ebebeb',
+            background: tokenSchema.color.background.canvas,
+            border: `1px solid ${tokenSchema.color.border.muted}`,
             borderRadius: 4,
             fontSize: 10.5,
             fontFamily: 'inherit',
-            color: '#a3a3a3'
+            color: tokenSchema.color.foreground.neutralSecondary
           }),
           children: "\u2318K"
         }), /*#__PURE__*/jsx("span", {

package/internal-unstable/admin-ui/pages/ItemPage/dist/nixxie-cms-core-internal-unstable-admin-ui-pages-ItemPage.cjs.js

@@ -15,33 +15,34 @@ var toast = require('@keystar/ui/toast');
 var typography = require('@keystar/ui/typography');
 var client = require('@apollo/client');
 var react$1 = require('@apollo/client/react');
-var pick = require('../../../../../dist/pick-5fe45878.cjs.js');
+var pick = require('../../../../../dist/pick-906341bb.cjs.js');
 var Errors = require('../../../../../dist/Errors-575adfa3.cjs.js');
-var GraphQLErrorNotice = require('../../../../../dist/GraphQLErrorNotice-cd74180d.cjs.js');
-var PageContainer = require('../../../../../dist/PageContainer-abd7159f.cjs.js');
-var adminUi_context_dist_nixxieCmsCoreAdminUiContext = require('../../../../../dist/context-b5204629.cjs.js');
-var Fields = require('../../../../../dist/Fields-e2c28056.cjs.js');
+var GraphQLErrorNotice = require('../../../../../dist/GraphQLErrorNotice-c8890f80.cjs.js');
+var PageContainer = require('../../../../../dist/PageContainer-4095555a.cjs.js');
+var adminUi_context_dist_nixxieCmsCoreAdminUiContext = require('../../../../../dist/context-2ce61d0b.cjs.js');
+var usePreventNavigation = require('../../../../../dist/usePreventNavigation-d4f9f4fa.cjs.js');
 var filters = require('../../../../../dist/filters-b3e5eb50.cjs.js');
 var utils = require('../../../../../dist/utils-230cddb1.cjs.js');
 var common = require('../../../../../dist/common-5933f758.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('@keystar/ui/style');
+require('@keystar/ui/icon/icons/plusIcon');
 require('@babel/runtime/helpers/defineProperty');
 require('@keystar/ui/icon/icons/alertTriangleIcon');
 require('@keystar/ui/notice');
+require('@keystar/ui/style');
 require('next/head');
 require('next/link');
+require('@react-aria/utils');
 require('apollo-upload-client/UploadHttpLink.mjs');
 require('@keystar/ui/core');
 require('@nixxie-cms/core/admin-ui/router');
 require('@keystar/ui/icon/icons/chevronLeftIcon');
 require('@keystar/ui/icon/icons/chevronRightIcon');
 require('@keystar/ui/icon/icons/undo2Icon');
+require('@keystar/ui/number-field');
 require('@keystar/ui/picker');
-require('@keystar/ui/tag');
 require('@keystar/ui/tooltip');
 require('../../../../../dist/admin-meta-graphql-306c224a.cjs.js');
-require('@react-aria/utils');
 require('@keystar/ui/icon/icons/textCursorInputIcon');
 require('@keystar/ui/utils');
 require('fast-deep-equal');
@@ -65,6 +66,27 @@ function useEventCallback(callback) {
   });
   return cb;
 }
+
+// after forcing validation, move focus to the first invalid field so the user
+// can see and fix it. runs on the next frame so the DOM reflects the new
+// aria-invalid state, and is fully defensive so it can never throw.
+function focusFirstInvalidField() {
+  requestAnimationFrame(() => {
+    try {
+      const el = document.querySelector('[aria-invalid="true"]');
+      if (!el) return;
+      el.focus({
+        preventScroll: false
+      });
+      el.scrollIntoView({
+        block: 'center',
+        behavior: 'smooth'
+      });
+    } catch {
+      // ignore — focusing is a best-effort enhancement
+    }
+  });
+}
 function DeleteButton({
   list,
   itemId,
@@ -163,7 +185,6 @@ function ResetButton(props) {
       title: "Reset changes",
       cancelLabel: "Cancel",
       primaryActionLabel: "Yes, reset",
-      autoFocusButton: "primary",
       onPrimaryAction: props.onReset,
       children: "Are you sure? Any unsaved changes will be lost and cannot be recovered."
     })]
@@ -203,7 +224,11 @@ function ItemForm({
     e.preventDefault();
     const newForceValidation = invalidFields.size !== 0;
     setForceValidation(newForceValidation);
-    if (newForceValidation) return;
+    if (newForceValidation) {
+      toast.toastQueue.critical('Please fix the highlighted field(s) before saving.');
+      focusFirstInvalidField();
+      return;
+    }
     const {
       error: _error
     } = await update({
@@ -227,9 +252,18 @@ function ItemForm({
     toast.toastQueue.positive(`Saved changes to ${list.singular.toLocaleLowerCase()}.`, {
       timeout: 5000
     });
+
+    // reset the navigation guard before refetch so saving and then navigating
+    // away doesn't prompt for unsaved changes
+    shouldPreventNavigationRef.current = false;
     onSaveSuccess();
   });
   const hasChangedFields = utils.useHasChanges('update', list.fields, value, initialValue);
+  const shouldPreventNavigationRef = react.useRef(hasChangedFields);
+  react.useEffect(() => {
+    shouldPreventNavigationRef.current = hasChangedFields;
+  }, [hasChangedFields]);
+  usePreventNavigation.usePreventNavigation(shouldPreventNavigationRef);
   return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("form", {
       onSubmit: onSave,
@@ -251,7 +285,7 @@ function ItemForm({
             var _x$path2;
             return x.path === undefined || ((_x$path2 = x.path) === null || _x$path2 === void 0 ? void 0 : _x$path2.length) === 1;
           }) : [error]
-        }), /*#__PURE__*/jsxRuntime.jsx(Fields.Fields, {
+        }), /*#__PURE__*/jsxRuntime.jsx(usePreventNavigation.Fields, {
           view: "itemView",
           position: "form",
           fields: list.fields,
@@ -265,7 +299,7 @@ function ItemForm({
           isRequireds: isRequireds
         })]
       }), /*#__PURE__*/jsxRuntime.jsx(common.StickySidebar, {
-        children: /*#__PURE__*/jsxRuntime.jsx(Fields.Fields, {
+        children: /*#__PURE__*/jsxRuntime.jsx(usePreventNavigation.Fields, {
           view: "itemView",
           position: "sidebar",
           fields: list.fields,
@@ -325,7 +359,13 @@ function ItemPage({
   const item = data === null || data === void 0 ? void 0 : data.item;
   const itemLabel_ = (_item$list$labelField = item === null || item === void 0 ? void 0 : item[list.labelField]) !== null && _item$list$labelField !== void 0 ? _item$list$labelField : item === null || item === void 0 ? void 0 : item.id;
   const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : itemId !== null && itemId !== void 0 ? itemId : '';
-  const pageLoading = loading || itemId === undefined;
+
+  // Only show the full-page spinner on the INITIAL load (no data yet). On a
+  // post-save refetch Apollo keeps `data` populated while `loading` flips back
+  // to true; gating on `!data` keeps the form mounted (no scroll reset / flash)
+  // during background refetches while still showing the spinner before the
+  // first result arrives.
+  const pageLoading = loading && !data || itemId === undefined;
   const pageLabel = itemLabel || itemId;
   const pageTitle = list.isSingleton || typeof pageLabel !== 'string' ? list.label : pageLabel;
   const initialValue = react.useMemo(() => {