@rebasepro/app 0.16.0 → 0.16.1-canary.g0d7af95

package/dist/util/index.d.ts

@@ -1,8 +1,9 @@
-export * from "./icon_list";
-export * from "./icons";
-export * from "./createFormexStub";
-export * from "./entity_cache";
-export * from "./useStorageUploadController";
-export * from "./previews";
-export * from "./enums";
-export * from "./constants";
+export * from "./icon_list.js";
+export * from "./icons.js";
+export * from "./createFormexStub.js";
+export * from "./entity_cache.js";
+export * from "./useStorageUploadController.js";
+export * from "./previews.js";
+export * from "./enums.js";
+export * from "./constants.js";
+export * from "./local_storage.js";

package/dist/util/local_storage.d.ts

@@ -0,0 +1,31 @@
+/**
+ * localStorage that tolerates not being there.
+ *
+ * `typeof window !== "undefined"` was the guard these call sites used, and it
+ * answers the wrong question: it says "am I in a browser", not "can I read
+ * storage". Three things make that distinction real rather than theoretical:
+ *
+ * - A browser can have storage **disabled**. Safari in private mode, a blocked
+ *   third-party cookie policy, and a sandboxed iframe all give you a `window`
+ *   whose `localStorage` property *throws on access* — a SecurityError raised
+ *   before any method is called, which no amount of null-checking the result
+ *   catches.
+ * - A test environment can be **half torn down**. jsdom is disposed at the end
+ *   of a file while React is still finishing a concurrent render, so `window`
+ *   survives as a husk and `localStorage.getItem` is no longer a function.
+ *   That is how this was found: `TypeError: localStorage.getItem is not a
+ *   function`, thrown out of a render, failing a suite in which every one of
+ *   709 tests passed.
+ * - Server rendering has no `window` at all, which is the only case the old
+ *   guard actually covered.
+ *
+ * Reading a UI preference is never worth a crash. Every function here fails to
+ * `null` / no-op, so a user with storage switched off gets the default
+ * appearance instead of a blank page.
+ */
+/** The stored string for `key`, or null if it is unset or unreadable. */
+export declare function readStoredString(key: string): string | null;
+/** Persist `value` under `key`. A no-op when storage is unavailable. */
+export declare function writeStoredString(key: string, value: string): void;
+/** Remove `key`. A no-op when storage is unavailable. */
+export declare function removeStoredString(key: string): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/app",
   "type": "module",
-  "version": "0.16.0",
+  "version": "0.16.1-canary.g0d7af95",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -52,12 +52,12 @@
     "magic-string": "^0.30.0",
     "notistack": "^3.0.2",
     "react-i18next": "^17.0.11",
