@owlmeans/web-panel 0.1.18-rc.9 → 0.1.18

package/src/scheme/scheme.ts

@@ -0,0 +1,66 @@
+/**
+ * The colour-scheme choice, with no React and no framework code: a build script running in Node
+ * imports this module to inline the head bootstrap, and it must not drag a component tree in.
+ *
+ * The contract is TWO classes on the document element. `dark` means the visitor chose dark,
+ * `light` that they chose light, and neither that they chose nothing — the page follows the
+ * operating system. `light` has to exist as a class of its own: without it, a visitor who picks
+ * light on a system that prefers dark has no way to say so to a stylesheet that paints dark under
+ * `prefers-color-scheme: dark`.
+ */
+
+import { COLOR_SCHEME_EVENT, COLOR_SCHEME_KEY } from './consts.js'
+import type { ColorSchemeChoice, ColorSchemeHelper } from './types.js'
+
+export const createColorSchemeHelper = (): ColorSchemeHelper => {
+  const isChoice = (value: unknown): value is ColorSchemeChoice => value === 'light' || value === 'dark'
+
+  const readColorScheme = (): ColorSchemeChoice | null => {
+    try {
+      const value = globalThis.localStorage?.getItem(COLOR_SCHEME_KEY)
+
+      return isChoice(value) ? value : null
+    } catch {
+      return null
+    }
+  }
+
+  const setColorSchemeClass = (choice: ColorSchemeChoice | null): void => {
+    if (typeof document === 'undefined') {
+      return
+    }
+    const root = document.documentElement
+    root.classList.remove('light', 'dark')
+    if (choice != null) {
+      root.classList.add(choice)
+    }
+  }
+
+  const applyColorScheme = (choice: ColorSchemeChoice | null): void => {
+    setColorSchemeClass(choice)
+    try {
+      if (choice == null) {
+        globalThis.localStorage?.removeItem(COLOR_SCHEME_KEY)
+      } else {
+        globalThis.localStorage?.setItem(COLOR_SCHEME_KEY, choice)
+      }
+    } catch {
+      // Storage is unavailable; the class above is still correct for this page view.
+    }
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new Event(COLOR_SCHEME_EVENT))
+    }
+  }
+
+  const colorSchemeBootstrapScript = (): string =>
+    `(function(){try{var c=localStorage.getItem(${JSON.stringify(COLOR_SCHEME_KEY)});`
+    + `if(c==='light'||c==='dark'){var r=document.documentElement;`
+    + `r.classList.remove('light','dark');r.classList.add(c);}}catch(e){}})();`
+
+  return { readColorScheme, setColorSchemeClass, applyColorScheme, colorSchemeBootstrapScript }
+}
+
+export const colorSchemeHelper = createColorSchemeHelper()
+
+/** @deprecated compat:factory-refactor — use `colorSchemeHelper.colorSchemeBootstrapScript()` */
+export const colorSchemeBootstrapScript = (): string => colorSchemeHelper.colorSchemeBootstrapScript()

package/src/scheme/types.ts

@@ -0,0 +1,30 @@
+/** An explicit choice. Absent (`null`) means "follow the operating system". */
+export type ColorSchemeChoice = 'light' | 'dark'
+
+/** The visitor's colour-scheme choice: read, applied to the document element, stored, and bootstrapped in the head. */
+export interface ColorSchemeHelper {
+  /**
+   * The stored choice, or `null` when there is none, it is not a choice, or storage is unreachable
+   * (a private window, blocked site data, no `window` at all).
+   */
+  readColorScheme: () => ColorSchemeChoice | null
+  /** Put exactly the class for `choice` on the document element — none for `null`. Stores nothing. */
+  setColorSchemeClass: (choice: ColorSchemeChoice | null) => void
+  /**
+   * Apply a choice now and remember it: the class on the document element, the stored key (cleared
+   * for `null`), and one `COLOR_SCHEME_EVENT` for everything in this document that renders from it.
+   * Storage failures are swallowed — the page still switches, it just forgets on the next load.
+   */
+  applyColorScheme: (choice: ColorSchemeChoice | null) => void
+  /**
+   * The inline script for the document head, placed before any stylesheet paints.
+   *
+   * It reads the stored choice and puts its class on the document element before the first paint —
+   * the only moment it can: a component that did the same after mounting shows every visitor who
+   * chose dark one frame of the light page first. Self-contained on purpose (it inlines the key
+   * rather than importing it) and wrapped in `try`, because storage can throw and a head script
+   * that throws stops nothing but itself. No stored choice adds no class, and the stylesheet's own
+   * `prefers-color-scheme` rule decides.
+   */
+  colorSchemeBootstrapScript: () => string
+}

