@dyrected/admin 2.5.34 → 2.5.36

package/dist/admin.css

@@ -1058,6 +1058,10 @@
     bottom: 0.75rem;
 }
 
+.dy-bottom-4{
+    bottom: 1rem;
+}
+
 .dy-left-0{
     left: 0px;
 }
@@ -1178,6 +1182,10 @@
     z-index: 100;
 }
 
+.dy-z-\[150\]{
+    z-index: 150;
+}
+
 .dy-order-1{
     order: 1;
 }
@@ -1480,6 +1488,10 @@
     height: 0.875rem;
 }
 
+.dy-h-32{
+    height: 8rem;
+}
+
 .dy-h-4{
     height: 1rem;
 }
@@ -1592,6 +1604,10 @@
     max-height: 10rem;
 }
 
+.dy-max-h-60{
+    max-height: 15rem;
+}
+
 .dy-max-h-80{
     max-height: 20rem;
 }
@@ -1676,6 +1692,10 @@
     min-height: 180px;
 }
 
+.dy-min-h-\[200px\]{
+    min-height: 200px;
+}
+
 .dy-min-h-\[220px\]{
     min-height: 220px;
 }
@@ -1796,6 +1816,10 @@
     width: 2rem;
 }
 
+.dy-w-80{
+    width: 20rem;
+}
+
 .dy-w-9{
     width: 2.25rem;
 }
@@ -2108,6 +2132,10 @@
     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-transform{
+    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));
+}
+
 @keyframes dy-bounce{
 
     0%, 100%{
@@ -2187,6 +2215,10 @@
     resize: none;
 }
 
+.dy-resize-y{
+    resize: vertical;
+}
+
 .dy-list-inside{
     list-style-position: inside;
 }
@@ -2407,6 +2439,10 @@
     border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.dy-divide-border > :not([hidden]) ~ :not([hidden]){
+    border-color: hsl(var(--border));
+}
+
 .dy-divide-border\/30 > :not([hidden]) ~ :not([hidden]){
     border-color: hsl(var(--border) / 0.3);
 }
@@ -2751,6 +2787,10 @@
     background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
 }
 
+.dy-bg-amber-500\/5{
+    background-color: rgb(245 158 11 / 0.05);
+}
+
 .dy-bg-background{
     background-color: hsl(var(--background));
 }
@@ -4179,6 +4219,75 @@
   pointer-events: none;
 }
 
