@xpufx/paseo-top 0.4.3 → 0.4.5

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

@@ -1,200 +0,0 @@
-import type { PlatformType, PluginTheme } from "../../../../shared/vendor/paseo-plugin-helper/types";
-import type { DensityStyle } from "./flair";
-import type { ResponsiveLayout } from "../../../../shared/vendor/paseo-plugin-helper/types";
-import { resolveEffectiveCompact } from "./responsive";
-
-/**
- * Standard spacing scale (pt/px) shared by every helper surface.
- * Density rule: compact viewports step exactly one rung down the scale.
- */
-export const spacing = {
-  xxs: 2,
-  xs: 4,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 24,
-} as const;
-
-export type SpacingKey = keyof typeof spacing;
-
-/**
- * A gap/size value: either a named spacing token or a raw px number. Layout
- * primitives accept this so callers never have to invent their own scale.
- */
-export type SpacingValue = SpacingKey | number;
-
-/**
- * Resolves a {@link SpacingValue} to px, falling back to the theme-derived
- * value when the caller did not specify one.
- */
-export function resolveSpacing(value: SpacingValue | undefined, fallback: number): number {
-  if (value === undefined) return fallback;
-  return typeof value === "number" ? value : spacing[value];
-}
-
-export interface TypographyToken {
-  fontSize: number;
-  lineHeight: number;
-  fontWeight: "400" | "500" | "600" | "700";
-}
-
-export interface TypographyScale {
-  title: TypographyToken;
-  heading: TypographyToken;
-  body: TypographyToken;
-  bodyStrong: TypographyToken;
-  /**
-   * Value text that pairs with a {@link TypographyScale.label}: same size as
-   * the label, normal weight, so a value never outranks its own label.
-   */
-  bodySmall: TypographyToken;
-  caption: TypographyToken;
-  label: TypographyToken;
-}
-
-/**
- * Semantic text sizes keep helper components visually coherent while still
- * allowing compact panes and plugin density preferences to breathe.
- */
-export function resolveTypography(
-  layout: ResponsiveLayout,
-  density: DensityStyle,
-): TypographyScale {
-  const compact = resolveEffectiveCompact(layout);
-  const densityStep = density === "compact" ? -1 : density === "spacious" ? 1 : 0;
-  const size = (regular: number, minimum = 10) =>
-    Math.max(minimum, regular + (compact ? -1 : 0) + densityStep);
-
-  const label: TypographyToken = {
-    fontSize: size(12, 11),
-    lineHeight: size(16, 14),
-    fontWeight: "600",
-  };
-  // Derived, not a fresh literal: a paired value shares the label's metrics
-  // and drops to normal weight, so it can never render larger than its label.
-  const bodySmall: TypographyToken = {
-    fontSize: label.fontSize,
-    lineHeight: label.lineHeight,
-    fontWeight: "400",
-  };
-
-  return {
-    title: { fontSize: size(16, 14), lineHeight: size(22, 18), fontWeight: "600" },
-    heading: { fontSize: size(14, 12), lineHeight: size(20, 16), fontWeight: "600" },
-    body: { fontSize: size(13, 12), lineHeight: size(19, 16), fontWeight: "400" },
-    bodyStrong: { fontSize: size(13, 12), lineHeight: size(19, 16), fontWeight: "600" },
-    bodySmall,
-    caption: { fontSize: size(11, 10), lineHeight: size(15, 14), fontWeight: "400" },
-    label,
-  };
-}
-
-/** Fallback text color on accent fills when the host omits accentForeground. */
-export const FALLBACK_ACCENT_FOREGROUND = "#ffffff";
-
-export type ElevationLevel = "none" | "sm" | "md" | "lg";
-
-export interface ElevationStyle {
-  shadowColor: string;
-  shadowOpacity: number;
-  shadowRadius: number;
-  shadowOffset: { width: number; height: number };
-  elevation: number;
-}
-
-/**
- * Standard shadow/elevation presets. shadowColor lives here once so client
- * components never hardcode their own.
- */
-export function resolveElevation(level: ElevationLevel): ElevationStyle {
-  switch (level) {
-    case "none":
-      return {
-        shadowColor: "#000",
-        shadowOpacity: 0,
-        shadowRadius: 0,
-        shadowOffset: { width: 0, height: 0 },
-        elevation: 0,
-      };
-    case "sm":
-      return {
-        shadowColor: "#000",
-        shadowOpacity: 0.12,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
-      };
-    case "lg":
-      return {
-        shadowColor: "#000",
-        shadowOpacity: 0.24,
-        shadowRadius: 12,
-        shadowOffset: { width: 0, height: 4 },
-        elevation: 4,
-      };
-    case "md":
-    default:
-      return {
-        shadowColor: "#000",
-        shadowOpacity: 0.18,
-        shadowRadius: 6,
-        shadowOffset: { width: 0, height: 2 },
-        elevation: 2,
-      };
-  }
-}
-
-/**
- * Native `elevation` is Android-only; iOS renders the shadow props.
- * Kept as a helper so call sites read consistently.
- */
-export function elevationForPlatform(
-  level: ElevationLevel,
-  platform: PlatformType,
-): ElevationStyle {
-  const style = resolveElevation(level);
-  if (platform !== "android") {
-    return { ...style, elevation: 0 };
-  }
-  return style;
-}
-
-export const defaultDarkTheme: PluginTheme = {
-  colors: {
-    surface0: "#18181b",
-    surface1: "#27272a",
-    surface2: "#3f3f46",
-    border: "#3f3f46",
-    foreground: "#fafafa",
-    foregroundMuted: "#a1a1aa",
-    accent: "#3b82f6",
-    accentForeground: "#ffffff",
-    statusSuccess: "#22c55e",
-    statusWarning: "#eab308",
-    statusDanger: "#ef4444",
-  },
-};
-
-export const defaultLightTheme: PluginTheme = {
-  colors: {
-    surface0: "#ffffff",
-    surface1: "#f4f4f5",
-    surface2: "#e4e4e7",
-    border: "#e4e4e7",
-    foreground: "#09090b",
-    foregroundMuted: "#71717a",
-    accent: "#2563eb",
-    accentForeground: "#ffffff",
-    statusSuccess: "#16a34a",
-    statusWarning: "#ca8a04",
-    statusDanger: "#dc2626",
-  },
-};
-
-export function getDefaultTheme(scheme?: string): PluginTheme {
-  if (scheme === "light") {
-    return defaultLightTheme;
-  }
-  return defaultDarkTheme;
-}

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

