@nordcraft/core 2.0.2 → 2.0.4

package/dist/api/ToddleApiV2.d.ts

@@ -63,7 +63,7 @@ export declare class ToddleApiV2<Handler> implements ApiRequest {
     }>;
     get redirectRules(): Nullable<Record<string, {
         formula: Formula;
-        statusCode?: Nullable<import("./apiTypes").RedirectStatusCode>;
+        statusCode?: Nullable<Formula>;
         index: number;
     }>>;
     get isError(): Nullable<{

package/dist/api/apiTypes.d.ts

@@ -42,7 +42,8 @@ export declare enum ApiMethod {
     HEAD = "HEAD",
     OPTIONS = "OPTIONS"
 }
-export type RedirectStatusCode = 300 | 301 | 302 | 303 | 304 | 307 | 308;
+export declare const REDIRECT_STATUS_CODES: readonly [300, 301, 302, 303, 304, 307, 308];
+export type RedirectStatusCode = (typeof REDIRECT_STATUS_CODES)[number];
 export type ApiParserMode = 'auto' | 'text' | 'json' | 'event-stream' | 'json-stream' | 'blob';
 export interface ApiBase extends NordcraftMetadata {
     url?: Nullable<Formula>;
@@ -101,7 +102,7 @@ export interface ApiRequest extends ApiBase {
     }>;
     redirectRules?: Nullable<Record<string, {
         formula: Formula;
-        statusCode?: Nullable<RedirectStatusCode>;
+        statusCode?: Nullable<Formula>;
         index: number;
     }>>;
     isError?: Nullable<{

package/dist/api/apiTypes.js

@@ -8,4 +8,7 @@ export var ApiMethod;
     ApiMethod["HEAD"] = "HEAD";
     ApiMethod["OPTIONS"] = "OPTIONS";
 })(ApiMethod || (ApiMethod = {}));
+export const REDIRECT_STATUS_CODES = [
+    300, 301, 302, 303, 304, 307, 308,
+];
 //# sourceMappingURL=apiTypes.js.map

package/dist/api/apiTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"apiTypes.js","sourceRoot":"","sources":["../../src/api/apiTypes.ts"],"names":[],"mappings":"AAkCA,MAAM,CAAN,IAAY,SAQX;AARD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,wBAAW,CAAA;IACX,4BAAe,CAAA;IACf,0BAAa,CAAA;IACb,gCAAmB,CAAA;AACrB,CAAC,EARW,SAAS,KAAT,SAAS,QAQpB"}
+{"version":3,"file":"apiTypes.js","sourceRoot":"","sources":["../../src/api/apiTypes.ts"],"names":[],"mappings":"AAkCA,MAAM,CAAN,IAAY,SAQX;AARD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,wBAAW,CAAA;IACX,4BAAe,CAAA;IACf,0BAAa,CAAA;IACb,gCAAmB,CAAA;AACrB,CAAC,EARW,SAAS,KAAT,SAAS,QAQpB;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;CACzB,CAAA"}

package/dist/utils/getNodeSelector.js

