@@ -0,0 +1,6 @@
+---
+'@object-ui/console': patch
+'@object-ui/i18n': patch
+---
+
+Settings pages: a `url`, `email`, `phone` or `color` value that misses the format its type declares now blocks Save (objectui#13287). No request goes out, the row is marked inline with a message naming what the format expects, and focus moves to the first such row, on the same path as the `required` check. The grammars are the settings service's own (objectstack#24882), judged on the trimmed value; an empty value is left to `required`, and a hidden or env-locked row is not judged. Adds `console.settingsView.invalidPhone` and `console.settingsView.invalidColor` to every locale pack; `email` and `url` reuse `validation.email` and `validation.url`.
@@ -148,10 +148,52 @@ function isEmptySettingValue(value: unknown): boolean {
 }
 
 /**
- * The visible `required` keys that hold no value, in manifest order
- * (objectui#13239). The spec declares `required` as "renderer + server-side
- * validation"; the server judges only the keys a save touches, so a required
- * key nobody edited is the renderer's half to check.
+ * The value format each format-bearing specifier TYPE declares (objectui#13287):
+ * ADR-0007's specifier table, "`email` / `url` / `phone` | typed input | string
+ * | format validation" and "`color` | colour picker | hex string".
+ *
+ * Each grammar is the settings service's own, `DECLARED_VALUE_FORMATS` in
+ * objectstack's `service-settings` (objectstack#24882), which refuses a miss at
+ * the save door with one `FieldError` per key. Kept to the server's grammar so
+ * the page never blocks a value the server and its readers accept, nor lets
+ * through one the server will refuse:
+ *
+ *  - `email` — `local@domain` with a dotted domain.
+ *  - `url` — `scheme://…`, a root-relative `/path`, a `data:` URI or a
+ *    `blob:` URL (`branding.logo_url`'s reader takes absolute or relative).
+ *  - `phone` — digits, spaces and `+ ( ) - .` only, at least 5 characters.
+ *  - `color` — CSS hex, `#rgb`, `#rgba`, `#rrggbb` or `#rrggbbaa`.
+ *
+ * A `Map`, so a type spelled like an `Object.prototype` member looks up nothing.
+ */
+const DECLARED_VALUE_FORMATS: ReadonlyMap<string, RegExp> = new Map([
+  ['email', /^[^\s@]+@[^\s@.]+(?:\.[^\s@.]+)+$/],
+  ['url', /^(?:[a-z][a-z0-9+.-]*:\/\/\S+|\/\S*|data:\S+|blob:\S+)$/i],
+  ['phone', /^[+()\-\s\d.]{5,}$/],
+  ['color', /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i],
+]);
+
+/**
+ * True when `value` misses the format its specifier `type` declares. A type
+ * with no declared format, a non-string value, or an empty one passes: "no
+ * value" is the `required` rule's business. Judged trimmed, as the server
+ * judges it.
+ */
+function missesDeclaredFormat(type: string, value: unknown): boolean {
+  const re = DECLARED_VALUE_FORMATS.get(type);
+  if (!re || typeof value !== 'string' || value.trim() === '') return false;
+  return !re.test(value.trim());
+}
+
+/** Why the page blocked a save on one key: an empty `required`, or a format miss. */
+type PreSaveBlock = { key: string; rule: 'required' | 'format'; type: string };
+
+/**
+ * The visible keys a save is blocked on, in manifest order: a `required` key
+ * that holds no value (objectui#13239), or a value that misses the format its
+ * type declares (objectui#13287). The spec declares `required` as "renderer +
+ * server-side validation"; the server judges only the keys a save touches, so a
+ * required key nobody edited is the renderer's half to check.
  *
  * - Visibility is the same `evalVisibility` reading the page renders by, over
  *   the live values (draft over stored): a hidden key is not checked.
@@ -160,25 +202,29 @@ function isEmptySettingValue(value: unknown): boolean {
  *   counts as filled.
  * - A locked row is not checked. An env lock reads back as `locked: true` with
  *   the environment's value in `value`, and the row's control is disabled, so
- *   nothing on this page could fill it either way.
+ *   nothing on this page could fill or fix it either way.
  */
-function emptyRequiredKeys(
+function preSaveBlocks(
   specifiers: ReadonlyArray<Specifier>,
   values: SettingsNamespacePayload['values'],
   draft: Record<string, unknown>,
   liveValues: Record<string, unknown>,
-): string[] {
-  const empty: string[] = [];
+): PreSaveBlock[] {
+  const blocks: PreSaveBlock[] = [];
   for (const spec of specifiers) {
     const key = spec.key;
-    if (!key || !spec.required || NON_INPUT_TYPES.has(spec.type)) continue;
+    if (!key || NON_INPUT_TYPES.has(spec.type)) continue;
     if (!evalVisibility(spec.visible, liveValues)) continue;
     const resolved = values[key];
     if (resolved?.locked) continue;
     const effective = key in draft ? draft[key] : resolved?.value;
-    if (isEmptySettingValue(effective)) empty.push(key);
+    if (spec.required && isEmptySettingValue(effective)) {
+      blocks.push({ key, rule: 'required', type: spec.type });
+    } else if (missesDeclaredFormat(spec.type, effective)) {
+      blocks.push({ key, rule: 'format', type: spec.type });
+    }
   }
-  return empty;
+  return blocks;
 }
 
 export function SettingsView() {
@@ -341,13 +387,21 @@ export function SettingsView() {
     // objectui#13239 — a visible required field left empty blocks the save
     // here: no request goes out, each such row is marked through the same
     // field-error slot a server refusal uses, and focus moves to the first.
-    const missing = emptyRequiredKeys(manifest.specifiers, values, draft, liveValues);
-    if (missing.length > 0) {
-      const message = t('form.fieldRequired');
-      setFieldErrors(Object.fromEntries(missing.map((key) => [key, message])));
-      setFocusKey({ key: missing[0] });
+    // objectui#13287 — a value that misses its type's declared format blocks
+    // the same way, with one message per format naming what is expected.
+    const blocked = preSaveBlocks(manifest.specifiers, values, draft, liveValues);
+    if (blocked.length > 0) {
+      const messageFor = ({ rule, type }: PreSaveBlock): string => {
+        if (rule === 'required') return t('form.fieldRequired');
+        if (type === 'email') return t('validation.email');
+        if (type === 'url') return t('validation.url');
+        if (type === 'phone') return t('console.settingsView.invalidPhone');
+        return t('console.settingsView.invalidColor');
+      };
+      setFieldErrors(Object.fromEntries(blocked.map((b) => [b.key, messageFor(b)])));
+      setFocusKey({ key: blocked[0].key });
       const named = refusedSettingLabels(
-        missing.map((field) => ({ field })),
+        blocked.map(({ key }) => ({ field: key })),
         manifest.specifiers,
         labels,
       );
 
@@ -0,0 +1,265 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * SettingsView — a value that misses the format its specifier type declares
+ * blocks Save (objectui#13287).
+ *
+ * ADR-0007 declares `email` / `url` / `phone` as "format validation" and
+ * `color` as a "hex string", and the settings service refuses a miss at the
+ * save door (objectstack#24882). The page judged nothing before the request:
+ * Setup → Branding saved Logo URL `not a url` and answered "Settings saved".
+ * The check rides the same Save path as the `required` one (objectui#13239):
+ * no request, the row marked through the field-error slot, focus on the first.
+ */
+
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, screen, cleanup, waitFor, fireEvent } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+
+const getSettingsNamespace = vi.fn();
+const saveSettingsNamespace = vi.fn();
+const runSettingsAction = vi.fn();
+
+vi.mock('../api', async () => {
+  const actual = await vi.importActual<typeof import('../api')>('../api');
+  return {
+    ...actual,
+    getSettingsNamespace: (...a: unknown[]) => getSettingsNamespace(...a),
+    saveSettingsNamespace: (...a: unknown[]) => saveSettingsNamespace(...a),
+    runSettingsAction: (...a: unknown[]) => runSettingsAction(...a),
+  };
+});
+
+const toastError = vi.fn();
+const toastSuccess = vi.fn();
+vi.mock('sonner', () => ({
+  toast: {
+    error: (...a: unknown[]) => toastError(...a),
+    success: (...a: unknown[]) => toastSuccess(...a),
+  },
+}));
+
+import { SettingsView } from '../SettingsView';
+
+const SHOW_LEGACY = '${data.show_legacy === true}';
+
+type Resolved = { value: unknown; locked?: boolean; lockedReason?: string; source?: string };
+
+/**
+ * Branding's shape (`logo_url`, `accent_color`) plus the Company/Email format
+ * rows (`support_email`, `support_phone`), an optional `website`, a url hidden
+ * by `visible`, and a url locked by the environment.
+ */
+function brandingPayload(overrides: Record<string, Resolved> = {}) {
+  const values: Record<string, Resolved> = {
+    logo_url: { value: 'https://cdn.example.com/logo.png' },
+    accent_color: { value: '#1a2b3c' },
+    support_email: { value: 'ops@example.com' },
+    support_phone: { value: '+1 (555) 010-0100' },
+    website: { value: null },
+    show_legacy: { value: false },
+    legacy_url: { value: 'not a url' },
+    env_url: {
+      value: 'not a url',
+      source: 'env',
+      locked: true,
+      lockedReason: 'Set via env: OS_BRANDING_ENV_URL',
+    },
+    product_name: { value: 'Acme' },
+    ...overrides,
+  };
+  const resolved: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(values)) resolved[k] = { source: 'default', locked: false, ...v };
+  return {
+    manifest: {
+      namespace: 'branding',
+      label: 'Branding',
+      specifiers: [
+        { type: 'text', key: 'product_name', label: 'Product name' },
+        { type: 'url', key: 'logo_url', label: 'Logo URL' },
+        { type: 'color', key: 'accent_color', label: 'Accent color' },
+        { type: 'email', key: 'support_email', label: 'Support email' },
+        { type: 'phone', key: 'support_phone', label: 'Support phone' },
+        { type: 'url', key: 'website', label: 'Website' },
+        { type: 'url', key: 'legacy_url', label: 'Legacy URL', visible: SHOW_LEGACY },
+        { type: 'url', key: 'env_url', label: 'Env URL' },
+      ],
+    },
+    values: resolved,
+  };
+}
+
+function renderView() {
+  return render(
+    <MemoryRouter initialEntries={['/settings/branding']}>
+      <Routes>
+        <Route path="/settings/:namespace" element={<SettingsView />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+const rowFor = (key: string) =>
+  document.querySelector<HTMLElement>(`[data-settings-key="${key}"]`);
+/** The row's text box: the last input, which for `color` is the hex text field beside the picker. */
+const textInputFor = (key: string) => {
+  const inputs = rowFor(key)?.querySelectorAll('input') ?? [];
+  return inputs.length ? inputs[inputs.length - 1] : null;
+};
+const alertIn = (key: string) => rowFor(key)?.querySelector('[role="alert"]') ?? null;
+
+async function typeAndSave(key: string, value: string) {
+  await screen.findByText('Product name');
+  fireEvent.change(textInputFor(key)!, { target: { value } });
+  fireEvent.click(await screen.findByRole('button', { name: /save/i }));
+}
+
+async function expectBlockedOn(key: string) {
+  await waitFor(() => expect(alertIn(key)).toBeTruthy());
+  expect(saveSettingsNamespace).not.toHaveBeenCalled();
+  expect(toastSuccess).not.toHaveBeenCalled();
+}
+
+async function expectSaved() {
+  await waitFor(() => expect(saveSettingsNamespace).toHaveBeenCalledTimes(1));
+  await waitFor(() => expect(toastSuccess).toHaveBeenCalled());
+  expect(document.querySelector('[role="alert"]')).toBeNull();
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  saveSettingsNamespace.mockResolvedValue({ values: {} });
+});
+afterEach(cleanup);
+
+describe('SettingsView — a value that misses its declared format blocks Save (objectui#13287)', () => {
+  it('(a) Logo URL `not a url` blocks: no request, the row marked, focus on it', async () => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload());
+    renderView();
+    await typeAndSave('logo_url', 'not a url');
+
+    await expectBlockedOn('logo_url');
+    expect(textInputFor('logo_url')!.getAttribute('aria-invalid')).toBe('true');
+    expect(textInputFor('logo_url')!.getAttribute('aria-describedby')).toBe(
+      alertIn('logo_url')!.getAttribute('id'),
+    );
+    expect(document.activeElement).toBe(textInputFor('logo_url'));
+    // One toast, the blocked-save toast the required check raises.
+    expect(toastError).toHaveBeenCalledTimes(1);
+  });
+
+  it.each(['https://cdn.example.com/brand.svg', '/logo.png', '  /logo.png  '])(
+    '(a) Logo URL %j saves',
+    async (value) => {
+      getSettingsNamespace.mockResolvedValue(brandingPayload());
+      renderView();
+      await typeAndSave('logo_url', value);
+      await expectSaved();
+      expect(saveSettingsNamespace).toHaveBeenCalledWith('branding', { logo_url: value.trim() });
+    },
+  );
+
+  it('(b) an email with a dotless domain blocks', async () => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload());
+    renderView();
+    await typeAndSave('support_email', 'no-reply@localhost');
+    await expectBlockedOn('support_email');
+    expect(document.activeElement).toBe(textInputFor('support_email'));
+  });
+
+  it('(b) a valid email saves', async () => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload());
+    renderView();
+    await typeAndSave('support_email', 'no-reply@mail.example.com');
+    await expectSaved();
+  });
+
+  it.each(['red', '#12'])('(c) the color %j blocks', async (value) => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload());
+    renderView();
+    await typeAndSave('accent_color', value);
+    await expectBlockedOn('accent_color');
+  });
+
+  it('(c) the color `#1a2b3c` saves', async () => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload({ accent_color: { value: '#000' } }));
+    renderView();
+    await typeAndSave('accent_color', '#1a2b3c');
+    await expectSaved();
+  });
+
+  it('a phone number with letters blocks; a valid one saves', async () => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload());
+    renderView();
+    await typeAndSave('support_phone', 'call me');
+    await expectBlockedOn('support_phone');
+
+    cleanup();
+    vi.clearAllMocks();
+    saveSettingsNamespace.mockResolvedValue({ values: {} });
+    renderView();
+    await typeAndSave('support_phone', '+44 20 7946 0958');
+    await expectSaved();
+  });
+
+  it('each format names what it expects, one message per format', async () => {
+    getSettingsNamespace.mockResolvedValue(
+      brandingPayload({
+        accent_color: { value: 'red' },
+        support_email: { value: 'ops@localhost' },
+        support_phone: { value: 'n/a' },
+      }),
+    );
+    renderView();
+    await typeAndSave('logo_url', 'not a url');
+
+    await expectBlockedOn('logo_url');
+    const messages = ['logo_url', 'support_email', 'support_phone', 'accent_color'].map(
+      (key) => alertIn(key)?.textContent ?? '',
+    );
+    // Every row marked, each with its own format's message.
+    expect(messages.every((m) => m.length > 0)).toBe(true);
+    expect(new Set(messages).size).toBe(4);
+    // Focus goes to the first in manifest order.
+    expect(document.activeElement).toBe(textInputFor('logo_url'));
+  });
+
+  it('(d) control: an empty optional url field does not block', async () => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload({ website: { value: '' } }));
+    renderView();
+    await typeAndSave('product_name', 'Acme Cloud');
+    await expectSaved();
+  });
+
+  it('(e) control: a hidden malformed url and an env-locked malformed url do not block', async () => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload());
+    renderView();
+    await screen.findByText('Product name');
+    expect(rowFor('legacy_url')).toBeNull();
+    expect(rowFor('env_url')).toBeTruthy();
+    await typeAndSave('product_name', 'Acme Cloud');
+    await expectSaved();
+  });
+
+  it('a stored malformed value on a visible row blocks a save that edits another row', async () => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload({ logo_url: { value: 'not a url' } }));
+    renderView();
+    await typeAndSave('product_name', 'Acme Cloud');
+    await expectBlockedOn('logo_url');
+  });
+
+  it('editing the marked row clears its message, as for a server refusal', async () => {
+    getSettingsNamespace.mockResolvedValue(brandingPayload());
+    renderView();
+    await typeAndSave('logo_url', 'not a url');
+    await expectBlockedOn('logo_url');
+    fireEvent.change(textInputFor('logo_url')!, { target: { value: 'https://x.example.com/l.png' } });
+    await waitFor(() => expect(alertIn('logo_url')).toBeNull());
+  });
+});