fontdue-js 3.0.6 → 3.1.0

package/dist/__generated__/NodePasswordFormElementIDQuery.graphql.js

@@ -0,0 +1,86 @@
+/**
+ * @generated SignedSource<<b5b872a45d8e38f1905efd817d33f729>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "collectionId"
+    }],
+    v1 = [{
+      "kind": "Variable",
+      "name": "id",
+      "variableName": "collectionId"
+    }],
+    v2 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    };
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "NodePasswordFormElementIDQuery",
+      "selections": [{
+        "kind": "CatchField",
+        "field": {
+          "alias": "collection",
+          "args": v1 /*: any*/,
+          "concreteType": null,
+          "kind": "LinkedField",
+          "name": "node",
+          "plural": false,
+          "selections": [v2 /*: any*/],
+          "storageKey": null
+        },
+        "to": "RESULT",
+        "path": "collection"
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "NodePasswordFormElementIDQuery",
+      "selections": [{
+        "alias": "collection",
+        "args": v1 /*: any*/,
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "__typename",
+          "storageKey": null
+        }, v2 /*: any*/],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "c41065c50841d1bdce6230e2b450a07e",
+      "id": null,
+      "metadata": {},
+      "name": "NodePasswordFormElementIDQuery",
+      "operationKind": "query",
+      "text": "query NodePasswordFormElementIDQuery(\n  $collectionId: ID!\n) {\n  collection: node(id: $collectionId) {\n    __typename\n    id\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "213a61ae079e4f57b7b197b0d2f5256a";
+export default node;

package/dist/__generated__/NodePasswordFormElementSlugQuery.graphql.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @generated SignedSource<<ced3630de7c010a0f139c2788e5d6a86>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+import { Result } from "relay-runtime";
+export type NodePasswordFormElementSlugQuery$variables = {
+    collectionSlug: string;
+};
+export type NodePasswordFormElementSlugQuery$data = {
+    readonly viewer: {
+        readonly slug: {
+            readonly collection: Result<{
+                readonly id: string;
+            } | null, ReadonlyArray<unknown>>;
+        } | null;
+    };
+};
+export type NodePasswordFormElementSlugQuery = {
+    response: NodePasswordFormElementSlugQuery$data;
+    variables: NodePasswordFormElementSlugQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/NodePasswordFormElementSlugQuery.graphql.js

@@ -0,0 +1,108 @@
+/**
+ * @generated SignedSource<<ced3630de7c010a0f139c2788e5d6a86>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "collectionSlug"
+    }],
+    v1 = [{
+      "kind": "Variable",
+      "name": "name",
+      "variableName": "collectionSlug"
+    }],
+    v2 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v3 = {
+      "alias": "collection",
+      "args": null,
+      "concreteType": "FontCollection",
+      "kind": "LinkedField",
+      "name": "fontCollection",
+      "plural": false,
+      "selections": [v2 /*: any*/],
+      "storageKey": null
+    };
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "NodePasswordFormElementSlugQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1 /*: any*/,
+          "concreteType": "Slug",
+          "kind": "LinkedField",
+          "name": "slug",
+          "plural": false,
+          "selections": [{
+            "kind": "CatchField",
+            "field": v3 /*: any*/,
+            "to": "RESULT",
+            "path": "viewer.slug.collection"
+          }],
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "NodePasswordFormElementSlugQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": v1 /*: any*/,
+          "concreteType": "Slug",
+          "kind": "LinkedField",
+          "name": "slug",
+          "plural": false,
+          "selections": [v3 /*: any*/, v2 /*: any*/],
+          "storageKey": null
+        }, v2 /*: any*/],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "a2d0f6a8f2a084cccbb21e430138963f",
+      "id": null,
+      "metadata": {},
+      "name": "NodePasswordFormElementSlugQuery",
+      "operationKind": "query",
+      "text": "query NodePasswordFormElementSlugQuery(\n  $collectionSlug: String!\n) {\n  viewer {\n    slug(name: $collectionSlug) {\n      collection: fontCollection {\n        id\n      }\n      id\n    }\n    id\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "200a33ca6a1f9e4e7e95b7100bbdd261";
+export default node;

package/dist/__tests__/createFontdueFetch.test.js

