From 0ba0a1a2ec4d35c16f14a299c1af6da88ac53ca2 Mon Sep 17 00:00:00 2001
From: Florian <florian.aube@gmail.com>
Date: Thu, 30 Jul 2026 20:18:30 +0200
Subject: [PATCH 1/2] fix(guided-drawing): restore palette return state

---
 .../dialogs/pf-paint-by-number-dialog.ts      |  20 +++-
 .../dialogs/pf-paint-by-number-dialog.test.ts | 112 ++++++++++++++++++
 2 files changed, 128 insertions(+), 4 deletions(-)

diff --git a/src/components/dialogs/pf-paint-by-number-dialog.ts b/src/components/dialogs/pf-paint-by-number-dialog.ts
index 747534d..96811be 100644
--- a/src/components/dialogs/pf-paint-by-number-dialog.ts
+++ b/src/components/dialogs/pf-paint-by-number-dialog.ts
@@ -301,6 +301,7 @@ export class PFPaintByNumberDialog extends BaseComponent {
   @state() private guide: NumberedGuide | null = null;
   @state() private longSide = 24;
   @state() private maxColors = 8;
+  @state() private isAdvancedOpen = false;
   @state() private paletteSource: GuidedPaletteSource = 'generated';
   @state() private selectedPalette = GENERATED_PALETTE_VALUE;
   @state() private restrictedPalette: string[] | undefined;
@@ -366,16 +367,23 @@ export class PFPaintByNumberDialog extends BaseComponent {
   private renderGuidedSetup() {
     return html`
       <form id="guided-project-form" @submit=${this.createProject}>
-        <label class="file-field" for="guided-source-file">
-          <span class="field-label">Source image</span>
+        <div class="file-field">
+          <label class="field-label" for="guided-source-file">Source image</label>
           <input
             id="guided-source-file"
             type="file"
             accept="image/png,image/jpeg,image/webp"
             @change=${this.handleFileChange}
           >
+          ${this.sourceFile
+            ? html`
+                <span id="guided-source-filename" class="local-note">
+                  Selected file: ${this.sourceFile.name}
+                </span>
+              `
+            : null}
           <span class="local-note">Processed locally. The source image is not uploaded.</span>
-        </label>
+        </div>
 
         <fieldset>
           <legend>Guide preset</legend>
@@ -399,7 +407,7 @@ export class PFPaintByNumberDialog extends BaseComponent {
           </div>
         </fieldset>
 
-        <details>
+        <details .open=${this.isAdvancedOpen} @toggle=${this.handleAdvancedToggle}>
           <summary>Advanced settings</summary>
           <div class="advanced-fields">
             <label class="field" for="guided-long-side">
@@ -699,6 +707,10 @@ export class PFPaintByNumberDialog extends BaseComponent {
     this.schedulePreview();
   };
 
+  private handleAdvancedToggle = (event: Event) => {
+    this.isAdvancedOpen = (event.currentTarget as HTMLDetailsElement).open;
+  };
+
   private handlePaletteSelection = (event: Event) => {
     const value = (event.currentTarget as HTMLSelectElement).value;
     if (value === CREATE_PALETTE_VALUE) {
diff --git a/tests/components/dialogs/pf-paint-by-number-dialog.test.ts b/tests/components/dialogs/pf-paint-by-number-dialog.test.ts
index ee058bb..3b6a275 100644
--- a/tests/components/dialogs/pf-paint-by-number-dialog.test.ts
+++ b/tests/components/dialogs/pf-paint-by-number-dialog.test.ts
@@ -102,6 +102,43 @@ async function selectPalette(element: PFPaintByNumberDialog, value: string) {
   await settle(element);
 }
 
+async function enterPaletteCreationWithSetup(
+  element: PFPaintByNumberDialog,
+  fileName: string,
+) {
+  chooseFile(element, new File(['pixels'], fileName, { type: 'image/png' }));
+  await Promise.resolve();
+  await vi.runAllTimersAsync();
+
+  const advanced = element.shadowRoot?.querySelector<HTMLDetailsElement>('details');
+  if (!advanced) throw new Error('Advanced settings are unavailable');
+  advanced.open = true;
+  advanced.dispatchEvent(new Event('toggle'));
+  await settle(element);
+
+  const longSide = element.shadowRoot?.querySelector<HTMLInputElement>('#guided-long-side');
+  if (longSide) {
+    longSide.value = '32';
+    longSide.dispatchEvent(new Event('change'));
+  }
+  const mapping = element.shadowRoot?.querySelector<HTMLSelectElement>('#guided-mapping');
+  if (mapping) {
+    mapping.value = 'luminance';
+    mapping.dispatchEvent(new Event('change'));
+  }
+  element.shadowRoot?.querySelector<HTMLInputElement>('#guided-simplify')?.click();
+  await selectPalette(element, 'preset:pico8');
+  await vi.runAllTimersAsync();
+  await settle(element);
+
+  const previewCalls = generateNumberedGuideMock.mock.calls.length;
+  const statusText = element.shadowRoot
+    ?.querySelector('#guided-project-form > .status')
+    ?.textContent;
+  await selectPalette(element, 'create');
+  return { previewCalls, statusText };
+}
+
 function customPalette(id: string, name: string, colors: string[]): CustomPalette {
   return {
     id,
@@ -232,6 +269,81 @@ describe('pf-paint-by-number-dialog', () => {
     expect(status?.textContent).toContain(paletteError || paletteMessage);
   });
 
+  it('restores visible setup context after cancelling palette creation', async () => {
+    const element = await createDialog();
+    expect(element.shadowRoot?.querySelector<HTMLDetailsElement>('details')?.open).toBe(false);
+    const setup = await enterPaletteCreationWithSetup(element, 'cancel-source.png');
+
+    const cancel = Array.from(element.shadowRoot?.querySelectorAll('button') ?? [])
+      .find((button) => button.textContent?.trim() === 'Cancel palette');
+    cancel?.click();
+    await settle(element);
+
+    const select = element.shadowRoot?.querySelector<HTMLSelectElement>(
+      '#guided-palette-source',
+    );
+    expect(element.shadowRoot?.querySelector('#guided-source-filename')?.textContent)
+      .toContain('cancel-source.png');
+    expect(element.shadowRoot?.querySelector<HTMLDetailsElement>('details')?.open).toBe(true);
+    expect(element.shadowRoot?.querySelector<HTMLInputElement>('#guided-long-side')?.value)
+      .toBe('32');
+    expect(element.shadowRoot?.querySelector<HTMLSelectElement>('#guided-mapping')?.value)
+      .toBe('luminance');
+    expect(element.shadowRoot?.querySelector<HTMLInputElement>('#guided-simplify')?.checked)
+      .toBe(false);
+    expect(select?.value).toBe('preset:pico8');
+    expect(element.shadowRoot?.querySelector('#source-preview')).toBeTruthy();
+    expect(element.shadowRoot?.querySelector('#guide-preview')).toBeTruthy();
+    expect(element.shadowRoot?.querySelector('#guided-project-form > .status')?.textContent)
+      .toBe(setup.statusText);
+    expect(generateNumberedGuideMock).toHaveBeenCalledTimes(setup.previewCalls);
+    expect(element.shadowRoot?.activeElement).toBe(select);
+  });
+
+  it('restores visible setup context after saving a palette', async () => {
+    const created = customPalette('new-palette', 'Saved palette', ['#123456']);
+    saveAsNewPaletteMock.mockResolvedValueOnce(created);
+    const element = await createDialog();
+    const setup = await enterPaletteCreationWithSetup(element, 'save-source.png');
+
+    const name = element.shadowRoot?.querySelector<HTMLInputElement>('#guided-palette-name');
+    if (name) {
+      name.value = 'Saved palette';
+      name.dispatchEvent(new Event('input'));
+    }
+    element.shadowRoot
+      ?.querySelector<HTMLButtonElement>('button[form="palette-creation-form"]')
+      ?.click();
+    await settle(element);
+    await vi.runAllTimersAsync();
+    await settle(element);
+
+    const select = element.shadowRoot?.querySelector<HTMLSelectElement>(
+      '#guided-palette-source',
+    );
+    expect(element.shadowRoot?.querySelector('#guided-source-filename')?.textContent)
+      .toContain('save-source.png');
+    expect(element.shadowRoot?.querySelector<HTMLDetailsElement>('details')?.open).toBe(true);
+    expect(element.shadowRoot?.querySelector<HTMLInputElement>('#guided-long-side')?.value)
+      .toBe('32');
+    expect(element.shadowRoot?.querySelector<HTMLSelectElement>('#guided-mapping')?.value)
+      .toBe('luminance');
+    expect(element.shadowRoot?.querySelector<HTMLInputElement>('#guided-simplify')?.checked)
+      .toBe(false);
+    expect(select?.value).toBe('custom:new-palette');
+    expect(element.shadowRoot?.querySelector('#source-preview')).toBeTruthy();
+    expect(element.shadowRoot?.querySelector('#guide-preview')).toBeTruthy();
+    expect(element.shadowRoot?.querySelector('#guided-project-form > .status')?.textContent)
+      .toBe(setup.statusText);
+    expect(generateNumberedGuideMock).toHaveBeenLastCalledWith(sampledImage, {
+      maxColors: undefined,
+      palette: ['#123456'],
+      mapping: 'luminance',
+      simplifyIsolatedPixels: false,
+    });
+    expect(element.shadowRoot?.activeElement).toBe(select);
+  });
+
   it('selects preset and saved palettes without reading an active project palette', async () => {
     const activeProjectPaletteSpy = vi.spyOn(projectContext, 'getActiveProjectContext');
     const saved = customPalette('night', 'Night colors', ['#101020', '#f0f0ff']);

From 7a794d5e4cf9e0eb1bcd1655ea894e86aa405c57 Mon Sep 17 00:00:00 2001
From: Florian <florian.aube@gmail.com>
Date: Thu, 30 Jul 2026 20:21:17 +0200
Subject: [PATCH 2/2] test(guided-drawing): simplify return-state coverage

---
 .../dialogs/pf-paint-by-number-dialog.test.ts | 135 +++++++++---------
 1 file changed, 67 insertions(+), 68 deletions(-)

diff --git a/tests/components/dialogs/pf-paint-by-number-dialog.test.ts b/tests/components/dialogs/pf-paint-by-number-dialog.test.ts
index 3b6a275..16847ed 100644
--- a/tests/components/dialogs/pf-paint-by-number-dialog.test.ts
+++ b/tests/components/dialogs/pf-paint-by-number-dialog.test.ts
@@ -93,15 +93,35 @@ function chooseFile(element: PFPaintByNumberDialog, file: File) {
 }
 
 async function selectPalette(element: PFPaintByNumberDialog, value: string) {
-  const select = element.shadowRoot?.querySelector<HTMLSelectElement>(
-    '#guided-palette-source',
-  );
-  if (!select) throw new Error('Palette select is unavailable');
+  const select = getElement<HTMLSelectElement>(element, '#guided-palette-source');
   select.value = value;
   select.dispatchEvent(new Event('change'));
   await settle(element);
 }
 
+function getElement<T extends Element>(
+  element: PFPaintByNumberDialog,
+  selector: string,
+): T {
+  const match = element.shadowRoot?.querySelector<T>(selector);
+  if (!match) throw new Error(`Expected ${selector}`);
+  return match;
+}
+
+function getGuidedSetup(element: PFPaintByNumberDialog) {
+  return {
+    advanced: getElement<HTMLDetailsElement>(element, 'details'),
+    filename: getElement<HTMLElement>(element, '#guided-source-filename'),
+    guidePreview: getElement(element, '#guide-preview'),
+    longSide: getElement<HTMLInputElement>(element, '#guided-long-side'),
+    mapping: getElement<HTMLSelectElement>(element, '#guided-mapping'),
+    select: getElement<HTMLSelectElement>(element, '#guided-palette-source'),
+    simplify: getElement<HTMLInputElement>(element, '#guided-simplify'),
+    sourcePreview: getElement(element, '#source-preview'),
+    status: getElement(element, '#guided-project-form > .status'),
+  };
+}
+
 async function enterPaletteCreationWithSetup(
   element: PFPaintByNumberDialog,
   fileName: string,
@@ -110,31 +130,24 @@ async function enterPaletteCreationWithSetup(
   await Promise.resolve();
   await vi.runAllTimersAsync();
 
-  const advanced = element.shadowRoot?.querySelector<HTMLDetailsElement>('details');
-  if (!advanced) throw new Error('Advanced settings are unavailable');
+  const advanced = getElement<HTMLDetailsElement>(element, 'details');
   advanced.open = true;
   advanced.dispatchEvent(new Event('toggle'));
   await settle(element);
 
-  const longSide = element.shadowRoot?.querySelector<HTMLInputElement>('#guided-long-side');
-  if (longSide) {
-    longSide.value = '32';
-    longSide.dispatchEvent(new Event('change'));
-  }
-  const mapping = element.shadowRoot?.querySelector<HTMLSelectElement>('#guided-mapping');
-  if (mapping) {
-    mapping.value = 'luminance';
-    mapping.dispatchEvent(new Event('change'));
-  }
-  element.shadowRoot?.querySelector<HTMLInputElement>('#guided-simplify')?.click();
+  const longSide = getElement<HTMLInputElement>(element, '#guided-long-side');
+  longSide.value = '32';
+  longSide.dispatchEvent(new Event('change'));
+  const mapping = getElement<HTMLSelectElement>(element, '#guided-mapping');
+  mapping.value = 'luminance';
+  mapping.dispatchEvent(new Event('change'));
+  getElement<HTMLInputElement>(element, '#guided-simplify').click();
   await selectPalette(element, 'preset:pico8');
   await vi.runAllTimersAsync();
   await settle(element);
 
   const previewCalls = generateNumberedGuideMock.mock.calls.length;
-  const statusText = element.shadowRoot
-    ?.querySelector('#guided-project-form > .status')
-    ?.textContent;
+  const statusText = getElement(element, '#guided-project-form > .status').textContent;
   await selectPalette(element, 'create');
   return { previewCalls, statusText };
 }
@@ -271,33 +284,27 @@ describe('pf-paint-by-number-dialog', () => {
 
   it('restores visible setup context after cancelling palette creation', async () => {
     const element = await createDialog();
-    expect(element.shadowRoot?.querySelector<HTMLDetailsElement>('details')?.open).toBe(false);
+    expect(getElement<HTMLDetailsElement>(element, 'details').open).toBe(false);
     const setup = await enterPaletteCreationWithSetup(element, 'cancel-source.png');
 
-    const cancel = Array.from(element.shadowRoot?.querySelectorAll('button') ?? [])
-      .find((button) => button.textContent?.trim() === 'Cancel palette');
-    cancel?.click();
+    getElement<HTMLButtonElement>(
+      element,
+      'div[slot="actions"] button.secondary',
+    ).click();
     await settle(element);
 
-    const select = element.shadowRoot?.querySelector<HTMLSelectElement>(
-      '#guided-palette-source',
-    );
-    expect(element.shadowRoot?.querySelector('#guided-source-filename')?.textContent)
-      .toContain('cancel-source.png');
-    expect(element.shadowRoot?.querySelector<HTMLDetailsElement>('details')?.open).toBe(true);
-    expect(element.shadowRoot?.querySelector<HTMLInputElement>('#guided-long-side')?.value)
-      .toBe('32');
-    expect(element.shadowRoot?.querySelector<HTMLSelectElement>('#guided-mapping')?.value)
-      .toBe('luminance');
-    expect(element.shadowRoot?.querySelector<HTMLInputElement>('#guided-simplify')?.checked)
-      .toBe(false);
-    expect(select?.value).toBe('preset:pico8');
-    expect(element.shadowRoot?.querySelector('#source-preview')).toBeTruthy();
-    expect(element.shadowRoot?.querySelector('#guide-preview')).toBeTruthy();
-    expect(element.shadowRoot?.querySelector('#guided-project-form > .status')?.textContent)
-      .toBe(setup.statusText);
+    const restored = getGuidedSetup(element);
+    expect(restored.filename.textContent).toContain('cancel-source.png');
+    expect(restored.advanced.open).toBe(true);
+    expect(restored.longSide.value).toBe('32');
+    expect(restored.mapping.value).toBe('luminance');
+    expect(restored.simplify.checked).toBe(false);
+    expect(restored.select.value).toBe('preset:pico8');
+    expect(restored.sourcePreview).toBeTruthy();
+    expect(restored.guidePreview).toBeTruthy();
+    expect(restored.status.textContent).toBe(setup.statusText);
     expect(generateNumberedGuideMock).toHaveBeenCalledTimes(setup.previewCalls);
-    expect(element.shadowRoot?.activeElement).toBe(select);
+    expect(element.shadowRoot?.activeElement).toBe(restored.select);
   });
 
   it('restores visible setup context after saving a palette', async () => {
@@ -306,42 +313,34 @@ describe('pf-paint-by-number-dialog', () => {
     const element = await createDialog();
     const setup = await enterPaletteCreationWithSetup(element, 'save-source.png');
 
-    const name = element.shadowRoot?.querySelector<HTMLInputElement>('#guided-palette-name');
-    if (name) {
-      name.value = 'Saved palette';
-      name.dispatchEvent(new Event('input'));
-    }
-    element.shadowRoot
-      ?.querySelector<HTMLButtonElement>('button[form="palette-creation-form"]')
-      ?.click();
+    const name = getElement<HTMLInputElement>(element, '#guided-palette-name');
+    name.value = 'Saved palette';
+    name.dispatchEvent(new Event('input'));
+    getElement<HTMLButtonElement>(
+      element,
+      'button[form="palette-creation-form"]',
+    ).click();
     await settle(element);
     await vi.runAllTimersAsync();
     await settle(element);
 
-    const select = element.shadowRoot?.querySelector<HTMLSelectElement>(
-      '#guided-palette-source',
-    );
-    expect(element.shadowRoot?.querySelector('#guided-source-filename')?.textContent)
-      .toContain('save-source.png');
-    expect(element.shadowRoot?.querySelector<HTMLDetailsElement>('details')?.open).toBe(true);
-    expect(element.shadowRoot?.querySelector<HTMLInputElement>('#guided-long-side')?.value)
-      .toBe('32');
-    expect(element.shadowRoot?.querySelector<HTMLSelectElement>('#guided-mapping')?.value)
-      .toBe('luminance');
-    expect(element.shadowRoot?.querySelector<HTMLInputElement>('#guided-simplify')?.checked)
-      .toBe(false);
-    expect(select?.value).toBe('custom:new-palette');
-    expect(element.shadowRoot?.querySelector('#source-preview')).toBeTruthy();
-    expect(element.shadowRoot?.querySelector('#guide-preview')).toBeTruthy();
-    expect(element.shadowRoot?.querySelector('#guided-project-form > .status')?.textContent)
-      .toBe(setup.statusText);
+    const restored = getGuidedSetup(element);
+    expect(restored.filename.textContent).toContain('save-source.png');
+    expect(restored.advanced.open).toBe(true);
+    expect(restored.longSide.value).toBe('32');
+    expect(restored.mapping.value).toBe('luminance');
+    expect(restored.simplify.checked).toBe(false);
+    expect(restored.select.value).toBe('custom:new-palette');
+    expect(restored.sourcePreview).toBeTruthy();
+    expect(restored.guidePreview).toBeTruthy();
+    expect(restored.status.textContent).toBe(setup.statusText);
     expect(generateNumberedGuideMock).toHaveBeenLastCalledWith(sampledImage, {
       maxColors: undefined,
       palette: ['#123456'],
       mapping: 'luminance',
       simplifyIsolatedPixels: false,
     });
-    expect(element.shadowRoot?.activeElement).toBe(select);
+    expect(element.shadowRoot?.activeElement).toBe(restored.select);
   });
 
   it('selects preset and saved palettes without reading an active project palette', async () => {