@xpufx/paseo-top 0.4.4 → 0.4.7

package/client/vendor/paseo-plugin-helper/theme/host-variables.ts

@@ -1,121 +0,0 @@
-import type { ThemeColors } from "../../../../shared/vendor/paseo-plugin-helper/types";
-
-/**
- * Paseo 0.8 host theme variables. On web hosts the live theme is exposed as
- * CSS custom properties on the document root; this map binds each variable
- * to the semantic ThemeColors slot it feeds.
- */
-export const PASEO_HOST_CSS_VARIABLES = {
-  "--background": "surface0",
-  "--foreground": "foreground",
-  "--muted": "foregroundMuted",
-  "--accent": "accent",
-  "--accent-foreground": "accentForeground",
-  "--border": "border",
-} as const satisfies Record<string, keyof ThemeColors>;
-
-export type PaseoHostCssVariable = keyof typeof PASEO_HOST_CSS_VARIABLES;
-
-export interface HostFontVariables {
-  sans?: string;
-  mono?: string;
-}
-
-export interface HostThemeVariables {
-  colors: Partial<ThemeColors>;
-  fonts: HostFontVariables;
-}
-
-interface StyleReader {
-  getPropertyValue(name: string): string;
-}
-
-interface DomRuntime {
-  document?: {
-    documentElement?: object;
-    defaultView?: {
-      getComputedStyle(target: object): StyleReader;
-    };
-  };
-  getComputedStyle?: (target: object) => StyleReader;
-}
-
-type MutableColors = { -readonly [K in keyof ThemeColors]: ThemeColors[K] };
-
-const HOST_FONT_VARIABLES: Record<"sans" | "mono", string[]> = {
-  sans: ["--font-sans", "--font-family"],
-  mono: ["--font-mono", "--font-family-monospace"],
-};
-
-function readVariable(names: string[]): string | undefined {
-  const runtime = globalThis as unknown as DomRuntime;
-  const doc = runtime.document;
-  if (!doc?.documentElement) return undefined;
-  const getStyle =
-    runtime.getComputedStyle ?? doc.defaultView?.getComputedStyle.bind(doc.defaultView);
-  if (!getStyle) return undefined;
-  try {
-    const computed = getStyle(doc.documentElement);
-    for (const name of names) {
-      const value = computed
-        .getPropertyValue(name)
-        .trim()
-        .replace(/^["']|["']$/g, "");
-      if (value) return value;
-    }
-  } catch {
-    // Non-DOM runtimes (native, tests) have no computed style to read.
-  }
-  return undefined;
-}
-
-/**
- * Reads the live Paseo 0.8 host variables. Returns empty slots outside a DOM
- * runtime so native callers merge to static defaults untouched.
- */
-export function readHostThemeVariables(): HostThemeVariables {
-  const colors: Partial<MutableColors> = {};
-  for (const [variable, slot] of Object.entries(PASEO_HOST_CSS_VARIABLES)) {
-    const value = readVariable([variable]);
-    if (value) {
-      colors[slot] = value;
-    }
-  }
-  const fonts: HostFontVariables = {};
-  const sans = readVariable(HOST_FONT_VARIABLES.sans);
-  if (sans) fonts.sans = sans;
-  const mono = readVariable(HOST_FONT_VARIABLES.mono);
-  if (mono) fonts.mono = mono;
-  return { colors, fonts };
-}
-
-function definedValues<T extends object>(obj: T): Partial<T> {
-  const out: Partial<T> = {};
-  for (const [key, value] of Object.entries(obj)) {
-    if (value !== undefined) {
-      (out as Record<string, unknown>)[key] = value;
-    }
-  }
-  return out;
-}
-
-/**
- * Pure merge for the provider: static defaults lose to live host variables,
- * which lose to the injected host theme, which loses to the flair accent.
- * Runtime `undefined` slots are skipped so a partial host theme falls back
- * instead of blanking a slot. Exported for tests; the provider applies it
- * inside useMemo.
- */
-export function mergeThemeColors(
-  defaults: ThemeColors,
-  hostVariables: Partial<ThemeColors>,
-  injected: ThemeColors,
-  accentOverride?: string,
-): ThemeColors {
-  return {
-    ...defaults,
-    ...definedValues(hostVariables),
-    ...definedValues(injected),
-    ...(accentOverride ? { accent: accentOverride } : {}),
-  };
-}

package/client/vendor/paseo-plugin-helper/theme/index.ts

@@ -1,7 +0,0 @@
-export * from "./flair";
-export * from "./color-utils";
-export * from "./responsive";
-export * from "./tokens";
-export * from "./host-variables";
-export * from "./provider";
-export * from "./useResponsive";

package/client/vendor/paseo-plugin-helper/theme/provider.tsx

@@ -1,178 +0,0 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-  useEffect,
-  type ReactNode,
-} from "react";
-import { StyleSheet, View, type LayoutChangeEvent } from "react-native";
-import type { PluginTheme } from "../../../../shared/vendor/paseo-plugin-helper/types";
-import type { HostLayout } from "../host";
-import { Appearance } from "react-native";
-import { defaultFlair, resolveRadius, type VisualFlair } from "./flair";
-import { alpha, getContrastColor, getStatusColor, getVariantPalette } from "./color-utils";
-import {
-  getTouchTargetMin,
-  isMobilePlatform,
-  resolveEffectiveCompact,
-  resolvePadding,
-} from "./responsive";
-import {
-  mergeThemeColors,
-  readHostThemeVariables,
-  type HostFontVariables,
-} from "./host-variables";
-import { defaultDarkTheme, defaultLightTheme, getDefaultTheme, resolveTypography, type TypographyScale } from "./tokens";
-export { defaultDarkTheme, defaultLightTheme, getDefaultTheme };
-import type { ResponsiveLayout, StatusVariant, ThemeColors } from "../../../../shared/vendor/paseo-plugin-helper/types";
-
-export interface PluginThemeContextValue {
-  theme: PluginTheme;
-  colors: ThemeColors;
-  fonts: HostFontVariables;
-  layout: ResponsiveLayout;
-  flair: VisualFlair;
-  isCompact: boolean;
-  isMobile: boolean;
-  touchTargetMin: number;
-  alpha: (color: string, opacity: number) => string;
-  getContrastColor: (bgHex: string, light?: string, dark?: string) => string;
-  getStatusColor: (variant: StatusVariant) => string;
-  getVariantPalette: (variant: StatusVariant) => { bg: string; text: string; border: string };
-  resolveRadius: (size?: "xs" | "sm" | "md" | "lg" | "pill") => number;
-  padding: { horizontal: number; vertical: number; gap: number };
-  typography: TypographyScale;
-}
-
-const defaultLayout: ResponsiveLayout = {
-  compact: false,
-  platform: "web",
-};
-
-// default themes re-exported from tokens.js
-
-export function useAppearanceScheme(): [string | undefined, (s: string | undefined) => void] {
-  const [scheme, setScheme] = useState<string | undefined>(Appearance.getColorScheme?.() ?? undefined);
-  useEffect(() => {
-    const sub = Appearance.addChangeListener?.(({colorScheme}) => {
-      setScheme(colorScheme ?? undefined);
-    });
-    return () => {
-      // remove listener if possible
-      // Appearance.addChangeListener returns an object with remove method in RN
-      // but in web we may not have it; ignore safely
-      if (sub && typeof (sub as any).remove === "function") {
-        (sub as any).remove();
-      }
-    };
-  }, []);
-  return [scheme, setScheme];
-}
-
-const initialDefaultTheme = getDefaultTheme();
-const PluginThemeContext = createContext<PluginThemeContextValue>({
-  theme: initialDefaultTheme,
-  colors: initialDefaultTheme.colors,
-  fonts: {},
-  layout: defaultLayout,
-  flair: defaultFlair,
-  isCompact: false,
-  isMobile: false,
-  touchTargetMin: 28,
-  alpha: (color, op) => alpha(color, op),
-  getContrastColor: (bg, l, d) => getContrastColor(bg, l, d),
-  getStatusColor: (v) => getStatusColor(v, initialDefaultTheme.colors),
-  getVariantPalette: (v) => getVariantPalette(v, initialDefaultTheme.colors),
-  resolveRadius: (s) => resolveRadius("rounded", s),
-  padding: resolvePadding(defaultLayout, "comfortable"),
-  typography: resolveTypography(defaultLayout, "comfortable"),
-});
-
-export interface PluginThemeProviderProps {
-  theme: PluginTheme;
-  layout?: HostLayout;
-  flair?: Partial<VisualFlair>;
-  children: ReactNode;
-}
-
-export function PluginThemeProvider({
-  theme,
-  layout = defaultLayout,
-  flair: userFlair,
-  children,
-}: PluginThemeProviderProps) {
-  const hostWidth =
-    typeof layout.width === "number" && layout.width > 0 ? layout.width : undefined;
-  const needsMeasurement = hostWidth === undefined;
-  const [measuredWidth, setMeasuredWidth] = useState<number | undefined>(undefined);
-  const [appearanceScheme] = useAppearanceScheme();
-
-  const handleLayout = useCallback((event: LayoutChangeEvent) => {
-    const width = event.nativeEvent?.layout?.width;
-    if (typeof width !== "number" || width <= 0) return;
-    setMeasuredWidth((prev) => (prev === width ? prev : width));
-  }, []);
-
-  const effectiveWidth = hostWidth ?? measuredWidth;
-
-  const value = useMemo<PluginThemeContextValue>(() => {
-    const flair: VisualFlair = { ...defaultFlair, ...userFlair };
-    const hostVariables = readHostThemeVariables();
-    const effectiveColors = mergeThemeColors(
-      getDefaultTheme(appearanceScheme).colors,
-      hostVariables.colors,
-      theme.colors,
-      flair.accentColor,
-    );
-
-    const isCompact = resolveEffectiveCompact(layout, effectiveWidth);
-    const effectiveLayout: ResponsiveLayout =
-      effectiveWidth !== undefined
-        ? { ...layout, width: effectiveWidth, compact: isCompact }
-        : { ...layout, compact: isCompact };
-    const isMobile = isMobilePlatform(effectiveLayout.platform);
-    const touchTargetMin = getTouchTargetMin(effectiveLayout);
-    const padding = resolvePadding(effectiveLayout, flair.density);
-    const typography = resolveTypography(effectiveLayout, flair.density);
-
-    return {
-      theme,
-      colors: effectiveColors,
-      fonts: hostVariables.fonts,
-      layout: effectiveLayout,
-      flair,
-      isCompact,
-      isMobile,
-      touchTargetMin,
-      alpha: (c, o) => alpha(c, o),
-      getContrastColor: (bg, l, d) => getContrastColor(bg, l, d),
-      getStatusColor: (v) => getStatusColor(v, effectiveColors, flair.accentColor),
-      getVariantPalette: (v) => getVariantPalette(v, effectiveColors, flair.accentColor),
-      resolveRadius: (size = "md") => resolveRadius(flair.radius, size),
-      padding,
-      typography,
-    };
-  }, [theme, layout, userFlair, effectiveWidth, appearanceScheme]);
-
-  return (
-    <PluginThemeContext.Provider value={value}>
-      {needsMeasurement ? (
-        <View style={styles.measureContainer} onLayout={handleLayout}>
-          {children}
-        </View>
-      ) : (
-        children
-      )}
-    </PluginThemeContext.Provider>
-  );
-}
-
-const styles = StyleSheet.create({
-  measureContainer: { flex: 1 },
-});
-
-export function usePluginTheme(): PluginThemeContextValue {
-  return useContext(PluginThemeContext);
-}

package/client/vendor/paseo-plugin-helper/theme/responsive.ts

@@ -1,213 +0,0 @@
-import type { DensityStyle } from "./flair";
-import type { PlatformType, ResponsiveLayout } from "../../../../shared/vendor/paseo-plugin-helper/types";
-
-/**
- * Container width (px) at or below which a surface steps down to the compact
- * scale. Mirrors the host's `COMPACT_FORM_FACTOR_WIDTH` so plugin typography
- * in narrow popovers matches full-screen mobile surfaces.
- */
-export const COMPACT_FORM_FACTOR_WIDTH = 500;
-
-/**
- * Resolves compact mode from the actual container width when it is known,
- * falling back to the host's viewport-derived `compact` flag otherwise.
- *
- * A host-declared compact surface stays compact at any width; a known width at
- * or below {@link COMPACT_FORM_FACTOR_WIDTH} forces compact even when the host
- * viewport is wide (e.g. a narrow header-button popover on desktop).
- */
-export function resolveEffectiveCompact(
-  layout: ResponsiveLayout,
-  widthOverride?: number,
-): boolean {
-  const width = widthOverride ?? layout.width;
-  if (typeof width === "number" && width > 0) {
-    return width <= COMPACT_FORM_FACTOR_WIDTH || Boolean(layout.compact);
-  }
-  return Boolean(layout.compact);
-}
-
-/**
- * Checks if the current platform is mobile (iOS or Android).
- */
-export function isMobilePlatform(platform: PlatformType): boolean {
-  return platform === "ios" || platform === "android";
-}
-
-/**
- * Interactive target floor for a compact surface on a non-mobile platform
- * (e.g. a narrow desktop popover). Sits between the full-desktop floor and the
- * 44pt touch target: a mouse pointer needs a little more room than a wide
- * panel, but nothing like a finger-sized hit area.
- */
-export const COMPACT_DESKTOP_TOUCH_TARGET = 36;
-
-/**
- * Returns the recommended minimum interactive target size (in pt/px).
- * Real touch platforms follow Apple HIG / Android Material (min 44pt); a
- * compact desktop surface gets a modest bump over the 28pt desktop floor.
- */
-export function getTouchTargetMin(layout: ResponsiveLayout): number {
-  if (isMobilePlatform(layout.platform)) return 44;
-  return resolveEffectiveCompact(layout) ? COMPACT_DESKTOP_TOUCH_TARGET : 28;
-}
-
-/**
- * Selects a value based on compact/mobile vs desktop screen constraints.
- */
-export function responsiveValue<T>(layout: ResponsiveLayout, desktopVal: T, compactVal: T): T {
-  return resolveEffectiveCompact(layout) ? compactVal : desktopVal;
-}
-
-/**
- * Calculates adaptive padding based on compact mode and density preset.
- */
-export function resolvePadding(
-  layout: ResponsiveLayout,
-  density: DensityStyle,
-): { horizontal: number; vertical: number; gap: number } {
-  const isCompact = resolveEffectiveCompact(layout);
-
-  switch (density) {
-    case "compact":
-      return {
-        horizontal: isCompact ? 10 : 12,
-        vertical: isCompact ? 6 : 8,
-        gap: isCompact ? 6 : 8,
-      };
-    case "spacious":
-      return {
-        horizontal: isCompact ? 16 : 24,
-        vertical: isCompact ? 14 : 20,
-        gap: isCompact ? 12 : 16,
-      };
-    case "comfortable":
-    default:
-      return {
-        horizontal: isCompact ? 12 : 16,
-        vertical: isCompact ? 10 : 14,
-        gap: isCompact ? 8 : 12,
-      };
-  }
-}
-
-export interface GridColumnOptions {
-  /** Requested (and maximum) column count. */
-  columns: number;
-  /** Horizontal gap between cells, in px. Default: 0. */
-  gap?: number;
-  /** Measured container width, when the host reports one. */
-  width?: number;
-  /**
-   * Minimum width each column should keep before wrapping to fewer columns.
-   * Only applied when a positive container width is known; `columns` stays the
-   * upper bound.
-   */
-  minColumnWidth?: number;
-  /**
-   * How a compact surface treats the requested column count.
-   * - "never" (default): keep the requested columns; flexbox wraps as needed.
-   * - "compact": collapse to a single column on a compact surface.
-   */
-  collapse?: "compact" | "never";
-  /** Whether the current surface is compact. */
-  isCompact?: boolean;
-}
-
-/**
- * Resolves the effective column count for a responsive grid.
- *
- * A `minColumnWidth` plus a known container width yields as many columns as
- * fit, capped at the requested count — so a narrow container wraps down to
- * fewer columns instead of the requested count being forced through.
- */
-export function resolveGridColumns(options: GridColumnOptions): number {
-  const requested = Math.max(1, Math.floor(options.columns));
-  if ((options.collapse ?? "never") === "compact" && options.isCompact) return 1;
-
-  const { minColumnWidth, width } = options;
-  const gap = options.gap ?? 0;
-  if (
-    typeof minColumnWidth === "number" &&
-    minColumnWidth > 0 &&
-    typeof width === "number" &&
-    width > 0
-  ) {
-    const fit = Math.floor((width + gap) / (minColumnWidth + gap));
-    return Math.max(1, Math.min(requested, fit));
-  }
-  return requested;
-}
-
-export interface ResponsiveSelectOptions<T> {
-  /**
-   * Default fallback value, used on desktop/wide viewports if no more specific option matches.
-   */
-  desktop?: T;
-  /**
-   * Value to use on mobile platforms ('ios' | 'android').
-   */
-  mobile?: T;
-  /**
-   * Value to use when in compact mode (layout.compact === true), such as on mobile or narrow split panes.
-   */
-  compact?: T;
-  /**
-   * Value to use when not in compact mode (layout.compact === false).
-   */
-  wide?: T;
-  /**
-   * Platform-specific overrides ('web', 'desktop', 'ios', 'android', 'macos', 'windows', 'linux').
-   */
-  platform?: Partial<Record<PlatformType, T>>;
-}
-
-/**
- * Selects a value based on responsive criteria with priority:
- * 1. Platform-specific override (`options.platform?.[platform]`)
- * 2. Mobile platform match (`options.mobile` if mobile OS)
- * 3. Compact mode match (`options.compact` if layout.compact)
- * 4. Wide mode match (`options.wide` if !layout.compact)
- * 5. Desktop / Default (`options.desktop`)
- */
-export function responsiveSelect<T>(
-  layout: ResponsiveLayout,
-  options: ResponsiveSelectOptions<T>,
-): T | undefined {
-  const isMobile = isMobilePlatform(layout.platform);
-  const isCompact = resolveEffectiveCompact(layout);
-
-  // 1. Specific platform override
-  if (options.platform && layout.platform in options.platform) {
-    const val = options.platform[layout.platform];
-    if (val !== undefined) return val;
-  }
-
-  // 2. Mobile platform match
-  if (isMobile && options.mobile !== undefined) {
-    return options.mobile;
-  }
-
-  // 3. Compact layout match
-  if (isCompact && options.compact !== undefined) {
-    return options.compact;
-  }
-
-  // 4. Wide (non-compact) layout match
-  if (!isCompact && options.wide !== undefined) {
-    return options.wide;
-  }
-
-  // 5. Desktop fallback
-  if (options.desktop !== undefined) {
-    return options.desktop;
-  }
-
-  // 6. Secondary fallbacks
-  if (options.wide !== undefined) return options.wide;
-  if (options.compact !== undefined) return options.compact;
-  if (options.mobile !== undefined) return options.mobile;
-
-  return undefined;
-}
-