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

package/src/consent/consts.local.ts

@@ -0,0 +1,10 @@
+import type { ConsentLocale } from '@owlmeans/web-consent'
+import { SUPPORTED_LNGS } from '@owlmeans/i18n'
+
+/**
+ * The consent package carries its own locale list because it must build with no dependency on the
+ * i18n package at all. This assertion is what keeps the two from drifting: a language added to the
+ * framework and not to the bundle fails here, at build time, rather than as a dialog rendering
+ * English to the one reader who cannot report it.
+ */
+export const _localeParity: readonly ConsentLocale[] = SUPPORTED_LNGS as readonly ConsentLocale[]

package/src/consent/consts.ts

@@ -0,0 +1 @@
+export const CONSENT_WIDGET_SERVICE = 'consent-widget'

package/src/consent/geo.ts

@@ -0,0 +1,26 @@
+import { consentPluginHelper, type ConsentGeoPlugin } from '@owlmeans/web-consent'
+import type { ClientConfig } from '@owlmeans/client-context'
+import type { ClientContext } from '@owlmeans/client'
+import type { ConsentGeoPluginAppend } from './types.js'
+
+/**
+ * Add the application's own country locator while its context is configured — beside
+ * `appendConsentWidgetService`, before anything renders.
+ *
+ * A locator is one async method that resolves the visitor's country or throws
+ * (`ConsentGeoPlugin`). It is registered into `@owlmeans/consent`'s plugin registry, ahead of the
+ * built-in Cloudflare one, and `PanelCookieConsent` turns the geo gate on for it even where
+ * `cfg.cookieConsent.geo` says nothing — appending a locator IS asking for the gate. Its result
+ * decides as Cloudflare's would: a visitor in a consent country is asked, anyone else is decided for
+ * automatically, and a throw hands over to the next locator — with none left, the visitor is asked.
+ */
+export const appendConsentGeoPlugin = <C extends ClientConfig, T extends ClientContext<C>>(
+  ctx: T, plugin: ConsentGeoPlugin
+): T & ConsentGeoPluginAppend => {
+  const _ctx = ctx as T & ConsentGeoPluginAppend
+
+  consentPluginHelper.registerConsentPlugin(plugin)
+  _ctx.consentGeo = () => plugin
+
+  return _ctx
+}

package/src/consent/index.ts

@@ -0,0 +1,24 @@
+export * from './component.js'
+export * from './menu-widget.js'
+export * from './presence.js'
+export { installConsentLanguage } from './language.js'
+export { createConsentWidgetService, appendConsentWidgetService, CONSENT_WIDGET_STATE } from './service.js'
+export { appendConsentGeoPlugin } from './geo.js'
+export { CONSENT_WIDGET_SERVICE } from './consts.js'
+export type {
+  ConsentWidgetPresenceRecord, ConsentWidgetService, ConsentWidgetServiceAppend,
+  PanelCookieConsentConfig, ConsentGeoPluginAppend,
+} from './types.js'
+export {
+  useConsent, useConsentCategory, consentStore, openConsent, isConsented,
+  readConsent, writeConsent, clearConsent, DEFAULT_CONSENT_CATEGORIES,
+  CONSENT_KEY, CONSENT_ESSENTIAL, CONSENT_ANALYTICS, CONSENT_MARKETING,
+  CONSENT_EVENT,
+  consentBootstrapScript,
+  CONSENT_REQUIRED_COUNTRIES,
+} from '@owlmeans/web-consent'
+export type {
+  ConsentCategory, ConsentMenuWidgetProps, ConsentOptions, ConsentRecord, ConsentSignal,
+  ConsentState, CookieConsentProps, CookiePolicyProps, ConsentDisplayMode, ConsentGeoOptions,
+  ConsentGeoPlugin, ConsentGeoLocation,
+} from '@owlmeans/web-consent'

package/src/consent/language.ts

@@ -0,0 +1,12 @@
+import type { ConsentOptions } from '@owlmeans/web-consent'
+
+/**
+ * @deprecated The interface language is strictly necessary storage: `@owlmeans/client-i18n` writes
+ * it on every switch and reads it at every start, and `@owlmeans/consent` stores a language that
+ * arrives with a link — none of it waits for a cookie decision, so there is nothing left to bind.
+ *
+ * Kept as a no-op (returning a no-op cleanup) only so an application written against the earlier,
+ * consent-gated API — a generated target that floats to a newer release — still builds. Remove the
+ * call.
+ */
+export const installConsentLanguage = (_opts?: ConsentOptions): (() => void) => () => undefined

