@dyrected/admin 2.5.51 → 2.5.53

package/dist/admin.css

@@ -237,6 +237,12 @@
 
 .dy-admin-ui {
     color-scheme: light;
+    /* Base text/background so elements without an explicit color utility (raw
+       inputs via `color: inherit`, ghost/outline buttons, plain text) resolve
+       to the themed foreground instead of the browser default black — which is
+       invisible in dark mode. Resolves per-theme via the --foreground var. */
+    color: hsl(var(--foreground));
+    background-color: hsl(var(--background));
     font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
   }
 
@@ -1329,6 +1335,10 @@
     margin-bottom: -1.5rem;
 }
 
+.dy--mb-px{
+    margin-bottom: -1px;
+}
+
 .dy--ml-4{
     margin-left: -1rem;
 }
@@ -1365,6 +1375,10 @@
     margin-bottom: 1rem;
 }
 
+.dy-mb-5{
+    margin-bottom: 1.25rem;
+}
+
 .dy-mb-6{
     margin-bottom: 1.5rem;
 }
@@ -1409,6 +1423,10 @@
     margin-right: 0.75rem;
 }
 
+.dy-mt-0{
+    margin-top: 0px;
+}
+
 .dy-mt-0\.5{
     margin-top: 0.125rem;
 }
@@ -1452,6 +1470,10 @@
     display: inline-block;
 }
 
+.\!dy-flex{
+    display: flex !important;
+}
+
 .dy-flex{
     display: flex;
 }
@@ -1594,6 +1616,10 @@
     height: 300px;
 }
 
+.dy-h-\[3px\]{
+    height: 3px;
+}
+
 .dy-h-\[400px\]{
     height: 400px;
 }
@@ -1698,6 +1724,10 @@
     max-height: 60vh;
 }
 
+.dy-max-h-\[85vh\]{
+    max-height: 85vh;
+}
+
 .dy-max-h-\[90dvh\]{
     max-height: 90dvh;
 }
@@ -1778,14 +1808,14 @@
     min-height: 100svh;
 }
 
-.dy-w-0{
-    width: 0px;
-}
-
 .dy-w-1\.5{
     width: 0.375rem;
 }
 
+.dy-w-1\/2{
+    width: 50%;
+}
+
 .dy-w-10{
     width: 2.5rem;
 }
@@ -1814,6 +1844,14 @@
     width: 5rem;
 }
 
+.dy-w-24{
+    width: 6rem;
+}
+
+.dy-w-28{
+    width: 7rem;
+}
+
 .dy-w-3{
     width: 0.75rem;
 }
@@ -1838,6 +1876,10 @@
     width: 10rem;
 }
 
+.dy-w-48{
+    width: 12rem;
+}
+
 .dy-w-5{
     width: 1.25rem;
 }
@@ -1850,6 +1892,10 @@
     width: 1.5rem;
 }
 
+.dy-w-64{
+    width: 16rem;
+}
+
 .dy-w-7{
     width: 1.75rem;
 }
@@ -1963,6 +2009,10 @@
     min-width: 2.75rem;
 }
 
+.dy-min-w-4{
+    min-width: 1rem;
+}
+
 .dy-min-w-44{
     min-width: 11rem;
 }
@@ -1991,10 +2041,6 @@
     min-width: 120px;
 }
 
-.dy-min-w-\[150px\]{
-    min-width: 150px;
-}
-
 .dy-min-w-\[180px\]{
     min-width: 180px;
 }
@@ -2036,6 +2082,18 @@
     max-width: 150px;
 }
 
+.dy-max-w-\[250px\]{
+    max-width: 250px;
+}
+
+.dy-max-w-\[80\%\]{
+    max-width: 80%;
+}
+
+.dy-max-w-\[85\%\]{
+    max-width: 85%;
+}
+
 .dy-max-w-full{
     max-width: 100%;
 }
