feat(web): expand typography capabilities in manual edit panel

Author: ramiy

apps/web/src/components/FileViewer.tsx

@@ -516,7 +516,7 @@ function manualEditPersistedValueMatchesSavedSnapshot(
 }
 
 const MANUAL_EDIT_RECT_AFFECTING_STYLE_PROPS = new Set<keyof ManualEditStyles>([
-  'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'lineHeight', 'letterSpacing',
+  'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'lineHeight', 'textTransform', 'letterSpacing', 'wordSpacing',
   'display', 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'minHeight',
   'gap', 'flexDirection', 'justifyContent', 'alignItems', 'transform',
   'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',

apps/web/src/components/ManualEditPanel.tsx

@@ -513,6 +513,14 @@ const FONT_OPTS = [
 ] as const;
 const WEIGHT_OPTS = ['', '100', '200', '300', '400', '500', '600', '700', '800', '900'];
 const ALIGN_OPTS = ['', 'left', 'center', 'right', 'justify', 'start', 'end'];
+const TEXT_TRANSFORM_OPTS = ['', 'uppercase', 'lowercase', 'capitalize', 'none'];
+const TEXT_TRANSFORM_LABELS: Record<string, string> = {
+  '': '-',
+  uppercase: 'Uppercase',
+  lowercase: 'Lowercase',
+  capitalize: 'Capitalize',
+  none: 'None',
+};
 const DIRECTION_OPTS = ['', 'row', 'column', 'row-reverse', 'column-reverse'];
 const JUSTIFY_OPTS = ['', 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'];
 const ITEMS_OPTS = ['', 'stretch', 'flex-start', 'center', 'flex-end', 'baseline'];
@@ -537,7 +545,7 @@ type NormalizeResult =
   | { ok: false; error: string };
 
 const PX_STYLE_PROPS = new Set<keyof ManualEditStyles>([
-  'fontSize', 'letterSpacing', 'width', 'height', 'minHeight', 'gap',
+  'fontSize', 'letterSpacing', 'wordSpacing', 'width', 'height', 'minHeight', 'gap',
   'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
   'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
   'border', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
@@ -548,6 +556,7 @@ const SELECT_STYLE_OPTIONS: Partial<Record<keyof ManualEditStyles, ReadonlyArray
   fontFamily: FONT_OPTS.map((option) => option.value),
   fontWeight: WEIGHT_OPTS,
   textAlign: ALIGN_OPTS,
+  textTransform: TEXT_TRANSFORM_OPTS,
   flexDirection: DIRECTION_OPTS,
   justifyContent: JUSTIFY_OPTS,
   alignItems: ITEMS_OPTS,
@@ -662,8 +671,12 @@ function StyleInspector({
             <DropdownRow label="Align" value={styles.textAlign} onChange={(v) => u('textAlign', v)} options={ALIGN_OPTS} />
           </PairRow>
           <PairRow>
-            <UnitRow label="Line" value={styles.lineHeight} onChange={(v) => u('lineHeight', v)} unit="" />
-            <UnitRow label="Tracking" value={styles.letterSpacing} onChange={(v) => u('letterSpacing', v)} unit="px" autoUnit />
+            <UnitRow label="Line height" value={styles.lineHeight} onChange={(v) => u('lineHeight', v)} unit="" />
+            <DropdownRow label="Transform" value={styles.textTransform} onChange={(v) => u('textTransform', v)} options={TEXT_TRANSFORM_OPTS} optionLabels={TEXT_TRANSFORM_LABELS} />
+          </PairRow>
+          <PairRow>
+            <UnitRow label="Letter spacing" value={styles.letterSpacing} onChange={(v) => u('letterSpacing', v)} unit="px" autoUnit />
+            <UnitRow label="Word spacing" value={styles.wordSpacing} onChange={(v) => u('wordSpacing', v)} unit="px" autoUnit />
           </PairRow>
         </Section>
       ) : null}
@@ -768,17 +781,18 @@ function UnitRow({ label, value, onChange, unit, autoUnit, disabled }: {
   );
 }
 
-function DropdownRow({ label, value, onChange, options, placeholder, disabled }: {
+function DropdownRow({ label, value, onChange, options, placeholder, disabled, optionLabels }: {
   label: string; value: string; onChange: (v: string) => void;
   options: ReadonlyArray<string>; placeholder?: string; disabled?: boolean;
+  optionLabels?: Readonly<Record<string, string>>;
 }) {
   return (
     <label className="cc-row">
       <span className="cc-label">{label}</span>
       <span className="cc-value cc-select">
         <select value={value} disabled={disabled} onChange={(e) => onChange(e.currentTarget.value)}>
           {!options.includes(value) && value ? <option value={value}>{value}</option> : null}
-          {options.map((opt) => <option key={opt || '__'} value={opt}>{opt || (placeholder ?? '–')}</option>)}
+          {options.map((opt) => <option key={opt || '__'} value={opt}>{optionLabels?.[opt] ?? (opt || (placeholder ?? '–'))}</option>)}
         </select>
         <em className="cc-chevron">▾</em>
       </span>

apps/web/src/edit-mode/bridge.ts

@@ -195,7 +195,7 @@ export function buildManualEditBridge(enabled: boolean): string {
   var discoverySelector = ${JSON.stringify(MANUAL_EDIT_DISCOVERY_SELECTOR)};
   var hostNodeSelector = ${JSON.stringify(MANUAL_EDIT_HOST_NODE_SELECTOR)};
   var sourcePathAttr = ${JSON.stringify(MANUAL_EDIT_SOURCE_PATH_ATTR)};
-  var styleProps = ['fontFamily','fontSize','fontWeight','fontStyle','textDecorationLine','color','textAlign','lineHeight','letterSpacing','whiteSpace','display','position','left','top','right','bottom','zIndex','width','height','minHeight','gap','flexDirection','justifyContent','alignItems','backgroundColor','opacity','transform','padding','paddingTop','paddingRight','paddingBottom','paddingLeft','margin','marginTop','marginRight','marginBottom','marginLeft','border','borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth','borderStyle','borderColor','borderRadius'];
+  var styleProps = ['fontFamily','fontSize','fontWeight','fontStyle','textDecorationLine','color','textAlign','lineHeight','textTransform','letterSpacing','wordSpacing','whiteSpace','display','position','left','top','right','bottom','zIndex','width','height','minHeight','gap','flexDirection','justifyContent','alignItems','backgroundColor','opacity','transform','padding','paddingTop','paddingRight','paddingBottom','paddingLeft','margin','marginTop','marginRight','marginBottom','marginLeft','border','borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth','borderStyle','borderColor','borderRadius'];
   var inlineTextTags = ${JSON.stringify(MANUAL_EDIT_INLINE_TEXT_TAGS)};
   function isHostNode(el){
     return !!(el && el.matches && el.matches(hostNodeSelector));
@@ -360,6 +360,7 @@ export function buildManualEditBridge(enabled: boolean): string {
     var computed = window.getComputedStyle(el);
     var styles = {};
     styleProps.forEach(function(prop){ styles[prop] = el.style[prop] || computed[prop] || ''; });
+    if (!el.style.textTransform && styles.textTransform === 'none') styles.textTransform = '';
     // Gesture math (move/resize) adds pointer deltas to these values, so they
     // must be RESOLVED px — an authored 'left: 43%' would otherwise be read as
     // 43px and teleport the element on the first drag. Computed left/top are

apps/web/src/edit-mode/types.ts

@@ -23,7 +23,9 @@ export interface ManualEditStyles {
   color: string;
   textAlign: string;
   lineHeight: string;
+  textTransform: string;
   letterSpacing: string;
+  wordSpacing: string;
   whiteSpace: string;
   display: string;
   position: string;
@@ -302,7 +304,7 @@ export type ManualEditBridgeMessage =
 
 export const MANUAL_EDIT_STYLE_PROPS: readonly (keyof ManualEditStyles)[] = [
   'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecorationLine',
-  'color', 'textAlign', 'lineHeight', 'letterSpacing', 'whiteSpace',
+  'color', 'textAlign', 'lineHeight', 'textTransform', 'letterSpacing', 'wordSpacing', 'whiteSpace',
   'display', 'position', 'left', 'top', 'right', 'bottom', 'zIndex',
   'width', 'height', 'minHeight',
   'gap', 'flexDirection', 'justifyContent', 'alignItems',

apps/web/tests/components/FileViewer.manual-edit.test.tsx

@@ -191,6 +191,73 @@ describe('FileViewer manual edit regressions', () => {
     expect(screen.queryByText('PAGE')).toBeNull();
   });
 
+  it('previews and saves manual-edit word spacing', async () => {
+    const source = '<!doctype html><html><body><main data-od-id="hero">Two words</main></body></html>';
+    const { fetchMock, savedBodies } = manualEditWriteMock(source);
+    vi.stubGlobal('fetch', fetchMock);
+    render(
+      <FileViewer projectId="project-1" projectKind="prototype" file={htmlPreviewFile()}
+        liveHtml={source}
+      />,
+    );
+
+    clickManualTool('manual-edit-mode-toggle');
+    const frame = await previewFrame();
+    await selectManualEditTarget();
+    const postSpy = vi.spyOn(frame.contentWindow!, 'postMessage');
+    fireEvent.change(await findStyleInput('Word spacing'), { target: { value: '-2' } });
+    expect(postSpy).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'od-edit-preview-style', styles: expect.objectContaining({ wordSpacing: '-2px' }),
+    }), '*');
+
+    fireEvent.click(within(document.querySelector('.manual-edit-modal') as HTMLElement)
+      .getByRole('button', { name: /^Save$/ }));
+    await waitFor(() => expect(savedBodies).toHaveLength(1));
+    expect(savedBodies[0]!.content).toContain('word-spacing: -2px');
+  });
+
+  it('previews, saves, and clears manual-edit text transform', async () => {
+    const source = '<!doctype html><html><body><main data-od-id="hero">Two words</main></body></html>';
+    const { fetchMock, savedBodies } = manualEditWriteMock(source);
+    vi.stubGlobal('fetch', fetchMock);
+    render(
+      <FileViewer projectId="project-1" projectKind="prototype" file={htmlPreviewFile()}
+        liveHtml={source}
+      />,
+    );
+
+    clickManualTool('manual-edit-mode-toggle');
+    const frame = await previewFrame();
+    await selectManualEditTarget();
+    const postSpy = vi.spyOn(frame.contentWindow!, 'postMessage');
+    const findTransformSelect = () => Array.from(document.querySelectorAll('.cc-row'))
+      .find((row) => row.querySelector('.cc-label')?.textContent === 'Transform')
+      ?.querySelector('select') as HTMLSelectElement;
+    let transformSelect = findTransformSelect();
+    fireEvent.change(transformSelect, { target: { value: 'lowercase' } });
+    expect(postSpy).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'od-edit-preview-style', styles: expect.objectContaining({ textTransform: 'lowercase' }),
+    }), '*');
+
+    fireEvent.click(within(document.querySelector('.manual-edit-modal') as HTMLElement)
+      .getByRole('button', { name: /^Save$/ }));
+    await waitFor(() => expect(savedBodies).toHaveLength(1));
+    expect(savedBodies[0]!.content).toContain('text-transform: lowercase');
+
+    await selectManualEditTarget();
+    transformSelect = findTransformSelect();
+    transformSelect.value = '';
+    fireEvent.change(transformSelect);
+    expect(postSpy).toHaveBeenCalledWith(expect.objectContaining({
+      type: 'od-edit-preview-style', styles: expect.objectContaining({ textTransform: '' }),
+    }), '*');
+
+    fireEvent.click(within(document.querySelector('.manual-edit-modal') as HTMLElement)
+      .getByRole('button', { name: /^Save$/ }));
+    await waitFor(() => expect(savedBodies).toHaveLength(2));
+    expect(savedBodies[1]!.content).not.toMatch(/text-transform\s*:/);
+  });
+
   it('re-enters edit mode on the latest source after an external rewrite', async () => {
     const v1 = '<!doctype html><html><body><main data-od-id="hero">Version One</main></body></html>';
     const v2 = '<!doctype html><html><body><main data-od-id="hero">Version Two</main></body></html>';

apps/web/tests/components/ManualEditPanel.test.tsx

@@ -203,6 +203,25 @@ describe('ManualEditPanel', () => {
       expect.objectContaining({ fontSize: '32px', color: '#111111', paddingTop: '8px' }),
       'Style: Hero Title',
     );
+
+    const transformRow = Array.from(host.querySelectorAll('.cc-row'))
+      .find((row) => row.querySelector('.cc-label')?.textContent === 'Transform');
+    const transformSelect = transformRow?.querySelector('select') as HTMLSelectElement | null;
+    if (!transformSelect) throw new Error('Transform select not found');
+
+    expect(Array.from(transformSelect.options).map((option) => [option.text, option.value])).toEqual([
+      ['-', ''], ['Uppercase', 'uppercase'], ['Lowercase', 'lowercase'], ['Capitalize', 'capitalize'], ['None', 'none'],
+    ]);
+    act(() => {
+      transformSelect.value = 'uppercase';
+      transformSelect.dispatchEvent(new dom.window.Event('change', { bubbles: true }));
+    });
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { textTransform: 'uppercase' }, 'Style: Hero Title');
+    act(() => {
+      transformSelect.value = '';
+      transformSelect.dispatchEvent(new dom.window.Event('change', { bubbles: true }));
+    });
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { textTransform: '' }, 'Style: Hero Title');
   });
 
   it('shows px-backed values without px in numeric inputs', () => {
@@ -230,23 +249,30 @@ describe('ManualEditPanel', () => {
         fontSize: '32px',
         lineHeight: '1.4',
         letterSpacing: '1px',
+        wordSpacing: '1px',
       },
     });
 
     const sizeIncrease = host.querySelector('button[aria-label="Size increase"]') as HTMLButtonElement | null;
-    const lineIncrease = host.querySelector('button[aria-label="Line increase"]') as HTMLButtonElement | null;
-    const trackingDecrease = host.querySelector('button[aria-label="Tracking decrease"]') as HTMLButtonElement | null;
-    if (!sizeIncrease || !lineIncrease || !trackingDecrease) throw new Error('Stepper button not found');
+    const lineIncrease = host.querySelector('button[aria-label="Line height increase"]') as HTMLButtonElement | null;
+    const letterDecrease = host.querySelector('button[aria-label="Letter spacing decrease"]') as HTMLButtonElement | null;
+    const wordsIncrease = host.querySelector('button[aria-label="Word spacing increase"]') as HTMLButtonElement | null;
+    if (!sizeIncrease || !lineIncrease || !letterDecrease || !wordsIncrease) throw new Error('Stepper button not found');
 
     act(() => {
       sizeIncrease.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
       lineIncrease.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
-      trackingDecrease.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
+      letterDecrease.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true }));
     });
+    act(() => wordsIncrease.click());
 
     expect(onStyleChange).toHaveBeenCalledWith('hero-title', { fontSize: '33px' }, 'Style: Hero Title');
     expect(onStyleChange).toHaveBeenCalledWith('hero-title', { lineHeight: '1.5' }, 'Style: Hero Title');
     expect(onStyleChange).toHaveBeenCalledWith('hero-title', { letterSpacing: '0px' }, 'Style: Hero Title');
+    expect(onStyleChange).toHaveBeenCalledWith('hero-title', { wordSpacing: '2px' }, 'Style: Hero Title');
+    expect(host.textContent).toContain('Letter spacing');
+    expect(host.textContent).toContain('Word spacing');
+    expect(host.textContent).not.toContain('Tracking');
     expect(host.textContent).not.toContain('Opacity');
     expect(host.textContent).not.toContain('Padding');
   });
@@ -286,6 +312,10 @@ describe('ManualEditPanel', () => {
       ok: true,
       styles: { lineHeight: '49px' },
     });
+    expect(normalizeManualEditStyles({ wordSpacing: '-1.5' }, { layoutEnabled: true })).toEqual({
+      ok: true,
+      styles: { wordSpacing: '-1.5px' },
+    });
   });
 
   it('rejects invalid style values before host preview/persistence', () => {
@@ -297,6 +327,12 @@ describe('ManualEditPanel', () => {
       ok: false,
       error: 'Line height must be a positive number or px value.',
     });
+    expect(normalizeManualEditStyles({ wordSpacing: '1em' }, { layoutEnabled: true })).toEqual({
+      ok: false,
+      error: 'word spacing must be a number or px value.',
+    });
+    expect(normalizeManualEditStyles({ textTransform: 'full-width' }, { layoutEnabled: true }))
+      .toEqual({ ok: false, error: 'text transform has an unsupported value.' });
   });
 
   it('treats empty values as inline style clears', () => {