package/src/consent/menu-widget.tsx

@@ -0,0 +1,22 @@
+import type { FC } from 'react'
+import { ConsentMenuWidget } from '@owlmeans/web-consent'
+import type { ConsentMenuWidgetProps } from '@owlmeans/web-consent'
+import { useLanguage } from '@owlmeans/client-i18n'
+import { useConsentTranslate } from './translate.js'
+
+/**
+ * The cookie-preferences row for a host's own dropdown/menu, bound to this app's language.
+ *
+ * Purely the visual row — it carries no presence signalling of its own, since it is typically
+ * rendered inside a dropdown's lazily-mounted content (only present while the menu is actually
+ * open). A host that wants `PanelCookieConsent`'s floating button hidden for the whole time this
+ * row is REACHABLE (not just while the dropdown happens to be open) calls
+ * `useConsentMenuPresence()` from its own always-mounted menu shell instead.
+ */
+export const PanelConsentMenuWidget: FC<ConsentMenuWidgetProps> = props => {
+  const [lng] = useLanguage()
+  const locale = props.locale ?? lng
+  const translate = useConsentTranslate(locale, props.translate)
+
+  return <ConsentMenuWidget {...props} locale={locale} translate={translate} />
+}

package/src/consent/presence.ts

@@ -0,0 +1,45 @@
+import { useLayoutEffect } from 'react'
+import { useStoreModel } from '@owlmeans/client'
+import { useContext } from '../context.js'
+import { CONSENT_WIDGET_STATE } from './service.js'
+import type { AppConfig, AppContext } from '../types.js'
+import type { ConsentWidgetPresenceRecord, ConsentWidgetServiceAppend } from './types.js'
+
+/**
+ * Whether a cookie-preferences action is currently reachable elsewhere in this app — what
+ * `PanelCookieConsent` reads to hide its own floating button while it is.
+ *
+ * Reads the state resource directly, never `useConsent()` — that hook's own mount triggers
+ * `consentStore.init()` as a side effect, which this must not do. The resource exists only once
+ * `appendConsentWidgetService(context)` has run; `PanelCookieConsent` checks for the service before
+ * calling this, and so must any other caller.
+ */
+export const useConsentWidgetPresent = (): boolean => {
+  const model = useStoreModel<ConsentWidgetPresenceRecord>(undefined, CONSENT_WIDGET_STATE)
+
+  return model.record.present === true
+}
+
+/**
+ * Declares that a cookie-preferences action is reachable for as long as the CALLING component
+ * stays mounted.
+ *
+ * Call this from a component that is mounted for the whole time the action is reachable — a
+ * dropdown/menu's own shell, not the menu's lazily-rendered content. Radix's `DropdownMenuContent`
+ * (and most headless menu content primitives) only mount their children while the menu is actually
+ * OPEN, so a `PanelConsentMenuWidget` row placed there is present for a fraction of the time the
+ * menu itself is on screen — calling this hook from inside that row hid the floating button only
+ * while the dropdown happened to be open, and showed it again the instant it closed.
+ *
+ * A layout effect, not a plain one: an ordinary effect runs after paint, so the floating button
+ * would flash for one frame before a fresh mount reports presence.
+ *
+ * Without `appendConsentWidgetService(context)` there is nothing to claim and this does nothing:
+ * `PanelCookieConsent` then keeps its floating button, which is visible on screen, rather than a
+ * throw from a layout effect, which takes the whole application down.
+ */
+export const useConsentMenuPresence = (): void => {
+  const context = useContext<AppConfig, AppContext<AppConfig> & Partial<ConsentWidgetServiceAppend>>()
+
+  useLayoutEffect(() => context.consentWidget?.().claim(), [context])
+}

package/src/consent/service.ts

