@entropy-softworks/ui 2026.7.31

package/src/components/entropy-mark.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { useColorScheme } from "nativewind";
+import { Text } from "./text";
+import { DISABLE_BRANDING } from "../flags";
+import { EntropyMarkAnimated } from "./entropy-mark-animated";
+import {
+  ENTROPY_MARK_VIEWBOX,
+  ENTROPY_MARK_ASPECT,
+  ENTROPY_MARK_PATH,
+  ENTROPY_MARK_STEP,
+} from "./entropy-mark-geometry";
+
+// Entropy Softworks company mark: Geist Mono `>_` broken apart (diagonal shear
+// on the `>` top arm, CRT scanline slip on the lower arm, clean break in the
+// `_`), trailed by three grey time-echoes drifting up-left and an optional
+// faint cyan/red chroma fringe. This is the COMPANY brand — distinct from each
+// product's own logo (registered via AppConfig.Logo / BrandHeader). Use it
+// sparingly on corporate surfaces (legal pages, boot splash).
+//
+// Single traced path, reused with per-echo offsets. Geometry lives in
+// ./entropy-mark-geometry (shared with EntropyMarkAnimated to avoid a require
+// cycle); re-exported here so existing import paths keep working.
+export {
+  ENTROPY_MARK_VIEWBOX,
+  ENTROPY_MARK_ASPECT,
+  ENTROPY_MARK_PATH,
+  ENTROPY_MARK_STEP,
+} from "./entropy-mark-geometry";
+
+const PALETTE = {
+  light: {
+    src: "#000000",
+    echo: ["#f5f5f5", "#e2e2e2", "#cbcbcb"],
+    cyan: "#0096aa",
+    red: "#c82837",
+  },
+  dark: {
+    src: "#ffffff",
+    echo: ["#373737", "#5f5f5f", "#8c8c8c"],
+    cyan: "#268ca0",
+    red: "#a53440",
+  },
+};
+
+export interface EntropyMarkProps {
+  /** Rendered height in px. Width follows the ~1.63:1 aspect. */
+  size?: number;
+  /** "mono" = grey echoes only; "chroma" = adds the faint cyan/red fringe. */
+  variant?: "mono" | "chroma";
+  /** Override the theme; defaults to the active color scheme. */
+  scheme?: "light" | "dark";
+  /** Multiply the echo drift distance (boot animation drives this 0→1). */
+  driftScale?: number;
+}
+
+/** Bare company `>_` mark (no wordmark). */
+export function EntropyMark({
+  size = 28,
+  variant = "mono",
+  scheme,
+  driftScale = 1,
+}: EntropyMarkProps) {
+  const { colorScheme } = useColorScheme();
+  const p = PALETTE[scheme ?? (colorScheme === "dark" ? "dark" : "light")];
+  const width = Math.round(size * ENTROPY_MARK_ASPECT);
+  const echoes = [3, 2, 1] as const; // far (dim) -> near
+  return (
+    <Svg width={width} height={size} viewBox={ENTROPY_MARK_VIEWBOX}>
+      {echoes.map((i) => (
+        <Path
+          key={i}
+          d={ENTROPY_MARK_PATH}
+          fillRule="evenodd"
+          fill={p.echo[3 - i]}
+          transform={`translate(${ENTROPY_MARK_STEP.x * i * driftScale} ${ENTROPY_MARK_STEP.y * i * driftScale})`}
+        />
+      ))}
+      {variant === "chroma" ? (
+        <>
+          <Path
+            d={ENTROPY_MARK_PATH}
+            fillRule="evenodd"
+            fill={p.cyan}
+            opacity={0.5}
+            transform="translate(10 8)"
+          />
+          <Path
+            d={ENTROPY_MARK_PATH}
+            fillRule="evenodd"
+            fill={p.red}
+            opacity={0.45}
+            transform="translate(-10 -8)"
+          />
+        </>
+      ) : null}
+      <Path d={ENTROPY_MARK_PATH} fillRule="evenodd" fill={p.src} />
+    </Svg>
+  );
+}
+
+export interface EntropyBylineProps {
+  /** Mark height in px (wordmark scales relative). */
+  size?: number;
+  variant?: "mono" | "chroma";
+  scheme?: "light" | "dark";
+  /** Byline copy. Defaults to "Entropy Softworks, Inc.". */
+  label?: string;
+}
+
+/**
+ * Subtle corporate byline: the company `>_` mark beside small muted text.
+ * Drop at the bottom of legal / about pages so each product carries quiet
+ * company recognition without competing with its own brand.
+ */
+export function EntropyByline({
+  size = 18,
+  variant = "mono",
+  scheme,
+  label = "Entropy Softworks, Inc.",
+}: EntropyBylineProps) {
+  // Self-host branding opt-out: strip the Entropy byline entirely.
+  if (DISABLE_BRANDING) {
+    return null;
+  }
+  return (
+    <View className="flex-row items-center justify-center" style={{ gap: 8, opacity: 0.7 }}>
+      {/* Flat at rest; press reveals the echo-cascade (the website's hover
+          animation, touch-ported — see entropy-mark-animated.tsx). */}
+      <EntropyMarkAnimated size={size} variant={variant} scheme={scheme} />
+      <Text className="font-mono text-xs text-muted-foreground">{label}</Text>
+    </View>
+  );
+}