+/* React Datasheet Grid custom design system variables integration */
+
+.dy-admin-ui .dsg-container {
+  --dsg-border-color: hsl(var(--border) / 0.8) !important;
+  --dsg-selection-border-color: hsl(var(--intelligence)) !important;
+  --dsg-selection-border-radius: var(--radius) !important;
+  --dsg-selection-border-width: 2px !important;
+  --dsg-selection-background-color: hsl(var(--intelligence) / 0.04) !important;
+  --dsg-selection-disabled-border-color: hsl(var(--muted-foreground) / 0.5) !important;
+  --dsg-selection-disabled-background-color: hsl(var(--muted) / 0.2) !important;
+  --dsg-corner-indicator-width: 8px !important;
+  --dsg-header-text-color: hsl(var(--muted-foreground)) !important;
+  --dsg-header-active-text-color: hsl(var(--foreground)) !important;
+  --dsg-cell-background-color: hsl(var(--card)) !important;
+  --dsg-cell-disabled-background-color: hsl(var(--muted) / 0.1) !important;
+  --dsg-transition-duration: .15s !important;
+  --dsg-expand-rows-indicator-width: 10px !important;
+  --dsg-scroll-shadow-width: 8px !important;
+  --dsg-scroll-shadow-color: rgba(0, 0, 0, 0.08) !important;
+  border: 1px solid var(--dsg-border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: none;
+  font-family: var(--font-sans) !important;
+}
+
+.dy-admin-ui .dsg-row-header,
+.dy-admin-ui .dsg-corner-header {
+  background-color: hsl(var(--muted) / 0.3) !important;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dy-admin-ui .dsg-cell {
+  font-size: 13px !important;
+  color: hsl(var(--foreground)) !important;
+}
+
+.dy-admin-ui .dsg-input {
+  font-family: var(--font-sans) !important;
+  font-size: 13px !important;
+  color: hsl(var(--foreground)) !important;
+  padding: 0 8px !important;
+}
+
+.dy-admin-ui .dsg-container {
+  border: solid 1px hsl(var(--border) / 0.8) !important;
+  border-top: none !important;
+  border-left: none !important;
+  cursor: cell !important;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  user-select: none !important;
+  box-sizing: border-box !important;
+  color: hsl(var(--foreground)) !important;
+  background: hsl(var(--card)) !important;
+  position: relative !important;
+  width: 100% !important;
+  overflow: auto !important;
+  will-change: transform !important;
+  direction: ltr !important;
+}
+
+.dy-admin-ui .dsg-container .dsg-add-row {
+  background: hsl(var(--card)) !important;
+}
+
 .dy-admin-ui .hover\:dy-text-primary:hover {
     color: hsl(var(--intelligence));
   }
@@ -4554,6 +4663,10 @@
     background-color: hsl(var(--accent) / 0.7);
 }
 
+.hover\:dy-bg-amber-500\/10:hover{
+    background-color: rgb(245 158 11 / 0.1);
+}
+
 .hover\:dy-bg-background:hover{
     background-color: hsl(var(--background));
 }

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

@@ -1,5 +1,9 @@
 import { Field as FieldSchema } from '@dyrected/sdk';
 import * as z from "zod";
+/**
+ * Normalises a field's `options` array to the canonical `{ label, value }` shape.
+ * Accepts either a shorthand string array or the full object form.
+ */
 export declare function normalizeOptions(options: string[] | {
     label: string;
     value: string;
@@ -7,10 +11,45 @@ export declare function normalizeOptions(options: string[] | {
     label: string;
     value: string;
 }[];
+/**
+ * Builds a Zod schema shape from a collection's field definitions.
+ * Used by the form engine to validate the edit form before submission.
+ *
+ * @param fields - Field definitions from the collection schema.
+ * @param isEdit - When `true`, password fields accept an empty string (no change).
+ * @returns A record of Zod validators keyed by field name, suitable for `z.object(shape)`.
+ */
 export declare function buildSchemaShape(fields: FieldSchema[], isEdit?: boolean): Record<string, z.ZodTypeAny>;
+/**
+ * Builds `react-hook-form` default values from a collection's field definitions
+ * and an existing document (or an empty object for new documents).
+ *
+ * Handles nested `object`, `array`, and `blocks` fields recursively.
+ * Relationship and image fields are normalised to their IDs.
+ * Password fields are always reset to `""` so they are never pre-filled.
+ *
+ * @param fields - Field definitions from the collection schema.
+ * @param defaults - Existing document data, or `{}` for a new document.
+ */
 export declare function buildDefaultValues(fields: FieldSchema[], defaults: any): any;
+/**
+ * Flattens a nested `react-hook-form` errors object into a list of
+ * `{ path, message }` pairs for rendering under individual fields.
+ *
+ * @param errors - The `formState.errors` object from `react-hook-form`.
+ * @param path - Dot-notation prefix accumulated during recursion (omit when calling externally).
+ * @returns A flat array of field path / error message pairs.
+ */
 export declare function getFlatErrors(errors: Record<string, unknown>, path?: string): {
     path: string;
     message: string;
 }[];
+/**
+ * Formats a dot-notation field path into a human-readable label.
+ * Array indices are converted to 1-based "Item N" labels.
+ *
+ * @example
+ * formatPath("address.street")      // → "Address > Street"
+ * formatPath("items.0.name")        // → "Items > Item 1 > Name"
+ */
 export declare function formatPath(path: string): string;

package/dist/components/ui/popover.d.ts

@@ -3,4 +3,5 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Popover, PopoverTrigger, PopoverContent };
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/components/ui/spreadsheet-editor.d.ts

@@ -0,0 +1,10 @@
+import { CollectionConfig } from '@dyrected/core';
+interface SpreadsheetEditorProps {
+    slug: string;
+    schema: CollectionConfig;
+    data: Record<string, unknown>[];
+    onSave: (updates: Record<string, Record<string, unknown>>, creates?: Record<string, unknown>[]) => Promise<void>;
+    isSaving: boolean;
+}
+export declare function SpreadsheetEditor({ slug, schema, data, onSave, isSaving, }: SpreadsheetEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -1,8 +1,20 @@
 import { DyrectedProviderProps } from './providers/dyrected-provider';
 export type { AdminComponents, AdminSchemas, CollectionListSlotProps, DashboardSlotProps, } from './types/admin-components';
+/**
+ * Props for the `<AdminUI />` embedded component.
+ *
+ * Use this when mounting the admin inside an existing React app or a
+ * framework-specific wrapper (Next.js, Nuxt, Astro, etc.).
+ */
 export interface AdminUIProps {
+    /** API key used to authenticate requests to the Dyrected backend. */
     apiKey?: string;
+    /**
+     * Base URL of the Dyrected backend API (e.g. `"https://example.com/dyrected"`).
+     * Defaults to `"/dyrected"` (same-origin).
+     */
     baseUrl?: string;
+    /** Site ID for multi-tenant deployments. Omit for single-site setups. */
     siteId?: string;
     /**
      * The base path where the admin is mounted in the host app.
@@ -22,22 +34,60 @@ export interface AdminUIProps {
      *   <AdminUI onNavigate={(path) => navigateTo('/admin' + path)} ... />
      */
     onNavigate?: (path: string) => void;
+    /**
+     * Set to `true` when the admin is rendered inside a host app shell
+     * (e.g. inside a dashboard layout). Adjusts internal spacing and
+     * removes the standalone top-bar.
+     */
     isEmbedded?: boolean;
+    /** Custom component overrides for fields, dashboard slots, and collection list views. */
     components?: DyrectedProviderProps['components'];
     initialToken?: string;
     defaultTechStack?: string;
 }
+/**
+ * The main admin UI component. Mount this inside your React app.
+ *
+ * Uses a `HashRouter` internally so it can be embedded without conflicting
+ * with the host app's router. If you need real URL history, use
+ * `renderAdminUI` with a custom router wrapper instead.
+ *
+ * @example
+ * ```tsx
+ * <AdminUI baseUrl="/dyrected" apiKey="my-key" isEmbedded />
+ * ```
+ */
 export declare function AdminUI({ apiKey, baseUrl, siteId, onNavigate, isEmbedded, components, initialToken, defaultTechStack, }: AdminUIProps): import("react/jsx-runtime").JSX.Element;
 /**
- * Renders the Admin UI into a DOM element.
- * Useful for non-React frameworks like Nuxt, Svelte, or Vanilla JS.
+ * Imperatively renders the Admin UI into a DOM element.
+ * Useful for non-React frameworks (Nuxt, Svelte, Vanilla JS, Web Components).
+ *
+ * @param container - The DOM element to mount into.
+ * @param props - Same props as `<AdminUI />`.
+ * @returns A cleanup function that unmounts the React root.
+ *
+ * @example
+ * ```ts
+ * const cleanup = renderAdminUI(document.getElementById('admin')!, { baseUrl: '/dyrected' });
+ * // Later:
+ * cleanup();
+ * ```
  */
 export declare function renderAdminUI(container: HTMLElement, props: AdminUIProps): () => void;
+/** Props for the `<AdminStandalone />` self-contained iframe variant. */
 export interface AdminStandaloneProps {
+    /** API key for authenticating backend requests. */
     apiKey: string;
+    /** Base URL of the Dyrected backend API. */
     baseUrl: string;
+    /** Site ID for multi-tenant deployments. */
     siteId?: string;
 }
+/**
+ * A fully self-contained admin UI that uses a `MemoryRouter`.
+ * Intended for iframe or self-hosted deployments where the admin owns
+ * the entire page and does not share URL history with a host app.
+ */
 export declare function AdminStandalone({ apiKey, baseUrl, siteId }: AdminStandaloneProps): import("react/jsx-runtime").JSX.Element;
 export { SetupPromptUI } from './pages/setup/setup-prompt';
 export type { SetupPromptProps } from './pages/setup/setup-prompt';