@@ -0,0 +1,75 @@
+import { createService } from '@owlmeans/context'
+import { appendStateResource, stateAlias } from '@owlmeans/state'
+import type { ClientConfig } from '@owlmeans/client-context'
+import type { ClientContext } from '@owlmeans/client'
+import { CONSENT_WIDGET_SERVICE } from './consts.js'
+import type {
+  ConsentWidgetPresenceRecord, ConsentWidgetService, ConsentWidgetServiceAppend
+} from './types.js'
+
+/** The presence flag's state-resource alias — `single: true`, no id. */
+export const CONSENT_WIDGET_STATE = stateAlias<ConsentWidgetPresenceRecord>('consent-widget-presence')
+
+/**
+ * Tracks how many cookie-preferences menu rows are currently mounted, and publishes a plain
+ * present/absent flag into a state resource for `PanelCookieConsent` to read.
+ *
+ * Ref-counted rather than a boolean latch: a nav-mode transition can mount a new menu row before
+ * the old one unmounts (confirmed reachable in manager-web's own nav — a stale header still
+ * rendering its own dropdown for one commit while a project screen's dropdown has already
+ * mounted), and React 18 StrictMode double-invokes mount/cleanup in dev. Counting means the
+ * published flag only ever flips on a genuine 0-to-1 or 1-to-0 transition.
+ */
+export const createConsentWidgetService = (
+  alias: string = CONSENT_WIDGET_SERVICE
+): ConsentWidgetService => {
+  let count = 0
+
+  const publish = (present: boolean): void => {
+    const ctx = service.assertCtx<ClientConfig, ClientContext<ClientConfig>>()
+    void ctx.getStateResource<ConsentWidgetPresenceRecord>(CONSENT_WIDGET_STATE).save({ present })
+  }
+
+  const service: ConsentWidgetService = createService<ConsentWidgetService>(alias, {
+    claim: () => {
+      count += 1
+      if (count === 1) {
+        publish(true)
+      }
+
+      let released = false
+      return () => {
+        if (released) {
+          return
+        }
+        released = true
+        count = Math.max(0, count - 1)
+        if (count === 0) {
+          publish(false)
+        }
+      }
+    },
+
+    present: () => count > 0,
+  })
+
+  return service
+}
+
+export const appendConsentWidgetService = <C extends ClientConfig, T extends ClientContext<C>>(
+  ctx: T, alias: string = CONSENT_WIDGET_SERVICE
+): T & ConsentWidgetServiceAppend => {
+  const _ctx = ctx as T & ConsentWidgetServiceAppend
+
+  appendStateResource<C, T, ConsentWidgetPresenceRecord>(
+    ctx, CONSENT_WIDGET_STATE, { single: true, default: () => ({ present: false }) }
+  )
+
+  if (!_ctx.hasService(alias)) {
+    _ctx.registerService(createConsentWidgetService(alias))
+  }
+
+  _ctx.consentWidget = () => _ctx.service(alias)
+
+  return _ctx
+}

package/src/consent/translate.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react'
+import { useI18nLib } from '@owlmeans/client-i18n'
+import { consentI18nHelper } from '@owlmeans/web-consent'
+
+/**
+ * Resolve consent copy through the application first, and the packaged bundle second.
+ *
+ * The chain matters. `@owlmeans/web-consent` takes `translate` as a prop and, once given one,
+ * stops consulting its own translations — so a wrapper that forwarded the framework resolver
+ * alone would render the ENGLISH default for every key the application had not overridden, in
+ * every language. Falling through to the packaged bundle for the current locale means an
+ * application overrides what it wants to and inherits the packaged languages for the rest.
+ *
+ * Shared by `PanelCookieConsent`/`PanelCookiePolicy` and `PanelConsentMenuWidget` — every
+ * `web-panel/consent` surface resolves copy through this one chain.
+ */
+export const useConsentTranslate = (
+  locale: string, override?: (key: string, defaultValue: string) => string
+): ((key: string, defaultValue: string) => string) => {
+  const t = useI18nLib('consent')
+
+  return useCallback((key: string, defaultValue: string) => {
+    if (override != null) {
+      return override(key, defaultValue)
+    }
+    const packaged = consentI18nHelper.defaultConsentTranslate(locale)(key, defaultValue)
+    // `t` answers with whatever it is given when the key is unknown, so the packaged string is
+    // what it is given — an application's override wins, and everything else stays translated.
+    return t(key, { defaultValue: packaged })
+  }, [t, locale, override])
+}

package/src/consent/types.local.ts

