@www.hyperlinks.space/program-kit 1.2.3 → 1.2.91881

package/app/components/GlobalBottomBarWeb.tsx

@@ -1,362 +0,0 @@
-/**
- * Web-only GlobalBottomBar implementation using a native <textarea>.
- * Mirrors GlobalBottomBar behaviour (auto-resize 1–8 lines, custom scroll
- * indicator, arrow icon) so we can compare web rendering more directly.
- */
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { View, Text, StyleSheet, Pressable } from "react-native";
-import Svg, { Path } from "react-native-svg";
-import { useTelegram } from "./Telegram";
-import { getPrimaryTextColorFromLaunch } from "./telegramWebApp";
-import { WEB_UI_SANS_STACK } from "../fonts";
-import { layout, icons, useColors } from "../theme";
-
-const { maxContentWidth } = layout;
-const {
-  lineHeight: LINE_HEIGHT,
-  verticalPadding: VERTICAL_PADDING,
-  horizontalPadding: HORIZONTAL_PADDING,
-  applyIconBottom: APPLY_ICON_BOTTOM,
-  maxLinesBeforeScroll: MAX_LINES_BEFORE_SCROLL,
-  maxBarHeight: MAX_BAR_HEIGHT,
-} = layout.bottomBar;
-const INNER_PADDING = 20; // gap above first line and below last line
-const AUTO_SCROLL_THRESHOLD = 30;
-const MAX_INPUT_HEIGHT = (MAX_LINES_BEFORE_SCROLL + 1) * LINE_HEIGHT; // 8 lines = 160 (text-only height)
-
-export function GlobalBottomBarWeb() {
-  const colors = useColors();
-  const { themeBgReady } = useTelegram();
-  const backgroundColor = themeBgReady ? colors.background : "transparent";
-  const [value, setValue] = useState("");
-  const [isFocused, setIsFocused] = useState(false);
-  const [scrollY, setScrollY] = useState(0);
-  const [domScrollRange, setDomScrollRange] = useState(0);
-  const [contentHeight, setContentHeight] = useState(LINE_HEIGHT);
-  // Height of a DOM-based mirror used to drive both growth and shrink on web.
-  const [domMirrorHeight, setDomMirrorHeight] = useState<number | null>(null);
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
-  const domMirrorRef = useRef<HTMLDivElement | null>(null);
-  const wasNearBottomBeforeInputRef = useRef(true);
-
-  // Until Telegram theme is fully applied in React, use launch hash colors (sync, no grey flash).
-  const launchPrimary =
-    typeof window !== "undefined" ? getPrimaryTextColorFromLaunch() : null;
-  const inputColor = themeBgReady ? colors.primary : (launchPrimary ?? colors.primary);
-
-  const measureAndResize = useCallback(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    // Let React control the height via dynamicHeight; we only measure the
-    // intrinsic content height (including inner padding).
-    el.style.height = "auto";
-    const fullScrollHeight = el.scrollHeight;
-    setContentHeight(fullScrollHeight);
-  }, []);
-
-  const handleInput = useCallback(
-    (e: React.FormEvent<HTMLTextAreaElement>) => {
-      const target = e.target as HTMLTextAreaElement;
-      const range = Math.max(0, target.scrollHeight - target.clientHeight);
-      const isNearBottom =
-        range <= 0 || target.scrollTop >= range - AUTO_SCROLL_THRESHOLD;
-      wasNearBottomBeforeInputRef.current = isNearBottom;
-      setValue(target.value);
-      requestAnimationFrame(measureAndResize);
-    },
-    [measureAndResize]
-  );
-
-  useEffect(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    const onScroll = () => {
-      const scrollTop = el.scrollTop;
-      const contentH = el.scrollHeight;
-      const clientH = el.clientHeight;
-      const range = Math.max(0, contentH - clientH);
-      wasNearBottomBeforeInputRef.current =
-        range <= 0 || scrollTop >= range - AUTO_SCROLL_THRESHOLD;
-      setScrollY(scrollTop);
-      setDomScrollRange(range);
-    };
-    el.addEventListener("scroll", onScroll, { passive: true });
-    return () => el.removeEventListener("scroll", onScroll);
-  }, [value]);
-
-  useEffect(() => {
-    const id = requestAnimationFrame(() => measureAndResize());
-    return () => cancelAnimationFrame(id);
-  }, [measureAndResize]);
-
-  // Web-only DOM mirror: measure real wrapped text height (including INNER_PADDING),
-  // using a pixel-identical clone of the textarea's computed styles.
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-
-    let el = domMirrorRef.current;
-    if (!el) {
-      el = document.createElement("div");
-      domMirrorRef.current = el;
-      el.style.position = "absolute";
-      el.style.visibility = "hidden";
-      el.style.pointerEvents = "none";
-      el.style.whiteSpace = "pre-wrap";
-      el.style.wordBreak = "break-word";
-      el.style.left = "-9999px";
-      el.style.top = "-9999px";
-      document.body.appendChild(el);
-    }
-
-    const host = textareaRef.current;
-    if (host) {
-      const rect = host.getBoundingClientRect();
-      const cs = window.getComputedStyle(host);
-
-      // Match width and all layout‑critical styles.
-      el.style.width = `${rect.width}px`;
-      el.style.boxSizing = cs.boxSizing;
-      el.style.paddingTop = cs.paddingTop;
-      el.style.paddingBottom = cs.paddingBottom;
-      el.style.paddingLeft = cs.paddingLeft;
-      el.style.paddingRight = cs.paddingRight;
-      el.style.border = cs.border;
-      el.style.outline = cs.outline;
-      el.style.fontFamily = cs.fontFamily;
-      el.style.fontSize = cs.fontSize;
-      el.style.fontWeight = cs.fontWeight as string;
-      el.style.lineHeight = cs.lineHeight;
-      el.style.letterSpacing = cs.letterSpacing;
-      el.style.textTransform = cs.textTransform;
-      el.style.direction = cs.direction;
-      el.style.textAlign = cs.textAlign;
-    }
-
-    el.textContent = value || " ";
-    const h = el.getBoundingClientRect().height;
-    setDomMirrorHeight(Number.isFinite(h) && h > 0 ? h : null);
-  }, [value]);
-
-  // Intrinsic text height (without inner gaps). Prefer the DOM mirror
-  // measurement when available so shrink-on-erase works reliably.
-  const baseHeight =
-    domMirrorHeight != null ? domMirrorHeight : contentHeight;
-  const effectiveTextHeight = Math.max(0, baseHeight - INNER_PADDING * 2);
-  // Use a threshold so we only switch to the next line once most of the
-  // next 20px slot is actually used (avoids early jumps on a few pixels).
-  const rawLines = Math.max(
-    1,
-    Math.floor((effectiveTextHeight + LINE_HEIGHT * 0.2) / LINE_HEIGHT),
-  );
-  // Visually we allow up to 7 full lines; the 8th+ line uses scroll.
-  const visibleLines = Math.min(rawLines, MAX_LINES_BEFORE_SCROLL);
-  // Final height: 2 * INNER_PADDING for gaps + visibleLines * lineHeight,
-  // clamped between 60 and 180px.
-  const dynamicHeight = Math.max(
-    60,
-    Math.min(
-      MAX_BAR_HEIGHT,
-      INNER_PADDING * 2 + visibleLines * LINE_HEIGHT,
-    ),
-  );
-  const rowHeight = dynamicHeight;
-  const viewportHeight = rowHeight;
-  // Use height that includes 20px top + bottom gaps for scroll math (same as dynamicHeight formula).
-  const contentHeightWithGaps = baseHeight;
-  const scrollRange = Math.max(contentHeightWithGaps - viewportHeight, 0);
-  // Enter scroll mode as soon as content is taller than the visible viewport (i.e. from the 8th line).
-  const isScrollMode = contentHeightWithGaps > viewportHeight && scrollRange > 0;
-  const showScrollbar = isScrollMode;
-  // The scrollbar track always matches the visible input height.
-  const barHeight = rowHeight;
-
-  // Debug: log bar and textarea heights whenever they change so we can
-  // verify that they stay perfectly in sync (e.g. 3 lines → 100px).
-  useEffect(() => {
-    const el = textareaRef.current;
-    const domClient = el?.clientHeight ?? null;
-    const domScroll = el?.scrollHeight ?? null;
-    // eslint-disable-next-line no-console
-    console.log("[GlobalBottomBarWeb] heights", {
-      lines: rawLines,
-      dynamicHeight,
-      barHeight,
-      viewportHeight,
-      contentHeight,
-      domMirrorHeight,
-      domClient,
-      domScroll,
-    });
-  }, [rawLines, dynamicHeight, barHeight, viewportHeight, contentHeight, domMirrorHeight]);
-
-
-  // When the 7th line first appears (i.e. we reach the max bar height but do
-  // not yet need scroll), shift the text up by one inner padding so the last
-  // visible line sits perfectly against the arrow baseline.
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const el = textareaRef.current;
-    if (!el) return;
-    const isAtMaxHeight = dynamicHeight >= MAX_BAR_HEIGHT;
-    if (
-      rawLines === 7 &&
-      isAtMaxHeight &&
-      el.scrollTop === 0 &&
-      wasNearBottomBeforeInputRef.current
-    ) {
-      el.scrollTop = INNER_PADDING;
-    }
-  }, [rawLines, dynamicHeight]);
-
-  // In scroll mode, keep the textarea scrolled to the bottom so the last line
-  // and the 20px bottom gap are visible, and the scroll indicator stays at bottom.
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const el = textareaRef.current;
-    if (!el || !isScrollMode) return;
-    if (!wasNearBottomBeforeInputRef.current) return;
-    const range = el.scrollHeight - el.clientHeight;
-    if (range <= 0) return;
-    const raf = requestAnimationFrame(() => {
-      el.scrollTop = range;
-      setScrollY(range);
-      setDomScrollRange(range);
-    });
-    return () => cancelAnimationFrame(raf);
-  }, [value, isScrollMode]);
-
-  let indicatorHeight = 0;
-  let topPosition = 0;
-  const effectiveScrollRange = domScrollRange > 0 ? domScrollRange : scrollRange;
-  if (showScrollbar && effectiveScrollRange > 0 && contentHeightWithGaps > 0 && barHeight != null) {
-    const indicatorHeightRatio = Math.min(1, Math.max(0, viewportHeight / contentHeightWithGaps));
-    indicatorHeight = Math.min(barHeight, Math.max(0, barHeight * indicatorHeightRatio));
-    const scrollPosition = Math.min(1, Math.max(0, scrollY / effectiveScrollRange));
-    const availableSpace = Math.min(barHeight, Math.max(0, barHeight - indicatorHeight));
-    topPosition = Math.min(barHeight, Math.max(0, scrollPosition * availableSpace));
-  }
-
-  const handleSend = useCallback(() => {
-    const text = value.trim();
-    if (!text) return;
-    setValue("");
-    // Optional: navigate to AI with prompt like GlobalBottomBar
-  }, [value]);
-
-  return (
-    <View style={[styles.wrapper, { backgroundColor }]}>
-      <View style={[styles.block, { backgroundColor }]}>
-        <View style={[styles.row, { height: rowHeight }]}>
-          <View style={styles.inputWrap}>
-            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
-            <textarea
-              ref={textareaRef}
-              data-global-bottom-bar-web
-              value={value}
-              onInput={handleInput}
-              onFocus={() => setIsFocused(true)}
-              onBlur={() => setIsFocused(false)}
-              rows={1}
-              style={{
-                width: "100%",
-                // Keep the DOM min/height/max in sync with our computed
-                // dynamicHeight so there is no intermediate smaller box
-                // (e.g. 60px when we expect 80px on 3 lines).
-                minHeight: dynamicHeight,
-                height: dynamicHeight,
-                maxHeight: dynamicHeight,
-                fontSize: 15,
-                lineHeight: `${LINE_HEIGHT}px`,
-                paddingTop: INNER_PADDING,
-                paddingBottom: INNER_PADDING,
-                paddingRight: 36,
-                boxSizing: "border-box",
-                resize: "none",
-                border: "none",
-                outline: "none",
-                color: inputColor,
-                backgroundColor: "transparent",
-                caretColor: inputColor,
-                ["--ai-placeholder-color" as string]: inputColor,
-                fontFamily: WEB_UI_SANS_STACK,
-                // Allow scroll exactly when content exceeds the visible viewport height.
-                overflow: contentHeightWithGaps > viewportHeight ? "auto" : "hidden",
-              }}
-              placeholder={isFocused ? "" : "AI and search"}
-            />
-          </View>
-          <Pressable style={styles.arrowWrap} onPress={handleSend} accessibilityRole="button" accessibilityLabel="Send">
-            <Svg width={icons.apply.width} height={icons.apply.height} viewBox="0 0 15 10">
-              <Path
-                d="M1 5H10M6 1L10 5L6 9"
-                stroke={inputColor}
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </Svg>
-          </Pressable>
-        </View>
-      </View>
-      {showScrollbar && indicatorHeight > 0 && barHeight != null && (
-        <View style={[styles.scrollbarContainer, { height: barHeight }]}>
-          <View
-            style={[
-              styles.scrollbarIndicator,
-              { height: indicatorHeight, marginTop: topPosition, backgroundColor: colors.secondary },
-            ]}
-          />
-        </View>
-      )}
-    </View>
-  );
-}
-
-const SCROLLBAR_INSET = 5;
-
-const styles = StyleSheet.create({
-  wrapper: {
-    width: "100%",
-    position: "relative",
-  },
-  block: {
-    width: "100%",
-    maxWidth: maxContentWidth,
-    alignSelf: "center",
-    paddingHorizontal: HORIZONTAL_PADDING,
-    // No vertical gap outside the input; the textarea occupies the full bar height.
-    paddingTop: 0,
-    paddingBottom: 0,
-  },
-  row: {
-    flexDirection: "row",
-    // Let children fill the full bar height; vertical positioning is handled
-    // inside each child (textarea via INNER_PADDING, arrow via paddingBottom).
-    alignItems: "stretch",
-    gap: 5,
-    position: "relative",
-  },
-  inputWrap: {
-    flex: 1,
-    position: "relative",
-    // Keep the textarea stuck to the top of the bar; vertical gaps are
-    // handled via INNER_PADDING inside the textarea itself.
-    justifyContent: "flex-start",
-  },
-  arrowWrap: {
-    // Stick the arrow icon to the bottom edge of the bar with 25px padding.
-    justifyContent: "flex-end",
-    alignItems: "center",
-    paddingBottom: 25,
-  },
-  scrollbarContainer: {
-    position: "absolute",
-    right: SCROLLBAR_INSET,
-    top: 0,
-    alignItems: "flex-start",
-    justifyContent: "flex-start",
-  },
-  scrollbarIndicator: {
-    width: 1,
-  },
-});