@@ -1,15 +1,20 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { createFontdueFetch, FontdueNotFoundError } from '../server/index.js';
-import { registerAmbientConfigResolver } from '../relay/serverConfig.js';
+import { createFontdueFetch, FontdueNotFoundError, FontduePasswordProtectedError } from '../server/index.js';
+import { registerAmbientConfigResolver, registerNodeAccessRecovery } from '../relay/serverConfig.js';
+import * as serverConfig from '../relay/serverConfig.js';
+import { NODE_ACCESS_HEADER } from '../nodeAccess.js';
 beforeEach(() => {
   vi.unstubAllEnvs();
   vi.unstubAllGlobals();
 });
 
 // Several tests inject a per-render config through the ambient resolver seam
-// (the same seam runWithPreview and the Next slot use). Always clear it.
+// (the same seam runWithPreview and the Next slot use) or register a node-access
+// recovery. The store (resolver + recovery) is anchored on globalThis, so wipe
+// it — and restore any spies — so registrations can't leak between tests.
 afterEach(() => {
-  registerAmbientConfigResolver(() => undefined);
+  vi.restoreAllMocks();
+  delete globalThis.__fontdueServerConfigStore__;
 });
 function withConfig(config) {
   registerAmbientConfigResolver(() => config);
@@ -273,4 +278,123 @@ describe('createFontdueFetch', () => {
       expect(init.headers['fontdue-preview']).toBe('true');
     });
   });
+
+  // A password-protected collection comes back as a `password_protected` error.
+  // In a server render the Next adapter registers a recovery that reads the
+  // visitor's node-access cookie; createFontdueFetch folds the token into the
+  // per-render config (so the page fetch AND the embedded RSC components' own
+  // Suspense preloads resolve) and retries. No recovery / no token → the error
+  // propagates so the page can render the password form.
+  describe('node-access recovery (password-protected → Next adapter)', () => {
+    const locked = () => ({
+      status: 200,
+      json: async () => ({
+        errors: [{
+          message: 'locked',
+          code: 'password_protected'
+        }]
+      })
+    });
+    it('folds the unlock token into the per-render config and retries', async () => {
+      var _foldedConfig$headers;
+      vi.stubEnv('NODE_ENV', 'production');
+      // Stand-in for the Next adapter's cookie read.
+      registerNodeAccessRecovery(() => ({
+        [NODE_ACCESS_HEADER]: 'na-tok'
+      }));
+      // The per-render slot the embeds read (set by __prepareFontdueRender).
+      withConfig({
+        url: 'https://tenant.fontdue.com',
+        cacheTags: ['graphql:tenant.fontdue.com']
+      });
+      // The embeds (createNetworkFetch) read the slot, so the recovered token
+      // must be folded there — this is the assertion that proves they resolve.
+      const folded = vi.spyOn(serverConfig, 'setFontdueServerConfig');
+      let call = 0;
+      const fetchMock = mockFetch(() => {
+        call += 1;
+        return call === 1 ? locked() : {
+          status: 200,
+          json: async () => ({
+            data: {
+              ok: true
+            }
+          })
+        };
+      });
+      const data = await createFontdueFetch()('Font', 'query Font { ok }');
+      expect(data).toEqual({
+        ok: true
+      });
+      expect(fetchMock).toHaveBeenCalledTimes(2);
+      expect(folded).toHaveBeenCalledTimes(1);
+      const foldedConfig = folded.mock.calls[0][0];
+      expect((_foldedConfig$headers = foldedConfig.headers) === null || _foldedConfig$headers === void 0 ? void 0 : _foldedConfig$headers[NODE_ACCESS_HEADER]).toBe('na-tok');
+      // Dropped so the per-visitor unlocked render is never cached.
+      expect(foldedConfig.cacheTags).toBeUndefined();
+    });
+    it('rethrows FontduePasswordProtectedError when the visitor has no token', async () => {
+      registerNodeAccessRecovery(() => ({}));
+      mockFetch(locked);
+      await expect(createFontdueFetch({
+        url: 'https://acme.fontdue.com'
+      })('Font', 'query Font { ok }')).rejects.toBeInstanceOf(FontduePasswordProtectedError);
+    });
+    it('rethrows FontduePasswordProtectedError when no recovery is registered (non-Next)', async () => {
+      mockFetch(locked);
+      await expect(createFontdueFetch({
+        url: 'https://acme.fontdue.com'
+      })('Font', 'query Font { ok }')).rejects.toBeInstanceOf(FontduePasswordProtectedError);
+    });
+    it('detects password_protected even when it is not the first error', async () => {
+      const multiLocked = () => ({
+        status: 200,
+        json: async () => ({
+          errors: [{
+            message: 'other field failed',
+            code: 'something_else'
+          }, {
+            message: 'locked',
+            code: 'password_protected'
+          }]
+        })
+      });
+      registerNodeAccessRecovery(() => ({}));
+      mockFetch(multiLocked);
+      await expect(createFontdueFetch({
+        url: 'https://acme.fontdue.com'
+      })('Font', 'query Font { ok }')).rejects.toBeInstanceOf(FontduePasswordProtectedError);
+    });
+    it('does not force-cache the retried unlocked render even when the fetcher was given explicit cacheTags', async () => {
+      vi.stubEnv('NODE_ENV', 'production');
+      registerNodeAccessRecovery(() => ({
+        [NODE_ACCESS_HEADER]: 'na-tok'
+      }));
+      let call = 0;
+      const fetchMock = mockFetch(() => {
+        call += 1;
+        return call === 1 ? locked() : {
+          status: 200,
+          json: async () => ({
+            data: {
+              ok: true
+            }
+          })
+        };
+      });
+
+      // The explicit option would otherwise win over the config's dropped tags.
+      const data = await createFontdueFetch({
+        url: 'https://tenant.fontdue.com',
+        cacheTags: ['graphql:tenant.fontdue.com']
+      })('Font', 'query Font { ok }');
+      expect(data).toEqual({
+        ok: true
+      });
+      expect(fetchMock).toHaveBeenCalledTimes(2);
+      const retryInit = fetchMock.mock.calls[1][1];
+      expect(retryInit.cache).not.toBe('force-cache');
+      expect(retryInit.next).toBeUndefined();
+    });
+  });
 });

