@float.js/core 2.0.1 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cli/index.js CHANGED
@@ -1699,6 +1699,499 @@ var FLOAT_ERROR_OVERLAY = `
1699
1699
  </script>
1700
1700
  `;
1701
1701
 
1702
+ // src/client/welcome-page.ts
1703
+ init_esm_shims();
1704
+ function generateWelcomePage() {
1705
+ return `<!DOCTYPE html>
1706
+ <html lang="en">
1707
+ <head>
1708
+ <meta charset="UTF-8">
1709
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
1710
+ <title>Welcome to Float.js</title>
1711
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%236366f1'/><stop offset='100%25' stop-color='%23d946ef'/></linearGradient></defs><circle cx='16' cy='16' r='14' fill='url(%23g)'/></svg>">
1712
+ <style>
1713
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
1714
+
1715
+ * { margin: 0; padding: 0; box-sizing: border-box; }
1716
+
1717
+ :root {
1718
+ --float-purple: #8b5cf6;
1719
+ --float-indigo: #6366f1;
1720
+ --float-pink: #d946ef;
1721
+ --float-cyan: #06b6d4;
1722
+ }
1723
+
1724
+ body {
1725
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
1726
+ background: #0a0a0b;
1727
+ color: white;
1728
+ min-height: 100vh;
1729
+ overflow-x: hidden;
1730
+ }
1731
+
1732
+ /* Animated background */
1733
+ .bg-gradient {
1734
+ position: fixed;
1735
+ inset: 0;
1736
+ background:
1737
+ radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.3), transparent),
1738
+ radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139, 92, 246, 0.15), transparent),
1739
+ radial-gradient(ellipse 40% 30% at 20% 80%, rgba(217, 70, 239, 0.1), transparent);
1740
+ pointer-events: none;
1741
+ }
1742
+
1743
+ .bg-grid {
1744
+ position: fixed;
1745
+ inset: 0;
1746
+ background-image:
1747
+ linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
1748
+ linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
1749
+ background-size: 60px 60px;
1750
+ pointer-events: none;
1751
+ }
1752
+
1753
+ /* Floating orbs */
1754
+ .orb {
1755
+ position: fixed;
1756
+ border-radius: 50%;
1757
+ filter: blur(80px);
1758
+ opacity: 0.5;
1759
+ animation: float 20s ease-in-out infinite;
1760
+ pointer-events: none;
1761
+ }
1762
+
1763
+ .orb-1 {
1764
+ width: 400px;
1765
+ height: 400px;
1766
+ background: var(--float-purple);
1767
+ top: -100px;
1768
+ right: -100px;
1769
+ animation-delay: 0s;
1770
+ }
1771
+
1772
+ .orb-2 {
1773
+ width: 300px;
1774
+ height: 300px;
1775
+ background: var(--float-pink);
1776
+ bottom: -50px;
1777
+ left: -50px;
1778
+ animation-delay: -7s;
1779
+ }
1780
+
1781
+ .orb-3 {
1782
+ width: 200px;
1783
+ height: 200px;
1784
+ background: var(--float-cyan);
1785
+ top: 50%;
1786
+ left: 50%;
1787
+ animation-delay: -14s;
1788
+ }
1789
+
1790
+ @keyframes float {
1791
+ 0%, 100% { transform: translate(0, 0) scale(1); }
1792
+ 25% { transform: translate(30px, -30px) scale(1.1); }
1793
+ 50% { transform: translate(-20px, 20px) scale(0.9); }
1794
+ 75% { transform: translate(20px, 10px) scale(1.05); }
1795
+ }
1796
+
1797
+ /* Main content */
1798
+ .container {
1799
+ position: relative;
1800
+ max-width: 1200px;
1801
+ margin: 0 auto;
1802
+ padding: 60px 24px;
1803
+ min-height: 100vh;
1804
+ display: flex;
1805
+ flex-direction: column;
1806
+ align-items: center;
1807
+ justify-content: center;
1808
+ }
1809
+
1810
+ /* Logo */
1811
+ .logo {
1812
+ margin-bottom: 48px;
1813
+ animation: fadeInUp 0.8s ease-out;
1814
+ }
1815
+
1816
+ .logo svg {
1817
+ width: 80px;
1818
+ height: 80px;
1819
+ filter: drop-shadow(0 0 40px rgba(139, 92, 246, 0.5));
1820
+ }
1821
+
1822
+ /* Hero */
1823
+ .hero {
1824
+ text-align: center;
1825
+ margin-bottom: 64px;
1826
+ }
1827
+
1828
+ .hero h1 {
1829
+ font-size: clamp(48px, 10vw, 80px);
1830
+ font-weight: 800;
1831
+ letter-spacing: -0.03em;
1832
+ line-height: 1.1;
1833
+ margin-bottom: 24px;
1834
+ animation: fadeInUp 0.8s ease-out 0.1s both;
1835
+ }
1836
+
1837
+ .hero h1 .gradient {
1838
+ background: linear-gradient(135deg, var(--float-indigo), var(--float-purple), var(--float-pink));
1839
+ -webkit-background-clip: text;
1840
+ -webkit-text-fill-color: transparent;
1841
+ background-clip: text;
1842
+ }
1843
+
1844
+ .hero p {
1845
+ font-size: 20px;
1846
+ color: rgba(255,255,255,0.6);
1847
+ max-width: 600px;
1848
+ margin: 0 auto;
1849
+ line-height: 1.7;
1850
+ animation: fadeInUp 0.8s ease-out 0.2s both;
1851
+ }
1852
+
1853
+ /* Features */
1854
+ .features {
1855
+ display: grid;
1856
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1857
+ gap: 20px;
1858
+ width: 100%;
1859
+ max-width: 900px;
1860
+ margin-bottom: 64px;
1861
+ }
1862
+
1863
+ .feature {
1864
+ background: rgba(255,255,255,0.03);
1865
+ border: 1px solid rgba(255,255,255,0.06);
1866
+ border-radius: 20px;
1867
+ padding: 28px;
1868
+ transition: all 0.3s ease;
1869
+ animation: fadeInUp 0.8s ease-out both;
1870
+ }
1871
+
1872
+ .feature:nth-child(1) { animation-delay: 0.3s; }
1873
+ .feature:nth-child(2) { animation-delay: 0.4s; }
1874
+ .feature:nth-child(3) { animation-delay: 0.5s; }
1875
+
1876
+ .feature:hover {
1877
+ background: rgba(255,255,255,0.05);
1878
+ border-color: rgba(139, 92, 246, 0.3);
1879
+ transform: translateY(-4px);
1880
+ }
1881
+
1882
+ .feature-icon {
1883
+ width: 48px;
1884
+ height: 48px;
1885
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
1886
+ border-radius: 14px;
1887
+ display: flex;
1888
+ align-items: center;
1889
+ justify-content: center;
1890
+ margin-bottom: 16px;
1891
+ font-size: 24px;
1892
+ }
1893
+
1894
+ .feature h3 {
1895
+ font-size: 18px;
1896
+ font-weight: 600;
1897
+ margin-bottom: 8px;
1898
+ }
1899
+
1900
+ .feature p {
1901
+ font-size: 14px;
1902
+ color: rgba(255,255,255,0.5);
1903
+ line-height: 1.6;
1904
+ }
1905
+
1906
+ /* Code block */
1907
+ .code-section {
1908
+ width: 100%;
1909
+ max-width: 600px;
1910
+ animation: fadeInUp 0.8s ease-out 0.6s both;
1911
+ margin-bottom: 48px;
1912
+ }
1913
+
1914
+ .code-header {
1915
+ background: rgba(255,255,255,0.05);
1916
+ border: 1px solid rgba(255,255,255,0.08);
1917
+ border-bottom: none;
1918
+ border-radius: 16px 16px 0 0;
1919
+ padding: 14px 20px;
1920
+ display: flex;
1921
+ align-items: center;
1922
+ gap: 8px;
1923
+ }
1924
+
1925
+ .code-dots {
1926
+ display: flex;
1927
+ gap: 6px;
1928
+ }
1929
+
1930
+ .code-dot {
1931
+ width: 12px;
1932
+ height: 12px;
1933
+ border-radius: 50%;
1934
+ background: rgba(255,255,255,0.1);
1935
+ }
1936
+
1937
+ .code-dot:nth-child(1) { background: #ff5f57; }
1938
+ .code-dot:nth-child(2) { background: #febc2e; }
1939
+ .code-dot:nth-child(3) { background: #28c840; }
1940
+
1941
+ .code-title {
1942
+ margin-left: auto;
1943
+ font-size: 12px;
1944
+ color: rgba(255,255,255,0.4);
1945
+ }
1946
+
1947
+ .code-block {
1948
+ background: rgba(0,0,0,0.4);
1949
+ border: 1px solid rgba(255,255,255,0.08);
1950
+ border-radius: 0 0 16px 16px;
1951
+ padding: 24px;
1952
+ font-family: 'Monaco', 'Menlo', monospace;
1953
+ font-size: 14px;
1954
+ line-height: 1.8;
1955
+ overflow-x: auto;
1956
+ }
1957
+
1958
+ .code-line {
1959
+ display: flex;
1960
+ }
1961
+
1962
+ .code-number {
1963
+ color: rgba(255,255,255,0.2);
1964
+ width: 40px;
1965
+ flex-shrink: 0;
1966
+ user-select: none;
1967
+ }
1968
+
1969
+ .code-content {
1970
+ color: rgba(255,255,255,0.8);
1971
+ }
1972
+
1973
+ .code-keyword { color: #c792ea; }
1974
+ .code-string { color: #c3e88d; }
1975
+ .code-function { color: #82aaff; }
1976
+ .code-comment { color: rgba(255,255,255,0.3); }
1977
+ .code-tag { color: #f07178; }
1978
+ .code-attr { color: #ffcb6b; }
1979
+
1980
+ /* Quick start */
1981
+ .quick-start {
1982
+ text-align: center;
1983
+ animation: fadeInUp 0.8s ease-out 0.7s both;
1984
+ }
1985
+
1986
+ .quick-start h2 {
1987
+ font-size: 14px;
1988
+ font-weight: 500;
1989
+ color: rgba(255,255,255,0.4);
1990
+ text-transform: uppercase;
1991
+ letter-spacing: 0.1em;
1992
+ margin-bottom: 20px;
1993
+ }
1994
+
1995
+ .quick-start-cmd {
1996
+ display: inline-flex;
1997
+ align-items: center;
1998
+ gap: 12px;
1999
+ background: rgba(255,255,255,0.05);
2000
+ border: 1px solid rgba(255,255,255,0.1);
2001
+ border-radius: 12px;
2002
+ padding: 16px 24px;
2003
+ font-family: 'Monaco', 'Menlo', monospace;
2004
+ font-size: 15px;
2005
+ cursor: pointer;
2006
+ transition: all 0.2s;
2007
+ }
2008
+
2009
+ .quick-start-cmd:hover {
2010
+ background: rgba(255,255,255,0.08);
2011
+ border-color: rgba(139, 92, 246, 0.4);
2012
+ }
2013
+
2014
+ .quick-start-cmd .prompt {
2015
+ color: var(--float-purple);
2016
+ }
2017
+
2018
+ .quick-start-cmd .text {
2019
+ color: rgba(255,255,255,0.8);
2020
+ }
2021
+
2022
+ .quick-start-cmd .copy {
2023
+ opacity: 0.4;
2024
+ transition: opacity 0.2s;
2025
+ }
2026
+
2027
+ .quick-start-cmd:hover .copy {
2028
+ opacity: 0.8;
2029
+ }
2030
+
2031
+ /* Links */
2032
+ .links {
2033
+ display: flex;
2034
+ gap: 24px;
2035
+ margin-top: 48px;
2036
+ animation: fadeInUp 0.8s ease-out 0.8s both;
2037
+ }
2038
+
2039
+ .link {
2040
+ color: rgba(255,255,255,0.5);
2041
+ text-decoration: none;
2042
+ font-size: 14px;
2043
+ display: flex;
2044
+ align-items: center;
2045
+ gap: 6px;
2046
+ transition: color 0.2s;
2047
+ }
2048
+
2049
+ .link:hover {
2050
+ color: var(--float-purple);
2051
+ }
2052
+
2053
+ /* Footer */
2054
+ .footer {
2055
+ position: absolute;
2056
+ bottom: 24px;
2057
+ font-size: 12px;
2058
+ color: rgba(255,255,255,0.3);
2059
+ animation: fadeInUp 0.8s ease-out 0.9s both;
2060
+ }
2061
+
2062
+ @keyframes fadeInUp {
2063
+ from {
2064
+ opacity: 0;
2065
+ transform: translateY(20px);
2066
+ }
2067
+ to {
2068
+ opacity: 1;
2069
+ transform: translateY(0);
2070
+ }
2071
+ }
2072
+
2073
+ /* Responsive */
2074
+ @media (max-width: 640px) {
2075
+ .container { padding: 40px 20px; }
2076
+ .hero h1 { font-size: 40px; }
2077
+ .hero p { font-size: 16px; }
2078
+ .features { gap: 16px; }
2079
+ .feature { padding: 20px; }
2080
+ }
2081
+ </style>
2082
+ </head>
2083
+ <body>
2084
+ <div class="bg-gradient"></div>
2085
+ <div class="bg-grid"></div>
2086
+ <div class="orb orb-1"></div>
2087
+ <div class="orb orb-2"></div>
2088
+ <div class="orb orb-3"></div>
2089
+
2090
+ <div class="container">
2091
+ <div class="logo">
2092
+ <svg viewBox="0 0 80 80" fill="none">
2093
+ <defs>
2094
+ <linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
2095
+ <stop offset="0%" stop-color="#6366f1"/>
2096
+ <stop offset="50%" stop-color="#8b5cf6"/>
2097
+ <stop offset="100%" stop-color="#d946ef"/>
2098
+ </linearGradient>
2099
+ </defs>
2100
+ <circle cx="40" cy="40" r="36" stroke="url(#logoGrad)" stroke-width="3" fill="none">
2101
+ <animateTransform attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="20s" repeatCount="indefinite"/>
2102
+ </circle>
2103
+ <circle cx="40" cy="40" r="28" stroke="url(#logoGrad)" stroke-width="2" fill="none" opacity="0.5">
2104
+ <animateTransform attributeName="transform" type="rotate" from="360 40 40" to="0 40 40" dur="15s" repeatCount="indefinite"/>
2105
+ </circle>
2106
+ <path d="M30 28 L54 40 L30 52 Z" fill="url(#logoGrad)"/>
2107
+ </svg>
2108
+ </div>
2109
+
2110
+ <div class="hero">
2111
+ <h1>Welcome to <span class="gradient">Float.js</span></h1>
2112
+ <p>Tu framework ultramoderno est\xE1 listo. Comienza a crear experiencias web incre\xEDbles con SSR, routing inteligente y desarrollo instant\xE1neo.</p>
2113
+ </div>
2114
+
2115
+ <div class="features">
2116
+ <div class="feature">
2117
+ <div class="feature-icon">\u26A1</div>
2118
+ <h3>Desarrollo Instant\xE1neo</h3>
2119
+ <p>Hot reload ultrarr\xE1pido con esbuild. Ve tus cambios al instante sin perder el estado.</p>
2120
+ </div>
2121
+ <div class="feature">
2122
+ <div class="feature-icon">\u{1F3AF}</div>
2123
+ <h3>Routing Inteligente</h3>
2124
+ <p>Sistema de rutas basado en archivos. Crea page.tsx y tu ruta est\xE1 lista autom\xE1ticamente.</p>
2125
+ </div>
2126
+ <div class="feature">
2127
+ <div class="feature-icon">\u{1F30A}</div>
2128
+ <h3>SSR Streaming</h3>
2129
+ <p>Renderizado del lado del servidor con React 18 y soporte para streaming nativo.</p>
2130
+ </div>
2131
+ </div>
2132
+
2133
+ <div class="code-section">
2134
+ <div class="code-header">
2135
+ <div class="code-dots">
2136
+ <div class="code-dot"></div>
2137
+ <div class="code-dot"></div>
2138
+ <div class="code-dot"></div>
2139
+ </div>
2140
+ <span class="code-title">app/page.tsx</span>
2141
+ </div>
2142
+ <div class="code-block">
2143
+ <div class="code-line">
2144
+ <span class="code-number">1</span>
2145
+ <span class="code-content"><span class="code-keyword">export default function</span> <span class="code-function">HomePage</span>() {</span>
2146
+ </div>
2147
+ <div class="code-line">
2148
+ <span class="code-number">2</span>
2149
+ <span class="code-content"> <span class="code-keyword">return</span> (</span>
2150
+ </div>
2151
+ <div class="code-line">
2152
+ <span class="code-number">3</span>
2153
+ <span class="code-content"> <span class="code-tag">&lt;h1&gt;</span>Hello, Float.js!<span class="code-tag">&lt;/h1&gt;</span></span>
2154
+ </div>
2155
+ <div class="code-line">
2156
+ <span class="code-number">4</span>
2157
+ <span class="code-content"> );</span>
2158
+ </div>
2159
+ <div class="code-line">
2160
+ <span class="code-number">5</span>
2161
+ <span class="code-content">}</span>
2162
+ </div>
2163
+ </div>
2164
+ </div>
2165
+
2166
+ <div class="quick-start">
2167
+ <h2>Crea tu primera p\xE1gina</h2>
2168
+ <div class="quick-start-cmd" onclick="navigator.clipboard.writeText('touch app/about/page.tsx')">
2169
+ <span class="prompt">$</span>
2170
+ <span class="text">touch app/about/page.tsx</span>
2171
+ <span class="copy">\u{1F4CB}</span>
2172
+ </div>
2173
+ </div>
2174
+
2175
+ <div class="links">
2176
+ <a href="https://floatjs.dev/docs" target="_blank" class="link">
2177
+ <span>\u{1F4D6}</span> Documentaci\xF3n
2178
+ </a>
2179
+ <a href="https://github.com/floatjs/float" target="_blank" class="link">
2180
+ <span>\u2B50</span> GitHub
2181
+ </a>
2182
+ <a href="https://floatjs.dev/examples" target="_blank" class="link">
2183
+ <span>\u{1F3A8}</span> Ejemplos
2184
+ </a>
2185
+ </div>
2186
+
2187
+ <div class="footer">
2188
+ Float.js v2.0.1 \u2014 Made with \u26A1 for the modern web
2189
+ </div>
2190
+ </div>
2191
+ </body>
2192
+ </html>`;
2193
+ }
2194
+
1702
2195
  // src/server/dev-server.ts
1703
2196
  async function createDevServer(options) {
1704
2197
  const { port, host, open } = options;
@@ -1806,6 +2299,14 @@ ${FLOAT_ERROR_OVERLAY}
1806
2299
  return;
1807
2300
  }
1808
2301
  const { route, params } = matchRoute(pathname, routes);
2302
+ if (!route && pathname === "/" && routes.length === 0) {
2303
+ res.writeHead(200, {
2304
+ "Content-Type": "text/html; charset=utf-8",
2305
+ "Cache-Control": "no-cache"
2306
+ });
2307
+ res.end(generateWelcomePage());
2308
+ return;
2309
+ }
1809
2310
  if (!route) {
1810
2311
  res.writeHead(404, { "Content-Type": "text/html" });
1811
2312
  res.end(create404Page(pathname));