@@ -0,0 +1,6 @@
+import type { CookieConsentProps } from '@owlmeans/web-consent'
+
+export interface BoundCookieConsentProps extends CookieConsentProps {
+  /** Whether a host menu currently offers the preferences row — see `useConsentMenuPresence`. */
+  menuPresent?: boolean
+}

package/src/consent/types.ts

@@ -0,0 +1,43 @@
+import type { ResourceRecord } from '@owlmeans/resource'
+import type { InitializedService } from '@owlmeans/context'
+import type { ConsentDisplayMode, ConsentGeoOptions, ConsentGeoPlugin } from '@owlmeans/web-consent'
+
+/**
+ * `cfg.cookieConsent` — how the application's cookie consent asks, set where the rest of its
+ * configuration is. A prop on `PanelCookieConsent` / `PanelCookiePolicy` always wins.
+ */
+export interface PanelCookieConsentConfig {
+  /** `bar` (the default) or `window` — see `ConsentDisplayMode`. */
+  mode?: ConsentDisplayMode
+  /**
+   * Ask only where the law requires it. `{ cloudflare: true }` locates the visitor through the
+   * Cloudflare edge the application is served from; a locator of the application's own is added in
+   * code with `appendConsentGeoPlugin`. See `ConsentGeoOptions`.
+   */
+  geo?: ConsentGeoOptions
+}
+
+/** What `appendConsentGeoPlugin` adds to the context. */
+export interface ConsentGeoPluginAppend {
+  /** The application's own locator, registered while the context was configured. */
+  consentGeo: () => ConsentGeoPlugin
+}
+
+/** A `single`-store presence flag: one record, no id needed. */
+export interface ConsentWidgetPresenceRecord extends ResourceRecord {
+  present: boolean
+}
+
+export interface ConsentWidgetService extends InitializedService {
+  /**
+   * Register one mounted cookie-preferences menu row. Returns its release — call it exactly
+   * once, on that instance's unmount.
+   */
+  claim: () => () => void
+  /** Whether at least one row is currently mounted anywhere in the app. */
+  present: () => boolean
+}
+
+export interface ConsentWidgetServiceAppend {
+  consentWidget: () => ConsentWidgetService
+}

package/src/context.ts

@@ -2,6 +2,8 @@ import { appendFlowService } from '@owlmeans/web-flow'
 import type { AppConfig , AppContext } from './types.js'
 import { makeContext as makeClientContext, useContext as useCtx } from '@owlmeans/web-client'
 import { apiConfigMiddleware } from '@owlmeans/api-config-client'
