@bluerobotics/bluevue 0.1.1 → 0.2.1

package/src/components/BlueTooltip.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { Placement } from '@floating-ui/vue'
+import { onBeforeUnmount } from 'vue'
+
+import { useBluePopover } from '../composables/useBluePopover'
+
+/**
+ * A label for whatever it wraps, shown on hover and on keyboard focus. It opens in the top layer,
+ * so a panel that clips its own overflow cannot cut it off.
+ */
+const props = defineProps<{
+  text: string
+  /** Which side it hangs off (default 'top'). */
+  placement?: Placement
+  /** How long the pointer has to rest before it appears, in ms (default 300). */
+  openDelay?: number
+  /** Wraps its content and shows nothing, for a hint that only applies sometimes. */
+  disabled?: boolean
+  theme?: 'light' | 'dark'
+}>()
+
+const { anchorRef, popoverRef, popoverId, isPositioned, floatingStyles, show, hide, onToggle } = useBluePopover({
+  placement: props.placement ?? 'top',
+})
+
+// The rest before it appears is what keeps a pointer crossing a row of controls from trailing
+// tooltips behind it.
+let openTimer: number | null = null
+
+const cancelOpen = (): void => {
+  if (openTimer === null) return
+  clearTimeout(openTimer)
+  openTimer = null
+}
+
+const open = (): void => {
+  if (props.disabled || !props.text) return
+  cancelOpen()
+  openTimer = window.setTimeout(() => {
+    openTimer = null
+    void show()
+  }, props.openDelay ?? 300)
+}
+
+const close = (): void => {
+  cancelOpen()
+  hide()
+}
+
+onBeforeUnmount(cancelOpen)
+</script>
+
+<template>
+  <span
+    ref="anchorRef"
+    class="inline-flex"
+    :aria-describedby="text && !disabled ? popoverId : undefined"
+    @mouseenter="open"
+    @mouseleave="close"
+    @focusin="open"
+    @focusout="close"
+    @keydown.escape="close"
+  >
+    <slot />
+
+    <!-- Manual rather than auto: a tooltip is dismissed by the pointer leaving what it describes,
+         and an auto popover would also take the next click on the page for itself. -->
+    <div
+      :id="popoverId"
+      ref="popoverRef"
+      popover="manual"
+      class="bluevue-popover"
+      :style="floatingStyles"
+      @toggle="onToggle"
+    >
+      <div
+        role="tooltip"
+        class="bluevue-elevation-5 max-w-[280px] rounded-[4px] px-2 py-1 text-xs leading-snug transition-opacity duration-150"
+        :class="[
+          theme === 'light' ? 'bg-white text-black' : 'bg-[#333333f2] text-white',
+          isPositioned ? 'opacity-100' : 'opacity-0',
+        ]"
+      >
+        {{ text }}
+      </div>
+    </div>
+  </span>
+</template>

