@xen-orchestra/web-core 0.0.4 → 0.0.5

package/env.d.ts

@@ -1,2 +1 @@
-/// <reference types="novnc__novnc" />
 /// <reference types="vite/client" />

package/lib/components/LegendTitle.vue

@@ -2,18 +2,24 @@
 <template>
   <div class="legend-title typo c3-semi-bold">
     <slot />
-    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="info" class="tooltip-icon" />
+    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="info" />
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
-defineProps<{
+export type LegendTitleProps = {
   iconTooltip?: string
   icon?: IconDefinition
+}
+
+defineProps<LegendTitleProps>()
+
+defineSlots<{
+  default(): void
 }>()
 </script>
 
@@ -24,8 +30,4 @@ defineProps<{
   gap: 0.8rem;
   align-items: center;
 }
-
-.tooltip-icon {
-  font-size: 1.2rem;
-}
 </style>

package/lib/components/{DonutChart.vue → donut-chart/DonutChart.vue}

@@ -17,51 +17,47 @@
   </svg>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 
-type Segment = {
+export type DonutSegmentColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
+
+export type DonutSegment = {
   value: number
-  color: 'success' | 'warning' | 'error' | 'unknown'
+  color: DonutSegmentColor
 }
 
-type ComputedSegment = {
-  color: 'success' | 'warning' | 'error' | 'unknown'
-  percent: number
-  offset: number
+export type DonutChartProps = {
+  segments: DonutSegment[]
+  icon?: IconDefinition
 }
 
-const props = defineProps<{
-  segments: Segment[]
-  maxValue?: number
-  icon?: IconDefinition
-}>()
+const props = defineProps<DonutChartProps>()
 
 const circumference = Math.PI * 80
 
-const totalValue = computed(() => {
-  const sumOfValues = props.segments.reduce((acc, segment) => acc + segment.value, 0)
-  return Math.max(props.maxValue ?? 0, sumOfValues)
-})
+const totalValue = computed(() => props.segments.reduce((total, segment) => total + segment.value, 0))
 
-const computedSegments = computed<ComputedSegment[]>(() => {
+const computedSegments = computed(() => {
   let nextOffset = circumference / 4
+
   return props.segments.map(segment => {
+    const offset = nextOffset
     const percent = (segment.value / totalValue.value) * circumference
-    const currentSegment = {
+    nextOffset -= percent
+
+    return {
       color: segment.color,
       percent,
-      offset: nextOffset,
+      offset,
     }
-    nextOffset -= percent
-    return currentSegment
   })
 })
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .donut-chart {
   width: 100px;
   height: 100px;
@@ -73,6 +69,14 @@ const computedSegments = computed<ComputedSegment[]>(() => {
   fill: transparent;
   --stroke-color: var(--color-grey-100);
 
+  &.primary {
+    --stroke-color: var(--color-purple-base);
+  }
+
+  &.secondary {
+    --stroke-color: var(--color-grey-100);
+  }
+
   &.success {
     --stroke-color: var(--color-green-base);
   }
@@ -81,11 +85,11 @@ const computedSegments = computed<ComputedSegment[]>(() => {
     --stroke-color: var(--color-orange-base);
   }
 
-  &.error {
+  &.danger {
     --stroke-color: var(--color-red-base);
   }
 
-  &.unknown {
+  &.disabled {
     --stroke-color: var(--color-grey-400);
   }
 }

package/lib/components/donut-chart-with-legend/DonutChartWithLegend.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="donut-chart-with-legend">
+    <DonutChart :icon :segments />
+    <LegendGroup :items="segments" :title />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DonutChart, { type DonutChartProps } from '@core/components/donut-chart/DonutChart.vue'
+import LegendGroup, { type LegendGroupProps } from '@core/components/legend/LegendGroup.vue'
+
+export type DonutChartWithLegendProps = {
+  segments: (DonutChartProps['segments'][number] & LegendGroupProps['items'][number])[]
+  title?: LegendGroupProps['title']
+  icon?: DonutChartProps['icon']
+}
+
+defineProps<DonutChartWithLegendProps>()
+</script>
+
+<style lang="postcss" scoped>
+.donut-chart-with-legend {
+  display: flex;
+  align-items: center;
+  gap: 3.2rem;
+}
+</style>

package/lib/components/legend/LegendGroup.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="legend-group">
+    <LegendTitle v-if="title" :icon="title.icon" :icon-tooltip="title.iconTooltip">
+      {{ title.label }}
+    </LegendTitle>
+    <LegendList class="list">
+      <LegendItem
+        v-for="item in items"
+        :key="item.label"
+        :color="item.color"
+        :tooltip="item.tooltip"
+        :unit="item.unit"
+        :value="item.value"
+      >
+        {{ item.label }}
+      </LegendItem>
+    </LegendList>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LegendItem, { type LegendItemProps } from '@core/components/legend/LegendItem.vue'
+import LegendList from '@core/components/legend/LegendList.vue'
+import LegendTitle, { type LegendTitleProps } from '@core/components/LegendTitle.vue'
+
+export type LegendGroupProps = {
+  items: (LegendItemProps & { label: string })[]
+  title?: LegendTitleProps & { label: string }
+}
+
+defineProps<LegendGroupProps>()
+</script>
+
+<style lang="postcss" scoped>
+.legend-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.list {
+  padding-left: 1.6rem;
+}
+</style>

package/lib/components/{UiLegend.vue → legend/LegendItem.vue}

@@ -1,67 +1,85 @@
 <!-- v1.0 -->
 <template>
-  <li :class="color" class="ui-legend">
+  <li :class="color" class="legend-item">
     <UiIcon :icon="faCircle" class="circle-icon" />
     <span class="label typo p3-regular"><slot /></span>
     <UiIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" color="info" />
-
-    <span class="value-and-unit typo c3-semi-bold">{{ value }} {{ unit }}</span>
+    <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
   </li>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import { faCircleInfo, faCircle } from '@fortawesome/free-solid-svg-icons'
+import { faCircle, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
 
-type LegendColor = 'default' | 'success' | 'warning' | 'error' | 'disabled' | 'dark-blue'
+export type LegendItemColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
 
-defineProps<{
-  color: LegendColor
+export type LegendItemProps = {
+  color: LegendItemColor
   value?: number
   unit?: string
   tooltip?: string
+}
+
+const props = defineProps<LegendItemProps>()
+
+defineSlots<{
+  default(): void
 }>()
+
+const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
 </script>
 
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
-.ui-legend {
+.legend-item {
+  &.primary {
+    --circle-color: var(--color-purple-base);
+  }
+
+  &.secondary {
+    --circle-color: var(--color-grey-100);
+  }
+
   &.success {
     --circle-color: var(--color-green-base);
   }
+
   &.warning {
     --circle-color: var(--color-orange-base);
   }
-  &.error {
+
+  &.danger {
     --circle-color: var(--color-red-base);
   }
-  &.default {
-    --circle-color: var(--color-purple-base);
-  }
+
   &.disabled {
     --circle-color: var(--color-grey-300);
   }
-  &.dark-blue {
-    --circle-color: var(--color-grey-100);
-  }
 }
+
 /* IMPLEMENTATION */
-.ui-legend {
+.legend-item {
   display: flex;
   align-items: center;
   gap: 0.8rem;
 }
+
 .circle-icon {
   font-size: 0.8rem;
   color: var(--circle-color);
 }
+
 .tooltip-icon {
   font-size: 1.2rem;
 }
+
 .label {
   color: var(--color-grey-000);
 }
+
 .value-and-unit {
   color: var(--color-grey-300);
 }

package/lib/components/legend/LegendList.vue

@@ -0,0 +1,19 @@
+<template>
+  <ul class="legend-list">
+    <slot />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default(): void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.legend-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+</style>

package/lib/components/state-hero/ComingSoonHero.vue

@@ -1,9 +1,13 @@
 <template>
-  <StateHero image="under-construction" class="coming-soon-hero">
+  <StateHero :type class="coming-soon-hero" image="under-construction">
     {{ $t('coming-soon') }}
   </StateHero>
 </template>
 
 <script lang="ts" setup>
-import StateHero from '@core/components/state-hero/StateHero.vue'
+import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
 </script>

package/lib/components/state-hero/LoadingHero.vue

@@ -1,9 +1,15 @@
 <template>
-  <StateHero busy class="loading-hero">
+  <StateHero v-if="!disabled" :type busy class="loading-hero">
     {{ $t('loading-in-progress') }}
   </StateHero>
+  <slot v-else />
 </template>
 
 <script lang="ts" setup>
-import StateHero from '@core/components/state-hero/StateHero.vue'
+import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+  disabled?: boolean
+}>()
 </script>

package/lib/components/state-hero/ObjectNotFoundHero.vue

@@ -1,5 +1,5 @@
 <template>
-  <StateHero image="no-result" class="object-not-found-hero">
+  <StateHero class="object-not-found-hero" image="no-result" type="page">
     {{ $t('object-not-found', { id }) }}
   </StateHero>
 </template>

package/lib/components/state-hero/StateHero.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="state-hero">
+  <div :class="type" class="state-hero">
     <UiSpinner v-if="busy" class="spinner" />
     <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
-    <p v-if="$slots.default" class="typo h2-black text">
+    <p v-if="$slots.default" :class="typoClass" class="typo text">
       <slot />
     </p>
   </div>
@@ -12,42 +12,60 @@
 import UiSpinner from '@core/components/UiSpinner.vue'
 import { computed } from 'vue'
 
+export type StateHeroType = 'page' | 'card'
+
 const props = defineProps<{
+  type: StateHeroType
   busy?: boolean
   image?: 'no-result' | 'under-construction' // TODO: 'offline' | 'no-data' |  'not-found' | 'all-good' | 'all-done' | 'error'
 }>()
 
+const typoClass = computed(() => (props.type === 'page' ? 'h2-black' : 'h4-medium'))
+
 const imageSrc = computed(() => {
-  try {
-    return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
-  } catch {
+  if (!props.image) {
     return undefined
   }
+
+  return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
 })
 </script>
 
 <style lang="postcss" scoped>
+.state-hero {
+  &.page {
+    --image-width: 90%;
+    --spinner-size: 10rem;
+    --gap: 8.2rem;
+  }
+
+  &.card {
+    --image-width: 70%;
+    --spinner-size: 6rem;
+    --gap: 2rem;
+  }
+}
+
 .state-hero {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4.2rem;
+  gap: var(--gap);
 }
 
 .image {
-  width: 90%;
+  width: var(--image-width);
   max-width: 55rem;
 }
 
 .spinner {
   color: var(--color-purple-base);
-  font-size: 10rem;
+  font-size: var(--spinner-size);
 }
 
 .text {
   color: var(--color-purple-base);
-  margin-top: 4rem;
 }
 </style>

package/lib/composables/item-counter.composable.md

@@ -0,0 +1,25 @@
+# `useItemCounter`
+
+This composable is meant to count items based on given filters then output the categorized count.
+
+## Usage
+
+```typescript
+const collection = [
+  { id: 'a', size: 'S' },
+  { id: 'b', size: 'S' },
+  { id: 'c', size: 'XL' },
+  { id: 'd', size: 'M' },
+  { id: 'e', size: 'L' },
+  { id: 'f', size: 'S' },
+]
+
+const count = useItemCounter(collection, {
+  small: item => item.size === 'S',
+  medium: item => item.size === 'M',
+})
+
+console.log(count.small) // 3
+console.log(count.medium) // 1
+console.log(count.$other) // 2
+```

package/lib/composables/item-counter.composable.ts

@@ -0,0 +1,32 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+type Counters<TConfig> = { [K in keyof TConfig | '$other']: number }
+
+export function useItemCounter<TItem, TConfig extends Record<string, (item: TItem) => boolean>>(
+  items: MaybeRefOrGetter<TItem[]>,
+  config: TConfig
+) {
+  const keys = Object.keys(config) as (keyof TConfig)[]
+
+  return computed(() => {
+    const counters = Object.fromEntries(keys.concat('$other').map(key => [key, 0])) as Counters<TConfig>
+
+    for (const item of toValue(items)) {
+      let matched = false
+
+      for (const key of keys) {
+        if (config[key](item)) {
+          matched = true
+          counters[key] += 1
+          break
+        }
+      }
+
+      if (!matched) {
+        counters.$other += 1
+      }
+    }
+
+    return counters
+  })
+}

package/lib/locales/en.json

@@ -64,5 +64,6 @@
   "tasks.quick-view.failed": "Failed",
   "tasks.quick-view.in-progress": "In progress",
 
+  "total": "Total",
   "vms": "VMs"
 }

package/lib/locales/fr.json

@@ -64,5 +64,6 @@
   "tasks.quick-view.failed": "Échouées",
   "tasks.quick-view.in-progress": "En cours",
 
+  "total": "Total",
   "vms": "VMs"
 }

package/lib/types/novnc.d.ts

@@ -0,0 +1,342 @@
+// [WARNING] Temporary file to fix typecheck error
+// Remove if this PR is merged: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/70022
+// Type definitions for @novnc/novnc 1.5
+// Project: https://github.com/novnc/noVNC
+// Definitions by: Jake Jarvis <https://github.com/jakejarvis>
+//                 Maksim Ovcharik <https://github.com/ovcharik>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/* eslint-disable no-use-before-define */
+
+declare module '@novnc/novnc/lib/rfb' {
+  /**
+   * An `object` specifying the credentials to provide to the server when authenticating.
+   */
+  interface NoVncCredentials {
+    /** The user that authenticates */
+    username: string
+    /** Password for the user */
+    password: string
+    /** Target machine or session */
+    target: string
+  }
+
+  /**
+   * An `object` specifying extra details about how the connection should be made.
+   */
+  interface NoVncOptions {
+    /**
+     * A `boolean` indicating if the remote server should be shared or if any other connected
+     * clients should be disconnected. Enabled by default.
+     */
+    shared?: boolean
+    /**
+     * An `object` specifying the credentials to provide to the server when authenticating.
+     */
+    credentials?: NoVncCredentials
+    /**
+     * A `string` specifying the ID to provide to any VNC repeater encountered.
+     */
+    repeaterID?: string
+    /**
+     * An `Array` of `string`s specifying the sub-protocols to use in the WebSocket connection.
+     * Empty by default.
+     */
+    wsProtocols?: string[]
+  }
+
+  interface NoVncEvents {
+    /**
+     * The `connect` event is fired after all the handshaking with the server is completed and the
+     * connection is fully established. After this event the `NoVncClient` object is ready to
+     * receive graphics updates and to send input.
+     */
+    connect: CustomEvent<Record<string, never>>
+
+    /**
+     * The `disconnect` event is fired when the connection has been terminated. The `detail`
+     * property is an `object` that contains the property `clean`. `clean` is a `boolean` indicating
+     * if the termination was clean or not. In the event of an unexpected termination or an error
+     * `clean` will be set to false.
+     */
+    disconnect: CustomEvent<{ clean: boolean }>
+
+    /**
+     * The `credentialsrequired` event is fired when the server requests more credentials than were
+     * specified to {@link NoVncClient}. The `detail` property is an `object` containing the
+     * property `types` which is an `Array` of `string` listing the credentials that are required.
+     */
+    credentialsrequired: CustomEvent<{ types: Array<keyof NoVncCredentials> }>
+
+    /**
+     * The `securityfailure` event is fired when the handshaking process with the server fails
+     * during the security negotiation step. The `detail` property is an `object` containing the
+     * following properties:
+     *
+     * | Property | Type        | Description
+     * | -------- | ----------- | -----------
+     * | `status` | `number`    | The failure status code
+     * | `reason` | `string`    | The **optional** reason for the failure
+     *
+     * The property `status` corresponds to the
+     * [SecurityResult](https://github.com/rfbproto/rfbproto/blob/master/rfbproto.rst#securityresult)
+     * status code in cases of failure. A status of zero will not be sent in this event since that
+     * indicates a successful security handshaking process. The optional property `reason` is
+     * provided by the server and thus the language of the string is not known. However most servers
+     * will probably send English strings. The server can choose to not send a reason and in these
+     * cases the `reason` property will be omitted.
+     */
+    securityfailure: CustomEvent<{ status: number; reason?: string }>
+
+    /**
+     * The `clipboard` event is fired when the server has sent clipboard data. The `detail` property
+     * is an `object` containing the property `text` which is a `string` with the clipboard data.
+     */
+    clipboard: CustomEvent<{ text: string }>
+
+    /**
+     * The `bell` event is fired when the server has requested an audible bell.
+     */
+    bell: CustomEvent<Record<string, never>>
+
+    /**
+     * The `desktopname` event is fired when the name of the remote desktop changes. The `detail`
+     * property is an `object` with the property `name` which is a `string` specifying the new name.
+     */
+    desktopname: CustomEvent<{ name: string }>
+
+    /**
+     * The `capabilities` event is fired whenever an entry is added or removed from `capabilities`.
+     * The `detail` property is an `object` with the property `capabilities` containing the new
+     * value of `capabilities`.
+     */
+    capabilities: CustomEvent<{ capabilities: NoVncClient['capabilities'] }>
+  }
+
+  type NoVncEventType = keyof NoVncEvents
+  type NoVncEvent = NoVncEvents[NoVncEventType]
+
+  class NoVncEventTarget extends EventTarget {
+    protected _listeners: Map<NoVncEventType, (event: Event) => void>
+
+    addEventListener<T extends NoVncEventType>(type: T, listener: (event: NoVncEvents[T]) => void): void
+    addEventListener(type: string, listener: (event: CustomEvent) => void): void
+
+    removeEventListener<T extends NoVncEventType>(type: T, listener: (event: NoVncEvents[T]) => void): void
+    removeEventListener(type: string, listener: (event: CustomEvent) => void): void
+
+    dispatchEvent(event: NoVncEvent | CustomEvent): boolean
+  }
+
+  /**
+   * The `NoVncClient` object represents a single connection to a VNC server. It communicates using
+   * a WebSocket that must provide a standard NoVncClient protocol stream.
+   */
+  export default class NoVncClient extends NoVncEventTarget {
+    readonly _rfbConnectionState: string
+    readonly _target: Element
+    readonly _url: string | null
+
+    /**
+     * Returns a new `NoVncClient` object and initiates a new connection to a specified VNC server.
+     *
+     * @param target - A block {@link HTMLElement} that specifies where the `NoVncClient` object
+     * should attach itself. The existing contents of the `HTMLElement` will be untouched, but new
+     * elements will be added during the lifetime of the `NoVncClient` object.
+     * @param url - A `string`, {@link WebSocket}, or {@link RTCDataChannel} specifying the VNC server to connect
+     * to. This must be a valid WebSocket URL.
+     * @param options - An {@link NoVncOptions} specifying extra details about how the connection
+     * should be made.
+     */
+    constructor(target: Element, url: string | WebSocket | RTCDataChannel, options?: NoVncOptions)
+
+    /**
+     * Is a `boolean` indicating if any events (e.g. key presses or mouse movement) should be
+     * prevented from being sent to the server. Disabled by default.
+     */
+    viewOnly: boolean
+
+    /**
+     * Is a `boolean` indicating if keyboard focus should automatically be moved to the remote
+     * session when a `mousedown` or `touchstart` event is received. Enabled by default.
+     */
+    focusOnClick: boolean
+
+    /**
+     * Is a `boolean` indicating if the remote session should be clipped to its container. When
+     * disabled scrollbars will be shown to handle the resulting overflow. Disabled by default.
+     */
+    clipViewport: boolean
+
+    /**
+     * Is a `boolean` indicating if mouse events should control the relative position of a clipped
+     * remote session. Only relevant if `clipViewport` is enabled. Disabled by default.
+     */
+    dragViewport: boolean
+
+    /**
+     * Is a `boolean` indicating if the remote session should be scaled locally so it fits its
+     * container. When disabled it will be centered if the remote session is smaller than its
+     * container, or handled according to `clipViewport` if it is larger. Disabled by default.
+     */
+    scaleViewport: boolean
+
+    /**
+     * Is a `boolean` indicating if a request to resize the remote session should be sent whenever
+     * the container changes dimensions. Disabled by default.
+     */
+    resizeSession: boolean
+
+    /**
+     * Is a `boolean` indicating whether a dot cursor should be shown instead of a zero-sized or
+     * fully-transparent cursor if the server sets such invisible cursor. Disabled by default.
+     */
+    showDotCursor: boolean
+
+    /**
+     * Is a valid CSS [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
+     * style value indicating which background style should be applied to the element containing the
+     * remote session screen. The default value is `rgb(40, 40, 40)` (solid gray color).
+     */
+    background: string
+
+    /**
+     * Is an `int` in range `[0-9]` controlling the desired JPEG quality. Value `0` implies low
+     * quality and `9` implies high quality. Default value is `6`.
+     */
+    qualityLevel: number
+
+    /**
+     * Is an `int` in range `[0-9]` controlling the desired compression level. Value `0` means no
+     * compression. Level 1 uses a minimum of CPU resources and achieves weak compression ratios,
+     * while level 9 offers best compression but is slow in terms of CPU consumption on the server
+     * side. Use high levels with very slow network connections. Default value is `2`.
+     */
+    compressionLevel: number
+
+    /**
+     * Is an `object` indicating which optional extensions are available on the server. Some methods
+     * may only be called if the corresponding capability is set. The following capabilities are
+     * defined:
+     *
+     * | name     | type      | description
+     * | -------- | --------- | -----------
+     * | `power`  | `boolean` | Machine power control is available
+     */
+    readonly capabilities: {
+      /** Machine power control is available */
+      power: boolean
+    }
+
+    /**
+     * Disconnect from the server.
+     */
+    disconnect(): void
+
+    /**
+     * Send credentials to server. Should be called after the
+     * {@link NoVncEventType.credentialsrequired} event has fired.
+     *
+     * @param credentials An {@link NoVncCredentials} specifying the credentials to provide to the
+     * server when authenticating.
+     */
+    sendCredentials(credentials: NoVncCredentials): void
+
+    /**
+     * Send a key event to the server.
+     *
+     * @param keysym A `number` specifying the NoVncClient keysym to send. Can be `0` if a valid
+     * **`code`** is specified.
+     * @param code A `string` specifying the physical key to send. Valid values are those that can
+     * be specified to {@link KeyboardEvent.code}. If the physical key cannot be determined then
+     * `null` shall be specified.
+     * @param down A `boolean` specifying if a press or a release event should be sent. If omitted
+     * then both a press and release event are sent.
+     */
+    sendKey(keysym: number, code: string | null, down?: boolean): void
+
+    /**
+     * Send the key sequence *left Control*, *left Alt*, *Delete*. This is a convenience wrapper
+     * around {@link sendKey}.
+     */
+    sendCtrlAltDel(): void
+
+    /**
+     * Sets the keyboard focus on the remote session. Keyboard events will be sent to the remote
+     * server after this point.
+     *
+     * @param options A {@link FocusOptions} providing options to control how the focus will be
+     * performed. Please see {@link HTMLElement.focus} for available options.
+     */
+    focus(options?: FocusOptions): void
+
+    /**
+     * Remove keyboard focus on the remote session. Keyboard events will no longer be sent to the
+     * remote server after this point.
+     */
+    blur(): void
+
+    /**
+     * Request to shut down the remote machine. The capability `power` must be set for this method
+     * to have any effect.
+     */
+    machineShutdown(): void
+
+    /**
+     * Request a clean reboot of the remote machine. The capability `power` must be set for this
+     * method to have any effect.
+     */
+    machineReboot(): void
+
+    /**
+     * Request a forced reset of the remote machine. The capability `power` must be set for this
+     * method to have any effect.
+     */
+    machineReset(): void
+
+    /**
+     * Send clipboard data to the remote server.
+     *
+     * @param text A `string` specifying the clipboard data to send.
+     */
+    clipboardPasteFrom(text: string): void
+  }
+}
+
+declare module '@novnc/novnc/core/util/browser' {
+  let isTouchDevice: boolean
+  let dragThreshold: number
+
+  const supportsCursorURIs: boolean
+  const hasScrollbarGutter: boolean
+
+  function isMac(): boolean
+
+  function isWindows(): boolean
+
+  function isIOS(): boolean
+
+  function isSafari(): boolean
+
+  function isFirefox(): boolean
+}
+
+declare module '@novnc/novnc/core/input/util' {
+  interface KeyboardEventBase {
+    char?: string
+    charCode?: number
+    code: string
+    key: string
+    keyCode?: number
+    location?: number
+    type?: string
+  }
+
+  function getKeycode(event: KeyboardEventBase): string
+
+  function getKey(event: KeyboardEventBase): string
+
+  function getKeysym(event: KeyboardEventBase): number
+}
+
+/* eslint-enable no-use-before-define */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": false,
   "exports": {
     "./*": {