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