fix(toolbar): the temporary-session chip is drawn as the menu buttons beside it (v0.17.2)

.changes/session-chip-size.json

@@ -0,0 +1 @@
+{ "type": "user-facing", "releaseNoteId": "release:0.17.2" }

e2e/storage-sessions.spec.ts

@@ -155,6 +155,80 @@ test.describe('switching sessions', () => {
     expect(await storedWorkNodes(page)).toBe(2)
   })
 
+  // the chip is a control in the toolbar row: drawn as the menu button beside
+  // it (28 px, the 8 px control radius, 12 px text, its ink on its raised
+  // face), centred on the same line, one line of text, no icon; the warning
+  // border still marks the session, and its name, keyboard path and focus are
+  // those of a menu button
+  test('the chip is drawn as the menu buttons beside it, keeps its warning border and name, and works from the keyboard', async ({ page }) => {
+    await openApp(page)
+    await openStorageArea(page)
+    await confirmAction(page, 'to-temporary')
+    await expect(chip(page)).toBeVisible()
+    const m = await page.evaluate(() => {
+      const el = document.querySelector('.toolbar [data-session-chip="temporary"]')!
+      const btn = document.querySelector('.toolbar__actions-core > .menu > .btn')!
+      const c = el.getBoundingClientRect()
+      const b = btn.getBoundingClientRect()
+      const cs = getComputedStyle(el)
+      const probe = document.createElement('span')
+      probe.style.color = 'var(--warning)'
+      document.body.append(probe)
+      const warning = getComputedStyle(probe).color
+      probe.remove()
+      const range = document.createRange()
+      range.selectNodeContents(el)
+      return {
+        h: c.height,
+        btnH: b.height,
+        offCentre: Math.abs(c.top + c.height / 2 - (b.top + b.height / 2)),
+        radius: cs.borderTopLeftRadius,
+        btnRadius: getComputedStyle(btn).borderTopLeftRadius,
+        fontSize: cs.fontSize,
+        btnFontSize: getComputedStyle(btn).fontSize,
+        border: cs.borderTopColor,
+        warning,
+        color: cs.color,
+        btnColor: getComputedStyle(btn).color,
+        background: cs.backgroundColor,
+        btnBackground: getComputedStyle(btn).backgroundColor,
+        btnBorder: getComputedStyle(btn).borderTopColor,
+        lines: new Set([...range.getClientRects()].map((r) => Math.round(r.top))).size,
+        icons: el.querySelectorAll('svg, img, .icon').length,
+        clipped: el.scrollWidth > el.clientWidth,
+      }
+    })
+    expect(m).toMatchObject({ h: 28, btnH: 28, radius: '8px', btnRadius: '8px', fontSize: '12px', btnFontSize: '12px', lines: 1, icons: 0, clipped: false })
+    expect(m.offCentre).toBeLessThan(0.5)
+    expect(m.color).toBe(m.btnColor)
+    expect(m.background).toBe(m.btnBackground)
+    expect(m.border).toBe(m.warning)
+    expect(m.border).not.toBe(m.btnBorder) // the session still shows
+    await expect(chip(page)).toHaveAccessibleName('Temporary session')
+    // keyboard: Enter opens, ArrowDown enters the menu, Escape closes it and focus comes back
+    await chip(page).focus()
+    await page.keyboard.press('Enter')
+    await expect(chip(page)).toHaveAttribute('aria-expanded', 'true')
+    await page.keyboard.press('ArrowDown')
+    await expect(page.locator('.session-chip__pop').getByRole('menuitem').first()).toBeFocused()
+    await page.keyboard.press('Escape')
+    await expect(page.locator('.session-chip__pop')).toHaveCount(0)
+    await expect(chip(page)).toBeFocused()
+    // the menu buttons' focus: the boundary takes the focus colour, with the halo
+    const focus = await chip(page).evaluate((el) => {
+      const probe = document.createElement('span')
+      probe.style.color = 'var(--line-focus)'
+      document.body.append(probe)
+      const lineFocus = getComputedStyle(probe).color
+      probe.remove()
+      const cs = getComputedStyle(el)
+      return { visible: el.matches(':focus-visible'), border: cs.borderTopColor, lineFocus, halo: cs.boxShadow }
+    })
+    expect(focus.visible).toBe(true)
+    expect(focus.border).toBe(focus.lineFocus)
+    expect(focus.halo).toMatch(/0px 0px 0px 3px/)
+  })
+
   test('a temporary session with work warns before the page is closed; a personal browser does not', async ({ page, context }) => {
     // personal: no dialog, the page closes
     const p2 = await context.newPage()

e2e/whats-new.spec.ts

@@ -239,7 +239,7 @@ test.describe('closing the notice and opening the panel are different things', (
         expect(text).not.toContain('text unavailable')
       }
     }
-    expect(RELEASE_NOTES.map((n) => n.version)).toEqual(['0.17.1', '0.17.0', '0.16.0', '0.15.3', '0.15.2', '0.15.1', '0.15.0', '0.14.0'])
+    expect(RELEASE_NOTES.map((n) => n.version)).toEqual(['0.17.2', '0.17.1', '0.17.0', '0.16.0', '0.15.3', '0.15.2', '0.15.1', '0.15.0', '0.14.0'])
 
     await page.keyboard.press('Escape')
     await expect(panel).toHaveCount(0)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "loop-studio",
   "private": true,
-  "version": "0.17.1",
+  "version": "0.17.2",
   "type": "module",
   "engines": {
     "node": ">=22.12.0"

src/i18n/itCopy.test.ts

@@ -199,15 +199,15 @@ const IDENTICAL_TO_EN: ReadonlyArray<readonly [string, string]> = [
 // ------------------------------------------------------------------ shape
 describe('it copy — the surfaces exist and are complete', () => {
   it('has exactly the base key set', () => {
-    expect(KEYS).toHaveLength(981) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines)
+    expect(KEYS).toHaveLength(984) // issue #301 decision 1: +4 (share.unavailable and the three 0.17.1 release-note lines); the session chip: +3 (the three 0.17.2 release-note lines)
     expect(Object.keys(IT).sort()).toEqual([...KEYS].sort())
   })
 
   it('covers all four runtime surfaces, at the measured sizes', () => {
     const per: Record<string, number> = {}
     for (const r of RUNTIME) per[r.surface.split('/')[0]!] = (per[r.surface.split('/')[0]!] ?? 0) + 1
-    expect(per).toEqual({ catalog: 981, template: 196, frame: 7, module: 19 })
-    expect(RUNTIME).toHaveLength(1203)
+    expect(per).toEqual({ catalog: 984, template: 196, frame: 7, module: 19 })
+    expect(RUNTIME).toHaveLength(1206)
   })
 
   it('EVERY row has a non-empty ENGLISH side — the vacuity guard', () => {

src/i18n/locales/ar/ui.ts

@@ -559,6 +559,9 @@ const ui = {
   'whatsNew.v0171.compression': 'تستخدم روابط المشاركة الآن الضغط المدمج في المتصفح.',
   'whatsNew.v0171.unavailable': 'إذا لم تكن هذه الميزة متاحة، يُبقي Loop Studio المخطط الحالي كما هو ويوضح أن المطلوب متصفح حديث.',
   'whatsNew.v0171.compatible': 'تظل روابط المشاركة الحالية متوافقة، ولم يتغير تنسيق الرابط.',
+  'whatsNew.v0172.size': 'أصبح زر الجلسة المؤقتة أعلى النافذة بنفس ارتفاع أزرار القوائم المجاورة له وبزوايا مستديرة مثلها.',
+  'whatsNew.v0172.text': 'صار نص الزر أكبر وأسهل في القراءة.',
+  'whatsNew.v0172.same': 'يحتفظ الزر بإطاره البرتقالي ويفتح القائمة نفسها، ولم تتغير طريقة عمل الجلسة المؤقتة.',
 } as const
 
 export default ui

src/i18n/locales/de/ui.ts

@@ -594,6 +594,9 @@ const ui = {
   'whatsNew.v0171.compression': 'Links zum Teilen nutzen jetzt die eingebaute Komprimierung des Browsers.',
   'whatsNew.v0171.unavailable': 'Ist diese Funktion nicht verfügbar, lässt Loop Studio das aktuelle Diagramm unverändert und weist darauf hin, dass ein aktueller Browser nötig ist.',
   'whatsNew.v0171.compatible': 'Bestehende Links zum Teilen bleiben kompatibel; das Linkformat hat sich nicht geändert.',
+  'whatsNew.v0172.size': 'Die Schaltfläche für die temporäre Sitzung oben im Fenster hat jetzt dieselbe Höhe und dieselben abgerundeten Ecken wie die Menüschaltflächen daneben.',
+  'whatsNew.v0172.text': 'Ihre Beschriftung ist größer und besser lesbar.',
+  'whatsNew.v0172.same': 'Sie behält ihren orangefarbenen Rahmen und öffnet dasselbe Menü; an der Funktionsweise einer temporären Sitzung hat sich nichts geändert.',
 } satisfies Record<UiKey, string>
 
 export default ui

src/i18n/locales/en/ui.ts

@@ -503,6 +503,9 @@ const ui = {
   'whatsNew.v0171.compression': 'Share links now use the browser’s built-in compression.',
   'whatsNew.v0171.unavailable': 'If that feature is unavailable, Loop Studio keeps your current diagram unchanged and explains that a current browser is required.',
   'whatsNew.v0171.compatible': 'Existing share links remain compatible; the link format has not changed.',
+  'whatsNew.v0172.size': 'The Temporary session button at the top of the window now has the same height and rounded corners as the menu buttons beside it.',
+  'whatsNew.v0172.text': 'Its label is larger and easier to read.',
+  'whatsNew.v0172.same': 'It keeps its orange border and opens the same menu; how a temporary session works has not changed.',
 } as const
 
 export type UiKey = keyof typeof ui

src/i18n/locales/es-419/ui.ts

@@ -517,6 +517,9 @@ const ui = {
   'whatsNew.v0171.compression': 'Los enlaces para compartir ahora usan la compresión integrada del navegador.',
   'whatsNew.v0171.unavailable': 'Si esa función no está disponible, Loop Studio deja el diagrama actual sin cambios y explica que se necesita un navegador actual.',
   'whatsNew.v0171.compatible': 'Los enlaces para compartir existentes siguen siendo compatibles; el formato del enlace no ha cambiado.',
+  'whatsNew.v0172.size': 'El botón de sesión temporal, en la parte superior de la ventana, ahora tiene la misma altura y las mismas esquinas redondeadas que los botones de menú que lo acompañan.',
+  'whatsNew.v0172.text': 'Su texto es más grande y más fácil de leer.',
+  'whatsNew.v0172.same': 'Conserva su borde naranja y abre el mismo menú; el funcionamiento de una sesión temporal no ha cambiado.',
 } as const
 
 export type UiKey = keyof typeof ui

src/i18n/locales/es-ES/ui.ts

@@ -531,6 +531,9 @@ const ui = {
   'whatsNew.v0171.compression': 'Los enlaces para compartir ahora usan la compresión integrada del navegador.',
   'whatsNew.v0171.unavailable': 'Si esa función no está disponible, Loop Studio deja el diagrama actual sin cambios y explica que se necesita un navegador actual.',
   'whatsNew.v0171.compatible': 'Los enlaces para compartir existentes siguen siendo compatibles; el formato del enlace no ha cambiado.',
+  'whatsNew.v0172.size': 'El botón de sesión temporal, en la parte superior de la ventana, ahora tiene la misma altura y las mismas esquinas redondeadas que los botones de menú que lo acompañan.',
+  'whatsNew.v0172.text': 'Su texto es más grande y más fácil de leer.',
+  'whatsNew.v0172.same': 'Conserva su borde naranja y abre el mismo menú; el funcionamiento de una sesión temporal no ha cambiado.',
 } as const
 
 export type UiKey = keyof typeof ui

src/i18n/locales/fr/ui.ts

@@ -588,6 +588,9 @@ const ui = {
   'whatsNew.v0171.compression': 'Les liens de partage utilisent désormais la compression intégrée du navigateur.',
   'whatsNew.v0171.unavailable': 'Si cette fonction n’est pas disponible, Loop Studio laisse le diagramme actuel inchangé et explique qu’un navigateur récent est nécessaire.',
   'whatsNew.v0171.compatible': 'Les liens de partage existants restent compatibles et leur format n’a pas changé.',
+  'whatsNew.v0172.size': 'Le bouton Session temporaire, en haut de la fenêtre, a désormais la même hauteur et les mêmes coins arrondis que les boutons de menu voisins.',
+  'whatsNew.v0172.text': 'Son libellé est plus grand et plus facile à lire.',
+  'whatsNew.v0172.same': 'Il garde sa bordure orange et ouvre le même menu, et le fonctionnement d’une session temporaire n’a pas changé.',
 } satisfies Record<UiKey, string>
 
 export default ui

src/i18n/locales/it/ui.ts

@@ -533,6 +533,9 @@ const ui = {
   'whatsNew.v0171.compression': 'I link di condivisione ora usano la compressione integrata del browser.',
   'whatsNew.v0171.unavailable': 'Se questa funzione non è disponibile, Loop Studio lascia invariato il diagramma attuale e spiega che serve un browser aggiornato.',
   'whatsNew.v0171.compatible': 'I link di condivisione esistenti restano compatibili; il formato dei link non è cambiato.',
+  'whatsNew.v0172.size': 'Il pulsante della sessione temporanea, in alto nella finestra, ha ora la stessa altezza e gli stessi angoli arrotondati dei pulsanti di menu accanto.',
+  'whatsNew.v0172.text': 'La sua scritta è più grande e più facile da leggere.',
+  'whatsNew.v0172.same': 'Mantiene il bordo arancione e apre lo stesso menu; il funzionamento di una sessione temporanea non è cambiato.',
 } satisfies Record<UiKey, string>
 
 export default ui

src/i18n/locales/ja/ui.ts

@@ -538,6 +538,9 @@ const ui = {
   'whatsNew.v0171.compression': '共有リンクはブラウザーに組み込まれた圧縮機能を使うようになりました。',
   'whatsNew.v0171.unavailable': 'この機能を使えない場合は、現在のダイアグラムをそのまま保ち、最新のブラウザーが必要であることを案内します。',
   'whatsNew.v0171.compatible': '既存の共有リンクとの互換性は保たれ、リンクの形式も変わっていません。',
+  'whatsNew.v0172.size': '画面上部の一時セッションのボタンが、隣のメニューボタンと同じ高さと角の形になりました。',
+  'whatsNew.v0172.text': 'ボタンの文字が大きくなり、読みやすくなりました。',
+  'whatsNew.v0172.same': 'オレンジ色の枠と開くメニューはそのままで、一時セッションの動作も変わっていません。',
 } satisfies Record<UiKey, string>
 
 export default ui

src/i18n/locales/ko/ui.ts

@@ -506,6 +506,9 @@ const ui = {
   'whatsNew.v0171.compression': '공유 링크는 이제 브라우저의 기본 압축 기능을 사용합니다.',
   'whatsNew.v0171.unavailable': '이 기능을 사용할 수 없으면 현재 다이어그램을 그대로 유지하고 최신 브라우저가 필요하다고 안내합니다.',
   'whatsNew.v0171.compatible': '기존 공유 링크와의 호환성은 유지되며 링크 형식도 바뀌지 않았습니다.',
+  'whatsNew.v0172.size': '화면 위쪽의 임시 세션 버튼이 옆의 메뉴 버튼과 같은 높이와 모서리 모양이 되었습니다.',
+  'whatsNew.v0172.text': '버튼 글자가 커져 더 읽기 쉬워졌습니다.',
+  'whatsNew.v0172.same': '주황색 테두리와 버튼을 누르면 열리는 메뉴는 그대로이며, 임시 세션이 작동하는 방식도 바뀌지 않았습니다.',
 } satisfies Record<UiKey, string>
 
 export default ui

src/i18n/locales/nl/ui.ts

@@ -514,6 +514,9 @@ const ui = {
   'whatsNew.v0171.compression': 'Deellinks gebruiken nu de ingebouwde compressie van de browser.',
   'whatsNew.v0171.unavailable': 'Is die functie niet beschikbaar, dan laat Loop Studio het huidige diagram ongewijzigd en legt uit dat een actuele browser nodig is.',
   'whatsNew.v0171.compatible': 'Bestaande deellinks blijven compatibel; de opbouw van de link is niet veranderd.',
+  'whatsNew.v0172.size': 'De knop voor de tijdelijke sessie bovenaan het venster heeft nu dezelfde hoogte en dezelfde afgeronde hoeken als de menuknoppen ernaast.',
+  'whatsNew.v0172.text': 'Het opschrift is groter en beter leesbaar.',
+  'whatsNew.v0172.same': 'De knop houdt zijn oranje rand en opent hetzelfde menu; hoe een tijdelijke sessie werkt, is niet veranderd.',
 } as const
 
 export default ui

src/i18n/locales/pt-BR/ui.ts

@@ -519,6 +519,9 @@ const ui = {
   'whatsNew.v0171.compression': 'Os links de compartilhamento agora usam a compressão integrada do navegador.',
   'whatsNew.v0171.unavailable': 'Se esse recurso não estiver disponível, o Loop Studio mantém o diagrama atual sem alterações e explica que é preciso um navegador atual.',
   'whatsNew.v0171.compatible': 'Os links de compartilhamento existentes continuam compatíveis; o formato do link não mudou.',
+  'whatsNew.v0172.size': 'O botão de sessão temporária, no topo da janela, agora tem a mesma altura e os mesmos cantos arredondados que os botões de menu ao lado.',
+  'whatsNew.v0172.text': 'O texto do botão está maior e mais fácil de ler.',
+  'whatsNew.v0172.same': 'Ele mantém a borda laranja e abre o mesmo menu; o funcionamento de uma sessão temporária não mudou.',
 } as const
 
 export type UiKey = keyof typeof ui

src/i18n/locales/pt-PT/ui.ts

@@ -533,6 +533,9 @@ const ui = {
   'whatsNew.v0171.compression': 'As ligações de partilha passam a usar a compressão integrada do navegador.',
   'whatsNew.v0171.unavailable': 'Se essa funcionalidade não estiver disponível, o Loop Studio mantém o diagrama atual sem alterações e explica que é necessário um navegador atual.',
   'whatsNew.v0171.compatible': 'As ligações de partilha existentes continuam compatíveis; o formato da ligação não mudou.',
+  'whatsNew.v0172.size': 'O botão de sessão temporária, no topo da janela, tem agora a mesma altura e os mesmos cantos arredondados que os botões de menu ao lado.',
+  'whatsNew.v0172.text': 'O texto do botão está maior e mais fácil de ler.',
+  'whatsNew.v0172.same': 'Mantém o contorno cor de laranja e abre o mesmo menu; o funcionamento de uma sessão temporária não mudou.',
 } as const
 
 export type UiKey = keyof typeof ui

src/i18n/locales/ru/ui.ts

@@ -587,6 +587,9 @@ const ui = {
   'whatsNew.v0171.compression': 'Ссылки для доступа теперь используют встроенное сжатие браузера.',
   'whatsNew.v0171.unavailable': 'Если эта функция недоступна, Loop Studio оставляет текущую диаграмму без изменений и сообщает, что нужен современный браузер.',
   'whatsNew.v0171.compatible': 'Существующие ссылки для доступа остаются совместимыми, формат ссылки не изменился.',
+  'whatsNew.v0172.size': 'Кнопка временного сеанса в верхней части окна теперь такой же высоты и с такими же скруглёнными углами, как соседние кнопки меню.',
+  'whatsNew.v0172.text': 'Надпись на ней стала крупнее и легче читается.',
+  'whatsNew.v0172.same': 'Оранжевая рамка и открывающееся меню остались прежними; работа временного сеанса не изменилась.',
 } as const
 
 export type UiKey = keyof typeof ui

src/i18n/locales/th/ui.ts

@@ -579,6 +579,9 @@ const ui = {
   'whatsNew.v0171.compression': 'ลิงก์แชร์ใช้การบีบอัดที่มีในเบราว์เซอร์แล้ว',
   'whatsNew.v0171.unavailable': 'หากใช้ฟีเจอร์นี้ไม่ได้ ไดอะแกรมปัจจุบันจะยังคงเหมือนเดิม และจะแจ้งว่าต้องใช้เบราว์เซอร์รุ่นปัจจุบัน',
   'whatsNew.v0171.compatible': 'ลิงก์แชร์ที่มีอยู่ยังใช้งานร่วมกันได้ และรูปแบบลิงก์ไม่ได้เปลี่ยน',
+  'whatsNew.v0172.size': 'ปุ่มเซสชันชั่วคราวที่ด้านบนของหน้าต่างตอนนี้มีความสูงและมุมโค้งเท่ากับปุ่มเมนูที่อยู่ข้าง ๆ',
+  'whatsNew.v0172.text': 'ข้อความบนปุ่มใหญ่ขึ้นและอ่านง่ายขึ้น',
+  'whatsNew.v0172.same': 'ปุ่มยังคงมีขอบสีส้มและเปิดเมนูเดิม ส่วนการทำงานของเซสชันชั่วคราวไม่ได้เปลี่ยน',
 } as const
 
 export type UiKey = keyof typeof ui