+import { appendLoginScreen } from './components/login/append.js'
+import { appendSocketStatus } from '@owlmeans/client-socket'
 
 export const makeContext = <C extends AppConfig, T extends AppContext<C>>(cfg: C): T => {
   const context = makeClientContext(cfg) as T
@@ -11,6 +13,16 @@ export const makeContext = <C extends AppConfig, T extends AppContext<C>>(cfg: C
   appendFlowService<C, T>(context)
   context.flow = () => context.service('flow')
 
+  // Registered unconditionally — cheap, and it is what lets `SocketReloadDialog` and
+  // `useSocketStatus()` work at all. It stays inert for an app that never opts into
+  // `cfg.socket.reloadDialog`: nothing renders, and every `ws()`/`useWs()` connection reporting
+  // into it costs one map write per state change.
+  appendSocketStatus<C, T>(context)
+
+  // Every app on this package gets the shadcn sign-in screen with no wiring of its own; one that
+  // wants its logo on it calls `appendLoginScreen` again, which is idempotent.
+  appendLoginScreen<C, T>(context)
+
   return context
 }
 

package/src/editor/component.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import type { FC } from 'react'
+import { basicSetup } from 'codemirror'
+import { Compartment, EditorState } from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+import { syntaxHighlighting } from '@codemirror/language'
+import { json, jsonParseLinter } from '@codemirror/lang-json'
+import { linter } from '@codemirror/lint'
+import { Braces, Check, Copy, LockKeyhole, WrapText } from 'lucide-react'
+import { Button } from '../@/components/ui/button.js'
+import { cn } from '../@/lib/utils.js'
+import { EDITOR_THEME, JSON_HIGHLIGHT, LABELS } from './consts.local.js'
+import type { JsonEditorProps } from './types.js'
+
+export const JsonEditor: FC<JsonEditorProps> = ({
+  value,
+  onChange,
+  onValidityChange,
+  readOnly = false,
+  id,
+  ariaLabel = 'JSON',
+  testId,
+  className,
+  minHeight = 120,
+  maxHeight = 560,
+  labels
+}) => {
+  const copy = { ...LABELS, ...labels }
+  const errorId = useId()
+  const mount = useRef<HTMLDivElement>(null)
+  const editor = useRef<EditorView | null>(null)
+  const callback = useRef(onChange)
+  const external = useRef(false)
+  const [access] = useState(() => new Compartment())
+  const [attributes] = useState(() => new Compartment())
+  const [copied, setCopied] = useState(false)
+  const [copyFailed, setCopyFailed] = useState(false)
+  const error = useMemo(() => {
+    try {
+      JSON.parse(value)
+      return null
+    } catch (cause) {
+      return cause instanceof Error ? cause.message : String(cause)
+    }
+  }, [value])
+  callback.current = onChange
+
+  useEffect(() => {
+    if (mount.current == null) return
+    const view = new EditorView({
+      parent: mount.current,
+      doc: value,
+      extensions: [
+        basicSetup,
+        json(),
+        linter(jsonParseLinter()),
+        EDITOR_THEME,
+        syntaxHighlighting(JSON_HIGHLIGHT),
+        EditorView.lineWrapping,
+        access.of([EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)]),
+        attributes.of(EditorView.contentAttributes.of({ 'aria-label': ariaLabel })),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged && !external.current) callback.current?.(update.state.doc.toString())
+        })
+      ]
+    })
+    editor.current = view
+    return () => {
+      view.destroy()
+      editor.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    const view = editor.current
+    if (view == null || view.state.doc.toString() === value) return
+    external.current = true
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } })
+    external.current = false
+  }, [value])
+
+  useEffect(() => {
+    editor.current?.dispatch({
+      effects: [
+        access.reconfigure([EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)]),
+        attributes.reconfigure(
+          EditorView.contentAttributes.of({
+            ...(id != null ? { id } : {}),
+            ...(testId != null ? { 'data-testid': testId } : {}),
+            'aria-label': ariaLabel,
+            'aria-readonly': String(readOnly),
+            'aria-invalid': String(error != null),
+            ...(error != null ? { 'aria-describedby': errorId } : {})
+          })
+        )
+      ]
+    })
+  }, [readOnly, id, testId, ariaLabel, error])
+
+  useEffect(() => {
+    onValidityChange?.(error == null)
+  }, [error, onValidityChange])
+  useEffect(() => {
+    setCopied(false)
+    setCopyFailed(false)
+  }, [value])
+
+  const copyText = async (): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+      setCopyFailed(false)
+    } catch {
+      setCopyFailed(true)
+    }
+  }
+
+  return (
+    <div
+      data-json-editor
+      data-valid={error == null}
+      className={cn(
+        'min-w-0 overflow-hidden rounded-lg border bg-background text-foreground shadow-xs focus-within:ring-2 focus-within:ring-ring/40',
+        error != null && 'border-destructive',
+        className
+      )}
+    >
+      <div className="flex min-h-10 flex-wrap items-center justify-between gap-2 border-b bg-muted/50 px-3 py-1">
+        <span className="inline-flex items-center gap-2 font-mono text-xs text-muted-foreground">
+          <Braces className="size-3.5" aria-hidden="true" />
+          JSON
+          {readOnly && (
+            <span className="inline-flex items-center gap-1 font-sans">
+              <LockKeyhole className="size-3" />
+              {copy.readOnly}
+            </span>
+          )}
+        </span>
+        <div className="flex items-center gap-1">
+          {!readOnly && (
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              disabled={error != null}
+              onClick={() => onChange?.(JSON.stringify(JSON.parse(value), null, 2))}
+            >
+              <WrapText className="size-3.5" />
+              {copy.format}
+            </Button>
+          )}
+          <Button type="button" size="sm" variant="ghost" onClick={() => void copyText()}>
+            {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+            {copied ? copy.copied : copyFailed ? copy.copyFailed : copy.copy}
+          </Button>
+        </div>
+      </div>
+      <div
+        ref={mount}
+        className="[&_.cm-scroller]:max-h-[var(--json-max-height)] [&_.cm-scroller]:min-h-[var(--json-min-height)]"
+        style={{ '--json-min-height': `${minHeight}px`, '--json-max-height': `${maxHeight}px` } as React.CSSProperties}
+      />
+      <div
+        className={cn('border-t px-3 py-1.5 text-xs', error != null ? 'text-destructive' : 'text-muted-foreground')}
+        aria-live="polite"
+        id={errorId}
+      >
+        {error != null ? `${copy.invalid}: ${error}` : copy.valid}
+      </div>
+    </div>
+  )
+}

