@wordpress-gcb/fields 0.2.0 → 0.2.2

package/dist/controls/url.js

@@ -0,0 +1,235 @@
+import { BaseControl, Button, Popover, Modal, TextControl, CheckboxControl, __experimentalHStack as HStack, __experimentalSpacer as Spacer } from '@wordpress/components';
+import { useState, useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
+import { ControlContext } from '../control-context';
+
+/**
+ * URL control — stores `{ url, text, opensInNewTab }`.
+ *
+ * Two renderings of the same stored shape:
+ *   - **Sidebar context** (block Inspector): compact summary + Edit popover
+ *     that mounts the rich @wordpress/block-editor LinkControl.
+ *   - **Meta-box context** (post-fields panel): three stacked inputs
+ *     (URL, link text, open-in-new-tab checkbox). The popover-based UI
+ *     feels out of place in a wide meta-box and the LinkControl's
+ *     post/page suggestions push the popover off-screen.
+ *
+ * Both render the same data; the chooser is the `variant` field on the
+ * ControlContext provider supplied by the host (block edit.js vs the
+ * post-fields meta-box App). Default is sidebar.
+ *
+ * When wiring a React component on the frontend:
+ *   const { url, text, opensInNewTab } = link || {};
+ *   if (!url) return null;
+ *   return <a
+ *     href={url}
+ *     target={opensInNewTab ? '_blank' : undefined}
+ *     rel={opensInNewTab ? 'noopener noreferrer' : undefined}
+ *   >{text || url}</a>;
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function UrlField({
+  control,
+  value,
+  onChange
+}) {
+  const ctx = useContext(ControlContext);
+  const link = value && typeof value === 'object' ? value : {
+    url: '',
+    text: '',
+    opensInNewTab: false
+  };
+  if (ctx.variant === 'metabox') {
+    return /*#__PURE__*/_jsx(MetaboxUrl, {
+      control: control,
+      link: link,
+      onChange: onChange
+    });
+  }
+  return /*#__PURE__*/_jsx(SidebarUrl, {
+    control: control,
+    link: link,
+    onChange: onChange
+  });
+}
+function MetaboxUrl({
+  control,
+  link,
+  onChange
+}) {
+  const [editing, setEditing] = useState(false);
+  // Draft state so Cancel can discard pending edits without touching the
+  // real meta value. Seed from `link` whenever the modal opens.
+  const [draft, setDraft] = useState(link);
+  const hasUrl = !!link.url;
+  const openModal = () => {
+    setDraft(link);
+    setEditing(true);
+  };
+  const save = () => {
+    onChange({
+      url: draft.url || '',
+      text: draft.text || '',
+      opensInNewTab: !!draft.opensInNewTab
+    });
+    setEditing(false);
+  };
+  return /*#__PURE__*/_jsxs(BaseControl, {
+    label: control.label,
+    help: control.helpText,
+    __nextHasNoMarginBottom: true,
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        gap: 8,
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1,
+          fontSize: 13,
+          color: hasUrl ? '#1e1e1e' : '#757575',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        },
+        children: hasUrl ? link.text || link.url : __('No link set', 'gcblite')
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        onClick: openModal,
+        children: hasUrl ? __('Edit', 'gcblite') : __('Set link', 'gcblite')
+      }), hasUrl && /*#__PURE__*/_jsx(Button, {
+        variant: "tertiary",
+        isDestructive: true,
+        onClick: () => onChange({
+          url: '',
+          text: '',
+          opensInNewTab: false
+        }),
+        children: __('Clear', 'gcblite')
+      })]
+    }), editing && /*#__PURE__*/_jsxs(Modal, {
+      title: control.label || __('Edit link', 'gcblite'),
+      onRequestClose: () => setEditing(false),
+      size: "medium",
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'grid',
+          gap: 16
+        },
+        children: [/*#__PURE__*/_jsx(TextControl, {
+          label: __('URL', 'gcblite'),
+          value: draft.url || '',
+          onChange: url => setDraft({
+            ...draft,
+            url
+          }),
+          placeholder: "https://example.com",
+          type: "url",
+          __nextHasNoMarginBottom: true,
+          __next40pxDefaultSize: true
+        }), /*#__PURE__*/_jsx(TextControl, {
+          label: __('Link text', 'gcblite'),
+          value: draft.text || '',
+          onChange: text => setDraft({
+            ...draft,
+            text
+          }),
+          placeholder: draft.url || __('Optional display label', 'gcblite'),
+          __nextHasNoMarginBottom: true,
+          __next40pxDefaultSize: true
+        }), /*#__PURE__*/_jsx(CheckboxControl, {
+          label: __('Open in new tab', 'gcblite'),
+          checked: !!draft.opensInNewTab,
+          onChange: opensInNewTab => setDraft({
+            ...draft,
+            opensInNewTab
+          }),
+          __nextHasNoMarginBottom: true
+        })]
+      }), /*#__PURE__*/_jsx(Spacer, {
+        marginTop: 6
+      }), /*#__PURE__*/_jsxs(HStack, {
+        justify: "flex-end",
+        spacing: 3,
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "tertiary",
+          onClick: () => setEditing(false),
+          children: __('Cancel', 'gcblite')
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          onClick: save,
+          children: __('Save link', 'gcblite')
+        })]
+      })]
+    })]
+  });
+}
+function SidebarUrl({
+  control,
+  link,
+  onChange
+}) {
+  const [editing, setEditing] = useState(false);
+  const hasUrl = !!link.url;
+  return /*#__PURE__*/_jsxs(BaseControl, {
+    label: control.label,
+    help: control.helpText,
+    __nextHasNoMarginBottom: true,
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        gap: 8,
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          flex: 1,
+          fontSize: 12,
+          color: hasUrl ? '#1e1e1e' : '#757575',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        },
+        children: hasUrl ? link.text || link.url : __('No link set', 'gcblite')
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        size: "small",
+        onClick: () => setEditing(e => !e),
+        children: hasUrl ? __('Edit', 'gcblite') : __('Set link', 'gcblite')
+      }), hasUrl && /*#__PURE__*/_jsx(Button, {
+        variant: "tertiary",
+        size: "small",
+        isDestructive: true,
+        onClick: () => onChange({
+          url: '',
+          text: '',
+          opensInNewTab: false
+        }),
+        children: __('Clear', 'gcblite')
+      })]
+    }), editing && /*#__PURE__*/_jsx(Popover, {
+      onClose: () => setEditing(false),
+      placement: "bottom-start",
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          width: 320,
+          padding: 8
+        },
+        children: /*#__PURE__*/_jsx(LinkControl, {
+          value: link,
+          onChange: next => onChange({
+            url: next.url || '',
+            text: next.title || link.text || '',
+            opensInNewTab: !!next.opensInNewTab
+          }),
+          settings: [{
+            id: 'opensInNewTab',
+            title: __('Open in new tab', 'gcblite')
+          }]
+        })
+      })
+    })]
+  });
+}

