@object-ui/components 11.2.0 → 11.3.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @object-ui/components
 
+## 11.3.0
+
+### Minor Changes
+
+- d23d6eb: Three-tier AI page authoring: `kind:'html'` and a trusted `kind:'react'` tier.
+
+  - **`@object-ui/react-runtime`** (new) — the trusted runtime-React tier for
+    `kind:'react'` pages (vendored react-runner: Sucrase transpile + scope-eval,
+    no sandbox). Renders real JSX/TSX (any HTML + JS + hooks/useState/map/onClick)
+    in the main React tree with an injected scope (React, the public data blocks,
+    page data) and a built-in error boundary.
+  - **`@object-ui/core`** — new runtime capability gate (`enableCapability` /
+    `disableCapability` / `isCapabilityEnabled`, `CAP_REACT_PAGES`). `react-pages`
+    defaults **ON** (the platform trusts reviewed, draft-gated authors); a
+    deployment turns it OFF server-side (the runtime injects the disable global
+    when `OS_DISABLE_REACT_PAGES` is set). Never controlled from authored metadata.
+  - **`@object-ui/components`** — PageRenderer now routes `kind:'react'`
+    (capability-gated, lazy-loads the runtime) and renders `kind:'html'` (the
+    former `kind:'jsx'`, still accepted as a deprecated alias). The `html` tier
+    now resolves the full safe native HTML tag set (h1–h6, p, a, ul/ol/li, img,
+    blockquote, pre, strong/em, …) so authored HTML lives up to its name.
+
+### Patch Changes
+
+- d88c8ec: fix(data-table): surface inline-edit save failures instead of swallowing them
+
+  A rejected inline-edit save (e.g. a 400 validation failure like an invalid
+  status transition) was caught with only `console.error` — the toolbar stayed
+  stuck, the cell kept the unsaved value, and the author got no feedback. Now the
+  data-table shows the server's reason in the toolbar (with an alert icon) and
+  tints the affected row(s) destructive so it's clear which rows didn't persist.
+  The pending edit is kept for retry; the error clears on a successful save or on
+  cancel. Adds the `table.saveFailed` string across all locales.
+
+- b7237bb: fix(components): keep MobileDialogContent open when interacting with a portalled dropdown
+
+  Radix Select / Popover / DropdownMenu render their flyout into a portal at
+  `document.body`, outside the dialog's DOM. Clicking an empty part of an open
+  dropdown registered as an "interact outside" and closed the entire dialog
+  (create/edit forms). `MobileDialogContent` now guards `onInteractOutside`:
+  interactions whose real target is inside a Radix popper layer are ignored
+  (the popper dismisses itself), while a genuine backdrop click still closes the
+  dialog as before.
+
+- Updated dependencies [d88c8ec]
+- Updated dependencies [d23d6eb]
+  - @object-ui/i18n@11.3.0
+  - @object-ui/react-runtime@11.3.0
+  - @object-ui/core@11.3.0
+  - @object-ui/react@11.3.0
+  - @object-ui/types@11.3.0
+  - @object-ui/sdui-parser@11.3.0
+
 ## 11.2.0
 
 ### Minor Changes

