feat: implement local system font picker for theme builder

apps/codeimage/package.json

@@ -62,7 +62,7 @@
     "@codemirror/search": "^6.4.0",
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.11.0",
-    "@codeui/kit": "^0.0.34",
+    "@codeui/kit": "^0.0.36",
     "@floating-ui/core": "^1.2.2",
     "@floating-ui/dom": "^1.2.3",
     "@formatjs/intl-relativetimeformat": "11.1.4",

apps/codeimage/src/components/CustomEditor/CustomEditor.tsx

@@ -26,7 +26,6 @@ import {
   lineNumbers,
   rectangularSelection,
 } from '@codemirror/view';
-import {SUPPORTED_FONTS} from '@core/configuration/font';
 import {createCodeMirror, createEditorReadonly} from 'solid-codemirror';
 import {
   createEffect,
@@ -67,8 +66,11 @@ interface CustomEditorProps {
 export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
   const {themeArray: themes} = getThemeStore();
   const languages = SUPPORTED_LANGUAGES;
-  const fonts = SUPPORTED_FONTS;
-  const {state: editorState, canvasEditorEvents} = getRootEditorStore();
+  const {
+    state: editorState,
+    canvasEditorEvents,
+    computed: {selectedFont},
+  } = getRootEditorStore();
   const {editor} = getActiveEditorStore();
   const selectedLanguage = createMemo(() =>
     languages.find(language => language.id === editor()?.languageId),
@@ -139,9 +141,8 @@ export default function CustomEditor(props: VoidProps<CustomEditorProps>) {
   });
 
   const customFontExtension = (): Extension => {
-    const fontName =
-        fonts.find(({id}) => editorState.options.fontId === id)?.name ||
-        fonts[0].name,
+    const font = selectedFont();
+    const fontName = font.name,
       fontWeight = editorState.options.fontWeight,
       enableLigatures = editorState.options.enableLigatures;
 

apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx

@@ -4,16 +4,18 @@ import {CustomTheme} from '@codeimage/highlight';
 import {useI18n} from '@codeimage/locale';
 import {getRootEditorStore} from '@codeimage/store/editor';
 import {getActiveEditorStore} from '@codeimage/store/editor/activeEditor';
+import {EditorConfigStore} from '@codeimage/store/editor/config.store';
 import {dispatchUpdateTheme} from '@codeimage/store/effects/onThemeChange';
 import {getThemeStore} from '@codeimage/store/theme/theme.store';
 import {createSelectOptions, Select} from '@codeui/kit';
-import {SUPPORTED_FONTS} from '@core/configuration/font';
 import {getUmami} from '@core/constants/umami';
 import {DynamicSizedContainer} from '@ui/DynamicSizedContainer/DynamicSizedContainer';
 import {SegmentedField} from '@ui/SegmentedField/SegmentedField';
 import {SkeletonLine} from '@ui/Skeleton/Skeleton';
-import {createMemo, ParentComponent, Show} from 'solid-js';
+import {ParentComponent, Show} from 'solid-js';
+import {provideState} from 'statebuilder';
 import {AppLocaleEntries} from '../../i18n';
+import {FontPicker} from './controls/FontPicker/FontPicker';
 import {PanelDivider} from './PanelDivider';
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
@@ -34,14 +36,15 @@ const languages: readonly LanguageDefinition[] = [...SUPPORTED_LANGUAGES].sort(
 );
 
 export const EditorStyleForm: ParentComponent = () => {
+  const configStore = provideState(EditorConfigStore);
   const {themeArray} = getThemeStore();
   const [t] = useI18n<AppLocaleEntries>();
   const {editor, setLanguageId, formatter, setFormatterName} =
     getActiveEditorStore();
   const {
     state,
     actions: {setShowLineNumbers, setFontWeight, setFontId, setEnableLigatures},
-    computed: {font},
+    computed: {selectedFont},
   } = getRootEditorStore();
 
   const languagesOptions = createSelectOptions(
@@ -80,26 +83,22 @@ export const EditorStyleForm: ParentComponent = () => {
     {key: 'label', valueKey: 'value'},
   );
 
-  const memoizedFontWeights = createMemo(() =>
-    font().types.map(type => ({
+  const fontWeightByFont = () => {
+    const font = selectedFont();
+    if (!font) {
+      return [];
+    }
+    return font.types.map(type => ({
       label: type.name,
-      value: type.weight as number,
-    })),
-  );
+      value: type.weight,
+    }));
+  };
 
-  const fontWeightOptions = createSelectOptions(memoizedFontWeights, {
+  const fontWeightOptions = createSelectOptions(fontWeightByFont, {
     key: 'label',
     valueKey: 'value',
   });
 
-  const fontOptions = createSelectOptions(
-    SUPPORTED_FONTS.map(font => ({
-      label: font.name,
-      value: font.id,
-    })),
-    {key: 'label', valueKey: 'value'},
-  );
-
   return (
     <Show when={editor()}>
       {editor => (
@@ -216,40 +215,14 @@ export const EditorStyleForm: ParentComponent = () => {
           <DynamicSizedContainer>
             <PanelHeader label={t('frame.font')} />
 
-            <PanelRow for={'frameFontField'} label={t('frame.font')}>
+            <PanelRow for={'aspectRatio'} label={t('frame.font')}>
               <TwoColumnPanelRow>
                 <SuspenseEditorItem
                   fallback={<SkeletonLine width={'100%'} height={'26px'} />}
                 >
-                  <Select
-                    options={fontOptions.options()}
-                    {...fontOptions.props()}
-                    {...fontOptions.controlled(
-                      () => font().id,
-                      fontId => {
-                        setFontId(fontId ?? SUPPORTED_FONTS[0].id);
-                        if (
-                          !font()
-                            .types.map(type => type.weight as number)
-                            .includes(state.options.fontWeight)
-                        ) {
-                          setFontWeight(font().types[0].weight);
-                        }
-                      },
-                    )}
-                    aria-label={'Font'}
-                    id={'frameFontField'}
-                    size={'xs'}
-                    itemLabel={itemLabelProps => (
-                      <span
-                        style={{
-                          'font-family': `${itemLabelProps.label}, monospace`,
-                          'font-size': '80%',
-                        }}
-                      >
-                        {itemLabelProps.label}
-                      </span>
-                    )}
+                  <FontPicker
+                    value={selectedFont()?.id}
+                    onChange={fontId => setFontId(fontId)}
                   />
                 </SuspenseEditorItem>
               </TwoColumnPanelRow>

apps/codeimage/src/components/PropertyEditor/controls/FontPicker/FontPicker.css.ts

@@ -0,0 +1,83 @@
+import {textFieldStyles, themeVars} from '@codeimage/ui';
+import {responsiveStyle, themeTokens} from '@codeui/kit';
+import {createVar, style} from '@vanilla-extract/css';
+
+export const input = style([
+  textFieldStyles.baseField,
+  {
+    paddingLeft: themeVars.spacing['3'],
+    paddingRight: themeVars.spacing['3'],
+    flex: 1,
+    justifyContent: 'space-between',
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    gap: themeVars.spacing['3'],
+  },
+]);
+
+export const inputValue = style({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
+
+export const inputIcon = style({
+  flexShrink: 0,
+});
+
+export const fontListboxHeight = createVar();
+
+export const fontPickerPopover = style([
+  {
+    width: '360px',
+    maxWidth: '360px',
+    vars: {
+      [fontListboxHeight]: '350px',
+    },
+  },
+  responsiveStyle({
+    md: {
+      maxWidth: 'initial',
+    },
+  }),
+]);
+
+export const experimentalFlag = style({
+  color: themeVars.dynamicColors.descriptionTextColor,
+  fontSize: themeVars.fontSize.xs,
+});
+
+export const centeredContent = style({
+  width: '100%',
+  height: fontListboxHeight,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textAlign: 'center',
+});
+
+export const virtualizedFontListboxWrapper = style({
+  height: fontListboxHeight,
+});
+
+export const virtualizedFontListbox = style({
+  maxHeight: fontListboxHeight,
+  overflow: 'auto',
+  height: '100%',
+});
+
+export const virtualizedFontListboxSearch = style({
+  flex: 1,
+});
+
+export const virtualizedFontListboxToolbar = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: themeTokens.spacing['2'],
+  ':first-child': {
+    flex: 1,
+  },
+});

apps/codeimage/src/components/PropertyEditor/controls/FontPicker/FontPicker.tsx

@@ -0,0 +1,141 @@
+import {EditorConfigStore} from '@codeimage/store/editor/config.store';
+import {Box, FlexField, HStack, Text, VStack} from '@codeimage/ui';
+import {
+  As,
+  IconButton,
+  icons,
+  Listbox,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@codeui/kit';
+import {useModality} from '@core/hooks/isMobile';
+import {DynamicSizedContainer} from '@ui/DynamicSizedContainer/DynamicSizedContainer';
+import {
+  ExperimentalFeatureTooltip,
+  ExperimentalIcon,
+} from '@ui/ExperimentalFeatureTooltip/ExperimentalFeatureTooltip';
+import {SegmentedField} from '@ui/SegmentedField/SegmentedField';
+import {createSignal, Match, Switch} from 'solid-js';
+import {provideState} from 'statebuilder';
+import {CloseIcon} from '../../../Icons/CloseIcon';
+import * as styles from './FontPicker.css';
+import {createFontPickerListboxProps} from './FontPickerListbox';
+import {FontSystemPicker} from './FontSystemPicker';
+
+interface FontPickerProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+type FontPickerModality = 'default' | 'system';
+
+/**
+ * @experimental
+ */
+export function FontPicker(props: FontPickerProps) {
+  const [open, setOpen] = createSignal(false);
+  const [mode, setMode] = createSignal<FontPickerModality>('default');
+  const modality = useModality();
+  const configState = provideState(EditorConfigStore);
+
+  const webListboxItems = () =>
+    configState.get.fonts
+      .filter(font => font.type === 'web')
+      .map(font => ({
+        label: font.name,
+        value: font.id,
+      }));
+
+  const webListboxProps = createFontPickerListboxProps({
+    onEsc: () => setOpen(false),
+    onChange: props.onChange,
+    get value() {
+      return props.value;
+    },
+    get items() {
+      return webListboxItems();
+    },
+  });
+
+  const selectedFont = () =>
+    [...configState.get.fonts, ...configState.get.systemFonts].find(
+      font => font.id === props.value,
+    );
+
+  return (
+    <Popover
+      placement={modality === 'mobile' ? undefined : 'right-end'}
+      open={open()}
+      onOpenChange={setOpen}
+    >
+      <PopoverTrigger asChild>
+        <As component={'div'} class={styles.input}>
+          <span class={styles.inputValue}>
+            {selectedFont()?.name ?? 'No font selected'}
+          </span>
+          <icons.SelectorIcon class={styles.inputIcon} />
+        </As>
+      </PopoverTrigger>
+      <PopoverContent variant={'bordered'} class={styles.fontPickerPopover}>
+        <Box
+          display={'flex'}
+          justifyContent={'spaceBetween'}
+          alignItems={'center'}
+          marginBottom={4}
+        >
+          <ExperimentalFeatureTooltip feature={'Aspect ratio'}>
+            <HStack spacing={'2'} alignItems={'flexEnd'}>
+              <Text weight={'semibold'}>Fonts</Text>
+              <Text class={styles.experimentalFlag} size={'xs'}>
+                <Box as={'span'} display={'flex'} alignItems={'center'}>
+                  <ExperimentalIcon size={'xs'} />
+                  <Box marginLeft={'1'}>Experimental</Box>
+                </Box>
+              </Text>
+            </HStack>
+          </ExperimentalFeatureTooltip>
+
+          <IconButton
+            size={'xs'}
+            aria-label={'Close'}
+            theme={'secondary'}
+            onClick={() => setOpen(false)}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
+
+        <DynamicSizedContainer>
+          <VStack spacing={2}>
+            <FlexField>
+              <SegmentedField<FontPickerModality>
+                value={mode()}
+                autoWidth
+                onChange={item => setMode(item)}
+                items={[
+                  {label: 'Default', value: 'default'},
+                  {label: 'System', value: 'system'},
+                ]}
+                size={'sm'}
+              />
+            </FlexField>
+
+            <Switch>
+              <Match when={mode() === 'default'}>
+                <Listbox bordered {...webListboxProps} />
+              </Match>
+              <Match when={mode() === 'system'}>
+                <FontSystemPicker
+                  onEsc={() => setOpen(false)}
+                  value={props.value}
+                  onChange={value => props.onChange(value)}
+                />
+              </Match>
+            </Switch>
+          </VStack>
+        </DynamicSizedContainer>
+      </PopoverContent>
+    </Popover>
+  );
+}