package/src/components/BlueWindRose.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { useBluePopover } from '../composables/useBluePopover'
+import BlueIcon from './BlueIcon.vue'
+import BlueInput from './BlueInput.vue'
+
+const SIZE = 176
+const CENTER = SIZE / 2
+const TICKS = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330] as const
+const CARDINALS: { label: string; deg: number }[] = [
+  { label: 'N', deg: 0 },
+  { label: 'E', deg: 90 },
+  { label: 'S', deg: 180 },
+  { label: 'W', deg: 270 },
+]
+
+/**
+ * A heading around a circle: typed in the field, or pointed on the rose that opens from the
+ * compass beside it. The value wraps at the ends, so 360° and 0° are the same direction.
+ */
+const props = defineProps<{
+  modelValue: number | null
+  label?: string
+  name?: string
+  /** Start of the circle (default 0). */
+  min?: number
+  /** End of the circle, wrapping back to min (default 360). */
+  max?: number
+  step?: number
+  suffix?: string
+  placeholder?: string
+  disabled?: boolean
+  theme?: 'light' | 'dark'
+  height?: string
+  width?: string
+  infoTooltip?: string
+  errorMessages?: string[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+}>()
+
+const {
+  anchorRef,
+  popoverRef,
+  popoverId,
+  activatorProps,
+  isPositioned,
+  floatingStyles,
+  onToggle,
+} = useBluePopover({ placement: 'bottom-end' })
+
+const roseRef = ref<SVGSVGElement | null>(null)
+const dragging = ref(false)
+
+const min = computed(() => props.min ?? 0)
+const max = computed(() => props.max ?? 360)
+const step = computed(() => (props.step && props.step > 0 ? props.step : 1))
+
+const period = computed(() => {
+  const span = max.value - min.value
+  return span > 0 ? span : 360
+})
+
+const current = computed(() => (typeof props.modelValue === 'number' ? props.modelValue : min.value))
+
+const roseDeg = computed(() => ((wrap(current.value) - min.value) / period.value) * 360)
+
+const isDark = computed(() => props.theme !== 'light')
+
+function wrap(value: number): number {
+  return min.value + ((((value - min.value) % period.value) + period.value) % period.value)
+}
+
+function snap(value: number): number {
+  return min.value + Math.round((value - min.value) / step.value) * step.value
+}
+
+function commit(value: number): void {
+  emit('update:modelValue', wrap(snap(value)))
+}
+
+function onTyped(value: string | number | null): void {
+  if (typeof value !== 'number' || !Number.isFinite(value)) return
+  if (value < min.value || value >= max.value) {
+    emit('update:modelValue', wrap(value))
+    return
+  }
+  emit('update:modelValue', value)
+}
+
+function valueFromEvent(event: PointerEvent): number {
+  const svg = roseRef.value
+  if (!svg) return current.value
+  const rect = svg.getBoundingClientRect()
+  const deg =
+    (Math.atan2(event.clientX - (rect.left + rect.width / 2), rect.top + rect.height / 2 - event.clientY) *
+      180) /
+    Math.PI
+  const heading = deg < 0 ? deg + 360 : deg
+  return min.value + (heading / 360) * period.value
+}
+
+function onPointerDown(event: PointerEvent): void {
+  if (props.disabled) return
+  dragging.value = true
+  roseRef.value?.setPointerCapture(event.pointerId)
+  commit(valueFromEvent(event))
+}
+
+function onPointerMove(event: PointerEvent): void {
+  if (!dragging.value) return
+  commit(valueFromEvent(event))
+}
+
+function onPointerUp(event: PointerEvent): void {
+  if (!dragging.value) return
+  dragging.value = false
+  roseRef.value?.releasePointerCapture(event.pointerId)
+}
+
+function tickPoint(deg: number, radius: number): { x: number; y: number } {
+  const rad = ((deg - 90) * Math.PI) / 180
+  return { x: CENTER + Math.cos(rad) * radius, y: CENTER + Math.sin(rad) * radius }
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <BlueInput
+      :model-value="modelValue"
+      type="number"
+      :label="label"
+      :name="name"
+      :suffix="suffix ?? '°'"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :theme="theme"
+      :height="height"
+      :width="width"
+      :info-tooltip="infoTooltip"
+      :error-messages="errorMessages"
+      :step="step"
+      @update:model-value="onTyped"
+    >
+      <template #prepend>
+        <button
+          ref="anchorRef"
+          v-bind="activatorProps"
+          type="button"
+          :disabled="disabled"
+          class="flex items-center justify-center rounded-[4px] p-[2px]"
+          :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-[#ffffff14]'"
+          :aria-label="label ? `Choose ${label}` : 'Choose heading'"
+          :title="label ? `Choose ${label}` : 'Choose heading'"
+        >
+          <BlueIcon
+            name="mdi-compass-rose"
+            :size="16"
+            :class="isDark ? 'text-white' : 'text-black'"
+          />
+        </button>
+      </template>
+    </BlueInput>
+
+    <div
+      :id="popoverId"
+      ref="popoverRef"
+      popover
+      class="bluevue-popover bluevue-popover--dimmed"
+      :style="floatingStyles"
+      @toggle="onToggle"
+    >
+      <!-- No padding of its own: the rose is drawn 6px inside its own box, which is the margin the
+           round card keeps outside the compass ring. -->
+      <div
+        class="bluevue-elevation-5 rounded-full"
+        :class="[
+          isDark ? 'bg-[var(--bluevue-surface)] text-white' : 'bg-white text-black',
+          isPositioned ? 'opacity-100' : 'opacity-0',
+        ]"
+      >
+        <svg
+          ref="roseRef"
+          :width="SIZE"
+          :height="SIZE"
+          :viewBox="`0 0 ${SIZE} ${SIZE}`"
+          class="block touch-none select-none"
+          :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+          @pointerdown.prevent="onPointerDown"
+          @pointermove="onPointerMove"
+          @pointerup="onPointerUp"
+          @pointercancel="onPointerUp"
+        >
+          <circle
+            :cx="CENTER"
+            :cy="CENTER"
+            :r="CENTER - 6"
+            fill="transparent"
+            :stroke="isDark ? '#ffffff22' : '#00000022'"
+            stroke-width="1"
+          />
+          <circle
+            :cx="CENTER"
+            :cy="CENTER"
+            :r="CENTER - 22"
+            :fill="isDark ? '#ffffff0d' : '#0000000d'"
+          />
+          <line
+            v-for="deg in TICKS"
+            :key="deg"
+            :x1="tickPoint(deg, deg % 90 === 0 ? 70 : 74).x"
+            :y1="tickPoint(deg, deg % 90 === 0 ? 70 : 74).y"
+            :x2="tickPoint(deg, 80).x"
+            :y2="tickPoint(deg, 80).y"
+            :stroke="isDark ? '#ffffff44' : '#00000044'"
+            :stroke-width="deg % 90 === 0 ? 2 : 1"
+          />
+          <text
+            v-for="cardinal in CARDINALS"
+            :key="cardinal.label"
+            :x="tickPoint(cardinal.deg, 58).x"
+            :y="tickPoint(cardinal.deg, 58).y"
+            text-anchor="middle"
+            dominant-baseline="middle"
+            class="text-[11px] font-medium"
+            :fill="isDark ? '#ffffff88' : '#00000088'"
+          >
+            {{ cardinal.label }}
+          </text>
+          <defs>
+            <filter
+              :id="`${popoverId}-arrow-shadow`"
+              x="-50%"
+              y="-50%"
+              width="200%"
+              height="200%"
+            >
+              <feDropShadow
+                dx="0"
+                dy="1"
+                stdDeviation="1.2"
+                flood-color="#000000"
+                flood-opacity="0.45"
+              />
+            </filter>
+          </defs>
+          <g
+            :transform="`rotate(${roseDeg} ${CENTER} ${CENTER})`"
+            :filter="`url(#${popoverId}-arrow-shadow)`"
+          >
+            <path
+              :d="`M ${CENTER} 18 L ${CENTER + 7} 36 L ${CENTER + 2.2} 36 L ${CENTER + 2.2} ${CENTER} L ${CENTER - 2.2} ${CENTER} L ${CENTER - 2.2} 36 L ${CENTER - 7} 36 Z`"
+              fill="#F5C400"
+            />
+            <circle
+              :cx="CENTER"
+              :cy="CENTER"
+              r="3.5"
+              fill="#F5C400"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>

package/src/composables/useBlueLoading.ts

@@ -0,0 +1,38 @@
+import { readonly, type Ref, ref } from 'vue'
+
+export interface BlueLoadingState {
+  show: boolean
+  message: string
+  dismissible: boolean
+}
+
+interface BlueLoadingApi {
+  loading: Readonly<Ref<BlueLoadingState>>
+  /**
+   * Raises the overlay. Leave it blocking for anything that is writing to a vehicle: dismissing it
+   * would leave the page live over a change still in flight. A wait that only delays information,
+   * such as the first read of a vehicle, can be dismissible.
+   */
+  showLoading: (message?: string, dismissible?: boolean) => void
+  hideLoading: () => void
+}
+
+// One overlay for the whole application, so two operations cannot each raise their own and leave
+// the second one holding the page after the first has finished.
+const loading = ref<BlueLoadingState>({ show: false, message: 'Working…', dismissible: false })
+
+const showLoading = (message = 'Working…', dismissible = false): void => {
+  loading.value = { show: true, message, dismissible }
+}
+
+const hideLoading = (): void => {
+  loading.value = { ...loading.value, show: false }
+}
+
+/**
+ * The application's blocking wait, which BlueApp renders as a BlueLoadingDialog.
+ * @returns {BlueLoadingApi} The state, and the ways to raise and lower it.
+ */
+export function useBlueLoading(): BlueLoadingApi {
+  return { loading: readonly(loading) as Readonly<Ref<BlueLoadingState>>, showLoading, hideLoading }
+}

package/src/composables/useBlueOs.ts

@@ -0,0 +1,154 @@
+import { onBeforeUnmount, onMounted, ref, type Ref, watch } from 'vue'
+
+import { BlueOsError, blueOsService, isBlueOsExtension } from '../services/blueos'
+
+const beacon = blueOsService('beacon')
+const bag = blueOsService('bag')
+const versionChooser = blueOsService('version-chooser')
+const customization = blueOsService('customization')
+
+export interface BlueOsHost {
+  /** What the vehicle is called, which is what an extension should call it too. */
+  vehicleName: Ref<string | null>
+  /** The address the vehicle answers to, without the .local suffix. */
+  hostname: Ref<string | null>
+  /** The BlueOS image currently running, as its docker tag. */
+  version: Ref<string | null>
+  /** The vehicle's primary colour, as #RRGGBB. Null until it arrives, and when it cannot. */
+  primaryColor: Ref<string | null>
+  /** Whether BlueOS itself is in dark mode. Extensions are drawn dark either way. */
+  isDarkTheme: Ref<boolean>
+  /** Whether BlueOS is in pirate mode, which is what hides or shows developer-only controls. */
+  isPirateMode: Ref<boolean>
+  /** Whether BlueOS is serving this page, as opposed to a development server. */
+  embedded: boolean
+  /** Why the last identity read failed, or null while the vehicle answered. */
+  error: Ref<BlueOsError | null>
+  /** Reads everything again, which a page does after something else may have changed it. */
+  refresh: () => Promise<void>
+}
+
+// One set of values for the whole page: BlueApp and whoever else asks share the same read rather
+// than each hitting the vehicle for the same three strings.
+const vehicleName = ref<string | null>(null)
+const hostname = ref<string | null>(null)
+const version = ref<string | null>(null)
+const primaryColor = ref<string | null>(null)
+const isDarkTheme = ref(true)
+const isPirateMode = ref(false)
+const error = ref<BlueOsError | null>(null)
+
+const take = async <T>(task: Promise<T>, write: (value: T) => void): Promise<boolean> => {
+  try {
+    write(await task)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const refresh = async (): Promise<void> => {
+  const [named, addressed, imaged] = await Promise.all([
+    take(beacon.get<string>('vehicle_name'), (value) => {
+      vehicleName.value = value
+    }),
+    take(beacon.get<string>('hostname'), (value) => {
+      hostname.value = value
+    }),
+    take(versionChooser.get<{ repository: string; tag: string }>('version/current'), (image) => {
+      version.value = image.tag
+    }),
+  ])
+
+  // Theme and pirate mode are extras: a vehicle that answers its name but not its colour is still
+  // a vehicle, and the kit keeps the colours it shipped with.
+  await Promise.all([
+    take(customization.get<{ primary: string }>('theme'), (theme) => {
+      primaryColor.value = theme.primary
+    }),
+    take(bag.get<{ is_dark_theme?: boolean; is_pirate_mode?: boolean }>('get/settings'), (settings) => {
+      if (typeof settings.is_dark_theme === 'boolean') isDarkTheme.value = settings.is_dark_theme
+      if (typeof settings.is_pirate_mode === 'boolean') isPirateMode.value = settings.is_pirate_mode
+    }),
+  ])
+
+  error.value = named || addressed || imaged
+    ? null
+    : new BlueOsError('Could not reach the vehicle', beacon.url('vehicle_name'), 0)
+}
+
+/**
+ * What the vehicle running this extension says about itself. Read once when the first consumer
+ * mounts, and again whenever it is asked for, since none of it changes on its own. Each field
+ * stays at its default when that particular call fails, so a page opened off the vehicle still
+ * renders.
+ * @returns {BlueOsHost} The vehicle's name, address, version and look, and the means to read them again.
+ */
+export const useBlueOs = (): BlueOsHost => {
+  onMounted(() => {
+    void refresh()
+  })
+
+  return {
+    vehicleName,
+    hostname,
+    version,
+    primaryColor,
+    isDarkTheme,
+    isPirateMode,
+    embedded: isBlueOsExtension(),
+    error,
+    refresh,
+  }
+}
+
+/**
+ * A value kept on the vehicle rather than in this browser, so an extension is configured once and
+ * found configured from every machine that opens it. It reads as the fallback until the stored
+ * value arrives, and writes itself back, at most twice a second, whenever it is changed.
+ * @param {string} path Where it is kept, as 'extension-name/setting'. Slashes nest.
+ * @param {T} fallback What it reads as while there is nothing stored, and if the read fails.
+ * @returns {Ref<T>} The value, which is written back on assignment.
+ */
+export const useBlueOsSetting = <T>(path: string, fallback: T): Ref<T> => {
+  const value = ref(fallback) as Ref<T>
+  // Assignments made while the stored value is still on its way would otherwise be written back as
+  // if they were the reader's, and the arriving value would then overwrite what the reader chose.
+  let settled = false
+  let pending: ReturnType<typeof setTimeout> | undefined
+
+  onMounted(async () => {
+    try {
+      value.value = await bag.get<T>(`get/${path}`)
+    } catch (raised) {
+      // 400 is what the bag answers with for a path holding nothing, which is the ordinary state
+      // of a setting nobody has changed yet. Anything else is a failure, and the fallback stands.
+      if ((raised as BlueOsError).status !== 400) console.warn(`Could not read ${path}:`, raised)
+    }
+    settled = true
+  })
+
+  const save = (): void => {
+    bag.post(`set/${path}`, value.value).catch((raised) => console.warn(`Could not save ${path}:`, raised))
+  }
+
+  const stop = watch(value, () => {
+    if (!settled) return
+    clearTimeout(pending)
+    pending = setTimeout(() => {
+      pending = undefined
+      save()
+    }, 500)
+  }, { deep: true })
+
+  onBeforeUnmount(() => {
+    stop()
+    // A page closed within half a second of a change would otherwise lose it.
+    if (pending !== undefined) {
+      clearTimeout(pending)
+      save()
+    }
+  })
+
+  return value
+}

package/src/composables/useBlueSnackbar.ts

@@ -0,0 +1,89 @@
+import { readonly, type Ref, ref } from 'vue'
+
+export type BlueNoticeSeverity = 'success' | 'error' | 'warning' | 'info'
+
+export interface BlueNotice {
+  id: number
+  text: string
+  severity: BlueNoticeSeverity
+  /** How many of the same message arrived in a row, so a repeat counts rather than stacks. */
+  repeats: number
+}
+
+interface BlueNoticeOptions {
+  /** Default 'info'. */
+  severity?: BlueNoticeSeverity
+  /** How long it stays, in ms. 0 keeps it until it is dismissed, which errors do by default. */
+  timeout?: number
+}
+
+interface BlueSnackbarApi {
+  notices: Readonly<Ref<readonly BlueNotice[]>>
+  /** Says something happened. Returns the notice's id, for dismissing it early. */
+  notify: (text: string, options?: BlueNoticeOptions) => number
+  /** Says a request failed, in whatever terms the failure came back in. */
+  notifyError: (error: unknown, fallback?: string) => number
+  dismiss: (id: number) => void
+}
+
+const DEFAULT_TIMEOUT = 5000
+
+// Enough to read a burst without the stack becoming the page. Anything older than the last few is
+// gone from the screen before it could be read anyway.
+const MAX_ON_SCREEN = 4
+
+// One queue for the whole application: the notices outlive whichever component raised them, and
+// the bar rendering them is mounted once, at the root.
+const notices = ref<BlueNotice[]>([])
+const timers = new Map<number, number>()
+let lastId = 0
+
+const clearTimer = (id: number): void => {
+  const timer = timers.get(id)
+  if (timer === undefined) return
+  clearTimeout(timer)
+  timers.delete(id)
+}
+
+const dismiss = (id: number): void => {
+  clearTimer(id)
+  notices.value = notices.value.filter((notice) => notice.id !== id)
+}
+
+const notify = (text: string, options: BlueNoticeOptions = {}): number => {
+  const severity = options.severity ?? 'info'
+  // A failure is worth acting on, so it waits to be dismissed rather than passing while the reader
+  // is looking elsewhere.
+  const timeout = options.timeout ?? (severity === 'error' ? 0 : DEFAULT_TIMEOUT)
+
+  // A retry loop saying the same thing every second should read as one message that keeps
+  // happening, not as a column of identical ones.
+  const last = notices.value[notices.value.length - 1]
+  if (last && last.text === text && last.severity === severity) {
+    last.repeats += 1
+    clearTimer(last.id)
+    if (timeout > 0) timers.set(last.id, window.setTimeout(() => dismiss(last.id), timeout))
+    return last.id
+  }
+
+  const notice: BlueNotice = { id: ++lastId, text, severity, repeats: 1 }
+  notices.value = [...notices.value, notice].slice(-MAX_ON_SCREEN)
+  if (timeout > 0) timers.set(notice.id, window.setTimeout(() => dismiss(notice.id), timeout))
+  return notice.id
+}
+
+// An axios rejection carries the server's own words, which say more than the status line does.
+const notifyError = (error: unknown, fallback = 'Request failed'): number => {
+  const detail = (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail
+  const message = (error as Error)?.message
+  return notify(detail || message || fallback, { severity: 'error' })
+}
+
+/**
+ * The application's notices. Raise them from anywhere; BlueSnackbar, which BlueApp mounts for you,
+ * is what puts them on screen.
+ * @returns {BlueSnackbarApi} The queue, and the ways to add to and remove from it.
+ */
+export function useBlueSnackbar(): BlueSnackbarApi {
+  return { notices: readonly(notices), notify, notifyError, dismiss }
+}

package/src/index.ts

@@ -1,11 +1,51 @@
+export { default as BlueApp } from './components/BlueApp.vue'
+export { default as BlueBanner } from './components/BlueBanner.vue'
+export { default as BlueBannerGroup } from './components/BlueBannerGroup.vue'
+export { default as BlueButton } from './components/BlueButton.vue'
 export { default as BlueButtonGroup } from './components/BlueButtonGroup.vue'
+export { default as BlueCard } from './components/BlueCard.vue'
+export { default as BlueCheckbox } from './components/BlueCheckbox.vue'
+export { default as BlueChip } from './components/BlueChip.vue'
+export { default as BlueConfirmDialog } from './components/BlueConfirmDialog.vue'
+export { default as BlueDialog } from './components/BlueDialog.vue'
 export { default as BlueExpansiblePanel } from './components/BlueExpansiblePanel.vue'
+export { default as BlueFileDrop } from './components/BlueFileDrop.vue'
+export { default as BlueIcon } from './components/BlueIcon.vue'
 export { default as BlueInput } from './components/BlueInput.vue'
+export { default as BlueStepsDialog, type BlueStep } from './components/BlueStepsDialog.vue'
 export { default as BlueLoadingDialog } from './components/BlueLoadingDialog.vue'
 export { default as BlueMenu, type BlueMenuItem } from './components/BlueMenu.vue'
+export { default as BlueProgressBar } from './components/BlueProgressBar.vue'
 export { default as BluePromptDialog } from './components/BluePromptDialog.vue'
+export { default as BlueRadioGroup, type BlueRadioItem } from './components/BlueRadioGroup.vue'
+export { default as BlueSection } from './components/BlueSection.vue'
 export { default as BlueSelect } from './components/BlueSelect.vue'
 export { default as BlueSlider } from './components/BlueSlider.vue'
+export { default as BlueSnackbar } from './components/BlueSnackbar.vue'
+export { default as BlueSpinner } from './components/BlueSpinner.vue'
+export { default as BlueStat } from './components/BlueStat.vue'
 export { default as BlueSwitch } from './components/BlueSwitch.vue'
+export { default as BlueTable, type BlueColumn } from './components/BlueTable.vue'
+export { default as BlueTabs, type BlueTab } from './components/BlueTabs.vue'
+export { default as BlueTextarea } from './components/BlueTextarea.vue'
+export { default as BlueTooltip } from './components/BlueTooltip.vue'
+export { default as BlueWindRose } from './components/BlueWindRose.vue'
 
+export { type BlueLoadingState, useBlueLoading } from './composables/useBlueLoading'
+export { type BlueOsHost, useBlueOs, useBlueOsSetting } from './composables/useBlueOs'
 export { useBluePopover } from './composables/useBluePopover'
+export { type BlueNotice, type BlueNoticeSeverity, useBlueSnackbar } from './composables/useBlueSnackbar'
+
+export type { BannerContent, BannerSeverity } from './types/banner'
+
+export {
+  BlueOsError,
+  type BlueOsService,
+  blueOsService,
+  type BlueOsServiceOptions,
+  isBlueOsExtension,
+  setBlueOsHost,
+} from './services/blueos'
+
+export { downloadJson, pickJsonFile } from './utils/files'
+export { applyBlueTheme, type BlueTheme } from './utils/theme'