Save workspace changes
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
import React from 'react'
|
||||
|
||||
const styles = {
|
||||
idle: 'border-white/10 bg-white/[0.04] text-slate-300',
|
||||
saving: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
|
||||
saved: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
|
||||
error: 'border-rose-300/20 bg-rose-400/10 text-rose-100',
|
||||
}
|
||||
|
||||
export default function NovaCardAutosaveIndicator({ status = 'idle', message = '' }) {
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] ${styles[status] || styles.idle}`}>
|
||||
<i className={`fa-solid ${status === 'saving' ? 'fa-rotate fa-spin' : status === 'saved' ? 'fa-check' : status === 'error' ? 'fa-triangle-exclamation' : 'fa-cloud'}`} />
|
||||
{message || (status === 'saving' ? 'Saving' : status === 'saved' ? 'Saved' : status === 'error' ? 'Failed' : 'Draft')}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,379 @@
|
||||
import React from 'react'
|
||||
|
||||
const aspectRatios = {
|
||||
square: '1 / 1',
|
||||
portrait: '4 / 5',
|
||||
story: '9 / 16',
|
||||
landscape: '16 / 9',
|
||||
}
|
||||
|
||||
const placementStyles = {
|
||||
'top-left': { top: '12%', left: '12%' },
|
||||
'top-right': { top: '12%', right: '12%' },
|
||||
'bottom-left': { bottom: '12%', left: '12%' },
|
||||
'bottom-right': { bottom: '12%', right: '12%' },
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// DraggableElement — wraps any canvas element with pointer-drag positioning.
|
||||
// Position is tracked locally during drag (avoids parent re-renders), then
|
||||
// committed to the parent via onMove(elementId, x%, y%) on pointer-up.
|
||||
// ---------------------------------------------------------------------------
|
||||
function DraggableElement({ elementId, canvasRef, freePos, savedWidth, onMove, style, className, children }) {
|
||||
const dragState = React.useRef(null)
|
||||
const [localPos, setLocalPos] = React.useState(null)
|
||||
const [localWidth, setLocalWidth] = React.useState(null)
|
||||
|
||||
function handlePointerDown(event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
const canvasRect = canvas.getBoundingClientRect()
|
||||
const elemRect = event.currentTarget.getBoundingClientRect()
|
||||
const offsetX = event.clientX - elemRect.left
|
||||
const offsetY = event.clientY - elemRect.top
|
||||
const startX = ((elemRect.left - canvasRect.left) / canvasRect.width) * 100
|
||||
const startY = ((elemRect.top - canvasRect.top) / canvasRect.height) * 100
|
||||
// Capture element width as % of canvas so it stays the same after going absolute.
|
||||
const widthPct = Math.round((elemRect.width / canvasRect.width) * 1000) / 10
|
||||
dragState.current = { canvasRect, offsetX, offsetY, widthPct }
|
||||
event.currentTarget.setPointerCapture(event.pointerId)
|
||||
setLocalPos({ x: startX, y: startY })
|
||||
setLocalWidth(widthPct)
|
||||
}
|
||||
|
||||
function calcPos(event) {
|
||||
const { canvasRect, offsetX, offsetY } = dragState.current
|
||||
return {
|
||||
x: Math.max(0, Math.min(94, ((event.clientX - canvasRect.left - offsetX) / canvasRect.width) * 100)),
|
||||
y: Math.max(0, Math.min(92, ((event.clientY - canvasRect.top - offsetY) / canvasRect.height) * 100)),
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointerMove(event) {
|
||||
if (!dragState.current) return
|
||||
setLocalPos(calcPos(event))
|
||||
}
|
||||
|
||||
function handlePointerUp(event) {
|
||||
if (!dragState.current) return
|
||||
const pos = calcPos(event)
|
||||
const widthPct = dragState.current.widthPct
|
||||
dragState.current = null
|
||||
setLocalPos(null)
|
||||
setLocalWidth(null)
|
||||
onMove?.(elementId, Math.round(pos.x * 10) / 10, Math.round(pos.y * 10) / 10, widthPct)
|
||||
}
|
||||
|
||||
const isDragging = localPos !== null
|
||||
const absPos = localPos ?? freePos
|
||||
|
||||
// Width to use when the element is absolutely positioned.
|
||||
const resolvedWidth = localWidth ?? savedWidth
|
||||
|
||||
const posStyle = absPos
|
||||
? { position: 'absolute', left: `${absPos.x}%`, top: `${absPos.y}%`, zIndex: isDragging ? 50 : 10, width: resolvedWidth != null ? `${resolvedWidth}%` : undefined }
|
||||
: {}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ ...style, ...posStyle, cursor: isDragging ? 'grabbing' : 'grab', touchAction: 'none', userSelect: 'none' }}
|
||||
className={`${className} rounded ${isDragging ? 'ring-2 ring-sky-400/70 opacity-90' : 'ring-1 ring-transparent hover:ring-white/30'} transition-[box-shadow]`}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerCancel={handlePointerUp}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function overlayStyle(style) {
|
||||
if (style === 'dark-strong') return 'linear-gradient(180deg, rgba(2,6,23,0.38), rgba(2,6,23,0.68))'
|
||||
if (style === 'light-soft') return 'linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.22))'
|
||||
if (style === 'dark-soft') return 'linear-gradient(180deg, rgba(2,6,23,0.18), rgba(2,6,23,0.48))'
|
||||
return 'none'
|
||||
}
|
||||
|
||||
function positionStyle(position) {
|
||||
if (position === 'top') return { alignItems: 'flex-start', paddingTop: '10%' }
|
||||
if (position === 'upper-middle') return { alignItems: 'flex-start', paddingTop: '22%' }
|
||||
if (position === 'lower-middle') return { alignItems: 'flex-end', paddingBottom: '18%' }
|
||||
if (position === 'bottom') return { alignItems: 'flex-end', paddingBottom: '10%' }
|
||||
return { alignItems: 'center' }
|
||||
}
|
||||
|
||||
function alignmentClass(alignment) {
|
||||
if (alignment === 'left') return 'justify-start items-start text-left'
|
||||
if (alignment === 'right') return 'justify-end items-end text-right'
|
||||
return 'justify-center items-center text-center'
|
||||
}
|
||||
|
||||
function focalPositionStyle(position) {
|
||||
if (position === 'top') return 'center top'
|
||||
if (position === 'bottom') return 'center bottom'
|
||||
if (position === 'left') return 'left center'
|
||||
if (position === 'right') return 'right center'
|
||||
if (position === 'top-left') return 'left top'
|
||||
if (position === 'top-right') return 'right top'
|
||||
if (position === 'bottom-left') return 'left bottom'
|
||||
if (position === 'bottom-right') return 'right bottom'
|
||||
return 'center center'
|
||||
}
|
||||
|
||||
function shadowValue(preset) {
|
||||
if (preset === 'none') return 'none'
|
||||
if (preset === 'strong') return '0 12px 36px rgba(2, 6, 23, 0.72)'
|
||||
return '0 8px 24px rgba(2, 6, 23, 0.5)'
|
||||
}
|
||||
|
||||
function resolveTextBlocks(card, project) {
|
||||
const blocks = Array.isArray(project.text_blocks) ? project.text_blocks.filter((block) => block?.enabled !== false && String(block?.text || '').trim() !== '') : []
|
||||
if (blocks.length) return blocks
|
||||
|
||||
const content = project.content || {}
|
||||
|
||||
return [
|
||||
{ key: 'title', type: 'title', text: card?.title || content.title || 'Untitled card', enabled: true },
|
||||
{ key: 'quote', type: 'quote', text: card?.quote_text || content.quote_text || 'Your next quote starts here.', enabled: true },
|
||||
{ key: 'author', type: 'author', text: card?.quote_author || content.quote_author || '', enabled: Boolean(card?.quote_author || content.quote_author) },
|
||||
{ key: 'source', type: 'source', text: card?.quote_source || content.quote_source || '', enabled: Boolean(card?.quote_source || content.quote_source) },
|
||||
].filter((block) => String(block.text || '').trim() !== '')
|
||||
}
|
||||
|
||||
function blockClass(type) {
|
||||
if (type === 'title') return 'text-[11px] font-semibold uppercase tracking-[0.28em] text-white/55'
|
||||
if (type === 'author') return 'font-medium uppercase tracking-[0.18em] text-white/80 sm:text-sm lg:text-base'
|
||||
if (type === 'source') return 'text-[11px] uppercase tracking-[0.18em] text-white/50 sm:text-xs'
|
||||
if (type === 'caption') return 'text-[10px] uppercase tracking-[0.2em] text-white/45'
|
||||
if (type === 'body') return 'text-sm leading-6 text-white/90 sm:text-base'
|
||||
return 'font-semibold tracking-[-0.03em] sm:text-[1.65rem] lg:text-[2.1rem]'
|
||||
}
|
||||
|
||||
function blockStyle(type, typography, textColor, accentColor, fontFamily) {
|
||||
const quoteSize = Math.max(10, Math.min(typography.quote_size || 72, 120))
|
||||
const authorSize = Math.max(14, Math.min(typography.author_size || 28, 42))
|
||||
const letterSpacing = Math.max(-1, Math.min(typography.letter_spacing || 0, 10))
|
||||
const lineHeight = Math.max(0.9, Math.min(typography.line_height || 1.2, 1.8))
|
||||
const shadowPreset = typography.shadow_preset || 'soft'
|
||||
// text_opacity: 10–100 (stored as integer percent), default 100
|
||||
const opacity = typography.text_opacity != null ? Math.max(10, Math.min(100, Number(typography.text_opacity))) / 100 : 1
|
||||
|
||||
// Convert canvas pixels (1080-normalised) to container-query width units so
|
||||
// the preview proportions always match the rendered image regardless of how
|
||||
// wide the preview panel is.
|
||||
const toCqw = (px) => `${(px / 1080 * 100).toFixed(2)}cqw`
|
||||
|
||||
const sizeMap = {
|
||||
title: toCqw(Math.max(16, quoteSize * 0.48)),
|
||||
quote: toCqw(quoteSize),
|
||||
author: toCqw(authorSize),
|
||||
source: toCqw(Math.max(12, authorSize * 0.82)),
|
||||
body: toCqw(Math.max(16, quoteSize * 0.54)),
|
||||
caption: toCqw(Math.max(12, authorSize * 0.74)),
|
||||
}
|
||||
|
||||
const fontSize = sizeMap[type] ?? sizeMap.quote
|
||||
|
||||
const font = fontFamily ? { fontFamily } : {}
|
||||
|
||||
if (type === 'title') {
|
||||
return { ...font, opacity, color: accentColor, fontSize, letterSpacing: `${Math.max(letterSpacing, 0) / 10}em`, textShadow: shadowValue(shadowPreset) }
|
||||
}
|
||||
|
||||
if (type === 'author' || type === 'source') {
|
||||
return { ...font, opacity, color: accentColor, fontSize, textShadow: shadowValue(shadowPreset) }
|
||||
}
|
||||
|
||||
if (type === 'body' || type === 'caption') {
|
||||
return { ...font, opacity, color: textColor, fontSize, lineHeight, textShadow: shadowValue(shadowPreset) }
|
||||
}
|
||||
|
||||
return { ...font, opacity, color: textColor, fontSize, lineHeight, letterSpacing: `${letterSpacing / 12}px`, textShadow: shadowValue(shadowPreset) }
|
||||
}
|
||||
|
||||
export default function NovaCardCanvasPreview({ card, fonts = [], className = '', editable = false, onElementMove = null, renderMode = false }) {
|
||||
const canvasRef = React.useRef(null)
|
||||
const project = card?.project_json || {}
|
||||
const layout = project.layout || {}
|
||||
const typography = project.typography || {}
|
||||
const resolvedFont = fonts.find((f) => f.key === (typography.font_preset || 'modern-sans'))
|
||||
const fontFamily = resolvedFont?.family || null
|
||||
const background = project.background || {}
|
||||
const backgroundImage = card?.background_image?.processed_url
|
||||
const colors = Array.isArray(background.gradient_colors) && background.gradient_colors.length >= 2
|
||||
? background.gradient_colors
|
||||
: ['#0f172a', '#1d4ed8']
|
||||
const backgroundStyle = background.type === 'upload' && backgroundImage
|
||||
? `url(${backgroundImage}) ${focalPositionStyle(background.focal_position)}/cover no-repeat`
|
||||
: background.type === 'solid'
|
||||
? background.solid_color || '#111827'
|
||||
: `linear-gradient(180deg, ${colors[0]}, ${colors[1]})`
|
||||
|
||||
const allTextBlocks = resolveTextBlocks(card, project)
|
||||
// Blocks with a saved free position are rendered absolutely; others stay in normal flow.
|
||||
const flowTextBlocks = allTextBlocks.filter((b) => b.pos_x == null || b.pos_y == null)
|
||||
const freeTextBlocks = allTextBlocks.filter((b) => b.pos_x != null && b.pos_y != null)
|
||||
|
||||
const decorations = Array.isArray(project.decorations) ? project.decorations : []
|
||||
const assetItems = Array.isArray(project.assets?.items) ? project.assets.items : []
|
||||
const textColor = typography.text_color || '#ffffff'
|
||||
const accentColor = typography.accent_color || textColor
|
||||
const layoutMaxWidth = layout.max_width === 'compact' ? '62%' : layout.max_width === 'wide' ? '88%' : '76%'
|
||||
const maxWidth = typography.quote_width != null ? `${typography.quote_width}%` : layoutMaxWidth
|
||||
const padding = layout.padding === 'tight' ? '8%' : layout.padding === 'airy' ? '14%' : '11%'
|
||||
|
||||
return (
|
||||
<div ref={canvasRef} data-card-canvas className={`relative overflow-hidden bg-slate-950 [container-type:inline-size] ${renderMode ? '' : 'rounded-[28px] border border-white/10 shadow-[0_30px_80px_rgba(2,6,23,0.35)]'} ${className}`} style={{ aspectRatio: aspectRatios[card?.format || 'square'] || aspectRatios.square }}>
|
||||
<div className="absolute inset-0" style={{ background: backgroundStyle, filter: background.type === 'upload' && Number(background.blur_level || 0) > 0 ? `blur(${Math.max(Number(background.blur_level) / 8, 0)}px)` : undefined }} />
|
||||
<div className="absolute inset-0" style={{ background: overlayStyle(background.overlay_style), opacity: Math.max(0, Math.min(Number(background.opacity || 50), 100)) / 100 }} />
|
||||
{!renderMode && (
|
||||
<div className="absolute left-4 top-4 rounded-full border border-white/10 bg-black/25 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-white/80 backdrop-blur">
|
||||
{(card?.format || 'square').replace('-', ' ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Asset items (non-draggable) */}
|
||||
{assetItems.slice(0, 6).map((item, index) => {
|
||||
if (item?.type === 'frame') {
|
||||
const top = index % 2 === 0 ? '10%' : '88%'
|
||||
return <div key={`${item.asset_key || item.label || 'frame'}-${index}`} className="absolute left-[12%] right-[12%] h-px bg-white/35" style={{ top }} />
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${item.asset_key || item.label || 'asset'}-${index}`}
|
||||
className="absolute text-white/85 drop-shadow-[0_6px_14px_rgba(2,6,23,0.3)]"
|
||||
style={{
|
||||
top: `${12 + ((index % 3) * 18)}%`,
|
||||
left: `${10 + (Math.floor(index / 3) * 72)}%`,
|
||||
color: accentColor,
|
||||
fontSize: `${(Math.max(18, Math.min(item.size || 26, 56)) / 1080 * 100).toFixed(2)}cqw`,
|
||||
}}
|
||||
>
|
||||
{item.glyph || item.label || '✦'}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Flow-positioned text blocks */}
|
||||
<div className={`relative flex h-full w-full ${alignmentClass(layout.alignment)}`} style={{ padding, ...positionStyle(layout.position) }}>
|
||||
<div className="flex w-full flex-col gap-4" style={{ maxWidth }}>
|
||||
{flowTextBlocks.map((block, index) => {
|
||||
const type = block?.type || 'body'
|
||||
const text = type === 'author' ? `— ${block.text}` : block.text
|
||||
const defStyle = blockStyle(type, typography, textColor, accentColor, fontFamily)
|
||||
const blockCls = blockClass(type)
|
||||
const blockKey = `${block.key || type}-${index}`
|
||||
|
||||
if (editable) {
|
||||
return (
|
||||
<DraggableElement
|
||||
key={blockKey}
|
||||
elementId={`block:${block.key || type}`}
|
||||
canvasRef={canvasRef}
|
||||
freePos={null}
|
||||
onMove={onElementMove}
|
||||
style={defStyle}
|
||||
className={blockCls}
|
||||
>
|
||||
{text}
|
||||
</DraggableElement>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={blockKey} style={defStyle} className={blockCls}>
|
||||
{text}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Absolutely-positioned text blocks (dragged out of flow) */}
|
||||
{freeTextBlocks.map((block, index) => {
|
||||
const type = block?.type || 'body'
|
||||
const text = type === 'author' ? `— ${block.text}` : block.text
|
||||
const defStyle = blockStyle(type, typography, textColor, accentColor, fontFamily)
|
||||
const blockCls = blockClass(type)
|
||||
const blockKey = `free-${block.key || type}-${index}`
|
||||
|
||||
if (editable) {
|
||||
return (
|
||||
<DraggableElement
|
||||
key={blockKey}
|
||||
elementId={`block:${block.key || type}`}
|
||||
canvasRef={canvasRef}
|
||||
freePos={{ x: block.pos_x, y: block.pos_y }}
|
||||
savedWidth={block.pos_width ?? null}
|
||||
onMove={onElementMove}
|
||||
style={defStyle}
|
||||
className={blockCls}
|
||||
>
|
||||
{text}
|
||||
</DraggableElement>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={blockKey}
|
||||
style={{ ...defStyle, position: 'absolute', left: `${block.pos_x}%`, top: `${block.pos_y}%`, ...(block.pos_width != null ? { width: `${block.pos_width}%` } : {}) }}
|
||||
className={blockCls}
|
||||
>
|
||||
{text}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Decorations — rendered last so they sit on top of all text content */}
|
||||
{decorations.slice(0, 6).map((decoration, index) => {
|
||||
const hasFreePos = decoration.pos_x != null && decoration.pos_y != null
|
||||
const placementPos = placementStyles[decoration.placement] || placementStyles['top-right']
|
||||
const decOpacity = decoration.opacity != null ? Math.max(10, Math.min(100, Number(decoration.opacity))) / 100 : 0.85
|
||||
const decStyle = {
|
||||
color: accentColor,
|
||||
fontSize: `${(Math.max(18, Math.min(decoration.size || 28, 64)) / 1080 * 100).toFixed(2)}cqw`,
|
||||
opacity: decOpacity,
|
||||
zIndex: 20,
|
||||
}
|
||||
const decKey = `${decoration.key || decoration.glyph || 'dec'}-${index}`
|
||||
const decContent = decoration.glyph || '✦'
|
||||
|
||||
if (editable) {
|
||||
const freePos = hasFreePos ? { x: decoration.pos_x, y: decoration.pos_y } : null
|
||||
const absStyle = hasFreePos
|
||||
? { position: 'absolute', left: `${decoration.pos_x}%`, top: `${decoration.pos_y}%` }
|
||||
: { position: 'absolute', ...placementPos }
|
||||
return (
|
||||
<DraggableElement
|
||||
key={decKey}
|
||||
elementId={`decoration:${index}`}
|
||||
canvasRef={canvasRef}
|
||||
freePos={freePos}
|
||||
savedWidth={null}
|
||||
onMove={onElementMove}
|
||||
style={{ ...absStyle, ...decStyle }}
|
||||
className="drop-shadow-[0_6px_14px_rgba(2,6,23,0.3)]"
|
||||
>
|
||||
{decContent}
|
||||
</DraggableElement>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={decKey}
|
||||
className="absolute drop-shadow-[0_6px_14px_rgba(2,6,23,0.3)]"
|
||||
style={{ ...placementPos, ...decStyle }}
|
||||
>
|
||||
{decContent}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function NovaCardFontPicker({ fonts = [], selectedKey = null, onSelect }) {
|
||||
return (
|
||||
<div className="grid gap-3">
|
||||
{fonts.map((font) => {
|
||||
const active = selectedKey === font.key
|
||||
return (
|
||||
<button
|
||||
key={font.key}
|
||||
type="button"
|
||||
onClick={() => onSelect?.(font)}
|
||||
className={`rounded-[22px] border p-4 text-left transition ${active ? 'border-sky-300/35 bg-sky-400/12 ring-1 ring-sky-400/20 text-white' : 'border-white/10 bg-white/[0.03] text-slate-200 hover:border-white/20 hover:bg-white/[0.05]'}`}
|
||||
>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 mb-2">{font.label}</div>
|
||||
<div className="text-[1.65rem] font-semibold leading-tight text-white" style={{ fontFamily: font.family, fontWeight: font.weight || 600 }}>
|
||||
The quick brown fox
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-slate-400 leading-relaxed" style={{ fontFamily: font.family }}>
|
||||
{font.recommended_use}
|
||||
</div>
|
||||
{active && (
|
||||
<div className="mt-2 inline-flex items-center gap-1 rounded-full border border-sky-400/25 bg-sky-500/10 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-sky-300">
|
||||
Active
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function NovaCardGradientPicker({ gradients = [], selectedKey = null, onSelect }) {
|
||||
return (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{gradients.map((gradient) => {
|
||||
const active = selectedKey === gradient.key
|
||||
return (
|
||||
<button
|
||||
key={gradient.key}
|
||||
type="button"
|
||||
onClick={() => onSelect?.(gradient)}
|
||||
className={`overflow-hidden rounded-[22px] border text-left transition ${active ? 'border-sky-300/35 bg-sky-400/10' : 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]'}`}
|
||||
>
|
||||
<div className="h-20 w-full" style={{ background: `linear-gradient(135deg, ${gradient.colors?.[0] || '#0f172a'}, ${gradient.colors?.[1] || '#1d4ed8'})` }} />
|
||||
<div className="p-3">
|
||||
<div className="text-sm font-semibold text-white">{gradient.label}</div>
|
||||
<div className="mt-1 text-[11px] uppercase tracking-[0.18em] text-slate-400">{gradient.key}</div>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,255 @@
|
||||
import React from 'react'
|
||||
|
||||
const TYPE_LABELS = {
|
||||
style: 'Style',
|
||||
layout: 'Layout',
|
||||
background: 'Background',
|
||||
typography: 'Typography',
|
||||
starter: 'Starter',
|
||||
}
|
||||
|
||||
const TYPE_ICONS = {
|
||||
style: 'fa-palette',
|
||||
layout: 'fa-table-columns',
|
||||
background: 'fa-image',
|
||||
typography: 'fa-font',
|
||||
starter: 'fa-star',
|
||||
}
|
||||
|
||||
function PresetCard({ preset, onApply, onDelete, applying }) {
|
||||
return (
|
||||
<div className="group relative flex items-center gap-3 rounded-[18px] border border-white/10 bg-white/[0.03] px-3.5 py-3 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
<button
|
||||
type="button"
|
||||
disabled={applying}
|
||||
onClick={() => onApply(preset)}
|
||||
className="flex flex-1 items-center gap-3 text-left"
|
||||
>
|
||||
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/[0.06] text-sky-300 text-xs">
|
||||
<i className={`fa-solid ${TYPE_ICONS[preset.preset_type] || 'fa-sparkles'}`} />
|
||||
</span>
|
||||
<span className="flex-1 min-w-0">
|
||||
<span className="block truncate text-sm font-semibold text-white">{preset.name}</span>
|
||||
<span className="block text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
|
||||
{TYPE_LABELS[preset.preset_type] || preset.preset_type}
|
||||
{preset.is_default ? ' · Default' : ''}
|
||||
</span>
|
||||
</span>
|
||||
{applying ? (
|
||||
<i className="fa-solid fa-rotate fa-spin text-sky-300 text-xs" />
|
||||
) : (
|
||||
<i className="fa-solid fa-chevron-right text-slate-500 text-xs opacity-0 transition group-hover:opacity-100" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDelete(preset)}
|
||||
className="ml-1 rounded-full p-1.5 text-slate-500 opacity-0 transition hover:text-rose-400 group-hover:opacity-100"
|
||||
title="Delete preset"
|
||||
>
|
||||
<i className="fa-solid fa-trash-can text-xs" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NovaCardPresetPicker({
|
||||
presets = {},
|
||||
endpoints = {},
|
||||
cardId = null,
|
||||
onApplyPatch,
|
||||
onPresetsChange,
|
||||
activeType = null,
|
||||
}) {
|
||||
const [selectedType, setSelectedType] = React.useState(activeType || 'style')
|
||||
const [applyingId, setApplyingId] = React.useState(null)
|
||||
const [capturing, setCapturing] = React.useState(false)
|
||||
const [captureName, setCaptureName] = React.useState('')
|
||||
const [captureType, setCaptureType] = React.useState('style')
|
||||
const [showCaptureForm, setShowCaptureForm] = React.useState(false)
|
||||
const [error, setError] = React.useState(null)
|
||||
|
||||
const typeKeys = Object.keys(TYPE_LABELS)
|
||||
const listedPresets = Array.isArray(presets[selectedType]) ? presets[selectedType] : []
|
||||
|
||||
async function handleApply(preset) {
|
||||
if (!cardId || !endpoints.presetApplyPattern) return
|
||||
const url = endpoints.presetApplyPattern
|
||||
.replace('__PRESET__', preset.id)
|
||||
.replace('__CARD__', cardId)
|
||||
|
||||
setApplyingId(preset.id)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest', Accept: 'application/json' },
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data?.message || 'Failed to apply preset')
|
||||
if (data?.project_patch && onApplyPatch) {
|
||||
onApplyPatch(data.project_patch)
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message || 'Failed to apply preset')
|
||||
} finally {
|
||||
setApplyingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(preset) {
|
||||
if (!endpoints.presetDestroyPattern) return
|
||||
const url = endpoints.presetDestroyPattern.replace('__PRESET__', preset.id)
|
||||
|
||||
if (!window.confirm(`Delete preset "${preset.name}"?`)) return
|
||||
|
||||
try {
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || ''
|
||||
const res = await fetch(url, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
Accept: 'application/json',
|
||||
'X-CSRF-TOKEN': csrfToken,
|
||||
},
|
||||
})
|
||||
if (!res.ok) throw new Error('Failed to delete preset')
|
||||
onPresetsChange?.()
|
||||
} catch (err) {
|
||||
setError(err.message || 'Failed to delete preset')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCapture(e) {
|
||||
e.preventDefault()
|
||||
if (!cardId || !endpoints.capturePresetPattern || !captureName.trim()) return
|
||||
const url = endpoints.capturePresetPattern.replace('__CARD__', cardId)
|
||||
|
||||
setCapturing(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || ''
|
||||
const res = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
Accept: 'application/json',
|
||||
'X-CSRF-TOKEN': csrfToken,
|
||||
},
|
||||
body: JSON.stringify({ name: captureName.trim(), preset_type: captureType }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data?.message || 'Failed to capture preset')
|
||||
setCaptureName('')
|
||||
setShowCaptureForm(false)
|
||||
onPresetsChange?.()
|
||||
} catch (err) {
|
||||
setError(err.message || 'Failed to capture preset')
|
||||
} finally {
|
||||
setCapturing(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Type tabs */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{typeKeys.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => setSelectedType(type)}
|
||||
className={`rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] transition ${
|
||||
selectedType === type
|
||||
? 'border-sky-300/30 bg-sky-400/15 text-sky-100'
|
||||
: 'border-white/10 bg-white/[0.03] text-slate-300 hover:bg-white/[0.05]'
|
||||
}`}
|
||||
>
|
||||
<i className={`fa-solid ${TYPE_ICONS[type]} mr-1.5`} />
|
||||
{TYPE_LABELS[type]}
|
||||
{Array.isArray(presets[type]) && presets[type].length > 0 && (
|
||||
<span className="ml-1.5 rounded-full bg-white/10 px-1.5 text-[10px]">{presets[type].length}</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Preset list */}
|
||||
{listedPresets.length > 0 ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
{listedPresets.map((preset) => (
|
||||
<PresetCard
|
||||
key={preset.id}
|
||||
preset={preset}
|
||||
applying={applyingId === preset.id}
|
||||
onApply={handleApply}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-slate-500">No {TYPE_LABELS[selectedType]?.toLowerCase()} presets saved yet.</p>
|
||||
)}
|
||||
|
||||
{/* Capture from current card */}
|
||||
{cardId && endpoints.capturePresetPattern && (
|
||||
<div className="mt-1 border-t border-white/[0.06] pt-3">
|
||||
{showCaptureForm ? (
|
||||
<form onSubmit={handleCapture} className="flex flex-col gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={captureName}
|
||||
onChange={(e) => setCaptureName(e.target.value)}
|
||||
placeholder="Preset name…"
|
||||
maxLength={64}
|
||||
required
|
||||
className="w-full rounded-xl border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-white placeholder-slate-500 outline-none focus:border-sky-400/40"
|
||||
/>
|
||||
<select
|
||||
value={captureType}
|
||||
onChange={(e) => setCaptureType(e.target.value)}
|
||||
className="w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm text-white outline-none focus:border-sky-400/40"
|
||||
>
|
||||
{typeKeys.map((type) => (
|
||||
<option key={type} value={type}>{TYPE_LABELS[type]}</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={capturing || !captureName.trim()}
|
||||
className="flex-1 rounded-xl bg-sky-500/20 py-2 text-sm font-semibold text-sky-200 transition hover:bg-sky-500/30 disabled:opacity-50"
|
||||
>
|
||||
{capturing ? 'Saving…' : 'Save preset'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCaptureForm(false)}
|
||||
className="rounded-xl border border-white/10 px-4 py-2 text-sm text-slate-400 transition hover:bg-white/[0.05]"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCaptureForm(true)}
|
||||
className="flex w-full items-center gap-2 rounded-xl border border-dashed border-white/15 px-3 py-2.5 text-sm text-slate-400 transition hover:border-white/25 hover:text-slate-200"
|
||||
>
|
||||
<i className="fa-solid fa-plus text-xs" />
|
||||
Capture current as preset
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="rounded-xl border border-rose-400/20 bg-rose-400/10 px-3 py-2 text-xs text-rose-300">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function NovaCardTemplatePicker({ templates = [], selectedId = null, onSelect }) {
|
||||
return (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{templates.map((template) => {
|
||||
const active = Number(selectedId) === Number(template.id)
|
||||
|
||||
return (
|
||||
<button
|
||||
key={template.id}
|
||||
type="button"
|
||||
onClick={() => onSelect?.(template)}
|
||||
className={`rounded-[24px] border p-4 text-left transition ${active ? 'border-sky-300/35 bg-sky-400/10 text-white' : 'border-white/10 bg-white/[0.03] text-slate-200 hover:border-white/20 hover:bg-white/[0.05]'}`}
|
||||
>
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">Template</div>
|
||||
<div className="mt-2 text-base font-semibold tracking-[-0.03em]">{template.name}</div>
|
||||
{template.description ? <div className="mt-2 text-sm text-slate-400">{template.description}</div> : null}
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">
|
||||
{(template.supported_formats || []).map((format) => (
|
||||
<span key={`${template.id}-${format}`} className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1">
|
||||
{format}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user