@developer_tribe/react-builder 1.2.25 → 1.2.26

package/src/components/Builder.tsx

@@ -330,11 +330,13 @@ export function Builder({
       setData(updatedRoot);
       setCurrent(updatedParent);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current, data, setData, setCurrent, usedKeys],
   );
 
   const allowedChildTypes = useMemo(
     () => getAllowedChildTypes(current),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current],
   );
   const parentType = useMemo(() => {
@@ -378,6 +380,7 @@ export function Builder({
         setCurrent(next);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current, data, setCurrent, setData],
   );
 
@@ -407,6 +410,7 @@ export function Builder({
         setCurrent(updatedParent);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current, data, setCurrent, setData],
   );
 
@@ -436,6 +440,7 @@ export function Builder({
         setCurrent(updatedParent);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [current, data, setCurrent, setData],
   );
 

package/src/components/BuilderProvider.tsx

@@ -4,6 +4,7 @@ import type { PaywallBenefits } from '../paywall/types/benefits';
 import type { AppConfig } from '../types/PreviewConfig';
 import type { Fonts } from '../types/Fonts';
 import type { ProjectColors } from '../types/Project';
+import { defaultProjectColors, mergeProjectColors } from '../utils';
 
 // NOTE: We keep this context intentionally tiny.
 // IMPORTANT: This provider may be mounted once but consumed by multiple `build-components`
@@ -65,7 +66,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
           : undefined,
       projectColors:
         params?.projectColors && typeof params.projectColors === 'object'
-          ? (params.projectColors as ProjectColors)
+          ? mergeProjectColors(defaultProjectColors, params.projectColors)
           : defaultProjectColors,
       fonts: Array.isArray(params?.fonts) ? (params.fonts as Fonts) : undefined,
       appFont: params?.appFont,
@@ -95,42 +96,6 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
   );
 }
 
-const defaultProjectColors: Readonly<ProjectColors> = {
-  STATIC_COLORS: {
-    BLACK: '#000',
-    WHITE: '#FFFFFF',
-    TRANSPARENT: '#ffffff00',
-    ONBOARD_DOT_INACTIVE: '#E4E5E7',
-    ONBOARD_DOT_ACTIVE: '#007AFF',
-    BUTTON_PRIMARY_BACKGROUND: '#0066FF',
-    BUTTON_PRIMARY_TEXT: '#FFFFFF',
-    LINK_COLOR: '#1778F2',
-    SEPARATOR_COLOR: '#44454D',
-  },
-  THEME_COLORS: {
-    light: {
-      TEXT: '#161827',
-      BACKGROUND: '#F4F5FF',
-      ICON: '#0450E2',
-      LINE: '#E9EBF9',
-      ONBOARD_TITLE: '#161827',
-      ONBOARD_SUBTITLE: '#44454D',
-      BUTTON_SECONDARY_TEXT: '#81838F',
-      FOOTER_TEXT: '#81838F',
-    },
-    dark: {
-      TEXT: '#E9EBF9',
-      BACKGROUND: '#080A17',
-      ICON: '#0450E2',
-      LINE: '#161827',
-      ONBOARD_TITLE: '#FDFDFD',
-      ONBOARD_SUBTITLE: '#C7C7C7',
-      BUTTON_SECONDARY_TEXT: '#A9AAAC',
-      FOOTER_TEXT: '#A2A4B1',
-    },
-  },
-} as const;
-
 export function useBuilderParams(): Readonly<BuilderProviderParams> {
   return (
     useContext(builderContext) ?? {

package/src/hooks/useSafeAreaViewStyle.ts

@@ -33,9 +33,7 @@ export function useSafeAreaViewStyle(
   return useMemo(() => {
     if (!enabled) return baseStyle;
 
-    const [insetTop, insetRight, insetBottom, insetLeft] = device?.insets ?? [
-      0, 0, 0, 0,
-    ];
+    const [insetTop, insetRight, , insetLeft] = device?.insets ?? [0, 0, 0, 0];
 
     // Match DeviceMockFrame fallbacks: status bar overlays content, so we treat it as top safe area.
     const top =

package/src/mockOS/managers/navigationManager.ts

@@ -70,7 +70,7 @@ export class MockNavigationManager {
     }
 
     if (this.stack.length > 0) {
-      const popped = this.stack.pop();
+      this.stack.pop();
       return true;
     }
 

package/src/pages/ProjectPage.tsx

@@ -162,6 +162,7 @@ export function ProjectPage({
         setCurrent(updated);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [editorData, current],
   );
 
@@ -225,6 +226,7 @@ export function ProjectPage({
     setMinLoadingDelayDone(false);
     const timer = setTimeout(() => setMinLoadingDelayDone(true), 1000);
     return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeProject.data]);
 
   // Ref for the full project (used inside effect for migration check etc.)

package/src/pages/tabs/SideTool.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Modal } from '../../modals';
 import type { Node } from '../../types/Node';
 import type { Localication } from '../../types/PreviewConfig';
@@ -52,12 +52,6 @@ export function SideTool({ data, setData }: SideToolProps) {
   useLogRender('SideTool');
   const [isDebugModalOpen, setIsDebugModalOpen] = useState(false);
   const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
-  const [isCompactMode, setIsCompactMode] = useState(() => {
-    if (typeof window === 'undefined') {
-      return false;
-    }
-    return window.innerWidth < 1000;
-  });
   const [isCompactPanelVisible, setIsCompactPanelVisible] = useState(false);
   const { appConfig, setAppConfig, previewMode, setPreviewMode } =
     useRenderStore((s) => ({
@@ -67,21 +61,6 @@ export function SideTool({ data, setData }: SideToolProps) {
       setPreviewMode: s.setPreviewMode,
     }));
 
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const handleResize = () => {
-      const compact = window.innerWidth < 1000;
-      setIsCompactMode(compact);
-    };
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
   const getScreenColorValue = (mode: ScreenMode, key: ScreenColorKey) =>
     appConfig.screenStyle?.[mode]?.[key] ?? screenStyleDefaults[mode][key];
 

package/src/paywall/hooks/index.ts

@@ -1,5 +1,4 @@
 export { useCalculateLocalizedPrice } from './useCalculateLocalizedPrice';
 export { useDiscountRate } from './useDiscountRate';
 export { useChangeDelayByPaywall } from './useChangeDelayByPaywall';
-export { useHandleGoBack } from './useHandleGoBack';
 export { useMockOSBackHandler } from './useMockOSBackHandler';

package/src/store.ts

@@ -1,13 +1,8 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
 import type { Device } from './types/Device';
-import {
-  defaultAppConfig,
-  type AppConfig,
-  type Localication,
-} from './types/PreviewConfig';
+import { defaultAppConfig, type AppConfig } from './types/PreviewConfig';
 import { getDefaultDevice } from './utils/getDevices';
-import { ScreenStyle } from './RenderPage';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import { Node } from './types/Node';
 import type { LogEntry, LogLevel, ProjectColors } from './types/Project';

package/src/styles/base/_global.scss

@@ -61,6 +61,8 @@ body,
   min-width: 200px;
   border-right: 1px solid colors.$borderColor;
   overflow: auto;
+  max-height: calc(100vh - 120px);
+  padding-bottom: 80px;
 }
 
 .split-right {

package/src/utils/analyseNodeByPatterns.ts

@@ -344,6 +344,10 @@ function validateAttributeValue(
   // null to clear fields (e.g. events[].navigate_to = null).
   if (value == null) return ok();
 
+  // "never" type means the attribute is marked as not to be validated.
+  // Skip validation for attributes with "never" type.
+  if (spec === 'never') return ok();
+
   if (Array.isArray(spec)) {
     return validateEnumValue(value, spec, path);
   }

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { defaultProjectColors, mergeProjectColors } from './projectColors';

package/src/utils/logRenderStore.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 // This file is a debug utility specifically designed to log to console for debugging purposes.
 import { useRenderStore } from '../store';
 

package/src/utils/novaToJson.ts

@@ -1,5 +1,5 @@
 import { Node, NodeData } from '../types/Node';
-import { Project, ProjectBase } from '../types/Project';
+import { ProjectBase } from '../types/Project';
 //TODO: deprecated olmasına rağmen snapshot testi ekle
 /**
  * @deprecated Legacy converter for old "nova" onboard JSON formats.
@@ -226,7 +226,6 @@ function buildCarouselItem(
         const flex = attrs?.flex ? Number(attrs.flex) : undefined;
 
         // Normalize events and compute Navigate target indices when resolvable
-        let targetIndex: number | undefined = undefined;
         //@eslint-disable-next-line @typescript-eslint/no-explicit-any
         const actions = (attrs?.actions || []) as any[];
         const normalizedEvents: {
@@ -263,9 +262,6 @@ function buildCarouselItem(
                   ? { targetIndex: pageKeyToIndex.get(nextKey!)! }
                   : {}),
               });
-              if (hasTarget) {
-                targetIndex = pageKeyToIndex.get(nextKey!)!;
-              }
             }
           }
         }

package/src/utils/parseColor.ts

@@ -19,6 +19,7 @@ export function parseColor(value?: string, options: ParseColorOptions = {}) {
   if (trimmed.startsWith(STATIC_PREFIX)) {
     const token = trimmed.slice(STATIC_PREFIX.length);
     const resolved = projectColors.STATIC_COLORS?.[token];
+    console.log('resolved', value, resolved);
     return typeof resolved === 'string' && resolved.trim()
       ? resolved.trim()
       : trimmed;

package/src/utils/projectColors.ts

@@ -0,0 +1,71 @@
+import type {
+  ProjectColors,
+  ProjectColorTokenMap,
+  ProjectThemeColors,
+} from '../types/Project';
+
+export const defaultProjectColors: ProjectColors = {
+  STATIC_COLORS: {
+    BLACK: '#000',
+    WHITE: '#FFFFFF',
+    TRANSPARENT: '#ffffff00',
+    ONBOARD_DOT_INACTIVE: '#E4E5E7',
+    ONBOARD_DOT_ACTIVE: '#007AFF',
+    ONBOARD_BUTTON_PRIMARY_BACKGROUND: '#0000FF',
+    ONBOARD_BUTTON_PRIMARY_TEXT: '#000',
+    ONBOARD_LINK_COLOR: '#1778F2',
+    ONBOARD_SEPARATOR_COLOR: '#44454D',
+  },
+  THEME_COLORS: {
+    light: {
+      TEXT: '#161827',
+      BACKGROUND: '#F4F5FF',
+      ICON: '#0450E2',
+      LINE: '#E9EBF9',
+      ONBOARD_TITLE: '#161827',
+      ONBOARD_SUBTITLE: '#44454D',
+      ONBOARD_BUTTON_SECONDARY_TEXT: '#81838F',
+      ONBOARD_FOOTER_TEXT: '#81838F',
+    },
+    dark: {
+      TEXT: '#E9EBF9',
+      BACKGROUND: '#080A17',
+      ICON: '#0450E2',
+      LINE: '#161827',
+      ONBOARD_TITLE: '#FDFDFD',
+      ONBOARD_SUBTITLE: '#C7C7C7',
+      ONBOARD_BUTTON_SECONDARY_TEXT: '#A9AAAC',
+      ONBOARD_FOOTER_TEXT: '#A2A4B1',
+    },
+  },
+};
+
+/**
+ * Merges custom project colors with base colors.
+ * Custom colors override base colors on a per-token basis.
+ */
+export function mergeProjectColors(
+  baseColors: ProjectColors,
+  customColors: ProjectColors,
+): ProjectColors {
+  const staticColors: ProjectColorTokenMap = {
+    ...baseColors.STATIC_COLORS,
+    ...(customColors.STATIC_COLORS || {}),
+  };
+
+  const themeColors: ProjectThemeColors = {
+    light: {
+      ...(baseColors.THEME_COLORS?.light || {}),
+      ...(customColors.THEME_COLORS?.light || {}),
+    },
+    dark: {
+      ...(baseColors.THEME_COLORS?.dark || {}),
+      ...(customColors.THEME_COLORS?.dark || {}),
+    },
+  };
+
+  return {
+    STATIC_COLORS: staticColors,
+    THEME_COLORS: themeColors,
+  };
+}

package/dist/build-components/Counter/Counter.d.ts

@@ -1,2 +0,0 @@
-import type { CounterComponentProps } from './CounterProps.generated';
-export declare function Counter({ node }: CounterComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/build-components/Counter/CounterProps.generated.d.ts

@@ -1,61 +0,0 @@
-import type { NodeData } from '../../types/Node';
-export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
-export type FlexDirectionOptionType = 'row' | 'column';
-export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type AlignItemsOptionType = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
-export type JustifyContentOptionType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
-export type PositionOptionType = 'relative' | 'absolute';
-export interface CounterStyleGenerated {
-    color?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    textAlign?: TextAlignOptionType;
-    flexDirection?: FlexDirectionOptionType;
-    flexWrap?: FlexWrapOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginHorizontal?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
-}
-export interface CounterPropsGenerated {
-    child: string;
-    attributes: {
-        style?: CounterStyleGenerated;
-        adjustsFontSizeToFit?: boolean;
-        showEllipsis?: boolean;
-        scrollable?: boolean;
-        count?: number;
-    };
-}
-export interface CounterComponentProps {
-    node: NodeData<CounterPropsGenerated['attributes']>;
-}

package/dist/build-components/PaywallCounter/PaywallCounter.d.ts

@@ -1,2 +0,0 @@
-import type { PaywallCounterComponentProps } from './PaywallCounterProps.generated';
-export declare function PaywallCounter({ node }: PaywallCounterComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/build-components/PaywallCounter/PaywallCounterProps.generated.d.ts

@@ -1,61 +0,0 @@
-import type { NodeData } from '../../types/Node';
-export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
-export type FlexDirectionOptionType = 'row' | 'column';
-export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type AlignItemsOptionType = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
-export type JustifyContentOptionType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
-export type PositionOptionType = 'relative' | 'absolute';
-export interface PaywallCounterStyleGenerated {
-    color?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    textAlign?: TextAlignOptionType;
-    flexDirection?: FlexDirectionOptionType;
-    flexWrap?: FlexWrapOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginHorizontal?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
-}
-export interface PaywallCounterPropsGenerated {
-    child: string;
-    attributes: {
-        style?: PaywallCounterStyleGenerated;
-        count?: number;
-        adjustsFontSizeToFit?: boolean;
-        showEllipsis?: boolean;
-        scrollable?: boolean;
-    };
-}
-export interface PaywallCounterComponentProps {
-    node: NodeData<PaywallCounterPropsGenerated['attributes']>;
-}

package/dist/paywall/hooks/useHandleGoBack.d.ts

@@ -1 +0,0 @@
-export declare function useHandleGoBack(handleGoBack: () => boolean | null | undefined): void;

package/src/build-components/Counter/Counter.tsx

@@ -1,44 +0,0 @@
-import React, { useId } from 'react';
-import type { CounterComponentProps } from './CounterProps.generated';
-import useNode from '../useNode';
-import { useBuilderParams } from '../../components/BuilderProvider';
-import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
-import { useLogRender } from '../../utils/useLogRender';
-import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
-import { useMergedStyle } from '../../utils/useMergedStyle';
-
-//Optimzation trade off by readability: skip React.memo to keep named exports.
-export function Counter({ node }: CounterComponentProps) {
-  useLogRender('Counter');
-  node = useNode(node);
-
-  const generatedId = useId();
-  const attributeName = node.sourceType ?? node.type ?? 'Counter';
-  const attributeKey = node.key ?? generatedId;
-
-  const { previewMode, selectedKey } = useBuilderParams();
-  const baseStyle = useExtractTextStyle(node);
-  const isSelected = isNodeSelected({
-    previewMode: !!previewMode,
-    current: selectedKey ? { key: selectedKey } : undefined,
-    node,
-  });
-  const style = useMergedStyle(
-    baseStyle,
-    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
-  );
-
-  const rawCount = node.attributes?.count;
-  const count =
-    typeof rawCount === 'number' && Number.isFinite(rawCount) ? rawCount : 0;
-
-  return (
-    <p
-      attribute-name={attributeName}
-      attribute-key={attributeKey}
-      style={style}
-    >
-      {String(count)}
-    </p>
-  );
-}

package/src/build-components/Counter/CounterProps.generated.ts

@@ -1,78 +0,0 @@
-/* AUTO-GENERATED FILE - DO NOT EDIT */
-
-import type { NodeData } from '../../types/Node';
-
-export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
-export type FlexDirectionOptionType = 'row' | 'column';
-export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type AlignItemsOptionType =
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | 'stretch'
-  | 'baseline';
-export type JustifyContentOptionType =
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly';
-export type PositionOptionType = 'relative' | 'absolute';
-
-export interface CounterStyleGenerated {
-  color?: string;
-  fontSize?: string;
-  fontFamily?: string;
-  fontWeight?: string;
-  textAlign?: TextAlignOptionType;
-  flexDirection?: FlexDirectionOptionType;
-  flexWrap?: FlexWrapOptionType;
-  alignItems?: AlignItemsOptionType;
-  justifyContent?: JustifyContentOptionType;
-  gap?: string;
-  padding?: string;
-  paddingHorizontal?: string;
-  paddingVertical?: string;
-  paddingTop?: string;
-  paddingBottom?: string;
-  paddingLeft?: string;
-  paddingRight?: string;
-  margin?: string;
-  marginHorizontal?: string;
-  marginVertical?: string;
-  marginTop?: string;
-  marginBottom?: string;
-  marginLeft?: string;
-  marginRight?: string;
-  backgroundColor?: string;
-  borderRadius?: string;
-  width?: string;
-  minWidth?: string;
-  maxWidth?: string;
-  height?: string;
-  minHeight?: string;
-  maxHeight?: string;
-  flex?: number;
-  position?: PositionOptionType;
-  top?: string;
-  bottom?: string;
-  left?: string;
-  right?: string;
-  zIndex?: number;
-}
-
-export interface CounterPropsGenerated {
-  child: string;
-  attributes: {
-    style?: CounterStyleGenerated;
-    adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
-    scrollable?: boolean;
-    count?: number;
-  };
-}
-
-export interface CounterComponentProps {
-  node: NodeData<CounterPropsGenerated['attributes']>;
-}

package/src/build-components/Counter/pattern.json

@@ -1,29 +0,0 @@
-{
-  "schemaVersion": 2,
-  "pattern": {
-    "type": "Counter",
-    "title": "title",
-    "description": "description",
-    "children": "never",
-    "extends": "Text",
-    "attributes": {
-      "count": "number"
-    }
-  },
-  "meta": {
-    "desiredParent": [
-      "all"
-    ],
-    "label": "Counter",
-    "description": "Displays a numeric counter.",
-    "attributes": {
-      "count": {
-        "label": "Count",
-        "description": "Numeric value to display.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 1
-      }
-    }
-  }
-}

package/src/build-components/PaywallCounter/PaywallCounter.tsx

@@ -1,46 +0,0 @@
-import React, { useId } from 'react';
-import type { PaywallCounterComponentProps } from './PaywallCounterProps.generated';
-import useNode from '../useNode';
-import { useBuilderParams } from '../../components/BuilderProvider';
-import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
-import { useLogRender } from '../../utils/useLogRender';
-import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
-import { useMergedStyle } from '../../utils/useMergedStyle';
-
-//Optimzation trade off by readability: skip React.memo to keep named exports.
-export function PaywallCounter({ node }: PaywallCounterComponentProps) {
-  useLogRender('PaywallCounter');
-  node = useNode(node);
-
-  const generatedId = useId();
-  const attributeName = node.sourceType ?? node.type ?? 'PaywallCounter';
-  const attributeKey = node.key ?? generatedId;
-
-  const { previewMode, selectedKey } = useBuilderParams();
-  const baseStyle = useExtractTextStyle(node);
-  const isSelected = isNodeSelected({
-    previewMode: !!previewMode,
-    current: selectedKey ? { key: selectedKey } : undefined,
-    node,
-  });
-  const style = useMergedStyle(
-    baseStyle,
-    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
-  );
-
-  const fallbackCount = node.attributes?.count;
-  const count =
-    typeof fallbackCount === 'number' && Number.isFinite(fallbackCount)
-      ? fallbackCount
-      : 0;
-
-  return (
-    <p
-      attribute-name={attributeName}
-      attribute-key={attributeKey}
-      style={style}
-    >
-      {String(count)}
-    </p>
-  );
-}