@kirill.konshin/mui 0.0.4 → 0.0.5

package/README.md

@@ -2,6 +2,12 @@
 
 MUI utilities (main entry) and Toolpad admin components (`/admin` entry).
 
+# Peer versions
+
+`@mui/material` is pinned to `^7` on purpose, even though MUI itself is already on v9: `@toolpad/core` (0.16, latest) still peers on `^7`, so v7 is the correct — and only working — choice today. Bump both together once Toolpad ships v9 support.
+
+`@kirill.konshin/auth` is an OPTIONAL peer and is only referenced in types: the `/admin` entry has no runtime dependency on it, so `AdminAppProvider` and `AdminDashboardLayout` work in apps with no auth at all. Install `@kirill.konshin/auth` only when you use `AdminSignInPage`.
+
 # Admin — `@kirill.konshin/mui/admin`
 
 Preconfigured [`@toolpad/core`](https://mui.com/toolpad/core/introduction/) building blocks for password-protected admin apps, wired to [`@kirill.konshin/auth`](https://github.com/kirill-konshin/utils/tree/main/packages/auth):
@@ -78,6 +84,8 @@ export function AdminSignIn({
 
 Root layout still needs `AppRouterCacheProvider` from `@mui/material-nextjs/v15-appRouter` (with `options={{ enableCssLayer: true }}`) and your theme.
 
+Wrap `AdminAppProvider` in `<Suspense>`: Toolpad's `NextAppProvider` calls `useSearchParams()`, and `cacheComponents` (set by `defineNextConfig`, see `@kirill.konshin/next`) fails the prerender of any client hook reading URL data outside a boundary.
+
 # Utilities (main entry)
 
 `AppBarOffset`, `FormControlFieldset`, `FormLabelLegend`, `GenericControl`, `ReadOnly` — see stories.

package/dist/admin/dashboardLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashboardLayout.js","names":[],"sources":["../../src/admin/dashboardLayout.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ComponentProps, type FC, memo } from 'react';\n\nimport { DashboardLayout } from '@toolpad/core/DashboardLayout';\nimport { PageContainer } from '@toolpad/core/PageContainer';\n\nexport type AdminDashboardLayoutProps = ComponentProps<typeof DashboardLayout> & {\n    /** Wrap children in Toolpad `PageContainer`, default true */\n    pageContainer?: boolean;\n};\n\n// Client wrapper is mandatory: @toolpad/core ships some DashboardLayout modules without\n// 'use client' banners (AppTitle, DashboardHeader — verified still missing in 0.16), which crash\n// when evaluated in the server graph. Re-check on Toolpad upgrades.\nexport const AdminDashboardLayout: FC<AdminDashboardLayoutProps> = memo(function AdminDashboardLayout({\n    children,\n    pageContainer = true,\n    ...props\n}) {\n    return (\n        <DashboardLayout defaultSidebarCollapsed {...props}>\n            {pageContainer ? <PageContainer>{children}</PageContainer> : children}\n        </DashboardLayout>\n    );\n});\n"],"mappings":";;;;;;AAeA,IAAa,uBAAsD,KAAK,SAAS,qBAAqB,EAClG,UACA,gBAAgB,MAChB,GAAG,SACJ;CACC,OACI,oBAAC,iBAAD;EAAiB,yBAAA;EAAwB,GAAI;YACxC,gBAAgB,oBAAC,eAAD,EAAgB,SAAwB,CAAA,IAAI;CAChD,CAAA;AAEzB,CAAC"}
+{"version":3,"file":"dashboardLayout.js","names":[],"sources":["../../src/admin/dashboardLayout.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ComponentProps, type FC, memo } from 'react';\n\nimport { DashboardLayout } from '@toolpad/core/DashboardLayout';\nimport { PageContainer } from '@toolpad/core/PageContainer';\n\nexport type AdminDashboardLayoutProps = ComponentProps<typeof DashboardLayout> & {\n    /** Wrap children in Toolpad `PageContainer`, default true */\n    pageContainer?: boolean;\n};\n\n// Client wrapper is mandatory: @toolpad/core ships some DashboardLayout modules without\n// 'use client' banners (AppTitle, DashboardHeader — verified still missing in 0.16), which crash\n// when evaluated in the server graph. Re-check on Toolpad upgrades.\nexport const AdminDashboardLayout: FC<AdminDashboardLayoutProps> = memo(function AdminDashboardLayout({\n    children,\n    pageContainer = true,\n    ...props\n}) {\n    return (\n        <DashboardLayout defaultSidebarCollapsed {...props}>\n            {pageContainer ? <PageContainer>{children}</PageContainer> : children}\n        </DashboardLayout>\n    );\n});\n"],"mappings":";;;;;;AAeA,IAAa,uBAAsD,KAAK,SAAS,qBAAqB,EAClG,UACA,gBAAgB,MAChB,GAAG,SACJ;CACC,OACI,oBAAC,iBAAD;EAAiB,yBAAA;EAAwB,GAAI;EACxC,UAAA,gBAAgB,oBAAC,eAAD,EAAgB,SAAwB,CAAA,IAAI;CAChD,CAAA;AAEzB,CAAC"}

package/dist/admin/signInPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"signInPage.d.ts","sourceRoot":"","sources":["../../src/admin/signInPage.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGzD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,GAAG;IACjE,iGAAiG;IACjG,WAAW,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC7C,gGAAgG;IAChG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAMF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2DnD,CAAC"}
+{"version":3,"file":"signInPage.d.ts","sourceRoot":"","sources":["../../src/admin/signInPage.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGzD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,GAAG;IACjE,iGAAiG;IACjG,WAAW,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC7C,gGAAgG;IAChG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAcF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2DnD,CAAC"}

package/dist/admin/signInPage.js

@@ -1,10 +1,10 @@
 "use client";
 import { memo, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
-import { STATE_PARAM } from "@kirill.konshin/auth/client";
 import { formLabelClasses } from "@mui/material/FormLabel";
 import { SignInPage } from "@toolpad/core/SignInPage";
 //#region src/admin/signInPage.tsx
+var STATE_PARAM = "state";
 var DEFAULT_PROVIDERS = [{
 	id: "credentials",
 	name: "password"
@@ -16,13 +16,14 @@ var NOT_CONFIGURED_SUBTITLE = "Set ADMIN_PASSWORD and a SESSION_SECRET of at lea
 * `loginAction` redirects (handled by Next.js), on failure its message is shown.
 */
 var AdminSignInPage = memo(function AdminSignInPage({ loginAction, isConfigured = true, notConfiguredSubtitle = NOT_CONFIGURED_SUBTITLE, providers = DEFAULT_PROVIDERS, state, localeText, slots, slotProps, ...props }) {
+	const signIn = useCallback(async (_provider, formData) => {
+		if (!(formData instanceof FormData)) return { error: "Password is required" };
+		if (state) formData.set(STATE_PARAM, state);
+		const error = await loginAction(null, formData);
+		return error ? { error } : {};
+	}, [loginAction, state]);
 	return /* @__PURE__ */ jsx(SignInPage, {
-		signIn: useCallback(async (_provider, formData) => {
-			if (!(formData instanceof FormData)) return { error: "Password is required" };
-			if (state) formData.set(STATE_PARAM, state);
-			const error = await loginAction(null, formData);
-			return error ? { error } : {};
-		}, [loginAction, state]),
+		signIn,
 		providers: isConfigured ? providers : [],
 		localeText: isConfigured ? localeText : {
 			signInTitle: "Authentication needs configuration",

package/dist/admin/signInPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"signInPage.js","names":[],"sources":["../../src/admin/signInPage.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ComponentProps, type FC, memo, useCallback } from 'react';\n\nimport { type PasswordAuth } from '@kirill.konshin/auth';\nimport { STATE_PARAM } from '@kirill.konshin/auth/client';\nimport { formLabelClasses } from '@mui/material/FormLabel';\nimport { SignInPage } from '@toolpad/core/SignInPage';\n\ntype SignInPageProps = ComponentProps<typeof SignInPage>;\n\nexport type AdminSignInPageProps = Omit<SignInPageProps, 'signIn'> & {\n    /** `auth.loginFormAction` from `@kirill.konshin/auth`, re-exported from a `'use server'` file */\n    loginAction: PasswordAuth['loginFormAction'];\n    /** Pass `auth.isConfigured()` to render setup instructions instead of the form, default true */\n    isConfigured?: boolean;\n    /** Subtitle shown when not configured */\n    notConfiguredSubtitle?: string;\n    /** Sanitized return URL (`auth.getState(await searchParams)`), threaded into the login form */\n    state?: string;\n};\n\nconst DEFAULT_PROVIDERS: SignInPageProps['providers'] = [{ id: 'credentials', name: 'password' }];\n\nconst NOT_CONFIGURED_SUBTITLE = 'Set ADMIN_PASSWORD and a SESSION_SECRET of at least 32 characters, then restart.';\n\n/**\n * Toolpad `SignInPage` preconfigured for the password-only login of `@kirill.konshin/auth`: single\n * credentials provider, no email/rememberMe fields, errors surfaced through the form. On success\n * `loginAction` redirects (handled by Next.js), on failure its message is shown.\n */\nexport const AdminSignInPage: FC<AdminSignInPageProps> = memo(function AdminSignInPage({\n    loginAction,\n    isConfigured = true,\n    notConfiguredSubtitle = NOT_CONFIGURED_SUBTITLE,\n    providers = DEFAULT_PROVIDERS,\n    state,\n    localeText,\n    slots,\n    slotProps,\n    ...props\n}) {\n    const signIn = useCallback<NonNullable<SignInPageProps['signIn']>>(\n        async (_provider, formData) => {\n            if (!(formData instanceof FormData)) return { error: 'Password is required' };\n            // thread the return URL through the form only — never store it in the session,\n            // multiple tabs logging in concurrently would clash\n            if (state) formData.set(STATE_PARAM, state);\n            const error = await loginAction(null, formData);\n            return error ? { error } : {};\n        },\n        [loginAction, state],\n    );\n\n    return (\n        <SignInPage\n            signIn={signIn}\n            providers={isConfigured ? providers : []}\n            localeText={\n                isConfigured\n                    ? localeText\n                    : {\n                          signInTitle: 'Authentication needs configuration',\n                          signInSubtitle: notConfiguredSubtitle,\n                          ...localeText,\n                      }\n            }\n            slots={{\n                emailField: () => null,\n                rememberMe: () => null,\n                subtitle: () => null,\n                ...slots,\n            }}\n            slotProps={{\n                ...slotProps,\n                // FIXME https://github.com/mui/toolpad/issues/4572 — still relevant in 0.16:\n                // browser validation popups fight the server-side errors (noValidate is settable\n                // declaratively through the form slot) and the password label renders misaligned;\n                // re-check on Toolpad upgrades\n                form: { noValidate: true, ...slotProps?.form },\n                passwordField: {\n                    autoFocus: true,\n                    sx: { [`& .${formLabelClasses.root}`]: { top: '-2px' } },\n                    ...slotProps?.passwordField,\n                },\n                submitButton: { variant: 'contained', ...slotProps?.submitButton },\n            }}\n            {...props}\n        />\n    );\n});\n"],"mappings":";;;;;;;AAsBA,IAAM,oBAAkD,CAAC;CAAE,IAAI;CAAe,MAAM;AAAW,CAAC;AAEhG,IAAM,0BAA0B;;;;;;AAOhC,IAAa,kBAA4C,KAAK,SAAS,gBAAgB,EACnF,aACA,eAAe,MACf,wBAAwB,yBACxB,YAAY,mBACZ,OACA,YACA,OACA,WACA,GAAG,SACJ;CAaC,OACI,oBAAC,YAAD;EACY,QAdD,YACX,OAAO,WAAW,aAAa;GAC3B,IAAI,EAAE,oBAAoB,WAAW,OAAO,EAAE,OAAO,uBAAuB;GAG5E,IAAI,OAAO,SAAS,IAAI,aAAa,KAAK;GAC1C,MAAM,QAAQ,MAAM,YAAY,MAAM,QAAQ;GAC9C,OAAO,QAAQ,EAAE,MAAM,IAAI,CAAC;EAChC,GACA,CAAC,aAAa,KAAK,CAKP;EACR,WAAW,eAAe,YAAY,CAAC;EACvC,YACI,eACM,aACA;GACI,aAAa;GACb,gBAAgB;GAChB,GAAG;EACP;EAEV,OAAO;GACH,kBAAkB;GAClB,kBAAkB;GAClB,gBAAgB;GAChB,GAAG;EACP;EACA,WAAW;GACP,GAAG;GAKH,MAAM;IAAE,YAAY;IAAM,GAAG,WAAW;GAAK;GAC7C,eAAe;IACX,WAAW;IACX,IAAI,GAAG,MAAM,iBAAiB,SAAS,EAAE,KAAK,OAAO,EAAE;IACvD,GAAG,WAAW;GAClB;GACA,cAAc;IAAE,SAAS;IAAa,GAAG,WAAW;GAAa;EACrE;EACA,GAAI;CACP,CAAA;AAET,CAAC"}
+{"version":3,"file":"signInPage.js","names":[],"sources":["../../src/admin/signInPage.tsx"],"sourcesContent":["'use client';\n\nimport React, { type ComponentProps, type FC, memo, useCallback } from 'react';\n\nimport { type PasswordAuth } from '@kirill.konshin/auth';\nimport type { STATE_PARAM as StateParam } from '@kirill.konshin/auth/client';\nimport { formLabelClasses } from '@mui/material/FormLabel';\nimport { SignInPage } from '@toolpad/core/SignInPage';\n\ntype SignInPageProps = ComponentProps<typeof SignInPage>;\n\nexport type AdminSignInPageProps = Omit<SignInPageProps, 'signIn'> & {\n    /** `auth.loginFormAction` from `@kirill.konshin/auth`, re-exported from a `'use server'` file */\n    loginAction: PasswordAuth['loginFormAction'];\n    /** Pass `auth.isConfigured()` to render setup instructions instead of the form, default true */\n    isConfigured?: boolean;\n    /** Subtitle shown when not configured */\n    notConfiguredSubtitle?: string;\n    /** Sanitized return URL (`auth.getState(await searchParams)`), threaded into the login form */\n    state?: string;\n};\n\n/*\n * Inlined, NOT imported at runtime: `@kirill.konshin/auth` is an OPTIONAL peer, so importing\n * `@kirill.konshin/auth/client` here would make the whole `/admin` entry unresolvable in apps that\n * only use `AdminAppProvider`/`AdminDashboardLayout` (the barrel re-exports this module). The\n * annotation is a compile-time guard: it stops resolving the day auth renames the param.\n */\nconst STATE_PARAM: typeof StateParam = 'state';\n\nconst DEFAULT_PROVIDERS: SignInPageProps['providers'] = [{ id: 'credentials', name: 'password' }];\n\nconst NOT_CONFIGURED_SUBTITLE = 'Set ADMIN_PASSWORD and a SESSION_SECRET of at least 32 characters, then restart.';\n\n/**\n * Toolpad `SignInPage` preconfigured for the password-only login of `@kirill.konshin/auth`: single\n * credentials provider, no email/rememberMe fields, errors surfaced through the form. On success\n * `loginAction` redirects (handled by Next.js), on failure its message is shown.\n */\nexport const AdminSignInPage: FC<AdminSignInPageProps> = memo(function AdminSignInPage({\n    loginAction,\n    isConfigured = true,\n    notConfiguredSubtitle = NOT_CONFIGURED_SUBTITLE,\n    providers = DEFAULT_PROVIDERS,\n    state,\n    localeText,\n    slots,\n    slotProps,\n    ...props\n}) {\n    const signIn = useCallback<NonNullable<SignInPageProps['signIn']>>(\n        async (_provider, formData) => {\n            if (!(formData instanceof FormData)) return { error: 'Password is required' };\n            // thread the return URL through the form only — never store it in the session,\n            // multiple tabs logging in concurrently would clash\n            if (state) formData.set(STATE_PARAM, state);\n            const error = await loginAction(null, formData);\n            return error ? { error } : {};\n        },\n        [loginAction, state],\n    );\n\n    return (\n        <SignInPage\n            signIn={signIn}\n            providers={isConfigured ? providers : []}\n            localeText={\n                isConfigured\n                    ? localeText\n                    : {\n                          signInTitle: 'Authentication needs configuration',\n                          signInSubtitle: notConfiguredSubtitle,\n                          ...localeText,\n                      }\n            }\n            slots={{\n                emailField: () => null,\n                rememberMe: () => null,\n                subtitle: () => null,\n                ...slots,\n            }}\n            slotProps={{\n                ...slotProps,\n                // FIXME https://github.com/mui/toolpad/issues/4572 — still relevant in 0.16:\n                // browser validation popups fight the server-side errors (noValidate is settable\n                // declaratively through the form slot) and the password label renders misaligned;\n                // re-check on Toolpad upgrades\n                form: { noValidate: true, ...slotProps?.form },\n                passwordField: {\n                    autoFocus: true,\n                    sx: { [`& .${formLabelClasses.root}`]: { top: '-2px' } },\n                    ...slotProps?.passwordField,\n                },\n                submitButton: { variant: 'contained', ...slotProps?.submitButton },\n            }}\n            {...props}\n        />\n    );\n});\n"],"mappings":";;;;;;AA4BA,IAAM,cAAiC;AAEvC,IAAM,oBAAkD,CAAC;CAAE,IAAI;CAAe,MAAM;AAAW,CAAC;AAEhG,IAAM,0BAA0B;;;;;;AAOhC,IAAa,kBAA4C,KAAK,SAAS,gBAAgB,EACnF,aACA,eAAe,MACf,wBAAwB,yBACxB,YAAY,mBACZ,OACA,YACA,OACA,WACA,GAAG,SACJ;CACC,MAAM,SAAS,YACX,OAAO,WAAW,aAAa;EAC3B,IAAI,EAAE,oBAAoB,WAAW,OAAO,EAAE,OAAO,uBAAuB;EAG5E,IAAI,OAAO,SAAS,IAAI,aAAa,KAAK;EAC1C,MAAM,QAAQ,MAAM,YAAY,MAAM,QAAQ;EAC9C,OAAO,QAAQ,EAAE,MAAM,IAAI,CAAC;CAChC,GACA,CAAC,aAAa,KAAK,CACvB;CAEA,OACI,oBAAC,YAAD;EACY;EACR,WAAW,eAAe,YAAY,CAAC;EACvC,YACI,eACM,aACA;GACI,aAAa;GACb,gBAAgB;GAChB,GAAG;EACP;EAEV,OAAO;GACH,kBAAkB;GAClB,kBAAkB;GAClB,gBAAgB;GAChB,GAAG;EACP;EACA,WAAW;GACP,GAAG;GAKH,MAAM;IAAE,YAAY;IAAM,GAAG,WAAW;GAAK;GAC7C,eAAe;IACX,WAAW;IACX,IAAI,GAAG,MAAM,iBAAiB,SAAS,EAAE,KAAK,OAAO,EAAE;IACvD,GAAG,WAAW;GAClB;GACA,cAAc;IAAE,SAAS;IAAa,GAAG,WAAW;GAAa;EACrE;EACA,GAAI;CACP,CAAA;AAET,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kirill.konshin/mui",
   "description": "Utilities",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "hasStorybook": true,
   "scripts": {
@@ -19,17 +19,17 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@kirill.konshin/auth": "*",
     "@kirill.konshin/utils-private": "*",
-    "@mui/material": "^7.3.0",
+    "@mui/material": "^9.3.1",
     "@toolpad/core": "^0.16.0",
-    "next": "^16.2.12",
-    "react": "^19.1.1"
+    "next": "^16.3.0",
+    "react": "^19.2.8"
   },
   "peerDependencies": {
     "@kirill.konshin/auth": "*",
-    "@mui/material": "^7",
+    "@mui/material": "^9",
     "@toolpad/core": "^0.16",
     "next": "^16",
     "react": "^19"
@@ -57,17 +57,15 @@
   "author": "Kirill Konshin <kirill@konshin.org> (https://konshin.org)",
   "license": "MIT",
   "exports": {
-    "./admin": {
-      "import": {
-        "import": "./dist/admin/index.js",
-        "types": "./dist/admin/index.d.ts"
-      }
-    },
     ".": {
-      "import": {
-        "import": "./dist/index.js",
-        "types": "./dist/index.d.ts"
-      }
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./admin": {
+      "types": "./dist/admin/index.d.ts",
+      "import": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
     }
   },
   "main": "./dist/index.js",