@developer_tribe/react-builder 1.2.8 → 1.2.9

package/src/AttributesEditor.tsx

@@ -1,949 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Node, NodeData, NodeDefaultAttribute } from './types/Node';
-import type { ProjectColorTokenMap, ProjectColors } from './types/Project';
-import { isNodeString } from './utils/analyseNode';
+import React from 'react';
+import type { AttributesEditorProps } from './attributes-editor/attributesEditorModelTypes';
 import { useLogRender } from './utils/useLogRender';
-import {
-  getAttributeMeta,
-  getAttributeSchema,
-  getPatternByType,
-} from './utils/patterns';
-import { useRenderStore } from './store';
-import { Field } from './attributes-editor/Field';
-import { SpecialCategorySection } from './attributes-editor/SpecialCategorySection';
-import { toPreferredScale } from './attributes-editor/SizeField';
-import {
-  LayoutContext,
-  SchemaEntry,
-  isBooleanFieldType,
-} from './attributes-editor/types';
-import { FieldInfoTooltip } from './attributes-editor/FieldInfoTooltip';
-import type { ViewPropsGenerated } from './build-components/View/ViewProps.generated';
-import useNode from './build-components/useNode';
-import { MockableFeatureModal } from './modals';
-import { Icon } from './components/Icon.generated';
-import { IconPickerModal } from './modals/IconPickerModal';
-import type { IconsType } from './types/Icons';
-import Modal from './modals/Modal';
-import { loadFontFamily } from './utils/loadFontFamily';
-import { fontsDebug } from './utils/fontsDebug';
+import { AttributesEditorView } from './attributes-editor/AttributesEditorView';
+import { useAttributesEditorModel } from './attributes-editor/useAttributesEditorModel';
 