package/dist/__tests__/highlight.test.js

@@ -0,0 +1,141 @@
+import { describe, it, expect } from 'vitest';
+import { sensitiveStringsForFeature, computeSensitivityFlags, segmentByFlags } from "../components/FeatureTester/highlight.js";
+describe('sensitiveStringsForFeature', () => {
+  const glyphs = [{
+    characters: 'a',
+    features: ['ss03']
+  }, {
+    characters: 'g',
+    features: ['ss03', 'ss05']
+  }, {
+    characters: 'a',
+    features: ['ss03']
+  },
+  // duplicate
+  {
+    characters: 'x',
+    features: null
+  },
+  // no features
+  {
+    characters: 'ffi',
+    features: ['dlig']
+  }];
+  it('returns the de-duplicated input strings a feature substitutes', () => {
+    expect(sensitiveStringsForFeature(glyphs, 'ss03').sort()).toEqual(['a', 'g']);
+  });
+  it('matches a feature that is one of several on a glyph', () => {
+    expect(sensitiveStringsForFeature(glyphs, 'ss05')).toEqual(['g']);
+  });
+  it('returns ligature (multi-char) inputs', () => {
+    expect(sensitiveStringsForFeature(glyphs, 'dlig')).toEqual(['ffi']);
+  });
+  it('returns [] for a feature no glyph carries (the contextual signal)', () => {
+    expect(sensitiveStringsForFeature(glyphs, 'frac')).toEqual([]);
+  });
+  it('is empty for null/undefined glyphNames', () => {
+    expect(sensitiveStringsForFeature(null, 'ss03')).toEqual([]);
+    expect(sensitiveStringsForFeature(undefined, 'ss03')).toEqual([]);
+  });
+});
+describe('computeSensitivityFlags', () => {
+  it('flags every occurrence of an auto string (by code point)', () => {
+    expect(computeSensitivityFlags('abcabc', {
+      autoStrings: ['a']
+    })).toEqual([true, false, false, true, false, false]);
+  });
+  it('flags whole multi-char auto strings', () => {
+    expect(computeSensitivityFlags('abcabc', {
+      autoStrings: ['ab']
+    })).toEqual([true, true, false, true, true, false]);
+  });
+  it('flags shaped-diff ranges', () => {
+    expect(computeSensitivityFlags('abcabc', {
+      addMarks: [{
+        start: 2,
+        end: 4
+      }]
+    })).toEqual([false, false, true, true, true, false]);
+  });
+  it('composes ranges on top of auto strings', () => {
+    expect(computeSensitivityFlags('abcabc', {
+      autoStrings: ['a'],
+      addMarks: [{
+        start: 2,
+        end: 2
+      }]
+    })).toEqual([true, false, true, true, false, false]);
+  });
+  it('clamps ranges to the content and ignores negative indices', () => {
+    expect(computeSensitivityFlags('abc', {
+      addMarks: [{
+        start: -2,
+        end: 100
+      }]
+    })).toEqual([true, true, true]);
+  });
+  it('is code-point aware (astral characters count as one)', () => {
+    // '🎉' is one code point; 'a' should be flagged at index 1, not 2
+    expect(computeSensitivityFlags('🎉a', {
+      autoStrings: ['a']
+    })).toEqual([false, true]);
+  });
+  it('is all-false with no options', () => {
+    expect(computeSensitivityFlags('abc', {})).toEqual([false, false, false]);
+  });
+});
+describe('segmentByFlags', () => {
+  it('collapses consecutive runs into segments', () => {
+    const flags = [false, false, true, true, false, false];
+    expect(segmentByFlags('abcabc', flags)).toEqual([{
+      text: 'ab',
+      sensitive: false
+    }, {
+      text: 'ca',
+      sensitive: true
+    }, {
+      text: 'bc',
+      sensitive: false
+    }]);
+  });
+  it('keeps a contiguous sensitive run (e.g. a ligature cluster) whole', () => {
+    const flags = [false, true, true, true, false, false];
+    expect(segmentByFlags('office', flags)).toEqual([{
+      text: 'o',
+      sensitive: false
+    }, {
+      text: 'ffi',
+      sensitive: true
+    }, {
+      text: 'ce',
+      sensitive: false
+    }]);
+  });
+  it('returns a single segment when nothing is sensitive', () => {
+    expect(segmentByFlags('abc', [false, false, false])).toEqual([{
+      text: 'abc',
+      sensitive: false
+    }]);
+  });
+  it('treats missing flags as not sensitive', () => {
+    expect(segmentByFlags('abc', [true])).toEqual([{
+      text: 'a',
+      sensitive: true
+    }, {
+      text: 'bc',
+      sensitive: false
+    }]);
+  });
+  it('is empty for empty content', () => {
+    expect(segmentByFlags('', [])).toEqual([]);
+  });
+  it('is code-point aware', () => {
+    expect(segmentByFlags('🎉a', [false, true])).toEqual([{
+      text: '🎉',
+      sensitive: false
+    }, {
+      text: 'a',
+      sensitive: true
+    }]);
+  });
+});

