@hanzo/ui 0.5.24 → 0.6.16

package/src/components/Expandable.svelte

@@ -0,0 +1,90 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { Asset, IntlString } from '@hanzo/platform'
+  import ExpandCollapse from './ExpandCollapse.svelte'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+  import Chevron from './Chevron.svelte'
+
+  export let icon: Asset | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let expanded: boolean = false
+  export let bordered: boolean = false
+  export let expandable = true
+  export let contentColor = false
+  export let showChevron = true
+
+  let wasExpanded = expanded
+  $: if (expanded) wasExpanded = true
+</script>
+
+<div class="flex-col">
+  <div class="expandable-header flex-between" class:expanded class:bordered>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="flex-row-center mr-4"
+      class:cursor-pointer={expandable}
+      on:click|stopPropagation={() => {
+        if (expandable) expanded = !expanded
+      }}
+    >
+      <Chevron {expanded} marginRight={'.5rem'} fill={!showChevron ? 'transparent' : undefined} />
+      {#if icon}
+        <div class="min-w-4 mr-2">
+          <Icon {icon} size={'small'} />
+        </div>
+      {/if}
+      <span class="fs-title overflow-label" class:content-color={contentColor}>
+        {#if label}<Label {label} />{/if}<slot name="title" />
+      </span>
+      {#if $$slots['title-tools']}
+        <div class="buttons-group small-gap">
+          <slot name="title-tools" />
+        </div>
+      {/if}
+    </div>
+    {#if $$slots.tools}
+      <div class="buttons-group small-gap">
+        <slot name="tools" />
+      </div>
+    {/if}
+  </div>
+  <ExpandCollapse isExpanded={expanded}>
+    {#if wasExpanded}
+      <slot />
+    {/if}
+  </ExpandCollapse>
+</div>
+
+<style lang="scss">
+  .expandable-header {
+    transition: margin-bottom 0.15s var(--timing-main);
+
+    &:not(.expanded) {
+      margin-bottom: 0;
+    }
+    &.expanded {
+      margin-bottom: 0.75rem;
+    }
+    &.bordered {
+      padding: 0.25rem 0.5rem;
+      background-color: var(--theme-comp-header-color);
+      border: 1px solid var(--theme-divider-color);
+      border-radius: 0.25rem;
+    }
+  }
+</style>

package/src/components/FocusHandler.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { FocusManager } from '../focus'
+
+  export let manager: FocusManager
+  export let isEnabled: boolean = true
+
+  function handleKey (evt: KeyboardEvent): void {
+    if (evt.code === 'Tab' && isEnabled) {
+      evt.preventDefault()
+      evt.stopPropagation()
+      manager.next(evt.shiftKey ? -1 : 1)
+    }
+  }
+</script>
+
+<svelte:window
+  on:keydown={(evt) => {
+    handleKey(evt)
+  }}
+/>
+<slot />

package/src/components/Fold.svelte

@@ -0,0 +1,52 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let isOpen: boolean
+  export let empty: boolean = false
+  export let level: number = 0
+</script>
+
+<div class="hulyFold-container" class:opened={isOpen && !empty} style:margin-left={`${level * 1.5}rem`}>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    {#if empty}
+      <path
+        d="M8 8.99988C8.55228 8.99988 9 8.55216 9 7.99988C9 7.44759 8.55228 6.99988 8 6.99988C7.44772 6.99988 7 7.44759 7 7.99988C7 8.55216 7.44772 8.99988 8 8.99988Z"
+      />
+    {:else}
+      <path d="M11 8L5.99995 3L5.29285 3.70711L9.58574 8L5.29285 12.2929L5.99995 13L11 8Z" />
+    {/if}
+  </svg>
+</div>
+
+<style lang="scss">
+  .hulyFold-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0.25rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.25rem;
+    color: var(--button-disabled-IconColor);
+    transform-origin: center;
+    transform: rotate(0deg);
+    transition: transform 0.15s ease-in-out;
+
+    &.opened {
+      transform: rotate(90deg);
+    }
+  }
+</style>

package/src/components/Grid.svelte

@@ -0,0 +1,39 @@
+<!--
+// Copyright © 2020 Hanzo <dev@hanzo.ai>.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let column: number = 2
+  export let rowGap: number = 2.5
+  export let columnGap: number = 1.5
+  export let topGap: boolean = false
+  export let equalHeight: boolean = false
+  export let alignItems: 'start' | 'center' | 'end' | 'stretch' = 'center'
+
+  $: style = `grid-template-columns: repeat(${column}, 1fr); row-gap: ${rowGap}rem; column-gap: ${columnGap}rem;${
+    equalHeight ? ' grid-auto-rows: 1fr;' : ''
+  }`
+</script>
+
+<div class="grid" {style} style:margin-top={topGap ? `${rowGap}rem` : 0} style:align-items={alignItems}>
+  <slot />
+</div>
+
+<style lang="scss">
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    row-gap: 2.5rem;
+    column-gap: 1.5rem;
+  }
+</style>

package/src/components/Header.svelte

@@ -0,0 +1,260 @@
+<!--
+// Copyright © 2023 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte'
+  import {
+    IconMaximize,
+    IconMinimize,
+    IconClose,
+    ButtonIcon,
+    deviceOptionsStore as deviceInfo,
+    resizeObserver,
+    HeaderAdaptive,
+    popupstore
+  } from '..'
+
+  export let type: 'type-aside' | 'type-popup' | 'type-component' | 'type-panel' = 'type-component'
+  export let allowFullsize: boolean = false
+  export let hideSeparator: boolean = false
+  export let topIndent: boolean = false
+  export let adaptive: HeaderAdaptive = 'default'
+  export let hideBefore: boolean = false
+  export let hideDescription: boolean = false
+  export let hideSearch: boolean = false
+  export let hideActions: boolean = false
+  export let hideExtra: boolean = false
+  export let hidePresence: boolean = false
+  export let overflowExtra: boolean = false
+  export let noPrint: boolean = false
+  export let freezeBefore: boolean = false
+  export let doubleRowWidth: number = 768
+  export let closeOnEscape: boolean = true
+  export let realWidth: number | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  const closeButton: boolean = ['type-popup', 'type-aside'].some((v) => v === type)
+  let spaceFiller: HTMLElement
+  let doubleRow: boolean = false
+  let doubleExtra: boolean = false
+  let extraWidth: number = 0
+  let spaceWidth: number = 0
+  $: _doubleRow =
+    adaptive === 'doubleRow' ||
+    (adaptive !== 'disabled' && doubleRow) ||
+    (adaptive === 'autoExtra' && (doubleRow || doubleExtra))
+
+  onMount(() => {
+    if (closeButton) window.addEventListener('keydown', _close)
+  })
+  onDestroy(() => {
+    if (closeButton) window.removeEventListener('keydown', _close)
+  })
+
+  function _close (ev: KeyboardEvent): void {
+    if (closeButton && ev.key === 'Escape' && closeOnEscape) {
+      ev.preventDefault()
+      ev.stopPropagation()
+
+      if (type === 'type-aside' && $popupstore.length > 0) {
+        return
+      }
+
+      dispatch('close')
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  use:resizeObserver={(element) => {
+    realWidth = element.clientWidth
+    if (!doubleRow && element.clientWidth <= doubleRowWidth) doubleRow = true
+    else if (doubleRow && element.clientWidth > doubleRowWidth) doubleRow = false
+  }}
+  class="hulyHeader-container"
+  class:doubleRow={_doubleRow}
+  class:topIndent
+  class:clearPadding={$$slots.description}
+  class:hideSeparator
+  class:no-print={noPrint}
+>
+  {#if _doubleRow}
+    <div class="hulyHeader-row">
+      {#if allowFullsize}
+        <ButtonIcon
+          icon={$deviceInfo.navigator.visible ? IconMaximize : IconMinimize}
+          kind={'tertiary'}
+          size={'small'}
+          noPrint
+          on:click={() => ($deviceInfo.navigator.visible = !$deviceInfo.navigator.visible)}
+        />
+        <div class="hulyHeader-divider no-print" />
+      {/if}
+      {#if $$slots.beforeTitle && !hideBefore}
+        <div class="hulyHeader-buttonsGroup before mr-2 no-print" class:freezeBefore>
+          <slot name="beforeTitle" {doubleRow} />
+        </div>
+      {/if}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="hulyHeader-titleGroup"
+        class:withDescription={$$slots.description && !hideDescription}
+        class:notGrow={adaptive === 'autoExtra'}
+        on:click
+      >
+        {#if $$slots.description && !hideDescription}
+          <div class="hulyHeader-titleGroup"><slot /></div>
+          <div class="hulyHeader-titleGroup"><slot name="description" /></div>
+        {:else}
+          <slot />
+        {/if}
+      </div>
+
+      {#if adaptive === 'autoExtra'}
+        <div
+          class="hulyHeader-spaceFiller"
+          bind:this={spaceFiller}
+          use:resizeObserver={(element) => {
+            if (spaceWidth !== element.clientWidth) spaceWidth = element.clientWidth
+            if (doubleExtra && element.clientWidth > extraWidth + 42) doubleExtra = false
+          }}
+        />
+      {/if}
+
+      {#if $$slots.actions && !hideActions && (adaptive === 'freezeActions' || adaptive === 'doubleRow' || adaptive === 'autoExtra')}
+        <div class="hulyHeader-buttonsGroup actions no-print">
+          <slot name="actions" {doubleRow} />
+        </div>
+      {/if}
+      {#if closeButton}
+        {#if type !== 'type-popup'}<div class="hulyHeader-divider no-print" />{/if}
+        {#if closeOnEscape}
+          <div class="hulyHotKey-item no-print">Esc</div>
+        {/if}
+        <ButtonIcon icon={IconClose} kind={'tertiary'} size={'small'} noPrint on:click={() => dispatch('close')} />
+      {/if}
+    </div>
+    <!-- <div class="hulyHeader-row__divider" /> -->
+    <div class="hulyHeader-row no-print" class:between={$$slots.search} class:reverse={!$$slots.search}>
+      {#if $$slots.presence && !hidePresence}
+        <div class="hulyHeader-buttonsGroup presence no-print">
+          <slot name="presence" {doubleRow} />
+        </div>
+      {/if}
+      {#if $$slots.search}
+        <div class="hulyHeader-buttonsGroup search">
+          <slot name="search" {doubleRow} />
+        </div>
+      {/if}
+      {#if $$slots.extra && !hideExtra && (adaptive === 'doubleRow' || adaptive === 'autoExtra')}
+        <div
+          class="hulyHeader-buttonsGroup extra"
+          class:overflow={overflowExtra}
+          use:resizeObserver={(element) => {
+            if (extraWidth !== element.clientWidth) extraWidth = element.clientWidth
+          }}
+        >
+          <slot name="extra" {doubleRow} />
+        </div>
+      {/if}
+      {#if $$slots.actions && !hideActions && !(adaptive === 'freezeActions' || adaptive === 'doubleRow' || adaptive === 'autoExtra')}
+        <div class="hulyHeader-buttonsGroup actions">
+          <slot name="actions" {doubleRow} />
+        </div>
+      {/if}
+    </div>
+  {:else}
+    {#if allowFullsize}
+      <ButtonIcon
+        icon={$deviceInfo.navigator.visible ? IconMaximize : IconMinimize}
+        kind={'tertiary'}
+        size={'small'}
+        noPrint
+        on:click={() => ($deviceInfo.navigator.visible = !$deviceInfo.navigator.visible)}
+      />
+      <div class="hulyHeader-divider no-print" />
+    {/if}
+    {#if $$slots.beforeTitle && !hideBefore}
+      <div class="hulyHeader-buttonsGroup before mr-2 no-print">
+        <slot name="beforeTitle" {doubleRow} />
+      </div>
+    {/if}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="hulyHeader-titleGroup"
+      class:withDescription={$$slots.description && !hideDescription}
+      class:notGrow={adaptive === 'autoExtra'}
+      on:click
+    >
+      {#if $$slots.description && !hideDescription}
+        <slot />
+        <slot name="description" />
+      {:else}
+        <slot />
+      {/if}
+    </div>
+
+    {#if adaptive === 'autoExtra'}
+      <div
+        class="hulyHeader-spaceFiller"
+        bind:this={spaceFiller}
+        use:resizeObserver={(element) => {
+          if (spaceWidth !== element.clientWidth) spaceWidth = element.clientWidth
+          if (!doubleExtra && element.clientWidth <= 16) doubleExtra = true
+        }}
+      />
+    {/if}
+
+    {#if $$slots.presence && !hidePresence}
+      <div class="hulyHeader-buttonsGroup presence no-print">
+        <slot name="presence" {doubleRow} />
+      </div>
+    {/if}
+
+    {#if $$slots.search && !hideSearch}
+      <div class="hulyHeader-buttonsGroup search no-print">
+        <slot name="search" {doubleRow} />
+      </div>
+      {#if $$slots.actions && !hideActions}<div class="hulyHeader-divider no-print" />{/if}
+    {/if}
+
+    {#if $$slots.extra && !hideExtra}
+      <div
+        class="hulyHeader-buttonsGroup extra"
+        class:overflow={overflowExtra}
+        use:resizeObserver={(element) => {
+          if (extraWidth !== element.clientWidth) extraWidth = element.clientWidth
+        }}
+      >
+        <slot name="extra" {doubleRow} />
+      </div>
+    {/if}
+    {#if $$slots.actions && !hideActions}
+      <div class="hulyHeader-buttonsGroup actions no-print">
+        <slot name="actions" {doubleRow} />
+      </div>
+    {/if}
+    {#if closeButton}
+      {#if type !== 'type-popup'}<div class="hulyHeader-divider no-print" />{/if}
+      {#if closeOnEscape}
+        <div class="hulyHotKey-item no-print">Esc</div>
+      {/if}
+      <ButtonIcon icon={IconClose} kind={'tertiary'} size={'small'} noPrint on:click={() => dispatch('close')} />
+    {/if}
+  {/if}
+</div>

package/src/components/HlsVideo.svelte

@@ -0,0 +1,170 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  import HLS, { LoadPolicy } from 'hls.js'
+  import { onDestroy, onMount } from 'svelte'
+  import Plyr from 'plyr'
+
+  export let src: string
+  export let hlsSrc: string
+  export let hlsThumbnail = ''
+  export let name: string | undefined = undefined
+  export let preload = true
+
+  let video: HTMLVideoElement | null = null
+  let hls: HLS | null = null
+  let player: Plyr | null = null
+
+  const options: Plyr.Options = {}
+
+  function initialize (src: string): void {
+    if (video === null) {
+      return
+    }
+
+    if (!HLS.isSupported()) {
+      video.src = src
+      player = new Plyr(video, options)
+      return
+    }
+    const originalUrl = new URL(src)
+    hls?.destroy()
+    player?.destroy()
+    const loadPolicy: LoadPolicy = {
+      default: {
+        maxTimeToFirstByteMs: Infinity,
+        maxLoadTimeMs: 1000 * 60,
+        timeoutRetry: {
+          maxNumRetry: 20,
+          retryDelayMs: 100,
+          maxRetryDelayMs: 250
+        },
+        errorRetry: {
+          maxNumRetry: 20,
+          retryDelayMs: 100,
+          maxRetryDelayMs: 250,
+          shouldRetry: (retryConfig, retryCount) => retryCount < (retryConfig?.maxNumRetry ?? 10)
+        }
+      }
+    }
+    hls = new HLS({
+      manifestLoadPolicy: loadPolicy,
+      playlistLoadPolicy: loadPolicy,
+      autoStartLoad: preload,
+      xhrSetup: (xhr, url) => {
+        const urlObj = new URL(url)
+        if (urlObj.searchParams.size > 1) {
+          return
+        }
+        const workspace = originalUrl.searchParams.get('workspace')
+        if (workspace == null) {
+          return
+        }
+        xhr.withCredentials = true
+        const fileName = urlObj.href.substring(urlObj.href.lastIndexOf('/') + 1)
+        urlObj.searchParams.append('file', fileName)
+        urlObj.searchParams.append('workspace', workspace)
+        xhr.open('GET', urlObj.toString(), true)
+      }
+    })
+    hls.loadSource(hlsSrc)
+    hls.attachMedia(video)
+    video.poster = hlsThumbnail
+    if (!preload) {
+      video.onplay = () => {
+        if (video === null) {
+          return
+        }
+        video.onplay = null
+        hls?.startLoad()
+      }
+    }
+    hls.on(HLS.Events.MANIFEST_PARSED, () => {
+      if (hls === null) {
+        return
+      }
+      const availableQualities = hls?.levels.map((l) => l.height)
+      availableQualities.unshift(0)
+
+      options.quality = {
+        default: 0,
+        options: availableQualities,
+        forced: true,
+        onChange: (e) => {
+          updateQuality(e)
+        }
+      }
+
+      options.captions = {
+        active: false
+      }
+      options.i18n = {
+        qualityLabel: {
+          0: 'Auto'
+        }
+      }
+      if (video === null) {
+        return
+      }
+      player = new Plyr(video, options)
+    })
+  }
+
+  $: initialize(src)
+
+  onMount(() => {
+    initialize(src)
+  })
+
+  onDestroy(() => {
+    hls?.destroy()
+    player?.destroy()
+  })
+
+  function updateQuality (newQuality: number): void {
+    if (hls === null) {
+      return
+    }
+    if (newQuality === 0) {
+      hls.currentLevel = -1
+    } else {
+      hls.levels.forEach((level, levelIndex) => {
+        if (level.height === newQuality && hls !== null) {
+          hls.currentLevel = levelIndex
+        }
+      })
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-media-has-caption -->
+<video bind:this={video} width="100%" height="100%" preload={preload ? 'auto' : 'none'} controls />
+
+<style lang="scss">
+  video {
+    border-radius: inherit;
+    object-fit: contain;
+  }
+
+  video::-webkit-media-controls {
+    visibility: hidden;
+  }
+
+  video::-webkit-media-controls-enclosure {
+    visibility: visible;
+  }
+  @import 'plyr/dist/plyr.css';
+</style>

package/src/components/Hotkey.svelte

@@ -0,0 +1,50 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { AnySvelteComponent } from '../types'
+  import Icon from './Icon.svelte'
+  import KeyShift from './icons/KeyShift.svelte'
+  import KeyOption from './icons/KeyOption.svelte'
+  import KeyCommand from './icons/KeyCommand.svelte'
+
+  export let key: string
+
+  const predefinedKeys: Record<string, AnySvelteComponent> = {
+    shift: KeyShift,
+    option: KeyOption,
+    command: KeyCommand
+  }
+
+  $: isPredefinedKey = key in predefinedKeys
+</script>
+
+<span class="hotkey flex-center min-w-4 h-4 font-regular-11" class:text={!isPredefinedKey}>
+  {#if isPredefinedKey}
+    <Icon icon={predefinedKeys[key]} size="x-small" />
+  {:else}
+    {key}
+  {/if}
+</span>
+
+<style lang="scss">
+  .hotkey {
+    border-radius: var(--min-BorderRadius);
+    background-color: var(--global-ui-hover-BackgroundColor);
+
+    &.text {
+      padding: 0 var(--spacing-0_5);
+    }
+  }
+</style>