package/src/components/error-boundary.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { View } from "react-native";
+import { Text } from "./text";
+import { Button } from "./button";
+
+interface Props {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  /**
+   * Optional callback fired when the user taps "Try Again". Use this
+   * to clear any module-level state that contributed to the crash
+   * (vault: `queryClient.clear()`, `KeyManager.lock()`, etc.).
+   * Without this, a re-render against still-broken module state
+   * would crash-loop the user with no escape.
+   */
+  onReset?: () => void;
+}
+
+interface State {
+  hasError: boolean;
+  /** Bumped on every reset so children remount fresh — clears React
+   *  state inside the crashing subtree, not just the boundary's own
+   *  flag. Without this, "Try Again" only resets `hasError` and a
+   *  child whose component state is the root cause re-throws on the
+   *  next render. */
+  resetKey: number;
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  override state: State = { hasError: false, resetKey: 0 };
+
+  static getDerivedStateFromError(): Partial<State> {
+    return { hasError: true };
+  }
+
+  override componentDidCatch(error: Error, info: React.ErrorInfo) {
+    if (__DEV__) {
+      console.error("[ErrorBoundary]", error, info.componentStack);
+    }
+  }
+
+  private handleReset = (): void => {
+    try {
+      this.props.onReset?.();
+    } catch {
+      // onReset failures must not crash the boundary itself.
+    }
+    this.setState((prev) => ({ hasError: false, resetKey: prev.resetKey + 1 }));
+  };
+
+  override render() {
+    if (this.state.hasError) {
+      return (
+        this.props.fallback ?? (
+          <View className="flex-1 items-center justify-center p-8">
+            <Text className="mb-4 text-lg font-semibold text-foreground">Something went wrong</Text>
+            <Button onPress={this.handleReset}>
+              <Text className="text-primary-foreground">Try Again</Text>
+            </Button>
+          </View>
+        )
+      );
+    }
+    // Keying the subtree on `resetKey` forces a remount on retry so
+    // component-level state that contributed to the crash is
+    // recreated from scratch rather than re-rendering against the
+    // same stale props/state and crash-looping.
+    return <React.Fragment key={this.state.resetKey}>{this.props.children}</React.Fragment>;
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,156 @@
+// UI primitives barrel — one entry point for every primitive entropy-ui
+// exposes. Keep additions alphabetical by source file.
+
+export { Button, IconButton, type ButtonProps } from "./button";
+
+export {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  type CardProps,
+  type CardTitleProps,
+  type CardDescriptionProps,
+} from "./card";
+
+export { Checkbox } from "./checkbox";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuLabel,
+} from "./context-menu";
+
+export {
+  DataTable,
+  resolveColumnStyle,
+  dataTableBodyMode,
+  type DataTableProps,
+  type DataTableColumn,
+  type DataTableBodyMode,
+} from "./data-table";
+
+export { Dialog, DialogContent, DialogFooter, DialogButton, ConfirmDialog } from "./dialog";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "./dropdown-menu";
+
+export {
+  EntropyMark,
+  EntropyByline,
+  ENTROPY_MARK_VIEWBOX,
+  ENTROPY_MARK_ASPECT,
+  ENTROPY_MARK_PATH,
+  ENTROPY_MARK_STEP,
+  type EntropyMarkProps,
+  type EntropyBylineProps,
+} from "./entropy-mark";
+
+export { EntropyBootSplash, type EntropyBootSplashProps } from "./entropy-boot-splash";
+
+export { EntropyMarkAnimated, type EntropyMarkAnimatedProps } from "./entropy-mark-animated";
+
+export { EntropyMarkSequential, type EntropyMarkSequentialProps } from "./entropy-mark-sequential";
+
+export { ErrorBoundary } from "./error-boundary";
+
+export { Input, SearchInput, EmailInput, PasswordInput, TextArea, type InputProps } from "./input";
+
+export { FormLabel, FormLabelText } from "./label";
+
+export { LicenseGate, type LicenseGateProps } from "./license-gate";
+
+export {
+  OnboardingWizard,
+  OnboardingOptionCard,
+  type OnboardingWizardProps,
+  type OnboardingStepDef,
+  type OnboardingStepApi,
+  type OnboardingOptionCardProps,
+  type OnboardingTheme,
+} from "./onboarding-wizard";
+
+export {
+  Pagination,
+  getPaginationState,
+  type PaginationProps,
+  type PaginationState,
+} from "./pagination";
+
+export { Popover, PopoverTrigger, PopoverContent } from "./popover";
+
+export { Separator, SeparatorWithText } from "./separator";
+
+export {
+  SegmentedToggle,
+  type SegmentedToggleProps,
+  type SegmentedOption,
+} from "./segmented-toggle";
+
+export {
+  SettingsRow,
+  SettingsSection,
+  type SettingsRowProps,
+  type SettingsSectionProps,
+} from "./settings-row";
+
+export { Skeleton } from "./skeleton";
+
+export { StatCard, trendColorClass, type StatCardProps, type StatTrend } from "./stat-card";
+
+export { Text, Heading, Label, MutedText, MonoText, ErrorText, type TextProps } from "./text";
+
+export { ToastPortal, toastConfig } from "./toast";
+
+export { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
+
+export { BrandHeader, type BrandHeaderProps } from "./logo";
+
+export { TagChip, withAlpha, type TagChipProps } from "./tag-chip";
+
+export { BottomNav, type BottomNavItem, type BottomNavProps } from "./bottom-nav";
+
+export { ItemIcon, type ItemIconProps } from "./item-icon";
+
+export { TotpDisplay, type TotpDisplayProps } from "./totp-display";
+
+export { UserAvatar, type UserAvatarProps } from "./user-avatar";
+
+export { SocialConnections, type SocialConnectionsProps } from "./social-connections";
+
+export {
+  ProfileDialog,
+  ProfileTab,
+  SecurityTab,
+  type ProfileDialogProps,
+  type ProfileTabProps,
+  type SecurityTabProps,
+} from "./profile";
+
+export { ServerSettings, type ServerSettingsProps } from "./server-settings";
+
+export {
+  ConnectionSettings,
+  type ConnectionSettingsProps,
+  type RunMode,
+} from "./connection-settings";
+
+export { PasswordGenerator, type PasswordGeneratorProps } from "./password-generator";
+
+export { TagMultiSelect, type TagMultiSelectProps, type TagOption } from "./tag-multi-select";
+
+export { PinPad, type PinPadProps } from "./pin-pad";
+
+export { LegalDialog, type LegalDialogProps } from "./legal-dialog";

package/src/components/input.tsx

@@ -0,0 +1,246 @@
+import React, { forwardRef, useState } from "react";
+import {
+  type NativeSyntheticEvent,
+  Pressable,
+  type TargetedEvent,
+  TextInput,
+  type TextInputProps,
+  View,
+  type ViewStyle,
+} from "react-native";
+import { cn } from "../utils/cn";
+import { ErrorText, Label } from "./text";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+
+export interface InputProps extends TextInputProps {
+  className?: string;
+  containerClassName?: string;
+  label?: string;
+  labelClassName?: string;
+  error?: string;
+  errorClassName?: string;
+  /**
+   * Render the input in the invalid (red border) state without showing
+   * inline error text. Pair with a consolidated form-level error slot.
+   */
+  invalid?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  isPassword?: boolean;
+  showPasswordToggle?: boolean;
+  containerStyle?: ViewStyle;
+}
+
+export const Input = forwardRef<TextInput, InputProps>(
+  (
+    {
+      className,
+      containerClassName,
+      label,
+      labelClassName,
+      error,
+      errorClassName,
+      invalid,
+      leftIcon,
+      rightIcon,
+      isPassword = false,
+      showPasswordToggle = true,
+      containerStyle,
+      onFocus,
+      onBlur,
+      secureTextEntry,
+      ...props
+    },
+    ref
+  ) => {
+    const showInvalid = invalid || !!error;
+    const [showPassword, setShowPassword] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const { colorScheme } = useColorScheme();
+    const isDark = colorScheme === "dark";
+
+    const handleFocus = (e: NativeSyntheticEvent<TargetedEvent>) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: NativeSyntheticEvent<TargetedEvent>) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+
+    const shouldShowPassword = isPassword && !showPassword;
+    const showToggle = isPassword && showPasswordToggle;
+
+    let borderClass: string;
+    if (showInvalid) {
+      borderClass = "border-2 border-destructive";
+    } else if (isFocused) {
+      borderClass = "border-2 border-primary";
+    } else {
+      borderClass = "border border-border";
+    }
+
+    return (
+      <View className={cn("w-full", containerClassName)} style={containerStyle}>
+        {label ? <Label className={cn("mb-2", labelClassName)}>{label}</Label> : null}
+
+        <View
+          className={cn(
+            "h-12 flex-row items-center rounded-lg bg-card pl-3",
+            showToggle ? "pr-1" : "pr-3",
+            borderClass,
+            className
+          )}
+        >
+          {leftIcon ? <View className="mr-2">{leftIcon}</View> : null}
+
+          <TextInput
+            ref={ref}
+            className="flex-1 py-2 text-base text-foreground dark:text-white"
+            placeholderTextColor={isDark ? "#737373" : "#A3A3A3"}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            secureTextEntry={secureTextEntry ?? shouldShowPassword}
+            {...props}
+          />
+
+          {showToggle ? (
+            <Pressable
+              onPress={() => setShowPassword(!showPassword)}
+              className="px-2 py-2"
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            >
+              <Ionicons
+                name={showPassword ? "eye-off-outline" : "eye-outline"}
+                size={20}
+                color={isDark ? "#A3A3A3" : "#737373"}
+              />
+            </Pressable>
+          ) : null}
+
+          {rightIcon && !showToggle ? <View className="ml-2">{rightIcon}</View> : null}
+        </View>
+
+        {error ? <ErrorText className={cn("mt-2", errorClassName)}>{error}</ErrorText> : null}
+      </View>
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export const SearchInput = forwardRef<TextInput, InputProps>(({ className, ...props }, ref) => {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  return (
+    <Input
+      ref={ref}
+      className={className}
+      leftIcon={<Ionicons name="search-outline" size={20} color={isDark ? "#A3A3A3" : "#737373"} />}
+      placeholder="Search..."
+      returnKeyType="search"
+      {...props}
+    />
+  );
+});
+
+SearchInput.displayName = "SearchInput";
+
+export const EmailInput = forwardRef<TextInput, InputProps>(({ className, ...props }, ref) => {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  return (
+    <Input
+      ref={ref}
+      className={className}
+      leftIcon={<Ionicons name="mail-outline" size={20} color={isDark ? "#A3A3A3" : "#737373"} />}
+      placeholder="you@example.com"
+      keyboardType="email-address"
+      autoCapitalize="none"
+      autoCorrect={false}
+      textContentType="emailAddress"
+      autoComplete="email"
+      {...props}
+    />
+  );
+});
+
+EmailInput.displayName = "EmailInput";
+
+export const PasswordInput = forwardRef<TextInput, InputProps>(({ className, ...props }, ref) => {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  return (
+    <Input
+      ref={ref}
+      className={className}
+      leftIcon={
+        <Ionicons name="lock-closed-outline" size={20} color={isDark ? "#A3A3A3" : "#737373"} />
+      }
+      placeholder="••••••••"
+      isPassword
+      autoCapitalize="none"
+      autoCorrect={false}
+      textContentType="password"
+      autoComplete="password"
+      {...props}
+    />
+  );
+});
+
+PasswordInput.displayName = "PasswordInput";
+
+export const TextArea = forwardRef<TextInput, InputProps>(
+  ({ className, containerClassName, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const { colorScheme } = useColorScheme();
+    const isDark = colorScheme === "dark";
+
+    const handleFocus = (e: NativeSyntheticEvent<TargetedEvent>) => {
+      setIsFocused(true);
+      props.onFocus?.(e);
+    };
+
+    const handleBlur = (e: NativeSyntheticEvent<TargetedEvent>) => {
+      setIsFocused(false);
+      props.onBlur?.(e);
+    };
+
+    return (
+      <View className={cn("w-full", containerClassName)}>
+        {props.label ? <Label className="mb-2">{props.label}</Label> : null}
+
+        <View
+          className={cn(
+            "min-h-[100px] rounded-lg bg-background px-3 py-3 dark:bg-black",
+            isFocused
+              ? "border-2 border-foreground"
+              : "border border-border dark:border-neutral-800",
+            className
+          )}
+        >
+          <TextInput
+            ref={ref}
+            className="text-base text-foreground dark:text-white"
+            placeholderTextColor={isDark ? "#737373" : "#A3A3A3"}
+            multiline
+            numberOfLines={4}
+            textAlignVertical="top"
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...props}
+          />
+        </View>
+
+        {props.error ? <ErrorText className="mt-2">{props.error}</ErrorText> : null}
+      </View>
+    );
+  }
+);
+
+TextArea.displayName = "TextArea";