@@ -2,7 +2,10 @@ import { variantSelector } from '../styling/variantSelector';
 export function getNodeSelector(path, { componentName, nodeId, variant } = {}) {
     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}`;
@@ -14,4 +17,10 @@ export function getNodeSelector(path, { componentName, nodeId, variant } = {}) {
     }
     return selector;
 }
+function startsWithNumber(str) {
+    if (!str)
+        return false;
+    const code = str.charCodeAt(0);
+    return code >= 48 && code <= 57;
+}
 //# sourceMappingURL=getNodeSelector.js.map

package/dist/utils/getNodeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"getNodeSelector.js","sourceRoot":"","sources":["../../src/utils/getNodeSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAqB,MAAM,4BAA4B,CAAA;AAe/E,MAAM,UAAU,eAAe,CAC7B,IAAY,EACZ,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,GAAwB,EAAE;IAE5D,IAAI,QAAQ,GAAG,aAAa,IAAI,IAAI,CAAA;IACpC,IAAI,aAAa,EAAE,CAAC;QAClB,QAAQ,IAAI,IAAI,aAAa,EAAE,CAAA;IACjC,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,QAAQ,IAAI,MAAM,MAAM,EAAE,CAAA;IAC5B,CAAC;IACD,iFAAiF;IACjF,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,CAAA;IACpD,IAAI,OAAO,EAAE,CAAC;QACZ,QAAQ,IAAI,eAAe,CAAC,OAAO,CAAC,CAAA;IACtC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC"}
+{"version":3,"file":"getNodeSelector.js","sourceRoot":"","sources":["../../src/utils/getNodeSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAqB,MAAM,4BAA4B,CAAA;AAe/E,MAAM,UAAU,eAAe,CAC7B,IAAY,EACZ,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,GAAwB,EAAE;IAE5D,IAAI,QAAQ,GAAG,aAAa,IAAI,IAAI,CAAA;IACpC,IAAI,aAAa,EAAE,CAAC;QAClB,yJAAyJ;QACzJ,QAAQ,IAAI,gBAAgB,CAAC,aAAa,CAAC;YACzC,CAAC,CAAC,KAAK,aAAa,EAAE;YACtB,CAAC,CAAC,IAAI,aAAa,EAAE,CAAA;IACzB,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,QAAQ,IAAI,MAAM,MAAM,EAAE,CAAA;IAC5B,CAAC;IACD,iFAAiF;IACjF,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,CAAA;IACpD,IAAI,OAAO,EAAE,CAAC;QACZ,QAAQ,IAAI,eAAe,CAAC,OAAO,CAAC,CAAA;IACtC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC;AAED,SAAS,gBAAgB,CAAC,GAAW;IACnC,IAAI,CAAC,GAAG;QAAE,OAAO,KAAK,CAAA;IACtB,MAAM,IAAI,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;IAC9B,OAAO,IAAI,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,CAAA;AACjC,CAAC"}

package/dist/utils/measure.d.ts

@@ -1 +1 @@
-export declare const measure: (key: string, details: Record<string, unknown>) => (extraDetails?: Record<string, unknown> | undefined) => void;
+export declare const measure: (key: string, details: Record<string, unknown>, type?: "component" | undefined) => (extraDetails?: Record<string, unknown> | undefined) => void;

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.2"
+"version": "2.0.4"
 }

package/src/api/apiTypes.ts

@@ -42,7 +42,11 @@ export enum ApiMethod {
   OPTIONS = 'OPTIONS',
 }
 
-export type RedirectStatusCode = 300 | 301 | 302 | 303 | 304 | 307 | 308
+export const REDIRECT_STATUS_CODES = [
+  300, 301, 302, 303, 304, 307, 308,
+] as const
+
+export type RedirectStatusCode = (typeof REDIRECT_STATUS_CODES)[number]
 
 export type ApiParserMode =
   | 'auto'
@@ -122,7 +126,7 @@ export interface ApiRequest extends ApiBase {
         // A redirect response will be returned if the formula returns a valid url
         formula: Formula
         // The status code used in the redirect response. Only relevant server side
-        statusCode?: Nullable<RedirectStatusCode>
+        statusCode?: Nullable<Formula>
         index: number
       }
     >

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)
+    }
+  })
+})

package/src/utils/measure.ts

@@ -1,5 +1,9 @@
 const globalScope: any = 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'
@@ -7,8 +11,10 @@ globalScope.__nc_measure_enabled =
 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
@@ -18,17 +24,25 @@ let measureCount = 0
 const STACK: string[] = []
 const NOOP = () => {}
 
-export const measure = (key: string, details: Record<string, unknown>) => {
+export const measure = (
+  key: string,
+  details: Record<string, unknown>,
+  type?: 'component',
+) => {
   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
@@ -38,7 +52,7 @@ export const measure = (key: string, details: Record<string, unknown>) => {
     }
 
     _stopped = true
-    const end = performance.now()
+    const end = performance.now() + selfStackSize * 0.001
     const mergedDetails = extraDetails
       ? { ...details, ...extraDetails }
       : details
@@ -50,6 +64,7 @@ export const measure = (key: string, details: Record<string, unknown>) => {
         devtools: {
           dataType: 'track-entry',
           track: 'Nordcraft devtools',
+          color: COLOR_MAP[type as keyof typeof COLOR_MAP],
           properties: [
             ...Object.entries(mergedDetails).map(([k, v]) => [k, String(v)]),
             ['Stack', STACK.join(' > ')],
@@ -63,3 +78,7 @@ export const measure = (key: string, details: Record<string, unknown>) => {
     STACK.pop()
   }
 }
+
+const COLOR_MAP = {
+  component: 'secondary',
+}