@symbiote-native/symbols 0.0.0

package/src/core/android/weights/bold/index.ts

@@ -0,0 +1,8 @@
+import { MaterialSymbols_700Bold } from '@expo-google-fonts/material-symbols/700Bold';
+
+import type { IAndroidSymbolWeight } from '../..';
+const weight: IAndroidSymbolWeight = {
+  name: 'MaterialSymbols_700Bold',
+  font: MaterialSymbols_700Bold,
+};
+export default weight;

package/src/core/android/weights/extraLight/index.ts

@@ -0,0 +1,8 @@
+import { MaterialSymbols_200ExtraLight } from '@expo-google-fonts/material-symbols/200ExtraLight';
+
+import type { IAndroidSymbolWeight } from '../..';
+const weight: IAndroidSymbolWeight = {
+  name: 'MaterialSymbols_200ExtraLight',
+  font: MaterialSymbols_200ExtraLight,
+};
+export default weight;

package/src/core/android/weights/light/index.ts

@@ -0,0 +1,8 @@
+import { MaterialSymbols_300Light } from '@expo-google-fonts/material-symbols/300Light';
+
+import type { IAndroidSymbolWeight } from '../..';
+const weight: IAndroidSymbolWeight = {
+  name: 'MaterialSymbols_300Light',
+  font: MaterialSymbols_300Light,
+};
+export default weight;

package/src/core/android/weights/medium/index.ts

@@ -0,0 +1,8 @@
+import { MaterialSymbols_500Medium } from '@expo-google-fonts/material-symbols/500Medium';
+
+import type { IAndroidSymbolWeight } from '../..';
+const weight: IAndroidSymbolWeight = {
+  name: 'MaterialSymbols_500Medium',
+  font: MaterialSymbols_500Medium,
+};
+export default weight;

package/src/core/android/weights/regular/index.ts

@@ -0,0 +1,8 @@
+import { MaterialSymbols_400Regular } from '@expo-google-fonts/material-symbols/400Regular';
+
+import type { IAndroidSymbolWeight } from '../..';
+const weight: IAndroidSymbolWeight = {
+  name: 'MaterialSymbols_400Regular',
+  font: MaterialSymbols_400Regular,
+};
+export default weight;

package/src/core/android/weights/semiBold/index.ts

@@ -0,0 +1,8 @@
+import { MaterialSymbols_600SemiBold } from '@expo-google-fonts/material-symbols/600SemiBold';
+
+import type { IAndroidSymbolWeight } from '../..';
+const weight: IAndroidSymbolWeight = {
+  name: 'MaterialSymbols_600SemiBold',
+  font: MaterialSymbols_600SemiBold,
+};
+export default weight;

package/src/core/android/weights/thin/index.ts

@@ -0,0 +1,8 @@
+import { MaterialSymbols_100Thin } from '@expo-google-fonts/material-symbols/100Thin';
+
+import type { IAndroidSymbolWeight } from '../..';
+const weight: IAndroidSymbolWeight = {
+  name: 'MaterialSymbols_100Thin',
+  font: MaterialSymbols_100Thin,
+};
+export default weight;

package/src/core/index.ts

@@ -0,0 +1,25 @@
+export {
+  SYMBOL_MODULE_NAME,
+  ensureSymbolRegistered,
+  loadSymbolFont,
+  renderSymbolView,
+  symbolFontOf,
+  symbolViewName,
+  unstable_getMaterialSymbolSourceAsync,
+  watchSymbolFont,
+} from './symbols';
+export { androidSymbolToString } from './android';
+export type { IAndroidSymbol, IAndroidSymbolWeight } from './android';
+export type {
+  IAnimationEffect,
+  IAnimationSpec,
+  IAnimationType,
+  IContentMode,
+  ISymbolName,
+  ISymbolScale,
+  ISymbolType,
+  ISymbolViewProps,
+  ISymbolWeight,
+  IVariableAnimationSpec,
+} from './symbol-types';
+export type { SFSymbol } from 'sf-symbols-typescript';

package/src/core/symbol-types.ts

