@libreapps/ui 5.4.1

package/docs/utils/use-copy-button.ts

@@ -0,0 +1,39 @@
+'use client';
+import {
+  type MouseEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+export function useCopyButton(
+  onCopy: () => void | Promise<void>,
+): [checked: boolean, onClick: MouseEventHandler] {
+  const [checked, setChecked] = useState(false);
+  const callbackRef = useRef(onCopy);
+  const timeoutRef = useRef<number | null>(null);
+
+  callbackRef.current = onCopy;
+
+  const onClick: MouseEventHandler = useCallback(() => {
+    if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+    const res = Promise.resolve(callbackRef.current());
+
+    void res.then(() => {
+      setChecked(true);
+      timeoutRef.current = window.setTimeout(() => {
+        setChecked(false);
+      }, 1500);
+    });
+  }, []);
+
+  // Avoid updates after being unmounted
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return [checked, onClick];
+}

package/docs/utils/use-footer-items.ts

@@ -0,0 +1,27 @@
+import { useTreeContext } from '@/contexts/tree';
+import type * as PageTree from '@hanzo/docs-core/page-tree';
+
+const footerCache = new Map<string, PageTree.Item[]>();
+
+/**
+ * @returns a list of page tree items (linear), that you can obtain footer items
+ */
+export function useFooterItems(): PageTree.Item[] {
+  const { root } = useTreeContext();
+  const cached = footerCache.get(root.$id);
+  if (cached) return cached;
+
+  const list: PageTree.Item[] = [];
+  function onNode(node: PageTree.Node) {
+    if (node.type === 'folder') {
+      if (node.index) onNode(node.index);
+      for (const child of node.children) onNode(child);
+    } else if (node.type === 'page' && !node.external) {
+      list.push(node);
+    }
+  }
+
+  for (const child of root.children) onNode(child);
+  footerCache.set(root.$id, list);
+  return list;
+}

package/docs/utils/use-is-scroll-top.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export function useIsScrollTop({ enabled = true }: { enabled?: boolean }) {
+  const [isTop, setIsTop] = useState<boolean | undefined>();
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const listener = () => {
+      setIsTop(window.scrollY < 10);
+    };
+
+    listener();
+    window.addEventListener('scroll', listener);
+    return () => {
+      window.removeEventListener('scroll', listener);
+    };
+  }, [enabled]);
+
+  return isTop;
+}

package/finance/README.md

@@ -0,0 +1,164 @@
+# @libreapps/finance
+
+Financial trading widgets and components powered by TradingView for React applications.
+
+## Features
+
+- 📊 **Advanced Charts** - Full-featured TradingView charts with symbol switching
+- 📈 **Market Overview** - Multi-asset market overview with indices, futures, bonds, and forex
+- 📰 **News Timeline** - Real-time financial news and market events
+- 🎯 **Market Screeners** - Pre-configured screeners for stocks, crypto, and forex
+- 📉 **Ticker Tape** - Scrolling ticker showing real-time prices
+- 💹 **Trading Panel** - Complete trading interface with buy/sell functionality
+
+## Installation
+
+```bash
+pnpm add @libreapps/finance
+```
+
+## Peer Dependencies
+
+```bash
+pnpm add react react-dom lucide-react next
+```
+
+## Usage
+
+### Advanced Chart
+
+Full-featured TradingView chart with symbol switching:
+
+```tsx
+import { AdvancedChart } from '@libreapps/finance'
+
+function TradingPage() {
+  return <AdvancedChart symbol="NASDAQ:AAPL" />
+}
+```
+
+### Market Overview
+
+Multi-asset market overview widget:
+
+```tsx
+import { MarketOverview } from '@libreapps/finance'
+
+function DashboardPage() {
+  return <MarketOverview />
+}
+```
+
+### Ticker Tape
+
+Scrolling ticker showing real-time prices:
+
+```tsx
+import { TickerTape } from '@libreapps/finance'
+
+function Layout() {
+  return (
+    <>
+      <TickerTape />
+      {/* Your content */}
+    </>
+  )
+}
+```
+
+### Market Screeners
+
+Pre-configured screeners for different asset classes:
+
+```tsx
+import { StockScreener, CryptoScreener, ForexScreener } from '@libreapps/finance'
+
+function ScreenersPage() {
+  return (
+    <div>
+      <h2>Stocks</h2>
+      <StockScreener />
+      
+      <h2>Crypto</h2>
+      <CryptoScreener />
+      
+      <h2>Forex</h2>
+      <ForexScreener />
+    </div>
+  )
+}
+```
+
+### News Timeline
+
+Financial news and market events:
+
+```tsx
+import { NewsTimeline } from '@libreapps/finance'
+
+function NewsPage() {
+  return <NewsTimeline />
+}
+```
+
+### Trading Panel
+
+Complete trading interface with buy/sell functionality:
+
+```tsx
+import { TradingPanel } from '@libreapps/finance'
+
+function TradePage() {
+  return (
+    <TradingPanel 
+      symbol="AAPL"
+      currentPrice={150.25}
+    />
+  )
+}
+```
+
+## Components
+
+### AdvancedChart
+
+Props:
+- `symbol` (string, optional): Symbol to display, default: "NASDAQ:AAPL"
+
+### MarketOverview
+
+No props required. Displays indices, futures, bonds, and forex markets.
+
+### TickerTape
+
+No props required. Shows major indices and popular stocks.
+
+### StockScreener
+
+No props required. Shows US stock market screener.
+
+### CryptoScreener
+
+No props required. Shows cryptocurrency screener.
+
+### ForexScreener
+
+No props required. Shows forex market screener.
+
+### NewsTimeline
+
+No props required. Shows latest financial news.
+
+### TradingPanel
+
+Props:
+- `symbol` (string, required): Trading symbol
+- `currentPrice` (number, required): Current price of the asset
+
+## Styling
+
+All components use dark mode by default and support Tailwind CSS classes. They are fully responsive and will adapt to their container size.
+
+## License
+
+BSD-3-Clause © LibreApps AI, Inc.