package/src/types.ts

@@ -1,11 +1,28 @@
 
 import type { WithFlowConfig } from '@owlmeans/flow'
-import type { AppConfig as Config, AppContext as Context } from '@owlmeans/web-client'
+import type { AppConfig as Config, AppContext as Context, RenderOptions } from '@owlmeans/web-client'
 import type { FlowService } from '@owlmeans/web-flow'
+import type { SocketClientSettings, SocketStatusServiceAppend } from '@owlmeans/client-socket'
+import type { PanelCookieConsentConfig } from './consent/types.js'
 
 export interface AppConfig extends Config, WithFlowConfig {
+  socket?: SocketClientSettings & {
+    /**
+     * Show `SocketReloadDialog` — a global, blocking "try again / reload the page" prompt — once every
+     * socket in the app has given up reconnecting (`useSocketStatus() === 'lost'`). Off by
+     * default: an app opts in once it has decided that outcome deserves a full-page prompt
+     * rather than the caller's own fallback UI.
+     */
+    reloadDialog?: boolean
+  }
+  /** How the cookie consent asks — the bar or the window, and where (`geo`). See `./consent`. */
+  cookieConsent?: PanelCookieConsentConfig
 }
 
-export interface AppContext<C extends AppConfig = AppConfig> extends Context<C> {
+export interface AppContext<C extends AppConfig = AppConfig> extends Context<C>, SocketStatusServiceAppend {
   flow: () => FlowService
 }
+
+export interface WebRenderOptions extends RenderOptions {
+  rootClassName?: string
+}

package/tests/consent-language.spec.ts

@@ -0,0 +1,31 @@
+import { beforeEach, describe, expect, test } from 'bun:test'
+import { i18nInstanceHelper } from '@owlmeans/client-i18n'
+import { installConsentLanguage } from '../src/consent/language.js'
+
+describe('installConsentLanguage — a deprecated no-op', () => {
+  const store = new Map<string, string>()
+
+  beforeEach(() => {
+    store.clear()
+    ;(globalThis as any).localStorage = {
+      getItem: (k: string) => store.get(k) ?? null,
+      setItem: (k: string, v: string) => { store.set(k, v) },
+      removeItem: (k: string) => { store.delete(k) },
+    }
+  })
+
+  test('returns a cleanup that can be called, more than once', () => {
+    const off = installConsentLanguage()
+
+    expect(typeof off).toBe('function')
+    expect(off()).toBeUndefined()
+    expect(off()).toBeUndefined()
+  })
+
+  test('changes nothing about the language: a choice is stored either way, whatever the decision', async () => {
+    installConsentLanguage()
+    await i18nInstanceHelper.setLanguage('pl')
+
+    expect(store.get('owlmeans-lng')).toBe('pl')
+  })
+})

package/tests/consent.spec.ts

@@ -0,0 +1,112 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { mountComponent, browserHelper } from '@owlmeans/test-ui'
+import { HARNESS_URL } from './context.js'
+
+const TIMEOUT = 30_000
+
+afterAll(async () => {
+  await browserHelper.closeBrowser()
+})
+
+const open = async (path: string) => mountComponent({ url: `${HARNESS_URL.replace(/\/$/, '')}${path}` })
+
+describe('@owlmeans/web-panel/consent — the dialog and the menu widget', () => {
+  test('the dialog works on a context without the presence service and keeps its floating button', async () => {
+    // `?consent=bare` never appends `appendConsentWidgetService` — an application using the
+    // dialog on its own. The footer still renders the "Cookie settings" control, whose presence
+    // hook has nothing to claim. Neither may throw: a throw in render blanks the application.
+    const { page, close } = await open('/prefs?consent=bare&footer=node')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('[data-consent-dialog]').waitFor()
+      await page.locator('[data-consent-accept-all]').click()
+      await page.locator('[data-consent-reopen]').waitFor()
+      expect(await page.locator('[data-consent-dialog]').count()).toBe(0)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a mounted footer control hides the floating button and reopens the dialog', async () => {
+    // `?consent=menu` appends the presence service; the footer's control declares itself with
+    // `useConsentMenuPresence()` for as long as it is mounted, so the floating button stays away.
+    const { page, close } = await open('/prefs?consent=menu&footer=node')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('[data-consent-dialog]').waitFor()
+      await page.locator('[data-consent-accept-all]').click()
+      await page.locator('[data-consent-dialog]').waitFor({ state: 'detached' })
+      expect(await page.locator('[data-consent-reopen]').count()).toBe(0)
+
+      await page.locator('footer').getByRole('button', { name: 'Cookie settings' }).click()
+      await page.locator('[data-consent-dialog]').waitFor()
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('linker passes through to the underlying dialog unchanged', async () => {
+    // `?domains=1` hands `PanelCookieConsent` a `linker` — nothing here re-derives it, so seeing
+    // the domain line pins that `{...props}` still carries it all the way to `CookieConsent`.
+    const { page, close } = await open('/prefs?consent=bare&footer=node&domains=1')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('[data-consent-dialog]').waitFor()
+      const domains = page.locator('[data-consent-domains]')
+      await domains.waitFor()
+      expect(await domains.textContent()).toContain('harness-partner.test')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a first-time visitor meets the bar by default', async () => {
+    const { page, close } = await open('/prefs?consent=bare')
+    try {
+      await page.locator('[data-consent-bar]').waitFor()
+      expect(await page.locator('[data-consent-dialog]').getAttribute('data-consent-mode')).toBe('bar')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('cfg.cookieConsent.mode picks the window, and a mode prop wins over it', async () => {
+    const configured = await open('/prefs?consent=bare&consentCfg=window')
+    try {
+      await configured.page.locator('[data-consent-dialog][data-consent-mode="window"]').waitFor()
+    } finally {
+      await configured.close()
+    }
+
+    const overridden = await open('/prefs?consent=bare&consentCfg=window&modeProp=bar')
+    try {
+      await overridden.page.locator('[data-consent-bar]').waitFor()
+    } finally {
+      await overridden.close()
+    }
+  }, TIMEOUT)
+
+  test('a locator appended to the context turns the geo gate on by itself', async () => {
+    const outside = await open('/prefs?consent=bare&consentGeo=US')
+    try {
+      await outside.page.waitForFunction(() => document.documentElement.getAttribute('data-consent') === 'decided')
+      expect(await outside.page.locator('[data-consent-dialog]').count()).toBe(0)
+    } finally {
+      await outside.close()
+    }
+
+    const inside = await open('/prefs?consent=bare&consentGeo=DE')
+    try {
+      await inside.page.locator('[data-consent-bar]').waitFor()
+    } finally {
+      await inside.close()
+    }
+
+    const unknown = await open('/prefs?consent=bare&consentGeo=fail')
+    try {
+      await unknown.page.locator('[data-consent-bar]').waitFor()
+    } finally {
+      await unknown.close()
+    }
+  }, TIMEOUT)
+})

package/tests/context.ts

@@ -25,6 +25,10 @@ export const getHarnessUrl = async (): Promise<string> => {
       alias: { '@': resolve(here, '../src/@') },
       dedupe: ['react', 'react-dom'],
     },
+    // Pre-bundled at server start rather than discovered while the first request is being
+    // served: a dependency found mid-transform re-optimizes and reloads the page underneath
+    // the navigation, which the first `goto` of a cold run pays for as a timeout.
+    optimizeDeps: { include: ['sonner', 'react-colorful', '@radix-ui/react-popover'] },
     server: { port: 0 },
     logLevel: 'warn'
   })

package/tests/editor.spec.ts

@@ -0,0 +1,58 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { browserHelper, mountComponent } from '@owlmeans/test-ui'
+import { HARNESS_URL } from './context.js'
+
+afterAll(async () => {
+  await browserHelper.closeBrowser()
+})
+
+describe('web-panel JSON editor', () => {
+  test('highlights JSON, formats without changing values, and preserves undo', async () => {
+    const { page, close } = await mountComponent({ url: `${HARNESS_URL}?editor=1` })
+    try {
+      await page.getByTestId('json-input').waitFor()
+      const original = await page.getByTestId('draft').textContent()
+      expect(await page.locator('.cm-line span').count()).toBeGreaterThan(2)
+      await page.getByRole('button', { name: 'Format', exact: true }).click()
+      await page.waitForFunction(() => document.querySelector('[data-testid=draft]')?.textContent?.includes('\n'))
+      expect(JSON.parse((await page.getByTestId('draft').textContent())!)).toEqual(JSON.parse(original!))
+      await page.getByTestId('json-input').fill('{"next":3}')
+      await page.getByTestId('json-input').press('ControlOrMeta+z')
+      expect(await page.getByTestId('draft').textContent()).not.toBe('{"next":3}')
+    } finally {
+      await close()
+    }
+  }, 60_000)
+
+  test('retains invalid drafts and prevents saving until JSON is valid', async () => {
+    const { page, close } = await mountComponent({ url: `${HARNESS_URL}?editor=1` })
+    try {
+      await page.getByTestId('json-input').fill('{"broken":')
+      await page.waitForSelector('[data-json-editor][data-valid=false]')
+      expect(await page.getByTestId('draft').textContent()).toBe('{"broken":')
+      expect(await page.getByRole('button', { name: 'Save document' }).isDisabled()).toBe(true)
+      expect(await page.getByRole('button', { name: 'Format', exact: true }).isDisabled()).toBe(true)
+      await page.getByTestId('json-input').fill('{"fixed":true}')
+      await page.waitForSelector('[data-json-editor][data-valid=true]')
+      await page.getByRole('button', { name: 'Save document' }).click()
+      expect(await page.getByTestId('saved').textContent()).toBe('{"fixed":true}')
+    } finally {
+      await close()
+    }
+  }, 60_000)
+
+  test('accepts external documents and enforces read only mode', async () => {
+    const { page, close } = await mountComponent({ url: `${HARNESS_URL}?editor=1` })
+    try {
+      await page.getByTestId('json-input').waitFor()
+      await page.getByRole('button', { name: 'Load another document' }).click()
+      await page.waitForFunction(() => document.querySelector('.cm-content')?.textContent === '{"loaded":true}')
+      await page.getByRole('button', { name: 'Toggle read only' }).click()
+      expect(await page.getByTestId('json-input').getAttribute('contenteditable')).toBe('false')
+      expect(await page.getByRole('button', { name: 'Format', exact: true }).count()).toBe(0)
+      expect(await page.getByRole('button', { name: 'Copy', exact: true }).isEnabled()).toBe(true)
+    } finally {
+      await close()
+    }
+  }, 60_000)
+})

package/tests/harness/editor.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { JsonEditor } from '../../src/editor/index.js'
+
+export const EditorHarness = () => {
+  const [value, setValue] = useState('{"title":"Sample","count":2,"enabled":true,"empty":null}')
+  const [valid, setValid] = useState(true)
+  const [readOnly, setReadOnly] = useState(false)
+  const [saved, setSaved] = useState('')
+  return (
+    <div className="bg-background p-6 text-foreground">
+      <JsonEditor
+        value={value}
+        onChange={setValue}
+        onValidityChange={setValid}
+        readOnly={readOnly}
+        testId="json-input"
+        ariaLabel="Document JSON"
+      />
+      <button type="button" disabled={!valid || readOnly} onClick={() => setSaved(value)}>
+        Save document
+      </button>
+      <button type="button" onClick={() => setValue('{"loaded":true}')}>
+        Load another document
+      </button>
+      <button type="button" onClick={() => setReadOnly((current) => !current)}>
+        Toggle read only
+      </button>
+      <output data-testid="draft">{value}</output>
+      <output data-testid="saved">{saved}</output>
+    </div>
+  )
+}

package/tests/harness/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>@owlmeans/web-panel navigation</title>
   </head>
   <body>

package/tests/harness/lazy-screen.tsx

@@ -0,0 +1,9 @@
+import type { FC } from 'react'
+import { useEntrypoint } from '@owlmeans/client'
+
+/** The screen `mount.tsx` loads lazily — a separate module, so it is a separate request. */
+export const LazyScreen: FC = () => {
+  const { alias } = useEntrypoint()
+
+  return <div id="lazy-screen" data-alias={alias}>lazy-screen</div>
+}