@nordcraft/core 2.0.3 → 2.0.5

package/dist/utils/measure.js

@@ -1,14 +1,20 @@
 const globalScope = typeof globalThis !== 'undefined' ? globalThis : window;
-globalScope.__nc_measure_max_depth = 10;
+globalScope.__nc_measure_max_depth =
+    typeof sessionStorage !== 'undefined' &&
+        sessionStorage.getItem('__nc_measure_max_depth')
+        ? parseInt(sessionStorage.getItem('__nc_measure_max_depth'))
+        : 10;
 globalScope.__nc_measure_enabled =
     typeof sessionStorage !== 'undefined' &&
         sessionStorage.getItem('__nc_measure') === 'true';
 globalScope.__nc_enableMeasure = (enabled = true, maxDepth = 10) => {
     if (enabled) {
         sessionStorage.setItem('__nc_measure', 'true');
+        sessionStorage.setItem('__nc_measure_max_depth', String(maxDepth));
     }
     else {
         sessionStorage.removeItem('__nc_measure');
+        sessionStorage.removeItem('__nc_measure_max_depth');
     }
     globalScope.__nc_measure_enabled = enabled;
     globalScope.__nc_measure_max_depth = maxDepth;
@@ -16,15 +22,19 @@ globalScope.__nc_enableMeasure = (enabled = true, maxDepth = 10) => {
 let measureCount = 0;
 const STACK = [];
 const NOOP = () => { };
-export const measure = (key, details) => {
+export const measure = (key, details, type) => {
     if (!globalScope.__nc_measure_enabled) {
         return NOOP;
     }
     const selfIndex = measureCount++;
+    const selfStackSize = STACK.length;
+    if (selfStackSize >= globalScope.__nc_measure_max_depth) {
+        return NOOP;
+    }
     if (STACK.length >= globalScope.__nc_measure_max_depth) {
         return NOOP;
     }
-    const start = performance.now();
+    const start = performance.now() + selfStackSize * 0.001;
     STACK.push(key);
     let _stopped = false;
     return (extraDetails) => {
@@ -32,7 +42,7 @@ export const measure = (key, details) => {
             return;
         }
         _stopped = true;
-        const end = performance.now();
+        const end = performance.now() + selfStackSize * 0.001;
         const mergedDetails = extraDetails
             ? { ...details, ...extraDetails }
             : details;
@@ -43,6 +53,7 @@ export const measure = (key, details) => {
                 devtools: {
                     dataType: 'track-entry',
                     track: 'Nordcraft devtools',
+                    color: COLOR_MAP[type],
                     properties: [
                         ...Object.entries(mergedDetails).map(([k, v]) => [k, String(v)]),
                         ['Stack', STACK.join(' > ')],
@@ -56,4 +67,7 @@ export const measure = (key, details) => {
         STACK.pop();
     };
 };
+const COLOR_MAP = {
+    component: 'secondary',
+};
 //# sourceMappingURL=measure.js.map

package/dist/utils/measure.js.map

@@ -1 +1 @@
-{"version":3,"file":"measure.js","sourceRoot":"","sources":["../../src/utils/measure.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAQ,OAAO,UAAU,KAAK,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAA;AAChF,WAAW,CAAC,sBAAsB,GAAG,EAAE,CAAA;AACvC,WAAW,CAAC,oBAAoB;IAC9B,OAAO,cAAc,KAAK,WAAW;QACrC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,MAAM,CAAA;AAEnD,WAAW,CAAC,kBAAkB,GAAG,CAAC,OAAO,GAAG,IAAI,EAAE,QAAQ,GAAG,EAAE,EAAE,EAAE;IACjE,IAAI,OAAO,EAAE,CAAC;QACZ,cAAc,CAAC,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;IAChD,CAAC;SAAM,CAAC;QACN,cAAc,CAAC,UAAU,CAAC,cAAc,CAAC,CAAA;IAC3C,CAAC;IACD,WAAW,CAAC,oBAAoB,GAAG,OAAO,CAAA;IAC1C,WAAW,CAAC,sBAAsB,GAAG,QAAQ,CAAA;AAC/C,CAAC,CAAA;AAED,IAAI,YAAY,GAAG,CAAC,CAAA;AACpB,MAAM,KAAK,GAAa,EAAE,CAAA;AAC1B,MAAM,IAAI,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;AAErB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,GAAW,EAAE,OAAgC,EAAE,EAAE;IACvE,IAAI,CAAC,WAAW,CAAC,oBAAoB,EAAE,CAAC;QACtC,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,IAAI,KAAK,CAAC,MAAM,IAAI,WAAW,CAAC,sBAAsB,EAAE,CAAC;QACvD,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;IAC/B,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAEf,IAAI,QAAQ,GAAG,KAAK,CAAA;IACpB,OAAO,CAAC,YAAsC,EAAE,EAAE;QAChD,IAAI,QAAQ,EAAE,CAAC;YACb,OAAM;QACR,CAAC;QAED,QAAQ,GAAG,IAAI,CAAA;QACf,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QAC7B,MAAM,aAAa,GAAG,YAAY;YAChC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,GAAG,YAAY,EAAE;YACjC,CAAC,CAAC,OAAO,CAAA;QAEX,WAAW,CAAC,OAAO,CAAC,GAAG,EAAE;YACvB,KAAK;YACL,GAAG;YACH,MAAM,EAAE;gBACN,QAAQ,EAAE;oBACR,QAAQ,EAAE,aAAa;oBACvB,KAAK,EAAE,oBAAoB;oBAC3B,UAAU,EAAE;wBACV,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;wBAChE,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;wBAC5B,CAAC,eAAe,EAAE,SAAS,CAAC;wBAC5B,CAAC,cAAc,EAAE,YAAY,GAAG,SAAS,CAAC;qBAC3C;oBACD,WAAW,EAAE,GAAG,SAAS,KAAK,GAAG,EAAE;iBACpC;aACF;SACF,CAAC,CAAA;QACF,KAAK,CAAC,GAAG,EAAE,CAAA;IACb,CAAC,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"measure.js","sourceRoot":"","sources":["../../src/utils/measure.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -19,5 +19,5 @@
 "zod": "4.2.1"
 },
 "main": "dist/index.js",
-"version": "2.0.3"
+"version": "2.0.5"
 }

package/src/api/ToddleApiV2.ts

@@ -279,6 +279,11 @@ export class ToddleApiV2<Handler> implements ApiRequest {
         globalFormulas: this.globalFormulas,
         path: ['apis', apiKey, 'redirectRules', rule, 'formula'],
       })
+      yield* getFormulasInFormula({
+        formula: value.statusCode,
+        globalFormulas: this.globalFormulas,
+        path: ['apis', apiKey, 'redirectRules', rule, 'statusCode'],
+      })
     }
     yield* getFormulasInFormula({
       formula: api.isError?.formula,

package/src/component/ToddleComponent.ts

@@ -398,27 +398,31 @@ export class ToddleComponent<Handler> {
       })
     }
     for (const [formulaKey, formula] of Object.entries(this.formulas ?? {})) {
-      yield* getFormulasInFormula({
-        formula: formula.formula,
-        globalFormulas,
-        path: ['formulas', formulaKey, 'formula'],
-        packageName,
-      })
+      if (isDefined(formula)) {
+        yield* getFormulasInFormula({
+          formula: formula.formula,
+          globalFormulas,
+          path: ['formulas', formulaKey, 'formula'],
+          packageName,
+        })
+      }
     }
     for (const [variableKey, variable] of Object.entries(
       this.variables ?? {},
     )) {
-      yield* getFormulasInFormula({
-        formula: variable.initialValue,
-        globalFormulas,
-        path: ['variables', variableKey, 'initialValue'],
-        packageName,
-      })
+      if (isDefined(variable)) {
+        yield* getFormulasInFormula({
+          formula: variable.initialValue,
+          globalFormulas,
+          path: ['variables', variableKey, 'initialValue'],
+          packageName,
+        })
+      }
     }
     for (const [workflowKey, workflow] of Object.entries(
       this.workflows ?? {},
     )) {
-      for (const [actionKey, action] of workflow.actions.entries()) {
+      for (const [actionKey, action] of workflow?.actions.entries() ?? []) {
         yield* getFormulasInAction({
           action,
           globalFormulas,

package/src/component/component.types.ts

@@ -93,15 +93,17 @@ export interface ElementNodeModel {
   repeat?: Nullable<Formula>
   repeatKey?: Nullable<Formula>
   tag: string
-  attrs: Partial<Record<string, Formula>>
+  attrs?: Nullable<Partial<Record<string, Formula>>>
   style?: Nullable<NodeStyleModel>
   variants?: Nullable<StyleVariant[]>
   animations?: Nullable<Record<string, Record<string, AnimationKeyframe>>>
-  children: string[]
-  events: Partial<Record<string, Nullable<EventModel>>>
+  children?: Nullable<string[]>
+  events?: Nullable<Partial<Record<string, Nullable<EventModel>>>>
   classes?: Nullable<Record<string, { formula?: Nullable<Formula> }>>
   'style-variables'?: Nullable<Array<StyleVariable>>
   customProperties?: Nullable<Record<CustomPropertyName, CustomProperty>>
+  // Legacy implementations added an invalid property. We'll keep it here to know we can safely remove it
+  styleVariables?: never
 }
 
 export interface ComponentNodeModel {
@@ -117,9 +119,9 @@ export interface ComponentNodeModel {
   style?: Nullable<NodeStyleModel>
   variants?: Nullable<StyleVariant[]>
   animations?: Nullable<Record<string, Record<string, AnimationKeyframe>>>
-  attrs: Record<string, Formula>
-  children: string[]
-  events: Record<string, EventModel>
+  attrs?: Nullable<Record<string, Formula>>
+  children?: Nullable<string[]>
+  events?: Nullable<Partial<Record<string, Nullable<EventModel>>>>
   customProperties?: Nullable<Record<CustomPropertyName, CustomProperty>>
 }
 
@@ -130,7 +132,9 @@ export interface SlotNodeModel {
   condition?: Nullable<Formula>
   repeat?: Nullable<never>
   repeatKey?: Nullable<never>
-  children: string[]
+  children?: Nullable<string[]>
+  // slots cannot have events, but an empty object might have been declared regardless
+  events?: never
 }
 export type NodeModel =
   | TextNodeModel
@@ -180,9 +184,9 @@ export interface Component {
   // @deprecated - use route->path instead
   page?: Nullable<string> // page url /projects/:id - only for pages
   route?: Nullable<PageRoute>
-  attributes?: Nullable<Record<string, ComponentAttribute>>
-  variables?: Nullable<Record<string, ComponentVariable>>
-  formulas?: Nullable<Record<string, ComponentFormula>>
+  attributes?: Nullable<Record<string, Nullable<ComponentAttribute>>>
+  variables?: Nullable<Record<string, Nullable<ComponentVariable>>>
+  formulas?: Nullable<Record<string, Nullable<ComponentFormula>>>
   contexts?: Nullable<
     Record<
       // `componentName` or `packageName/componentName` if the context comes from a different package than the component itself
@@ -190,10 +194,10 @@ export interface Component {
       ComponentContext
     >
   >
-  workflows?: Nullable<Record<string, ComponentWorkflow>>
+  workflows?: Nullable<Record<string, Nullable<ComponentWorkflow>>>
   apis?: Nullable<Record<string, Nullable<ComponentAPI>>>
   nodes?: Nullable<Record<string, NodeModel>>
-  events?: Nullable<ComponentEvent[]>
+  events?: Nullable<Nullable<ComponentEvent>[]>
   onLoad?: Nullable<EventModel>
   onAttributeChange?: Nullable<EventModel>
   // exported indicates that a component is exported in a package
@@ -310,7 +314,7 @@ export interface CustomActionModel {
   package?: Nullable<string>
   name: string
   description?: Nullable<string>
-  group?: Nullable<string>
+  group?: Nullable<unknown>
   data?: Nullable<string | number | boolean | Formula>
   arguments?: Nullable<Partial<CustomActionArgument[]>>
   events?: Nullable<Record<string, ActionModelActions>>
@@ -328,12 +332,16 @@ export interface SwitchActionModel {
     }>
   >
   default?: Nullable<ActionModelActions>
+  // Should never be set
+  arguments?: never
 }
 
 export interface VariableActionModel {
   type: 'SetVariable'
   variable: string
   data: Nullable<Formula>
+  // Arguments for this action should never be provided, but have been set sometimes
+  arguments?: never
 }
 
 export interface FetchActionModel {
@@ -355,6 +363,8 @@ export interface SetURLParameterAction {
   parameter: string
   data?: Nullable<Formula>
   historyMode?: Nullable<'replace' | 'push'>
+  // Should never be set
+  arguments?: never
 }
 
 export interface SetMultiUrlParameterAction {
@@ -367,12 +377,14 @@ export interface EventActionModel {
   type: 'TriggerEvent'
   event: string
   data?: Nullable<Formula>
+  // Should never be set
+  arguments?: never
 }
 
 export interface WorkflowActionModel {
   type: 'TriggerWorkflow'
   workflow: string
-  parameters: Record<string, { formula?: Nullable<Formula> }>
+  parameters?: Nullable<Record<string, { formula?: Nullable<Formula> }>>
   callbacks?: Nullable<
     Partial<Record<string, { actions?: Nullable<Partial<ActionModel[]>> }>>
   >
@@ -383,6 +395,8 @@ export interface WorkflowCallbackActionModel {
   type: 'TriggerWorkflowCallback'
   event: string
   data?: Nullable<Formula>
+  // Should never be set
+  arguments?: never
 }
 
 export type ActionModel =

package/src/formula/formula.ts

@@ -209,13 +209,55 @@ export const isToddleFormula = <Handler>(
 
 export function applyFormula(
   formula: Formula | string | number | undefined | null | boolean,
-  _ctx: FormulaContext,
+  ctx: FormulaContext,
   extendedPath?: Array<string | number> | undefined,
 ): any {
-  const path = [...(_ctx?.jsonPath ?? []), ...(extendedPath ?? [])]
-  const ctx = { ..._ctx, jsonPath: path }
-  const report = (value: any, p: Array<string | number> = path) => {
-    ctx?.reportFormulaEvaluation?.(p, value, ctx)
+  // Short-circuit when not reporting to avoid unnecessary overhead of creating new objects and function
+  if (!ctx.reportFormulaEvaluation) {
+    if (!isFormula(formula)) {
+      return formula
+    }
+    try {
+      switch (formula.type) {
+        case 'value':
+          return formula.value
+        case 'path':
+          return applyPathFormula(formula, ctx.data)
+        case 'switch':
+          return applySwitchFormula(formula, ctx)
+        case 'or':
+          return applyOrFormula(formula, ctx)
+        case 'and':
+          return applyAndFormula(formula, ctx)
+        case 'object':
+          return applyObjectFormula(formula, ctx)
+        case 'record':
+          return applyRecordFormula(formula, ctx)
+        case 'array':
+          return applyArrayFormula(formula, ctx)
+        case 'function':
+          return applyFunctionFormula(formula, ctx)
+        case 'apply':
+          return applyApplyFormula(formula, ctx)
+        default:
+          if (ctx.env?.logErrors) {
+            console.error('Could not recognize formula', formula)
+          }
+      }
+    } catch (e) {
+      if (ctx.env?.logErrors) {
+        console.error(e)
+      }
+      return null
+    }
+
+    return undefined
+  }
+
+  const jsonPath = [...(ctx.jsonPath ?? []), ...(extendedPath ?? [])]
+  const _ctx = { ...ctx, jsonPath }
+  const report = (value: any, p: Array<string | number> = jsonPath) => {
+    ctx.reportFormulaEvaluation?.(p, value, _ctx)
     return value
   }
 
@@ -228,58 +270,58 @@ export function applyFormula(
         return report(formula.value)
       }
       case 'path': {
-        return report(applyPathFormula(formula, ctx.data))
+        return report(applyPathFormula(formula, _ctx.data))
       }
       case 'switch': {
         if (
-          ctx.reportFormulaEvaluation &&
-          ctx.jsonPath.length < MAX_REPORT_DEPTH
+          _ctx.reportFormulaEvaluation &&
+          _ctx.jsonPath.length < MAX_REPORT_DEPTH
         ) {
-          return report(applyEvaluateAllSwitchFormula(formula, ctx))
+          return report(applyEvaluateAllSwitchFormula(formula, _ctx))
         }
-        return applySwitchFormula(formula, ctx)
+        return applySwitchFormula(formula, _ctx)
       }
       case 'or': {
         if (
-          ctx.reportFormulaEvaluation &&
-          ctx.jsonPath.length < MAX_REPORT_DEPTH
+          _ctx.reportFormulaEvaluation &&
+          _ctx.jsonPath.length < MAX_REPORT_DEPTH
         ) {
-          return report(applyEvaluateAllOrFormula(formula, ctx))
+          return report(applyEvaluateAllOrFormula(formula, _ctx))
         }
-        return applyOrFormula(formula, ctx)
+        return applyOrFormula(formula, _ctx)
       }
       case 'and': {
         if (
-          ctx.reportFormulaEvaluation &&
-          ctx.jsonPath.length < MAX_REPORT_DEPTH
+          _ctx.reportFormulaEvaluation &&
+          _ctx.jsonPath.length < MAX_REPORT_DEPTH
         ) {
-          return report(applyEvaluateAllAndFormula(formula, ctx))
+          return report(applyEvaluateAllAndFormula(formula, _ctx))
         }
-        return applyAndFormula(formula, ctx)
+        return applyAndFormula(formula, _ctx)
       }
       case 'object': {
-        return report(applyObjectFormula(formula, ctx))
+        return report(applyObjectFormula(formula, _ctx))
       }
       case 'record': {
         // object used to be called record, there are still examples in the wild.
-        return report(applyRecordFormula(formula, ctx))
+        return report(applyRecordFormula(formula, _ctx))
       }
       case 'array': {
-        return report(applyArrayFormula(formula, ctx))
+        return report(applyArrayFormula(formula, _ctx))
       }
       case 'function': {
-        return report(applyFunctionFormula(formula, ctx))
+        return report(applyFunctionFormula(formula, _ctx))
       }
       case 'apply': {
-        return report(applyApplyFormula(formula, ctx))
+        return report(applyApplyFormula(formula, _ctx))
       }
       default:
-        if (ctx.env?.logErrors) {
+        if (_ctx.env?.logErrors) {
           console.error('Could not recognize formula', formula)
         }
     }
   } catch (e) {
-    if (ctx.env?.logErrors) {
+    if (_ctx.env?.logErrors) {
       console.error(e)
     }
     return report(null)

package/src/types.ts

@@ -37,6 +37,12 @@ export type ActionHandler<Args = unknown[]> = (
     ) => void
     env: ToddleEnv
     abortSignal: AbortSignal
+    stores?: {
+      theme: {
+        set: (value: string | null) => void
+        get: () => string | null
+      }
+    }
   },
   event?: Nullable<Event>,
 ) => void

package/src/utils/collections.ts

@@ -75,10 +75,13 @@ export const groupBy = <T>(items: T[], f: (t: T) => string) =>
     return acc
   }, {})
 
-export const filterObject = <T>(
+export const filterObject = <T, T2 extends T = T>(
   object: Record<string, T>,
   f: (kv: [string, T]) => boolean,
-): Record<string, T> => Object.fromEntries(Object.entries(object).filter(f))
+): Record<string, T2> =>
+  Object.fromEntries(
+    Object.entries(object).filter((o): o is [string, T2] => f(o)),
+  )
 
 export function get<T = any>(
   collection: T,

package/src/utils/getNodeSelector.test.ts

@@ -54,4 +54,13 @@ describe('getNodeSelector', () => {
     const selector = getNodeSelector(path)
     expect(selector).toBe('[data-id="0.1\\/2"]')
   })
+
+  test('should prefix selector with an underscore if it starts with a number', () => {
+    const path = '0.1\\/2'
+    const selector = getNodeSelector(path, {
+      componentName: '404',
+      nodeId: 'test-node',
+    })
+    expect(selector).toBe('[data-id="0.1\\/2"]._404\\:test-node')
+  })
 })

package/src/utils/getNodeSelector.ts

@@ -19,7 +19,10 @@ export function getNodeSelector(
 ): string {
   let selector = `[data-id="${path}"]`
   if (componentName) {
-    selector += `.${componentName}`
+    // Do not allow classes to start with a number, for example a page named "404" would result in a selector starting with a number which is invalid in CSS.
+    selector += startsWithNumber(componentName)
+      ? `._${componentName}`
+      : `.${componentName}`
   }
   if (nodeId) {
     selector += `\\:${nodeId}`
@@ -32,3 +35,9 @@ export function getNodeSelector(
 
   return selector
 }
+
+function startsWithNumber(str: string): boolean {
+  if (!str) return false
+  const code = str.charCodeAt(0)
+  return code >= 48 && code <= 57
+}

package/src/utils/measure.test.ts

@@ -0,0 +1,149 @@
+import { afterEach, beforeEach, describe, expect, spyOn, test } from 'bun:test'
+import { measure } from './measure'
+
+const globalScope = globalThis as any
+
+describe('measure', () => {
+  let originalPerformanceMeasure: any
+  let originalPerformanceNow: any
+
+  beforeEach(() => {
+    // Reset global state
+    globalScope.__nc_measure_enabled = false
+    globalScope.__nc_measure_max_depth = 10
+
+    // Mock performance
+    originalPerformanceMeasure = performance.measure
+    originalPerformanceNow = performance.now
+    performance.measure = () => ({}) as any
+    performance.now = () => 0
+
+    // Mock sessionStorage
+    globalScope.sessionStorage = {
+      getItem: () => null,
+      setItem: () => {},
+      removeItem: () => {},
+    }
+  })
+
+  afterEach(() => {
+    performance.measure = originalPerformanceMeasure
+    performance.now = originalPerformanceNow
+    delete globalScope.sessionStorage
+  })
+
+  test('should do nothing if NOT enabled', () => {
+    const measureSpy = spyOn(performance, 'measure')
+    const key = 'test-key'
+    const stop = measure(key, { arg: 1 })
+
+    expect(stop).toBeDefined()
+    stop()
+
+    expect(measureSpy).not.toHaveBeenCalled()
+  })
+
+  test('should call performance.measure when enabled', () => {
+    globalScope.__nc_measure_enabled = true
+    const measureSpy = spyOn(performance, 'measure')
+
+    let now = 0
+    performance.now = () => now++
+
+    const key = 'test-performance'
+    const stop = measure(key, { arg: 1 })
+
+    stop({ extra: 2 })
+
+    expect(measureSpy).toHaveBeenCalledWith(
+      key,
+      expect.objectContaining({
+        start: 0,
+        end: 1,
+        detail: expect.objectContaining({
+          devtools: expect.objectContaining({
+            track: 'Nordcraft devtools',
+            tooltipText: expect.stringContaining(key),
+          }),
+        }),
+      }),
+    )
+  })
+
+  test('should merge details and extraDetails', () => {
+    globalScope.__nc_measure_enabled = true
+    const measureSpy = spyOn(performance, 'measure')
+
+    const stop = measure('key', { original: 'value' })
+    stop({ extra: 'value' })
+
+    const lastCall = measureSpy.mock.calls[0]
+    const properties = lastCall[1].detail.devtools.properties
+
+    const propsMap = new Map(properties)
+    expect(propsMap.get('original')).toBe('value')
+    expect(propsMap.get('extra')).toBe('value')
+  })
+
+  test('should respect max depth', () => {
+    globalScope.__nc_measure_enabled = true
+    globalScope.__nc_measure_max_depth = 2
+    const measureSpy = spyOn(performance, 'measure')
+
+    const stop1 = measure('depth-1', {})
+    const stop2 = measure('depth-2', {})
+    const stop3 = measure('depth-3', {}) // Should be NOOP
+
+    stop3()
+    expect(measureSpy).not.toHaveBeenCalled()
+
+    stop2()
+    expect(measureSpy).toHaveBeenCalledTimes(1)
+
+    stop1()
+    expect(measureSpy).toHaveBeenCalledTimes(2)
+  })
+
+  test('should handle nested measures and display stack', () => {
+    globalScope.__nc_measure_enabled = true
+    const measureSpy = spyOn(performance, 'measure')
+
+    const stop1 = measure('parent', {})
+    const stop2 = measure('child', {})
+
+    stop2()
+    const childCall = measureSpy.mock.calls[0]
+    const childStack = new Map(childCall[1].detail.devtools.properties).get(
+      'Stack',
+    )
+    expect(childStack).toBe('parent > child')
+
+    stop1()
+    const parentCall = measureSpy.mock.calls[1]
+    const parentStack = new Map(parentCall[1].detail.devtools.properties).get(
+      'Stack',
+    )
+    expect(parentStack).toBe('parent')
+  })
+
+  test('should only call finish once', () => {
+    globalScope.__nc_measure_enabled = true
+    const measureSpy = spyOn(performance, 'measure')
+
+    const stop = measure('once', {})
+    stop()
+    stop()
+
+    expect(measureSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('global __nc_enableMeasure should update state', () => {
+    // We need to trigger the globalScope mock logic if we want to test the helper function
+    // But since it's defined in the module scope of measure.ts, it might already be there
+    if (typeof globalScope.__nc_enableMeasure === 'function') {
+      globalScope.__nc_enableMeasure(true, 5)
+      expect(globalScope.__nc_measure_enabled).toBe(true)
+      expect(globalScope.__nc_measure_max_depth).toBe(5)
+    }
+  })
+})