@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/AttributesEditor.tsx

@@ -1,347 +1,947 @@
-import React from 'react';
+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 { useLogRender } from './utils/useLogRender';
 import {
+  getAttributeMeta,
   getAttributeSchema,
-  getTypeSchema,
-  getArrayItemType,
-  isPrimitiveType,
+  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';
 
 type AttributesEditorProps = {
   node: Node;
   onChange: (next: Node) => void;
+  projectColors?: ProjectColors;
 };
 
-function Field({
-  name,
-  type,
-  value,
-  onChange,
-  componentType,
-}: {
-  name: string;
-  type: string | string[];
-  value: any;
-  onChange: (v: any) => void;
-  // The current node's component type is needed to resolve custom type schemas
-  componentType?: string;
-}) {
-  // Render enum selector
-  if (Array.isArray(type)) {
-    return (
-      <select
-        value={value ?? ''}
-        onChange={(e) => onChange(e.target.value)}
-        className="input"
-      >
-        <option value="">(none)</option>
-        {type.map((opt) => (
-          <option key={opt} value={opt}>
-            {opt}
-          </option>
-        ))}
-      </select>
-    );
+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) {
+  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;
 
-  // Arrays: detect X[] (including string[]/number[]/boolean[]/CustomType[])
-  const itemType = typeof type === 'string' ? getArrayItemType(type) : null;
-  if (itemType) {
-    const arr: any[] = Array.isArray(value) ? value : [];
+  const { grouped, specialGroups } = useMemo(() => {
+    const groups: Record<TabId, SchemaEntry[]> = {
+      style: [],
+      container: [],
+      other: [],
+    };
+    const specials: Record<string, SchemaEntry[]> = {};
 
-    // Primitive arrays with add/remove controls
-    if (isPrimitiveType(itemType)) {
+    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 (
-        <div style={{ display: 'grid', gap: 8 }}>
-          {arr.map((item, idx) => (
-            <div
-              key={idx}
-              style={{ display: 'flex', gap: 8, alignItems: 'center' }}
-            >
-              {itemType === 'number' ? (
-                <input
-                  type="number"
-                  value={item ?? ''}
-                  onChange={(e) => {
-                    const next = [...arr];
-                    next[idx] =
-                      e.target.value === ''
-                        ? undefined
-                        : Number(e.target.value);
-                    onChange(next);
-                  }}
-                  className="input"
-                  style={{ flex: 1 }}
-                />
-              ) : itemType === 'boolean' ? (
-                <input
-                  type="checkbox"
-                  checked={Boolean(item)}
-                  onChange={(e) => {
-                    const next = [...arr];
-                    next[idx] = e.target.checked;
-                    onChange(next);
-                  }}
-                />
-              ) : (
-                <input
-                  type="text"
-                  value={item ?? ''}
-                  onChange={(e) => {
-                    const next = [...arr];
-                    next[idx] =
-                      e.target.value === '' ? undefined : e.target.value;
-                    onChange(next);
-                  }}
-                  className="input"
-                  style={{ flex: 1 }}
-                />
-              )}
-              <button
-                type="button"
-                onClick={() => {
-                  const next = arr.filter((_, i) => i !== idx);
-                  onChange(next.length ? next : undefined);
-                }}
-              >
-                remove
-              </button>
-            </div>
-          ))}
-          <div>
-            <button
-              type="button"
-              onClick={() => {
-                const next = [
-                  ...arr,
-                  itemType === 'boolean'
-                    ? false
-                    : itemType === 'number'
-                      ? 0
-                      : '',
-                ];
-                onChange(next);
+        <>
+          <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);
               }}
-            >
-              add
-            </button>
-          </div>
-        </div>
+              onClose={() => setActiveIconField(null)}
+              onClear={() => {
+                handleAttributeChange(name, undefined);
+                setActiveIconField(null);
+              }}
+            />
+          ) : null}
+        </>
       );
-    }
+    },
+    [activeIconField, handleAttributeChange],
+  );
 
-    // Object arrays with nested editors
-    const schema = getTypeSchema(componentType, itemType) ?? {};
-    return (
-      <div style={{ display: 'grid', gap: 8 }}>
-        {arr.map((item, idx) => {
-          const obj = (item ?? {}) as Record<string, unknown>;
-          return (
-            <div
-              key={idx}
-              style={{ border: '1px solid #ddd', borderRadius: 6, padding: 8 }}
-            >
-              <div
-                style={{
-                  display: 'grid',
-                  gridTemplateColumns: '1fr 1fr',
-                  gap: 8,
-                }}
-              >
-                {Object.entries(schema).map(([fieldName, fieldType]) => (
-                  <React.Fragment key={fieldName}>
-                    <div style={{ alignSelf: 'center' }}>{fieldName}</div>
-                    <Field
-                      name={fieldName}
-                      type={fieldType}
-                      value={obj?.[fieldName as keyof typeof obj]}
-                      onChange={(val) => {
-                        const next = [...arr];
-                        const nextObj = { ...(obj ?? {}), [fieldName]: val };
-                        next[idx] = nextObj;
-                        onChange(next);
-                      }}
-                      componentType={componentType}
-                    />
-                  </React.Fragment>
-                ))}
-              </div>
-              <div style={{ marginTop: 8 }}>
-                <button
-                  type="button"
-                  onClick={() => {
-                    const next = arr.filter((_, i) => i !== idx);
-                    onChange(next.length ? next : undefined);
-                  }}
-                >
-                  remove
-                </button>
-              </div>
-            </div>
-          );
-        })}
-        <div>
+  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={() => {
-              const empty: Record<string, unknown> = {};
-              const next = [...arr, empty];
-              onChange(next);
+              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',
             }}
           >
-            add
+            <span style={{ flex: 1, textAlign: 'left', fontWeight: 500 }}>
+              {normalized ?? 'Select font'}
+            </span>
+            <span style={{ fontSize: 12, color: '#666' }}>Open</span>
           </button>
-        </div>
-      </div>
-    );
-  }
 
