feat/portal design v2 tune

apps/web/src/components/admin/settings/appearance/__tests__/tune-section.test.tsx

@@ -0,0 +1,63 @@
+// @vitest-environment happy-dom
+/**
+ * Appearance's exact values: each one typed sets the design's tune, held
+ * within its bounds; blank gives it back to the choices; clearing removes all.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { useState } from 'react'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { defaultDesign, type PortalDesign } from '@/lib/shared/design/schema'
+import { changeLabel } from '@/lib/shared/design/labels'
+import { TuneSection } from '../tune-section'
+
+let latest: PortalDesign
+
+function Harness() {
+  const [design, setDesign] = useState(defaultDesign())
+  latest = design
+  return (
+    <TuneSection
+      design={design}
+      update={(change) =>
+        setDesign((current) => {
+          const draft = structuredClone(current)
+          change(draft)
+          return draft
+        })
+      }
+    />
+  )
+}
+
+afterEach(cleanup)
+
+describe('Appearance’s exact values', () => {
+  it('sets a value typed, within its bounds, and blank gives it back to the choices', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: 'Fine-tune' }))
+    const size = screen.getByLabelText('Size', { selector: '#tune-headline-size' })
+    fireEvent.change(size, { target: { value: '48' } })
+    expect(latest.tune).toEqual({ headline: { size: 48 } })
+    fireEvent.change(screen.getByLabelText('Height', { selector: '#tune-button-height' }), {
+      target: { value: '400' },
+    })
+    expect(latest.tune?.button).toEqual({ height: 72 })
+    fireEvent.change(size, { target: { value: '' } })
+    expect(latest.tune).toEqual({ button: { height: 72 } })
+  })
+
+  it('clears every exact value at once', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByRole('button', { name: 'Fine-tune' }))
+    fireEvent.change(screen.getByLabelText('Corners', { selector: '#tune-card-radius' }), {
+      target: { value: '6' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Clear exact values' }))
+    expect(latest.tune).toBeUndefined()
+  })
+
+  it('names its changes for the review list', () => {
+    expect(changeLabel('tune.headline.size')).toBe('Headline exact values')
+    expect(changeLabel('tune')).toBe('Exact values')
+  })
+})

apps/web/src/components/admin/settings/appearance/appearance-view.tsx

@@ -163,9 +163,9 @@ export function AppearanceView({
             scope={scope}
             busy={ai.busy}
             onClearScope={() => setScope('site')}
-            onAsk={(text, palette) => {
+            onAsk={(text, attachment) => {
               setTab('ask')
-              void ai.ask(text, scope, palette)
+              void ai.ask(text, scope, attachment)
             }}
           />
         )}

apps/web/src/components/admin/settings/appearance/brand-panel.tsx

@@ -6,12 +6,12 @@ import { getWordmarkUploadUrlFn } from '@/lib/server/functions/uploads'
 import { designAssetUrl } from '@/lib/shared/design/design-view'
 import { Link } from '@tanstack/react-router'
 import { Button } from '@/components/ui/button'
-import { normaliseColor } from '@/lib/shared/design/color'
 import { DESIGN_OPTIONS } from '@/lib/shared/design/options'
 import type { PortalDesign } from '@/lib/shared/design/schema'
-import { oklchToHex } from '@/lib/shared/theme/colors'
 import { applyPreset } from '@/lib/shared/design/presets'
 import { DesignTiles } from './design-tiles'
+import { ColourField } from './colour-field'
+import { TuneSection } from './tune-section'
 import { WordsSection } from './words-section'
 import { FontsSection } from './fonts-section'
 import { PresetGallery } from './preset-gallery'
@@ -77,58 +77,6 @@ const presignWordmark = async (file: File) =>
     data: { filename: file.name, contentType: file.type, fileSize: file.size },
   })
 
-const toHex = (value: string | undefined) =>
-  value ? (value.startsWith('#') ? value : oklchToHex(value)) : '#ffffff'
-
-/** A colour as a picker and its value; a typed value applies once it parses. */
-function ColourField({
-  id,
-  label,
-  value,
-  placeholder,
-  onChange,
-}: {
-  id: string
-  label: string
-  value: string | undefined
-  placeholder?: string
-  onChange: (value: string | undefined) => void
-}) {
-  const [text, setText] = useState(value ?? '')
-  const [shown, setShown] = useState(value)
-  if (value !== shown) {
-    setShown(value)
-    setText(value ?? '')
-  }
-  return (
-    <div className="flex items-center gap-2">
-      <label htmlFor={id} className="w-32 shrink-0 text-[13px]">
-        {label}
-      </label>
-      <input
-        type="color"
-        aria-label={`${label} picker`}
-        value={toHex(value ?? placeholder)}
-        onChange={(event) => onChange(event.target.value)}
-        className="h-8 w-10 shrink-0 cursor-pointer rounded-field border border-border bg-transparent"
-      />
-      <Input
-        id={id}
-        value={text}
-        placeholder={placeholder ? 'Automatic' : undefined}
-        onChange={(event) => {
-          const next = event.target.value
-          setText(next)
-          if (next.trim() === '' && placeholder !== undefined) onChange(undefined)
-          const colour = normaliseColor(next.trim())
-          if (colour) onChange(colour)
-        }}
-        className="h-8 font-mono text-xs"
-      />
-    </div>
-  )
-}
-
 /** The Brand tab: the logo, mode, colours, fonts and corners. */
 export function BrandPanel({
   design,
@@ -408,6 +356,8 @@ export function BrandPanel({
         }
       />
 
+      <TuneSection design={design} update={update} />
+
       <WordsSection design={design} update={update} />
     </div>
   )

apps/web/src/components/admin/settings/appearance/colour-field.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { Input } from '@/components/ui/input'
+import { normaliseColor } from '@/lib/shared/design/color'
+import { oklchToHex } from '@/lib/shared/theme/colors'
+
+export const toHex = (value: string | undefined) =>
+  value ? (value.startsWith('#') ? value : oklchToHex(value)) : '#ffffff'
+
+/** A colour as a picker and its value; a typed value applies once it parses. */
+export function ColourField({
+  id,
+  label,
+  value,
+  placeholder,
+  onChange,
+}: {
+  id: string
+  label: string
+  value: string | undefined
+  placeholder?: string
+  onChange: (value: string | undefined) => void
+}) {
+  const [text, setText] = useState(value ?? '')
+  const [shown, setShown] = useState(value)
+  if (value !== shown) {
+    setShown(value)
+    setText(value ?? '')
+  }
+  return (
+    <div className="flex items-center gap-2">
+      <label htmlFor={id} className="w-32 shrink-0 text-[13px]">
+        {label}
+      </label>
+      <input
+        type="color"
+        aria-label={`${label} picker`}
+        value={toHex(value ?? placeholder)}
+        onChange={(event) => onChange(event.target.value)}
+        className="h-8 w-10 shrink-0 cursor-pointer rounded-field border border-border bg-transparent"
+      />
+      <Input
+        id={id}
+        value={text}
+        placeholder={placeholder ? 'Automatic' : undefined}
+        onChange={(event) => {
+          const next = event.target.value
+          setText(next)
+          if (next.trim() === '' && placeholder !== undefined) onChange(undefined)
+          const colour = normaliseColor(next.trim())
+          if (colour) onChange(colour)
+        }}
+        className="h-8 font-mono text-xs"
+      />
+    </div>
+  )
+}

apps/web/src/components/admin/settings/appearance/design-composer.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
-import { imagePalette } from '@/lib/client/image-palette'
+import { imageForModel, imagePalette } from '@/lib/client/image-palette'
 import type { DesignAiScope } from '@/lib/shared/design/apply-changes'
 import { PaletteSwatches } from './ask-ai-panel'
 
@@ -30,16 +30,18 @@ export function DesignComposer({
   scope: DesignAiScope
   busy: boolean
   onClearScope: () => void
-  onAsk: (text: string, palette?: string[]) => void
+  onAsk: (text: string, attachment?: { palette: string[]; image?: string }) => void
 }) {
   const [query, setQuery] = useState('')
-  const [image, setImage] = useState<{ name: string; palette: string[] } | null>(null)
+  const [image, setImage] = useState<{ name: string; palette: string[]; data?: string } | null>(
+    null
+  )
   const text = query.trim()
   const send = () => {
     if (!text || busy) return
     setQuery('')
     setImage(null)
-    onAsk(text, image?.palette)
+    onAsk(text, image ? { palette: image.palette, image: image.data } : undefined)
   }
   return (
     <div className="rounded-2xl border border-border bg-card p-3 shadow-float transition-[box-shadow,border-color] duration-300 ease-out focus-within:border-muted-foreground focus-within:shadow-float-focus motion-reduce:transition-none">
@@ -86,8 +88,9 @@ export function DesignComposer({
               const file = event.target.files?.[0]
               event.target.value = ''
               if (!file) return
-              const palette = await imagePalette(file)
-              if (palette.length) setImage({ name: file.name, palette })
+              // Its colours, and the picture itself for a model that reads images.
+              const [palette, data] = await Promise.all([imagePalette(file), imageForModel(file)])
+              if (palette.length) setImage({ name: file.name, palette, ...(data && { data }) })
             }}
           />
           <svg viewBox="0 0 16 16" className="size-4" aria-hidden="true">