@@ -2186,6 +2244,14 @@
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.dy-animate-\[dy-splash-breathe_1\.8s_ease-in-out_infinite\]{
+    animation: dy-splash-breathe 1.8s ease-in-out infinite;
+}
+
+.dy-animate-\[dy-splash-slide_1\.2s_ease-in-out_infinite\]{
+    animation: dy-splash-slide 1.2s ease-in-out infinite;
+}
+
 @keyframes dy-bounce{
 
     0%, 100%{
@@ -2394,19 +2460,10 @@
          column-gap: 1rem;
 }
 
-.dy-gap-x-8{
-    -moz-column-gap: 2rem;
-         column-gap: 2rem;
-}
-
 .dy-gap-y-3{
     row-gap: 0.75rem;
 }
 
-.dy-gap-y-4{
-    row-gap: 1rem;
-}
-
 .dy-gap-y-5{
     row-gap: 1.25rem;
 }
@@ -2415,12 +2472,6 @@
     row-gap: 1.5rem;
 }
 
-.dy-space-x-2 > :not([hidden]) ~ :not([hidden]){
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .dy-space-y-0 > :not([hidden]) ~ :not([hidden]){
     --tw-space-y-reverse: 0;
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
@@ -2535,10 +2586,6 @@
     white-space: nowrap;
 }
 
-.dy-text-nowrap{
-    text-wrap: nowrap;
-}
-
 .dy-break-words{
     overflow-wrap: break-word;
 }
@@ -2611,6 +2658,10 @@
     border-width: 1px;
 }
 
+.dy-border-0{
+    border-width: 0px;
+}
+
 .dy-border-2{
     border-width: 2px;
 }
@@ -2631,10 +2682,6 @@
     border-left-width: 1px;
 }
 
-.dy-border-l-0{
-    border-left-width: 0px;
-}
-
 .dy-border-r{
     border-right-width: 1px;
 }
@@ -2905,6 +2952,10 @@
     background-color: rgb(0 0 0 / 0.05);
 }
 
+.dy-bg-black\/50{
+    background-color: rgb(0 0 0 / 0.5);
+}
+
 .dy-bg-black\/60{
     background-color: rgb(0 0 0 / 0.6);
 }
@@ -2940,6 +2991,10 @@
     background-color: hsl(var(--border) / 0.5);
 }
 
+.dy-bg-border\/60{
+    background-color: hsl(var(--border) / 0.6);
+}
+
 .dy-bg-card{
     background-color: hsl(var(--card));
 }
@@ -3198,6 +3253,11 @@
     padding-right: 0px;
 }
 
+.dy-px-0\.5{
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
+}
+
 .dy-px-1{
     padding-left: 0.25rem;
     padding-right: 0.25rem;
@@ -3293,11 +3353,6 @@
     padding-bottom: 0.75rem;
 }
 
-.dy-py-3\.5{
-    padding-top: 0.875rem;
-    padding-bottom: 0.875rem;
-}
-
 .dy-py-4{
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -3417,10 +3472,6 @@
     padding-top: 1.25rem;
 }
 
-.dy-pt-8{
-    padding-top: 2rem;
-}
-
 .dy-text-left{
     text-align: left;
 }
@@ -3429,6 +3480,10 @@
     text-align: center;
 }
 
+.dy-text-right{
+    text-align: right;
+}
+
 .dy-align-top{
     vertical-align: top;
 }
@@ -3836,10 +3891,6 @@
     opacity: 1;
 }
 
-.dy-opacity-35{
-    opacity: 0.35;
-}
-
 .dy-opacity-50{
     opacity: 0.5;
 }
@@ -4259,6 +4310,12 @@
             appearance: textfield;
 }
 
+.dy-admin-ui [data-dy-path]:hover{
+    border-width: 1px;
+    border-style: dashed;
+    border-color: hsl(var(--primary) / 0.1);
+}
+
 .dy-admin-ui .media-preview-dialod-details-form div[style="min-width: 100%;display: table;"] {
   display: flex !important;
 }
@@ -4367,6 +4424,18 @@
   background: hsl(var(--card)) !important;
 }
 