@@ -0,0 +1,147 @@
+// Типы порта `SymbolModule.types.ts` из expo-symbols, без React-типов: `fallback` объявляет адаптер
+import type { SFSymbol } from 'sf-symbols-typescript';
+import type {
+  IAccessibilityProps,
+  IAriaProps,
+  IResponderProps,
+} from '@symbiote-native/components';
+import type {
+  IColorValue,
+  IStyleProp,
+  ISymbioteEvent,
+  IViewStyle,
+} from '@symbiote-native/engine';
+import type { IAndroidSymbol, IAndroidSymbolWeight } from './android';
+
+export type ISymbolWeight =
+  | 'unspecified'
+  | 'ultraLight'
+  | 'thin'
+  | 'light'
+  | 'regular'
+  | 'medium'
+  | 'semibold'
+  | 'bold'
+  | 'heavy'
+  | 'black';
+
+export type ISymbolScale =
+  | 'default'
+  | 'unspecified'
+  | 'small'
+  | 'medium'
+  | 'large';
+
+/** How the image is resized to fit its container */
+export type IContentMode =
+  | 'scaleToFill'
+  | 'scaleAspectFit'
+  | 'scaleAspectFill'
+  | 'redraw'
+  | 'center'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight';
+
+/** The symbol variant, `palette` takes its colors from `colors` */
+export type ISymbolType =
+  | 'monochrome'
+  | 'hierarchical'
+  | 'palette'
+  | 'multicolor';
+
+export type IAnimationType = 'bounce' | 'pulse' | 'scale';
+
+export type IAnimationEffect = {
+  type: IAnimationType;
+  /**
+   * Whether the entire symbol animates or just the individual layers
+   * @default false
+   */
+  wholeSymbol?: boolean;
+  direction?: 'up' | 'down';
+};
+
+// Эффекты складываются: каждое значение `true` добавляет ещё один
+export type IVariableAnimationSpec = {
+  /** An effect that reverses each time it repeats */
+  reversing?: boolean;
+  /** An effect that does not reverse each time it repeats */
+  nonReversing?: boolean;
+  /** Each successive layer stays enabled until the end of the cycle, cancels `iterative` */
+  cumulative?: boolean;
+  /** Momentarily enables each layer of a symbol in sequence */
+  iterative?: boolean;
+  /** Hides inactive layers completely instead of drawing them with reduced opacity */
+  hideInactiveLayers?: boolean;
+  /** Draws inactive layers with reduced, but nonzero, opacity */
+  dimInactiveLayers?: boolean;
+};
+
+export type IAnimationSpec = {
+  effect?: IAnimationEffect;
+  /** If the animation repeats */
+  repeating?: boolean;
+  /** The number of times the animation repeats */
+  repeatCount?: number;
+  /** The duration of the animation in seconds */
+  speed?: number;
+  variableAnimationSpec?: IVariableAnimationSpec;
+};
+
+type IViewSurface = IAccessibilityProps &
+  IAriaProps &
+  IResponderProps & {
+    style?: IStyleProp<IViewStyle>;
+    testID?: string;
+    nativeID?: string;
+    onLayout?: (event: ISymbioteEvent) => void;
+  };
+
+export type ISymbolName =
+  | SFSymbol
+  | { ios?: SFSymbol; android?: IAndroidSymbol; web?: IAndroidSymbol };
+
+export type ISymbolViewProps = IViewSurface & {
+  /** SF Symbols names are listed in the Apple SF Symbols app */
+  name: ISymbolName;
+  /**
+   * @default 'monochrome'
+   * @platform ios
+   */
+  type?: ISymbolType;
+  /**
+   * @default 'unspecified'
+   * @platform ios
+   */
+  scale?: ISymbolScale;
+  /**
+   * On Android import the weight from `androidWeights/{weight}`
+   * @default 'unspecified'
+   */
+  weight?:
+    | ISymbolWeight
+    | { ios: ISymbolWeight; android: IAndroidSymbolWeight };
+  /**
+   * Colors of a `palette` symbol
+   * @platform ios
+   */
+  colors?: IColorValue | IColorValue[];
+  /**
+   * @default 24
+   */
+  size?: number;
+  tintColor?: IColorValue;
+  /**
+   * @default 'scaleAspectFit'
+   * @platform ios
+   */
+  resizeMode?: IContentMode;
+  /** @platform ios */
+  animationSpec?: IAnimationSpec;
+};

