@orangelogic/design-system 2.174.0 → 2.176.0

package/library/package.json

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

package/library/packages/atoms/src/components/copy-button/copy-button.d.ts

@@ -27,6 +27,9 @@ import { default as CxTooltip } from '../tooltip/tooltip';
  * @cssproperty --background-color - The background color to use for the button.
  * @cssproperty --color - The color to use for the button.
  * @cssproperty --button-font-size - The font size to use for the button.
+ * @cssproperty --button-font-family - The font family to use for the button.
+ * @cssproperty --button-font-style - The font style to use for the button.
+ * @cssproperty --button-font-weight - The font weight to use for the button.
  * @cssproperty --button-padding - The padding to use for the button.
  * @cssproperty --button-background-color - The background color to use for the button.
  *

package/library/packages/organisms/src/color-swatch-group/color-swatch-group.constants.d.ts

@@ -6,84 +6,29 @@ export declare const validCodes: string[];
 export declare const columnDefaults: {
     resizable: boolean;
 };
-export declare const columns: ({
+/**
+ * A single "Name" column that renders the color swatch and the name together,
+ * so the "Name" header spans the whole column instead of truncating inside a
+ * narrow swatch-only column.
+ */
+export declare const nameColumn: {
     field: string;
     formatter: (cell: CellComponent) => HTMLDivElement;
     headerHozAlign: string;
     headerSort: boolean;
     hozAlign: string;
     title: string;
-    width: number;
-    widthGrow?: undefined;
-    minWidth?: undefined;
-    responsive?: undefined;
-} | {
-    field: string;
-    headerHozAlign: string;
-    headerSort: boolean;
-    hozAlign: string;
     widthGrow: number;
-    formatter?: undefined;
-    title?: undefined;
-    width?: undefined;
-    minWidth?: undefined;
-    responsive?: undefined;
-} | {
+};
+export declare const codeColumns: ({
     field: string;
     headerHozAlign: string;
     headerSort: boolean;
     hozAlign: string;
     minWidth: number;
     title: string;
-    formatter?: undefined;
-    width?: undefined;
-    widthGrow?: undefined;
-    responsive?: undefined;
-} | {
-    field: string;
-    headerHozAlign: string;
-    headerSort: boolean;
-    hozAlign: string;
-    responsive: number;
-    title: string;
-    widthGrow: number;
-    formatter?: undefined;
-    width?: undefined;
-    minWidth?: undefined;
-})[];
-export declare const copyableColumns: (localize: LocalizeController, palette: string) => ({
-    field: string;
-    formatter: (cell: CellComponent) => HTMLDivElement;
-    headerHozAlign: string;
-    headerSort: boolean;
-    hozAlign: string;
-    title: string;
-    width: number;
-    widthGrow?: undefined;
-    minWidth?: undefined;
     responsive?: undefined;
-} | {
-    field: string;
-    headerHozAlign: string;
-    headerSort: boolean;
-    hozAlign: string;
-    widthGrow: number;
-    formatter?: undefined;
-    title?: undefined;
-    width?: undefined;
-    minWidth?: undefined;
-    responsive?: undefined;
-} | {
-    field: string;
-    headerHozAlign: string;
-    headerSort: boolean;
-    hozAlign: string;
-    minWidth: number;
-    title: string;
-    formatter?: undefined;
-    width?: undefined;
     widthGrow?: undefined;
-    responsive?: undefined;
 } | {
     field: string;
     headerHozAlign: string;
@@ -92,10 +37,9 @@ export declare const copyableColumns: (localize: LocalizeController, palette: st
     responsive: number;
     title: string;
     widthGrow: number;
-    formatter?: undefined;
-    width?: undefined;
     minWidth?: undefined;
-} | {
+})[];
+export declare const copyableCodeColumns: (localize: LocalizeController, palette: string) => ({
     field: string;
     formatter: (cell: any) => HTMLElement | null;
     headerHozAlign: string;

package/library/packages/organisms/src/content-builder/components/config-form/config-form-controller.d.ts

@@ -7,6 +7,7 @@ export declare class ConfigFormController implements ReactiveController {
     host: ReactiveControllerHost & CxConfigForm;
     private readonly localize;
     private apiSearchAssets;
+    private apiGetTeamSpaceFontFamily;
     private readonly pendingGalleryPickerSaves;
     private readonly fontFamiliesCache;
     private readonly pendingFontFamilyFetches;

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

@@ -14,6 +14,15 @@ type FontPickerStoredValues = {
 export declare function getTemplateClass(templateId: string): string;
 export declare function getContentConfigs(traits: PropertyConfig[], adHocProperties: string[]): string[];
 export declare function getLimitedBlocks(blockType: BlockType): BlockType[];
+/**
+ * The `space-default` typeface inherits the team space's current font, so the
+ * backend returns it with no variants of its own. Populate its `families` from
+ * the typeface that matches the space's current font (from
+ * `apiGetTeamSpaceFontFamily`), so the style dropdown can offer that font's
+ * variants. Returns the list unchanged when there is no space font or no
+ * matching typeface.
+ */
+export declare function injectSpaceDefaultVariants(typefaces: FontTypeface[], spaceFontFamily: string): FontTypeface[];
 export declare function getFontPickerControlValues({ blockAttributes, keys, typefaces, }: {
     blockAttributes: Record<string, unknown>;
     keys: FontPickerKeys;

package/library/packages/organisms/src/content-builder/plugins/{telemetry.d.ts → telemetry/index.d.ts}

@@ -1,5 +1,7 @@
 import { Editor } from 'grapesjs';
 
+export * from './metrics';
+export * from './measure';
 export type TelemetryPluginOptions = {
     bootStartedAt: number;
 };

package/library/packages/organisms/src/content-builder/{content-builder.telemetry.d.ts → plugins/telemetry/measure.d.ts}

@@ -1,28 +1,16 @@
 import { Component } from 'grapesjs';
+import { UiActionName } from './metrics';
 
-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;
+/**
+ * Record one editor action.
+ *
+ * Mode is always 'edit' from here - the content builder only exists in edit mode. It is
+ * passed explicitly rather than defaulted downstream so the call says what it means.
+ */
 export declare function dispatch(action: string, durationMs: number, component: string, blockType?: string): void;
 /**
  * Derive the block-type label from a GrapesJS component.

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

@@ -0,0 +1,106 @@
+/**
+ * CMS5 browser metrics: what is measured, what the samples are called, and which label
+ * values are allowed to exist.
+ *
+ * Cortex owns the OpenTelemetry SDK, the exporter and the resource, and publishes an
+ * instrument factory on `window.OLTelemetry`. This module owns everything above that
+ * line. Only the factory crosses it, so the page runs one MeterProvider and one export
+ * stream however many bundles are loaded, and this repository ships no SDK of its own.
+ *
+ * The metric definitions and the label vocabularies used to live on the Cortex side, so
+ * that a frontend release could not introduce a new label value - and therefore new
+ * metric series - without a corresponding change there. They moved here because they
+ * describe this repository's own blocks and editor actions and went stale whenever it
+ * shipped without a matching Cortex change: a `cx-sb-` prefix rule once excluded fifteen
+ * of the twenty-one block types, including the two most common ones, so an ordinary page
+ * of headings and text produced no block metrics at all and simply looked idle.
+ *
+ * The bound those lists provided has moved with them, not been dropped. Every set below
+ * is closed, and a value outside it collapses to `unknown` rather than being dropped, so
+ * a missing entry shows up as a visible bucket in Grafana instead of silently
+ * disappearing. Adding a value here adds metric series - treat it as a change with a cost.
+ *
+ * When Cortex is older than the API, every entry point below is a no-op: the components
+ * behave exactly as they do with telemetry switched off.
+ *
+ * How things are *timed* lives in `./measure`; when the measurement is armed lives in
+ * `./index` (edit mode, the GrapesJS plugin) and `./content-render` (view mode).
+ */
+export declare const COMPONENT_CONTENT_BUILDER = "cx-content-builder";
+/** Stamped by CMS5_PageViewer_Content_VForm from the server's own edit-mode state. */
+export declare const METRICS_MARKER_SELECTOR = "[data-cms5-metrics=\"true\"]";
+/**
+ * Site-builder mode. The same page content is served in both, so without this label a
+ * block painted inside the editor canvas and the same block on the published page land in
+ * one series - and they are not the same thing. One is behind an authenticated editor
+ * with the builder bundle loaded; the other is what a visitor actually waits for.
+ */
+export declare const MODE_EDIT = "edit";
+export declare const MODE_VIEW = "view";
+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];
+/**
+ * Element name of every block the builder can place, mapped to its metric label.
+ *
+ * A table rather than a prefix rule, because block tags are not uniform: only six are
+ * named `cx-sb-*` and the rest reuse general-purpose design-system elements
+ * (`cx-header`, `cx-text`, `cx-gallery`, ...).
+ *
+ * The label is the GrapesJS block name, not the tag: that is the word the author sees in
+ * the block picker, and it survives a component being re-pointed at a different element.
+ * Gallery and Carousel are two picker entries backed by one element, so they necessarily
+ * share a label - the DOM cannot tell them apart.
+ */
+export declare const BLOCK_TAG_LABELS: Map<string, string>;
+/**
+ * The blocks whose render time is worth measuring on a published page: content the
+ * visitor is waiting for. The column containers are excluded - they resolve with the page
+ * itself, so timing them measures the framework rather than the content, and because one
+ * wraps every block they would dominate the sample.
+ */
+export declare const CONTENT_BLOCK_TAGS: string[];
+/**
+ * Blocks that render a placeholder and then fetch, so their Lit render completing says
+ * nothing about when the user actually sees content. These signal the real end instead.
+ */
+export declare const LOADING_BLOCK_TAGS: Set<string>;
+/**
+ * The mode the server said this page is in.
+ *
+ * Read from the stamp rather than inferred from the DOM: the editor mounts
+ * asynchronously, so anything guessed from the markup at load time would be a race.
+ */
+export declare function detectMode(container?: Element | null): string;
+export declare function blockLabelOf(tagName: string): string | undefined;
+export declare function recordUiAction(action: string, seconds: number, component: string, mode: string, blockType?: string): void;
+export declare function recordBlockRender(seconds: number, blockType: string | undefined, mode: string): void;
+export declare function recordContentRender(seconds: number, mode: string): void;
+export declare function countContentRenderAbandoned(mode: string): void;
+/**
+ * Tell Cortex which mode this page is in, so its own page-level histograms carry the
+ * dimension too.
+ *
+ * Page load, TTFB and the web vitals are recorded by Cortex, not here, and they need the
+ * split as much as these metrics do: opening a page for editing boots the editor inside
+ * the page load, so the authoring cost lands in the published page's timings unless the
+ * two populations can be told apart. Cortex cannot read this itself without knowing what
+ * CMS5 is, which is the arrangement this module exists to avoid.
+ */
+export declare function declarePageMode(mode: string): void;

package/library/packages/utils/src/font/font.d.ts

@@ -3,19 +3,34 @@ import { FontFamily, FontTypeface } from '../../../types/src/font-picker';
 
 /**
  * Stable option value for a typeface. Uses the explicit `value` when provided,
- * otherwise derives a CSS-safe slug from the typeface name.
+ * otherwise derives a space-safe identity from the typeface name.
  */
 export declare function getTypefaceOptionValue(typeface: FontTypeface): string;
 /**
- * Stable, unique option value for a font-family variant.
+ * Stable option identity for a font-family variant, used only as the
+ * `cx-select` option value (never applied as CSS — the real font-family,
+ * weight, and style are stored separately). Built from the variant's
+ * identifying fields — the CSS `value` (or `name` when it is absent) plus
+ * `fontStyle` and `fontWeight` — made space-safe.
  *
- * `value` is the CSS font-family to apply and is only usable as the option
- * identity when it uniquely identifies the variant. Some APIs return the same
- * `value` for every variant of a typeface (e.g. all "Lato" variants share
- * `value: "Lato"` and differ only by name/weight/style) — in that case the
- * value can't be the selector identity, so fall back to a name-based slug.
+ * Two variants that are identical in all of those fields collide by design;
+ * that is a backend data problem, not something the picker resolves.
  */
-export declare function getFontFamilyOptionValue(fontFamily: FontFamily, fontFamilies: FontFamily[]): string;
+export declare function getFontFamilyOptionValue(fontFamily: FontFamily): string;
+/**
+ * Quotes a CSS font-family that contains spaces (e.g. `Custom Font 2`) so it
+ * stays valid wherever it is substituted into a `font-family` declaration.
+ * Names without spaces are already valid identifiers (including generic
+ * keywords like `sans-serif`) and are left as-is; an already-quoted value is
+ * returned unchanged. Any backslash or single quote inside the name is escaped
+ * so a name like `O'Reilly Sans` still produces a valid quoted string.
+ */
+export declare function quoteFontFamily(fontFamily: string): string;
+/**
+ * Strips one pair of surrounding quotes and unescapes the content so a stored
+ * value matches raw names. Inverse of `quoteFontFamily`.
+ */
+export declare function unquoteFontFamily(fontFamily: string): string;
 /**
  * Test if a specific font configuration is available using a test element
  */