package/src/editor/consts.local.ts

@@ -0,0 +1,62 @@
+import { EditorView } from '@codemirror/view'
+import { HighlightStyle } from '@codemirror/language'
+import { tags } from '@lezer/highlight'
+import type { JsonEditorLabels } from './types.js'
+
+export const LABELS: JsonEditorLabels = {
+  format: 'Format',
+  copy: 'Copy',
+  copied: 'Copied',
+  copyFailed: 'Copy failed',
+  readOnly: 'Read only',
+  valid: 'Valid JSON',
+  invalid: 'Invalid JSON'
+}
+
+export const EDITOR_THEME = EditorView.theme({
+  '&': {
+    backgroundColor: 'var(--background, var(--color-background))',
+    color: 'var(--foreground, var(--color-foreground))',
+    fontSize: '13px'
+  },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-scroller': { fontFamily: 'ui-monospace, SFMono-Regular, monospace', overflow: 'auto', lineHeight: '1.7' },
+  '.cm-content': { padding: '12px 0', caretColor: 'var(--foreground, var(--color-foreground))' },
+  '.cm-line': { padding: '0 16px 0 10px' },
+  '.cm-gutters': {
+    backgroundColor: 'var(--muted, var(--color-muted))',
+    color: 'var(--muted-foreground, var(--color-muted-foreground))',
+    borderRight: '1px solid var(--border, var(--color-border))'
+  },
+  '.cm-activeLine, .cm-activeLineGutter': { backgroundColor: 'var(--accent, var(--color-accent))' },
+  '.cm-selectionBackground, &.cm-focused .cm-selectionBackground': {
+    backgroundColor: 'var(--accent, var(--color-accent))'
+  },
+  '.cm-cursor': { borderLeftColor: 'var(--foreground, var(--color-foreground))' },
+  '.cm-foldPlaceholder, .cm-tooltip': {
+    backgroundColor: 'var(--popover, var(--color-popover))',
+    color: 'var(--popover-foreground, var(--color-popover-foreground))',
+    border: '1px solid var(--border, var(--color-border))'
+  },
+  '.cm-matchingBracket': {
+    backgroundColor: 'var(--accent, var(--color-accent))',
+    outline: '1px solid var(--ring, var(--color-ring))'
+  }
+})
+
+export const JSON_HIGHLIGHT = HighlightStyle.define([
+  { tag: tags.propertyName, color: 'var(--primary-bright, var(--color-primary))', fontWeight: '600' },
+  { tag: tags.string, color: 'var(--foreground, var(--color-foreground))' },
+  {
+    tag: tags.number,
+    color: 'color-mix(in oklch, var(--chart-3, var(--color-primary)), var(--foreground, var(--color-foreground)) 30%)'
+  },
+  {
+    tag: tags.bool,
+    color:
+      'color-mix(in oklch, var(--secondary, var(--color-primary)), var(--foreground, var(--color-foreground)) 20%)',
+    fontWeight: '600'
+  },
+  { tag: tags.null, color: 'var(--muted-foreground, var(--color-muted-foreground))', fontStyle: 'italic' },
+  { tag: tags.punctuation, color: 'var(--muted-foreground, var(--color-muted-foreground))' }
+])

package/src/editor/index.ts

@@ -0,0 +1,2 @@
+export { JsonEditor } from './component.js'
+export type { JsonEditorProps, JsonEditorLabels } from './types.js'

package/src/editor/types.ts