package/app/components/GlobalLogoBar.tsx

@@ -1,108 +0,0 @@
-/**
- * Global logo bar: same layout and behaviour as Dart GlobalLogoBar.
- * All Telegram data from useTelegram() (single source: Telegram.ts / Telegram.tsx).
- */
-import React, { useMemo } from "react";
-import { View, Pressable, StyleSheet } from "react-native";
-import { useRouter } from "expo-router";
-import { useTelegram } from "./Telegram";
-import { HyperlinksSpaceLogo } from "./HyperlinksSpaceLogo";
-import { useColors } from "../theme";
-
-const LOGO_HEIGHT = 32;
-const BOTTOM_PADDING = 10;
-const HORIZONTAL_PADDING = 15;
-const BROWSER_FALLBACK_TOP_PADDING = 30;
-
-function useLogoTopPadding(
-  safeAreaInsetTop: number,
-  contentSafeAreaInsetTop: number
-): number {
-  return useMemo(() => {
-    if (safeAreaInsetTop === 0 && contentSafeAreaInsetTop === 0) {
-      return BROWSER_FALLBACK_TOP_PADDING;
-    }
-    const value = safeAreaInsetTop + contentSafeAreaInsetTop / 2 - 16;
-    return Number.isFinite(value) ? value : BROWSER_FALLBACK_TOP_PADDING;
-  }, [safeAreaInsetTop, contentSafeAreaInsetTop]);
-}
-
-export function GlobalLogoBar() {
-  const router = useRouter();
-  const colors = useColors();
-  const {
-    isInTelegram,
-    triggerHaptic,
-    safeAreaInsetTop,
-    contentSafeAreaInsetTop,
-    isFullscreen,
-    themeBgReady,
-  } = useTelegram();
-
-  const backgroundColor = themeBgReady ? colors.background : "transparent";
-
-  const topPadding = useLogoTopPadding(safeAreaInsetTop, contentSafeAreaInsetTop);
-  const blockHeight = topPadding + LOGO_HEIGHT + BOTTOM_PADDING;
-
-  const shouldShow = useMemo(() => {
-    if (!isInTelegram) return true;
-    return isFullscreen;
-  }, [isInTelegram, isFullscreen]);
-
-  const onPress = () => {
-    triggerHaptic("light");
-    router.replace("/");
-  };
-
-  if (!shouldShow) {
-    return <View style={[styles.container, { height: 0, backgroundColor }]} />;
-  }
-
-  return (
-    <View style={[styles.container, { height: blockHeight, backgroundColor }]}>
-      <View
-        style={[
-          styles.inner,
-          {
-            paddingTop: topPadding,
-            paddingBottom: BOTTOM_PADDING,
-            paddingHorizontal: HORIZONTAL_PADDING,
-          },
-        ]}
-      >
-        <Pressable
-          onPress={onPress}
-          style={styles.logoWrap}
-          accessibilityRole="button"
-          accessibilityLabel="Go to home"
-        >
-          <View style={styles.logoBox}>
-            <HyperlinksSpaceLogo width={LOGO_HEIGHT} height={LOGO_HEIGHT} />
-          </View>
-        </Pressable>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    backgroundColor: "transparent",
-    flexShrink: 0, /* keep header fixed height when keyboard opens (flex layout, no shift) */
-  },
-  inner: {
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  logoWrap: {
-    maxWidth: 600,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  logoBox: {
-    width: LOGO_HEIGHT,
-    height: LOGO_HEIGHT,
-  },
-});

package/app/components/GlobalLogoBarFallback.tsx

@@ -1,66 +0,0 @@
-/**
- * Fallback logo bar when TMA SDK is not available (e.g. browser).
- * Same layout: 30px top padding, 32px logo, 10px bottom, 15px horizontal.
- */
-import React from "react";
-import { View, Pressable, StyleSheet } from "react-native";
-import { useRouter } from "expo-router";
-import { HyperlinksSpaceLogo } from "./HyperlinksSpaceLogo";
-
-const LOGO_HEIGHT = 32;
-const BOTTOM_PADDING = 10;
-const HORIZONTAL_PADDING = 15;
-const BROWSER_FALLBACK_TOP_PADDING = 30;
-const BLOCK_HEIGHT =
-  BROWSER_FALLBACK_TOP_PADDING + LOGO_HEIGHT + BOTTOM_PADDING;
-
-export function GlobalLogoBarFallback() {
-  const router = useRouter();
-
-  return (
-    <View style={[styles.container, { height: BLOCK_HEIGHT }]}>
-      <View
-        style={[
-          styles.inner,
-          {
-            paddingTop: BROWSER_FALLBACK_TOP_PADDING,
-            paddingBottom: BOTTOM_PADDING,
-            paddingHorizontal: HORIZONTAL_PADDING,
-          },
-        ]}
-      >
-        <Pressable
-          onPress={() => router.replace("/")}
-          style={styles.logoWrap}
-          accessibilityRole="button"
-          accessibilityLabel="Go to home"
-        >
-          <View style={styles.logoBox}>
-            <HyperlinksSpaceLogo width={LOGO_HEIGHT} height={LOGO_HEIGHT} />
-          </View>
-        </Pressable>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    backgroundColor: "transparent",
-  },
-  inner: {
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  logoWrap: {
-    maxWidth: 600,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  logoBox: {
-    width: LOGO_HEIGHT,
-    height: LOGO_HEIGHT,
-  },
-});

package/app/components/GlobalLogoBarWithFallback.tsx

@@ -1,24 +0,0 @@
-/**
- * Renders GlobalLogoBar; on SDK error (e.g. browser) renders GlobalLogoBarFallback.
- */
-import React, { Component, type ReactNode } from "react";
-import { GlobalLogoBar } from "./GlobalLogoBar";
-import { GlobalLogoBarFallback } from "./GlobalLogoBarFallback";
-
-type Props = Record<string, never>;
-type State = { hasError: boolean };
-
-export class GlobalLogoBarWithFallback extends Component<Props, State> {
-  state: State = { hasError: false };
-
-  static getDerivedStateFromError(): State {
-    return { hasError: true };
-  }
-
-  render(): ReactNode {
-    if (this.state.hasError) {
-      return <GlobalLogoBarFallback />;
-    }
-    return <GlobalLogoBar />;
-  }
-}

package/app/components/HyperlinksSpaceLogo.tsx

@@ -1,29 +0,0 @@
-/**
- * 32×32 logo matching Dart GlobalLogoBar asset (HyperlinksSpace.svg).
- * Inline SVG paths to avoid asset transformer; fill #1AAA11.
- */
-import React from "react";
-import Svg, { Path } from "react-native-svg";
-
-const LOGO_SIZE = 32;
-
-export function HyperlinksSpaceLogo({
-  width = LOGO_SIZE,
-  height = LOGO_SIZE,
-}: {
-  width?: number;
-  height?: number;
-}) {
-  return (
-    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
-      <Path
-        d="M6 24L13.2 19.2L17.28 24H24V0H22.8V22.8H18L6 7.2V24Z"
-        fill="#1AAA11"
-      />
-      <Path
-        d="M18 0L10.8 4.8L6.72 0H0V24H1.2V1.2H6L18 16.8V0Z"
-        fill="#1AAA11"
-      />
-    </Svg>
-  );
-}