-  // Non-array complex object types defined under pattern `types`
-  if (typeof type === 'string' && !isPrimitiveType(type)) {
-    const schema = getTypeSchema(componentType, type);
-    if (schema) {
-      const obj = (value ?? {}) as Record<string, unknown>;
+          {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 (
-        <div
-          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}
-        >
-          {Object.entries(schema).map(([fieldName, fieldType]) => (
-            <React.Fragment key={fieldName}>
-              <div style={{ alignSelf: 'center' }}>{fieldName}</div>
-              <Field
-                name={fieldName}
-                type={fieldType}
-                value={obj?.[fieldName as keyof typeof obj]}
-                onChange={(val) => {
-                  const nextObj = { ...(obj ?? {}), [fieldName]: val };
-                  onChange(nextObj);
-                }}
-                componentType={componentType}
-              />
-            </React.Fragment>
-          ))}
-        </div>
+        <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,
+    ],
+  );
 
-  if (type === 'number') {
-    return (
-      <input
-        type="number"
-        value={value ?? ''}
-        onChange={(e) =>
-          onChange(e.target.value === '' ? undefined : Number(e.target.value))
-        }
-        className="input"
-      />
-    );
-  }
-  if (type === 'boolean') {
-    return (
+  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="checkbox"
-        checked={Boolean(value)}
-        onChange={(e) => onChange(e.target.checked)}
+        type="text"
+        className="attributes-editor__text-input"
+        value={childrenValue}
+        onChange={(e) => handleChildrenChange(e.target.value)}
       />
-    );
-  }
-  // Legacy support: string[]
-  if (type === 'string[]') {
-    const arr: string[] = Array.isArray(value) ? value : [];
-    return (
-      <div style={{ display: 'grid', gap: 8 }}>
-        {arr.map((item, idx) => (
-          <div
-            key={idx}
-            style={{ display: 'flex', gap: 8, alignItems: 'center' }}
-          >
-            <input
-              type="text"
-              value={item ?? ''}
-              onChange={(e) => {
-                const next = [...arr];
-                next[idx] = e.target.value;
-                onChange(next);
-              }}
-              className="input"
-              style={{ flex: 1 }}
-            />
-            <button
-              type="button"
-              onClick={() => {
-                const next = arr.filter((_, i) => i !== idx);
-                onChange(next.length ? next : undefined);
-              }}
-            >
-              remove
-            </button>
-          </div>
-        ))}
-        <div>
+    </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={() => {
-              const next = [...arr, ''];
-              onChange(next);
-            }}
+            onClick={() => !disabled && setActiveTab(tab.id)}
+            disabled={disabled}
+            className={buttonClassNames}
           >
-            add
+            {tab.label}
+            {totalCount > 0 ? ` (${totalCount})` : ''}
           </button>
-        </div>
-      </div>
-    );
-  }
-  return (
-    <input
-      type="text"
-      value={value ?? ''}
-      onChange={(e) =>
-        onChange(e.target.value === '' ? undefined : e.target.value)
-      }
-      className="input"
-    />
+        );
+      })}
+    </div>
   );
-}
 
-export function AttributesEditor({ node, onChange }: AttributesEditorProps) {
-  if (!node || isNodeString(node)) return null;
-  const data = node as NodeData<NodeDefaultAttribute>;
-  const schema = getAttributeSchema(data?.type) ?? {};
-  const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
-
-  const entries = Object.entries(schema);
-  if (entries.length === 0) {
+  if (visibleEntries.length === 0) {
     return (
-      <div style={{ padding: 8, opacity: 0.7 }}>No editable attributes</div>
+      <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 style={{}}>
-      {entries.map(([name, type]) => (
-        <React.Fragment key={name}>
-          <p style={{ alignSelf: 'center', marginBottom: 4, fontWeight: 700 }}>
-            {name}
-          </p>
-          <div style={{ marginBottom: 16 }}>
-            <Field
-              name={name}
-              type={type}
-              value={attributes?.[name]}
-              onChange={(val) => {
-                const next: NodeData<NodeDefaultAttribute> = {
-                  ...data,
-                  attributes: { ...(attributes ?? {}), [name]: val },
-                };
-                onChange(next);
-              }}
-              componentType={data?.type}
-            />
-          </div>
-        </React.Fragment>
-      ))}
+    <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>
   );
 }