@bhooai/nexus-cli 2.0.7 → 2.0.9

package/templates/base/apps/admin/src/components/ThemeCentre.tsx

@@ -1,201 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import type { AdminTheme, UiMode, CustomTheme, ParticleConfig } from '../lib/types.js';
-import { SWATCH_CPLAETTE, THEME_PRESETS, DEFAULT_PARTICLES, CUSTOM_THEME_KEY, PARTICLES_KEY, TOGGLE_STYLES } from '../lib/constants.js';
-import { randomAccentPalette, randomParticleColors } from '../lib/theme.js';
-import { Icon } from '../icons.js';
-import { PageHead } from './ui/PageHead.js';
-import { PageHero } from './ui/PageHero.js';
-
-export function ThemeCentre({
-  theme,
-  onThemeChange,
-  uiMode,
-  onUiModeChange,
-  custom,
-  onCustom,
-  particles,
-  onParticles,
-}: {
-  theme: AdminTheme;
-  onThemeChange: (theme: AdminTheme) => void;
-  uiMode: UiMode;
-  onUiModeChange: (mode: UiMode) => void;
-  custom: CustomTheme;
-  onCustom: (partial: Partial<CustomTheme>) => void;
-  particles: ParticleConfig;
-  onParticles: (partial: Partial<ParticleConfig>) => void;
-}) {
-  const [copied, setCopied] = useState(false);
-  const colors: { key: keyof Omit<CustomTheme, 'active'>; label: string; detail: string }[] = [
-    { key: 'blue', label: 'Primary blue', detail: 'Buttons, focus rings & links' },
-    { key: 'violet', label: 'Accent violet', detail: 'Highlights & gradients' },
-    { key: 'pink', label: 'Accent pink', detail: 'Special surfaces & marks' },
-    { key: 'bg', label: 'Background', detail: 'Base canvas of the shell' },
-    { key: 'ink', label: 'Foreground text', detail: 'Headings & body ink' },
-    { key: 'muted', label: 'Muted text', detail: 'Captions & secondary labels' },
-  ];
-  const setColor = (key: keyof Omit<CustomTheme, 'active'>, value: string) => onCustom({ [key]: value });
-  const setParticleColor = (index: number, value: string) => {
-    const next = [...particles.colors];
-    next[index] = value;
-    onParticles({ colors: next });
-  };
-  const addParticleColor = () => {
-    const next = [...particles.colors, SWATCH_CPLAETTE[particles.colors.length % SWATCH_CPLAETTE.length]];
-    onParticles({ colors: next });
-  };
-  const removeParticleColor = (index: number) => {
-    if (particles.colors.length <= 1) return;
-    onParticles({ colors: particles.colors.filter((_, i) => i !== index) });
-  };
-  const exportJson = () => {
-    const payload = JSON.stringify({ version: 1, theme, uiMode, custom, particles }, null, 2);
-    const write = () => { navigator.clipboard.writeText(payload).then(() => setCopied(true)).catch(() => fallback(payload)); };
-    const fallback = (text: string) => {
-      const el = document.createElement('textarea');
-      el.value = text; document.body.appendChild(el); el.select();
-      try { document.execCommand('copy'); setCopied(true); } catch { /* ignore */ }
-      document.body.removeChild(el);
-    };
-    write();
-    window.setTimeout(() => setCopied(false), 1600);
-  };
-  const importJson = async () => {
-    let text = '';
-    try { text = await navigator.clipboard.readText(); } catch { text = window.prompt('Paste theme JSON to import:') ?? ''; }
-    if (!text) return;
-    try {
-      const parsed = JSON.parse(text) as { theme?: AdminTheme; uiMode?: UiMode; custom?: Partial<CustomTheme>; particles?: Partial<ParticleConfig> };
-      if (parsed.theme && ['aurora', 'midnight', 'violet'].includes(parsed.theme)) onThemeChange(parsed.theme);
-      if (parsed.uiMode && ['workspace', 'compact', 'focus'].includes(parsed.uiMode)) onUiModeChange(parsed.uiMode);
-      if (parsed.custom) onCustom(parsed.custom);
-      if (parsed.particles) onParticles(parsed.particles);
-    } catch { /* ignore bad import */ }
-  };
-  const resetAll = () => {
-    onCustom({ ...THEME_PRESETS[theme], active: false });
-    onParticles({ ...DEFAULT_PARTICLES });
-    try { localStorage.removeItem(CUSTOM_THEME_KEY); localStorage.removeItem(PARTICLES_KEY); } catch { /* ignore */ }
-  };
-  const slider = (label: string, detail: string, value: number, min: number, max: number, step: number, display: string, onChange: (v: number) => void) => (
-    <label className="surface-row">
-      <span className="surface-meta"><b>{label}</b><small>{detail}</small></span>
-      <input type="range" className="surface-range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(Number(e.target.value))} />
-      <em className="surface-value">{display}</em>
-    </label>
-  );
-  return (
-    <div className="space-y-6">
-      <PageHead title="Theme Centre">
-        <div className="heading-actions">
-          <button type="button" className="workspace-action" onClick={() => { void importJson(); }}><Icon name="download" size={12} /> Import</button>
-          <button type="button" className="workspace-action" onClick={exportJson}>{copied ? 'Copied' : <><Icon name="upload" size={12} /> Export</>}</button>
-          <button type="button" className="workspace-action" onClick={resetAll}><Icon name="refresh" size={12} /> Reset all</button>
-        </div>
-      </PageHead>
-      <PageHero kicker="SURFACE STUDIO" title={<>Make it <em>yours.</em></>} desc="Curated themes, your own palette, particle fields and surface tuning — applied live to this workspace and remembered locally in your browser." glyph="palette" art="palette" />
-      <section className="glass-card space-y-4">
-        <div className="flex items-center justify-between">
-          <div><span className="admin-overline">CURATED THEMES</span><h3 className="glass-h3">Start from a surface</h3></div>
-          <span className="live-badge"><i className="status-dot good" /> LIVE</span>
-        </div>
-        <div className="theme-gallery">
-          {([['aurora', 'Aurora', 'Electric blue glow'], ['midnight', 'Midnight', 'Deep navy calm'], ['violet', 'Violet', 'Indigo shimmer']] as const).map(([id, label, detail]) => {
-            const preset = THEME_PRESETS[id];
-            const isActive = !custom.active && theme === id;
-            return (
-              <button key={id} type="button" className={`theme-card${isActive ? ' is-active' : ''}`} onClick={() => { onThemeChange(id); onCustom({ ...preset, active: false }); }}>
-                <span className={`theme-preview ${id}`} />
-                <span className="theme-card-body"><b>{label}</b><small>{detail}</small></span>
-                {isActive && <i className="theme-card-check">✓</i>}
-              </button>
-            );
-          })}
-        </div>
-        <div className="ui-mode-options ui-mode-row">
-          {([['workspace', 'Workspace', 'Inspector + tools'], ['compact', 'Compact', 'More content'], ['focus', 'Focus', 'Canvas first']] as const).map(([id, label, detail]) => (
-            <button key={id} onClick={() => onUiModeChange(id)} className={uiMode === id ? 'is-selected' : ''}><span>{label}</span><small>{detail}</small></button>
-          ))}
-        </div>
-      </section>
-      <section className="glass-card space-y-4">
-        <div className="flex items-center justify-between">
-          <div><span className="admin-overline">CUSTOM THEME</span><h3 className="glass-h3">Your own palette</h3></div>
-          <div className="flex items-center gap-2">
-            <button type="button" className="glass-chip-btn" onClick={() => { const p = randomAccentPalette(); onCustom({ ...p, active: !custom.active ? true : custom.active }); }}><Icon name="sparkles" size={12} /> Randomize</button>
-            <button type="button" className={`custom-toggle${custom.active ? ' is-active' : ''}`} onClick={() => onCustom({ active: !custom.active })}>{custom.active ? 'Applied · live' : 'Apply custom'}</button>
-            <button type="button" className="glass-chip-btn" onClick={() => onCustom({ ...THEME_PRESETS[theme], active: true })}>Seed from {theme}</button>
-          </div>
-        </div>
-        <p className="text-sm text-slate-400">Tune each color below — the workspace re-themes instantly while custom is applied. Stored locally in your browser.</p>
-        <div className="custom-grid">
-          {colors.map((c) => (
-            <label key={c.key} className="color-row">
-              <span className="color-swatch"><input type="color" value={custom[c.key]} disabled={!custom.active} onChange={(e) => setColor(c.key, e.target.value)} /></span>
-              <span className="color-meta"><b>{c.label}</b><small>{c.detail}</small></span>
-              <input className="glass-input color-hex" value={custom[c.key]} disabled={!custom.active} onChange={(e) => { const v = e.target.value.trim(); if (/^#[0-9a-fA-F]{3,8}$/.test(v)) setColor(c.key, v); }} />
-            </label>
-          ))}
-        </div>
-        <div className="theme-preview-tile" style={custom.active ? { ['--p-blue' as string]: custom.blue, ['--p-violet' as string]: custom.violet, ['--p-pink' as string]: custom.pink, ['--p-bg' as string]: custom.bg } : undefined}>
-          <div className="theme-preview-glow" />
-          <div className="theme-preview-card">
-            <span className="theme-preview-overline">LIVE PREVIEW</span>
-            <b className="theme-preview-title">Surface preview</b>
-            <div className="theme-preview-actions"><button className="glass-chip-btn-primary flex-1 justify-center">Primary</button><button className="glass-chip-btn flex-1 justify-center">chip</button></div>
-            <div className="theme-preview-dots"><i /><i /><i /></div>
-          </div>
-        </div>
-      </section>
-      <section className="glass-card space-y-4">
-        <div className="flex items-center justify-between">
-          <div><span className="admin-overline">SURFACE TUNING</span><h3 className="glass-h3">Glow, glass & shape</h3></div>
-          <span className="live-badge"><i className="status-dot good" /> LIVE</span>
-        </div>
-        {slider('Ambient glow', 'Mesh & aura strength behind the shell', custom.mesh, 0, 1, 0.02, `${Math.round(custom.mesh * 100)}%`, (v) => onCustom({ mesh: v }))}
-        {slider('Panel glass', 'Frosted blur behind cards & panels', custom.glass, 0, 1, 0.02, `${Math.round(custom.glass * 100)}%`, (v) => onCustom({ glass: v }))}
-        {slider('Corner radius', 'Roundness of cards, panels & buttons', custom.radius, 0, 24, 1, `${custom.radius}px`, (v) => onCustom({ radius: v }))}
-        <div>
-          <span className="admin-overline">TOGGLE STYLE</span>
-          <div className="toggle-style-row">
-            {TOGGLE_STYLES.map((t) => (
-              <button
-                key={t.id}
-                type="button"
-                className={`toggle-style-btn${custom.toggle === t.id ? ' is-selected' : ''}`}
-                onClick={() => onCustom({ toggle: t.id })}
-              >
-                <span className={`ai-toggle tg-${t.id} is-on toggle-style-preview`}><span className="ai-toggle-knob" /></span>
-                <span className="toggle-style-meta"><b>{t.label}</b><small>{t.hint}</small></span>
-                {custom.toggle === t.id && <i className="toggle-style-check">✓</i>}
-              </button>
-            ))}
-          </div>
-        </div>
-      </section>
-      <section className="glass-card space-y-4">
-        <div className="flex items-center justify-between">
-          <div><span className="admin-overline">PARTICLE FIELD</span><h3 className="glass-h3">Floating background dust</h3></div>
-          <div className="flex items-center gap-2">
-            <button type="button" className="glass-chip-btn" onClick={() => onParticles({ colors: randomParticleColors() })}><Icon name="sparkles" size={12} /> Randomize</button>
-            <button type="button" className={`custom-toggle${particles.amount > 0 ? ' is-active' : ''}`} onClick={() => onParticles({ amount: particles.amount > 0 ? 0 : 14 })}>{particles.amount > 0 ? 'On' : 'Off'}</button>
-          </div>
-        </div>
-        <p className="text-sm text-slate-400">Control how many particles drift behind the workspace, how fast they rise, and build a custom color list for them.</p>
-        {slider('Particle amount', 'Count of dots in the field', particles.amount, 0, 48, 1, String(particles.amount), (v) => onParticles({ amount: v }))}
-        {slider('Particle speed', 'Rise speed multiplier', particles.speed, 0.2, 3, 0.05, `${particles.speed.toFixed(2)}×`, (v) => onParticles({ speed: v }))}
-        <div className="palette-list">
-          {particles.colors.map((c, i) => (
-            <div className="palette-chip" key={i}>
-              <span className="color-swatch"><input type="color" value={c} onChange={(e) => setParticleColor(i, e.target.value)} /></span>
-              <input className="glass-input color-hex" value={c} onChange={(e) => { const v = e.target.value.trim(); if (/^#[0-9a-fA-F]{3,8}$/.test(v)) setParticleColor(i, v); }} />
-              <button type="button" className="row-delete" onClick={() => removeParticleColor(i)} aria-label="Remove color" disabled={particles.colors.length <= 1}>×</button>
-            </div>
-          ))}
-          <button type="button" className="add-color" onClick={addParticleColor}>+ Add color</button>
-        </div>
-      </section>
-    </div>
-  );
-}

package/templates/base/apps/admin/src/components/shell/AppearancePanel.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import type { AdminTheme, UiMode } from '../../lib/types.js';
-
-export function AppearancePanel({
-  theme,
-  uiMode,
-  onThemeChange,
-  onUiModeChange,
-}: {
-  theme: AdminTheme;
-  uiMode: UiMode;
-  onThemeChange: (theme: AdminTheme) => void;
-  onUiModeChange: (mode: UiMode) => void;
-}) {
-  return (
-    <div className="appearance-panel">
-      <div className="appearance-heading"><span className="admin-overline">APPEARANCE</span><span>LOCAL</span></div>
-      <strong>Choose your surface</strong>
-      <div className="appearance-options">
-        {([['aurora', 'Aurora', 'Electric blue'], ['midnight', 'Midnight', 'Deep navy'], ['violet', 'Violet', 'Indigo glow']] as const).map(([id, label, detail]) => (
-          <button key={id} onClick={() => onThemeChange(id)} className={theme === id ? 'is-selected' : ''}>
-            <span className={`theme-preview ${id}`} />
-            <span><b>{label}</b><small>{detail}</small></span>
-            {theme === id && <i>✓</i>}
-          </button>
-        ))}
-      </div>
-      <div className="appearance-divider" />
-      <span className="admin-overline">INTERFACE MODE</span>
-      <div className="ui-mode-options">
-        {([['workspace', 'Workspace', 'Inspector + tools'], ['compact', 'Compact', 'More content'], ['focus', 'Focus', 'Canvas first']] as const).map(([id, label, detail]) => (
-          <button key={id} onClick={() => onUiModeChange(id)} className={uiMode === id ? 'is-selected' : ''}><span>{label}</span><small>{detail}</small></button>
-        ))}
-      </div>
-    </div>
-  );
-}