+/* Bootstrap splash animations (see AdminSplash). */
+
+@keyframes dy-splash-breathe {
+  0%, 100% { opacity: 0.55; transform: scale(0.98); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes dy-splash-slide {
+  0% { transform: translateX(-120%); }
+  100% { transform: translateX(340%); }
+}
+
 .dy-admin-ui .hover\:dy-text-primary:hover {
     color: hsl(var(--intelligence));
   }
@@ -4692,6 +4761,10 @@
     padding-left: 1rem;
 }
 
+.last\:dy-border-b-0:last-child{
+    border-bottom-width: 0px;
+}
+
 .last\:dy-pr-4:last-child{
     padding-right: 1rem;
 }
@@ -4718,6 +4791,10 @@
     border-color: hsl(var(--primary) / 0.2);
 }
 
+.hover\:dy-border-primary\/30:hover{
+    border-color: hsl(var(--primary) / 0.3);
+}
+
 .hover\:dy-border-primary\/40:hover{
     border-color: hsl(var(--primary) / 0.4);
 }
@@ -4742,10 +4819,6 @@
     background-color: hsl(var(--background));
 }
 
-.hover\:dy-bg-background\/40:hover{
-    background-color: hsl(var(--background) / 0.4);
-}
-
 .hover\:dy-bg-background\/80:hover{
     background-color: hsl(var(--background) / 0.8);
 }
@@ -4786,6 +4859,10 @@
     background-color: hsl(var(--muted) / 0.5);
 }
 
+.hover\:dy-bg-muted\/60:hover{
+    background-color: hsl(var(--muted) / 0.6);
+}
+
 .hover\:dy-bg-muted\/80:hover{
     background-color: hsl(var(--muted) / 0.8);
 }
@@ -4952,6 +5029,10 @@
     background-color: hsl(var(--background));
 }
 
+.focus-visible\:dy-opacity-100:focus-visible{
+    opacity: 1;
+}
+
 .focus-visible\:dy-shadow-md:focus-visible{
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -5057,10 +5138,18 @@
     background-color: hsl(var(--primary) / 0.1);
 }
 
+.dy-group:hover .group-hover\:dy-text-foreground{
+    color: hsl(var(--foreground));
+}
+
 .dy-group:hover .group-hover\:dy-text-primary{
     color: hsl(var(--primary));
 }
 
+.dy-group:hover .group-hover\:dy-opacity-100{
+    opacity: 1;
+}
+
 .dy-group.toaster .group-\[\.toaster\]\:dy-rounded-xl{
     border-radius: 0.75rem;
 }
@@ -5611,6 +5700,10 @@
         width: 6rem;
     }
 
+    .sm\:dy-w-44{
+        width: 11rem;
+    }
+
     .sm\:dy-w-7{
         width: 1.75rem;
     }
@@ -5903,10 +5996,6 @@
         display: block;
     }
 
-    .md\:dy-inline-block{
-        display: inline-block;
-    }
-
     .md\:dy-flex{
         display: flex;
     }
@@ -5955,6 +6044,10 @@
         width: 20rem;
     }
 
+    .md\:dy-max-w-4xl{
+        max-width: 56rem;
+    }
+
     .md\:dy-max-w-5xl{
         max-width: 64rem;
     }
@@ -6021,9 +6114,9 @@
         padding: 1.5rem;
     }
 
-    .md\:dy-px-6{
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
+    .md\:dy-px-4{
+        padding-left: 1rem;
+        padding-right: 1rem;
     }
 
     .md\:dy-pr-4{
@@ -6074,6 +6167,18 @@
         display: block;
     }
 
+    .lg\:dy-flex{
+        display: flex;
+    }
+
+    .lg\:dy-hidden{
+        display: none;
+    }
+
+    .lg\:dy-w-0{
+        width: 0px;
+    }
+
     .lg\:dy-w-1\/3{
         width: 33.333333%;
     }
@@ -6082,10 +6187,18 @@
         width: 66.666667%;
     }
 
+    .lg\:dy-w-2\/6{
+        width: 33.333333%;
+    }
+
     .lg\:dy-max-w-6xl{
         max-width: 72rem;
     }
 