package/dist/context/gridFieldAuthoring.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export interface GridFieldAuthoring {
+    /** Invoked when the user clicks the trailing "+" add-column header affordance. */
+    onAddColumn?: () => void;
+    /** Optional tooltip/aria-label for the add-column button (defaults to "Add field"). */
+    addColumnLabel?: string;
+    /**
+     * Invoked when the user clicks the per-column "edit field" affordance in a
+     * column header (Airtable-style). Receives the column's accessorKey (= field
+     * name). Omit to hide the edit affordance.
+     */
+    onEditColumn?: (fieldName: string) => void;
+    /** Optional tooltip/aria-label for the edit-field button (defaults to "Edit field"). */
+    editColumnLabel?: string;
+    /**
+     * Invoked when the user drag-reorders columns. Receives the new column order
+     * as accessorKeys (= field names, including any non-field columns). Providing
+     * this also ENABLES the table's built-in column drag-reorder (design mode), so
+     * the host can persist the order to the object's field metadata. Omit to leave
+     * reordering to the table's own `reorderableColumns`/`onColumnsReorder`.
+     */
+    onReorderFields?: (orderedFieldNames: string[]) => void;
+}
+export declare function GridFieldAuthoringProvider({ value, children, }: {
+    value: GridFieldAuthoring | null;
+    children: React.ReactNode;
+}): React.ReactElement;
+/**
+ * Read the ambient grid field-authoring affordances. Returns `null` outside a
+ * provider — design surfaces opt in by wrapping the table tree in
+ * {@link GridFieldAuthoringProvider}.
+ */
+export declare function useGridFieldAuthoring(): GridFieldAuthoring | null;

package/dist/custom/mobile-dialog-content.d.ts

@@ -17,4 +17,11 @@
  */
 import * as React from 'react';
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+/**
+ * True when `target` sits inside a Radix popper flyout (Select / Popover /
+ * DropdownMenu). Such elements are portalled to `document.body`, so an
+ * "interact outside" the dialog whose target is one of them is really an
+ * interaction with the dialog's own dropdown — it must not close the dialog.
+ */
+export declare function isInsidePopperLayer(target: Element | null | undefined): boolean;
 export declare const MobileDialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/index.css

@@ -15,6 +15,7 @@
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-amber-50: oklch(98.7% 0.022 95.277);
+    --color-amber-200: oklch(92.4% 0.12 95.746);
     --color-amber-300: oklch(87.9% 0.169 91.605);
     --color-amber-400: oklch(82.8% 0.189 84.429);
     --color-amber-700: oklch(55.5% 0.163 48.998);
@@ -1653,6 +1654,12 @@
   .border-amber-300 {
     border-color: var(--color-amber-300);
   }
+  .border-amber-400\/40 {
+    border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
+    }
+  }
   .border-blue-300 {
     border-color: var(--color-blue-300);
   }
@@ -2282,6 +2289,9 @@
   .text-amber-800 {
     color: var(--color-amber-800);
   }
+  .text-amber-900 {
+    color: var(--color-amber-900);
+  }
   .text-card-foreground {
     color: var(--color-card-foreground);
   }
@@ -2495,6 +2505,12 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-destructive\/40 {
+    --tw-ring-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+    }
+  }
   .ring-primary {
     --tw-ring-color: var(--color-primary);
   }
@@ -2668,6 +2684,9 @@
   .fade-in-80 {
     --tw-enter-opacity: 0.8;
   }
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
   .running {
     animation-play-state: running;
   }
@@ -5600,6 +5619,14 @@
       }
     }
   }
+  .dark\:bg-destructive\/15 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, hsl(var(--destructive)) 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 15%, transparent);
+      }
+    }
+  }
   .dark\:bg-emerald-950\/50 {
     &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 50%, transparent);
@@ -5608,6 +5635,11 @@
       }
     }
   }
+  .dark\:text-amber-200 {
+    &:where(.dark, .dark *) {
+      color: var(--color-amber-200);
+    }
+  }
   .dark\:text-amber-300 {
     &:where(.dark, .dark *) {
       color: var(--color-amber-300);

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { renderChildren } from './lib/utils';
 export { cva } from 'class-variance-authority';
 export { getLazyIcon, LazyIcon, toKebabIconName } from './lib/lazy-icon';
 export { registerPlaceholders } from './renderers/placeholders';
+export { GridFieldAuthoringProvider, useGridFieldAuthoring, type GridFieldAuthoring, } from './context/gridFieldAuthoring';
 export * from './ui';
 export * from './custom';
 export { useConfigDraft } from './hooks/use-config-draft';