@xpufx/paseo-top 0.4.3 → 0.4.5

package/client/vendor/paseo-plugin-helper/components/TruncatedText.tsx

@@ -1,157 +0,0 @@
-import React, { useState } from "react";
-import {
-  View,
-  Text,
-  Pressable,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-  Platform,
-} from "react-native";
-import { usePluginTheme } from "../theme/index";
-import { getClientHost } from "../host";
-import { copyToClipboard } from "../utils/clipboard";
-import {
-  truncate,
-  truncateMiddle,
-  truncatePath,
-  TruncatePathOptions,
-} from "../../../../shared/vendor/paseo-plugin-helper/formatters";
-
-export type TruncateMode = "end" | "middle" | "path";
-
-export interface TruncatedTextProps {
-  /** The full, raw text string (e.g. UUID, file path, commit SHA, token) */
-  text: string;
-  /** Maximum length allowed before truncation. Default: 32 */
-  maxLength?: number;
-  /** Truncation algorithm: "middle" (UUIDs/hashes), "path" (directory paths), or "end" (standard). Default: "middle" */
-  mode?: TruncateMode;
-  /** Additional path truncation options when mode="path" */
-  pathOptions?: TruncatePathOptions;
-  /** Whether to render an inline copy button. Default: true */
-  copyable?: boolean;
-  /** Use monospace font. Default: true */
-  mono?: boolean;
-  /** Toast message on successful copy. Default: "Copied" */
-  toastMessage?: string;
-  /** Custom container style */
-  style?: StyleProp<ViewStyle>;
-  /** Custom text style */
-  textStyle?: StyleProp<TextStyle>;
-}
-
-/**
- * Renders long strings (paths, UUIDs, hashes) shortened with smart truncation,
- * while preserving the full untruncated string for one-click clipboard copying.
- */
-export function TruncatedText({
-  text,
-  maxLength = 32,
-  mode = "middle",
-  pathOptions,
-  copyable = true,
-  mono = true,
-  toastMessage = "Copied",
-  style,
-  textStyle,
-}: TruncatedTextProps) {
-  const { colors, fonts, isCompact, touchTargetMin } = usePluginTheme();
-  const { Icon, useToast } = getClientHost();
-  const toast = useToast();
-  const [copied, setCopied] = useState(false);
-
-  if (!text) {
-    return <Text style={[{ color: colors.foregroundMuted }, textStyle]}>-</Text>;
-  }
-
-  let formattedText = text;
-  if (text.length > maxLength) {
-    switch (mode) {
-      case "path":
-        formattedText = truncatePath(text, maxLength, pathOptions);
-        break;
-      case "end":
-        formattedText = truncate(text, maxLength);
-        break;
-      case "middle":
-      default:
-        formattedText = truncateMiddle(text, maxLength);
-        break;
-    }
-  }
-
-  const handleCopy = async () => {
-    if (!copyable || !text) return;
-    const ok = await copyToClipboard(text, {
-      toast,
-      toastMessage,
-    });
-    if (ok) {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
-
-  const fontFamily = mono
-    ? fonts.mono ?? Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" })
-    : undefined;
-
-  return (
-    <View style={[styles.container, style]}>
-      <Text
-        selectable
-        numberOfLines={1}
-        ellipsizeMode="clip"
-        accessibilityLabel={text}
-        style={[
-          styles.text,
-          {
-            color: colors.foreground,
-            fontFamily,
-          },
-          textStyle,
-        ]}
-      >
-        {formattedText}
-      </Text>
-
-      {copyable && (
-        <Pressable
-          onPress={handleCopy}
-          hitSlop={Math.max(8, (touchTargetMin - 20) / 2)}
-          style={styles.copyBtn}
-          accessibilityRole="button"
-          accessibilityLabel={`Copy ${text}`}
-        >
-          <Icon
-            name={copied ? "Check" : "Copy"}
-            size={isCompact ? 12 : 13}
-            color={copied ? colors.statusSuccess : colors.foregroundMuted}
-          />
-        </Pressable>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    maxWidth: "100%",
-    gap: 6,
-  },
-  text: {
-    fontSize: 12,
-    lineHeight: 18,
-    flexShrink: 1,
-  },
-  copyBtn: {
-    padding: 3,
-    borderRadius: 4,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});

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

@@ -1,25 +0,0 @@
-export * from "./Button";
-export * from "./InlineButton";
-export * from "./AttentionBeacon";
-export * from "./Badge";
-export * from "./StatusDot";
-export * from "./Card";
-export * from "./Tabs";
-export * from "./CodeBlock";
-export * from "./CopyButton";
-export * from "./SearchInput";
-export * from "./TextInput";
-export * from "./Select";
-export * from "./Toggle";
-export * from "./Collapsible";
-export * from "./ProgressBar";
-export * from "./MetricGauge";
-export * from "./DataTable";
-export * from "./KeyValue";
-export * from "./EmptyState";
-export * from "./Responsive";
-export * from "./AboutSection";
-export * from "./TruncatedText";
-export * from "./CommandBox";
-export * from "./SectionHeader";
-export * from "./HighlightedText";

package/client/vendor/paseo-plugin-helper/custom-pills.tsx

@@ -1,224 +0,0 @@
-import React, { useState, useCallback } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import type { ComposerPillRegistrar, PluginCleanup } from "./host";
-import { getClientHost } from "./host";
-import { usePluginTheme } from "./theme/provider";
-import { useResponsive } from "./theme/useResponsive";
-import type { VisualFlair } from "./theme/flair";
-import type { CustomPillState } from "../../../shared/vendor/paseo-plugin-helper/custom-pills";
-import { Badge } from "./components/Badge";
-import { Button } from "./components/Button";
-import { Card } from "./components/Card";
-import { CodeBlock } from "./components/CodeBlock";
-import { registerComposerPill } from "./pill";
-
-export interface CustomPillBodyProps {
-  state: CustomPillState;
-}
-
-/**
- * Standard pill body renderer for a custom metric pill in the composer trackbar.
- * Automatically adapts to responsive compact/mobile modes and shows threshold status.
- */
-export function CustomPillBody({ state }: CustomPillBodyProps) {
-  const { Icon } = getClientHost();
-  const { colors } = usePluginTheme();
-  const { isCompact } = useResponsive();
-
-  const title = isCompact && state.compactTitle ? state.compactTitle : state.title;
-  const icon = isCompact && state.compactIcon ? state.compactIcon : state.icon;
-
-  return (
-    <View style={styles.pillContainer}>
-      {icon && <Icon name={icon} size={13} color={colors.foreground} />}
-      {title ? (
-        <Text style={[styles.pillTitle, { color: colors.foreground }]}>{title}</Text>
-      ) : null}
-      <Badge
-        label={state.displayValue}
-        variant={state.status}
-        styleVariant="tinted"
-        style={styles.pillBadge}
-      />
-    </View>
-  );
-}
-
-export interface CustomPillModalContentProps {
-  state: CustomPillState;
-  onRefresh?: () => Promise<void> | void;
-  isRefreshing?: boolean;
-}
-
-/**
- * Full modal inspection content for a custom metric pill.
- * Shows status, preformatted command output, last updated time, and quick actions.
- *
- * Sized by the host: the root fills the host-allocated modal frame (flex/fluid)
- * so changing output never drives the dialog size.
- */
-export function CustomPillModalContent({
-  state,
-  onRefresh,
-  isRefreshing = false,
-}: CustomPillModalContentProps) {
-  const { colors, isCompact } = usePluginTheme();
-
-  const displayText =
-    state.modalOutput || state.rawValue || (state.error ? `Error: ${state.error}` : "No output");
-
-  return (
-    <View style={styles.modalContent}>
-      <Card>
-        <Card.Header
-          title={state.modalTitle ?? state.title}
-          subtitle={state.modalDescription}
-          icon={state.icon}
-          badge={<Badge label={state.displayValue} variant={state.status} />}
-          action={
-            onRefresh ? (
-              <Button
-                variant="secondary"
-                size="sm"
-                icon="RefreshCw"
-                loading={isRefreshing}
-                label={!isCompact ? "Refresh" : undefined}
-                onPress={() => onRefresh()}
-              />
-            ) : undefined
-          }
-        />
-
-        {/* Monospace Code & Output Box with Built-in Copy */}
-        <CodeBlock
-          code={displayText}
-          title={state.modalTitle ?? state.title}
-          maxHeight={280}
-          copyable={true}
-        />
-
-        {/* Footer info */}
-        <View style={styles.footerRow}>
-          <Text style={[styles.timestampText, { color: colors.foregroundMuted }]}>
-            Last updated: {new Date(state.lastUpdated).toLocaleTimeString()}
-          </Text>
-        </View>
-      </Card>
-    </View>
-  );
-}
-
-export interface RegisterCustomPillsOptions {
-  /**
-   * The list of custom pill states or definitions.
-   */
-  pills: CustomPillState[];
-
-  /**
-   * Callback invoked when a pill needs a fresh refresh or modal command run.
-   */
-  onRefreshModal?: (pillId: string) => Promise<{ output?: string; error?: string }>;
-
-  /**
-   * Optional visual flair overrides.
-   */
-  flair?: Partial<VisualFlair>;
-}
-
-/**
- * Registers one or more declarative custom metric pills into Paseo's composer trackbar.
- * Automatically handles pill lifecycle, responsive layouts, and drill-down inspection modals.
- */
-export function registerCustomPills(
-  client: ComposerPillRegistrar,
-  options: RegisterCustomPillsOptions,
-): PluginCleanup {
-  const cleanups: PluginCleanup[] = [];
-
-  for (const pill of options.pills) {
-    const cleanup = registerComposerPill(client, {
-      id: pill.id,
-      title: pill.title,
-      compactTitle: pill.compactTitle,
-      icon: pill.icon,
-      compactIcon: pill.compactIcon,
-      flair: options.flair,
-      resolveLabel: () =>
-        pill.displayValue ? `${pill.title} ${pill.displayValue}` : pill.title,
-      renderPill: () => <CustomPillBody state={pill} />,
-      renderModal: () => {
-        const [refreshing, setRefreshing] = useState(false);
-        const [currentOutput, setCurrentOutput] = useState<string | undefined>(
-          pill.modalOutput,
-        );
-
-        const handleRefresh = useCallback(async () => {
-          if (!options.onRefreshModal) return;
-          setRefreshing(true);
-          try {
-            const res = await options.onRefreshModal(pill.id);
-            if (res.output) {
-              setCurrentOutput(res.output);
-            }
-          } finally {
-            setRefreshing(false);
-          }
-        }, [pill.id]);
-
-        const activeState: CustomPillState = {
-          ...pill,
-          modalOutput: currentOutput ?? pill.modalOutput,
-        };
-
-        return (
-          <CustomPillModalContent
-            state={activeState}
-            onRefresh={options.onRefreshModal ? handleRefresh : undefined}
-            isRefreshing={refreshing}
-          />
-        );
-      },
-    });
-
-    cleanups.push(cleanup);
-  }
-
-  return () => {
-    for (const dispose of cleanups) {
-      dispose();
-    }
-  };
-}
-
-const styles = StyleSheet.create({
-  modalContent: {
-    flex: 1,
-    minHeight: 0,
-    width: "100%",
-    padding: 12,
-  },
-  pillContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-  },
-  pillTitle: {
-    fontSize: 12,
-    fontWeight: "500",
-  },
-  pillBadge: {
-    paddingVertical: 1,
-    paddingHorizontal: 5,
-  },
-  footerRow: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    marginTop: 8,
-  },
-  timestampText: {
-    fontSize: 11,
-  },
-});

package/client/vendor/paseo-plugin-helper/forge-icon.tsx

@@ -1,79 +0,0 @@
-import React from "react";
-import { Image, Platform, type ImageStyle, type StyleProp } from "react-native";
-import { Icon } from "./icon";
-import { usePluginTheme } from "./theme/provider";
-import {
-  resolveForgeMark,
-  type ForgeKind,
-  type ForgeMarkInput,
-} from "../../../shared/vendor/paseo-plugin-helper/forge";
-
-/**
- * Official monochrome forge marks (Simple Icons, CC0 / project trademarks),
- * authored on a 24x24 viewBox. Rendered as inline SVG through a data URI so
- * the helper needs no SVG dependency: exact vector marks on web/Electron,
- * where Paseo renders React Native Web.
- */
-const FORGE_MARK_PATHS: Partial<Record<ForgeKind, string>> = {
-  codeberg:
-    "M11.999.747A11.974 11.974 0 0 0 0 12.75c0 2.254.635 4.465 1.833 6.376L11.837 6.19c.072-.092.251-.092.323 0l4.178 5.402h-2.992l.065.239h3.113l.882 1.138h-3.674l.103.374h3.86l.777 1.003h-4.358l.135.483h4.593l.695.894h-5.038l.165.589h5.326l.609.785h-5.717l.182.65h6.038l.562.727h-6.397l.183.65h6.717A12.003 12.003 0 0 0 24 12.75 11.977 11.977 0 0 0 11.999.747zm3.654 19.104.182.65h5.326c.173-.204.353-.433.513-.65zm.385 1.377.18.65h3.563c.233-.198.485-.428.712-.65zm.383 1.377.182.648h1.203c.356-.204.685-.412 1.042-.648zz",
-  forgejo:
-    "M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z",
-  gitea:
-    "M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z",
-};
-
-/** Inline SVG data URI for a custom mark, tinted with the resolved color. */
-export function forgeMarkSource(kind: ForgeKind, color: string): { uri: string } | null {
-  const path = FORGE_MARK_PATHS[kind];
-  if (!path) return null;
-  const svg =
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">` +
-    `<path fill="${color}" d="${path}"/></svg>`;
-  return { uri: `data:image/svg+xml,${encodeURIComponent(svg)}` };
-}
-
-export interface ForgeIconProps extends ForgeMarkInput {
-  /** Icon box in points; defaults to 16 to match the host Lucide default. */
-  size?: number;
-  /** Mark color; defaults to the active theme foreground. */
-  color?: string;
-  style?: StyleProp<ImageStyle>;
-  /** Overrides the default forge-name accessibility label. */
-  accessibilityLabel?: string;
-}
-
-/**
- * Shared forge brand mark. Resolves a host/kind to one mark and renders it:
- * GitHub/GitLab/unknown delegate to the host Lucide set, while Codeberg,
- * Forgejo and Gitea draw their official mono marks inline. On native, where
- * Paseo plugin bundles cannot render SVG, custom marks fall back to their
- * closest Lucide glyph so forges stay distinct.
- */
-export function ForgeIcon({
-  host,
-  kind,
-  size = 16,
-  color,
-  style,
-  accessibilityLabel,
-}: ForgeIconProps) {
-  const { colors } = usePluginTheme();
-  const markColor = color ?? colors.foreground;
-  const mark = resolveForgeMark({ host, kind });
-  const source = mark.custom && Platform.OS === "web" ? forgeMarkSource(mark.kind, markColor) : null;
-
-  if (!source) {
-    return <Icon name={mark.lucideName} size={size} color={markColor} />;
-  }
-
-  return (
-    <Image
-      accessibilityLabel={accessibilityLabel ?? mark.label}
-      accessibilityRole="image"
-      accessible
-      source={source}
-      style={[{ width: size, height: size }, style]}
-    />
-  );
-}

package/client/vendor/paseo-plugin-helper/icon.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { getClientHost, type HostIconProps } from "./host";
-
-let knownIconNames: Set<string> | undefined;
-const warnedIconNames = new Set<string>();
-
-/**
- * Optionally registers the set of valid icon names (e.g. Lucide names
- * supported by the host). When set, Icon warns once per unknown name
- * instead of rendering nothing silently.
- */
-export function setKnownIconNames(names: Iterable<string>): void {
-  knownIconNames = new Set(names);
-}
-
-export function clearKnownIconNames(): void {
-  knownIconNames = undefined;
-  warnedIconNames.clear();
-}
-
-export function reportUnknownIcon(name: string): void {
-  const key = name.trim();
-  if (warnedIconNames.has(key)) return;
-  warnedIconNames.add(key);
-  console.warn(
-    `[paseo-plugin-helper Icon] unknown icon name "${name}" — renders nothing; check the Lucide name`,
-  );
-}
-
-export function Icon(props: HostIconProps) {
-  const rawName = typeof props.name === "string" ? props.name : "";
-  if (!rawName.trim()) {
-    reportUnknownIcon(String(props.name));
-  } else if (knownIconNames && !knownIconNames.has(rawName.trim())) {
-    reportUnknownIcon(rawName);
-  }
-  const { Icon: HostIconComponent } = getClientHost();
-  return <HostIconComponent {...props} />;
-}

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

@@ -1,29 +0,0 @@
-export * from "./theme/index";
-export * from "./styles/index";
-export * from "./components/index";
-export * from "./layout/index";
-export * from "./pill";
-export * from "./surface";
-export * from "./command-center";
-export * from "./panel";
-export * from "./query";
-export * from "./query-refresh";
-export * from "./snapshot";
-export * from "./settings";
-export * from "./shared-settings";
-export * from "./settings-screen";
-export * from "./utils/clipboard";
-export * from "./utils/haptics";
-export * from "./custom-pills";
-export * from "./host";
-export { Icon } from "./icon";
-export { ForgeIcon, forgeMarkSource, type ForgeIconProps } from "./forge-icon";
-export {
-  forgeKindFromHost,
-  isForgeKind,
-  normalizeForgeHost,
-  resolveForgeMark,
-  type ForgeKind,
-  type ForgeMarkInput,
-  type ResolvedForgeMark,
-} from "../../../shared/vendor/paseo-plugin-helper/forge";

package/client/vendor/paseo-plugin-helper/layout/ActionBar.tsx

@@ -1,49 +0,0 @@
-import React, { type ReactNode } from "react";
-import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
-import { usePluginTheme } from "../theme/provider";
-
-export interface ActionBarProps {
-  children: ReactNode;
-  align?: "flex-start" | "flex-end" | "center" | "space-between";
-  direction?: "row" | "column" | "auto";
-  style?: StyleProp<ViewStyle>;
-}
-
-/**
- * Responsive action toolbar for modals and surfaces.
- * Automatically wraps or stacks on compact/mobile layouts.
- */
-export function ActionBar({
-  children,
-  align = "flex-end",
-  direction = "auto",
-  style,
-}: ActionBarProps) {
-  const { isCompact, padding } = usePluginTheme();
-
-  const isColumn = direction === "column" || (direction === "auto" && isCompact);
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          flexDirection: isColumn ? "column" : "row",
-          justifyContent: isColumn ? "flex-start" : align,
-          alignItems: isColumn ? "stretch" : "center",
-          gap: isCompact ? 8 : 10,
-          marginTop: padding.vertical,
-        },
-        style,
-      ]}
-    >
-      {children}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexWrap: "wrap",
-  },
-});