package/dist/controls/user.js

@@ -0,0 +1,383 @@
+/**
+ * UserField — ported from the original GCB.
+ *
+ * Single OR multiple user selection (control.multiple). Stored as ID(s) or
+ * full user object(s) (control.returnFormat). Drag-and-drop reordering for
+ * multi-select.
+ */
+
+import { __ } from '@wordpress/i18n';
+import { Button, TextControl } from '@wordpress/components';
+import PopoverOrModal from './PopoverOrModal';
+import { useState, useEffect, useMemo, useCallback } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import { DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragOverlay } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TOGGLE_BUTTON_STYLE = {
+  width: '100%',
+  height: 'auto',
+  padding: '12px',
+  justifyContent: 'flex-start',
+  border: '1px solid #ddd',
+  borderRadius: '2px',
+  backgroundColor: '#fff'
+};
+function UserIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    style: {
+      marginRight: 8,
+      flexShrink: 0,
+      opacity: 0.6
+    },
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+    })
+  });
+}
+function SortableUserItem({
+  user,
+  onRemove
+}) {
+  const {
+    attributes: dndAttributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: user.id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: setNodeRef,
+    style: style,
+    className: "gcb-post-object-selected-item",
+    ...dndAttributes,
+    ...listeners,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "gcb-post-object-drag-handle",
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 20 20",
+        width: "12",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+        })
+      })
+    }), /*#__PURE__*/_jsx(UserIcon, {}), /*#__PURE__*/_jsx("span", {
+      style: {
+        flex: 1,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        userSelect: 'none'
+      },
+      children: user.name || __('(no name)', 'gcblite')
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: e => {
+        e.stopPropagation();
+        onRemove(user.id);
+      },
+      onPointerDown: e => e.stopPropagation(),
+      className: "gcb-sortable-remove",
+      "aria-label": __('Remove', 'gcblite'),
+      children: /*#__PURE__*/_jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "20",
+        height: "20",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
+        })
+      })
+    })]
+  });
+}
+export default function UserField({
+  control,
+  value,
+  onChange
+}) {
+  const [allUsers, setAllUsers] = useState([]);
+  const [searchResults, setSearchResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState('');
+  const [activeId, setActiveId] = useState(null);
+  const isMultiple = !!control.multiple;
+  const selectedIds = isMultiple ? Array.isArray(value) ? value : value ? [value] : [] : value ? [value] : [];
+  const selectedUsers = useMemo(() => selectedIds.map(id => allUsers.find(u => u.id === id)).filter(Boolean), [selectedIds, allUsers]);
+  const mergeUsersIntoCache = useCallback(newUsers => {
+    setAllUsers(prev => {
+      const merged = [...prev];
+      newUsers.forEach(nu => {
+        if (!merged.find(u => u.id === nu.id)) merged.push(nu);
+      });
+      return merged;
+    });
+  }, []);
+  const loadUsers = useCallback(async (term = '') => {
+    setLoading(true);
+    try {
+      const response = await apiFetch({
+        path: `/wp/v2/users?search=${encodeURIComponent(term)}&per_page=50&_fields=id,name`
+      });
+      setSearchResults(response);
+      mergeUsersIntoCache(response);
+    } catch {
+      // ignore
+    }
+    setLoading(false);
+  }, [mergeUsersIntoCache]);
+  useEffect(() => {
+    loadUsers();
+  }, [loadUsers]);
+  const handleSelect = userId => {
+    const newIds = isMultiple ? selectedIds.includes(userId) ? selectedIds.filter(id => id !== userId) : [...selectedIds, userId] : [userId];
+    if (control.returnFormat === 'object') {
+      const objs = newIds.map(id => allUsers.find(u => u.id === id)).filter(Boolean);
+      onChange(isMultiple ? objs : objs[0] || null);
+    } else {
+      onChange(isMultiple ? newIds : newIds[0] || null);
+    }
+  };
+  const handleRemove = userId => {
+    const newIds = selectedIds.filter(id => id !== userId);
+    if (control.returnFormat === 'object') {
+      const objs = newIds.map(id => allUsers.find(u => u.id === id)).filter(Boolean);
+      onChange(isMultiple ? objs : objs[0] || null);
+    } else {
+      onChange(isMultiple ? newIds : newIds[0] || null);
+    }
+  };
+  const handleReorder = newOrder => {
+    if (control.returnFormat === 'object') {
+      onChange(newOrder.map(id => allUsers.find(u => u.id === id)).filter(Boolean));
+    } else {
+      onChange(newOrder);
+    }
+  };
+  const handleClear = () => onChange(isMultiple ? [] : null);
+  const sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 8
+    }
+  }));
+  const handleDragStart = e => setActiveId(e.active.id);
+  const handleDragCancel = () => setActiveId(null);
+  const handleDragEnd = e => {
+    const {
+      active,
+      over
+    } = e;
+    if (over && active.id !== over.id) {
+      const oldIndex = selectedIds.indexOf(active.id);
+      const newIndex = selectedIds.indexOf(over.id);
+      handleReorder(arrayMove(selectedIds, oldIndex, newIndex));
+    }
+    setActiveId(null);
+  };
+  const activeUser = activeId ? selectedUsers.find(u => u.id === activeId) : null;
+  const availableUsers = searchResults.filter(u => !selectedIds.includes(u.id));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "components-base-control gcb-user-control",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "components-base-control__field",
+      children: /*#__PURE__*/_jsx("label", {
+        className: "components-base-control__label",
+        children: control.label
+      })
+    }), control.helpText && /*#__PURE__*/_jsx("p", {
+      className: "components-base-control__help",
+      children: control.helpText
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "gcb-post-object-stacked",
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: 8,
+          alignItems: 'center'
+        },
+        children: [/*#__PURE__*/_jsx(PopoverOrModal, {
+          modalTitle: control.label || __('Select users', 'gcblite'),
+          dropdownProps: {
+            popoverProps: {
+              placement: 'left-start'
+            }
+          },
+          renderToggle: ({
+            isOpen,
+            onToggle
+          }) => /*#__PURE__*/_jsx(Button, {
+            onClick: onToggle,
+            "aria-expanded": isOpen,
+            className: "gcb-modal-toggle-button",
+            style: {
+              ...TOGGLE_BUTTON_STYLE,
+              flex: 1
+            },
+            children: selectedUsers.length > 0 ? `${selectedUsers.length} ${selectedUsers.length === 1 ? __('user', 'gcblite') : __('users', 'gcblite')} ${__('selected', 'gcblite')}` : __('Select Users', 'gcblite')
+          }),
+          renderContent: ({
+            close: onClose,
+            variant
+          }) => /*#__PURE__*/_jsxs("div", {
+            style: variant === 'modal' ? {
+              width: '100%'
+            } : {
+              minWidth: 320,
+              maxWidth: 400
+            },
+            children: [/*#__PURE__*/_jsx("div", {
+              style: {
+                padding: '0 16px 8px 16px'
+              },
+              children: /*#__PURE__*/_jsx(TextControl, {
+                value: search,
+                onChange: val => {
+                  setSearch(val);
+                  loadUsers(val);
+                },
+                placeholder: __('Search users…', 'gcblite'),
+                __nextHasNoMarginBottom: true
+              })
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "block-editor-link-control__search-results-wrapper",
+              style: {
+                maxHeight: 300,
+                overflowY: 'auto'
+              },
+              children: [loading && /*#__PURE__*/_jsx("p", {
+                style: {
+                  textAlign: 'center',
+                  color: '#757575',
+                  padding: 16
+                },
+                children: __('Loading…', 'gcblite')
+              }), !loading && availableUsers.length === 0 && /*#__PURE__*/_jsx("p", {
+                style: {
+                  textAlign: 'center',
+                  color: '#757575',
+                  padding: 16
+                },
+                children: __('No users found', 'gcblite')
+              }), !loading && availableUsers.length > 0 && /*#__PURE__*/_jsx("div", {
+                className: "block-editor-link-control__search-results",
+                role: "listbox",
+                children: /*#__PURE__*/_jsx("div", {
+                  className: "components-menu-group",
+                  children: /*#__PURE__*/_jsx("div", {
+                    role: "group",
+                    children: availableUsers.map(user => /*#__PURE__*/_jsxs("button", {
+                      type: "button",
+                      role: "option",
+                      className: "components-button components-menu-item__button block-editor-link-control__search-item",
+                      onClick: () => handleSelect(user.id),
+                      style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: '100%',
+                        padding: '8px 16px',
+                        textAlign: 'left',
+                        border: 'none',
+                        background: 'transparent'
+                      },
+                      children: [/*#__PURE__*/_jsx(UserIcon, {}), /*#__PURE__*/_jsx("span", {
+                        className: "components-menu-item__item",
+                        style: {
+                          fontWeight: 500,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap'
+                        },
+                        children: user.name
+                      })]
+                    }, user.id))
+                  })
+                })
+              })]
+            })]
+          })
+        }), selectedUsers.length > 0 && /*#__PURE__*/_jsx(Button, {
+          onClick: handleClear,
+          variant: "secondary",
+          isSmall: true,
+          className: "components-range-control__reset",
+          children: __('Reset', 'gcblite')
+        })]
+      }), selectedUsers.length > 0 && isMultiple && /*#__PURE__*/_jsx("div", {
+        className: "gcb-post-object-selected-list",
+        style: {
+          marginTop: 8
+        },
+        children: /*#__PURE__*/_jsxs(DndContext, {
+          sensors: sensors,
+          collisionDetection: closestCenter,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          onDragCancel: handleDragCancel,
+          children: [/*#__PURE__*/_jsx(SortableContext, {
+            items: selectedIds,
+            strategy: verticalListSortingStrategy,
+            children: selectedUsers.map(user => /*#__PURE__*/_jsx(SortableUserItem, {
+              user: user,
+              onRemove: handleRemove
+            }, user.id))
+          }), /*#__PURE__*/_jsx(DragOverlay, {
+            children: activeUser ? /*#__PURE__*/_jsxs("div", {
+              className: "gcb-post-object-selected-item",
+              style: {
+                opacity: 0.8,
+                boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
+              },
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "gcb-post-object-drag-handle",
+                "aria-hidden": true,
+                children: /*#__PURE__*/_jsx("svg", {
+                  viewBox: "0 0 20 20",
+                  width: "12",
+                  children: /*#__PURE__*/_jsx("path", {
+                    d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+                  })
+                })
+              }), /*#__PURE__*/_jsx(UserIcon, {}), /*#__PURE__*/_jsx("span", {
+                style: {
+                  flex: 1
+                },
+                children: activeUser.name
+              })]
+            }) : null
+          })]
+        })
+      }), selectedUsers.length > 0 && !isMultiple && /*#__PURE__*/_jsx("div", {
+        className: "gcb-post-object-selected-list",
+        style: {
+          marginTop: 8
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "gcb-post-object-selected-item",
+          children: [/*#__PURE__*/_jsx(UserIcon, {}), /*#__PURE__*/_jsx("span", {
+            style: {
+              flex: 1,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            },
+            children: selectedUsers[0].name
+          })]
+        })
+      })]
+    })]
+  });
+}