@@ -0,0 +1,24 @@
+export interface JsonEditorLabels {
+  format: string
+  copy: string
+  copied: string
+  copyFailed: string
+  readOnly: string
+  valid: string
+  invalid: string
+}
+
+/** JSON stays text until the host saves it, including incomplete and invalid drafts. */
+export interface JsonEditorProps {
+  value: string
+  onChange?: (value: string) => void
+  onValidityChange?: (valid: boolean) => void
+  readOnly?: boolean
+  id?: string
+  ariaLabel?: string
+  testId?: string
+  className?: string
+  minHeight?: number
+  maxHeight?: number
+  labels?: Partial<JsonEditorLabels>
+}

package/src/entrypoints.ts

@@ -0,0 +1,5 @@
+
+import { entrypoints as webClientBindings } from '@owlmeans/web-client'
+import { entrypoints as configBindings } from '@owlmeans/api-config-client'
+
+export const entrypoints = [...webClientBindings, ...configBindings]

package/src/exports.ts

@@ -1,14 +1,15 @@
 
-export { handler, useNavigate, useValue, useModule } from '@owlmeans/client'
+export { handler, lazyHandler, lazyComponent, useNavigate, useValue, useEntrypoint } from '@owlmeans/client'
+export type { LazyComponent, LazyComponentOptions, LazyHandler } from '@owlmeans/client'
 export { config } from '@owlmeans/client-context'
 export { service } from '@owlmeans/config'
-export { guard, parent } from '@owlmeans/entrypoint'
 export { addWebService } from '@owlmeans/client-config'
-export { entrypoint, elevate, provideRequest, stab } from '@owlmeans/client-entrypoint'
+export { bind, bindAll, bindScreen, clientRequestHelper, provideRequest, stab } from '@owlmeans/client-entrypoint'
+export { appendPermissionDeniedToast, PermissionDeniedToast } from './permission/index.js'
 export type { ClientEntrypoint as Module } from '@owlmeans/client-entrypoint'
 export { route as croute } from '@owlmeans/client-route'
 export { route, frontend } from '@owlmeans/route'
-export { DEFAULT_ALIAS as DAUTH_GUARD, setupExternalAuthentication } from '@owlmeans/client-auth'
+export { DEFAULT_ALIAS as DAUTH_GUARD, bindExternalAuthentication } from '@owlmeans/client-auth'
 
 export { AppType, HOME, ROOT, BASE, GUEST } from '@owlmeans/context'
 
@@ -16,7 +17,7 @@ export { DISPATCHER, CAUTHEN_FLOW_ENTER } from '@owlmeans/auth'
 export type { AuthToken } from '@owlmeans/auth'
 
 export { composePrefix, useI18n, useI18nApp, useI18nLib, useLanguage } from '@owlmeans/client-i18n'
-export { addI18nApp, addI18nLib, SUPPORTED_LNGS } from '@owlmeans/i18n'
+export { addI18nApp, addI18nLib, i18nHelper, SUPPORTED_LNGS } from '@owlmeans/i18n'
 export { flow, configureFlows } from '@owlmeans/flow'
 export { QUERY_PARAM as FLOW_PARAM, SERVICE_PARAM, useFlow } from '@owlmeans/web-flow'
 export { Dispatcher, appendWebAuthService } from '@owlmeans/web-client'

package/src/index.ts

@@ -3,7 +3,7 @@ export type * from './types.js'
 export * from './main.js'
 export * from './exports.js'
 export * from './context.js'
-export * from './modules.js'
+export * from './entrypoints.js'
 export * from './components/index.js'
 
 export * from '@owlmeans/client-panel'

package/src/main.tsx

@@ -1,14 +1,10 @@
-import type { RenderOptions, AppContext } from '@owlmeans/web-client'
+import { type AppContext, render as basicRender } from '@owlmeans/web-client'
 import type { ClientConfig, ClientContext } from '@owlmeans/client-context'
-import { render as basicRender } from '@owlmeans/web-client'
 import type { FC } from 'react'
 import { useI18nInstance } from '@owlmeans/client-i18n/utils'
 import detector from 'i18next-browser-languagedetector'
 import { PanelApp } from './components/panel-app/component.js'
-
-export interface WebRenderOptions extends RenderOptions {
-  rootClassName?: string
-}
+import type { WebRenderOptions } from './types.js'
 
 export const render = <C extends ClientConfig, T extends ClientContext<C>>(context: T, opts?: WebRenderOptions) => {
   basicRender(<App context={context as unknown as AppContext} rootClassName={opts?.rootClassName}/>, opts)