@@ -1,57 +0,0 @@
-import { usePluginTheme } from "./provider";
-import {
-  responsiveSelect,
-  type ResponsiveSelectOptions,
-} from "./responsive";
-import type { PlatformType } from "../../../../shared/vendor/paseo-plugin-helper/types";
-
-export interface UseResponsiveResult {
-  /**
-   * Whether the container or viewport is in compact mode (narrow trackbar, mobile screen, or split-pane).
-   */
-  isCompact: boolean;
-  /**
-   * Whether the current OS platform is mobile ('ios' | 'android').
-   */
-  isMobile: boolean;
-  /**
-   * The platform identifier ('web' | 'desktop' | 'ios' | 'android' | 'macos' | 'windows' | 'linux').
-   */
-  platform: PlatformType;
-  /**
-   * Container width if reported by Paseo's layout.
-   */
-  width?: number;
-  /**
-   * Container height if reported by Paseo's layout.
-   */
-  height?: number;
-  /**
-   * Recommended minimum interactive touch target (44pt on mobile/compact, 28pt on desktop).
-   */
-  touchTargetMin: number;
-  /**
-   * Helper function to select a value based on the current responsive environment.
-   */
-  select: <T>(options: ResponsiveSelectOptions<T>) => T | undefined;
-}
-
-/**
- * Universal hook for responsive plugin UI across composer pills, modals, panels, and surfaces.
- * Automatically adapts based on Paseo's layout context (compact mode, mobile OS, touch targets).
- */
-export function useResponsive(): UseResponsiveResult {
-  const { layout, isCompact, isMobile, touchTargetMin } = usePluginTheme();
-
-  return {
-    isCompact,
-    isMobile,
-    platform: layout.platform,
-    width: layout.width,
-    height: layout.height,
-    touchTargetMin,
-    select: <T>(options: ResponsiveSelectOptions<T>): T | undefined => {
-      return responsiveSelect(layout, options);
-    },
-  };
-}