+    .lg\:dy-flex-1{
+        flex: 1 1 0%;
+    }
+
     .lg\:dy-grid-cols-4{
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
@@ -6128,32 +6241,40 @@
         margin-bottom: calc(2rem * var(--tw-space-y-reverse));
     }
 
+    .lg\:dy-border-r-0{
+        border-right-width: 0px;
+    }
+
+    .lg\:dy-px-4{
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
     .lg\:dy-px-6{
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }
 
-    .lg\:dy-px-8{
-        padding-left: 2rem;
-        padding-right: 2rem;
-    }
-
     .lg\:dy-py-10{
         padding-top: 2.5rem;
         padding-bottom: 2.5rem;
     }
 
-    .lg\:dy-py-8{
-        padding-top: 2rem;
-        padding-bottom: 2rem;
+    .lg\:dy-py-6{
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem;
     }
-}
 
-@media (min-width: 1280px){
+    .lg\:dy-opacity-0{
+        opacity: 0;
+    }
 
-    .xl\:dy-max-w-3xl{
-        max-width: 48rem;
+    .lg\:dy-opacity-100{
+        opacity: 1;
     }
+}
+
+@media (min-width: 1280px){
 
     .xl\:dy-max-w-4xl{
         max-width: 56rem;

package/dist/components/forms/__tests__/nested-editor-context.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/__tests__/resolveContainerPath.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/form-engine.d.ts

@@ -18,5 +18,11 @@ interface FormEngineProps {
      */
     passwordChangeMode?: 'self' | 'admin' | null;
     documentId?: string;
+    /**
+     * Label for the implicit tab that collects fields without an `admin.tab`
+     * when the form uses tabs. Typically the collection's singular label
+     * (e.g. "Page"). Falls back to a capitalised collection slug.
+     */
+    defaultTabLabel?: string;
 }
-export declare function FormEngine({ collection, fields, defaultValues, onSubmit, onChange, isLoading, submitLabel, readOnly, onDataChange, passwordChangeMode, documentId, }: FormEngineProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormEngine(props: FormEngineProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/nested-editor-context.d.ts

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+export interface PathSegment {
+    /** Schema field name at this level (e.g. "body", "cta"). */
+    fieldName: string;
+    /**
+     * Cumulative RHF-resolvable path up to and including this segment
+     * (e.g. "body.2" or "body.2.items.1"). Used to disambiguate
+     * identically-named sub-arrays/objects that live inside different
+     * parent block types, and to correlate mutation reports back to a
+     * depth in activePath.
+     */
+    basePath: string;
+    /**
+     * Stable id from useFieldArray (`field.id`) if this segment is an
+     * item inside an array/blocks field. Undefined for object fields
+     * and the root.
+     */
+    stableId?: string;
+    /** Human-readable label for the breadcrumb (e.g. "Hero", "Button"). */
+    breadcrumbLabel: string;
+}
+export interface NestedEditorContextValue {
+    /**
+     * Whether drill-in (nested-form) navigation is active. When false, nested
+     * containers (blocks/array/object) render inline as a flat form instead of
+     * as drillable rows. Driven by the edit page's live-preview mode.
+     */
+    drillInEnabled: boolean;
+    /** Ordered path segments. Root = []. */
+    activePath: PathSegment[];
+    /**
+     * Push a segment. Called by BlockBuilder/ArrayFieldRenderer/ObjectFieldRenderer
+     * "Edit"/"Drill In" actions.
+     * The caller computes segment.basePath cumulatively:
+     *   basePath = parentSegment.basePath + "." + index  (for array/blocks items)
+     *   basePath = parentSegment.basePath + "." + fieldName  (for object fields)
+     */
+    drillInto: (segment: PathSegment) => void;
+    /**
+     * Navigate back to a specific depth. 0 = root. Called by breadcrumb clicks.
+     */
+    navigateTo: (depth: number) => void;
+    /**
+     * Called after move/remove/insert on a field array. Matches by
+     * segment.basePath (NOT bare fieldName) so identically-named sub-arrays
+     * in different block types are correctly disambiguated.
+     * If the active segment's stableId is no longer present in liveStableIds,
+     * pops back to the parent level.
+     */
+    reconcileAfterMutation: (basePath: string, liveStableIds: string[]) => void;
+    /**
+     * Imperatively navigate to a resolved container path. Called by the
+     * error-summary click handler and the preview click-to-edit handler.
+     */
+    navigateToPath: (resolvedSegments: PathSegment[]) => void;
+    /**
+     * Publish the live useFieldArray id list for a given basePath. Called by
+     * each drill-capable renderer (BlockBuilder, and ArrayFieldRenderer when
+     * drillIn is active) so top-level code can resolve stable ids by
+     * (basePath, index) without access to the nested field-array instances.
+     */
+    registerFieldArray: (basePath: string, ids: string[]) => void;
+    /** Remove a basePath's published ids (called on renderer unmount). */
+    unregisterFieldArray: (basePath: string) => void;
+    /**
+     * Resolve the stable useFieldArray id at (basePath, rawIndex) from the
+     * published registry. Returns undefined if the array isn't registered or
+     * the index is out of range. Passed to `resolveContainerPath`.
+     */
+    getStableId: (basePath: string, rawIndex: number) => string | undefined;
+}
+export declare const NestedEditorContext: React.Context<NestedEditorContextValue>;
+export declare function NestedEditorProvider({ children, drillInEnabled, }: {
+    children: React.ReactNode;
+    drillInEnabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useNestedEditor(): NestedEditorContextValue;
+/**
+ * Returns true if the given basePath is at or below the current activePath.
+ * Used by renderers to decide whether to show list-view or focused sub-form.
+ */
+export declare function isActiveOrChild(activePath: PathSegment[], basePath: string): boolean;
+/**
+ * Returns true if the given basePath is the deepest active segment.
+ */
+export declare function isDeepestActive(activePath: PathSegment[], basePath: string): boolean;

package/dist/components/forms/utils.d.ts

@@ -1,4 +1,5 @@
 import { Field as FieldSchema } from '@dyrected/sdk';
+import { PathSegment } from './nested-editor-context';
 import * as z from "zod";
 /**
  * Normalises a field's `options` array to the canonical `{ label, value }` shape.
@@ -53,3 +54,21 @@ export declare function getFlatErrors(errors: Record<string, unknown>, path?: st
  * formatPath("items.0.name")        // → "Items > Item 1 > Name"
  */
 export declare function formatPath(path: string): string;
+/**
+ * Walks the schema tree alongside a dot-notation path (e.g. "body.2.cta.url")
+ * and returns the ordered PathSegments representing each drillable container
+ * boundary crossed. Drillable boundaries are:
+ *   - `blocks` fields (always drillable)
+ *   - `array` or `object` fields with `admin.drillIn === true`
+ * Leaf field names and raw numeric indices are consumed but not emitted.
+ *
+ * @param fields       Top-level field schemas for the collection.
+ * @param path         Dot-notation path, e.g. "body.2.cta.url"
+ * @param getStableId  Resolves (basePath, rawIndex) → stableId from live
+ *                     useFieldArray state. Takes the full cumulative RHF path
+ *                     (e.g. "body.2.items"), not just the leaf field name, to
+ *                     disambiguate identically-named sub-arrays across block types.
+ * @returns Ordered PathSegment[] for the drill-in trail, or null if the path
+ *          cannot be resolved against the schema.
+ */
+export declare function resolveContainerPath(fields: FieldSchema[], path: string, getStableId: (basePath: string, rawIndex: number) => string | undefined): PathSegment[] | null;

package/dist/components/layout/admin-splash.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A single, calm, branded full-screen loading state used everywhere the admin
+ * is bootstrapping (initial mount + auth resolution). Keeping one consistent
+ * splash — instead of a sequence of differently-worded loaders — makes the cold
+ * load feel like one smooth step rather than several flashes.
+ *
+ * Assumes it renders inside a themed `.dy-admin-ui` ancestor so the tokens
+ * (`--background`, `--foreground`, `--primary`) resolve for both light and dark.
+ */
+export declare function AdminSplash({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;