package/dist/__tests__/middleware.test.js

@@ -0,0 +1,132 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { runWithPreview, runWithNodeAccess, runWithFontdue, isPreviewing, ambientHeaders } from '../server/middleware.js';
+import { createFontdueFetch } from '../server/index.js';
+import { PREVIEW_TOKEN_COOKIE } from '../preview/constants.js';
+import { NODE_ACCESS_COOKIE, NODE_ACCESS_HEADER } from '../nodeAccess.js';
+beforeEach(() => {
+  vi.unstubAllGlobals();
+});
+function req() {
+  let cookies = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const parts = [];
+  if (cookies.preview) parts.push(`${PREVIEW_TOKEN_COOKIE}=${cookies.preview}`);
+  if (cookies.nodeAccess) parts.push(`${NODE_ACCESS_COOKIE}=${cookies.nodeAccess}`);
+  return new Request('https://store.test/', {
+    headers: parts.length ? {
+      cookie: parts.join('; ')
+    } : {}
+  });
+}
+const cdnHeaders = {
+  'Netlify-CDN-Cache-Control': 'public, durable, s-maxage=31536000',
+  'CDN-Cache-Control': 'public, s-maxage=300'
+};
+describe('runWithNodeAccess', () => {
+  it('passes public (no cookie) requests through untouched and cacheable', async () => {
+    const response = await runWithNodeAccess(req(), async () => {
+      expect(ambientHeaders()).toEqual({});
+      return new Response('ok', {
+        headers: cdnHeaders
+      });
+    });
+    expect(response.headers.get('Cache-Control')).toBeNull();
+    expect(response.headers.get('Netlify-CDN-Cache-Control')).toBe('public, durable, s-maxage=31536000');
+  });
+  it('forwards the unlock token ambiently and forces the response out of shared caches', async () => {
+    const response = await runWithNodeAccess(req({
+      nodeAccess: 'na1'
+    }), async () => {
+      expect(ambientHeaders()).toEqual({
+        [NODE_ACCESS_HEADER]: 'na1'
+      });
+      // Carrying only a node-access token is not an admin preview.
+      expect(isPreviewing()).toBe(false);
+      return new Response('secret', {
+        headers: cdnHeaders
+      });
+    });
+    expect(response.headers.get('Cache-Control')).toBe('private, no-store');
+    expect(response.headers.get('Netlify-CDN-Cache-Control')).toBeNull();
+    expect(response.headers.get('CDN-Cache-Control')).toBeNull();
+  });
+});
+describe('runWithPreview is single-responsibility', () => {
+  it('does NOT forward the node-access token (only preview)', async () => {
+    const response = await runWithPreview(req({
+      nodeAccess: 'na1'
+    }), async () => {
+      // A node-access cookie alone is invisible to runWithPreview.
+      expect(ambientHeaders()).toEqual({});
+      expect(isPreviewing()).toBe(false);
+      return new Response('ok', {
+        headers: cdnHeaders
+      });
+    });
+    // No preview → public → left cacheable.
+    expect(response.headers.get('Cache-Control')).toBeNull();
+  });
+});
+describe('runWithFontdue (composed)', () => {
+  it('forwards both the preview and node-access tokens together', async () => {
+    await runWithFontdue(req({
+      preview: 'tok',
+      nodeAccess: 'na1'
+    }), async () => {
+      expect(ambientHeaders()).toEqual({
+        authorization: 'Bearer tok',
+        [NODE_ACCESS_HEADER]: 'na1'
+      });
+      expect(isPreviewing()).toBe(true);
+      return new Response('ok');
+    });
+    // Context unwinds after the request.
+    expect(ambientHeaders()).toEqual({});
+    expect(isPreviewing()).toBe(false);
+  });
+  it('forwards node-access alone (no preview) and marks the response no-store', async () => {
+    const response = await runWithFontdue(req({
+      nodeAccess: 'na1'
+    }), async () => {
+      expect(ambientHeaders()).toEqual({
+        [NODE_ACCESS_HEADER]: 'na1'
+      });
+      expect(isPreviewing()).toBe(false);
+      return new Response('ok', {
+        headers: cdnHeaders
+      });
+    });
+    expect(response.headers.get('Cache-Control')).toBe('private, no-store');
+  });
+  it('passes fully public requests through untouched and cacheable', async () => {
+    const response = await runWithFontdue(req(), async () => {
+      expect(ambientHeaders()).toEqual({});
+      return new Response('ok', {
+        headers: cdnHeaders
+      });
+    });
+    expect(response.headers.get('Cache-Control')).toBeNull();
+    expect(response.headers.get('Netlify-CDN-Cache-Control')).toBe('public, durable, s-maxage=31536000');
+  });
+});
+describe('createFontdueFetch + ambient node-access', () => {
+  it('a module-level fetcher forwards the ambient unlock token, no per-call plumbing', async () => {
+    const fetchMock = vi.fn(async () => ({
+      status: 200,
+      json: async () => ({
+        data: {}
+      })
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    const fetchGraphql = createFontdueFetch({
+      url: 'https://acme.fontdue.com'
+    });
+    await runWithNodeAccess(req({
+      nodeAccess: 'na1'
+    }), async () => {
+      await fetchGraphql('Q', 'query Q { __typename }');
+      return new Response('ok');
+    });
+    const init = fetchMock.mock.calls[0][1];
+    expect(init.headers[NODE_ACCESS_HEADER]).toBe('na1');
+  });
+});

package/dist/components/FeatureTester/FeatureTesterCard.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FeatureTesterCard_fontStyle$key } from '../../__generated__/FeatureTesterCard_fontStyle.graphql.js';
+export type ToggleMode = 'button' | 'hover';
+export interface FeatureTesterCardOptions {
+    feature: string;
+    content: string;
+    label?: string | null;
+    fontSize?: number | null;
+    lineHeight?: number | null;
+    letterSpacing?: number | null;
+    alignment?: 'left' | 'center' | 'right' | null;
+    defaultOn?: boolean;
+    highlightColor?: string | null;
+    showLabel?: boolean;
+    showTag?: boolean;
+    toggle?: ToggleMode;
+    autofit?: boolean;
+    changedRanges?: ReadonlyArray<{
+        readonly start: number;
+        readonly length: number;
+    }> | null;
+    variableSettings?: ReadonlyArray<{
+        readonly axis: string;
+        readonly value: number;
+    }> | null;
+}
+export type FeatureTesterCardProps = FeatureTesterCardOptions & {
+    fontStyle: FeatureTesterCard_fontStyle$key;
+};
+export default function FeatureTesterCard({ fontStyle: fontStyleKey, feature, content, label, fontSize, lineHeight, letterSpacing, alignment, defaultOn, highlightColor, showLabel, showTag, toggle, autofit, changedRanges, variableSettings, }: FeatureTesterCardProps): React.JSX.Element;