package/{src → dist}/controls/wysiwyg.js

@@ -20,4 +20,4 @@
  * is kept for back-compat.
  */
 
-export { default } from './richtext';
+export { default } from './richtext';

package/{src → dist}/hooks/useTokens.js

@@ -8,37 +8,41 @@
 import { useState, useEffect } from '@wordpress/element';
 import { getAllTokenGroups } from '../utils/token-helper';
 import { useTokensConfig } from '../provider';
-
 export function useTokens() {
-	const themeTokens = useTokensConfig();
-	const [tokens, setTokens] = useState(() => getAllTokenGroups(themeTokens));
-
-	useEffect(() => {
-		setTokens(getAllTokenGroups(themeTokens));
-	}, [themeTokens]);
-
-	return { tokens, loading: false, error: null };
+  const themeTokens = useTokensConfig();
+  const [tokens, setTokens] = useState(() => getAllTokenGroups(themeTokens));
+  useEffect(() => {
+    setTokens(getAllTokenGroups(themeTokens));
+  }, [themeTokens]);
+  return {
+    tokens,
+    loading: false,
+    error: null
+  };
 }
 
 /**
  * Resolve a `tokenGroup` value (e.g. "custom:gap") to its tokens array.
  */
 export function getTokensByGroup(allTokens, tokenGroup) {
-	if (!allTokens || !tokenGroup) return null;
-	const [categoryKey, subKey] = tokenGroup.split(':');
-	const category = allTokens[categoryKey];
-	if (!category?.children) return null;
-	return category.children[subKey]?.tokens || null;
+  if (!allTokens || !tokenGroup) return null;
+  const [categoryKey, subKey] = tokenGroup.split(':');
+  const category = allTokens[categoryKey];
+  if (!category?.children) return null;
+  return category.children[subKey]?.tokens || null;
 }
 
 /**
  * Build a `key → { label, token }` map for SelectField / RangeField legacy shape.
  */
 export function generateMapFromTokens(tokens) {
-	if (!Array.isArray(tokens)) return null;
-	const map = {};
-	tokens.forEach((t) => {
-		map[t.key] = { label: t.label, token: t.slug || t.value };
-	});
-	return map;
-}
+  if (!Array.isArray(tokens)) return null;
+  const map = {};
+  tokens.forEach(t => {
+    map[t.key] = {
+      label: t.label,
+      token: t.slug || t.value
+    };
+  });
+  return map;
+}