@rebasepro/admin 0.0.1-canary.f81da60 → 0.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.0.1-canary.f81da60",
+  "version": "0.1.2",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -77,13 +77,13 @@
     "react-use-measure": "^2.1.7",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
     "zod": "^3.25.0",
-    "@rebasepro/common": "0.0.1-canary.f81da60",
-    "@rebasepro/core": "0.0.1-canary.f81da60",
-    "@rebasepro/formex": "0.0.1-canary.f81da60",
-    "@rebasepro/schema-inference": "0.0.1-canary.f81da60",
-    "@rebasepro/types": "0.0.1-canary.f81da60",
-    "@rebasepro/ui": "0.0.1-canary.f81da60",
-    "@rebasepro/utils": "0.0.1-canary.f81da60"
+    "@rebasepro/common": "0.1.2",
+    "@rebasepro/core": "0.1.2",
+    "@rebasepro/formex": "0.1.2",
+    "@rebasepro/schema-inference": "0.1.2",
+    "@rebasepro/types": "0.1.2",
+    "@rebasepro/ui": "0.1.2",
+    "@rebasepro/utils": "0.1.2"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/collection_editor/ConfigControllerProvider.tsx

@@ -32,11 +32,6 @@ export interface ConfigControllerProviderProps {
      */
     configPermissions?: CollectionEditorPermissionsBuilder;
 
-    /**
-     * Groups that cannot be used to create new collections.
-     */
-    reservedGroups?: string[];
-
     extraView?: {
         View: React.ComponentType<{
             path: string
@@ -65,7 +60,6 @@ export const ConfigControllerProvider = React.memo(
         children,
         collectionConfigController,
         configPermissions,
-        reservedGroups,
         collectionInference,
         extraView,
         getUser,
@@ -105,7 +99,6 @@ export const ConfigControllerProvider = React.memo(
             parentCollectionSlugs: string[], parentEntityIds: string[],
             initialValues?: {
                 path?: string,
-                group?: string,
                 name?: string
             },
             copyFrom?: EntityCollection,
@@ -225,7 +218,6 @@ export const ConfigControllerProvider = React.memo(
             parentCollectionSlugs: string[], parentEntityIds: string[],
             parentCollection?: EntityCollection
             initialValues?: {
-                group?: string,
                 path?: string,
                 name?: string
             },
@@ -270,7 +262,6 @@ export const ConfigControllerProvider = React.memo(
                 collectionInference,
                 ...currentDialog,
                 getData,
-                reservedGroups,
                 extraView,
                 getUser,
                 generateCollection,
@@ -289,7 +280,7 @@ export const ConfigControllerProvider = React.memo(
             };
         }, [
             currentDialog, collectionConfigController, collectionInference,
-            getData, reservedGroups, extraView, getUser, generateCollection,
+            getData, extraView, getUser, generateCollection,
             onAnalyticsEvent, unmappedTables, onFetchTableMetadata,
             urlController, navigate
         ]);

package/src/collection_editor/ui/collection_editor/CollectionDetailsForm.tsx

@@ -5,7 +5,7 @@ import React, { useMemo, useState } from "react";
 import { useAuthController, useCustomizationController } from "@rebasepro/core";
 import { getFieldConfig, PropertyConfigBadge, SearchIconsView } from "../../_cms_internals";
 import { EntityCollection, Property } from "@rebasepro/types";
-import { BooleanSwitchWithLabel, Chip, cls, Container, DebouncedTextField, Dialog, IconButton, Select, SelectItem, TextField, Tooltip, Typography, useAutoComplete, Button , iconSize } from "@rebasepro/ui";
+import { BooleanSwitchWithLabel, Chip, cls, Container, DebouncedTextField, Dialog, IconButton, Select, SelectItem, TextField, Tooltip, Typography, Button, iconSize } from "@rebasepro/ui";
 import { XIcon, HistoryIcon } from "lucide-react";
 
 import { Field, getIn, useFormex } from "@rebasepro/formex";
@@ -18,24 +18,20 @@ import { singular, toSnakeCase, unslugify } from "@rebasepro/utils";
 
 export function CollectionDetailsForm({
     isNewCollection,
-    reservedGroups,
     existingPaths,
     existingIds,
-    groups,
     parentCollection,
     expandKanban
 }: {
     isNewCollection: boolean,
-    reservedGroups?: string[];
     existingPaths?: string[];
     existingIds?: string[];
-    groups: string[] | null;
     parentCollection?: EntityCollection;
     parentCollectionSlugs?: string[], parentEntityIds?: string[];
     expandKanban?: boolean;
 }) {
 
-    const groupRef = React.useRef<HTMLInputElement>(null);
+
     const {
         values,
         setFieldValue,
@@ -98,15 +94,7 @@ export function CollectionDetailsForm({
 
     const collectionIcon = <IconForView collectionOrView={values}/>;
 
-    const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
 
-    const {
-        inputFocused,
-        autoCompleteOpen,
-        setAutoCompleteOpen
-    } = useAutoComplete({
-        ref: groupRef
-    });
 
     const isSubcollection = !!parentCollection;
 
@@ -172,39 +160,7 @@ export function CollectionDetailsForm({
 
                     </div>
 
-                    {/*{!isSubcollection && <div className={"col-span-12 sm:col-span-4 relative"}>*/}
-
-                    {/*    <TextField error={showErrors && Boolean(errors.group)}*/}
-                    {/*               disabled={isSubmitting}*/}
-                    {/*               value={values.group ?? ""}*/}
-                    {/*               autoComplete="off"*/}
-                    {/*               onChange={(event) => setFieldValue("group", event.target.value)}*/}
-                    {/*               name={"group"}*/}
-                    {/*               inputRef={groupRef}*/}
-                    {/*               label="Group"/>*/}
-                    {/*    <Autocomplete*/}
-                    {/*        open={autoCompleteOpen && (groupOptions ?? []).length > 0}*/}
-                    {/*        setOpen={setAutoCompleteOpen}>*/}
-                    {/*        {groupOptions?.map((group, index) => {*/}
-                    {/*            return <AutocompleteItem*/}
-                    {/*                key={index + "_" + group}*/}
-                    {/*                className={"pr-6 pl-14"}*/}
-                    {/*                onClick={() => {*/}
-                    {/*                    setAutoCompleteOpen(false);*/}
-                    {/*                    setFieldValue("group", group ?? null);*/}
-                    {/*                }}*/}
-                    {/*            >*/}
-                    {/*                <div className={"flex-grow"}>*/}
-                    {/*                    {group}*/}
-                    {/*                </div>*/}
-                    {/*            </AutocompleteItem>;*/}
-                    {/*        })}*/}
-                    {/*    </Autocomplete>*/}
-                    {/*    <FieldCaption>*/}
-                    {/*        {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}*/}
-                    {/*    </FieldCaption>*/}
-
-                    {/*</div>}*/}
+
 
                     <LayoutModeSwitch
                         className={"col-span-12"}

package/src/collection_editor/ui/collection_editor/CollectionEditorDialog.tsx

@@ -37,7 +37,6 @@ export interface CollectionEditorDialogProps {
     open: boolean;
     isNewCollection: boolean;
     initialValues?: {
-        group?: string,
         slug?: string,
         name?: string,
     }
@@ -51,7 +50,6 @@ export interface CollectionEditorDialogProps {
     parentCollectionSlugs?: string[], parentEntityIds?: string[]; // path ids of the parent collection, like [`products`]
     handleClose: (collection?: EntityCollection) => void;
     configController: CollectionsConfigController;
-    reservedGroups?: string[];
     collectionInference?: CollectionInference;
     extraView?: {
         View: React.ComponentType<{
@@ -200,7 +198,7 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         }
     }, [props.editedCollectionId, props.parentCollectionSlugs, props.parentEntityIds, collectionRegistry.initialised, collectionRegistry.getRawCollection]);
 
-    const groups = topLevelNavigation?.groups ?? [];
+
 
     const initialCollection = collection
         ? {
@@ -226,7 +224,6 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
                 slug: initialValuesProp?.slug ?? randomString(16),
                 table: initialValuesProp?.slug ?? "",
                 name: initialValuesProp?.name ?? "",
-                group: initialValuesProp?.group ?? "",
                 properties: {} as Properties,
                 propertiesOrder: [],
                 icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
@@ -249,7 +246,6 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         includeTemplates={includeTemplates}
         collection={collection}
         setCollection={setCollection}
-        groups={groups}
         propertyConfigs={propertyConfigs}/>
 
 }
@@ -262,7 +258,6 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     path,
     collectionInference,
     handleClose,
-    reservedGroups,
     extraView,
     handleCancel,
     setFormDirty,
@@ -276,7 +271,6 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     setCollection,
     initialValues,
     propertyConfigs,
-    groups,
     existingEntities,
     initialView: initialViewProp,
     expandKanban,
@@ -295,7 +289,6 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
     collection: EntityCollection<M> | undefined,
     setCollection: (collection: EntityCollection<M>) => void,
     propertyConfigs: Record<string, PropertyConfig>,
-    groups: string[],
 }
 ) {
 
@@ -619,7 +612,7 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
         <Formex value={formController}>
 
             <>
-                {!isNewCollection && <div className={cls("px-4 py-2 w-full flex shrink-0 items-center justify-between gap-4 bg-white dark:bg-surface-950 border-b", defaultBorderMixin)}>
+                {!isNewCollection && <div className={cls("px-4 py-2 w-full flex shrink-0 items-center justify-between gap-4 bg-surface-50 dark:bg-surface-950 border-b", defaultBorderMixin)}>
                     <div className="flex flex-1 items-center justify-end gap-4 min-w-0">
                         <Tabs value={currentView}
                             className="bg-transparent !w-fit max-w-full"
@@ -756,7 +749,6 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                             <CollectionPropertiesEditorForm
                                 showErrors={submitCount > 0}
                                 isNewCollection={isNewCollection}
-                                reservedGroups={reservedGroups}
                                 onPropertyError={(propertyKey, namespace, error) => {
                                     const current = removeUndefined({
                                         ...propertyErrorsRef.current,

package/src/collection_editor/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -27,7 +27,6 @@ type CollectionEditorFormProps = {
     propertyErrorsRef?: React.MutableRefObject<any>;
     onPropertyError: (propertyKey: string, namespace: string | undefined, error?: Record<string, any>) => void;
     setDirty?: (dirty: boolean) => void;
-    reservedGroups?: string[];
     extraIcon: React.ReactNode | any;
     getUser?: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
@@ -42,7 +41,6 @@ export function CollectionPropertiesEditorForm({
     propertyErrorsRef,
     onPropertyError,
     setDirty,
-    reservedGroups,
     extraIcon,
     getUser,
     getData,
@@ -391,7 +389,7 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-surface dark:bg-surface-dark"}>
+        <div className={"grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950"}>
             <div className={cls(
                 "bg-surface-50 dark:bg-surface-900",
                 "p-4 md:p-8",

package/src/collection_editor/ui/collection_editor/CollectionRelationsTab.tsx

@@ -1,6 +1,6 @@
 
 import React, { useState } from "react";
-import { Button, IconButton, Typography, Table, TableHeader, TableCell, TableBody, TableRow, TextField, Select, SelectItem, Container, Dialog, DialogTitle, DialogContent, DialogActions } from "@rebasepro/ui";
+import { Button, IconButton, Typography, Table, TableHeader, TableCell, TableBody, TableRow, TextField, Select, SelectItem, Container, Dialog, DialogTitle, DialogContent, DialogActions, cls, defaultBorderMixin } from "@rebasepro/ui";
 import { Trash2Icon } from "lucide-react";
 import { useFormex } from "@rebasepro/formex";
 import { PostgresCollection, Relation } from "@rebasepro/types";
@@ -128,7 +128,7 @@ direction: "owning" });
                             <DialogTitle className="flex justify-between items-center w-full" variant="h6">
                                 {editingRelationIndex === -1 ? "New Relation" : "Edit Relation"}
                             </DialogTitle>
-                            <DialogContent includeMargin={false} className="p-4 md:p-6 border-t dark:border-surface-700 bg-surface-50 dark:bg-surface-800">
+                            <DialogContent includeMargin={false} className={cls("p-4 md:p-6 border-t bg-white dark:bg-surface-900", defaultBorderMixin)}>
                                 <div className="flex flex-col gap-4 max-w-2xl mx-auto">
                                     <TextField
                                         label="Relation Name"
@@ -178,7 +178,7 @@ direction: val as Relation["direction"] } : null)}
                                     </Select>
 
                                     {editingRelationState.cardinality === "many" && editingRelationState.direction === "owning" && (
-                                        <div className="flex flex-col gap-4 mt-4 pt-4 border-t dark:border-surface-800">
+                                        <div className={cls("flex flex-col gap-4 mt-4 pt-4 border-t", defaultBorderMixin)}>
                                             <Typography variant="subtitle2" className="text-text-primary">Intermediate Table</Typography>
                                             <Typography variant="body2" className="text-text-secondary -mt-3">
                                                 Required for many-to-many relationships. This defines the junction table linking both collections.

package/src/collection_editor/ui/collection_editor/GetCodeDialog.tsx

@@ -123,7 +123,6 @@ function collectionToCode(collection: EntityCollection): object {
         description: collection.description,
 
         icon: collection.icon,
-        group: collection.group,
         defaultFilter: collection.defaultFilter,
         sort: collection.sort,
         properties: Object.entries({

package/src/collection_editor/ui/collection_editor/PropertyFieldPreview.tsx

@@ -39,10 +39,10 @@ export function PropertyFieldPreview({
         <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
         <Paper
             className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border border-transparent bg-transparent",
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-xs",
                 selected
-                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-800"
+                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary border-primary/30"
+                    : "hover:bg-surface-50 dark:hover:bg-surface-750"
             )}
         >
             <PropertyConfigBadge propertyConfig={propertyConfig} size="small"/>
@@ -105,10 +105,10 @@ export function NonEditablePropertyPreview({
         <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
         <Paper
             className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border border-transparent bg-transparent",
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-xs",
                 selected
-                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-800"
+                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary border-primary/30"
+                    : "hover:bg-surface-50 dark:hover:bg-surface-750"
             )}
         >
             <div className={"relative shrink-0"}>

package/src/collection_editor/ui/collection_editor/properties/MapPropertyField.tsx

@@ -111,7 +111,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     position={"start"}
                     size={"medium"}
                     label={t("spread_children_as_columns")}
-                    onValueChange={(v) => setFieldValue("spreadChildren", v)}
+                    onValueChange={(v) => setFieldValue("ui.spreadChildren", v)}
                     value={values.ui?.spreadChildren ?? false}
                 />
                 <FieldCaption>

package/src/collection_editor/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Field, getIn, useFormex } from "@rebasepro/formex";
 ;
 import { NumberProperty, StringProperty } from "@rebasepro/types";
-import { CircularProgress, Select, SelectGroup, SelectItem, Typography } from "@rebasepro/ui";
+import { CircularProgress, Select, SelectItem, Typography } from "@rebasepro/ui";
 
 export function ReferencePropertyField({
     existing,
@@ -81,12 +81,6 @@ export function CollectionsSelect({
 
     const collections = collectionRegistry.collections ?? [];
 
-    const groups: string[] = Array.from(new Set(
-        Object.values(collections).map(e => e.group).filter(Boolean) as string[]
-    ).values());
-
-    const ungroupedCollections = collections.filter((col) => !col.group);
-
     return (
         <>
             <Select
@@ -113,48 +107,20 @@ export function CollectionsSelect({
                 }}
                 {...props}>
 
-                {groups.flatMap((group) => (
-                    <SelectGroup label={group || "Views"}
-                        key={`group_${group}`}>
-                        {
-                            collections.filter(collection => collection.group === group)
-                                .map((collection) => {
-                                    return <SelectItem
-                                        key={`${collection.slug}-${group}`}
-                                        value={collection.slug}>
-                                        <div className="flex flex-row">
-                                            <IconForView collectionOrView={collection}/>
-                                            <Typography
-                                                variant={"subtitle2"}
-                                                className="ml-4">
-                                                {collection?.name.toUpperCase()}
-                                            </Typography>
-                                        </div>
-                                    </SelectItem>;
-                                })
-
-                        }
-                    </SelectGroup>
-                ))}
-
-                {ungroupedCollections && <SelectGroup label={"Views"}>
-                    {ungroupedCollections
-                        .map((collection) => {
-                            return <SelectItem key={collection.slug}
-                                value={collection.slug}>
-                                <div className="flex flex-row">
-                                    <IconForView collectionOrView={collection}/>
-                                    <Typography
-                                        variant={"subtitle2"}
-                                        className="ml-4">
-                                        {collection?.name.toUpperCase()}
-                                    </Typography>
-                                </div>
-                            </SelectItem>;
-                        })
-
-                    }
-                </SelectGroup>}
+                {collections.map((collection) => {
+                    return <SelectItem
+                        key={collection.slug}
+                        value={collection.slug}>
+                        <div className="flex flex-row">
+                            <IconForView collectionOrView={collection}/>
+                            <Typography
+                                variant={"subtitle2"}
+                                className="ml-4">
+                                {collection?.name.toUpperCase()}
+                            </Typography>
+                        </div>
+                    </SelectItem>;
+                })}
 
             </Select>
 

package/src/collection_editor/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -7,9 +7,8 @@ export function AdvancedPropertyValidation({ disabled }: {
     disabled: boolean
 }) {
 
-    const columnWidth = "columnWidth";
-    const hideFromCollection = "hideFromCollection";
-    const readOnly = "readOnly";
+    const hideFromCollection = "ui.hideFromCollection";
+    const readOnly = "ui.readOnly";
 
     return (
 

package/src/collection_editor/ui/collection_editor/templates/pages_template.ts

@@ -176,7 +176,7 @@ export const pagesCollectionTemplate = {
         is_published: {
             type: "boolean",
             name: "Is Published",
-            columnWidth: 100,
+            ui: { columnWidth: 100 },
             description: "Should this page be live on the site?"
         }
     }

package/src/collection_editor/ui/collection_editor/templates/products_template.ts

@@ -41,7 +41,7 @@ export const productsCollectionTemplate = {
         available: {
             type: "boolean",
             name: "Available",
-            columnWidth: 100,
+            ui: { columnWidth: 100 },
             description: "Is this product available in the website"
         },
         price: {
@@ -55,7 +55,7 @@ export const productsCollectionTemplate = {
         images: {
             type: "array",
             name: "Images",
-            hideFromCollection: true,
+            ui: { hideFromCollection: true },
             of: {
                 type: "string",
                 storage: {

package/src/components/DefaultAppBar.tsx

@@ -110,9 +110,9 @@ export const DefaultAppBar = function DefaultAppBar({
         <div
             style={style}
             role="banner"
-            className={cls("w-full h-16 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
+            className={cls("w-full h-14 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
                 "flex flex-row gap-2 px-4 items-center",
-                "backdrop-blur-md bg-surface-50/80 dark:bg-surface-900/80",
+                "backdrop-blur-sm bg-surface-50/95 dark:bg-surface-900/80",
                 {
                     "pl-[19rem]": drawerOpen && largeLayout,
                     "pl-24": hasDrawer && !(drawerOpen && largeLayout),

package/src/components/DefaultDrawer.tsx

@@ -1,9 +1,10 @@
 import type { NavigationEntry, NavigationResult } from "@rebasepro/types";
-import React from "react";
+import React, { useMemo } from "react";
 
-import { useCollapsedGroups, useLargeLayout, useAdminModeController, useEffectiveRoleController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry, STUDIO_NAVIGATION_GROUPS } from "@rebasepro/core";
+import { useCollapsedGroups, buildCollapsedDefaults, useLargeLayout, useAdminModeController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry } from "@rebasepro/core";
 import { useNavigationStateController, useUrlController } from "../hooks";
 
+
 import { Link, useNavigate } from "react-router-dom";
 import { AnalyticsEvent } from "@rebasepro/types";
 import { cls, Tooltip, Typography , iconSize } from "@rebasepro/ui";
@@ -57,22 +58,31 @@ export function DefaultDrawer({
 
     const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
     const largeLayout = useLargeLayout();
-    const navigate = useNavigate();
     const adminModeController = useAdminModeController();
-    const effectiveRoleController = useEffectiveRoleController();
     const registry = useRebaseRegistry();
 
-    const adminViews = navigationState.topLevelNavigation?.navigationEntries.filter(e => e.type === "admin") ?? [];
+    const allNavigationEntries = navigationState.topLevelNavigation?.navigationEntries ?? [];
 
-    let groupsToRender = navigationState.topLevelNavigation?.groups ?? [];
-    if (adminModeController.mode === "studio") {
-        groupsToRender = groupsToRender.filter(g => STUDIO_NAVIGATION_GROUPS.includes(g));
-    } else {
-        groupsToRender = groupsToRender.filter(g => !STUDIO_NAVIGATION_GROUPS.includes(g));
-    }
+    // Studio mode shows view-type entries (devViews) + admin entries (Users/Roles).
+    // Content mode shows collections and custom entries + admin entries (Users/Roles), but not studio views.
+    const filteredEntries = adminModeController.mode === "studio"
+        ? allNavigationEntries.filter(e => e.type === "view" || e.type === "admin")
+        : allNavigationEntries.filter(e => e.type !== "view");
+
+    // Derive groups from the filtered entries, preserving the order from topLevelNavigation.groups
+    const entryGroups = new Set(filteredEntries.map(e => e.group).filter(Boolean));
+    const orderedGroups = navigationState.topLevelNavigation?.groups ?? [];
+    const groupsToRender = [
+        ...orderedGroups.filter(g => entryGroups.has(g)),
+        ...[...entryGroups].filter(g => !orderedGroups.includes(g))
+    ];
 
     // Collapsible groups state - using "drawer" namespace for independent state from home page
-    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsToRender, "drawer");
+    const collapsedDefaults = useMemo(
+        () => buildCollapsedDefaults(registry.cmsConfig?.navigationGroupMappings, "drawer"),
+        [registry.cmsConfig?.navigationGroupMappings]
+    );
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsToRender, "drawer", collapsedDefaults);
 
     const headerSlot = useSlot("navigation.header", { drawerOpen,
 drawerHovered,
@@ -84,7 +94,6 @@ context });
     if (!navigationState.topLevelNavigation)
         return null;
 
-    const navigationEntries = navigationState.topLevelNavigation.navigationEntries;
     const groups = navigationState.topLevelNavigation.groups;
 
     const onItemClick = (view: NavigationEntry) => {
@@ -126,7 +135,7 @@ context });
                 <div
                     ref={scrollRef}
                     onScroll={handleScroll}
-                    className={"flex-grow min-h-0 overflow-y-auto overflow-x-visible no-scrollbar"}
+                    className={"flex-grow min-h-0 overflow-y-auto overflow-x-hidden no-scrollbar"}
                     style={{
                         maskImage: scrolled
                             ? "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)"
@@ -134,7 +143,7 @@ context });
                     }}>
 
                     {groupsToRender.map((group) => {
-                        const entriesInGroup = Object.values(navigationEntries).filter(e => e.group === group);
+                        const entriesInGroup = filteredEntries.filter(e => e.group === group);
                         return (
                             <DrawerNavigationGroup
                                 key={`drawer_group_${group}`}
@@ -146,7 +155,6 @@ context });
                                 tooltipsOpen={tooltipsOpen}
                                 adminMenuOpen={adminMenuOpen}
                                 onItemClick={onItemClick}
-                                hideHeader={adminModeController.mode === "studio"}
                             />
                         );
                     })}
@@ -306,7 +314,7 @@ function DrawerModeSwitch({
     return (
         <div
             className={cls(
-                "overflow-hidden transition-all duration-200 ease-in-out px-3",
+                "shrink-0 overflow-hidden transition-all duration-200 ease-in-out px-3",
                 showSwitch ? "opacity-100 h-7 mt-2 mb-0" : "opacity-0 pointer-events-none h-7 mt-2 mb-0"
             )}
         >

package/src/components/DrawerNavigationGroup.tsx

@@ -75,7 +75,7 @@ export function DrawerNavigationGroup({
             {/* Group Header */}
             {!hideHeader && (
                 <div
-                    className={cls("pl-4 pr-2 py-0.5 flex flex-row items-center transition-colors",
+                    className={cls("pl-3 pr-2 py-0.5 flex flex-row items-center transition-colors",
                         drawerOpen ? "cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800/40 rounded-lg" : "opacity-0 invisible pointer-events-none"
                     )}
                     onClick={drawerOpen ? onToggleCollapsed : undefined}
@@ -83,14 +83,14 @@ export function DrawerNavigationGroup({
                     <ChevronDownIcon
                         size={iconSize.small}
                         className={cls(
-                            "text-surface-500 dark:text-surface-400 transition-transform duration-200 mr-1",
+                            "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1",
                             collapsed ? "-rotate-90" : "rotate-0"
                         )}
                     />
                     <Typography
                         variant={"caption"}
                         color={"secondary"}
-                        className="font-medium flex-grow line-clamp-1"
+                        className="font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400"
                     >
                         {(group || t("views_group"))}
                     </Typography>
@@ -106,7 +106,7 @@ export function DrawerNavigationGroup({
             <div
                 className={cls(
                     "transition-all duration-200 ease-in-out",
-                    (!hideHeader && collapsed) ? "overflow-hidden" : "overflow-visible",
+                    "overflow-hidden",
                     !hideHeader && "dark:bg-transparent",
                     !hideHeader ? (drawerOpen ? "rounded-lg" : "rounded-lg") : "rounded-lg",
                     (!hideHeader && collapsed) ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"