@olonjs/cli 3.0.84 → 3.0.86
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.
|
@@ -596,7 +596,7 @@ cat << 'END_OF_FILE_CONTENT' > "package.json"
|
|
|
596
596
|
"@tiptap/extension-link": "^2.11.5",
|
|
597
597
|
"@tiptap/react": "^2.11.5",
|
|
598
598
|
"@tiptap/starter-kit": "^2.11.5",
|
|
599
|
-
"@olonjs/core": "^1.0.
|
|
599
|
+
"@olonjs/core": "^1.0.74",
|
|
600
600
|
"clsx": "^2.1.1",
|
|
601
601
|
"lucide-react": "^0.474.0",
|
|
602
602
|
"react": "^19.0.0",
|
|
@@ -1825,18 +1825,18 @@ import { cn } from '@/lib/utils';
|
|
|
1825
1825
|
import type { ArchLayersData, ArchLayersSettings, ArchLayerLevel, SyntaxTokenType } from './types';
|
|
1826
1826
|
|
|
1827
1827
|
const layerBgStyles: Record<ArchLayerLevel, string> = {
|
|
1828
|
-
l0: 'bg-[
|
|
1829
|
-
l1: 'bg-[
|
|
1830
|
-
l2: 'bg-[
|
|
1828
|
+
l0: 'bg-[var(--local-primary)]',
|
|
1829
|
+
l1: 'bg-[var(--local-accent-strong)]',
|
|
1830
|
+
l2: 'bg-[var(--local-accent-soft)]',
|
|
1831
1831
|
};
|
|
1832
1832
|
|
|
1833
1833
|
const tokenStyles: Record<SyntaxTokenType, string> = {
|
|
1834
|
-
plain: 'text-[
|
|
1835
|
-
keyword: 'text-[
|
|
1836
|
-
type: 'text-[
|
|
1837
|
-
string: 'text-[
|
|
1838
|
-
comment: 'text-[
|
|
1839
|
-
operator: 'text-[
|
|
1834
|
+
plain: 'text-[var(--local-demo-text)]',
|
|
1835
|
+
keyword: 'text-[var(--local-accent)]',
|
|
1836
|
+
type: 'text-[var(--local-cyan)]',
|
|
1837
|
+
string: 'text-[var(--local-primary)]',
|
|
1838
|
+
comment: 'text-[var(--local-demo-text-faint)] italic',
|
|
1839
|
+
operator: 'text-[var(--local-accent)]',
|
|
1840
1840
|
};
|
|
1841
1841
|
|
|
1842
1842
|
export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersSettings }> = ({ data }) => {
|
|
@@ -1847,14 +1847,25 @@ export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersS
|
|
|
1847
1847
|
'--local-text': 'var(--foreground)',
|
|
1848
1848
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
1849
1849
|
'--local-primary': 'var(--primary)',
|
|
1850
|
-
'--local-accent': 'var(--
|
|
1850
|
+
'--local-accent': 'var(--accent)',
|
|
1851
|
+
'--local-cyan': 'var(--secondary)',
|
|
1851
1852
|
'--local-border': 'var(--border)',
|
|
1852
1853
|
'--local-deep': 'var(--background)',
|
|
1854
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
1855
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
1856
|
+
'--local-panel-bg': 'var(--demo-surface-soft)',
|
|
1857
|
+
'--local-panel-bar': 'var(--demo-surface)',
|
|
1858
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
1859
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
1860
|
+
'--local-accent-soft': 'var(--demo-accent-soft)',
|
|
1861
|
+
'--local-accent-strong': 'var(--demo-accent-strong)',
|
|
1862
|
+
'--local-demo-text': 'var(--demo-text-soft)',
|
|
1863
|
+
'--local-demo-text-faint': 'var(--demo-text-faint)',
|
|
1853
1864
|
} as React.CSSProperties}
|
|
1854
1865
|
className="relative z-0 py-28 bg-[var(--local-bg)]"
|
|
1855
1866
|
>
|
|
1856
|
-
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[
|
|
1857
|
-
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[
|
|
1867
|
+
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
|
|
1868
|
+
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
|
|
1858
1869
|
<div className="max-w-[1200px] mx-auto px-8">
|
|
1859
1870
|
<div className="text-center">
|
|
1860
1871
|
{data.label && (
|
|
@@ -1876,12 +1887,12 @@ export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersS
|
|
|
1876
1887
|
{data.layers.map((layer, idx) => (
|
|
1877
1888
|
<div
|
|
1878
1889
|
key={layer.id ?? idx}
|
|
1879
|
-
className="group border border-[
|
|
1890
|
+
className="group border border-[var(--local-panel-border)] rounded-[var(--local-radius-md)] p-8 mb-4 bg-[var(--local-panel-bg)] flex items-start gap-6 transition-all duration-300 hover:border-[var(--local-panel-border-strong)] hover:translate-x-1.5"
|
|
1880
1891
|
data-jp-item-id={layer.id ?? `legacy-${idx}`}
|
|
1881
1892
|
data-jp-item-field="layers"
|
|
1882
1893
|
>
|
|
1883
1894
|
<div className={cn(
|
|
1884
|
-
'shrink-0 w-9 h-9 rounded-
|
|
1895
|
+
'shrink-0 w-9 h-9 rounded-[var(--local-radius-md)] flex items-center justify-center font-mono text-[0.85rem] font-bold text-white',
|
|
1885
1896
|
layerBgStyles[layer.layerLevel]
|
|
1886
1897
|
)}>
|
|
1887
1898
|
{layer.number}
|
|
@@ -1899,8 +1910,8 @@ export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersS
|
|
|
1899
1910
|
</div>
|
|
1900
1911
|
{data.codeLines && data.codeLines.length > 0 && (
|
|
1901
1912
|
<div className="mt-12 max-w-[740px] mx-auto">
|
|
1902
|
-
<div className="border border-[
|
|
1903
|
-
<div className="flex items-center gap-2 px-5 py-3 bg-[
|
|
1913
|
+
<div className="border border-[var(--local-panel-border)] rounded-[var(--local-radius-md)] overflow-hidden bg-[var(--local-deep)]">
|
|
1914
|
+
<div className="flex items-center gap-2 px-5 py-3 bg-[var(--local-panel-bar)] border-b border-[var(--local-panel-border)]">
|
|
1904
1915
|
<span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
|
|
1905
1916
|
<span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
|
|
1906
1917
|
<span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
|
|
@@ -1991,12 +2002,20 @@ export const CliSection: React.FC<{ data: CliSectionData; settings?: CliSectionS
|
|
|
1991
2002
|
'--local-text': 'var(--foreground)',
|
|
1992
2003
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
1993
2004
|
'--local-primary': 'var(--primary)',
|
|
1994
|
-
'--local-accent': 'var(--
|
|
2005
|
+
'--local-accent': 'var(--accent)',
|
|
1995
2006
|
'--local-border': 'var(--border)',
|
|
2007
|
+
'--local-radius-sm': 'var(--theme-radius-sm)',
|
|
2008
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
2009
|
+
'--local-panel-bg': 'var(--demo-surface-strong)',
|
|
2010
|
+
'--local-panel-deep': 'var(--demo-surface-deep)',
|
|
2011
|
+
'--local-panel-bar': 'var(--demo-surface)',
|
|
2012
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
2013
|
+
'--local-panel-text-soft': 'var(--demo-text-soft)',
|
|
2014
|
+
'--local-panel-text-faint': 'var(--demo-text-faint)',
|
|
1996
2015
|
} as React.CSSProperties}
|
|
1997
2016
|
className="relative z-0 py-28 bg-[var(--local-bg)]"
|
|
1998
2017
|
>
|
|
1999
|
-
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[
|
|
2018
|
+
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border)] to-transparent" />
|
|
2000
2019
|
<div className="max-w-[1200px] mx-auto px-8 grid grid-cols-2 gap-24 items-center">
|
|
2001
2020
|
|
|
2002
2021
|
{/* LEFT */}
|
|
@@ -2023,11 +2042,11 @@ export const CliSection: React.FC<{ data: CliSectionData; settings?: CliSectionS
|
|
|
2023
2042
|
{data.steps.map((step, idx) => (
|
|
2024
2043
|
<div
|
|
2025
2044
|
key={step.id ?? idx}
|
|
2026
|
-
className="grid grid-cols-[32px_1fr] gap-4 py-6 border-b border-[
|
|
2045
|
+
className="grid grid-cols-[32px_1fr] gap-4 py-6 border-b border-[var(--local-panel-border)] last:border-b-0 items-start"
|
|
2027
2046
|
data-jp-item-id={step.id ?? `legacy-${idx}`}
|
|
2028
2047
|
data-jp-item-field="steps"
|
|
2029
2048
|
>
|
|
2030
|
-
<div className="font-display text-[1.25rem] font-black text-[
|
|
2049
|
+
<div className="font-display text-[1.25rem] font-black text-[var(--local-panel-text-faint)] leading-none mt-0.5">{step.num}</div>
|
|
2031
2050
|
<div>
|
|
2032
2051
|
<div className="font-display font-bold text-[1rem] text-[var(--local-text)] mb-1">{step.title}</div>
|
|
2033
2052
|
<p className="text-[0.85rem] text-[var(--local-text-muted)] leading-[1.6]">{step.description}</p>
|
|
@@ -2039,30 +2058,30 @@ export const CliSection: React.FC<{ data: CliSectionData; settings?: CliSectionS
|
|
|
2039
2058
|
</div>
|
|
2040
2059
|
|
|
2041
2060
|
{/* RIGHT — terminal */}
|
|
2042
|
-
<div className="rounded-[
|
|
2043
|
-
<div className="bg-[
|
|
2061
|
+
<div className="rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_30px_60px_rgba(0,0,0,0.5)]">
|
|
2062
|
+
<div className="bg-[var(--local-panel-bar)] px-4 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
|
|
2044
2063
|
<span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
|
|
2045
2064
|
<span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
|
|
2046
2065
|
<span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
|
|
2047
|
-
<span className="mx-auto font-mono text-[0.60rem] text-[
|
|
2066
|
+
<span className="mx-auto font-mono text-[0.60rem] text-[var(--local-panel-text-faint)]">Terminal</span>
|
|
2048
2067
|
</div>
|
|
2049
|
-
<div className="bg-[
|
|
2050
|
-
<div><span className="text-[
|
|
2051
|
-
<div><span className="text-[
|
|
2052
|
-
<div><span className="text-[
|
|
2053
|
-
<div><span className="text-[
|
|
2068
|
+
<div className="bg-[var(--local-panel-deep)] px-7 py-6 font-mono text-[0.78rem] leading-[2.1] overflow-x-auto">
|
|
2069
|
+
<div><span className="text-[var(--local-panel-text-faint)] italic"># Step 1 — install CLI globally</span></div>
|
|
2070
|
+
<div><span className="text-[var(--local-accent)]">$</span> <span className="text-[var(--local-text)]">npm install -g </span><span className="text-[var(--local-panel-text-soft)]">@jsonpages/cli@latest</span></div>
|
|
2071
|
+
<div><span className="text-[var(--local-panel-text-faint)]">added 1 package in 2.3s</span></div>
|
|
2072
|
+
<div><span className="text-[var(--local-primary)]">✓ @jsonpages/cli@1.2.0 installed</span></div>
|
|
2054
2073
|
<div> </div>
|
|
2055
|
-
<div><span className="text-[
|
|
2056
|
-
<div><span className="text-[
|
|
2057
|
-
<div><span className="text-[
|
|
2058
|
-
<div><span className="text-[
|
|
2059
|
-
<div><span className="text-[
|
|
2060
|
-
<div><span className="text-[
|
|
2061
|
-
<div><span className="text-[
|
|
2074
|
+
<div><span className="text-[var(--local-panel-text-faint)] italic"># Step 2 — scaffold a new tenant</span></div>
|
|
2075
|
+
<div><span className="text-[var(--local-accent)]">$</span> <span className="text-[var(--local-panel-text-soft)]">npx @jsonpages/cli@latest</span> <span className="text-[var(--local-text)]">new my-tenant</span></div>
|
|
2076
|
+
<div><span className="text-[var(--local-primary)]"> ✓ src/components/hero/</span></div>
|
|
2077
|
+
<div><span className="text-[var(--local-primary)]"> ✓ src/lib/schemas.ts</span></div>
|
|
2078
|
+
<div><span className="text-[var(--local-primary)]"> ✓ src/lib/ComponentRegistry.tsx</span></div>
|
|
2079
|
+
<div><span className="text-[var(--local-primary)]"> ✓ src/data/pages/home.json</span></div>
|
|
2080
|
+
<div><span className="text-[var(--local-primary)]"> ✓ Done in 1.8s</span></div>
|
|
2062
2081
|
<div> </div>
|
|
2063
|
-
<div><span className="text-[
|
|
2064
|
-
<div><span className="text-[
|
|
2065
|
-
<div><span className="text-[
|
|
2082
|
+
<div><span className="text-[var(--local-panel-text-faint)] italic"># Step 3 — start Studio</span></div>
|
|
2083
|
+
<div><span className="text-[var(--local-accent)]">$</span> <span className="text-[var(--local-text)]">cd my-tenant && npm run dev</span></div>
|
|
2084
|
+
<div><span className="text-[var(--local-primary)]"> ➜ Studio ready at </span><span className="text-[var(--local-accent)]">http://localhost:5173</span><span className="inline-block w-2 h-[1em] bg-[var(--local-primary)] ml-1 align-text-bottom animate-pulse" /></div>
|
|
2066
2085
|
</div>
|
|
2067
2086
|
</div>
|
|
2068
2087
|
|
|
@@ -2122,14 +2141,26 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
|
|
|
2122
2141
|
'--local-text': 'var(--foreground)',
|
|
2123
2142
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
2124
2143
|
'--local-primary': 'var(--primary)',
|
|
2125
|
-
'--local-accent': 'var(--
|
|
2126
|
-
'--local-cyan': 'var(--
|
|
2144
|
+
'--local-accent': 'var(--accent)',
|
|
2145
|
+
'--local-cyan': 'var(--secondary)',
|
|
2127
2146
|
'--local-border': 'var(--border)',
|
|
2128
2147
|
'--local-surface': 'var(--card)',
|
|
2148
|
+
'--local-radius-sm': 'var(--theme-radius-sm)',
|
|
2149
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
2150
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
2151
|
+
'--local-panel-bg': 'var(--demo-surface-soft)',
|
|
2152
|
+
'--local-panel-bar': 'var(--demo-surface)',
|
|
2153
|
+
'--local-panel-deep': 'var(--demo-surface-deep)',
|
|
2154
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
2155
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
2156
|
+
'--local-panel-text-soft': 'var(--demo-text-soft)',
|
|
2157
|
+
'--local-panel-text-faint': 'var(--demo-text-faint)',
|
|
2158
|
+
'--local-accent-soft': 'var(--demo-accent-soft)',
|
|
2159
|
+
'--local-accent-strong': 'var(--demo-accent-strong)',
|
|
2129
2160
|
} as React.CSSProperties}
|
|
2130
2161
|
className="relative z-0 py-28 bg-[var(--local-bg)]"
|
|
2131
2162
|
>
|
|
2132
|
-
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[
|
|
2163
|
+
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
|
|
2133
2164
|
<div className="max-w-[1200px] mx-auto px-8">
|
|
2134
2165
|
|
|
2135
2166
|
{/* Header */}
|
|
@@ -2159,66 +2190,66 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
|
|
|
2159
2190
|
</div>
|
|
2160
2191
|
|
|
2161
2192
|
{/* ICE Mockup — product demo, decorative */}
|
|
2162
|
-
<div className="rounded-[
|
|
2193
|
+
<div className="rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_60px_120px_rgba(0,0,0,0.7),0_0_80px_rgba(59,130,246,0.08)] mb-16">
|
|
2163
2194
|
{/* Browser bar */}
|
|
2164
|
-
<div className="bg-[
|
|
2195
|
+
<div className="bg-[var(--local-panel-bar)] px-4 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
|
|
2165
2196
|
<span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
|
|
2166
2197
|
<span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
|
|
2167
2198
|
<span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
|
|
2168
|
-
<span className="mx-auto font-mono text-[0.62rem] text-[
|
|
2199
|
+
<span className="mx-auto font-mono text-[0.62rem] text-[var(--local-panel-text-faint)] bg-[var(--local-panel-bg)] px-8 py-0.5 rounded-[var(--local-radius-sm)]">localhost:5173/admin — JsonPages Studio</span>
|
|
2169
2200
|
</div>
|
|
2170
2201
|
{/* Split */}
|
|
2171
|
-
<div className="grid grid-cols-[1fr_300px] h-[520px] bg-[
|
|
2202
|
+
<div className="grid grid-cols-[1fr_300px] h-[520px] bg-[var(--local-panel-deep)]">
|
|
2172
2203
|
{/* Stage */}
|
|
2173
2204
|
<div className="flex flex-col overflow-hidden">
|
|
2174
2205
|
{/* Tenant nav sim */}
|
|
2175
|
-
<div className="bg-[
|
|
2206
|
+
<div className="bg-[var(--local-panel-bg)] px-6 py-3 flex items-center justify-between border-b border-[var(--local-panel-border)] flex-shrink-0">
|
|
2176
2207
|
<div className="flex items-center gap-2 font-display font-bold text-[0.9rem] text-white">
|
|
2177
|
-
<div className="w-5 h-5 bg-gradient-to-br from-[
|
|
2178
|
-
Json<span className="text-[
|
|
2208
|
+
<div className="w-5 h-5 bg-gradient-to-br from-[var(--local-primary)] to-[var(--local-cyan)] rounded-[var(--local-radius-sm)] flex items-center justify-center font-mono text-[0.45rem] text-white font-bold">{'{}'}</div>
|
|
2209
|
+
Json<span className="text-[var(--local-accent)]">Pages</span>
|
|
2179
2210
|
</div>
|
|
2180
|
-
<div className="flex gap-6 text-[0.68rem] text-[
|
|
2211
|
+
<div className="flex gap-6 text-[0.68rem] text-[var(--local-panel-text-faint)] font-sans">
|
|
2181
2212
|
<span>Architecture</span><span>CMS</span><span>Versioning</span><span>Developer</span>
|
|
2182
2213
|
</div>
|
|
2183
2214
|
</div>
|
|
2184
2215
|
{/* Hero section — selected */}
|
|
2185
|
-
<div className="flex-1 relative p-8 flex flex-col justify-center bg-gradient-to-br from-[
|
|
2186
|
-
<span className="absolute top-2.5 right-2.5 font-mono text-[0.5rem] font-bold uppercase tracking-widest bg-[
|
|
2216
|
+
<div className="flex-1 relative p-8 flex flex-col justify-center bg-gradient-to-br from-[var(--local-panel-deep)] to-[var(--local-panel-bg)] outline outline-2 outline-[var(--local-primary)] -outline-offset-2">
|
|
2217
|
+
<span className="absolute top-2.5 right-2.5 font-mono text-[0.5rem] font-bold uppercase tracking-widest bg-[var(--local-primary)] text-white px-2 py-0.5 rounded-[var(--local-radius-sm)]">HERO | LOCAL</span>
|
|
2187
2218
|
<div className="font-display font-black text-[2.4rem] leading-none text-white mb-0.5">The Sovereign Shell.</div>
|
|
2188
|
-
<div className="font-display font-black text-[2.4rem] leading-none bg-gradient-to-r from-[
|
|
2189
|
-
<p className="text-[0.75rem] text-[
|
|
2219
|
+
<div className="font-display font-black text-[2.4rem] leading-none bg-gradient-to-r from-[var(--local-accent)] to-[var(--local-cyan)] bg-clip-text text-transparent mb-4">Zero Runtime Overhead.</div>
|
|
2220
|
+
<p className="text-[0.75rem] text-[var(--local-panel-text-faint)] leading-[1.65] max-w-[360px] mb-5">The @jsonpages/core package is a headless, schema-driven runtime. It handles routing, hydration, and the admin interface.</p>
|
|
2190
2221
|
<div className="flex gap-2">
|
|
2191
|
-
<span className="text-[0.65rem] font-semibold bg-[
|
|
2192
|
-
<span className="text-[0.65rem] border border-[
|
|
2222
|
+
<span className="text-[0.65rem] font-semibold bg-[var(--local-primary)] text-white px-3.5 py-1.5 rounded-[var(--local-radius-md)]">Read the Docs</span>
|
|
2223
|
+
<span className="text-[0.65rem] border border-[var(--local-panel-border)] text-[var(--local-panel-text-soft)] px-3.5 py-1.5 rounded-[var(--local-radius-md)]">View on NPM</span>
|
|
2193
2224
|
</div>
|
|
2194
2225
|
</div>
|
|
2195
2226
|
{/* Next section visible but dimmed */}
|
|
2196
|
-
<div className="flex-shrink-0 px-6 py-4 bg-[
|
|
2227
|
+
<div className="flex-shrink-0 px-6 py-4 bg-[var(--local-panel-bar)] border-t border-[var(--local-panel-border)] flex gap-3 opacity-40">
|
|
2197
2228
|
{['The Form Factory', 'The Tenant Protocol', 'The Core Engine'].map((t) => (
|
|
2198
|
-
<div key={t} className="flex-1 bg-[
|
|
2199
|
-
<div className="w-3.5 h-3.5 rounded bg-[
|
|
2200
|
-
<div className="font-display font-bold text-[0.58rem] text-[
|
|
2229
|
+
<div key={t} className="flex-1 bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-[var(--local-radius-sm)] p-2.5">
|
|
2230
|
+
<div className="w-3.5 h-3.5 rounded-[var(--local-radius-sm)] bg-[var(--local-accent-soft)] mb-1.5" />
|
|
2231
|
+
<div className="font-display font-bold text-[0.58rem] text-[var(--local-panel-text-soft)]">{t}</div>
|
|
2201
2232
|
</div>
|
|
2202
2233
|
))}
|
|
2203
2234
|
</div>
|
|
2204
2235
|
</div>
|
|
2205
2236
|
{/* Inspector */}
|
|
2206
|
-
<div className="bg-[
|
|
2207
|
-
<div className="px-4 py-3 border-b border-[
|
|
2237
|
+
<div className="bg-[var(--local-panel-bar)] border-l border-[var(--local-panel-border)] flex flex-col overflow-hidden">
|
|
2238
|
+
<div className="px-4 py-3 border-b border-[var(--local-panel-border)] flex items-start justify-between">
|
|
2208
2239
|
<div>
|
|
2209
2240
|
<div className="font-display font-bold text-[0.88rem] text-white">Inspector</div>
|
|
2210
|
-
<div className="flex items-center gap-1.5 mt-0.5 font-mono text-[0.56rem] text-[
|
|
2241
|
+
<div className="flex items-center gap-1.5 mt-0.5 font-mono text-[0.56rem] text-[var(--local-accent)]">
|
|
2211
2242
|
<span className="font-bold">■ HERO</span>
|
|
2212
|
-
<span className="text-[
|
|
2213
|
-
<span className="text-[
|
|
2243
|
+
<span className="text-[var(--local-panel-text-faint)]">|</span>
|
|
2244
|
+
<span className="text-[var(--local-panel-text-faint)]">LOCAL</span>
|
|
2214
2245
|
</div>
|
|
2215
2246
|
</div>
|
|
2216
|
-
<span className="font-mono text-[0.58rem] text-[
|
|
2247
|
+
<span className="font-mono text-[0.58rem] text-[var(--local-accent)]">+ Add section</span>
|
|
2217
2248
|
</div>
|
|
2218
2249
|
{/* Layers */}
|
|
2219
|
-
<div className="border-b border-[
|
|
2220
|
-
<div className="px-4 py-1.5 font-mono text-[0.54rem] uppercase tracking-widest text-[
|
|
2221
|
-
<span>Page Layers</span><span className="text-[
|
|
2250
|
+
<div className="border-b border-[var(--local-panel-border)]">
|
|
2251
|
+
<div className="px-4 py-1.5 font-mono text-[0.54rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] flex justify-between">
|
|
2252
|
+
<span>Page Layers</span><span className="text-[var(--local-panel-text-faint)]">(8)</span>
|
|
2222
2253
|
</div>
|
|
2223
2254
|
{[
|
|
2224
2255
|
{ type: 'HERO', label: 'The Sovereign Shell.', active: true, opacity: '' },
|
|
@@ -2226,11 +2257,11 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
|
|
|
2226
2257
|
{ type: 'GIT', label: 'Your content is code.', active: false, opacity: 'opacity-45' },
|
|
2227
2258
|
{ type: 'DEVEX', label: 'App.tsx is incredibly thin.', active: false, opacity: 'opacity-35' },
|
|
2228
2259
|
].map(({ type, label, active, opacity }) => (
|
|
2229
|
-
<div key={type} className={`flex items-center gap-2 px-4 py-1.5 ${active ? 'bg-[
|
|
2230
|
-
<span className="text-[
|
|
2231
|
-
<span className={`font-mono text-[0.52rem] uppercase tracking-wide w-10 flex-shrink-0 ${active ? 'text-[
|
|
2232
|
-
<span className={`font-sans text-[0.65rem] flex-1 truncate ${active ? 'text-[
|
|
2233
|
-
<span className={`w-1.5 h-1.5 rounded-full ${active ? 'bg-[
|
|
2260
|
+
<div key={type} className={`flex items-center gap-2 px-4 py-1.5 ${active ? 'bg-[var(--local-accent-soft)]' : ''} ${opacity}`}>
|
|
2261
|
+
<span className="text-[var(--local-panel-text-faint)] text-[0.58rem]">⠿</span>
|
|
2262
|
+
<span className={`font-mono text-[0.52rem] uppercase tracking-wide w-10 flex-shrink-0 ${active ? 'text-[var(--local-accent)]' : 'text-[var(--local-panel-text-faint)]'}`}>{type}</span>
|
|
2263
|
+
<span className={`font-sans text-[0.65rem] flex-1 truncate ${active ? 'text-[var(--local-text)] font-semibold' : 'text-[var(--local-panel-text-soft)]'}`}>{label}</span>
|
|
2264
|
+
<span className={`w-1.5 h-1.5 rounded-full ${active ? 'bg-[var(--local-primary)]' : 'bg-[var(--local-panel-border)] opacity-40'}`} />
|
|
2234
2265
|
</div>
|
|
2235
2266
|
))}
|
|
2236
2267
|
</div>
|
|
@@ -2242,41 +2273,41 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
|
|
|
2242
2273
|
{ label: 'Badge', val: 'Architecture v1.2', active: false },
|
|
2243
2274
|
].map(({ label, val, active }) => (
|
|
2244
2275
|
<div key={label}>
|
|
2245
|
-
<div className="font-mono text-[0.52rem] uppercase tracking-widest text-[
|
|
2246
|
-
<div className={`rounded px-2.5 py-1.5 font-mono text-[0.60rem] truncate ${active
|
|
2247
|
-
? 'bg-[
|
|
2248
|
-
: 'bg-[
|
|
2276
|
+
<div className="font-mono text-[0.52rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1">{label}</div>
|
|
2277
|
+
<div className={`rounded-[var(--local-radius-sm)] px-2.5 py-1.5 font-mono text-[0.60rem] truncate ${active
|
|
2278
|
+
? 'bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] text-[var(--local-text)]'
|
|
2279
|
+
: 'bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] text-[var(--local-panel-text-soft)]'}`}
|
|
2249
2280
|
>{val}</div>
|
|
2250
2281
|
</div>
|
|
2251
2282
|
))}
|
|
2252
2283
|
<div>
|
|
2253
|
-
<div className="font-mono text-[0.52rem] uppercase tracking-widest text-[
|
|
2254
|
-
<span>CTAs (2)</span><span className="text-[
|
|
2284
|
+
<div className="font-mono text-[0.52rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1 flex justify-between">
|
|
2285
|
+
<span>CTAs (2)</span><span className="text-[var(--local-accent)]">+ Add Item</span>
|
|
2255
2286
|
</div>
|
|
2256
|
-
<div className="border border-[
|
|
2287
|
+
<div className="border border-[var(--local-panel-border)] rounded-[var(--local-radius-sm)] overflow-hidden">
|
|
2257
2288
|
{[{ lbl: 'Read the Docs', tag: 'primary' }, { lbl: 'View on NPM', tag: 'secondary' }].map(({ lbl, tag }) => (
|
|
2258
|
-
<div key={lbl} className="flex items-center gap-1.5 px-2.5 py-1.5 border-b border-[
|
|
2259
|
-
<span className="text-[
|
|
2260
|
-
<span className="font-sans text-[0.60rem] text-[
|
|
2261
|
-
<span className="font-mono text-[0.48rem] px-1 py-0.5 rounded bg-[
|
|
2289
|
+
<div key={lbl} className="flex items-center gap-1.5 px-2.5 py-1.5 border-b border-[var(--local-panel-border)] last:border-b-0">
|
|
2290
|
+
<span className="text-[var(--local-accent)] text-[0.52rem]">▸</span>
|
|
2291
|
+
<span className="font-sans text-[0.60rem] text-[var(--local-panel-text-soft)] flex-1">{lbl}</span>
|
|
2292
|
+
<span className="font-mono text-[0.48rem] px-1 py-0.5 rounded-[var(--local-radius-sm)] bg-[var(--local-accent-soft)] text-[var(--local-accent)]">{tag}</span>
|
|
2262
2293
|
</div>
|
|
2263
2294
|
))}
|
|
2264
2295
|
</div>
|
|
2265
2296
|
</div>
|
|
2266
2297
|
</div>
|
|
2267
2298
|
{/* Bottom bar */}
|
|
2268
|
-
<div className="px-4 py-2.5 border-t border-[
|
|
2269
|
-
<span className="w-1.5 h-1.5 rounded-full bg-[
|
|
2270
|
-
<span className="font-mono text-[0.52rem] text-[
|
|
2271
|
-
<div className="flex items-center gap-1.5 ml-1 font-mono text-[0.52rem] text-[
|
|
2272
|
-
<div className="w-5 h-2.5 bg-[
|
|
2299
|
+
<div className="px-4 py-2.5 border-t border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] flex items-center gap-2">
|
|
2300
|
+
<span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)]" />
|
|
2301
|
+
<span className="font-mono text-[0.52rem] text-[var(--local-panel-text-soft)]">All Changes Saved</span>
|
|
2302
|
+
<div className="flex items-center gap-1.5 ml-1 font-mono text-[0.52rem] text-[var(--local-panel-text-faint)]">
|
|
2303
|
+
<div className="w-5 h-2.5 bg-[var(--local-primary)] rounded-full relative flex-shrink-0">
|
|
2273
2304
|
<div className="absolute top-[1.5px] right-[1.5px] w-[9px] h-[9px] bg-white rounded-full" />
|
|
2274
2305
|
</div>
|
|
2275
2306
|
Autosave
|
|
2276
2307
|
</div>
|
|
2277
2308
|
<div className="ml-auto flex gap-1.5">
|
|
2278
|
-
<span className="font-mono text-[0.50rem] px-1.5 py-0.5 rounded border border-[
|
|
2279
|
-
<span className="font-mono text-[0.50rem] px-1.5 py-0.5 rounded border border-[
|
|
2309
|
+
<span className="font-mono text-[0.50rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[var(--local-panel-border-strong)] bg-[var(--local-accent-soft)] text-[var(--local-accent)] flex items-center gap-1">⬡ HTML</span>
|
|
2310
|
+
<span className="font-mono text-[0.50rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] text-[var(--local-panel-text-soft)] opacity-50">{'{}'} JSON</span>
|
|
2280
2311
|
</div>
|
|
2281
2312
|
</div>
|
|
2282
2313
|
</div>
|
|
@@ -2289,11 +2320,11 @@ export const CmsIce: React.FC<{ data: CmsIceData; settings?: CmsIceSettings }> =
|
|
|
2289
2320
|
{data.callouts.map((c, idx) => (
|
|
2290
2321
|
<div
|
|
2291
2322
|
key={c.id ?? idx}
|
|
2292
|
-
className="border border-[
|
|
2323
|
+
className="border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] p-8 bg-[var(--local-panel-bg)] hover:border-[var(--local-panel-border-strong)] hover:bg-[var(--local-accent-soft)] transition-all duration-200"
|
|
2293
2324
|
data-jp-item-id={c.id ?? `legacy-${idx}`}
|
|
2294
2325
|
data-jp-item-field="callouts"
|
|
2295
2326
|
>
|
|
2296
|
-
<div className="w-9 h-9 rounded-[
|
|
2327
|
+
<div className="w-9 h-9 rounded-[var(--local-radius-md)] bg-[var(--local-accent-soft)] flex items-center justify-center text-[1.1rem] mb-4">
|
|
2297
2328
|
{c.icon}
|
|
2298
2329
|
</div>
|
|
2299
2330
|
<h4 className="font-display font-bold text-[1.05rem] text-[var(--local-text)] mb-2">{c.title}</h4>
|
|
@@ -2364,7 +2395,7 @@ export const CodeBlock: React.FC<{ data: CodeBlockData; settings?: CodeBlockSett
|
|
|
2364
2395
|
'--local-border': 'var(--border)',
|
|
2365
2396
|
'--local-text': 'var(--foreground)',
|
|
2366
2397
|
'--local-accent': 'var(--primary)',
|
|
2367
|
-
'--local-radius-lg': 'var(--radius)',
|
|
2398
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
2368
2399
|
} as React.CSSProperties}
|
|
2369
2400
|
className="py-16 bg-[var(--local-surface)]"
|
|
2370
2401
|
>
|
|
@@ -2458,13 +2489,19 @@ export const CtaBanner: React.FC<{ data: CtaBannerData; settings?: CtaBannerSett
|
|
|
2458
2489
|
'--local-text': 'var(--foreground)',
|
|
2459
2490
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
2460
2491
|
'--local-primary': 'var(--primary)',
|
|
2461
|
-
'--local-accent': 'var(--
|
|
2462
|
-
'--local-cyan': 'var(--
|
|
2492
|
+
'--local-accent': 'var(--accent)',
|
|
2493
|
+
'--local-cyan': 'var(--secondary)',
|
|
2494
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
2495
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
2496
|
+
'--local-panel-bg': 'var(--demo-surface-deep)',
|
|
2497
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
2498
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
2499
|
+
'--local-accent-soft': 'var(--demo-accent-soft)',
|
|
2463
2500
|
} as React.CSSProperties}
|
|
2464
2501
|
className="relative py-28 bg-[var(--local-bg)] overflow-hidden text-center"
|
|
2465
2502
|
>
|
|
2466
2503
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[48px] h-[2px] bg-gradient-to-r from-[var(--local-primary)] to-[var(--local-cyan)]" />
|
|
2467
|
-
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vw] h-[60vw] bg-[radial-gradient(circle,
|
|
2504
|
+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vw] h-[60vw] bg-[radial-gradient(circle,var(--local-accent-soft)_0%,transparent_60%)] pointer-events-none" />
|
|
2468
2505
|
<div className="relative max-w-[960px] mx-auto px-8">
|
|
2469
2506
|
<h2
|
|
2470
2507
|
className="font-display text-[clamp(3rem,7vw,6.5rem)] font-black text-[var(--local-text)] leading-[1.0] tracking-tight mb-6"
|
|
@@ -2482,11 +2519,11 @@ export const CtaBanner: React.FC<{ data: CtaBannerData; settings?: CtaBannerSett
|
|
|
2482
2519
|
)}
|
|
2483
2520
|
{data.cliCommand && (
|
|
2484
2521
|
<div
|
|
2485
|
-
className="inline-flex items-center gap-4 bg-[
|
|
2522
|
+
className="inline-flex items-center gap-4 bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] px-6 py-4 font-mono text-[0.88rem] text-[var(--local-text-muted)] mb-10"
|
|
2486
2523
|
data-jp-field="cliCommand"
|
|
2487
2524
|
>
|
|
2488
2525
|
<span className="text-[var(--local-primary)]">$</span>
|
|
2489
|
-
<span className="text-
|
|
2526
|
+
<span className="text-[var(--local-text)]">{data.cliCommand}</span>
|
|
2490
2527
|
</div>
|
|
2491
2528
|
)}
|
|
2492
2529
|
{data.ctas && data.ctas.length > 0 && (
|
|
@@ -2498,10 +2535,10 @@ export const CtaBanner: React.FC<{ data: CtaBannerData; settings?: CtaBannerSett
|
|
|
2498
2535
|
data-jp-item-id={cta.id ?? `legacy-${idx}`}
|
|
2499
2536
|
data-jp-item-field="ctas"
|
|
2500
2537
|
className={cn(
|
|
2501
|
-
'inline-flex items-center gap-2 px-9 py-3.5 rounded-[
|
|
2538
|
+
'inline-flex items-center gap-2 px-9 py-3.5 rounded-[var(--local-radius-md)] font-semibold text-[1rem] transition-all duration-200 no-underline',
|
|
2502
2539
|
cta.variant === 'primary'
|
|
2503
|
-
? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 shadow-[
|
|
2504
|
-
: 'bg-transparent text-[var(--local-text)] border border-[
|
|
2540
|
+
? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 shadow-[0_0_32px_var(--local-accent-soft)]'
|
|
2541
|
+
: 'bg-transparent text-[var(--local-text)] border border-[var(--local-panel-border)] hover:border-[var(--local-panel-border-strong)] hover:bg-[var(--local-accent-soft)]'
|
|
2505
2542
|
)}
|
|
2506
2543
|
>
|
|
2507
2544
|
{cta.label}
|
|
@@ -2566,10 +2603,10 @@ const APP_TSX_LINES = [
|
|
|
2566
2603
|
] as const;
|
|
2567
2604
|
|
|
2568
2605
|
const tokenClass: Record<string, string> = {
|
|
2569
|
-
cm: 'text-[
|
|
2570
|
-
kw: 'text-[
|
|
2571
|
-
fn: 'text-[
|
|
2572
|
-
pl: 'text-[
|
|
2606
|
+
cm: 'text-[var(--local-panel-text-faint)] italic',
|
|
2607
|
+
kw: 'text-[var(--local-accent)]',
|
|
2608
|
+
fn: 'text-[var(--local-primary)]',
|
|
2609
|
+
pl: 'text-[var(--local-panel-text-soft)]',
|
|
2573
2610
|
};
|
|
2574
2611
|
|
|
2575
2612
|
export const Devex: React.FC<{ data: DevexData; settings?: DevexSettings }> = ({ data }) => {
|
|
@@ -2580,12 +2617,19 @@ export const Devex: React.FC<{ data: DevexData; settings?: DevexSettings }> = ({
|
|
|
2580
2617
|
'--local-text': 'var(--foreground)',
|
|
2581
2618
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
2582
2619
|
'--local-primary': 'var(--primary)',
|
|
2583
|
-
'--local-accent': 'var(--
|
|
2620
|
+
'--local-accent': 'var(--accent)',
|
|
2584
2621
|
'--local-border': 'var(--border)',
|
|
2622
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
2623
|
+
'--local-panel-bg': 'var(--demo-surface)',
|
|
2624
|
+
'--local-panel-deep': 'var(--demo-surface-deep)',
|
|
2625
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
2626
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
2627
|
+
'--local-panel-text-soft': 'var(--demo-text-soft)',
|
|
2628
|
+
'--local-panel-text-faint': 'var(--demo-text-faint)',
|
|
2585
2629
|
} as React.CSSProperties}
|
|
2586
2630
|
className="relative z-0 py-28 bg-[var(--local-bg)]"
|
|
2587
2631
|
>
|
|
2588
|
-
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[
|
|
2632
|
+
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
|
|
2589
2633
|
<div className="max-w-[1200px] mx-auto px-8 grid grid-cols-2 gap-24 items-center">
|
|
2590
2634
|
|
|
2591
2635
|
{/* LEFT */}
|
|
@@ -2612,11 +2656,11 @@ export const Devex: React.FC<{ data: DevexData; settings?: DevexSettings }> = ({
|
|
|
2612
2656
|
{data.features.map((f, idx) => (
|
|
2613
2657
|
<li
|
|
2614
2658
|
key={f.id ?? idx}
|
|
2615
|
-
className="flex items-center gap-3.5 text-[0.9rem] text-[var(--local-text-muted)] py-3.5 border-b border-[
|
|
2659
|
+
className="flex items-center gap-3.5 text-[0.9rem] text-[var(--local-text-muted)] py-3.5 border-b border-[var(--local-panel-border)] last:border-b-0 hover:text-[var(--local-text)] hover:pl-1.5 transition-all"
|
|
2616
2660
|
data-jp-item-id={f.id ?? `legacy-${idx}`}
|
|
2617
2661
|
data-jp-item-field="features"
|
|
2618
2662
|
>
|
|
2619
|
-
<svg className="w-4 h-4 text-[
|
|
2663
|
+
<svg className="w-4 h-4 text-[var(--local-primary)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
2620
2664
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
2621
2665
|
</svg>
|
|
2622
2666
|
{f.text}
|
|
@@ -2627,14 +2671,14 @@ export const Devex: React.FC<{ data: DevexData; settings?: DevexSettings }> = ({
|
|
|
2627
2671
|
</div>
|
|
2628
2672
|
|
|
2629
2673
|
{/* RIGHT — code window */}
|
|
2630
|
-
<div className="rounded-[
|
|
2631
|
-
<div className="bg-[
|
|
2674
|
+
<div className="rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_30px_60px_rgba(0,0,0,0.5),0_0_40px_rgba(59,130,246,0.06)]">
|
|
2675
|
+
<div className="bg-[var(--local-panel-bg)] px-4 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
|
|
2632
2676
|
<span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
|
|
2633
2677
|
<span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
|
|
2634
2678
|
<span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
|
|
2635
|
-
<span className="ml-auto font-mono text-[0.62rem] text-[
|
|
2679
|
+
<span className="ml-auto font-mono text-[0.62rem] text-[var(--local-panel-text-faint)]">src/App.tsx</span>
|
|
2636
2680
|
</div>
|
|
2637
|
-
<div className="bg-[
|
|
2681
|
+
<div className="bg-[var(--local-panel-deep)] px-8 py-7 font-mono text-[0.80rem] leading-[2] overflow-x-auto">
|
|
2638
2682
|
{APP_TSX_LINES.map((ln, i) => (
|
|
2639
2683
|
<div key={i}>
|
|
2640
2684
|
<span className={tokenClass[ln.t]}>{ln.c || '\u00A0'}</span>
|
|
@@ -2702,7 +2746,7 @@ function renderInline(text: string): React.ReactNode {
|
|
|
2702
2746
|
|
|
2703
2747
|
/* ── block renderer ───────────────────────────────────────── */
|
|
2704
2748
|
function DocBlock({ block, idx }: { block: Block; idx: number }) {
|
|
2705
|
-
const inlineCls = '[&_strong]:text-[var(--local-text)] [&_strong]:font-semibold [&_code]:font-mono [&_code]:text-[0.84em] [&_code]:bg-[
|
|
2749
|
+
const inlineCls = '[&_strong]:text-[var(--local-text)] [&_strong]:font-semibold [&_code]:font-mono [&_code]:text-[0.84em] [&_code]:bg-[var(--local-inline-code-bg)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded-[var(--local-radius-sm)] [&_code]:text-[var(--local-accent)]';
|
|
2706
2750
|
|
|
2707
2751
|
switch (block.type) {
|
|
2708
2752
|
case 'heading':
|
|
@@ -2713,16 +2757,16 @@ function DocBlock({ block, idx }: { block: Block; idx: number }) {
|
|
|
2713
2757
|
|
|
2714
2758
|
case 'code':
|
|
2715
2759
|
return (
|
|
2716
|
-
<div key={idx} className="mb-6 rounded-[
|
|
2760
|
+
<div key={idx} className="mb-6 rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_8px_32px_rgba(0,0,0,0.4)]">
|
|
2717
2761
|
{block.codeFilename && (
|
|
2718
|
-
<div className="bg-[
|
|
2762
|
+
<div className="bg-[var(--local-panel-bar)] px-4 py-2.5 flex items-center gap-2 border-b border-[var(--local-panel-border)]">
|
|
2719
2763
|
<span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
|
|
2720
2764
|
<span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
|
|
2721
2765
|
<span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
|
|
2722
|
-
<span className="ml-3 font-mono text-[0.65rem] text-[
|
|
2766
|
+
<span className="ml-3 font-mono text-[0.65rem] text-[var(--local-panel-text-faint)]">{block.codeFilename}</span>
|
|
2723
2767
|
</div>
|
|
2724
2768
|
)}
|
|
2725
|
-
<pre className="bg-[
|
|
2769
|
+
<pre className="bg-[var(--local-panel-deep)] px-6 py-5 font-mono text-[0.78rem] leading-[1.9] overflow-x-auto text-[var(--local-panel-text-soft)] m-0 whitespace-pre">
|
|
2726
2770
|
<code>{block.content}</code>
|
|
2727
2771
|
</pre>
|
|
2728
2772
|
</div>
|
|
@@ -2742,17 +2786,17 @@ function DocBlock({ block, idx }: { block: Block; idx: number }) {
|
|
|
2742
2786
|
|
|
2743
2787
|
case 'table':
|
|
2744
2788
|
return (
|
|
2745
|
-
<div key={idx} className="mb-6 overflow-hidden rounded-[
|
|
2789
|
+
<div key={idx} className="mb-6 overflow-hidden rounded-[var(--local-radius-lg)] border border-[var(--local-panel-border)]">
|
|
2746
2790
|
<table className="w-full text-[0.88rem]">
|
|
2747
2791
|
<thead>
|
|
2748
|
-
<tr className="bg-[
|
|
2792
|
+
<tr className="bg-[var(--local-accent-soft)] border-b border-[var(--local-panel-border)]">
|
|
2749
2793
|
<th className="px-5 py-3 text-left font-mono text-[0.66rem] uppercase tracking-widest text-[var(--local-accent)] w-[200px]">Cosa</th>
|
|
2750
2794
|
<th className="px-5 py-3 text-left font-mono text-[0.66rem] uppercase tracking-widest text-[var(--local-accent)]">Azione</th>
|
|
2751
2795
|
</tr>
|
|
2752
2796
|
</thead>
|
|
2753
2797
|
<tbody>
|
|
2754
2798
|
{(block.rows ?? []).map((row, i) => (
|
|
2755
|
-
<tr key={row.id ?? i} className="border-b border-[
|
|
2799
|
+
<tr key={row.id ?? i} className="border-b border-[var(--local-panel-border)] last:border-0 hover:bg-[var(--local-accent-soft)] transition-colors">
|
|
2756
2800
|
<td className={`px-5 py-4 text-[var(--local-text)] font-semibold align-top text-[0.88rem] ${inlineCls}`}>
|
|
2757
2801
|
{renderInline(row.col1)}
|
|
2758
2802
|
</td>
|
|
@@ -2768,7 +2812,7 @@ function DocBlock({ block, idx }: { block: Block; idx: number }) {
|
|
|
2768
2812
|
|
|
2769
2813
|
case 'callout':
|
|
2770
2814
|
return (
|
|
2771
|
-
<div key={idx} className={`mb-5 rounded-[
|
|
2815
|
+
<div key={idx} className={`mb-5 rounded-[var(--local-radius-lg)] border border-[var(--local-panel-border-strong)] bg-[var(--local-accent-soft)] px-5 py-4 ${inlineCls}`}>
|
|
2772
2816
|
<div className="flex items-start gap-3">
|
|
2773
2817
|
<span className="text-[var(--local-accent)] font-mono text-[0.9rem] flex-shrink-0 mt-0.5 leading-none">ℹ</span>
|
|
2774
2818
|
<p className="text-[0.90rem] text-[var(--local-text-muted)] leading-[1.8] m-0">{renderInline(block.content)}</p>
|
|
@@ -2778,9 +2822,9 @@ function DocBlock({ block, idx }: { block: Block; idx: number }) {
|
|
|
2778
2822
|
|
|
2779
2823
|
case 'note':
|
|
2780
2824
|
return (
|
|
2781
|
-
<div key={idx} className={`mb-5 rounded-[
|
|
2825
|
+
<div key={idx} className={`mb-5 rounded-[var(--local-radius-lg)] border border-[var(--local-panel-border-strong)] bg-[var(--local-accent-soft)] px-5 py-4 ${inlineCls}`}>
|
|
2782
2826
|
<div className="flex items-start gap-3">
|
|
2783
|
-
<span className="text-[
|
|
2827
|
+
<span className="text-[var(--local-accent)] font-mono text-[0.9rem] flex-shrink-0 mt-0.5 leading-none">⚠</span>
|
|
2784
2828
|
<p className="text-[0.90rem] text-[var(--local-text-muted)] leading-[1.8] m-0">{renderInline(block.content)}</p>
|
|
2785
2829
|
</div>
|
|
2786
2830
|
</div>
|
|
@@ -2834,22 +2878,33 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2834
2878
|
'--local-text': 'var(--foreground)',
|
|
2835
2879
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
2836
2880
|
'--local-primary': 'var(--primary)',
|
|
2837
|
-
'--local-accent': 'var(--
|
|
2838
|
-
'--local-cyan': 'var(--
|
|
2881
|
+
'--local-accent': 'var(--accent)',
|
|
2882
|
+
'--local-cyan': 'var(--secondary)',
|
|
2839
2883
|
'--local-border': 'var(--border)',
|
|
2840
2884
|
'--local-surface': 'var(--card)',
|
|
2885
|
+
'--local-radius-sm': 'var(--theme-radius-sm)',
|
|
2886
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
2887
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
2888
|
+
'--local-panel-bar': 'var(--demo-surface)',
|
|
2889
|
+
'--local-panel-deep': 'var(--demo-surface-deep)',
|
|
2890
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
2891
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
2892
|
+
'--local-panel-text-soft': 'var(--demo-text-soft)',
|
|
2893
|
+
'--local-panel-text-faint': 'var(--demo-text-faint)',
|
|
2894
|
+
'--local-accent-soft': 'var(--demo-accent-soft)',
|
|
2895
|
+
'--local-inline-code-bg': 'var(--demo-surface)',
|
|
2841
2896
|
} as React.CSSProperties}
|
|
2842
2897
|
className="relative z-0 min-h-screen bg-[var(--local-bg)]"
|
|
2843
2898
|
>
|
|
2844
|
-
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[
|
|
2899
|
+
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
|
|
2845
2900
|
|
|
2846
2901
|
{/* ── Page hero ──────────────────────────────────── */}
|
|
2847
2902
|
<div className="max-w-[1200px] mx-auto px-8 pt-28 pb-12">
|
|
2848
2903
|
<div
|
|
2849
|
-
className="inline-flex items-center gap-2 bg-[
|
|
2904
|
+
className="inline-flex items-center gap-2 bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] px-3.5 py-1 rounded-full font-mono text-[0.66rem] font-semibold text-[var(--local-accent)] mb-5 tracking-widest uppercase"
|
|
2850
2905
|
data-jp-field="version"
|
|
2851
2906
|
>
|
|
2852
|
-
<span className="w-1.5 h-1.5 rounded-full bg-[
|
|
2907
|
+
<span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)]" />
|
|
2853
2908
|
{data.version ?? 'v1.2'}
|
|
2854
2909
|
</div>
|
|
2855
2910
|
<h1
|
|
@@ -2866,7 +2921,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2866
2921
|
{data.pageSubtitle}
|
|
2867
2922
|
</p>
|
|
2868
2923
|
)}
|
|
2869
|
-
<div className="mt-8 h-px bg-gradient-to-r from-[
|
|
2924
|
+
<div className="mt-8 h-px bg-gradient-to-r from-[var(--local-panel-border-strong)] via-[var(--local-accent-soft)] to-transparent" />
|
|
2870
2925
|
</div>
|
|
2871
2926
|
|
|
2872
2927
|
{/* ── Sidebar + Content ──────────────────────────── */}
|
|
@@ -2885,11 +2940,11 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2885
2940
|
href={`#${group.anchor}`}
|
|
2886
2941
|
onClick={scrollTo(group.anchor)}
|
|
2887
2942
|
className={`
|
|
2888
|
-
flex items-center gap-2 px-3 py-2 rounded-[
|
|
2943
|
+
flex items-center gap-2 px-3 py-2 rounded-[var(--local-radius-md)] font-display font-bold text-[0.80rem]
|
|
2889
2944
|
transition-all duration-150 no-underline
|
|
2890
2945
|
${groupActive
|
|
2891
|
-
? 'text-[var(--local-text)] bg-[
|
|
2892
|
-
: 'text-[var(--local-text-muted)] hover:text-[var(--local-text)] hover:bg-[
|
|
2946
|
+
? 'text-[var(--local-text)] bg-[var(--local-panel-bar)]'
|
|
2947
|
+
: 'text-[var(--local-text-muted)] hover:text-[var(--local-text)] hover:bg-[var(--local-panel-bar)]'}
|
|
2893
2948
|
${activeAnchor === group.anchor ? 'border-l-2 border-[var(--local-primary)] pl-[10px] text-[var(--local-accent)]' : ''}
|
|
2894
2949
|
`}
|
|
2895
2950
|
>
|
|
@@ -2903,14 +2958,14 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2903
2958
|
href={`#${s.anchor}`}
|
|
2904
2959
|
onClick={scrollTo(s.anchor)}
|
|
2905
2960
|
className={`
|
|
2906
|
-
flex items-center gap-2.5 pl-[22px] pr-3 py-1.5 rounded-[
|
|
2961
|
+
flex items-center gap-2.5 pl-[22px] pr-3 py-1.5 rounded-[var(--local-radius-sm)]
|
|
2907
2962
|
font-sans text-[0.76rem] transition-all duration-120 no-underline ml-0.5
|
|
2908
2963
|
${activeAnchor === s.anchor
|
|
2909
|
-
? 'text-[var(--local-accent)] font-semibold bg-[
|
|
2910
|
-
: 'text-[var(--local-text-muted)] hover:text-[var(--local-text)] hover:bg-[
|
|
2964
|
+
? 'text-[var(--local-accent)] font-semibold bg-[var(--local-accent-soft)]'
|
|
2965
|
+
: 'text-[var(--local-text-muted)] hover:text-[var(--local-text)] hover:bg-[var(--local-panel-bar)]'}
|
|
2911
2966
|
`}
|
|
2912
2967
|
>
|
|
2913
|
-
<span className={`w-[5px] h-[5px] rounded-full flex-shrink-0 transition-colors ${activeAnchor === s.anchor ? 'bg-[var(--local-accent)]' : 'bg-[
|
|
2968
|
+
<span className={`w-[5px] h-[5px] rounded-full flex-shrink-0 transition-colors ${activeAnchor === s.anchor ? 'bg-[var(--local-accent)]' : 'bg-[var(--local-panel-border)]'}`} />
|
|
2914
2969
|
{s.title}
|
|
2915
2970
|
</a>
|
|
2916
2971
|
))}
|
|
@@ -2921,7 +2976,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2921
2976
|
</nav>
|
|
2922
2977
|
|
|
2923
2978
|
{/* Divider + back to top */}
|
|
2924
|
-
<div className="mt-6 pt-5 border-t border-[
|
|
2979
|
+
<div className="mt-6 pt-5 border-t border-[var(--local-panel-border)]">
|
|
2925
2980
|
<button
|
|
2926
2981
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
|
2927
2982
|
className="flex items-center gap-2 font-mono text-[0.62rem] uppercase tracking-widest text-[var(--local-text-muted)] hover:text-[var(--local-accent)] transition-colors px-3"
|
|
@@ -2938,7 +2993,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2938
2993
|
|
|
2939
2994
|
{/* Group header */}
|
|
2940
2995
|
<div id={group.anchor} className="scroll-mt-[88px] flex items-center gap-3 mb-2">
|
|
2941
|
-
<div className="w-7 h-7 rounded-[
|
|
2996
|
+
<div className="w-7 h-7 rounded-[var(--local-radius-md)] bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] flex items-center justify-center flex-shrink-0">
|
|
2942
2997
|
<span className="font-mono text-[var(--local-accent)] text-[0.66rem] font-bold">{gi + 1}</span>
|
|
2943
2998
|
</div>
|
|
2944
2999
|
<h2
|
|
@@ -2949,7 +3004,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2949
3004
|
{group.label}
|
|
2950
3005
|
</h2>
|
|
2951
3006
|
</div>
|
|
2952
|
-
<div className="h-px bg-[
|
|
3007
|
+
<div className="h-px bg-[var(--local-panel-border)] mb-10 ml-10" />
|
|
2953
3008
|
|
|
2954
3009
|
{/* Sections */}
|
|
2955
3010
|
{(group.sections ?? []).map((section, si) => (
|
|
@@ -2963,7 +3018,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2963
3018
|
{/* Section title */}
|
|
2964
3019
|
<div className="flex items-center gap-2.5 mb-6">
|
|
2965
3020
|
{section.tag && (
|
|
2966
|
-
<span className="font-mono text-[0.60rem] uppercase tracking-widest text-[var(--local-accent)] bg-[
|
|
3021
|
+
<span className="font-mono text-[0.60rem] uppercase tracking-widest text-[var(--local-accent)] bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] px-2 py-0.5 rounded-[var(--local-radius-sm)] flex-shrink-0">
|
|
2967
3022
|
{section.tag}
|
|
2968
3023
|
</span>
|
|
2969
3024
|
)}
|
|
@@ -2982,7 +3037,7 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2982
3037
|
|
|
2983
3038
|
{/* Section divider */}
|
|
2984
3039
|
{si < (group.sections ?? []).length - 1 && (
|
|
2985
|
-
<div className="mt-12 h-px bg-[
|
|
3040
|
+
<div className="mt-12 h-px bg-[var(--local-panel-border)]" />
|
|
2986
3041
|
)}
|
|
2987
3042
|
</div>
|
|
2988
3043
|
))}
|
|
@@ -2991,9 +3046,9 @@ export const DocsLayout: React.FC<{ data: DocsLayoutData; settings?: DocsLayoutS
|
|
|
2991
3046
|
|
|
2992
3047
|
{/* EOF marker */}
|
|
2993
3048
|
<div className="mt-16 flex items-center gap-4 opacity-30">
|
|
2994
|
-
<div className="flex-1 h-px bg-[
|
|
3049
|
+
<div className="flex-1 h-px bg-[var(--local-panel-border)]" />
|
|
2995
3050
|
<span className="font-mono text-[0.60rem] uppercase tracking-widest text-[var(--local-text-muted)]">End of document</span>
|
|
2996
|
-
<div className="flex-1 h-px bg-[
|
|
3051
|
+
<div className="flex-1 h-px bg-[var(--local-panel-border)]" />
|
|
2997
3052
|
</div>
|
|
2998
3053
|
</div>
|
|
2999
3054
|
|
|
@@ -3080,8 +3135,8 @@ export const FeatureGrid: React.FC<{ data: FeatureGridData; settings?: FeatureGr
|
|
|
3080
3135
|
'--local-surface': 'var(--card)',
|
|
3081
3136
|
'--local-surface-alt': 'var(--muted)',
|
|
3082
3137
|
'--local-border': 'var(--border)',
|
|
3083
|
-
'--local-radius-lg': 'var(--radius)',
|
|
3084
|
-
'--local-radius-md': '
|
|
3138
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
3139
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
3085
3140
|
} as React.CSSProperties;
|
|
3086
3141
|
|
|
3087
3142
|
return (
|
|
@@ -3175,8 +3230,8 @@ export const Footer: React.FC<{ data: FooterData; settings?: FooterSettings }> =
|
|
|
3175
3230
|
'--local-bg': 'var(--background)',
|
|
3176
3231
|
'--local-text': 'var(--foreground)',
|
|
3177
3232
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
3178
|
-
'--local-accent': 'var(--
|
|
3179
|
-
'--local-border': '
|
|
3233
|
+
'--local-accent': 'var(--accent)',
|
|
3234
|
+
'--local-border': 'color-mix(in oklch, var(--foreground) 8%, transparent)',
|
|
3180
3235
|
} as React.CSSProperties}
|
|
3181
3236
|
className="py-12 border-t border-[var(--local-border)] bg-[var(--local-bg)] relative z-0"
|
|
3182
3237
|
>
|
|
@@ -3262,13 +3317,22 @@ export const GitSection: React.FC<{ data: GitSectionData; settings?: GitSectionS
|
|
|
3262
3317
|
'--local-text': 'var(--foreground)',
|
|
3263
3318
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
3264
3319
|
'--local-primary': 'var(--primary)',
|
|
3265
|
-
'--local-accent': 'var(--
|
|
3266
|
-
'--local-cyan': 'var(--
|
|
3320
|
+
'--local-accent': 'var(--accent)',
|
|
3321
|
+
'--local-cyan': 'var(--secondary)',
|
|
3267
3322
|
'--local-border': 'var(--border)',
|
|
3323
|
+
'--local-radius-sm': 'var(--theme-radius-sm)',
|
|
3324
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
3325
|
+
'--local-panel-bg': 'var(--demo-surface-soft)',
|
|
3326
|
+
'--local-panel-bar': 'var(--demo-surface)',
|
|
3327
|
+
'--local-panel-deep': 'var(--demo-surface-deep)',
|
|
3328
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
3329
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
3330
|
+
'--local-panel-text-soft': 'var(--demo-text-soft)',
|
|
3331
|
+
'--local-panel-text-faint': 'var(--demo-text-faint)',
|
|
3268
3332
|
} as React.CSSProperties}
|
|
3269
3333
|
className="relative z-0 py-28 bg-[var(--local-bg)]"
|
|
3270
3334
|
>
|
|
3271
|
-
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[
|
|
3335
|
+
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
|
|
3272
3336
|
<div className="max-w-[1200px] mx-auto px-8 grid grid-cols-2 gap-24 items-center">
|
|
3273
3337
|
|
|
3274
3338
|
{/* LEFT — copy */}
|
|
@@ -3300,7 +3364,7 @@ export const GitSection: React.FC<{ data: GitSectionData; settings?: GitSectionS
|
|
|
3300
3364
|
{data.points.map((p, idx) => (
|
|
3301
3365
|
<li
|
|
3302
3366
|
key={p.id ?? idx}
|
|
3303
|
-
className="flex items-start gap-3.5 text-[0.9rem] text-[var(--local-text-muted)] py-3.5 border-b border-[
|
|
3367
|
+
className="flex items-start gap-3.5 text-[0.9rem] text-[var(--local-text-muted)] py-3.5 border-b border-[var(--local-panel-border)] last:border-b-0 hover:text-[var(--local-text)] transition-colors leading-[1.5]"
|
|
3304
3368
|
data-jp-item-id={p.id ?? `legacy-${idx}`}
|
|
3305
3369
|
data-jp-item-field="points"
|
|
3306
3370
|
>
|
|
@@ -3313,21 +3377,21 @@ export const GitSection: React.FC<{ data: GitSectionData; settings?: GitSectionS
|
|
|
3313
3377
|
</div>
|
|
3314
3378
|
|
|
3315
3379
|
{/* RIGHT — git diff panel (decorative, content-driven commits) */}
|
|
3316
|
-
<div className="rounded-[
|
|
3317
|
-
<div className="bg-[
|
|
3380
|
+
<div className="rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_30px_60px_rgba(0,0,0,0.5)]">
|
|
3381
|
+
<div className="bg-[var(--local-panel-bar)] px-4 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
|
|
3318
3382
|
<span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
|
|
3319
3383
|
<span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
|
|
3320
3384
|
<span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
|
|
3321
|
-
<span className="ml-auto font-mono text-[0.62rem] text-[
|
|
3385
|
+
<span className="ml-auto font-mono text-[0.62rem] text-[var(--local-panel-text-faint)]">src/data/pages/home.json</span>
|
|
3322
3386
|
</div>
|
|
3323
3387
|
{/* Tabs */}
|
|
3324
|
-
<div className="bg-[
|
|
3325
|
-
<div className="font-mono text-[0.60rem] px-4 py-2 text-
|
|
3326
|
-
<div className="font-mono text-[0.60rem] px-4 py-2 text-[
|
|
3327
|
-
<div className="font-mono text-[0.60rem] px-4 py-2 text-[
|
|
3388
|
+
<div className="bg-[var(--local-panel-bg)] border-b border-[var(--local-panel-border)] flex">
|
|
3389
|
+
<div className="font-mono text-[0.60rem] px-4 py-2 text-[var(--local-text)] border-b-2 border-[var(--local-primary)]">Changes</div>
|
|
3390
|
+
<div className="font-mono text-[0.60rem] px-4 py-2 text-[var(--local-panel-text-faint)]">History</div>
|
|
3391
|
+
<div className="font-mono text-[0.60rem] px-4 py-2 text-[var(--local-panel-text-faint)]">Blame</div>
|
|
3328
3392
|
</div>
|
|
3329
3393
|
{/* Diff */}
|
|
3330
|
-
<div className="bg-[
|
|
3394
|
+
<div className="bg-[var(--local-panel-deep)] px-4 py-4 font-mono text-[0.73rem] leading-[1.9] overflow-x-auto">
|
|
3331
3395
|
{[
|
|
3332
3396
|
{ t: 'ctx', g: '12', s: ' ', c: ' "type": "hero",' },
|
|
3333
3397
|
{ t: 'ctx', g: '13', s: ' ', c: ' "data": {' },
|
|
@@ -3338,28 +3402,28 @@ export const GitSection: React.FC<{ data: GitSectionData; settings?: GitSectionS
|
|
|
3338
3402
|
{ t: 'ctx', g: '16', s: ' ', c: ' "badge": "Architecture v1.2",' },
|
|
3339
3403
|
{ t: 'ctx', g: '17', s: ' ', c: ' }' },
|
|
3340
3404
|
].map((ln, i) => (
|
|
3341
|
-
<div key={i} className={`flex gap-3 px-1 rounded-[
|
|
3342
|
-
ln.t === 'add' ? 'bg-[
|
|
3343
|
-
ln.t === 'del' ? 'bg-[
|
|
3405
|
+
<div key={i} className={`flex gap-3 px-1 rounded-[var(--local-radius-sm)] ${
|
|
3406
|
+
ln.t === 'add' ? 'bg-[var(--local-panel-bg)]' :
|
|
3407
|
+
ln.t === 'del' ? 'bg-[var(--local-panel-bg)]' :
|
|
3344
3408
|
'opacity-45'}`}
|
|
3345
3409
|
>
|
|
3346
|
-
<span className="text-[
|
|
3347
|
-
<span className={`min-w-[12px] ${ln.t === 'add' ? 'text-[
|
|
3348
|
-
<span className={`whitespace-pre ${ln.t === 'add' ? 'text-[
|
|
3410
|
+
<span className="text-[var(--local-panel-text-faint)] min-w-[18px] text-right select-none">{ln.g}</span>
|
|
3411
|
+
<span className={`min-w-[12px] ${ln.t === 'add' ? 'text-[var(--local-primary)]' : ln.t === 'del' ? 'text-[var(--local-accent)]' : 'text-[var(--local-panel-text-faint)]'}`}>{ln.s}</span>
|
|
3412
|
+
<span className={`whitespace-pre ${ln.t === 'add' ? 'text-[var(--local-primary)]' : ln.t === 'del' ? 'text-[var(--local-accent)]' : 'text-[var(--local-panel-text-soft)]'}`}>{ln.c}</span>
|
|
3349
3413
|
</div>
|
|
3350
3414
|
))}
|
|
3351
3415
|
</div>
|
|
3352
3416
|
{/* Commits */}
|
|
3353
|
-
<div className="bg-[
|
|
3417
|
+
<div className="bg-[var(--local-panel-bg)] border-t border-[var(--local-panel-border)] px-4 py-3 flex flex-col gap-2.5">
|
|
3354
3418
|
{[
|
|
3355
3419
|
{ hash: 'a3f9c12', msg: 'feat(home): update hero headline copy', time: '2m ago', op: 1 },
|
|
3356
3420
|
{ hash: '8b21e04', msg: 'content(home): add 3 metrics to hero', time: '1h ago', op: 0.6 },
|
|
3357
3421
|
{ hash: 'cc70a91', msg: 'feat(home): initial page structure', time: '2d ago', op: 0.4 },
|
|
3358
3422
|
].map(({ hash, msg, time, op }) => (
|
|
3359
3423
|
<div key={hash} className="flex items-center gap-3" style={{ opacity: op }}>
|
|
3360
|
-
<span className="font-mono text-[0.58rem] text-[
|
|
3361
|
-
<span className="font-sans text-[0.70rem] text-[
|
|
3362
|
-
<span className="font-mono text-[0.56rem] text-[
|
|
3424
|
+
<span className="font-mono text-[0.58rem] text-[var(--local-accent)] min-w-[52px]">{hash}</span>
|
|
3425
|
+
<span className="font-sans text-[0.70rem] text-[var(--local-panel-text-soft)] flex-1 truncate">{msg}</span>
|
|
3426
|
+
<span className="font-mono text-[0.56rem] text-[var(--local-panel-text-faint)]">{time}</span>
|
|
3363
3427
|
</div>
|
|
3364
3428
|
))}
|
|
3365
3429
|
</div>
|
|
@@ -3430,12 +3494,13 @@ export const Header: React.FC<{
|
|
|
3430
3494
|
return (
|
|
3431
3495
|
<header
|
|
3432
3496
|
style={{
|
|
3433
|
-
'--local-bg': '
|
|
3497
|
+
'--local-bg': 'color-mix(in oklch, var(--background) 88%, transparent)',
|
|
3434
3498
|
'--local-text': 'var(--foreground)',
|
|
3435
3499
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
3436
3500
|
'--local-primary': 'var(--primary)',
|
|
3437
|
-
'--local-accent': 'var(--
|
|
3438
|
-
'--local-border': '
|
|
3501
|
+
'--local-accent': 'var(--accent)',
|
|
3502
|
+
'--local-border': 'color-mix(in oklch, var(--primary) 18%, transparent)',
|
|
3503
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
3439
3504
|
} as React.CSSProperties}
|
|
3440
3505
|
className={cn(
|
|
3441
3506
|
'w-full py-4 transition-all duration-300 z-0',
|
|
@@ -3474,7 +3539,7 @@ export const Header: React.FC<{
|
|
|
3474
3539
|
className={cn(
|
|
3475
3540
|
'no-underline text-sm font-medium transition-colors',
|
|
3476
3541
|
item.isCta
|
|
3477
|
-
? 'bg-[var(--local-primary)] text-white px-5 py-2 rounded-
|
|
3542
|
+
? 'bg-[var(--local-primary)] text-white px-5 py-2 rounded-[var(--local-radius-md)] font-semibold hover:brightness-110 hover:-translate-y-px'
|
|
3478
3543
|
: 'text-[var(--local-text-muted)] hover:text-[var(--local-text)]'
|
|
3479
3544
|
)}
|
|
3480
3545
|
>
|
|
@@ -3589,16 +3654,26 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
|
|
|
3589
3654
|
'--local-text': 'var(--foreground)',
|
|
3590
3655
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
3591
3656
|
'--local-primary': 'var(--primary)',
|
|
3592
|
-
'--local-accent': 'var(--
|
|
3593
|
-
'--local-cyan': 'var(--
|
|
3657
|
+
'--local-accent': 'var(--accent)',
|
|
3658
|
+
'--local-cyan': 'var(--secondary)',
|
|
3594
3659
|
'--local-border': 'var(--border)',
|
|
3595
3660
|
'--local-surface': 'var(--card)',
|
|
3661
|
+
'--local-radius-sm': 'var(--theme-radius-sm)',
|
|
3662
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
3663
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
3664
|
+
'--local-panel-bg': 'var(--demo-surface)',
|
|
3665
|
+
'--local-panel-deep': 'var(--demo-surface-deep)',
|
|
3666
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
3667
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
3668
|
+
'--local-panel-text-soft': 'var(--demo-text-soft)',
|
|
3669
|
+
'--local-panel-text-faint': 'var(--demo-text-faint)',
|
|
3670
|
+
'--local-accent-soft': 'var(--demo-accent-soft)',
|
|
3596
3671
|
} as React.CSSProperties}
|
|
3597
3672
|
className="jp-hero relative min-h-screen flex items-center overflow-hidden pt-24 pb-0 bg-[var(--local-bg)]"
|
|
3598
3673
|
>
|
|
3599
3674
|
{/* Background glows */}
|
|
3600
|
-
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1100px] h-[650px] bg-[radial-gradient(ellipse_at_50%_0%,
|
|
3601
|
-
<div className="absolute inset-0 bg-[image:linear-gradient(
|
|
3675
|
+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1100px] h-[650px] bg-[radial-gradient(ellipse_at_50%_0%,var(--local-accent-soft),transparent_65%)] pointer-events-none" />
|
|
3676
|
+
<div className="absolute inset-0 bg-[image:linear-gradient(var(--local-accent-soft)_1px,transparent_1px),linear-gradient(90deg,var(--local-accent-soft)_1px,transparent_1px)] bg-[size:80px_80px] [mask-image:radial-gradient(ellipse_at_50%_0%,black_25%,transparent_75%)] pointer-events-none" />
|
|
3602
3677
|
|
|
3603
3678
|
<div className="relative z-0 max-w-[1200px] mx-auto px-8 w-full">
|
|
3604
3679
|
<div className="grid grid-cols-2 gap-16 items-center pb-20">
|
|
@@ -3607,10 +3682,10 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
|
|
|
3607
3682
|
<div>
|
|
3608
3683
|
{data.badge && (
|
|
3609
3684
|
<div
|
|
3610
|
-
className="inline-flex items-center gap-2 bg-[
|
|
3685
|
+
className="inline-flex items-center gap-2 bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] px-4 py-1.5 rounded-full text-[0.70rem] font-mono font-semibold text-[var(--local-accent)] mb-8 tracking-widest uppercase jp-animate-in"
|
|
3611
3686
|
data-jp-field="badge"
|
|
3612
3687
|
>
|
|
3613
|
-
<span className="w-1.5 h-1.5 rounded-full bg-[
|
|
3688
|
+
<span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)] jp-pulse-dot" />
|
|
3614
3689
|
{data.badge}
|
|
3615
3690
|
</div>
|
|
3616
3691
|
)}
|
|
@@ -3651,10 +3726,10 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
|
|
|
3651
3726
|
data-jp-item-id={cta.id ?? `legacy-${idx}`}
|
|
3652
3727
|
data-jp-item-field="ctas"
|
|
3653
3728
|
className={cn(
|
|
3654
|
-
'inline-flex items-center gap-2 px-7 py-3 rounded-[
|
|
3729
|
+
'inline-flex items-center gap-2 px-7 py-3 rounded-[var(--local-radius-md)] font-semibold text-[0.95rem] transition-all duration-200 no-underline',
|
|
3655
3730
|
cta.variant === 'primary'
|
|
3656
|
-
? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 shadow-[
|
|
3657
|
-
: 'bg-transparent text-[var(--local-text)] border border-[
|
|
3731
|
+
? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 shadow-[0_0_24px_var(--local-accent-soft)]'
|
|
3732
|
+
: 'bg-transparent text-[var(--local-text)] border border-[var(--local-panel-border)] hover:border-[var(--local-panel-border-strong)] hover:bg-[var(--local-panel-bg)]'
|
|
3658
3733
|
)}
|
|
3659
3734
|
>
|
|
3660
3735
|
{cta.label}
|
|
@@ -3664,7 +3739,7 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
|
|
|
3664
3739
|
)}
|
|
3665
3740
|
|
|
3666
3741
|
{data.metrics && data.metrics.length > 0 && (
|
|
3667
|
-
<div className="flex gap-10 mt-14 pt-10 border-t border-[
|
|
3742
|
+
<div className="flex gap-10 mt-14 pt-10 border-t border-[var(--local-panel-border)] flex-wrap jp-animate-in jp-d4">
|
|
3668
3743
|
{data.metrics.map((metric, idx) => (
|
|
3669
3744
|
<div
|
|
3670
3745
|
key={(metric as { id?: string }).id ?? idx}
|
|
@@ -3684,102 +3759,102 @@ export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ da
|
|
|
3684
3759
|
</div>
|
|
3685
3760
|
|
|
3686
3761
|
{/* RIGHT — ICE mini-mockup */}
|
|
3687
|
-
<div className="jp-animate-in jp-d2 rounded-[
|
|
3762
|
+
<div className="jp-animate-in jp-d2 rounded-[var(--local-radius-lg)] overflow-hidden border border-[var(--local-panel-border)] shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_40px_80px_rgba(0,0,0,0.6),0_0_60px_rgba(59,130,246,0.08)]">
|
|
3688
3763
|
{/* Browser bar */}
|
|
3689
|
-
<div className="bg-[
|
|
3764
|
+
<div className="bg-[var(--local-panel-bg)] px-3 py-2.5 flex items-center gap-1.5 border-b border-[var(--local-panel-border)]">
|
|
3690
3765
|
<span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
|
|
3691
3766
|
<span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
|
|
3692
3767
|
<span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
|
|
3693
|
-
<span className="mx-auto font-mono text-[0.60rem] text-[
|
|
3768
|
+
<span className="mx-auto font-mono text-[0.60rem] text-[var(--local-panel-text-faint)] bg-[var(--local-panel-deep)] px-3 py-0.5 rounded-[var(--local-radius-sm)]">localhost:5173 · Studio</span>
|
|
3694
3769
|
</div>
|
|
3695
3770
|
{/* Split: canvas + inspector */}
|
|
3696
|
-
<div className="grid grid-cols-[1fr_260px] h-[360px] bg-[
|
|
3771
|
+
<div className="grid grid-cols-[1fr_260px] h-[360px] bg-[var(--local-panel-deep)]">
|
|
3697
3772
|
{/* Canvas */}
|
|
3698
|
-
<div className="relative bg-gradient-to-br from-[
|
|
3699
|
-
<span className="absolute top-2 right-2 font-mono text-[0.48rem] font-bold tracking-widest uppercase bg-[
|
|
3700
|
-
<div className="absolute inset-0 border-2 border-[
|
|
3701
|
-
<div className="inline-flex items-center gap-1.5 bg-[
|
|
3702
|
-
<span className="w-1 h-1 rounded-full bg-[
|
|
3773
|
+
<div className="relative bg-gradient-to-br from-[var(--local-panel-deep)] to-[var(--local-panel-bg)] p-8 flex flex-col justify-center">
|
|
3774
|
+
<span className="absolute top-2 right-2 font-mono text-[0.48rem] font-bold tracking-widest uppercase bg-[var(--local-primary)] text-white px-1.5 py-0.5 rounded-[var(--local-radius-sm)]">HERO | LOCAL</span>
|
|
3775
|
+
<div className="absolute inset-0 border-2 border-[var(--local-primary)] pointer-events-none" />
|
|
3776
|
+
<div className="inline-flex items-center gap-1.5 bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-full px-2.5 py-1 font-mono text-[0.52rem] text-[var(--local-panel-text-soft)] mb-3 w-fit">
|
|
3777
|
+
<span className="w-1 h-1 rounded-full bg-[var(--local-primary)]" />
|
|
3703
3778
|
{data.badge ?? 'Architecture v1.2'}
|
|
3704
3779
|
</div>
|
|
3705
3780
|
<div className="font-display font-black text-[1.5rem] leading-none text-white mb-0.5">
|
|
3706
3781
|
{data.title}
|
|
3707
3782
|
</div>
|
|
3708
3783
|
{data.titleHighlight && (
|
|
3709
|
-
<div className="font-display font-black text-[1.5rem] leading-none bg-gradient-to-r from-[
|
|
3784
|
+
<div className="font-display font-black text-[1.5rem] leading-none bg-gradient-to-r from-[var(--local-accent)] to-[var(--local-cyan)] bg-clip-text text-transparent mb-3">
|
|
3710
3785
|
{data.titleHighlight}
|
|
3711
3786
|
</div>
|
|
3712
3787
|
)}
|
|
3713
|
-
<p className="text-[0.65rem] text-[
|
|
3788
|
+
<p className="text-[0.65rem] text-[var(--local-panel-text-faint)] leading-[1.6] max-w-[220px] mb-3">
|
|
3714
3789
|
{data.description?.slice(0, 100)}…
|
|
3715
3790
|
</p>
|
|
3716
3791
|
<div className="flex gap-1.5">
|
|
3717
|
-
<span className="text-[0.58rem] font-semibold bg-[
|
|
3718
|
-
<span className="text-[0.58rem] border border-[
|
|
3792
|
+
<span className="text-[0.58rem] font-semibold bg-[var(--local-primary)] text-white px-2.5 py-1 rounded-[var(--local-radius-sm)]">Read the Docs</span>
|
|
3793
|
+
<span className="text-[0.58rem] border border-[var(--local-panel-border)] text-[var(--local-panel-text-soft)] px-2.5 py-1 rounded-[var(--local-radius-sm)]">View on NPM</span>
|
|
3719
3794
|
</div>
|
|
3720
|
-
<div className="flex gap-4 mt-3 pt-3 border-t border-[
|
|
3795
|
+
<div className="flex gap-4 mt-3 pt-3 border-t border-[var(--local-panel-border)]">
|
|
3721
3796
|
{(data.metrics ?? []).map((m, i) => (
|
|
3722
3797
|
<div key={i}>
|
|
3723
3798
|
<div className="font-display font-black text-[1rem] text-white leading-none">{m.val}</div>
|
|
3724
|
-
<div className="font-mono text-[0.44rem] uppercase tracking-widest text-[
|
|
3799
|
+
<div className="font-mono text-[0.44rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mt-0.5">{m.label}</div>
|
|
3725
3800
|
</div>
|
|
3726
3801
|
))}
|
|
3727
3802
|
</div>
|
|
3728
3803
|
</div>
|
|
3729
3804
|
{/* Inspector */}
|
|
3730
|
-
<div className="bg-[
|
|
3731
|
-
<div className="px-3.5 py-2.5 border-b border-[
|
|
3805
|
+
<div className="bg-[var(--local-panel-bg)] border-l border-[var(--local-panel-border)] flex flex-col">
|
|
3806
|
+
<div className="px-3.5 py-2.5 border-b border-[var(--local-panel-border)] flex items-start justify-between">
|
|
3732
3807
|
<div>
|
|
3733
3808
|
<div className="font-display font-bold text-[0.80rem] text-white">Inspector</div>
|
|
3734
|
-
<div className="flex items-center gap-1.5 mt-0.5 font-mono text-[0.54rem] text-[
|
|
3809
|
+
<div className="flex items-center gap-1.5 mt-0.5 font-mono text-[0.54rem] text-[var(--local-accent)]">
|
|
3735
3810
|
<span className="font-bold">■ HERO</span>
|
|
3736
|
-
<span className="text-[
|
|
3737
|
-
<span className="text-[
|
|
3811
|
+
<span className="text-[var(--local-panel-text-faint)]">|</span>
|
|
3812
|
+
<span className="text-[var(--local-panel-text-faint)]">LOCAL</span>
|
|
3738
3813
|
</div>
|
|
3739
3814
|
</div>
|
|
3740
|
-
<span className="font-mono text-[0.55rem] text-[
|
|
3815
|
+
<span className="font-mono text-[0.55rem] text-[var(--local-accent)]">+ Add section</span>
|
|
3741
3816
|
</div>
|
|
3742
3817
|
{/* Layers */}
|
|
3743
|
-
<div className="border-b border-[
|
|
3744
|
-
<div className="px-3.5 py-1.5 font-mono text-[0.50rem] uppercase tracking-widest text-[
|
|
3745
|
-
<span>Page Layers</span><span className="text-[
|
|
3818
|
+
<div className="border-b border-[var(--local-panel-border)]">
|
|
3819
|
+
<div className="px-3.5 py-1.5 font-mono text-[0.50rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] flex justify-between">
|
|
3820
|
+
<span>Page Layers</span><span className="text-[var(--local-panel-text-faint)]">(8)</span>
|
|
3746
3821
|
</div>
|
|
3747
|
-
<div className="flex items-center gap-2 px-3.5 py-1.5 bg-[
|
|
3748
|
-
<span className="font-mono text-[0.50rem] uppercase tracking-wide text-[
|
|
3749
|
-
<span className="font-sans text-[0.60rem] text-[
|
|
3750
|
-
<span className="w-1.5 h-1.5 rounded-full bg-[
|
|
3822
|
+
<div className="flex items-center gap-2 px-3.5 py-1.5 bg-[var(--local-accent-soft)]">
|
|
3823
|
+
<span className="font-mono text-[0.50rem] uppercase tracking-wide text-[var(--local-accent)] w-9">HERO</span>
|
|
3824
|
+
<span className="font-sans text-[0.60rem] text-[var(--local-text)] font-semibold flex-1 truncate">{data.title}</span>
|
|
3825
|
+
<span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)]" />
|
|
3751
3826
|
</div>
|
|
3752
3827
|
<div className="flex items-center gap-2 px-3.5 py-1.5 opacity-50">
|
|
3753
|
-
<span className="font-mono text-[0.50rem] uppercase tracking-wide text-[
|
|
3754
|
-
<span className="font-sans text-[0.60rem] text-[
|
|
3828
|
+
<span className="font-mono text-[0.50rem] uppercase tracking-wide text-[var(--local-panel-text-faint)] w-9">SOC</span>
|
|
3829
|
+
<span className="font-sans text-[0.60rem] text-[var(--local-panel-text-faint)] flex-1 truncate">Separation of Concerns</span>
|
|
3755
3830
|
</div>
|
|
3756
3831
|
<div className="flex items-center gap-2 px-3.5 py-1.5 opacity-35">
|
|
3757
|
-
<span className="font-mono text-[0.50rem] uppercase tracking-wide text-[
|
|
3758
|
-
<span className="font-sans text-[0.60rem] text-[
|
|
3832
|
+
<span className="font-mono text-[0.50rem] uppercase tracking-wide text-[var(--local-panel-text-faint)] w-9">CMS</span>
|
|
3833
|
+
<span className="font-sans text-[0.60rem] text-[var(--local-panel-text-faint)] flex-1 truncate">In-Context Editing</span>
|
|
3759
3834
|
</div>
|
|
3760
3835
|
</div>
|
|
3761
3836
|
{/* Fields */}
|
|
3762
3837
|
<div className="flex-1 px-3.5 py-3 flex flex-col gap-2.5 overflow-hidden">
|
|
3763
3838
|
<div>
|
|
3764
|
-
<div className="font-mono text-[0.50rem] uppercase tracking-widest text-[
|
|
3765
|
-
<div className="bg-[
|
|
3839
|
+
<div className="font-mono text-[0.50rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1">Title</div>
|
|
3840
|
+
<div className="bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] rounded-[var(--local-radius-sm)] px-2 py-1.5 font-mono text-[0.58rem] text-[var(--local-text)] truncate">{data.title}</div>
|
|
3766
3841
|
</div>
|
|
3767
3842
|
<div>
|
|
3768
|
-
<div className="font-mono text-[0.50rem] uppercase tracking-widest text-[
|
|
3769
|
-
<div className="bg-[
|
|
3843
|
+
<div className="font-mono text-[0.50rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1">Subtitle</div>
|
|
3844
|
+
<div className="bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-[var(--local-radius-sm)] px-2 py-1.5 font-mono text-[0.58rem] text-[var(--local-panel-text-soft)] truncate">{data.titleHighlight}</div>
|
|
3770
3845
|
</div>
|
|
3771
3846
|
<div>
|
|
3772
|
-
<div className="font-mono text-[0.50rem] uppercase tracking-widest text-[
|
|
3773
|
-
<div className="bg-[
|
|
3847
|
+
<div className="font-mono text-[0.50rem] uppercase tracking-widest text-[var(--local-panel-text-faint)] mb-1">Badge</div>
|
|
3848
|
+
<div className="bg-[var(--local-panel-bg)] border border-[var(--local-panel-border)] rounded-[var(--local-radius-sm)] px-2 py-1.5 font-mono text-[0.58rem] text-[var(--local-panel-text-soft)] truncate">{data.badge}</div>
|
|
3774
3849
|
</div>
|
|
3775
3850
|
</div>
|
|
3776
3851
|
{/* Bottom bar */}
|
|
3777
|
-
<div className="px-3.5 py-2 border-t border-[
|
|
3778
|
-
<span className="w-1.5 h-1.5 rounded-full bg-[
|
|
3779
|
-
<span className="font-mono text-[0.50rem] text-[
|
|
3852
|
+
<div className="px-3.5 py-2 border-t border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] flex items-center gap-2">
|
|
3853
|
+
<span className="w-1.5 h-1.5 rounded-full bg-[var(--local-primary)]" />
|
|
3854
|
+
<span className="font-mono text-[0.50rem] text-[var(--local-panel-text-soft)]">All Changes Saved</span>
|
|
3780
3855
|
<div className="ml-auto flex gap-1.5">
|
|
3781
|
-
<span className="font-mono text-[0.48rem] px-1.5 py-0.5 rounded border border-[
|
|
3782
|
-
<span className="font-mono text-[0.48rem] px-1.5 py-0.5 rounded border border-[
|
|
3856
|
+
<span className="font-mono text-[0.48rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[var(--local-panel-border-strong)] bg-[var(--local-accent-soft)] text-[var(--local-accent)]">⬡ HTML</span>
|
|
3857
|
+
<span className="font-mono text-[0.48rem] px-1.5 py-0.5 rounded-[var(--local-radius-sm)] border border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] text-[var(--local-panel-text-soft)] opacity-50">{ } JSON</span>
|
|
3783
3858
|
</div>
|
|
3784
3859
|
</div>
|
|
3785
3860
|
</div>
|
|
@@ -3847,6 +3922,7 @@ export const ImageBreak: React.FC<{ data: ImageBreakData; settings?: ImageBreakS
|
|
|
3847
3922
|
'--local-bg': 'var(--background)',
|
|
3848
3923
|
'--local-text': 'var(--foreground)',
|
|
3849
3924
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
3925
|
+
'--local-surface-overlay': 'color-mix(in oklch, var(--background) 78%, transparent)',
|
|
3850
3926
|
} as React.CSSProperties}
|
|
3851
3927
|
className="relative z-0 bg-[var(--local-bg)]"
|
|
3852
3928
|
>
|
|
@@ -3861,10 +3937,10 @@ export const ImageBreak: React.FC<{ data: ImageBreakData; settings?: ImageBreakS
|
|
|
3861
3937
|
/>
|
|
3862
3938
|
{data.caption && (
|
|
3863
3939
|
<div
|
|
3864
|
-
className="absolute bottom-0 inset-x-0 bg-
|
|
3940
|
+
className="absolute bottom-0 inset-x-0 bg-[var(--local-surface-overlay)] backdrop-blur-sm px-6 py-4"
|
|
3865
3941
|
data-jp-field="caption"
|
|
3866
3942
|
>
|
|
3867
|
-
<p className="text-sm text-
|
|
3943
|
+
<p className="text-sm text-[var(--local-text-muted)] italic">{data.caption}</p>
|
|
3868
3944
|
</div>
|
|
3869
3945
|
)}
|
|
3870
3946
|
</div>
|
|
@@ -3925,13 +4001,19 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
|
|
|
3925
4001
|
'--local-text': 'var(--foreground)',
|
|
3926
4002
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
3927
4003
|
'--local-primary': 'var(--primary)',
|
|
3928
|
-
'--local-accent': 'var(--
|
|
4004
|
+
'--local-accent': 'var(--accent)',
|
|
3929
4005
|
'--local-deep': 'var(--background)',
|
|
4006
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
4007
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
4008
|
+
'--local-panel-bg': 'var(--demo-surface-soft)',
|
|
4009
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
4010
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
4011
|
+
'--local-accent-soft': 'var(--demo-accent-soft)',
|
|
3930
4012
|
} as React.CSSProperties}
|
|
3931
4013
|
className="relative z-0 py-28 bg-[var(--local-bg)]"
|
|
3932
4014
|
>
|
|
3933
|
-
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[
|
|
3934
|
-
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[
|
|
4015
|
+
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
|
|
4016
|
+
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
|
|
3935
4017
|
<div className="max-w-[1200px] mx-auto px-8">
|
|
3936
4018
|
{data.label && (
|
|
3937
4019
|
<div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
|
|
@@ -3957,7 +4039,7 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
|
|
|
3957
4039
|
{data.badges.map((badge, idx) => (
|
|
3958
4040
|
<span
|
|
3959
4041
|
key={idx}
|
|
3960
|
-
className="inline-flex items-center gap-1.5 bg-[
|
|
4042
|
+
className="inline-flex items-center gap-1.5 bg-[var(--local-accent-soft)] border border-[var(--local-panel-border-strong)] text-[var(--local-accent)] px-3 py-1.5 rounded-[var(--local-radius-md)] text-[0.78rem] font-semibold"
|
|
3961
4043
|
data-jp-item-id={(badge as { id?: string }).id ?? `legacy-${idx}`}
|
|
3962
4044
|
data-jp-item-field="badges"
|
|
3963
4045
|
>
|
|
@@ -3967,7 +4049,7 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
|
|
|
3967
4049
|
</div>
|
|
3968
4050
|
)}
|
|
3969
4051
|
</div>
|
|
3970
|
-
<div className="border border-[
|
|
4052
|
+
<div className="border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] p-12 bg-[var(--local-panel-bg)] text-center">
|
|
3971
4053
|
{data.engines && data.engines.length >= 2 && (
|
|
3972
4054
|
<div className="flex items-center justify-center gap-6 mb-8">
|
|
3973
4055
|
{data.engines.map((engine, idx) => (
|
|
@@ -3978,8 +4060,8 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
|
|
|
3978
4060
|
<div
|
|
3979
4061
|
className={
|
|
3980
4062
|
engine.variant === 'tailwind'
|
|
3981
|
-
? 'px-6 py-4 rounded-
|
|
3982
|
-
: 'px-6 py-4 rounded-
|
|
4063
|
+
? 'px-6 py-4 rounded-[var(--local-radius-md)] font-bold text-[0.95rem] border bg-[var(--local-accent-soft)] border-[var(--local-panel-border-strong)] text-[var(--local-accent)]'
|
|
4064
|
+
: 'px-6 py-4 rounded-[var(--local-radius-md)] font-bold text-[0.95rem] border bg-[var(--local-panel-bg)] border-[var(--local-panel-border)] text-[var(--local-primary)]'
|
|
3983
4065
|
}
|
|
3984
4066
|
data-jp-item-id={(engine as { id?: string }).id ?? `legacy-${idx}`}
|
|
3985
4067
|
data-jp-item-field="engines"
|
|
@@ -3991,7 +4073,7 @@ export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSett
|
|
|
3991
4073
|
</div>
|
|
3992
4074
|
)}
|
|
3993
4075
|
{data.codeSnippet && (
|
|
3994
|
-
<div className="font-mono text-[0.85rem] text-[var(--local-text-muted)] bg-[var(--local-deep)] p-4 rounded-lg text-left border border-[
|
|
4076
|
+
<div className="font-mono text-[0.85rem] text-[var(--local-text-muted)] bg-[var(--local-deep)] p-4 rounded-[var(--local-radius-lg)] text-left border border-[var(--local-panel-border)]" data-jp-field="codeSnippet">
|
|
3995
4077
|
<pre className="whitespace-pre-wrap m-0">{data.codeSnippet}</pre>
|
|
3996
4078
|
<div className="mt-4 text-[0.75rem] text-center opacity-50">
|
|
3997
4079
|
Same JSON. Different Render Engine.
|
|
@@ -4082,7 +4164,7 @@ export const Philosophy: React.FC<{ data: PhilosophyData; settings?: PhilosophyS
|
|
|
4082
4164
|
'--local-bg': 'var(--background)',
|
|
4083
4165
|
'--local-text': 'var(--foreground)',
|
|
4084
4166
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
4085
|
-
'--local-accent': 'var(--
|
|
4167
|
+
'--local-accent': 'var(--accent)',
|
|
4086
4168
|
'--local-primary': 'var(--primary)',
|
|
4087
4169
|
} as React.CSSProperties}
|
|
4088
4170
|
className="relative z-0 py-28 bg-[var(--local-bg)]"
|
|
@@ -4153,15 +4235,15 @@ import { Icon, isIconName } from '@/lib/IconResolver';
|
|
|
4153
4235
|
import type { PillarsGridData, PillarsGridSettings, PillarIconVariant, PillarTagVariant } from './types';
|
|
4154
4236
|
|
|
4155
4237
|
const iconVariantStyles: Record<PillarIconVariant, string> = {
|
|
4156
|
-
split: 'bg-[
|
|
4157
|
-
registry: 'bg-[
|
|
4158
|
-
federation: 'bg-[
|
|
4238
|
+
split: 'bg-[var(--local-accent-soft)] text-[var(--local-accent)]',
|
|
4239
|
+
registry: 'bg-[var(--local-cyan-soft)] text-[var(--local-cyan)]',
|
|
4240
|
+
federation: 'bg-[var(--local-panel-bg)] text-[var(--local-primary)]',
|
|
4159
4241
|
};
|
|
4160
4242
|
|
|
4161
4243
|
const tagVariantStyles: Record<PillarTagVariant, string> = {
|
|
4162
|
-
core: 'bg-[
|
|
4163
|
-
pattern: 'bg-[
|
|
4164
|
-
enterprise: 'bg-[
|
|
4244
|
+
core: 'bg-[var(--local-accent-soft)] text-[var(--local-accent)]',
|
|
4245
|
+
pattern: 'bg-[var(--local-cyan-soft)] text-[var(--local-cyan)]',
|
|
4246
|
+
enterprise: 'bg-[var(--local-panel-bg)] text-[var(--local-primary)]',
|
|
4165
4247
|
};
|
|
4166
4248
|
|
|
4167
4249
|
export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGridSettings }> = ({ data }) => {
|
|
@@ -4172,12 +4254,20 @@ export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGr
|
|
|
4172
4254
|
'--local-text': 'var(--foreground)',
|
|
4173
4255
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
4174
4256
|
'--local-primary': 'var(--primary)',
|
|
4175
|
-
'--local-accent': 'var(--
|
|
4257
|
+
'--local-accent': 'var(--accent)',
|
|
4258
|
+
'--local-cyan': 'var(--secondary)',
|
|
4176
4259
|
'--local-border': 'var(--border)',
|
|
4260
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
4261
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
4262
|
+
'--local-panel-bg': 'var(--demo-surface-soft)',
|
|
4263
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
4264
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
4265
|
+
'--local-accent-soft': 'var(--demo-accent-soft)',
|
|
4266
|
+
'--local-cyan-soft': 'color-mix(in oklch, var(--secondary) 14%, transparent)',
|
|
4177
4267
|
} as React.CSSProperties}
|
|
4178
4268
|
className="relative z-0 py-28 bg-[var(--local-bg)]"
|
|
4179
4269
|
>
|
|
4180
|
-
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-px bg-gradient-to-r from-transparent via-[
|
|
4270
|
+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-px bg-gradient-to-r from-transparent via-[var(--local-panel-border-strong)] to-transparent" />
|
|
4181
4271
|
<div className="max-w-[1200px] mx-auto px-8">
|
|
4182
4272
|
{data.label && (
|
|
4183
4273
|
<div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
|
|
@@ -4197,13 +4287,13 @@ export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGr
|
|
|
4197
4287
|
{data.pillars.map((pillar, idx) => (
|
|
4198
4288
|
<div
|
|
4199
4289
|
key={pillar.id ?? idx}
|
|
4200
|
-
className="jp-pillar-card group relative border border-[
|
|
4290
|
+
className="jp-pillar-card group relative border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] p-10 bg-[var(--local-panel-bg)] transition-all duration-300 overflow-hidden hover:border-[var(--local-panel-border-strong)] hover:-translate-y-1 hover:bg-[var(--local-accent-soft)]"
|
|
4201
4291
|
data-jp-item-id={pillar.id ?? `legacy-${idx}`}
|
|
4202
4292
|
data-jp-item-field="pillars"
|
|
4203
4293
|
>
|
|
4204
|
-
<div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[var(--local-primary)] to-[
|
|
4294
|
+
<div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[var(--local-primary)] to-[var(--local-cyan)] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
4205
4295
|
<div className={cn(
|
|
4206
|
-
'w-12 h-12 rounded-
|
|
4296
|
+
'w-12 h-12 rounded-[var(--local-radius-md)] flex items-center justify-center mb-6 text-xl font-bold',
|
|
4207
4297
|
iconVariantStyles[pillar.iconVariant]
|
|
4208
4298
|
)}>
|
|
4209
4299
|
{pillar.icon && isIconName(pillar.icon) ? (
|
|
@@ -4285,10 +4375,10 @@ import { cn } from '@/lib/utils';
|
|
|
4285
4375
|
import type { ProblemStatementData, ProblemStatementSettings, SiloBlockVariant } from './types';
|
|
4286
4376
|
|
|
4287
4377
|
const variantStyles: Record<SiloBlockVariant, string> = {
|
|
4288
|
-
red: 'bg-[
|
|
4289
|
-
amber: 'bg-[
|
|
4290
|
-
green: 'bg-[
|
|
4291
|
-
blue: 'bg-[
|
|
4378
|
+
red: 'bg-[var(--local-panel-bg)] border-[var(--local-panel-border)] text-[var(--local-text-muted)]',
|
|
4379
|
+
amber: 'bg-[var(--local-panel-bg)] border-[var(--local-panel-border)] text-[var(--local-text-muted)]',
|
|
4380
|
+
green: 'bg-[var(--local-accent-soft)] border-[var(--local-panel-border-strong)] text-[var(--local-accent)]',
|
|
4381
|
+
blue: 'bg-[var(--local-accent-soft)] border-[var(--local-panel-border-strong)] text-[var(--local-accent)]',
|
|
4292
4382
|
};
|
|
4293
4383
|
|
|
4294
4384
|
export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?: ProblemStatementSettings }> = ({ data }) => {
|
|
@@ -4300,12 +4390,19 @@ export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?:
|
|
|
4300
4390
|
'--local-text': 'var(--foreground)',
|
|
4301
4391
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
4302
4392
|
'--local-border': 'var(--border)',
|
|
4393
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
4394
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
4395
|
+
'--local-panel-bg': 'var(--demo-surface-soft)',
|
|
4396
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
4397
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
4398
|
+
'--local-accent': 'var(--accent)',
|
|
4399
|
+
'--local-accent-soft': 'var(--demo-accent-soft)',
|
|
4303
4400
|
} as React.CSSProperties}
|
|
4304
4401
|
className="jp-problem relative z-0 py-28 bg-gradient-to-b from-[var(--local-bg)] to-[var(--local-surface)]"
|
|
4305
4402
|
>
|
|
4306
4403
|
<div className="max-w-[1200px] mx-auto px-8">
|
|
4307
4404
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
4308
|
-
<div className="relative h-[360px] border border-[
|
|
4405
|
+
<div className="relative h-[360px] border border-[var(--local-panel-border)] rounded-[var(--local-radius-lg)] bg-[var(--local-panel-bg)] overflow-hidden flex items-center justify-center">
|
|
4309
4406
|
<div className="text-center p-8">
|
|
4310
4407
|
{data.siloGroups.map((group, gIdx) => (
|
|
4311
4408
|
<div
|
|
@@ -4319,7 +4416,7 @@ export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?:
|
|
|
4319
4416
|
<span
|
|
4320
4417
|
key={(block as { id?: string }).id ?? bIdx}
|
|
4321
4418
|
className={cn(
|
|
4322
|
-
'inline-block px-4 py-2 rounded-
|
|
4419
|
+
'inline-block px-4 py-2 rounded-[var(--local-radius-md)] text-[0.8rem] font-semibold border',
|
|
4323
4420
|
variantStyles[block.variant]
|
|
4324
4421
|
)}
|
|
4325
4422
|
data-jp-item-id={(block as { id?: string }).id ?? `legacy-${bIdx}`}
|
|
@@ -4420,8 +4517,17 @@ export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: Product
|
|
|
4420
4517
|
'--local-text': 'var(--foreground)',
|
|
4421
4518
|
'--local-text-muted': 'var(--muted-foreground)',
|
|
4422
4519
|
'--local-primary': 'var(--primary)',
|
|
4423
|
-
'--local-accent': 'var(--
|
|
4520
|
+
'--local-accent': 'var(--accent)',
|
|
4424
4521
|
'--local-border': 'var(--border)',
|
|
4522
|
+
'--local-radius-sm': 'var(--theme-radius-sm)',
|
|
4523
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
4524
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
4525
|
+
'--local-panel-bg': 'var(--demo-surface-soft)',
|
|
4526
|
+
'--local-panel-bg-featured': 'var(--demo-accent-soft)',
|
|
4527
|
+
'--local-panel-border': 'var(--demo-border-soft)',
|
|
4528
|
+
'--local-panel-border-strong': 'var(--demo-border-strong)',
|
|
4529
|
+
'--local-panel-hover': 'var(--demo-accent-soft)',
|
|
4530
|
+
'--local-panel-text-soft': 'var(--demo-text-soft)',
|
|
4425
4531
|
} as React.CSSProperties}
|
|
4426
4532
|
className="relative z-0 py-28 bg-[var(--local-bg)]"
|
|
4427
4533
|
>
|
|
@@ -4447,10 +4553,10 @@ export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: Product
|
|
|
4447
4553
|
<div
|
|
4448
4554
|
key={product.id ?? idx}
|
|
4449
4555
|
className={cn(
|
|
4450
|
-
'relative border rounded-lg p-10 transition-all duration-300 hover:-translate-y-1',
|
|
4556
|
+
'relative border rounded-[var(--local-radius-lg)] p-10 transition-all duration-300 hover:-translate-y-1',
|
|
4451
4557
|
product.featured
|
|
4452
|
-
? 'border-[
|
|
4453
|
-
: 'border-[
|
|
4558
|
+
? 'border-[var(--local-panel-border-strong)] bg-[var(--local-panel-bg-featured)] hover:border-[var(--local-accent)]'
|
|
4559
|
+
: 'border-[var(--local-panel-border)] bg-[var(--local-panel-bg)] hover:border-[var(--local-panel-border-strong)]'
|
|
4454
4560
|
)}
|
|
4455
4561
|
data-jp-item-id={product.id ?? `legacy-${idx}`}
|
|
4456
4562
|
data-jp-item-field="products"
|
|
@@ -4474,14 +4580,14 @@ export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: Product
|
|
|
4474
4580
|
</span>
|
|
4475
4581
|
)}
|
|
4476
4582
|
</div>
|
|
4477
|
-
<div className="text-[0.85rem] text-[var(--local-text-muted)] mb-6 pb-6 border-b border-[
|
|
4583
|
+
<div className="text-[0.85rem] text-[var(--local-text-muted)] mb-6 pb-6 border-b border-[var(--local-panel-border)]">
|
|
4478
4584
|
{product.delivery}
|
|
4479
4585
|
</div>
|
|
4480
4586
|
<ul className="mb-8 space-y-0">
|
|
4481
4587
|
{product.features.map((feature, fIdx) => (
|
|
4482
4588
|
<li
|
|
4483
4589
|
key={fIdx}
|
|
4484
|
-
className="text-[0.9rem] text-[
|
|
4590
|
+
className="text-[0.9rem] text-[var(--local-panel-text-soft)] py-1.5 pl-6 relative before:content-['✓'] before:absolute before:left-0 before:text-[var(--local-accent)] before:font-bold before:text-[0.8rem]"
|
|
4485
4591
|
>
|
|
4486
4592
|
{feature.text}
|
|
4487
4593
|
</li>
|
|
@@ -4491,10 +4597,10 @@ export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: Product
|
|
|
4491
4597
|
<a
|
|
4492
4598
|
href={product.ctaHref}
|
|
4493
4599
|
className={cn(
|
|
4494
|
-
'block text-center py-3 rounded-[
|
|
4600
|
+
'block text-center py-3 rounded-[var(--local-radius-md)] no-underline font-semibold text-[0.95rem] transition-all duration-200',
|
|
4495
4601
|
product.ctaVariant === 'primary'
|
|
4496
4602
|
? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-px'
|
|
4497
|
-
: 'bg-[
|
|
4603
|
+
: 'bg-[var(--local-panel-bg)] text-[var(--local-panel-text-soft)] border border-[var(--local-panel-border)] hover:bg-[var(--local-panel-hover)] hover:border-[var(--local-panel-border-strong)]'
|
|
4498
4604
|
)}
|
|
4499
4605
|
>
|
|
4500
4606
|
{product.ctaLabel}
|
|
@@ -5918,10 +6024,10 @@ const Btn: React.FC<{
|
|
|
5918
6024
|
onMouseDown={(e) => e.preventDefault()}
|
|
5919
6025
|
onClick={onClick}
|
|
5920
6026
|
className={[
|
|
5921
|
-
'inline-flex h-7 min-w-7 items-center justify-center rounded-
|
|
6027
|
+
'inline-flex h-7 min-w-7 items-center justify-center rounded-[var(--local-radius-sm)] px-2 text-xs transition-colors',
|
|
5922
6028
|
active
|
|
5923
|
-
? 'bg-
|
|
5924
|
-
: 'text-
|
|
6029
|
+
? 'bg-[var(--local-toolbar-active-bg)] text-[var(--local-text)]'
|
|
6030
|
+
: 'text-[var(--local-toolbar-text)] hover:bg-[var(--local-toolbar-hover-bg)] hover:text-[var(--local-text)]',
|
|
5925
6031
|
].join(' ')}
|
|
5926
6032
|
>
|
|
5927
6033
|
{children}
|
|
@@ -5929,7 +6035,7 @@ const Btn: React.FC<{
|
|
|
5929
6035
|
);
|
|
5930
6036
|
|
|
5931
6037
|
const Sep: React.FC = () => (
|
|
5932
|
-
<span className="mx-0.5 h-5 w-px shrink-0 bg-
|
|
6038
|
+
<span className="mx-0.5 h-5 w-px shrink-0 bg-[var(--local-toolbar-border)]" aria-hidden />
|
|
5933
6039
|
);
|
|
5934
6040
|
|
|
5935
6041
|
// ── Image extension with upload metadata ──────────────────────────────────────
|
|
@@ -6369,7 +6475,7 @@ const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
|
|
|
6369
6475
|
{editor && (
|
|
6370
6476
|
<div
|
|
6371
6477
|
data-jp-ignore-select="true"
|
|
6372
|
-
className="sticky top-0 z-[65] border-b border-
|
|
6478
|
+
className="sticky top-0 z-[65] border-b border-[var(--local-toolbar-border)] bg-[var(--local-toolbar-bg)]"
|
|
6373
6479
|
>
|
|
6374
6480
|
{/* ── Main toolbar ── */}
|
|
6375
6481
|
<div className="flex flex-wrap items-center justify-center gap-1 p-2">
|
|
@@ -6502,8 +6608,8 @@ const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
|
|
|
6502
6608
|
|
|
6503
6609
|
{/* ── Link popover row (replaces window.prompt) ── */}
|
|
6504
6610
|
{linkOpen && (
|
|
6505
|
-
<div className="flex items-center gap-2 border-t border-
|
|
6506
|
-
<Link2 size={12} className="shrink-0 text-
|
|
6611
|
+
<div className="flex items-center gap-2 border-t border-[var(--local-toolbar-border)] px-2 py-1.5">
|
|
6612
|
+
<Link2 size={12} className="shrink-0 text-[var(--local-toolbar-text)]" />
|
|
6507
6613
|
<input
|
|
6508
6614
|
ref={linkInputRef}
|
|
6509
6615
|
type="url"
|
|
@@ -6517,13 +6623,13 @@ const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
|
|
|
6517
6623
|
if (e.key === 'Escape') setLinkOpen(false);
|
|
6518
6624
|
}}
|
|
6519
6625
|
placeholder="https://example.com"
|
|
6520
|
-
className="min-w-0 flex-1 bg-transparent text-xs text-
|
|
6626
|
+
className="min-w-0 flex-1 bg-transparent text-xs text-[var(--local-text)] placeholder:text-[var(--local-toolbar-text)] outline-none"
|
|
6521
6627
|
/>
|
|
6522
6628
|
<button
|
|
6523
6629
|
type="button"
|
|
6524
6630
|
onMouseDown={(e) => e.preventDefault()}
|
|
6525
6631
|
onClick={applyLink}
|
|
6526
|
-
className="shrink-0 rounded px-2 py-0.5 text-xs bg-
|
|
6632
|
+
className="shrink-0 rounded-[var(--local-radius-sm)] px-2 py-0.5 text-xs bg-[var(--local-primary)] hover:brightness-110 text-white transition-colors"
|
|
6527
6633
|
>
|
|
6528
6634
|
Set
|
|
6529
6635
|
</button>
|
|
@@ -6531,7 +6637,7 @@ const StudioTiptapEditor: React.FC<{ data: TiptapData }> = ({ data }) => {
|
|
|
6531
6637
|
type="button"
|
|
6532
6638
|
onMouseDown={(e) => e.preventDefault()}
|
|
6533
6639
|
onClick={() => setLinkOpen(false)}
|
|
6534
|
-
className="shrink-0 rounded px-2 py-0.5 text-xs bg-
|
|
6640
|
+
className="shrink-0 rounded-[var(--local-radius-sm)] px-2 py-0.5 text-xs bg-[var(--local-toolbar-active-bg)] hover:bg-[var(--local-toolbar-hover-bg)] text-[var(--local-text)] transition-colors"
|
|
6535
6641
|
>
|
|
6536
6642
|
Cancel
|
|
6537
6643
|
</button>
|
|
@@ -6568,7 +6674,25 @@ const PublicTiptapContent: React.FC<{ content: string }> = ({ content }) => (
|
|
|
6568
6674
|
export const Tiptap: React.FC<{ data: TiptapData; settings?: TiptapSettings }> = ({ data }) => {
|
|
6569
6675
|
const { mode } = useStudio();
|
|
6570
6676
|
return (
|
|
6571
|
-
<section
|
|
6677
|
+
<section
|
|
6678
|
+
style={{
|
|
6679
|
+
'--local-bg': 'var(--background)',
|
|
6680
|
+
'--local-text': 'var(--foreground)',
|
|
6681
|
+
'--local-text-muted': 'var(--muted-foreground)',
|
|
6682
|
+
'--local-primary': 'var(--primary)',
|
|
6683
|
+
'--local-accent': 'var(--accent)',
|
|
6684
|
+
'--local-border': 'var(--border)',
|
|
6685
|
+
'--local-radius-sm': 'var(--theme-radius-sm)',
|
|
6686
|
+
'--local-radius-md': 'var(--theme-radius-md)',
|
|
6687
|
+
'--local-radius-lg': 'var(--theme-radius-lg)',
|
|
6688
|
+
'--local-toolbar-bg': 'var(--demo-surface-strong)',
|
|
6689
|
+
'--local-toolbar-hover-bg': 'var(--demo-surface)',
|
|
6690
|
+
'--local-toolbar-active-bg': 'var(--demo-accent-soft)',
|
|
6691
|
+
'--local-toolbar-border': 'var(--demo-border-soft)',
|
|
6692
|
+
'--local-toolbar-text': 'var(--demo-text-faint)',
|
|
6693
|
+
} as React.CSSProperties}
|
|
6694
|
+
className="w-full py-12 bg-[var(--local-bg)]"
|
|
6695
|
+
>
|
|
6572
6696
|
<div className="container mx-auto px-6 max-w-3xl">
|
|
6573
6697
|
{mode === 'studio' ? (
|
|
6574
6698
|
<StudioTiptapEditor data={data} />
|
|
@@ -7230,9 +7354,9 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/site.json"
|
|
|
7230
7354
|
"id": "global-header",
|
|
7231
7355
|
"type": "header",
|
|
7232
7356
|
"data": {
|
|
7233
|
-
"logoText": "
|
|
7234
|
-
"logoHighlight": "
|
|
7235
|
-
"logoIconText": "
|
|
7357
|
+
"logoText": "Olon",
|
|
7358
|
+
"logoHighlight": "JS",
|
|
7359
|
+
"logoIconText": "",
|
|
7236
7360
|
"links": [
|
|
7237
7361
|
{
|
|
7238
7362
|
"label": "Architecture",
|
|
@@ -7297,7 +7421,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/theme.json"
|
|
|
7297
7421
|
"primary": "#3b82f6",
|
|
7298
7422
|
"secondary": "#22d3ee",
|
|
7299
7423
|
"accent": "#60a5fa",
|
|
7300
|
-
"background": "#
|
|
7424
|
+
"background": "#0f1115",
|
|
7301
7425
|
"surface": "#0b1529",
|
|
7302
7426
|
"surfaceAlt": "#101e38",
|
|
7303
7427
|
"text": "#e2e8f0",
|
|
@@ -7308,13 +7432,14 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/config/theme.json"
|
|
|
7308
7432
|
"fontFamily": {
|
|
7309
7433
|
"primary": "'Instrument Sans', system-ui, sans-serif",
|
|
7310
7434
|
"mono": "'JetBrains Mono', monospace",
|
|
7311
|
-
"display": "'Bricolage Grotesque', system-ui, sans-serif"
|
|
7435
|
+
"display": "'Bricolage Grotesque', system-ui, sans-serif",
|
|
7436
|
+
"display-2": "'Instrument Sans'"
|
|
7312
7437
|
}
|
|
7313
7438
|
},
|
|
7314
7439
|
"borderRadius": {
|
|
7315
|
-
"sm": "
|
|
7316
|
-
"md": "
|
|
7317
|
-
"lg": "
|
|
7440
|
+
"sm": "3px",
|
|
7441
|
+
"md": "6px",
|
|
7442
|
+
"lg": "12px"
|
|
7318
7443
|
}
|
|
7319
7444
|
}
|
|
7320
7445
|
}
|
|
@@ -7932,72 +8057,6 @@ cat << 'END_OF_FILE_CONTENT' > "src/data/pages/post.json"
|
|
|
7932
8057
|
]
|
|
7933
8058
|
}
|
|
7934
8059
|
END_OF_FILE_CONTENT
|
|
7935
|
-
mkdir -p "src/data/pages/servizi"
|
|
7936
|
-
echo "Creating src/data/pages/servizi/trattamento.json..."
|
|
7937
|
-
cat << 'END_OF_FILE_CONTENT' > "src/data/pages/servizi/trattamento.json"
|
|
7938
|
-
{
|
|
7939
|
-
"id": "servizi-trattamento-page",
|
|
7940
|
-
"slug": "servizi/trattamento",
|
|
7941
|
-
"meta": {
|
|
7942
|
-
"title": "Servizi - Trattamento",
|
|
7943
|
-
"description": "Pagina nested di smoke test per verificare routing visitor/admin/preview."
|
|
7944
|
-
},
|
|
7945
|
-
"sections": [
|
|
7946
|
-
{
|
|
7947
|
-
"id": "hero-servizi-trattamento",
|
|
7948
|
-
"type": "hero",
|
|
7949
|
-
"data": {
|
|
7950
|
-
"badge": "Smoke Test",
|
|
7951
|
-
"title": "Trattamento",
|
|
7952
|
-
"titleHighlight": "Pagina Nested",
|
|
7953
|
-
"description": "Questa pagina verifica il supporto ai nested slug su filesystem e router.",
|
|
7954
|
-
"ctas": [
|
|
7955
|
-
{
|
|
7956
|
-
"id": "cta-home",
|
|
7957
|
-
"label": "Torna Home",
|
|
7958
|
-
"href": "/",
|
|
7959
|
-
"variant": "primary"
|
|
7960
|
-
}
|
|
7961
|
-
]
|
|
7962
|
-
},
|
|
7963
|
-
"settings": {}
|
|
7964
|
-
}
|
|
7965
|
-
]
|
|
7966
|
-
}
|
|
7967
|
-
|
|
7968
|
-
END_OF_FILE_CONTENT
|
|
7969
|
-
echo "Creating src/data/pages/servizi_trattamento.json..."
|
|
7970
|
-
cat << 'END_OF_FILE_CONTENT' > "src/data/pages/servizi_trattamento.json"
|
|
7971
|
-
{
|
|
7972
|
-
"id": "servizi-trattamento-page",
|
|
7973
|
-
"slug": "servizi/trattamento",
|
|
7974
|
-
"meta": {
|
|
7975
|
-
"title": "Servizi - Trattamento",
|
|
7976
|
-
"description": "Pagina nested di smoke test per verificare routing visitor/admin/preview."
|
|
7977
|
-
},
|
|
7978
|
-
"sections": [
|
|
7979
|
-
{
|
|
7980
|
-
"id": "hero-servizi-trattamento",
|
|
7981
|
-
"type": "hero",
|
|
7982
|
-
"data": {
|
|
7983
|
-
"badge": "Smoke Test",
|
|
7984
|
-
"title": "Trattamentos",
|
|
7985
|
-
"titleHighlight": "Pagina Nested",
|
|
7986
|
-
"description": "Questa pagina verifica il supporto ai nested slug su filesystem e router.",
|
|
7987
|
-
"ctas": [
|
|
7988
|
-
{
|
|
7989
|
-
"id": "cta-home",
|
|
7990
|
-
"label": "Torna Home",
|
|
7991
|
-
"href": "/",
|
|
7992
|
-
"variant": "primary"
|
|
7993
|
-
}
|
|
7994
|
-
]
|
|
7995
|
-
},
|
|
7996
|
-
"settings": {}
|
|
7997
|
-
}
|
|
7998
|
-
]
|
|
7999
|
-
}
|
|
8000
|
-
END_OF_FILE_CONTENT
|
|
8001
8060
|
mkdir -p "src/emails"
|
|
8002
8061
|
echo "Creating src/emails/LeadNotificationEmail.tsx..."
|
|
8003
8062
|
cat << 'END_OF_FILE_CONTENT' > "src/emails/LeadNotificationEmail.tsx"
|
|
@@ -8311,7 +8370,7 @@ export default LeadSenderConfirmationEmail;
|
|
|
8311
8370
|
END_OF_FILE_CONTENT
|
|
8312
8371
|
echo "Creating src/fonts.css..."
|
|
8313
8372
|
cat << 'END_OF_FILE_CONTENT' > "src/fonts.css"
|
|
8314
|
-
@import url('https://fonts.googleapis.com/css2?family=
|
|
8373
|
+
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:wght@700;800;900&display=swap');
|
|
8315
8374
|
|
|
8316
8375
|
END_OF_FILE_CONTENT
|
|
8317
8376
|
mkdir -p "src/hooks"
|
|
@@ -8369,21 +8428,20 @@ cat << 'END_OF_FILE_CONTENT' > "src/index.css"
|
|
|
8369
8428
|
--color-accent: var(--accent);
|
|
8370
8429
|
--color-border: var(--border);
|
|
8371
8430
|
|
|
8372
|
-
--radius-lg: var(--radius);
|
|
8373
|
-
--radius-md:
|
|
8374
|
-
--radius-sm:
|
|
8431
|
+
--radius-lg: var(--theme-radius-lg);
|
|
8432
|
+
--radius-md: var(--theme-radius-md);
|
|
8433
|
+
--radius-sm: var(--theme-radius-sm);
|
|
8375
8434
|
|
|
8376
8435
|
--font-primary: var(--theme-font-primary);
|
|
8377
8436
|
--font-mono: var(--theme-font-mono);
|
|
8378
8437
|
|
|
8379
|
-
/*
|
|
8380
|
-
|
|
8381
|
-
|
|
8382
|
-
|
|
8383
|
-
|
|
8384
|
-
automatically and the fallback becomes dead code.
|
|
8438
|
+
/*
|
|
8439
|
+
DISPLAY FONT bridge
|
|
8440
|
+
The core now emits --theme-font-display from theme.json, so this keeps
|
|
8441
|
+
the tenant on the stable semantic alias rather than depending on the
|
|
8442
|
+
flattened internal variable path.
|
|
8385
8443
|
*/
|
|
8386
|
-
--font-display: var(--theme-font-display
|
|
8444
|
+
--font-display: var(--theme-font-display);
|
|
8387
8445
|
}
|
|
8388
8446
|
|
|
8389
8447
|
/*
|
|
@@ -8401,7 +8459,7 @@ cat << 'END_OF_FILE_CONTENT' > "src/index.css"
|
|
|
8401
8459
|
--muted: var(--theme-surface-alt);
|
|
8402
8460
|
--muted-foreground: var(--theme-text-muted);
|
|
8403
8461
|
--border: var(--theme-border);
|
|
8404
|
-
--radius:
|
|
8462
|
+
--radius: var(--theme-radius-lg);
|
|
8405
8463
|
|
|
8406
8464
|
/*
|
|
8407
8465
|
🔧 ACCENT CHAIN — Forward-compatible workaround
|
|
@@ -8411,6 +8469,22 @@ cat << 'END_OF_FILE_CONTENT' > "src/index.css"
|
|
|
8411
8469
|
Falls back to --theme-primary if accent is undefined.
|
|
8412
8470
|
*/
|
|
8413
8471
|
--accent: var(--theme-accent, var(--theme-primary));
|
|
8472
|
+
|
|
8473
|
+
/*
|
|
8474
|
+
Shared demo/mockup helpers
|
|
8475
|
+
These are still theme-derived, but give the tenant a stable semantic
|
|
8476
|
+
palette for browser/terminal/inspector style surfaces.
|
|
8477
|
+
*/
|
|
8478
|
+
--demo-surface: color-mix(in oklch, var(--card) 86%, var(--background));
|
|
8479
|
+
--demo-surface-soft: color-mix(in oklch, var(--card) 72%, var(--background));
|
|
8480
|
+
--demo-surface-strong: color-mix(in oklch, var(--background) 82%, black);
|
|
8481
|
+
--demo-surface-deep: color-mix(in oklch, var(--background) 70%, black);
|
|
8482
|
+
--demo-border-soft: color-mix(in oklch, var(--foreground) 8%, transparent);
|
|
8483
|
+
--demo-border-strong: color-mix(in oklch, var(--primary) 24%, transparent);
|
|
8484
|
+
--demo-accent-soft: color-mix(in oklch, var(--primary) 10%, transparent);
|
|
8485
|
+
--demo-accent-strong: color-mix(in oklch, var(--primary) 18%, transparent);
|
|
8486
|
+
--demo-text-soft: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground));
|
|
8487
|
+
--demo-text-faint: color-mix(in oklch, var(--muted-foreground) 72%, transparent);
|
|
8414
8488
|
}
|
|
8415
8489
|
|
|
8416
8490
|
@layer base {
|
|
@@ -8551,12 +8625,12 @@ html {
|
|
|
8551
8625
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
8552
8626
|
font-size: 0.875em;
|
|
8553
8627
|
background: color-mix(in oklch, var(--foreground) 8%, transparent);
|
|
8554
|
-
border-radius:
|
|
8628
|
+
border-radius: var(--theme-radius-sm);
|
|
8555
8629
|
padding: 0.1em 0.35em;
|
|
8556
8630
|
}
|
|
8557
8631
|
.jp-tiptap-content pre {
|
|
8558
8632
|
background: color-mix(in oklch, var(--background) 60%, black);
|
|
8559
|
-
border-radius:
|
|
8633
|
+
border-radius: var(--theme-radius-lg);
|
|
8560
8634
|
padding: 1em 1.25em;
|
|
8561
8635
|
overflow-x: auto;
|
|
8562
8636
|
}
|
|
@@ -8580,7 +8654,7 @@ html {
|
|
|
8580
8654
|
margin: 1.5em 0;
|
|
8581
8655
|
}
|
|
8582
8656
|
|
|
8583
|
-
.jp-tiptap-content img { max-width: 100%; height: auto; border-radius:
|
|
8657
|
+
.jp-tiptap-content img { max-width: 100%; height: auto; border-radius: var(--theme-radius-lg); }
|
|
8584
8658
|
|
|
8585
8659
|
/* ==========================================================================
|
|
8586
8660
|
TIPTAP / PROSEMIRROR — Editor typography
|
|
@@ -8611,12 +8685,12 @@ html {
|
|
|
8611
8685
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
8612
8686
|
font-size: 0.875em;
|
|
8613
8687
|
background: color-mix(in oklch, var(--foreground) 8%, transparent);
|
|
8614
|
-
border-radius:
|
|
8688
|
+
border-radius: var(--theme-radius-sm);
|
|
8615
8689
|
padding: 0.1em 0.35em;
|
|
8616
8690
|
}
|
|
8617
8691
|
.jp-simple-editor .ProseMirror pre {
|
|
8618
8692
|
background: color-mix(in oklch, var(--background) 60%, black);
|
|
8619
|
-
border-radius:
|
|
8693
|
+
border-radius: var(--theme-radius-lg);
|
|
8620
8694
|
padding: 1em 1.25em;
|
|
8621
8695
|
overflow-x: auto;
|
|
8622
8696
|
}
|
|
@@ -8646,18 +8720,18 @@ html {
|
|
|
8646
8720
|
.jp-simple-editor .ProseMirror img {
|
|
8647
8721
|
max-width: 100%;
|
|
8648
8722
|
height: auto;
|
|
8649
|
-
border-radius:
|
|
8723
|
+
border-radius: var(--theme-radius-lg);
|
|
8650
8724
|
}
|
|
8651
8725
|
|
|
8652
8726
|
.jp-simple-editor .ProseMirror img[data-uploading="true"] {
|
|
8653
8727
|
opacity: 0.6;
|
|
8654
8728
|
filter: grayscale(0.25);
|
|
8655
|
-
outline: 2px dashed
|
|
8729
|
+
outline: 2px dashed color-mix(in oklch, var(--primary) 70%, transparent);
|
|
8656
8730
|
outline-offset: 2px;
|
|
8657
8731
|
}
|
|
8658
8732
|
|
|
8659
8733
|
.jp-simple-editor .ProseMirror img[data-upload-error="true"] {
|
|
8660
|
-
outline: 2px solid
|
|
8734
|
+
outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
|
|
8661
8735
|
outline-offset: 2px;
|
|
8662
8736
|
}
|
|
8663
8737
|
|