package/finance/components/AdvancedChart.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function AdvancedChart({ symbol = 'NASDAQ:AAPL' }: { symbol?: string }) {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      width: '100%',
+      height: '600',
+      symbol,
+      interval: 'D',
+      timezone: 'Etc/UTC',
+      theme: 'dark',
+      style: '1',
+      locale: 'en',
+      allow_symbol_change: true,
+      calendar: false,
+      support_host: 'https://www.tradingview.com',
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [symbol])
+
+  return (
+    <div className="tradingview-widget-container w-full h-[600px]" ref={container}>
+      <div className="tradingview-widget-container__widget h-full"></div>
+    </div>
+  )
+}
+
+export default memo(AdvancedChart)

package/finance/components/CompanyProfile.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+export interface CompanyProfileProps {
+  symbol?: string
+  width?: string | number
+  height?: string | number
+  locale?: string
+  colorTheme?: 'light' | 'dark'
+  isTransparent?: boolean
+}
+
+export default function CompanyProfile({
+  symbol = 'NASDAQ:AAPL',
+  width = '100%',
+  height = '100%',
+  locale = 'en',
+  colorTheme = 'dark',
+  isTransparent = false
+}: CompanyProfileProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (containerRef.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    containerRef.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-symbol-profile.js'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      width,
+      height,
+      colorTheme,
+      isTransparent,
+      symbol,
+      locale,
+    })
+
+    containerRef.current.appendChild(script)
+
+    return () => {
+      if (containerRef.current) {
+        // Remove initialization flag on unmount
+        delete containerRef.current.dataset.initialized
+        // Remove all scripts
+        const scripts = containerRef.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [symbol, width, height, locale, colorTheme, isTransparent])
+
+  return (
+    <div className="tradingview-widget-container" ref={containerRef}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}

package/finance/components/CryptoScreener.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function CryptoScreener() {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-screener.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      defaultColumn: 'overview',
+      screener_type: 'crypto_mkt',
+      displayCurrency: 'USD',
+      colorTheme: 'dark',
+      isTransparent: false,
+      locale: 'en',
+      width: '100%',
+      height: 550,
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [])
+
+  return (
+    <div className="tradingview-widget-container w-full" ref={container}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}
+
+export default memo(CryptoScreener)

package/finance/components/Financials.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+export interface FinancialsProps {
+  symbol?: string
+  width?: string | number
+  height?: string | number
+  locale?: string
+  colorTheme?: 'light' | 'dark'
+  isTransparent?: boolean
+  displayMode?: 'regular' | 'compact' | 'adaptive'
+  largeChartUrl?: string
+}
+
+export default function Financials({
+  symbol = 'NASDAQ:AAPL',
+  width = '100%',
+  height = '500',
+  locale = 'en',
+  colorTheme = 'dark',
+  isTransparent = false,
+  displayMode = 'adaptive',
+  largeChartUrl = ''
+}: FinancialsProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (containerRef.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    containerRef.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-financials.js'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      colorTheme,
+      isTransparent,
+      largeChartUrl,
+      displayMode,
+      width,
+      height,
+      symbol,
+      locale,
+    })
+
+    containerRef.current.appendChild(script)
+
+    return () => {
+      if (containerRef.current) {
+        // Remove initialization flag on unmount
+        delete containerRef.current.dataset.initialized
+        // Remove all scripts
+        const scripts = containerRef.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [symbol, width, height, locale, colorTheme, isTransparent, displayMode, largeChartUrl])
+
+  return (
+    <div className="tradingview-widget-container w-full h-[500px]" ref={containerRef}>
+      <div className="tradingview-widget-container__widget h-full"></div>
+    </div>
+  )
+}

package/finance/components/ForexScreener.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function ForexScreener() {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-screener.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      market: 'forex',
+      showToolbar: true,
+      defaultColumn: 'overview',
+      defaultScreen: 'general',
+      isTransparent: false,
+      locale: 'en',
+      colorTheme: 'dark',
+      width: '100%',
+      height: 550,
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [])
+
+  return (
+    <div className="tradingview-widget-container w-full" ref={container}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}
+
+export default memo(ForexScreener)

package/finance/components/MarketOverview.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useEffect, useRef, memo } from 'react'
+
+function MarketOverview() {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) return
+
+    // Check if widget is already initialized using data attribute
+    if (container.current.dataset.initialized === 'true') {
+      return // Widget already initialized, skip
+    }
+
+    // Mark as initialized before adding script
+    container.current.dataset.initialized = 'true'
+
+    const script = document.createElement('script')
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
+    script.type = 'text/javascript'
+    script.async = true
+    script.innerHTML = JSON.stringify({
+      colorTheme: 'dark',
+      dateRange: '12M',
+      locale: 'en',
+      largeChartUrl: '',
+      isTransparent: false,
+      showFloatingTooltip: false,
+      plotLineColorGrowing: 'rgba(41, 98, 255, 1)',
+      plotLineColorFalling: 'rgba(41, 98, 255, 1)',
+      gridLineColor: 'rgba(240, 243, 250, 0)',
+      scaleFontColor: '#DBDBDB',
+      belowLineFillColorGrowing: 'rgba(41, 98, 255, 0.12)',
+      belowLineFillColorFalling: 'rgba(41, 98, 255, 0.12)',
+      belowLineFillColorGrowingBottom: 'rgba(41, 98, 255, 0)',
+      belowLineFillColorFallingBottom: 'rgba(41, 98, 255, 0)',
+      symbolActiveColor: 'rgba(41, 98, 255, 0.12)',
+      tabs: [
+        {
+          title: 'Indices',
+          symbols: [
+            { s: 'FOREXCOM:SPXUSD', d: 'S&P 500 Index' },
+            { s: 'FOREXCOM:NSXUSD', d: 'US 100 Cash CFD' },
+            { s: 'FOREXCOM:DJI', d: 'Dow Jones Industrial Average Index' },
+            { s: 'INDEX:NKY', d: 'Japan 225' },
+            { s: 'INDEX:DEU40', d: 'DAX Index' },
+            { s: 'FOREXCOM:UKXGBP', d: 'FTSE 100 Index' },
+          ],
+          originalTitle: 'Indices',
+        },
+        {
+          title: 'Futures',
+          symbols: [
+            { s: 'BMFBOVESPA:ISP1!', d: 'S&P 500' },
+            { s: 'BMFBOVESPA:EUR1!', d: 'Euro' },
+            { s: 'CMCMARKETS:GOLD', d: 'Gold' },
+            { s: 'PYTH:WTI3!', d: 'WTI Crude Oil' },
+            { s: 'BMFBOVESPA:CCM1!', d: 'Corn' },
+          ],
+          originalTitle: 'Futures',
+        },
+        {
+          title: 'Bonds',
+          symbols: [
+            { s: 'EUREX:FGBL1!', d: 'Euro Bund' },
+            { s: 'EUREX:FBTP1!', d: 'Euro BTP' },
+            { s: 'EUREX:FGBM1!', d: 'Euro BOBL' },
+          ],
+          originalTitle: 'Bonds',
+        },
+        {
+          title: 'Forex',
+          symbols: [
+            { s: 'FX:EURUSD', d: 'EUR to USD' },
+            { s: 'FX:GBPUSD', d: 'GBP to USD' },
+            { s: 'FX:USDJPY', d: 'USD to JPY' },
+            { s: 'FX:USDCHF', d: 'USD to CHF' },
+            { s: 'FX:AUDUSD', d: 'AUD to USD' },
+            { s: 'FX:USDCAD', d: 'USD to CAD' },
+          ],
+          originalTitle: 'Forex',
+        },
+      ],
+      support_host: 'https://www.tradingview.com',
+      backgroundColor: '#0f0f0f',
+      width: '100%',
+      height: '550',
+      showSymbolLogo: true,
+      showChart: true,
+    })
+
+    container.current.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      if (container.current) {
+        // Remove initialization flag on unmount
+        delete container.current.dataset.initialized
+        // Remove all scripts
+        const scripts = container.current.querySelectorAll('script')
+        scripts.forEach((s) => s.remove())
+      }
+    }
+  }, [])
+
+  return (
+    <div className="tradingview-widget-container w-full" ref={container}>
+      <div className="tradingview-widget-container__widget"></div>
+    </div>
+  )
+}
+
+export default memo(MarketOverview)