@orangelogic/design-system 2.171.0 → 2.172.0

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.171.0",
+  "version": "2.172.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/organisms/src/content-builder/content-builder.d.ts

@@ -111,6 +111,15 @@ export default class CxContentBuilder extends CortexElement {
      * @default false
      */
     enableAssetFormatControls: boolean;
+    /**
+     * Whether the content builder emits `ol:ui-metric` events timing each user action,
+     * for collection as browser OpenTelemetry histograms.
+     *
+     * Off by default: when false no timers are armed and no events are dispatched, so an
+     * unmonitored site pays nothing for this being here.
+     * @default false
+     */
+    enableMetrics: boolean;
     /**
      * Default asset format applied to image blocks.
      * Used as the initial format when a block is added, whether or not
@@ -221,6 +230,20 @@ export default class CxContentBuilder extends CortexElement {
     private readonly initializeCustomFrame;
     private containerDropdownObservers;
     private nextMapHoveredBadgeState;
+    /**
+     * Host callbacks handed to GrapesJS blocks and config UI, each timed via
+     * `measurePromise` so the promise's own settling is the completion signal.
+     *
+     * Getters, not fields set once in the constructor: a host can override
+     * `onRequestAsset` (etc.) on the element instance after construction but before
+     * these are read (e.g. `el.onRequestAsset = customFn`), and a constructor-time
+     * `.bind()` would have captured the original method forever, silently ignoring
+     * that override.
+     */
+    private get measuredOnRequestAsset();
+    private get measuredOnRequestDownloadFormat();
+    private get measuredOnConfigureWorkflow();
+    private get measuredOnRequestAssetFormat();
     get isDesigner(): boolean;
     get isTemplateEditable(): boolean;
     get isMultiLanguage(): boolean;

package/library/packages/organisms/src/content-builder/content-builder.telemetry.d.ts

@@ -0,0 +1,67 @@
+import { Component } from 'grapesjs';
+
+export declare const UiAction: {
+    readonly AddBlock: "add_block";
+    readonly ConfigureWorkflow: "configure_workflow";
+    readonly DeviceSwitch: "device_switch";
+    readonly DuplicateBlock: "duplicate_block";
+    readonly EditorBoot: "editor_boot";
+    readonly MoveBlock: "move_block";
+    readonly OpenConfig: "open_config";
+    readonly PickAsset: "pick_asset";
+    readonly PickAssetFormat: "pick_asset_format";
+    readonly PickDownloadFormat: "pick_download_format";
+    readonly Redo: "redo";
+    readonly RemoveBlock: "remove_block";
+    readonly RichTextEdit: "rich_text_edit";
+    readonly SaveConfig: "save_config";
+    readonly SelectBlock: "select_block";
+    readonly Undo: "undo";
+};
+export type UiActionName = (typeof UiAction)[keyof typeof UiAction];
+/** Mirrors the CMS5_BO.Data.MetricsIsEnabled parameter, passed in by the host VForm. */
+export declare function setEditorMetricsEnabled(enabled: boolean): void;
+/** Whether metrics are currently armed - the same flag `measureSync` and friends check. */
+export declare function isEditorMetricsEnabled(): boolean;
+export declare function dispatch(action: string, durationMs: number, component: string, blockType?: string): void;
+/**
+ * Derive the block-type label from a GrapesJS component.
+ *
+ * Returns undefined for anything that is not a CMS5 block - a raw text node, a wrapper,
+ * an element the builder does not own - so those actions are recorded without a block
+ * dimension rather than under a misleading one.
+ */
+export declare function blockTypeOf(component?: Component): string | undefined;
+/**
+ * Time a synchronous action through to the paint that shows its result.
+ *
+ * Two nested frames, not one: the first callback still runs before the browser
+ * paints, so ending there would time the JavaScript and miss the layout and paint
+ * the user is actually waiting on.
+ */
+export declare function measureSync(action: UiActionName, blockType?: string): void;
+/**
+ * Time a synchronous action that started earlier, through to the paint that shows it.
+ *
+ * Needed for the editor commands: the only place that knows which block was
+ * involved is *after* the command has run, but the clock has to start before it.
+ * The caller keeps the start time and supplies the block type at the end, so the
+ * sample covers the whole action rather than only its trailing paint.
+ */
+export declare function measureSyncFrom(startedAt: number, action: UiActionName, blockType?: string): void;
+/**
+ * Start timing an action that finishes on its own schedule, and return the ender.
+ *
+ * Used where a paint is not the completion signal - opening the asset picker, saving
+ * a config, booting the editor. The returned function is safe to call more than once;
+ * only the first call records.
+ */
+export declare function measureAsync(action: UiActionName, blockType?: string): () => void;
+/**
+ * Wrap a promise-returning host callback so it reports how long it took.
+ *
+ * The picker is host code we hand control to, so the promise settling is the only
+ * reliable completion signal. Rejections are timed too and then rethrown untouched:
+ * a picker that fails slowly is exactly the case worth seeing.
+ */
+export declare function measurePromise<TArgs extends unknown[], TResult>(action: UiActionName, fn: (...args: TArgs) => Promise<TResult>, blockType?: string): (...args: TArgs) => Promise<TResult>;

package/library/packages/organisms/src/content-builder/plugins/index.d.ts

@@ -19,6 +19,7 @@ export { default as RichTextEditorPlugin } from './rich-text-editor';
 export * from './rich-text-editor/components';
 export { default as SearchBoxPlugin } from './search-box';
 export { default as TabsPlugin } from './tab-group';
+export { default as TelemetryPlugin } from './telemetry';
 export { default as TextPlugin } from './text';
 export { default as TimelinePlugin } from './timeline';
 export { default as VideoPlugin } from './video';

package/library/packages/organisms/src/content-builder/plugins/telemetry.d.ts

@@ -0,0 +1,15 @@
+import { Editor } from 'grapesjs';
+
+export type TelemetryPluginOptions = {
+    bootStartedAt: number;
+};
+/**
+ * Subscribe to the editor's own event bus for edit-mode timing.
+ *
+ * A GrapesJS plugin rather than a function called after `grapesjs.init()`: all
+ * edit-mode instrumentation then lives alongside the other editor plugins and is
+ * wired the same way (`plugins: [...]`), instead of being a one-off call the reader
+ * has to notice separately.
+ */
+declare const TelemetryPlugin: (editor: Editor, options: TelemetryPluginOptions) => void;
+export default TelemetryPlugin;

package/library/react-web-component.d.ts

@@ -9769,6 +9769,10 @@
           * Whether to expose the asset format / transformation / download-format / asset-format-picker controls in the per-block config sidebar for image, video, gallery, carousel, and timeline blocks. <br/>@default false
         */
         enableAssetFormatControls?: boolean;
+        /**
+          * Whether the content builder emits `ol:ui-metric` events timing each user action, for collection as browser OpenTelemetry histograms. <br/> Off by default: when false no timers are armed and no events are dispatched, so an unmonitored site pays nothing for this being here. <br/>@default false
+        */
+        enableMetrics?: boolean;
         /**
           * Default asset format applied to image blocks. Used as the initial format when a block is added, whether or not `enable-asset-format-controls` is on. <br/>@default 'TR1'
         */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.171.0",
+  "version": "2.172.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {