@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/components/PropertyCollectionView.tsx

@@ -0,0 +1,335 @@
+import type { Properties } from "@rebasepro/types";
+import type { Property } from "@rebasepro/types";
+import React from "react";
+import { defaultBorderMixin, Typography } from "@rebasepro/ui";
+import { PropertyPreview } from "../preview";
+import { PreviewSize } from "../types/components/PropertyPreviewProps";
+import { getValueInPath } from "@rebasepro/utils";
+
+/**
+ * Build a readable label for a path and resolve the property
+ * Supports map and array (including arrays of maps)
+ */
+export function buildPropertyLabelAndGetProperty(
+    properties: Properties,
+    key: string
+): { label: string; property: Property | undefined } {
+    if (!key) return {
+        label: "",
+        property: undefined
+    };
+
+    // Parse "a[0].b.c[2]" -> ["a", 0, "b", "c", 2]
+    const segments: (string | number)[] = [];
+    const re = /([^[.\]]+)|\[(\d+)\]/g;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(key)) !== null) {
+        if (m[1] !== undefined) segments.push(m[1]);
+        else if (m[2] !== undefined) segments.push(Number(m[2]));
+    }
+
+    let currentProps: Properties | undefined = properties;
+    let currentProp: Property | undefined;
+    let lastLabel = "";
+
+    const getArrayOfProp = (p?: Property): Property | undefined => {
+        if (!p || p.type !== "array") return undefined;
+        return Array.isArray(p.of) ? (p.of[0] as Property) : (p.of as Property | undefined);
+    };
+
+    for (const seg of segments) {
+        if (typeof seg === "number") {
+            // Last segment label should be the index itself
+            lastLabel = `[${seg}]`;
+
+            // Move schema context into the array element
+            if (currentProp?.type === "array") {
+                currentProp = getArrayOfProp(currentProp);
+                if (currentProp?.type === "map" && currentProp.properties) {
+                    currentProps = currentProp.properties as Properties;
+                } else {
+                    currentProps = undefined;
+                }
+            } else {
+                // Index without array schema context
+                currentProp = undefined;
+                currentProps = undefined;
+            }
+            continue;
+        }
+
+        // seg is a string key
+        if (currentProps && (currentProps as Record<string, Property>)[seg]) {
+            const nextProp = (currentProps as Record<string, Property>)[seg];
+            currentProp = nextProp;
+            // Last segment label should be the property name (or the raw key)
+            lastLabel = nextProp.name || String(seg);
+
+            if (nextProp.type === "map" && nextProp.properties) {
+                currentProps = nextProp.properties as Properties;
+            } else if (nextProp.type === "array") {
+                // Keep array prop; the next segment (index) will step into its element schema
+                currentProps = undefined;
+            } else {
+                currentProps = undefined;
+            }
+        } else {
+            // Unknown key or no schema context
+            currentProp = undefined;
+            currentProps = undefined;
+            lastLabel = String(seg);
+        }
+    }
+
+    return {
+        label: lastLabel,
+        property: currentProp
+    };
+}
+
+const pathEndsWithIndex = (p: string) => /\[\d+\]$/.test(p);
+
+/**
+ * Improved simple layout for nested changes:
+ * - Map or Array-of-Map -> section header + indented rows
+ * - Leaf or Array-of-Primitives -> single row with label and value
+ */
+export const PropertyCollectionView = ({
+    data,
+    properties,
+    baseKey = "",
+    suppressHeader = false,
+    size = "small"
+}: {
+    data: any;
+    properties: Properties;
+    baseKey?: string;
+    suppressHeader?: boolean;
+    size?: PreviewSize;
+}) => {
+
+    const isTopLevel = !!baseKey && !baseKey.includes(".") && !baseKey.includes("[");
+
+    // Arrays
+    if (Array.isArray(data)) {
+        const {
+            label: arrayLabel,
+            property
+        } = baseKey
+                ? buildPropertyLabelAndGetProperty(properties, baseKey)
+                : {
+                    label: "",
+                    property: undefined as Property | undefined
+                };
+
+        const ofProp = property?.type === "array"
+            ? (Array.isArray(property.of) ? property.of[0] : property.of) as Property | undefined
+            : undefined;
+
+        const isArrayOfMaps = ofProp?.type === "map";
+        const isArrayOfPrimitives = property?.type === "array" && ofProp && ofProp.type !== "map";
+
+        // Many-cardinality relation: property type is "relation" but value is an array
+        // Render as a single row via PropertyPreview (which handles relation arrays)
+        const isRelationArray = property?.type === "relation";
+
+        // Array of primitives or many-relation -> single row
+        if (baseKey && property && (isArrayOfPrimitives || isRelationArray)) {
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                            color={"secondary"}
+                            component={"span"}
+                            className="break-words">
+                            {arrayLabel}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                            value={data}
+                            property={property}
+                            size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Array of maps or unknown -> array header + combined item header (MapName [index]) then content
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                {baseKey && arrayLabel && !suppressHeader && (
+                    <Typography variant="caption"
+                        color={"secondary"}
+                        component={"span"}>
+                        {arrayLabel}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {data.map((item, index) => {
+                        if (item === null || item === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}[${index}]` : `[${index}]`;
+
+                        // Combined header text
+                        const itemHeader = isArrayOfMaps && ofProp?.name
+                            ? `${ofProp.name} [${index}]`
+                            : `[${index}]`;
+
+                        return (
+                            <div key={currentKey} className="py-1">
+                                <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}>
+                                    {itemHeader}
+                                </Typography>
+                                <div className={`pl-4 mt-1 border-l ${defaultBorderMixin}`}>
+                                    <PropertyCollectionView
+                                        data={item}
+                                        properties={properties}
+                                        baseKey={currentKey}
+                                        suppressHeader={true} // don’t repeat the inner map header
+                                        size={size}
+                                    />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Objects (maps or plain objects)
+    if (typeof data === "object" && data !== null) {
+        const {
+            label,
+            property
+        } = baseKey
+                ? buildPropertyLabelAndGetProperty(properties, baseKey)
+                : {
+                    label: "",
+                    property: undefined as Property | undefined
+                };
+
+        // Non-map leaf-like object -> single row
+        if (baseKey && (!property || property.type !== "map" || !property.properties)) {
+            if (!property) return null;
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                            color={"secondary"}
+                            component={"span"}
+                            className="break-words">
+                            {label}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                            value={data}
+                            property={property}
+                            size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Map with defined properties -> show map header only if not suppressed
+        const showMapHeader =
+            baseKey &&
+            !suppressHeader &&
+            property?.type === "map" &&
+            (property.name || !pathEndsWithIndex(baseKey));
+
+        const headerText = property?.name || label;
+
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                {showMapHeader && (
+                    <Typography variant="caption"
+                        color={"secondary"}
+                        component={"span"}
+                    >
+                        {headerText}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {Object.entries(data).map(([key, value]) => {
+                        if (value === null || value === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}.${key}` : key;
+                        return (
+                            <PropertyCollectionView
+                                key={currentKey}
+                                data={value}
+                                properties={properties}
+                                baseKey={currentKey}
+                                size={size}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Primitives
+    if (baseKey) {
+        const {
+            label,
+            property
+        } = buildPropertyLabelAndGetProperty(properties, baseKey);
+        if (!property) return null;
+        return (
+            <div
+                className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                <div className="col-span-4 pr-2">
+                    <Typography variant="caption"
+                        color={"secondary"}
+                        component={"span"}
+                        className="break-words">
+                        {label}
+                    </Typography>
+                </div>
+                <div className="col-span-8">
+                    <PropertyPreview propertyKey={baseKey}
+                        value={data}
+                        property={property}
+                        size={size}/>
+                </div>
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export function buildDataFromPaths(values: object, paths: string[]): object {
+    const result = {};
+    paths.forEach(path => {
+        const value = getValueInPath(values, path);
+        if (value === undefined) return;
+
+        // lodash.set would be perfect here
+        const segments = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let current: Record<string, unknown> = result;
+        segments.forEach((segment, index) => {
+            if (index === segments.length - 1) {
+                current[segment] = value;
+            } else {
+                const nextSegment = segments[index + 1];
+                const isNextAnIndex = /^\d+$/.test(nextSegment);
+                if (!current[segment]) {
+                    if (isNextAnIndex) {
+                        current[segment] = [];
+                    } else {
+                        current[segment] = {};
+                    }
+                }
+                current = current[segment] as Record<string, unknown>;
+            }
+        });
+    });
+    return result;
+}

package/src/components/PropertyConfigBadge.tsx

@@ -0,0 +1,27 @@
+import type { PropertyConfig, Property } from "@rebasepro/types";
+import { getDefaultFieldConfig } from "./field_configs";
+import { getIconForWidget } from "../util/property_utils";
+
+export function PropertyConfigBadge({
+    propertyConfig,
+    disabled,
+    size = "medium"
+}: {
+    propertyConfig: PropertyConfig | undefined,
+    disabled?: boolean,
+    size?: "extraSmall" | "small" | "medium"
+}): React.ReactNode {
+    const sizeClasses = size === "extraSmall" ? "h-5 w-5" : size === "small" ? "h-6 w-6" : "h-8 w-8";
+    const iconSize = size === "extraSmall" ? 14 : size === "small" ? "smallest" : "small";
+    const classes = `${sizeClasses} flex-shrink-0 flex items-center justify-center rounded-full shadow-2xs text-white ` + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
+
+    const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property as Property) : undefined;
+
+    return <div
+        className={classes}
+        style={{
+            background: !disabled ? (propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888") : undefined
+        }}>
+        {propertyConfig?.Icon ? getIconForWidget(propertyConfig, iconSize) : getIconForWidget(defaultPropertyConfig, iconSize)}
+    </div>
+}

package/src/components/PropertyIdCopyTooltip.tsx

@@ -0,0 +1,48 @@
+import { IconButton, Tooltip, Typography } from "@rebasepro/ui";
+import { CopyIcon } from "lucide-react";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltip({
+    propertyKey,
+    className,
+    children
+}: {
+    propertyKey: string,
+    className?: string,
+    children: any
+}) {
+    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
+        delayDuration={800}
+        side={"top"}
+        align={"start"}
+        sideOffset={8}
+        className={className}>
+        {children}
+    </Tooltip>
+
+}
+
+export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-on-surface"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-on-surface-variant opacity-80"}
+                    color={"inherit"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-on-surface"}><code>{propertyKey}</code></Typography>
+            </div>
+            <IconButton size={"small"}>
+                <CopyIcon
+                    className={"text-on-surface"}
+                    onClick={useCallback(() => {
+                        navigator.clipboard.writeText(propertyKey);
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 2000);
+                    }, [propertyKey])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/RebaseAuthGate.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {
+    useRebaseRegistry,
+    useAuthController
+} from "@rebasepro/core";
+import { CircularProgressCenter } from "@rebasepro/ui";
+import { LoginView } from "@rebasepro/core";
+
+/**
+ * Auth gate component that handles the authentication flow.
+ *
+ * - Shows a loading spinner while `authController.initialLoading` is true.
+ * - Shows the login view when no user is authenticated.
+ * - Renders `children` when a user is authenticated.
+ *
+ * **Independently usable**: Use this alone when you want auth gating
+ * without the full CMS layout or navigation.
+ *
+ * @example
+ * ```tsx
+ * <RebaseAuthGate>
+ *   <MyCustomApp />
+ * </RebaseAuthGate>
+ * ```
+ */
+export function RebaseAuthGate({ children }: { children: React.ReactNode }) {
+    const registry = useRebaseRegistry();
+    const authController = useAuthController();
+
+    if (authController?.initialLoading) {
+        return <CircularProgressCenter size={"large"}/>;
+    }
+
+    if (!authController?.user) {
+        const ActiveLoginView = registry.authConfig?.loginView ?? (
+            <LoginView authController={authController as any}/>
+        );
+        return <>{ActiveLoginView}</>;
+    }
+
+    return <>{children}</>;
+}

package/src/components/RebaseCMS.tsx

@@ -0,0 +1,27 @@
+import React, { useLayoutEffect } from "react";
+import { useRebaseRegistryDispatch } from "@rebasepro/core";
+import type { RebaseCMSConfig } from "@rebasepro/types";
+
+/**
+ * Declarative component to configure the CMS in Rebase.
+ * Renders nothing — purely registers config into the RebaseRegistry.
+ *
+ * When `collectionEditor` is provided, the built-in visual schema editor
+ * is auto-wired as a native feature (slots, provider, Studio view) without
+ * needing any external plugin.
+ */
+export function RebaseCMS({ collections, homePage, entityViews, entityActions, plugins, collectionEditor }: RebaseCMSConfig) {
+    const dispatch = useRebaseRegistryDispatch();
+
+    useLayoutEffect(() => {
+        dispatch.registerCMS({ collections,
+homePage,
+entityViews,
+entityActions,
+plugins,
+collectionEditor });
+        return () => dispatch.unregisterCMS();
+    }, [dispatch, collections, homePage, entityViews, entityActions, plugins, collectionEditor]);
+
+    return null;
+}

package/src/components/RebaseLayout.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import {
+    useAdminModeController,
+    useRebaseRegistry
+} from "@rebasepro/core";
+
+import { Scaffold } from "./app/Scaffold";
+import { AppBar } from "./app/AppBar";
+import { Drawer } from "./app/Drawer";
+import { SideDialogs } from "./SideDialogs";
+import { AdminModeSyncer } from "./AdminModeSyncer";
+import type { AppView } from "@rebasepro/types";
+
+export interface RebaseLayoutProps {
+    /** Title shown in the drawer. */
+    title?: string;
+    /** Custom AppBar to override the default. */
+    appBar?: React.ReactNode;
+    /** Custom Drawer to override the default. */
+    drawer?: React.ReactNode;
+    /** Whether to auto-open the drawer on load. */
+    autoOpenDrawer?: boolean;
+    /** Dev views passed to AdminModeSyncer (resolved from RebaseNavigation). */
+    devViews?: AppView[];
+}
+
+/**
+ * Layout layer — provides the Scaffold, AppBar, Drawer, and SideDialogs.
+ *
+ * Wraps the route outlet with the standard Rebase admin layout.
+ * Override individual pieces (appBar, drawer) via props.
+ *
+ * **Independently usable**: Use this when you want the Rebase layout
+ * without its default route definitions.
+ *
+ * @example
+ * ```tsx
+ * <RebaseLayout title="My Admin">
+ *   <Route path="/" element={<MyHomePage />} />
+ *   <Route path="/custom" element={<CustomView />} />
+ * </RebaseLayout>
+ * ```
+ */
+export function RebaseLayout(props: RebaseLayoutProps) {
+    const {
+        title = "Rebase",
+        appBar,
+        drawer,
+        autoOpenDrawer = false,
+        devViews = []
+    } = props;
+
+    const adminModeController = useAdminModeController();
+
+    const ActiveAppBar = appBar ?? <AppBar/>;
+    const ActiveDrawer = drawer ?? (
+        <Drawer
+            title={title}
+            logoDestination={adminModeController.mode === "studio" ? "/s" : "/"}
+        />
+    );
+
+    return (
+        <Scaffold autoOpenDrawer={autoOpenDrawer}>
+            <AdminModeSyncer devViews={devViews}/>
+            {ActiveAppBar}
+            {ActiveDrawer}
+            <Outlet/>
+            <SideDialogs/>
+        </Scaffold>
+    );
+}