-    "@rebasepro/admin-types": "0.16.0",
-    "@rebasepro/forms": "0.16.0",
-    "@rebasepro/common": "0.16.0",
-    "@rebasepro/types": "0.16.0",
-    "@rebasepro/ui": "0.16.0",
-    "@rebasepro/utils": "0.16.0"
+    "@rebasepro/common": "0.16.1-canary.g0d7af95",
+    "@rebasepro/types": "0.16.1-canary.g0d7af95",
+    "@rebasepro/admin-types": "0.16.1-canary.g0d7af95",
+    "@rebasepro/utils": "0.16.1-canary.g0d7af95",
+    "@rebasepro/forms": "0.16.1-canary.g0d7af95",
+    "@rebasepro/ui": "0.16.1-canary.g0d7af95"
   },
   "peerDependencies": {
     "react": ">=19.2.7",
@@ -104,7 +104,7 @@
   "jest": {
     "transform": {
       "^.+\\.tsx?$": "ts-jest",
-      "^.+\\.m?jsx?$": "<rootDir>/../../scripts/jest/react-router-esm-transform.cjs"
+      "^.+\\.m?jsx?$": "<rootDir>/../../tooling/scripts/jest/react-router-esm-transform.cjs"
     },
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
     "moduleFileExtensions": [
@@ -135,7 +135,7 @@
   },
   "scripts": {
     "watch": "vite build --watch",
-    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json && pnpm exec esbuild src/vitePlugin.ts --platform=node --format=esm --outfile=dist/vitePlugin.js && node ../../scripts/assert-build-output.mjs",
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json && node ../../tooling/scripts/add-dts-extensions.mjs dist && pnpm exec esbuild src/vitePlugin.ts --platform=node --format=esm --outfile=dist/vitePlugin.js && node ../../tooling/scripts/assert-build-output.mjs",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
     "clean": "rm -rf dist && find ./src \\( -name '*.js' -o -name '*.d.ts' \\) -type f | xargs rm -f",

package/src/auth/api.ts

@@ -10,6 +10,7 @@
  */
 
 import { RebaseApiError } from "@rebasepro/types";
+import type { AuthAdapterCapabilities } from "@rebasepro/types";
 import { DEFAULT_API_PATH } from "../hooks/ApiConfigContext";
 
 async function handleResponse<T>(response: Response): Promise<T> {
@@ -59,28 +60,14 @@ async function fetchWithHandling(input: RequestInfo | URL, init?: RequestInit):
 }
 
 /**
- * Auth config response from the backend
+ * What `GET /api/auth/config` answers.
+ *
+ * The wire contract is declared once, in `@rebasepro/types`, and re-exported
+ * here under the name this module uses. Three near-copies of it used to exist —
+ * this one listed an `emailServiceEnabled` flag no backend sends, and marked as
+ * optional fields every backend always returns.
  */
-export interface AuthConfigResponse {
-    /** True when there are no users in the system and first user setup is needed */
-    needsSetup: boolean;
-    /** Whether new user registration is enabled */
-    registrationEnabled: boolean;
-    /** Whether email service is configured */
-    emailServiceEnabled?: boolean;
-    /** Whether the self-service password reset flow (email link) is supported */
-    passwordReset?: boolean;
-    /**
-     * Whether an admin can reset another user's password, i.e. the adapter
-     * mounts `POST /admin/users/:userId/reset-password`. Absent on backends
-     * predating this field, which the frontend treats as supported.
-     */
-    adminPasswordReset?: boolean;
-    /** Whether email verification is supported */
-    emailVerification?: boolean;
-    /** Complete list of enabled OAuth provider IDs (e.g. ["google", "github", "discord"]) */
-    enabledProviders: string[];
-}
+export type AuthConfigResponse = AuthAdapterCapabilities;
 
 /**
  * Cache container for `fetchAuthConfig` — holds both the inflight promise

package/src/auth/useRebaseAuthController.ts

@@ -325,13 +325,16 @@ export function useRebaseAuthController(
         setAuthProviderError,
         extra,
         setExtra,
+        // `authConfig` is null until `GET /auth/config` lands, so each fallback
+        // is what to assume *while it is still in flight* — not a stand-in for a
+        // backend that might omit the field. The backend always sends all of them.
         capabilities: {
             emailPasswordLogin: true,
             googleLogin: !!(props.googleClientId),
-            registration: authConfig?.registrationEnabled ?? false,
+            registrationEnabled: authConfig?.registrationEnabled ?? false,
             passwordReset: authConfig?.passwordReset ?? false,
-            // Defaults to true so backends predating this field keep showing the
-            // action. Adapters that don't support it report `false` explicitly.
+            // True while loading: the admin UI's "Reset Password" action is worth
+            // showing optimistically and hiding once a backend says it cannot.
             adminPasswordReset: authConfig?.adminPasswordReset ?? true,
             sessionManagement: true,
             profileUpdate: true,

package/src/collections/entity-display.ts

@@ -13,50 +13,22 @@ import type {
     EntityDisplayRole
 } from "@rebasepro/admin-types";
 
-/**
- * Collections that have already warned about a deprecated field, so a list of
- * fifty rows produces one line in the console rather than fifty.
- */
-const deprecationWarned = new Set<string>();
-
-function collectionId(collection: AdminCollection<never> | AdminCollection<any>): string {
-    return (collection.slug ?? collection.name ?? "collection") as string;
-}
-
-function warnOnce(id: string, message: string): void {
-    const key = `${id}:${message}`;
-    if (deprecationWarned.has(key)) return;
-    deprecationWarned.add(key);
-    console.warn(message);
-}
-
 /**
  * What the collection declares for a role, before deciding which form it is.
  *
- * `display.title` wins over the deprecated `titleProperty`: a collection setting
- * both is mid-migration, and the new field is the one it means.
+ * One field states it: `display[role]`. `admin.titleProperty` used to be a
+ * second way to say `display.title` and is gone — a role with two spellings is
+ * a role with two readers, and this one had grown seven.
  */
 function getDeclaredSource<M extends Record<string, unknown>>(
     collection: AdminCollection<M>,
     role: EntityDisplayRole
 ): string | EntityDisplayResolver<M, unknown> | undefined {
-
     const display = collection.display as Record<string, unknown> | undefined;
     const declared = display?.[role];
-    if (declared !== undefined) return declared as string | EntityDisplayResolver<M, unknown>;
-
-    if (role === "title" && collection.titleProperty) {
-        const id = collectionId(collection);
-        warnOnce(
-            id,
-            `[rebase] Collection "${id}" uses admin.titleProperty, which is deprecated. ` +
-            `Move it to admin.display.title — the same string works there, and display.title ` +
-            `also accepts a resolver for a title the record does not carry.`
-        );
-        return collection.titleProperty as string;
-    }
-
-    return undefined;
+    return declared === undefined
+        ? undefined
+        : declared as string | EntityDisplayResolver<M, unknown>;
 }
 
 /**

package/src/collections/form-layout.ts

@@ -18,6 +18,7 @@ import type {
     PropertySpan
 } from "@rebasepro/admin-types";
 import type { Property } from "@rebasepro/types";
+import { getDisplayPropertyKey } from "./entity-display";
 import { isHidden } from "./property_presentation";
 
 /**
@@ -278,7 +279,7 @@ export function resolveFormLayout<M extends Record<string, unknown>>({
 }: ResolveFormLayoutParams<M>): ResolvedFormLayout {
 
     const config = collection.form;
-    const titlePropertyKey = collection.titleProperty as string | undefined;
+    const titlePropertyKey = getDisplayPropertyKey(collection, "title");
 
     const available = new Map<string, ResolvedFormField>();
     for (const key of fieldKeys) {

package/src/collections/title-property.ts

@@ -224,7 +224,7 @@ index });
  *
  * Returns `undefined` when that first property is anything but a
  * single-cardinality relation, or when the collection states its own
- * `titleProperty`.
+ * `display.title`.
  *
  * @group Collections
  */

package/src/components/Debug/UIReferenceView.tsx

@@ -118,7 +118,12 @@ export function UIReferenceView() {
         <div className="flex w-full">
 
             {/* ── Sidebar nav (same structure as DefaultDrawer) ─────────────── */}
-            <div className={cls("flex flex-col sticky top-0 h-screen grow-0 shrink-0 w-[200px] border-r", defaultBorderMixin)}>
+            {/* 232px, not 200px. The icon rail is 56px and the label is uppercase
+                at 12px, which left ~128px — one character short of "COLLECTION
+                TABLE", so the longest entry in the list rendered as
+                "COLLECTION TA…". This is the reference's own nav, not the shared
+                DefaultDrawer, so widening it costs no copy-fidelity. */}
+            <div className={cls("flex flex-col sticky top-0 h-screen grow-0 shrink-0 w-[232px] border-r", defaultBorderMixin)}>
                 {/* DrawerLogo */}
                 <div className="flex flex-row items-center shrink-0 pt-4 pb-2 px-2">
                     <div className="shrink-0 flex items-center justify-center w-[56px] h-[40px]">
@@ -187,7 +192,14 @@ export function UIReferenceView() {
             </div>
 
             {/* ── Main content area ───────────────────────────────────────────── */}
-            <div ref={scrollContainerRef} className="flex-1">
+            {/* `min-w-0` is required, not cosmetic. A flex item defaults to
+                `min-width: auto`, so this column sized itself to its widest
+                descendant — the 1451px CRM dashboard — and pushed the whole page
+                past the viewport, cutting the collection table's last columns
+                off screen. With `min-w-0` the column can shrink to the space
+                available and the `overflow-x-auto` on the wide mocks actually
+                engages instead of being overruled from above. */}
+            <div ref={scrollContainerRef} className="flex-1 min-w-0">
 
                 {/* ═══════════════════════════════════════════════
                     SECTION: Drawer
@@ -546,7 +558,7 @@ selected: true }, { name: "Tags" }].map(c => (
                             <Typography variant="caption" color="secondary" className="block mb-1">Property Editor (no selection)</Typography>
                             <div className={cls("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin)}>
                                 <div className="flex flex-col items-center justify-center h-full gap-4">
-                                    <Typography variant="label">
+                                    <Typography variant="label" className="text-center px-4">
                                         Select a property to edit it
                                     </Typography>
                                     <Button>
@@ -562,7 +574,7 @@ selected: true }, { name: "Tags" }].map(c => (
                             <Typography variant="caption" color="secondary" className="block mb-1">Property Editor (empty collection)</Typography>
                             <div className={cls("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin)}>
                                 <div className="flex flex-col items-center justify-center h-full gap-4">
-                                    <Typography variant="label">
+                                    <Typography variant="label" className="text-center px-4">
                                         Now you can add your first property
                                     </Typography>
                                     <Button>
@@ -578,7 +590,7 @@ selected: true }, { name: "Tags" }].map(c => (
                             <Typography variant="caption" color="secondary" className="block mb-1">Collection ListIcon (no selection)</Typography>
                             <div className={cls("flex flex-col items-center justify-center h-48 w-[320px] border rounded-lg", defaultBorderMixin)}>
                                 <div className="flex flex-col items-center justify-center h-full gap-4">
-                                    <Typography variant="label">
+                                    <Typography variant="label" className="text-center px-4">
                                         Select a collection or create a new one to start editing
                                     </Typography>
                                     <Button>
@@ -685,7 +697,15 @@ selected: true }, { name: "Tags" }].map(c => (
                         </div>
                         <div>
                             <Typography variant="caption" color="secondary" className="block mb-2 font-mono">IconButton — sizes</Typography>
-                            <div className="flex flex-wrap gap-3 items-center">
+                            {/* `items-end`, matching the Button size ramp above.
+                                Each entry is a column of button-over-label, and the
+                                buttons step 28→32→40→48px. Centring the columns
+                                against each other scattered the captions across a
+                                10px band, so a row meant to read as an even ramp
+                                read as ragged. Aligning the ends puts every caption
+                                on one baseline and lets the size difference show in
+                                the buttons, which is the point of the row. */}
+                            <div className="flex flex-wrap gap-3 items-end">
                                 {([
                                     { s: "smallest" as const, icon: <PencilIcon size={14}/> },
                                     { s: "small" as const, icon: <PencilIcon size={16}/> },
@@ -956,11 +976,15 @@ roles: [] }
                 {/* ═══════════════════════════════════════════════
                     SECTION: CRM Dashboard
                 ═══════════════════════════════════════════════ */}
-                <SectionBlock id="crm-dashboard" title="CRM Dashboard — CrmDashboardDemo">
+                <SectionBlock wide id="crm-dashboard" title="CRM Dashboard — CrmDashboardDemo">
                     <Typography variant="body2" color="secondary" className="mb-4">
                         A real-world showcase of a complex dashboard home page incorporating Rebase design language.
                     </Typography>
-                    <div className="w-full">
+                    {/* The dashboard is intrinsically ~1483px wide — wider than the
+                        content column at any laptop size. Scrolling it inside its
+                        own container is what stops it pushing the section, and is
+                        the same rule wide tables follow everywhere else. */}
+                    <div className="w-full overflow-x-auto">
                         <CrmDashboardDemo />
                     </div>
                 </SectionBlock>
@@ -968,7 +992,7 @@ roles: [] }
                 {/* ═══════════════════════════════════════════════
                     SECTION: Collection Table
                 ═══════════════════════════════════════════════ */}
-                <SectionBlock id="collection-table" title="Collection Table">
+                <SectionBlock wide id="collection-table" title="Collection Table">
                     <Typography variant="body2" color="secondary" className="mb-4">
                         Sample data collection rendered as a sortable, searchable, filterable table with row selection.
                         Uses <code className="font-mono text-xs">Table</code>, <code className="font-mono text-xs">Chip</code>,{" "}
@@ -981,7 +1005,7 @@ roles: [] }
                 {/* ═══════════════════════════════════════════════
                     SECTION: Card View
                 ═══════════════════════════════════════════════ */}
-                <SectionBlock id="card-view" title="Card View">
+                <SectionBlock wide id="card-view" title="Card View">
                     <Typography variant="body2" color="secondary" className="mb-4">
                         Grid of entity cards with thumbnail area, progress bar, status/priority chips, and assignee.
                         Uses <code className="font-mono text-xs">Card</code>, <code className="font-mono text-xs">Chip</code>,{" "}
@@ -993,24 +1017,37 @@ roles: [] }
                 {/* ═══════════════════════════════════════════════
                     SECTION: Kanban Board
                 ═══════════════════════════════════════════════ */}
-                <SectionBlock id="kanban-board" title="Kanban Board">
+                <SectionBlock wide id="kanban-board" title="Kanban Board">
                     <Typography variant="body2" color="secondary" className="mb-4">
                         Drag-and-drop kanban board with four status columns.
                         Uses <code className="font-mono text-xs">KanbanView</code>, <code className="font-mono text-xs">BoardItem</code>,{" "}
                         <code className="font-mono text-xs">BoardItemViewProps</code>.
                     </Typography>
-                    <div className="w-full"><KanbanBoardDemo /></div>
+                    <div className="w-full overflow-x-auto"><KanbanBoardDemo /></div>
                 </SectionBlock>
             </div>
         </div>
     );
 }
 
-function SectionBlock({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
+function SectionBlock({ id, title, wide, children }: { id: string; title: string; wide?: boolean; children: React.ReactNode }) {
     return (
-        <section id={id} className={cls("px-6 py-8 border-b scroll-mt-0 max-w-5xl", defaultBorderMixin)}>
-            <Typography variant="h5" className="mb-1">{title}</Typography>
-            <div className="mt-4">{children}</div>
+        // `max-w-5xl` and `border-b` used to share this element, and they cannot.
+        // Several mocks here are app-scale and intrinsically wider than 64rem
+        // (the CRM dashboard reaches 1483px), so the section's own rule stopped
+        // at 1264px while its content ran past it — every such section read as a
+        // broken edge.
+        //
+        // Split instead: the SECTION spans the column, so its rule always
+        // reaches its own edges; the CONTENT keeps a measure, so a form column
+        // never stretches to 700px on a wide monitor. `wide` opts the app-scale
+        // mocks out of the measure — they pair it with `overflow-x-auto` so they
+        // scroll inside themselves rather than pushing the page.
+        <section id={id} className={cls("px-6 py-8 border-b scroll-mt-0", defaultBorderMixin)}>
+            <div className={wide ? undefined : "max-w-5xl"}>
+                <Typography variant="h5" className="mb-1">{title}</Typography>
+                <div className="mt-4">{children}</div>
+            </div>
         </section>
     );
 }

package/src/components/LoginView/LoginView.tsx

@@ -71,7 +71,7 @@ export interface LoginViewProps {
 
     /**
      * Prevent users from creating new accounts.
-     * If not set, checks `authController.capabilities.registration`.
+     * If not set, checks `authController.capabilities.registrationEnabled`.
      */
     disableSignupScreen?: boolean;
 
@@ -130,7 +130,7 @@ export interface LoginViewProps {
 
     /**
      * Whether registration is enabled.
-     * If not set, derived from `authController.capabilities.registration`.
+     * If not set, derived from `authController.capabilities.registrationEnabled`.
      */
     registrationEnabled?: boolean;
 
@@ -296,7 +296,7 @@ export function LoginView({
     const isBootstrapMode = needsSetup
         ?? ("needsSetup" in authController && !!(authController as { needsSetup?: boolean }).needsSetup)
         ?? false;
-    const canRegister = registrationEnabled ?? caps.registration ?? false;
+    const canRegister = registrationEnabled ?? caps.registrationEnabled ?? false;
     // Every OAuth button needs BOTH halves: a client id here and the matching
     // provider configured on the backend. `enabledProviders` is always an array
     // (the controller defaults it to `[]`), so a missing entry means "the

package/src/components/common/useDataTableController.tsx

@@ -210,7 +210,26 @@ export function useDataTableController<M extends Record<string, any> = any, USER
     const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
     const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
 
-    const clearFilter = useCallback(() => setFilterValues(fixedFilter ?? defaultFilter ?? undefined), [fixedFilter, defaultFilter]);
+    /**
+     * Clear the user's filters. `fixedFilter` survives — it is the collection
+     * forcing a scope, not something the user chose — but `defaultFilter` does
+     * not: a default is where the view *opens*, not a floor it can never go
+     * below.
+     *
+     * It used to reset to `defaultFilter`, which made "clear" unable to clear
+     * whenever a collection defined one, and every caller here wanted the
+     * opposite. `ClearFilterSortButton` is labelled "clear filter" and left one
+     * set. `EditorCollectionActionStart` calls this and then re-applies
+     * `collection.defaultFilter` on the next line — redundant under the old
+     * behaviour, and the clearest statement of what it expected.
+     * `FilterPresetsButton` documents "clearing all filters deactivates all
+     * chips", which was false: it derives a chip's active state from the
+     * filters, so a preset whose values equalled `defaultFilter` switched
+     * itself straight back on. That chip could not be turned off at all — click
+     * it, the keys are removed, the filter resets to the identical default, and
+     * the chip lights up again.
+     */
+    const clearFilter = useCallback(() => setFilterValues(fixedFilter ?? undefined), [fixedFilter]);
 
     const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string> | (string & {})> | undefined) => {
         if (fixedFilter) {

package/src/core/Rebase.tsx

@@ -6,7 +6,7 @@ import type { ComponentOverrideMap } from "@rebasepro/admin-types";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { CenteredView, Typography } from "@rebasepro/ui";
 import { User, CollectionRegistryController, DataDriver, DataSourceDefinition, RebaseData, DEFAULT_DATA_SOURCE_KEY, StorageSource, StorageSourceDefinition, DEFAULT_STORAGE_SOURCE_KEY } from "@rebasepro/types";
-import { RebaseContext, RENAMED_SLOTS, UNRENDERED_SLOTS } from "@rebasepro/admin-types";
+import { RebaseContext, UNRENDERED_SLOTS } from "@rebasepro/admin-types";
 import { PluginProviderStack } from "./PluginProviderStack";
 import { PluginLifecycleManager } from "./PluginLifecycleManager";
 import { AuthControllerContext, CollectionResolverRegistrationContext, CollectionResolver } from "../contexts";
@@ -85,32 +85,11 @@ export function Rebase<USER extends User, DB = unknown>(props: RebaseProps<USER,
         }
     }
 
-    // Merge direct slots with plugin slots, rewriting any retired slot name to
-    // the one it was renamed to. `useSlot` matches on string equality, so a
-    // contribution left on the old name would register cleanly and render
-    // nothing — the same silent nothing `UNRENDERED_SLOTS` warns about below.
+    // Merge direct slots with plugin slots.
     const resolvedSlots: SlotContribution[] = useMemo(() => [
         ...directSlots,
         ...((plugins ?? []).flatMap((p) => p.slots ?? []))
-    ].map((contribution) => {
-        const current = RENAMED_SLOTS[contribution.slot];
-        return current ? { ...contribution, slot: current } : contribution;
-    }), [directSlots, plugins]);
-
-    // Warn once per retired name actually in use. This reads the *pre-rewrite*
-    // names off the inputs rather than `resolvedSlots`, which no longer has
-    // them — the rewrite above is what makes the plugin keep working, and this
-    // is what tells its author to stop relying on it.
-    useEffect(() => {
-        const registered = [...directSlots, ...((plugins ?? []).flatMap((p) => p.slots ?? []))];
-        for (const legacy of new Set(registered.map(s => s.slot).filter(slot => slot in RENAMED_SLOTS))) {
-            console.warn(
-                `[Rebase] The "${legacy}" slot has been renamed to "${RENAMED_SLOTS[legacy]}". ` +
-                "The contribution was redirected and still renders, but the old name will be " +
-                "removed in a future major version."
-            );
-        }
-    }, [directSlots, plugins]);
+    ], [directSlots, plugins]);
 
     // Seven of the twenty-nine declared slots are rendered nowhere. They have
     // props interfaces and rows in the public slot reference, so registering

package/src/hooks/useBuildAdminModeController.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState } from "react";
 import type { AdminModeController } from "./useAdminModeController";
+import { readStoredString, writeStoredString } from "../util/local_storage";
 
 /**
  * Use this hook to build an admin mode controller that determines
@@ -7,13 +8,11 @@ import type { AdminModeController } from "./useAdminModeController";
  */
 export function useBuildAdminModeController(): AdminModeController {
 
-    const savedMode = typeof window !== "undefined" ? localStorage.getItem("rebase-admin-mode") as "content" | "studio" | "settings" | null : null;
+    const savedMode = readStoredString("rebase-admin-mode") as "content" | "studio" | "settings" | null;
     const [mode, setMode] = useState<"content" | "studio" | "settings">(savedMode ?? "content");
 
     const setModeInternal = useCallback((newMode: "content" | "studio" | "settings") => {
-        if (typeof window !== "undefined") {
-            localStorage.setItem("rebase-admin-mode", newMode);
-        }
+        writeStoredString("rebase-admin-mode", newMode);
         setMode(newMode);
     }, []);
 

package/src/hooks/useBuildEffectiveRoleController.tsx

@@ -1,5 +1,6 @@
 import type { EffectiveRoleController } from "@rebasepro/types";
 import { useCallback, useState, useMemo } from "react";
+import { readStoredString, removeStoredString, writeStoredString } from "../util/local_storage";
 ;
 
 /**
@@ -10,16 +11,14 @@ import { useCallback, useState, useMemo } from "react";
  */
 export function useBuildEffectiveRoleController(): EffectiveRoleController {
 
-    const savedRole = typeof window !== "undefined" ? localStorage.getItem("rebase-effective-role") : null;
+    const savedRole = readStoredString("rebase-effective-role");
     const [effectiveRole, setEffectiveRole] = useState<string | null>(savedRole ?? null);
 
     const setRoleInternal = useCallback((newRole: string | null) => {
-        if (typeof window !== "undefined") {
-            if (newRole) {
-                localStorage.setItem("rebase-effective-role", newRole);
-            } else {
-                localStorage.removeItem("rebase-effective-role");
-            }
+        if (newRole) {
+            writeStoredString("rebase-effective-role", newRole);
+        } else {
+            removeStoredString("rebase-effective-role");
         }
         setEffectiveRole(newRole);
     }, []);

package/src/hooks/useBuildModeController.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState, useMemo } from "react";
 
 import type { ModeController } from "./useModeController";
+import { readStoredString, removeStoredString, writeStoredString } from "../util/local_storage";
 
 /**
  * Use this hook to build a color mode controller that determines
@@ -16,8 +17,9 @@ export function useBuildModeController(): ModeController {
     }, []);
 
     const [mode, setMode] = useState<"light" | "dark">(() => {
-        const prefersDarkModeStorage = typeof window !== "undefined" && localStorage.getItem("prefers-dark-mode") != null
-            ? localStorage.getItem("prefers-dark-mode") === "true"
+        const storedPrefersDarkMode = readStoredString("prefers-dark-mode");
+        const prefersDarkModeStorage = storedPrefersDarkMode != null
+            ? storedPrefersDarkMode === "true"
             : null;
         const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery();
         return prefersDarkMode ? "dark" : "light";
@@ -26,7 +28,7 @@ export function useBuildModeController(): ModeController {
     useEffect(() => {
         const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
         const handleChange = (e: MediaQueryListEvent) => {
-            if (localStorage.getItem("prefers-dark-mode") == null) {
+            if (readStoredString("prefers-dark-mode") == null) {
                 setMode(e.matches ? "dark" : "light");
                 setDocumentMode(e.matches ? "dark" : "light");
             }
@@ -50,16 +52,16 @@ export function useBuildModeController(): ModeController {
     const setModeInternal = useCallback((mode: "light" | "dark" | "system") => {
         if (mode === "light") {
             setDocumentMode("light");
-            localStorage.setItem("prefers-dark-mode", "false");
+            writeStoredString("prefers-dark-mode", "false");
             setMode("light");
         } else if (mode === "dark") {
             setDocumentMode("dark");
-            localStorage.setItem("prefers-dark-mode", "true");
+            writeStoredString("prefers-dark-mode", "true");
             setMode("dark");
         } else {
             const preferredMode = prefersDarkModeQuery() ? "dark" : "light";
             setDocumentMode(preferredMode);
-            localStorage.removeItem("prefers-dark-mode");
+            removeStoredString("prefers-dark-mode");
             setMode(preferredMode);
         }
     }, [prefersDarkModeQuery]);