-type AttributesEditorProps = {
-  node: Node;
-  onChange: (next: Node) => void;
-  projectColors?: ProjectColors;
-};
-
-function isPlainObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
-type TabId = 'style' | 'container' | 'other';
-
-type TabConfig = {
-  id: TabId;
-  label: string;
-  entries: SchemaEntry[];
-};
-
-type SpecialSection = {
-  key: string;
-  entries: SchemaEntry[];
-  meta?: {
-    label?: string;
-    description?: string;
-    sort?: number;
-  };
-};
-
-type TabContentInfo = Record<
-  TabId,
-  {
-    baseCount: number;
-    specialCount: number;
-  }
->;
-
-export function AttributesEditor({
-  node,
-  onChange,
-  projectColors,
-}: AttributesEditorProps) {
+export function AttributesEditor(props: AttributesEditorProps) {
   useLogRender('AttributesEditor');
-  if (!node || isNodeString(node)) return null;
-
-  const baseData = node as NodeData<NodeDefaultAttribute>;
-  const data = useNode(baseData);
-  const {
-    appConfig,
-    fonts: projectFonts,
-    loadedFonts,
-    markFontLoaded,
-    addError,
-  } = useRenderStore((state) => ({
-    appConfig: state.appConfig,
-    fonts: state.fonts,
-    loadedFonts: state.loadedFonts,
-    markFontLoaded: state.markFontLoaded,
-    addError: state.addError,
-  }));
-  const [activeFontField, setActiveFontField] = useState<string | null>(null);
-  const [isFontLoading, setIsFontLoading] = useState(false);
-  const [fontLoadError, setFontLoadError] = useState<string | null>(null);
-  const projectColorsForPicker = useMemo<ProjectColors | undefined>(() => {
-    if (projectColors) {
-      return projectColors;
-    }
-
-    const addColor = (collection: Set<string>, value?: string) => {
-      if (typeof value !== 'string') return;
-      const trimmed = value.trim();
-      if (!trimmed) return;
-      collection.add(trimmed);
-    };
-
-    const fallback = new Set<string>();
-    const styles = [
-      appConfig?.screenStyle?.light,
-      appConfig?.screenStyle?.dark,
-    ].filter(Boolean) as Array<{
-      backgroundColor?: string;
-      color?: string;
-      seperatorColor?: string;
-    }>;
-    styles.forEach((style) => {
-      ['backgroundColor', 'color', 'seperatorColor'].forEach((key) => {
-        const value = style?.[key as keyof typeof style];
-        addColor(fallback, value);
-      });
-    });
-
-    if (fallback.size === 0) {
-      return undefined;
-    }
-
-    const fallbackRecord: ProjectColorTokenMap = {};
-    Array.from(fallback).forEach((color, index) => {
-      fallbackRecord[`FALLBACK_${index + 1}`] = color;
-    });
-
-    return { STATIC_COLORS: fallbackRecord };
-  }, [appConfig, projectColors]);
-
-  const schema = getAttributeSchema(data?.type) ?? {};
-  const attributeMeta = getAttributeMeta(data?.type);
-  const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
-  const styleAttributeKeys = useMemo(() => {
-    // schemaVersion=2 stores style-like props under attributes.style; keep legacy support for flat attrs.
-    const viewSchema = getAttributeSchema('View') ?? {};
-    const textSchema = getAttributeSchema('Text') ?? {};
-    return new Set([...Object.keys(viewSchema), ...Object.keys(textSchema)]);
-  }, []);
-  const getAttributeValue = useCallback(
-    (name: string) => {
-      const direct = (attributes as Record<string, unknown>)?.[name];
-      if (direct !== undefined && direct !== null) return direct;
-      const styleBag = (attributes as any)?.style as
-        | Record<string, unknown>
-        | undefined;
-      return styleBag?.[name];
-    },
-    [attributes],
-  );
-  const viewAttributes = useMemo<
-    Partial<ViewPropsGenerated['attributes']> | undefined
-  >(
-    () =>
-      data?.type === 'View'
-        ? (attributes as ViewPropsGenerated['attributes'])
-        : undefined,
-    [attributes, data?.type],
-  );
-
-  const layoutContext = useMemo<LayoutContext>(
-    () => ({
-      flexDirection:
-        attributes?.flexDirection as LayoutContext['flexDirection'],
-      alignItems: attributes?.alignItems as LayoutContext['alignItems'],
-      justifyContent:
-        attributes?.justifyContent as LayoutContext['justifyContent'],
-    }),
-    [
-      attributes?.flexDirection,
-      attributes?.alignItems,
-      attributes?.justifyContent,
-    ],
-  );
-
-  const patternForType = useMemo(
-    () => (data?.type ? getPatternByType(data.type) : undefined),
-    [data?.type],
-  );
-
-  const componentMeta = patternForType?.meta;
-
-  const entries = useMemo(
-    () =>
-      Object.entries(schema).filter(([, type]) =>
-        typeof type === 'string' ? type !== 'never' : true,
-      ),
-    [schema],
-  );
-
-  const visibleEntries = useMemo(() => {
-    if (!componentMeta?.hideAllAttributes) return entries;
-    return entries.filter(([name]) => {
-      const meta = attributeMeta?.[name];
-      return meta?.forceVisible === true || meta?.override === true;
-    });
-  }, [attributeMeta, componentMeta?.hideAllAttributes, entries]);
-
-  const componentTitle = componentMeta?.label ?? data?.type ?? 'Component';
-  const componentDescription = componentMeta?.description;
-
-  const mockableFeatureKeys = useMemo(() => {
-    const mockable = componentMeta?.mockableFeatures;
-    if (!mockable || typeof mockable !== 'object') return [];
-    return Object.entries(mockable)
-      .filter(([, enabled]) => enabled === true)
-      .map(([key]) => key)
-      .filter((key) => typeof key === 'string' && key.trim().length > 0)
-      .sort((a, b) => a.localeCompare(b));
-  }, [componentMeta?.mockableFeatures]);
-
-  const [activeMockableFeature, setActiveMockableFeature] = useState<
-    string | null
-  >(null);
-
-  const [activeIconField, setActiveIconField] = useState<string | null>(null);
-
-  const headerSection = (
-    <div className="attributes-editor__component-meta">
-      <p className="attributes-editor__component-title">{componentTitle}</p>
-      {componentDescription ? (
-        <p className="attributes-editor__component-description">
-          {componentDescription}
-        </p>
-      ) : null}
-    </div>
-  );
-
-  const mockableSection =
-    mockableFeatureKeys.length > 0 ? (
-      <section className="attributes-editor__mockable">
-        <p className="attributes-editor__mockable-title">Mockable</p>
-        <table className="attributes-editor__mockable-table">
-          <tbody>
-            {mockableFeatureKeys.map((key) => (
-              <tr key={key} className="attributes-editor__mockable-row">
-                <td className="attributes-editor__mockable-name">{key}</td>
-                <td className="attributes-editor__mockable-action">
-                  <button
-                    type="button"
-                    className="editor-button"
-                    onClick={() => setActiveMockableFeature(key)}
-                  >
-                    {key}
-                  </button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </section>
-    ) : null;
-
-  const { grouped, specialGroups } = useMemo(() => {
-    const groups: Record<TabId, SchemaEntry[]> = {
-      style: [],
-      container: [],
-      other: [],
-    };
-    const specials: Record<string, SchemaEntry[]> = {};
-
-    const getSortOrder = (name: string) =>
-      attributeMeta?.[name]?.sort ?? Number.MAX_SAFE_INTEGER;
-    const compareEntries = (a: SchemaEntry, b: SchemaEntry) => {
-      const order = getSortOrder(a.name) - getSortOrder(b.name);
-      return order !== 0 ? order : a.name.localeCompare(b.name);
-    };
-
-    visibleEntries.forEach(([name, type]) => {
-      const meta = attributeMeta?.[name];
-      const specialCategory = meta?.specialCategory;
-      if (typeof specialCategory === 'string') {
-        const normalizedSpecialCategory = specialCategory.trim();
-        if (normalizedSpecialCategory) {
-          if (!specials[normalizedSpecialCategory]) {
-            specials[normalizedSpecialCategory] = [];
-          }
-          specials[normalizedSpecialCategory].push({ name, type });
-          return;
-        }
-      }
-
-      const metaCategory = meta?.category;
-      const normalized =
-        metaCategory === 'style'
-          ? 'style'
-          : metaCategory === 'container'
-            ? 'container'
-            : 'other';
-      groups[normalized].push({ name, type });
-    });
-
-    Object.values(groups).forEach((list) => {
-      list.sort(compareEntries);
-    });
-
-    Object.values(specials).forEach((list) => {
-      list.sort(compareEntries);
-    });
-
-    return { grouped: groups, specialGroups: specials };
-  }, [attributeMeta, visibleEntries]);
-
-  const specialSectionsByTab = useMemo<Record<TabId, SpecialSection[]>>(() => {
-    const buckets: Record<TabId, SpecialSection[]> = {
-      style: [],
-      container: [],
-      other: [],
-    };
-
-    const compareSections = (a: SpecialSection, b: SpecialSection) => {
-      const aSort = a.meta?.sort ?? Number.MAX_SAFE_INTEGER;
-      const bSort = b.meta?.sort ?? Number.MAX_SAFE_INTEGER;
-      const order = aSort - bSort;
-      return order !== 0 ? order : a.key.localeCompare(b.key);
-    };
-
-    Object.entries(specialGroups).forEach(([categoryKey, categoryEntries]) => {
-      if (!categoryEntries.length) return;
-      const metaForCategory = componentMeta?.specialCategories?.[categoryKey];
-      const targetCategory = (
-        metaForCategory?.category === 'style'
-          ? 'style'
-          : metaForCategory?.category === 'container'
-            ? 'container'
-            : 'other'
-      ) as TabId;
-      buckets[targetCategory].push({
-        key: categoryKey,
-        entries: categoryEntries,
-        meta: metaForCategory,
-      });
-    });
-
-    (Object.keys(buckets) as TabId[]).forEach((tabId) => {
-      buckets[tabId].sort(compareSections);
-    });
-
-    return buckets;
-  }, [componentMeta?.specialCategories, specialGroups]);
-
-  const handleAttributeChange = useCallback(
-    (name: string, val: unknown) => {
-      const prevAttrs =
-        ((baseData?.attributes ?? {}) as Record<string, unknown>) ?? {};
-      const isStyleKey = styleAttributeKeys.has(name);
-      const nextAttrs: Record<string, unknown> = { ...prevAttrs };
-      if (isStyleKey) {
-        const prevStyle = (
-          isPlainObject(nextAttrs.style) ? nextAttrs.style : {}
-        ) as Record<string, unknown>;
-        nextAttrs.style = { ...prevStyle, [name]: val };
-        // Normalize away legacy flat style keys once edited.
-        if (name in nextAttrs) delete nextAttrs[name];
-      } else {
-        nextAttrs[name] = val;
-      }
-      const next: NodeData<NodeDefaultAttribute> = {
-        ...baseData,
-        attributes: nextAttrs as NodeDefaultAttribute,
-      };
-      onChange(next);
-    },
-    [baseData, onChange, styleAttributeKeys],
-  );
-
-  const renderIconTypeField = useCallback(
-    (name: string, currentValue: unknown) => {
-      const normalized =
-        typeof currentValue === 'string'
-          ? (currentValue as IconsType)
-          : undefined;
-      return (
-        <>
-          <button
-            type="button"
-            onClick={() => setActiveIconField(name)}
-            style={{
-              width: '100%',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              gap: 8,
-              borderRadius: 6,
-              border: '1px solid #ddd',
-              padding: '8px 10px',
-              background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
-              cursor: 'pointer',
-            }}
-          >
-            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              {normalized ? <Icon iconType={normalized} size={18} /> : null}
-              <span style={{ fontWeight: 500 }}>
-                {normalized ?? 'Select icon'}
-              </span>
-            </span>
-            <span style={{ fontSize: 12, color: '#666' }}>Open</span>
-          </button>
-
-          {activeIconField === name ? (
-            <IconPickerModal
-              value={normalized}
-              onSelect={(iconName) => {
-                handleAttributeChange(name, iconName);
-                setActiveIconField(null);
-              }}
-              onClose={() => setActiveIconField(null)}
-              onClear={() => {
-                handleAttributeChange(name, undefined);
-                setActiveIconField(null);
-              }}
-            />
-          ) : null}
-        </>
-      );
-    },
-    [activeIconField, handleAttributeChange],
-  );
-
-  const renderFontFamilyField = useCallback(
-    (name: string, currentValue: unknown) => {
-      const normalized =
-        typeof currentValue === 'string' && currentValue.trim().length > 0
-          ? currentValue.trim()
-          : undefined;
-      const fontsList = Array.isArray(projectFonts) ? projectFonts : [];
-      const loaded = Array.isArray(loadedFonts) ? loadedFonts : [];
-      const isOpen = activeFontField === name;
-      return (
-        <>
-          <button
-            type="button"
-            onClick={() => {
-              setFontLoadError(null);
-              setActiveFontField(name);
-            }}
-            style={{
-              width: '100%',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              gap: 8,
-              borderRadius: 6,
-              border: '1px solid #ddd',
-              padding: '8px 10px',
-              background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
-              cursor: 'pointer',
-            }}
-          >
-            <span style={{ flex: 1, textAlign: 'left', fontWeight: 500 }}>
-              {normalized ?? 'Select font'}
-            </span>
-            <span style={{ fontSize: 12, color: '#666' }}>Open</span>
-          </button>
-
-          {isOpen ? (
-            <Modal
-              ariaLabelledBy="font-family-picker-title"
-              onClose={() => {
-                if (isFontLoading) return;
-                setActiveFontField(null);
-              }}
-              closeOnOverlayClick={!isFontLoading}
-              closeOnEsc={!isFontLoading}
-            >
-              <div style={{ display: 'grid', gap: 12 }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <p
-                    id="font-family-picker-title"
-                    style={{ margin: 0, fontWeight: 700 }}
-                  >
-                    Select Font
-                  </p>
-                  <div style={{ flex: 1 }} />
-                  <button
-                    type="button"
-                    className="editor-button"
-                    onClick={() => {
-                      handleAttributeChange(name, undefined);
-                      setFontLoadError(null);
-                      setActiveFontField(null);
-                    }}
-                    disabled={isFontLoading}
-                  >
-                    Clear
-                  </button>
-                  <button
-                    type="button"
-                    className="editor-button"
-                    onClick={() => setActiveFontField(null)}
-                    disabled={isFontLoading}
-                  >
-                    Close
-                  </button>
-                </div>
-
-                {isFontLoading ? (
-                  <div style={{ fontSize: 12, color: '#666' }}>
-                    Loading font…
-                  </div>
-                ) : null}
-                {fontLoadError ? (
-                  <div style={{ fontSize: 12, color: '#b00020' }}>
-                    {fontLoadError}
-                  </div>
-                ) : null}
-
-                <div style={{ fontSize: 12, color: '#666' }}>
-                  {fontsList.length} fonts
-                </div>
-
-                <div
-                  style={{
-                    display: 'grid',
-                    gridTemplateColumns:
-                      'repeat(auto-fill, minmax(180px, 1fr))',
-                    gap: 8,
-                    maxHeight: '60vh',
-                    overflow: 'auto',
-                    paddingRight: 4,
-                  }}
-                >
-                  {fontsList.map((font) => {
-                    const fontName = font?.name;
-                    if (typeof fontName !== 'string' || !fontName.trim()) {
-                      return null;
-                    }
-                    const familyName = fontName.trim();
-                    const isActive = normalized === familyName;
-                    const isLoaded = loaded.includes(familyName);
-                    return (
-                      <button
-                        key={familyName}
-                        type="button"
-                        disabled={isFontLoading}
-                        onClick={async () => {
-                          fontsDebug.info(
-                            'AttributesEditor: select fontFamily',
-                            {
-                              field: name,
-                              familyName,
-                              wasLoaded: isLoaded,
-                            },
-                          );
-                          setFontLoadError(null);
-                          handleAttributeChange(name, familyName);
-                          if (isLoaded) return;
-                          setIsFontLoading(true);
-                          try {
-                            fontsDebug.info(
-                              'AttributesEditor: loadFontFamily start',
-                              { familyName },
-                            );
-                            await loadFontFamily(fontsList, familyName, {
-                              forceFetch: true,
-                            });
-                            markFontLoaded(familyName);
-                            fontsDebug.info(
-                              'AttributesEditor: loadFontFamily success',
-                              { familyName },
-                            );
-                          } catch (e) {
-                            const msg =
-                              e instanceof Error ? e.message : String(e);
-                            setFontLoadError(
-                              `Failed to load "${familyName}": ${msg}`,
-                            );
-                            addError(
-                              `Failed to load font "${familyName}": ${msg}`,
-                            );
-                            fontsDebug.compactError(
-                              'AttributesEditor: loadFontFamily failed',
-                              e,
-                              { familyName },
-                            );
-                          } finally {
-                            setIsFontLoading(false);
-                          }
-                        }}
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'space-between',
-                          gap: 8,
-                          borderRadius: 8,
-                          border: isActive
-                            ? '2px solid #222'
-                            : '1px solid #ddd',
-                          padding: '8px 10px',
-                          background:
-                            'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
-                          cursor: isFontLoading ? 'not-allowed' : 'pointer',
-                        }}
-                        aria-label={`Select font ${familyName}`}
-                      >
-                        <span
-                          style={{
-                            fontSize: 12,
-                            fontWeight: isActive ? 700 : 500,
-                            textAlign: 'left',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                          }}
-                          title={familyName}
-                        >
-                          {familyName}
-                        </span>
-                        <span style={{ fontSize: 11, color: '#666' }}>
-                          {isLoaded ? 'Loaded' : 'Not loaded'}
-                        </span>
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-            </Modal>
-          ) : null}
-        </>
-      );
-    },
-    [
-      activeFontField,
-      addError,
-      handleAttributeChange,
-      isFontLoading,
-      loadedFonts,
-      markFontLoaded,
-      projectFonts,
-      fontLoadError,
-    ],
-  );
-
-  const handleChildrenChange = useCallback(
-    (val: string) => {
-      const next: NodeData<NodeDefaultAttribute> = {
-        ...baseData,
-        children: val,
-      };
-      onChange(next);
-    },
-    [baseData, onChange],
-  );
-
-  const renderSpecialSection = useCallback(
-    ({ key, entries: sectionEntries, meta }: SpecialSection) => {
-      if (key === 'size') {
-        const normalizedTitle =
-          meta?.label && meta.label.trim().length > 0
-            ? meta.label
-            : key.charAt(0).toUpperCase() + key.slice(1);
-        const normalizedDescription = meta?.description;
-        const orderedEntries = [...sectionEntries].sort((a, b) => {
-          const preferredOrder = [
-            'width',
-            'height',
-            'minWidth',
-            'minHeight',
-            'maxWidth',
-            'maxHeight',
-          ];
-          const aIndex = preferredOrder.indexOf(a.name);
-          const bIndex = preferredOrder.indexOf(b.name);
-          const aRank = aIndex === -1 ? Number.MAX_SAFE_INTEGER : aIndex;
-          const bRank = bIndex === -1 ? Number.MAX_SAFE_INTEGER : bIndex;
-          return aRank !== bRank ? aRank - bRank : a.name.localeCompare(b.name);
-        });
-        return (
-          <section key={key} className="special-category-section">
-            <div className="special-category-section__header">
-              <p className="special-category-section__title">
-                {normalizedTitle}
-              </p>
-            </div>
-            {normalizedDescription ? (
-              <p className="special-category-section__description">
-                {normalizedDescription}
-              </p>
-            ) : null}
-            <div className="attributes-editor__size-grid">
-              {orderedEntries.map(({ name, type }) => {
-                const label = attributeMeta?.[name]?.label ?? name;
-                const description = attributeMeta?.[name]?.description;
-                const preferredScale = toPreferredScale(
-                  attributeMeta?.[name]?.preferedScale,
-                );
-                const currentValue = getAttributeValue(name);
-                const isBoolean = isBooleanFieldType(type);
-                const wrapperClassNames = [
-                  'attributes-editor__field-wrapper',
-                  isBoolean ? 'attributes-editor__field-wrapper--boolean' : '',
-                ]
-                  .filter(Boolean)
-                  .join(' ');
-                return (
-                  <FieldInfoTooltip key={name} description={description}>
-                    <div
-                      className={`${wrapperClassNames} attributes-editor__size-grid-item`}
-                    >
-                      {!isBoolean ? (
-                        <p className="attributes-editor__field-label">
-                          {label}
-                        </p>
-                      ) : null}
-                      {type === 'iconType' ? (
-                        renderIconTypeField(name, currentValue)
-                      ) : type === 'fontFamily' ? (
-                        renderFontFamilyField(name, currentValue)
-                      ) : (
-                        <Field
-                          name={name}
-                          type={type}
-                          value={currentValue}
-                          onChange={(val) => handleAttributeChange(name, val)}
-                          componentType={data?.type}
-                          projectColors={projectColorsForPicker}
-                          layoutContext={layoutContext}
-                          viewAttributes={viewAttributes}
-                          label={isBoolean ? label : undefined}
-                          preferredScale={preferredScale}
-                        />
-                      )}
-                    </div>
-                  </FieldInfoTooltip>
-                );
-              })}
-            </div>
-          </section>
-        );
-      }
-      return (
-        <SpecialCategorySection
-          key={key}
-          category={key}
-          entries={sectionEntries}
-          attributeMeta={attributeMeta}
-          attributes={attributes}
-          onAttributeChange={handleAttributeChange}
-          componentType={data?.type}
-          projectColors={projectColorsForPicker}
-          layoutContext={layoutContext}
-          viewAttributes={viewAttributes}
-          meta={meta}
-        />
-      );
-    },
-    [
-      attributeMeta,
-      attributes,
-      data?.type,
-      handleAttributeChange,
-      layoutContext,
-      projectColorsForPicker,
-      renderIconTypeField,
-      viewAttributes,
-    ],
-  );
-
-  const tabs = useMemo<TabConfig[]>(
-    () => [
-      { id: 'container', label: 'Container', entries: grouped.container },
-      { id: 'style', label: 'Styles', entries: grouped.style },
-      { id: 'other', label: 'Others', entries: grouped.other },
-    ],
-    [grouped],
-  );
-
-  const tabContentInfo = useMemo<TabContentInfo>(() => {
-    const info: TabContentInfo = {
-      style: { baseCount: 0, specialCount: 0 },
-      container: { baseCount: 0, specialCount: 0 },
-      other: { baseCount: 0, specialCount: 0 },
-    };
-
-    tabs.forEach((tab) => {
-      info[tab.id].baseCount = tab.entries.length;
-    });
-
-    (Object.keys(specialSectionsByTab) as TabId[]).forEach((tabId) => {
-      info[tabId].specialCount = specialSectionsByTab[tabId].reduce(
-        (sum, section) => sum + section.entries.length,
-        0,
-      );
-    });
-
-    return info;
-  }, [specialSectionsByTab, tabs]);
-
-  const firstAvailableTab = useMemo<TabId>(
-    () =>
-      tabs.find((tab) => {
-        const counts = tabContentInfo[tab.id];
-        return counts.baseCount + counts.specialCount > 0;
-      })?.id ?? 'other',
-    [tabContentInfo, tabs],
-  );
-
-  const [activeTab, setActiveTab] = useState<TabId>(firstAvailableTab);
-
-  useEffect(() => {
-    setActiveTab((prev) => {
-      const counts = tabContentInfo[prev];
-      if (counts && counts.baseCount + counts.specialCount > 0) {
-        return prev;
-      }
-      return firstAvailableTab;
-    });
-  }, [firstAvailableTab, tabContentInfo]);
-
-  const activeEntries =
-    tabs.find((tab) => tab.id === activeTab)?.entries ??
-    tabs.find((tab) => tab.id === firstAvailableTab)?.entries ??
-    [];
-
-  const activeSpecialSections = specialSectionsByTab[activeTab] ?? [];
-
-  const hasStringChildren =
-    !!patternForType?.pattern &&
-    (patternForType.pattern as { children?: unknown }).children === 'string';
-
-  const childrenValue =
-    typeof (baseData.children as unknown) === 'string'
-      ? (baseData.children as string)
-      : '';
-
-  const childrenSection = hasStringChildren ? (
-    <div className="attributes-editor__field-wrapper attributes-editor__field-wrapper--children">
-      <p className="attributes-editor__field-label">Text</p>
-      <input
-        type="text"
-        className="attributes-editor__text-input"
-        value={childrenValue}
-        onChange={(e) => handleChildrenChange(e.target.value)}
-      />
-    </div>
-  ) : null;
-
-  const tabsSection = (
-    <div className="attributes-editor__tabs">
-      {tabs.map((tab) => {
-        const isActive = tab.id === activeTab;
-        const counts = tabContentInfo[tab.id];
-        const totalCount = counts.baseCount + counts.specialCount;
-        const disabled = totalCount === 0;
-        const buttonClassNames = [
-          'attributes-editor__tab-button',
-          isActive ? 'attributes-editor__tab-button--active' : '',
-        ]
-          .filter(Boolean)
-          .join(' ');
-        return (
-          <button
-            key={tab.id}
-            type="button"
-            onClick={() => !disabled && setActiveTab(tab.id)}
-            disabled={disabled}
-            className={buttonClassNames}
-          >
-            {tab.label}
-            {totalCount > 0 ? ` (${totalCount})` : ''}
-          </button>
-        );
-      })}
-    </div>
-  );
-
-  if (visibleEntries.length === 0) {
-    return (
-      <div className="attributes-editor">
-        {headerSection}
-        {mockableSection}
-        {tabsSection}
-        {childrenSection}
-        {activeSpecialSections.map(renderSpecialSection)}
-        <div className="attributes-editor__empty-state">
-          No editable attributes
-        </div>
-        {activeMockableFeature ? (
-          <MockableFeatureModal
-            featureKey={activeMockableFeature}
-            onClose={() => setActiveMockableFeature(null)}
-          />
-        ) : null}
-      </div>
-    );
-  }
-
-  return (
-    <div className="attributes-editor">
-      {headerSection}
-      {mockableSection}
-      {tabsSection}
-      {childrenSection}
-      {activeSpecialSections.map(renderSpecialSection)}
-
-      {activeEntries.map(({ name, type }) => {
-        const label = attributeMeta?.[name]?.label ?? name;
-        const description = attributeMeta?.[name]?.description;
-        const preferredScale = toPreferredScale(
-          attributeMeta?.[name]?.preferedScale,
-        );
-        const isBoolean = isBooleanFieldType(type);
-        const wrapperClassNames = [
-          'attributes-editor__field-wrapper',
-          isBoolean ? 'attributes-editor__field-wrapper--boolean' : '',
-        ]
-          .filter(Boolean)
-          .join(' ');
-        return (
-          <FieldInfoTooltip key={name} description={description}>
-            <div className={wrapperClassNames}>
-              {!isBoolean ? (
-                <p className="attributes-editor__field-label">{label}</p>
-              ) : null}
-              {type === 'iconType' ? (
-                renderIconTypeField(name, getAttributeValue(name))
-              ) : type === 'fontFamily' ? (
-                renderFontFamilyField(name, getAttributeValue(name))
-              ) : (
-                <Field
-                  name={name}
-                  type={type}
-                  value={getAttributeValue(name)}
-                  onChange={(val) => handleAttributeChange(name, val)}
-                  componentType={data?.type}
-                  projectColors={projectColorsForPicker}
-                  layoutContext={layoutContext}
-                  viewAttributes={viewAttributes}
-                  label={isBoolean ? label : undefined}
-                  preferredScale={preferredScale}
-                />
-              )}
-            </div>
-          </FieldInfoTooltip>
-        );
-      })}
-      {activeMockableFeature ? (
-        <MockableFeatureModal
-          featureKey={activeMockableFeature}
-          onClose={() => setActiveMockableFeature(null)}
-        />
-      ) : null}
-    </div>
-  );
+  const model = useAttributesEditorModel(props);
+  return <AttributesEditorView {...model} />;
 }
 
-export default React.memo(AttributesEditor);
+//Optimzation trade off by readability: split into model/view/utils modules to keep each file small and semantically focused.