@morphika/andami 0.5.0 → 0.5.2

package/components/admin/setup-wizard/BrandingStep.tsx

@@ -100,7 +100,7 @@ export function BrandingStep({ onNext, onBack }: WizardStepProps) {
   }, [siteTitle, onNext]);
 
   const inputClass =
-    "w-full rounded-lg border border-black/[0.08] bg-white px-3 py-2.5 text-sm text-[#333] placeholder:text-[#bbb] focus:outline-none focus:ring-2 focus:ring-[#076bff]/20 focus:border-[#076bff]/40";
+    "w-full rounded-lg border border-black/[0.08] bg-white px-3 py-2.5 text-sm text-[#333] placeholder:text-[#bbb] focus:outline-none focus:ring-2 focus:ring-[#3580f9]/20 focus:border-[#3580f9]/40";
 
   if (loading) {
     return (
@@ -196,7 +196,7 @@ export function BrandingStep({ onNext, onBack }: WizardStepProps) {
             <button
               onClick={handleSave}
               disabled={saving || !siteTitle.trim()}
-              className="px-5 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+              className="px-5 py-2.5 bg-[#3580f9] text-white text-sm font-medium rounded-lg hover:bg-[#2d6dd4] transition-colors disabled:opacity-50"
             >
               {saving ? "Saving..." : "Save & Continue"}
             </button>
@@ -206,7 +206,7 @@ export function BrandingStep({ onNext, onBack }: WizardStepProps) {
           {saved && (
             <button
               onClick={onNext}
-              className="px-5 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors"
+              className="px-5 py-2.5 bg-[#3580f9] text-white text-sm font-medium rounded-lg hover:bg-[#2d6dd4] transition-colors"
             >
               Next
             </button>

package/components/admin/setup-wizard/DatabaseStep.tsx

@@ -309,7 +309,7 @@ export function DatabaseStep({ onNext, onBack }: WizardStepProps) {
             <button
               onClick={seedDocuments}
               disabled={seedState === "seeding"}
-              className="px-4 py-2 text-sm bg-[#076bff] text-white rounded-lg hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+              className="px-4 py-2 text-sm bg-[#3580f9] text-white rounded-lg hover:bg-[#2d6dd4] transition-colors disabled:opacity-50"
             >
               {seedState === "seeding" ? "Creating..." : "Create Initial Documents"}
             </button>
@@ -319,7 +319,7 @@ export function DatabaseStep({ onNext, onBack }: WizardStepProps) {
           {canAdvance && (
             <button
               onClick={onNext}
-              className="px-5 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors"
+              className="px-5 py-2.5 bg-[#3580f9] text-white text-sm font-medium rounded-lg hover:bg-[#2d6dd4] transition-colors"
             >
               Next
             </button>

package/components/admin/setup-wizard/DoneStep.tsx

@@ -177,7 +177,7 @@ export function DoneStep({ onBack }: WizardStepProps) {
         <button
           onClick={handleComplete}
           disabled={completing}
-          className="px-6 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+          className="px-6 py-2.5 bg-[#3580f9] text-white text-sm font-medium rounded-lg hover:bg-[#2d6dd4] transition-colors disabled:opacity-50"
         >
           {completing ? "Starting..." : "Start Building"}
         </button>

package/components/admin/setup-wizard/SetupWizard.tsx

@@ -105,9 +105,9 @@ export function SetupWizard({ initialStatus }: SetupWizardProps) {
                   <div
                     className={`w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-semibold transition-colors ${
                       isActive
-                        ? "bg-[#076bff] text-white"
+                        ? "bg-[#3580f9] text-white"
                         : isDone
-                        ? "bg-[#076bff]/20 text-[#076bff]"
+                        ? "bg-[#3580f9]/20 text-[#3580f9]"
                         : "bg-black/[0.06] text-[#999]"
                     }`}
                   >
@@ -124,7 +124,7 @@ export function SetupWizard({ initialStatus }: SetupWizardProps) {
                       isActive
                         ? "text-[#333] font-medium"
                         : isDone
-                        ? "text-[#076bff]"
+                        ? "text-[#3580f9]"
                         : "text-[#999]"
                     }`}
                   >
@@ -135,7 +135,7 @@ export function SetupWizard({ initialStatus }: SetupWizardProps) {
                 {i < STEPS.length - 1 && (
                   <div
                     className={`w-8 h-px transition-colors ${
-                      i < currentStep ? "bg-[#076bff]/30" : "bg-black/[0.08]"
+                      i < currentStep ? "bg-[#3580f9]/30" : "bg-black/[0.08]"
                     }`}
                   />
                 )}

package/components/admin/setup-wizard/StorageStep.tsx

@@ -128,7 +128,7 @@ export function StorageStep({ onNext, onBack }: WizardStepProps) {
   );
 
   const inputClass =
-    "w-full rounded-lg border border-black/[0.08] bg-white px-3 py-2 text-sm text-[#333] placeholder:text-[#bbb] focus:outline-none focus:ring-2 focus:ring-[#076bff]/20 focus:border-[#076bff]/40";
+    "w-full rounded-lg border border-black/[0.08] bg-white px-3 py-2 text-sm text-[#333] placeholder:text-[#bbb] focus:outline-none focus:ring-2 focus:ring-[#3580f9]/20 focus:border-[#3580f9]/40";
   const labelClass = "block text-xs font-medium text-[#666] mb-1";
 
   if (state === "loading") {
@@ -296,7 +296,7 @@ export function StorageStep({ onNext, onBack }: WizardStepProps) {
           {state === "connected" && (
             <button
               onClick={onNext}
-              className="px-5 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors"
+              className="px-5 py-2.5 bg-[#3580f9] text-white text-sm font-medium rounded-lg hover:bg-[#2d6dd4] transition-colors"
             >
               Next
             </button>

package/components/admin/setup-wizard/WelcomeStep.tsx

@@ -75,7 +75,7 @@ export function WelcomeStep({ onNext }: WizardStepProps) {
             },
           ].map((item) => (
             <li key={item.label} className="flex items-start gap-3">
-              <span className="text-[#076bff] mt-0.5 shrink-0">{item.icon}</span>
+              <span className="text-[#3580f9] mt-0.5 shrink-0">{item.icon}</span>
               <div>
                 <span className="text-sm font-medium text-[#333]">{item.label}</span>
                 <p className="text-xs text-[#999] mt-0.5">{item.desc}</p>
@@ -87,7 +87,7 @@ export function WelcomeStep({ onNext }: WizardStepProps) {
 
       <button
         onClick={onNext}
-        className="px-6 py-2.5 bg-[#076bff] text-white text-sm font-medium rounded-lg hover:bg-[#0559d4] transition-colors"
+        className="px-6 py-2.5 bg-[#3580f9] text-white text-sm font-medium rounded-lg hover:bg-[#2d6dd4] transition-colors"
       >
         Get Started
       </button>

package/components/admin/styles/ColorsEditor.tsx

@@ -156,7 +156,7 @@ export function ColorsEditor({
               {!pickerOpen && (
                 <button
                   onClick={() => { setEditingIndex(null); setPickerOpen(true); }}
-                  className="rounded-xl border-2 border-dashed border-neutral-200 h-[100px] flex flex-col items-center justify-center gap-1 cursor-pointer hover:border-[#076bff] hover:text-[#076bff] text-neutral-400 transition-colors bg-transparent"
+                  className="rounded-xl border-2 border-dashed border-neutral-200 h-[100px] flex flex-col items-center justify-center gap-1 cursor-pointer hover:border-[#3580f9] hover:text-[#3580f9] text-neutral-400 transition-colors bg-transparent"
                 >
                   <span className="text-xl leading-none">+</span>
                   <span className="text-[10px] uppercase tracking-wider">Add</span>
@@ -190,7 +190,7 @@ export function ColorsEditor({
           {pickerOpen && (
             <div className="flex justify-center mb-4">
               <ColorPicker
-                color={editingIndex !== null ? swatches[editingIndex].hex : "#076bff"}
+                color={editingIndex !== null ? swatches[editingIndex].hex : "#3580f9"}
                 onChange={addSwatch}
                 onClose={() => { setPickerOpen(false); setEditingIndex(null); }}
                 confirmLabel={editingIndex !== null ? "Update color" : "Add to palette"}

package/components/admin/styles/FontsEditor.tsx

@@ -115,7 +115,7 @@ export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; on
               key={font._key}
               className={`rounded-xl border overflow-hidden transition-all cursor-pointer ${
                 isExpanded
-                  ? "border-[#076bff] shadow-sm ring-1 ring-[#076bff]/20"
+                  ? "border-[#3580f9] shadow-sm ring-1 ring-[#3580f9]/20"
                   : "border-neutral-200 hover:shadow-md hover:-translate-y-0.5"
               }`}
               onClick={() => setExpandedFont(isExpanded ? null : font._key)}
@@ -147,7 +147,7 @@ export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; on
         {/* Add font card */}
         <button
           onClick={addFont}
-          className="rounded-xl border-2 border-dashed border-neutral-200 min-h-[120px] flex flex-col items-center justify-center gap-1.5 cursor-pointer hover:border-[#076bff] hover:text-[#076bff] text-neutral-400 transition-colors bg-transparent"
+          className="rounded-xl border-2 border-dashed border-neutral-200 min-h-[120px] flex flex-col items-center justify-center gap-1.5 cursor-pointer hover:border-[#3580f9] hover:text-[#3580f9] text-neutral-400 transition-colors bg-transparent"
         >
           <span className="text-xl leading-none">+</span>
           <span className="text-[10px] uppercase tracking-wider">Add Font Family</span>
@@ -166,7 +166,7 @@ export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; on
                 value={font.family}
                 onChange={(e) => updateFont(font._key, { family: e.target.value })}
                 placeholder="Font Family Name (e.g. Inter)"
-                className="flex-1 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                className="flex-1 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
                 disabled={font.is_builtin}
                 onClick={(e) => e.stopPropagation()}
               />
@@ -190,7 +190,7 @@ export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; on
                   <select
                     value={v.weight}
                     onChange={(e) => updateVariant(font._key, v._key, { weight: e.target.value })}
-                    className="rounded border border-neutral-200 bg-white px-2 py-1 text-xs focus:border-[#076bff] focus:outline-none"
+                    className="rounded border border-neutral-200 bg-white px-2 py-1 text-xs focus:border-[#3580f9] focus:outline-none"
                   >
                     {["100", "300", "400", "500", "600", "700", "800", "900"].map((w) => (
                       <option key={w} value={w}>{w}</option>
@@ -199,7 +199,7 @@ export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; on
                   <select
                     value={v.style}
                     onChange={(e) => updateVariant(font._key, v._key, { style: e.target.value as "normal" | "italic" })}
-                    className="rounded border border-neutral-200 bg-white px-2 py-1 text-xs focus:border-[#076bff] focus:outline-none"
+                    className="rounded border border-neutral-200 bg-white px-2 py-1 text-xs focus:border-[#3580f9] focus:outline-none"
                   >
                     <option value="normal">Normal</option>
                     <option value="italic">Italic</option>
@@ -225,7 +225,7 @@ export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; on
                     fileInputRef.current?.click();
                   }}
                   disabled={uploading}
-                  className="text-xs text-[#076bff] hover:text-[#0559d4] transition-colors mt-1"
+                  className="text-xs text-[#3580f9] hover:text-[#2d6dd4] transition-colors mt-1"
                 >
                   {uploading && uploadTarget === font._key ? "Uploading..." : "+ Add variant file"}
                 </button>

package/components/admin/styles/GridLayoutEditor.tsx

@@ -15,7 +15,7 @@ const DEFAULT_GRID = {
 
 /** SVG illustration for the Column Gutter card */
 function GutterIcon() {
-  const ACCENT = "#4794E2";
+  const ACCENT = "#3580f9";
   return (
     <svg viewBox="0 0 120 72" fill="none" className="w-full h-full">
       {/* 5 columns (ghost blue) */}
@@ -44,7 +44,7 @@ function GutterIcon() {
 /** SVG illustration for the Max Page Width card */
 function MaxWidthIcon() {
   // Frame/dots/content stay neutral; arrows + dashed boundaries are the accent.
-  const ACCENT = "#4794E2";
+  const ACCENT = "#3580f9";
   return (
     <svg viewBox="0 0 120 72" fill="none" className="w-full h-full">
       {/* Browser frame */}
@@ -73,7 +73,7 @@ function MaxWidthIcon() {
 /** SVG illustration for the Scroll Animations card */
 function ScrollAnimIcon() {
   // 3 blue layers with increasing opacity convey the fade-in effect; accent arrow below.
-  const ACCENT = "#4794E2";
+  const ACCENT = "#3580f9";
   return (
     <svg viewBox="0 0 120 72" fill="none" className="w-full h-full">
       {/* 3 stacked layers (fade-in effect) */}
@@ -169,7 +169,7 @@ export function GridLayoutEditor({
                 type="text"
                 value={local.grid_gutter_desktop}
                 onChange={(e) => setLocal({ ...local, grid_gutter_desktop: e.target.value })}
-                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
                 placeholder="30"
               />
               <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>
@@ -187,7 +187,7 @@ export function GridLayoutEditor({
                 type="text"
                 value={local.grid_width}
                 onChange={(e) => setLocal({ ...local, grid_width: e.target.value })}
-                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
                 placeholder={DEFAULT_GRID_WIDTH}
               />
               <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>
@@ -206,7 +206,7 @@ export function GridLayoutEditor({
                 type="button"
                 onClick={() => setAnimLocal(!animLocal)}
                 className={`relative w-9 h-5 rounded-full transition-colors shrink-0 ${
-                  animLocal ? "bg-[#076bff]" : "bg-neutral-300"
+                  animLocal ? "bg-[#3580f9]" : "bg-neutral-300"
                 }`}
               >
                 <span
@@ -234,7 +234,7 @@ export function GridLayoutEditor({
                 type="text"
                 value={local.grid_gutter_desktop}
                 onChange={(e) => setLocal({ ...local, grid_gutter_desktop: e.target.value })}
-                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
                 placeholder="30"
               />
               <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>
@@ -253,7 +253,7 @@ export function GridLayoutEditor({
                 type="text"
                 value={local.grid_gutter_responsive}
                 onChange={(e) => setLocal({ ...local, grid_gutter_responsive: e.target.value })}
-                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
                 placeholder="30"
               />
               <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>
@@ -272,7 +272,7 @@ export function GridLayoutEditor({
                 type="text"
                 value={local.grid_gutter_phone || "16"}
                 onChange={(e) => setLocal({ ...local, grid_gutter_phone: e.target.value })}
-                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-1.5 pr-8 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
                 placeholder="16"
               />
               <span className="absolute right-3 top-1/2 -translate-y-1/2 text-[11px] text-neutral-400 pointer-events-none">px</span>

package/components/admin/styles/LinksButtonsEditor.tsx

@@ -16,8 +16,8 @@ export function LinksButtonsEditor({
   saving: boolean;
 }) {
   const [local, setLocal] = useState({
-    link_color: linkStyle?.color || "#076bff",
-    link_hover_color: linkStyle?.hover_color || "#0559d4",
+    link_color: linkStyle?.color || "#3580f9",
+    link_hover_color: linkStyle?.hover_color || "#2d6dd4",
     link_underline: linkStyle?.underline ?? true,
     button_primary_bg: buttonStyle?.primary_bg || "#ffffff",
     button_primary_text: buttonStyle?.primary_text || "#000000",
@@ -28,8 +28,8 @@ export function LinksButtonsEditor({
 
   useEffect(() => {
     setLocal({
-      link_color: linkStyle?.color || "#076bff",
-      link_hover_color: linkStyle?.hover_color || "#0559d4",
+      link_color: linkStyle?.color || "#3580f9",
+      link_hover_color: linkStyle?.hover_color || "#2d6dd4",
       link_underline: linkStyle?.underline ?? true,
       button_primary_bg: buttonStyle?.primary_bg || "#ffffff",
       button_primary_text: buttonStyle?.primary_text || "#000000",
@@ -51,7 +51,7 @@ export function LinksButtonsEditor({
               type="checkbox"
               checked={local.link_underline}
               onChange={(e) => setLocal({ ...local, link_underline: e.target.checked })}
-              className="accent-[#076bff]"
+              className="accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-700">Underline links</span>
           </label>

package/components/admin/styles/TypographyEditor.tsx

@@ -179,7 +179,7 @@ export function TypographyEditor({
                           <select
                             value={t.font_family || ""}
                             onChange={(e) => updateLevel(level, { font_family: e.target.value })}
-                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#3580f9] focus:outline-none"
                           >
                             <option value="">Inherit</option>
                             {fontFamilies.map((f) => (
@@ -193,7 +193,7 @@ export function TypographyEditor({
                             type="text"
                             value={t.font_size}
                             onChange={(e) => updateLevel(level, { font_size: e.target.value })}
-                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#3580f9] focus:outline-none"
                             placeholder="3rem"
                           />
                         </div>
@@ -202,7 +202,7 @@ export function TypographyEditor({
                           <select
                             value={t.font_weight}
                             onChange={(e) => updateLevel(level, { font_weight: e.target.value })}
-                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#3580f9] focus:outline-none"
                           >
                             {["100", "300", "400", "500", "600", "700", "800", "900"].map((w) => (
                               <option key={w} value={w}>{w}</option>
@@ -215,7 +215,7 @@ export function TypographyEditor({
                             type="text"
                             value={t.line_height}
                             onChange={(e) => updateLevel(level, { line_height: e.target.value })}
-                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#3580f9] focus:outline-none"
                             placeholder="1.1"
                           />
                         </div>
@@ -225,7 +225,7 @@ export function TypographyEditor({
                             type="text"
                             value={t.letter_spacing}
                             onChange={(e) => updateLevel(level, { letter_spacing: e.target.value })}
-                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#3580f9] focus:outline-none"
                             placeholder="-0.02em"
                           />
                         </div>
@@ -234,7 +234,7 @@ export function TypographyEditor({
                           <select
                             value={t.text_transform || "none"}
                             onChange={(e) => updateLevel(level, { text_transform: e.target.value as TypographyLevel["text_transform"] })}
-                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#3580f9] focus:outline-none"
                           >
                             <option value="none">None</option>
                             <option value="uppercase">UPPERCASE</option>

package/components/admin/styles/shared.tsx

@@ -1,68 +1,68 @@
-"use client";
-
-export function Section({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) {
-  return (
-    <section className="bg-white rounded-2xl border border-neutral-200 p-6">
-      <h2 className="text-lg font-semibold text-neutral-900 mb-1">{title}</h2>
-      {description && <p className="text-xs text-neutral-500 mb-5">{description}</p>}
-      {!description && <div className="mb-5" />}
-      {children}
-    </section>
-  );
-}
-
-export function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
-  return (
-    <div className="flex items-center gap-3">
-      <input
-        type="color"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="w-8 h-8 rounded-lg border border-neutral-200 cursor-pointer bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-md [&::-webkit-color-swatch]:border-none"
-      />
-      <div className="flex-1">
-        <label className="text-xs text-neutral-500 block mb-0.5">{label}</label>
-        <input
-          type="text"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1 text-xs text-neutral-900 focus:border-[#076bff] focus:outline-none"
-        />
-      </div>
-    </div>
-  );
-}
-
-export function SaveButton({ onClick, saving, label = "Save" }: { onClick: () => void; saving: boolean; label?: string }) {
-  return (
-    <button
-      onClick={onClick}
-      disabled={saving}
-      className="rounded-lg bg-[#076bff] px-5 py-1.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50"
-    >
-      {saving ? "Saving..." : label}
-    </button>
-  );
-}
-
-export function FieldInput({ label, value, onChange, placeholder, helpText }: {
-  label: string;
-  value: string;
-  onChange: (v: string) => void;
-  placeholder?: string;
-  helpText?: string;
-}) {
-  return (
-    <div>
-      <label className="text-[10px] text-neutral-400 uppercase tracking-wider block mb-1">{label}</label>
-      <input
-        type="text"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
-        placeholder={placeholder}
-      />
-      {helpText && <p className="text-[10px] text-neutral-400 mt-1">{helpText}</p>}
-    </div>
-  );
-}
+"use client";
+
+export function Section({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) {
+  return (
+    <section className="bg-white rounded-2xl border border-neutral-200 p-6">
+      <h2 className="text-lg font-semibold text-neutral-900 mb-1">{title}</h2>
+      {description && <p className="text-xs text-neutral-500 mb-5">{description}</p>}
+      {!description && <div className="mb-5" />}
+      {children}
+    </section>
+  );
+}
+
+export function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="flex items-center gap-3">
+      <input
+        type="color"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-8 h-8 rounded-lg border border-neutral-200 cursor-pointer bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-md [&::-webkit-color-swatch]:border-none"
+      />
+      <div className="flex-1">
+        <label className="text-xs text-neutral-500 block mb-0.5">{label}</label>
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1 text-xs text-neutral-900 focus:border-[#3580f9] focus:outline-none"
+        />
+      </div>
+    </div>
+  );
+}
+
+export function SaveButton({ onClick, saving, label = "Save" }: { onClick: () => void; saving: boolean; label?: string }) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={saving}
+      className="rounded-lg bg-[#3580f9] px-5 py-1.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors disabled:opacity-50"
+    >
+      {saving ? "Saving..." : label}
+    </button>
+  );
+}
+
+export function FieldInput({ label, value, onChange, placeholder, helpText }: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  helpText?: string;
+}) {
+  return (
+    <div>
+      <label className="text-[10px] text-neutral-400 uppercase tracking-wider block mb-1">{label}</label>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
+        placeholder={placeholder}
+      />
+      {helpText && <p className="text-[10px] text-neutral-400 mt-1">{helpText}</p>}
+    </div>
+  );
+}