package/src/core/symbols.ts

@@ -0,0 +1,192 @@
+// Ядро `SymbolView`, порт expo-symbols: нативный view на iOS, шрифт Material Symbols на Android
+import { Platform, requireNativeViewManager } from 'expo-modules-core';
+import { el, txt } from '@symbiote-native/components';
+import type { IDescriptor } from '@symbiote-native/components';
+import {
+  PlatformColor,
+  defineExpoNativeView,
+  isRecord,
+  processColor,
+} from '@symbiote-native/engine';
+import type { IColorValue } from '@symbiote-native/engine';
+import { loadAsync, renderToImageAsync } from '@symbiote-native/font';
+import { androidSymbolToString } from './android';
+import type { IAndroidSymbol, IAndroidSymbolWeight } from './android';
+import symbols from './android/symbols.json';
+import regular from './android/weights/regular';
+
+export const SYMBOL_MODULE_NAME = 'SymbolModule';
+
+// Регистрация идёт при рендере: побочный эффект барреля теряется в release
+const symbolView = defineExpoNativeView(
+  requireNativeViewManager,
+  SYMBOL_MODULE_NAME,
+);
+
+export const symbolViewName = symbolView.name;
+export const ensureSymbolRegistered = symbolView.ensureRegistered;
+
+const DEFAULT_SIZE = 24;
+const WEB_DEFAULT_COLOR = '#7d9bd4';
+const ANDROID_DEFAULT_COLOR = '@android:color/system_primary_dark';
+
+function runsOnIos(): boolean {
+  return Platform.select({ ios: true, default: false });
+}
+
+function defaultSymbolColor(): IColorValue {
+  return Platform.select({ android: true, default: false })
+    ? PlatformColor(ANDROID_DEFAULT_COLOR)
+    : WEB_DEFAULT_COLOR;
+}
+
+function isAndroidSymbol(value: unknown): value is IAndroidSymbol {
+  return typeof value === 'string' && Object.hasOwn(symbols, value);
+}
+
+function isAndroidWeight(value: unknown): value is IAndroidSymbolWeight {
+  return (
+    isRecord(value) &&
+    typeof value['name'] === 'string' &&
+    typeof value['font'] === 'number'
+  );
+}
+
+// Значение `name` или `weight` для iOS: строка как есть, у объекта берётся запись `ios`
+function iosEntryOf(value: unknown): unknown {
+  return isRecord(value) ? value['ios'] : value;
+}
+
+function glyphNameOf(props: object): IAndroidSymbol | null {
+  const name: unknown = Reflect.get(props, 'name');
+  const key = Platform.select({ android: 'android', default: 'web' });
+  const entry = isRecord(name) ? name[key] : null;
+  return isAndroidSymbol(entry) ? entry : null;
+}
+
+/** The font of the Android weight, the regular one when none is given */
+export function symbolFontOf(weight: unknown): IAndroidSymbolWeight {
+  const platformWeight = isRecord(weight) ? weight['android'] : null;
+  return isAndroidWeight(platformWeight) ? platformWeight : regular;
+}
+
+function sizedStyle(props: object, size: number): unknown {
+  return [{ width: size, height: size }, Reflect.get(props, 'style')];
+}
+
+function sizeOf(props: object): number {
+  const size: unknown = Reflect.get(props, 'size');
+  return typeof size === 'number' && size !== 0 ? size : DEFAULT_SIZE;
+}
+
+function renderNative(props: object): IDescriptor | null {
+  if (!ensureSymbolRegistered()) return null;
+  const name = iosEntryOf(Reflect.get(props, 'name'));
+  if (!name) return null;
+
+  const colors: unknown = Reflect.get(props, 'colors');
+  const colorList = Array.isArray(colors) ? colors : colors ? [colors] : [];
+  const size = sizeOf(props);
+  const style: unknown = Reflect.get(props, 'style');
+  return el(symbolViewName(), {
+    ...Object.fromEntries(
+      Object.entries(props).filter(([key]) => key !== 'tintColor'),
+    ),
+    name,
+    style: style ? sizedStyle(props, size) : { width: size, height: size },
+    colors: colorList.map(color => processColor(color)),
+    tint: processColor(Reflect.get(props, 'tintColor')),
+    weight: iosEntryOf(Reflect.get(props, 'weight')),
+    animated: !!Reflect.get(props, 'animationSpec'),
+    type: Reflect.get(props, 'type') ?? 'monochrome',
+  });
+}
+
+function renderGlyph(props: object, isFontLoaded: boolean): IDescriptor | null {
+  const name = glyphNameOf(props);
+  if (!name) return null;
+  const size = sizeOf(props);
+  const style = sizedStyle(props, size);
+  if (!isFontLoaded) return el('view', { style });
+  const tint: unknown = Reflect.get(props, 'tintColor');
+  const glyph = txt(
+    {
+      style: {
+        fontFamily: symbolFontOf(Reflect.get(props, 'weight')).name,
+        color: tint ?? defaultSymbolColor(),
+        fontSize: size,
+        lineHeight: size,
+      },
+    },
+    [androidSymbolToString(name) ?? ''],
+  );
+  return el('view', { style }, [glyph]);
+}
+
+/**
+ * The symbol as a descriptor, `null` means the caller renders its own `fallback`
+ * `isFontLoaded` only matters off iOS, where the glyph needs the loaded font
+ */
+export function renderSymbolView(
+  props: object,
+  isFontLoaded: boolean,
+): IDescriptor | null {
+  return runsOnIos() ? renderNative(props) : renderGlyph(props, isFontLoaded);
+}
+
+/** Loads the Material Symbols font, false when it fails and the symbol stays an empty View */
+export async function loadSymbolFont(props: object): Promise<boolean> {
+  if (runsOnIos()) return true;
+  const font = symbolFontOf(Reflect.get(props, 'weight'));
+  const name = glyphNameOf(props);
+  try {
+    await loadAsync({
+      [font.name]: {
+        uri: font.font,
+        testString: name ? (androidSymbolToString(name) ?? undefined) : undefined,
+      },
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Loads the font once and reports the result, the returned function drops a late report
+ * Every adapter calls it from its own mount hook, so the lifecycle logic is written once
+ */
+export function watchSymbolFont(
+  props: object,
+  onLoaded: (isLoaded: boolean) => void,
+): () => void {
+  let isActive = true;
+  void loadSymbolFont(props).then(isLoaded => {
+    if (isActive) onLoaded(isLoaded);
+  });
+  return () => {
+    isActive = false;
+  };
+}
+
+/**
+ * Renders a Material Symbol to an image source, for APIs that take an image such as tab bar icons
+ * @platform android
+ */
+export async function unstable_getMaterialSymbolSourceAsync(
+  symbol: IAndroidSymbol | null,
+  size: number,
+  color: string,
+): Promise<{ uri: string; width: number; height: number; scale: number } | null> {
+  if (runsOnIos() || !symbol) return null;
+  const glyph = androidSymbolToString(symbol);
+  if (!glyph) return null;
+  const font = regular;
+  await loadAsync({ [font.name]: font.font });
+  return renderToImageAsync(glyph, {
+    fontFamily: font.name,
+    size,
+    color,
+    lineHeight: size,
+  });
+}

package/src/react/index.ts

@@ -0,0 +1,18 @@
+// @symbiote-native/symbols/react: компонент `SymbolView` поверх общего ядра
+
+export { SymbolView } from './symbol-view';
+export type { ISymbolViewReactProps as ISymbolViewProps } from './symbol-view';
+export {
+  SYMBOL_MODULE_NAME,
+  androidSymbolToString,
+  symbolViewName,
+  unstable_getMaterialSymbolSourceAsync,
+  type IAndroidSymbol,
+  type IAnimationSpec,
+  type IContentMode,
+  type ISymbolName,
+  type ISymbolScale,
+  type ISymbolType,
+  type ISymbolWeight,
+  type SFSymbol,
+} from '../core';

package/src/react/symbol-view.ts

@@ -0,0 +1,33 @@
+import { Fragment, createElement, useEffect, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import { descriptorToReact } from '@symbiote-native/react';
+import type { IViewProps } from '@symbiote-native/react';
+import { renderSymbolView, watchSymbolFont } from '../core';
+import type { ISymbolViewProps } from '../core';
+
+// Поверхность View как у `ViewProps` в upstream, `fallback` и `className` свои у React
+export type ISymbolViewReactProps = ISymbolViewProps &
+  Omit<IViewProps, keyof ISymbolViewProps | 'children'> & {
+    /** Rendered when a symbol for the current platform is not defined */
+    fallback?: ReactNode;
+    className?: string;
+  };
+
+/** React twin of `expo-symbols`' `SymbolView`, SF Symbols on iOS and Material Symbols elsewhere */
+export function SymbolView(props: ISymbolViewReactProps): ReactElement {
+  const { fallback, ...rest } = props;
+  const [isFontLoaded, setIsFontLoaded] = useState(false);
+
+  // Шрифт грузится один раз при монтировании, как в upstream, смена веса его не перезагружает
+  useEffect(() => watchSymbolFont(rest, setIsFontLoaded), []);
+
+  const descriptor = renderSymbolView(rest, isFontLoaded);
+  if (!descriptor) return createElement(Fragment, null, fallback);
+  return createElement(
+    descriptor.type,
+    descriptor.props,
+    ...descriptor.children.map(child =>
+      typeof child === 'string' ? child : descriptorToReact(child),
+    ),
+  );
+}

package/src/solid/index.ts

@@ -0,0 +1,18 @@
+// @symbiote-native/symbols/solid: компонент `SymbolView` поверх общего ядра
+
+export { SymbolView } from './symbol-view';
+export type { ISymbolViewSolidProps as ISymbolViewProps } from './symbol-view';
+export {
+  SYMBOL_MODULE_NAME,
+  androidSymbolToString,
+  symbolViewName,
+  unstable_getMaterialSymbolSourceAsync,
+  type IAndroidSymbol,
+  type IAnimationSpec,
+  type IContentMode,
+  type ISymbolName,
+  type ISymbolScale,
+  type ISymbolType,
+  type ISymbolWeight,
+  type SFSymbol,
+} from '../core';

package/src/solid/symbol-view.ts

@@ -0,0 +1,53 @@
+import {
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  splitProps,
+  untrack,
+} from 'solid-js';
+import type { JSX } from 'solid-js';
+import { el } from '@symbiote-native/components';
+import { descriptorToSolid } from '@symbiote-native/solid';
+import type { IViewProps } from '@symbiote-native/solid';
+import type { IClassNameValue } from '@symbiote-native/engine';
+import { renderSymbolView, watchSymbolFont } from '../core';
+import type { ISymbolViewProps } from '../core';
+
+// Поверхность View как у `ViewProps` в upstream, `fallback` и `class` свои у Solid
+export type ISymbolViewSolidProps = ISymbolViewProps &
+  Omit<IViewProps, keyof ISymbolViewProps | 'children'> & {
+    /** Rendered when a symbol for the current platform is not defined */
+    fallback?: JSX.Element;
+    class?: IClassNameValue;
+  };
+
+const FALLBACK_SHAPE = 'fallback';
+
+/** Solid twin of `expo-symbols`' `SymbolView`, SF Symbols on iOS and Material Symbols elsewhere */
+export function SymbolView(props: ISymbolViewSolidProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['fallback']);
+  const [isFontLoaded, setIsFontLoaded] = createSignal(false);
+
+  // Шрифт грузится один раз при монтировании, как в upstream
+  onMount(() => onCleanup(watchSymbolFont({ ...rest }, setIsFontLoaded)));
+
+  // Мост Solid требует постоянную форму дескриптора, а она меняется вместе с загрузкой шрифта
+  // Поэтому узел пересобирается, когда меняется форма, а обычные пропсы он обновляет сам
+  const shape = createMemo(() => {
+    const descriptor = renderSymbolView({ ...rest }, isFontLoaded());
+    return descriptor
+      ? `${descriptor.type}:${descriptor.children.length}`
+      : FALLBACK_SHAPE;
+  });
+
+  return createMemo(() => {
+    if (shape() === FALLBACK_SHAPE) return local.fallback;
+    return untrack(() => {
+      const isLoadedAtBuild = isFontLoaded();
+      return descriptorToSolid(
+        () => renderSymbolView({ ...rest }, isLoadedAtBuild) ?? el('view', {}),
+      );
+    });
+  });
+}

package/src/svelte/index.ts

@@ -0,0 +1,18 @@
+// @symbiote-native/symbols/svelte: компонент `SymbolView` поверх общего ядра
+
+export { default as SymbolView } from './symbol-view.svelte';
+export type { ISymbolViewSvelteProps as ISymbolViewProps } from './symbol-props';
+export {
+  SYMBOL_MODULE_NAME,
+  androidSymbolToString,
+  symbolViewName,
+  unstable_getMaterialSymbolSourceAsync,
+  type IAndroidSymbol,
+  type IAnimationSpec,
+  type IContentMode,
+  type ISymbolName,
+  type ISymbolScale,
+  type ISymbolType,
+  type ISymbolWeight,
+  type SFSymbol,
+} from '../core';

package/src/svelte/svelte-ambient.d.ts

@@ -0,0 +1,6 @@
+// Pulls in svelte's ambient global declarations ($state/$effect/...) for this package's tsc
+// program. adapters/svelte gets these for free because render.ts does a real value import from
+// 'svelte' (any file in a program importing a module loads its ambient globals for the whole
+// program); this package has no such import, so a triple-slash reference does the same job
+// explicitly rather than relying on an incidental side-effect.
+/// <reference types="svelte" />

package/src/svelte/svelte-compile.test-helper.ts

@@ -0,0 +1,6 @@
+// Re-exports the existing harness instead of another copy
+export {
+  createSvelteHarness,
+  loadComponent,
+  type ISvelteHarness,
+} from '../../../sqlite/src/svelte/svelte-compile.test-helper';

package/src/svelte/symbol-props.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { IViewProps } from '@symbiote-native/svelte';
+import type { ISymbolViewProps } from '../core';
+
+// Поверхность View как у `ViewProps` в upstream, запасной вариант идёт сниппетом `fallback`
+export type ISymbolViewSvelteProps = ISymbolViewProps &
+  Omit<IViewProps, keyof ISymbolViewProps | 'children'> & {
+    /** Rendered when a symbol for the current platform is not defined */
+    fallback?: Snippet;
+  };

package/src/svelte/symbol-view.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import DescriptorHost from '@symbiote-native/svelte/descriptor-host';
+  import { renderSymbolView, watchSymbolFont } from '../core';
+  import type { ISymbolViewSvelteProps } from './symbol-props';
+
+  const { fallback, ...rest }: ISymbolViewSvelteProps = $props();
+  let isFontLoaded = $state(false);
+
+  // Шрифт грузится один раз при монтировании, как в upstream, смена пропсов его не перезагружает
+  $effect(() =>
+    untrack(() =>
+      watchSymbolFont({ ...rest }, isLoaded => {
+        isFontLoaded = isLoaded;
+      }),
+    ),
+  );
+
+  const descriptor = $derived(renderSymbolView({ ...rest }, isFontLoaded));
+</script>
+
+{#if descriptor}
+  <DescriptorHost {descriptor} />
+{:else}
+  {@render fallback?.()}
+{/if}

package/src/vue/index.ts

@@ -0,0 +1,18 @@
+// @symbiote-native/symbols/vue: компонент `SymbolView` поверх общего ядра
+
+export { SymbolView } from './symbol-view';
+export type { ISymbolViewVueProps as ISymbolViewProps } from './symbol-view';
+export {
+  SYMBOL_MODULE_NAME,
+  androidSymbolToString,
+  symbolViewName,
+  unstable_getMaterialSymbolSourceAsync,
+  type IAndroidSymbol,
+  type IAnimationSpec,
+  type IContentMode,
+  type ISymbolName,
+  type ISymbolScale,
+  type ISymbolType,
+  type ISymbolWeight,
+  type SFSymbol,
+} from '../core';