@proj-airi/ui 0.9.0-rc.1 → 0.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.9.0-rc.1",
+  "version": "0.10.0",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -26,8 +26,8 @@
     "@moeru/std": "0.1.0-beta.17",
     "@vueuse/core": "^14.2.1",
     "floating-vue": "^5.2.2",
-    "reka-ui": "^2.9.2",
-    "vue": "^3.5.30"
+    "reka-ui": "^2.9.6",
+    "vue": "^3.5.32"
   },
   "devDependencies": {
     "@vue-macros/volar": "3.0.0-beta.8",

package/src/components/form/field/field-input.vue

@@ -11,7 +11,21 @@ const props = withDefaults(defineProps<{
   label?: string
   description?: string
   placeholder?: string
+  /**
+   * Marks the field as required: enables native HTML5 `required` validation
+   * on the underlying input and (by default) renders a `*` next to the label.
+   * Use `hideRequiredMark` when the form already conveys required-ness
+   * through other means (e.g. all fields are required).
+   */
   required?: boolean
+  /**
+   * Suppress the `*` indicator next to the label without disabling the
+   * underlying HTML5 `required` validation. Useful for forms where every
+   * field is required so the marker would just add noise.
+   *
+   * @default false
+   */
+  hideRequiredMark?: boolean
   type?: InputType
   inputClass?: string
   singleLine?: boolean
@@ -30,7 +44,7 @@ const modelValue = defineModel<T>({ required: false })
           <slot name="label">
             {{ props.label }}
           </slot>
-          <span v-if="props.required" class="text-red-500">*</span>
+          <span v-if="props.required && !props.hideRequiredMark" class="text-red-500">*</span>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400" text-wrap>
           <slot name="description">
@@ -43,6 +57,7 @@ const modelValue = defineModel<T>({ required: false })
         v-model.number="modelValue"
         :type="props.type"
         :placeholder="props.placeholder"
+        :required="props.required"
         :class="props.inputClass"
       />
       <Input
@@ -50,6 +65,7 @@ const modelValue = defineModel<T>({ required: false })
         v-model="modelValue"
         :type="props.type"
         :placeholder="props.placeholder"
+        :required="props.required"
         :class="props.inputClass"
       />
       <textarea
@@ -57,6 +73,7 @@ const modelValue = defineModel<T>({ required: false })
         v-model="modelValue as string | undefined"
         :type="props.type"
         :placeholder="props.placeholder"
+        :required="props.required"
         :class="[
           props.inputClass,
           'focus:primary-300 dark:focus:primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',

package/src/components/form/input/input.vue

@@ -18,6 +18,12 @@ const props = withDefaults(defineProps<{
   variant?: InputVariant // Button style variant
   size?: InputSize // Button size variant
   theme?: InputTheme // Button theme
+  /**
+   * Forwarded to the underlying `<input>` element so the browser participates
+   * in form validation (HTML5 `:invalid` styling and submit blocking) without
+   * the consumer having to drop down to raw HTML.
+   */
+  required?: boolean
 }>(), {
   variant: 'primary',
   size: 'md',
@@ -69,6 +75,7 @@ const variantClasses: Record<InputVariant, Record<InputTheme, {
     <input
       v-model.number="modelValue"
       :type="props.type || 'text'"
+      :required="props.required"
       :class="[
         'transition-all duration-200 ease-in-out',
         'cursor-disabled:not-allowed',
@@ -80,6 +87,7 @@ const variantClasses: Record<InputVariant, Record<InputTheme, {
     <input
       v-model="modelValue"
       :type="props.type || 'text'"
+      :required="props.required"
       :class="[
         'transition-all duration-200 ease-in-out',
         'cursor-disabled:not-allowed',

package/src/components/form/select/select.vue

@@ -40,6 +40,7 @@ const props = withDefaults(defineProps<{
   contentWidth?: string | number
   shape?: 'rounded' | 'default'
   variant?: 'blurry' | 'default'
+  class?: string | string[]
 }>(), {
   placeholder: 'Select an option',
   disabled: false,
@@ -112,6 +113,7 @@ function toCssSize(value?: string | number): string | undefined {
     <SelectTrigger
       :class="[
         'group',
+        ...Array.isArray(props.class) ? props.class : [props.class],
         'w-full inline-flex items-center justify-between border px-3 leading-none h-9 gap-[5px] outline-none',
         props.shape === 'rounded' ? 'rounded-full' : 'rounded-lg',
         'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-400 dark:data-[placeholder]:text-neutral-500',

package/src/components/form/select-tab/select-tab.vue

@@ -13,11 +13,13 @@ const props = withDefaults(defineProps<{
   options: SelectTabOption[]
   disabled?: boolean
   readonly?: boolean
-  size?: 'sm' | 'md'
+  size?: 'xs' | 'sm' | 'md' | 'w-xs' | 'w-sm' | 'w-md'
+  tabSpace?: 'compact' | 'spaced'
 }>(), {
   disabled: false,
   readonly: false,
   size: 'md',
+  tabSpace: 'spaced',
 })
 
 const modelValue = defineModel<T>({ required: true })
@@ -27,9 +29,17 @@ const itemCount = computed(() => props.options.length || 1)
 const isDisabled = computed(() => props.disabled || props.readonly)
 
 const sizeClasses = computed(() =>
-  props.size === 'sm'
-    ? ['py-2', 'px-3', 'text-xs', 'rounded-md', 'min-w-24']
-    : ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md', 'min-w-32'],
+  props.size === 'xs'
+    ? props.tabSpace === 'compact'
+      ? ['py-1', 'px-2', 'text-xs', 'rounded-md']
+      : ['py-1', 'px-2', 'text-xs', 'rounded-md', 'min-w-20']
+    : props.size === 'sm'
+      ? props.tabSpace === 'compact'
+        ? ['py-2', 'px-3', 'text-xs', 'rounded-md']
+        : ['py-2', 'px-3', 'text-xs', 'rounded-md', 'min-w-24']
+      : props.tabSpace === 'compact'
+        ? ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md']
+        : ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md', 'min-w-32'],
 )
 
 const rootStyle = computed(() => ({
@@ -51,9 +61,11 @@ const rootStyle = computed(() => ({
       'is-interacting',
       'relative', 'flex', 'items-stretch', 'rounded-lg',
       'overflow-hidden',
-      'bg-white-400/6', 'dark:bg-neutral-950/70',
-      'transition-[border-color,box-shadow,opacity]', 'duration-200', 'ease-out',
-      isDisabled ? ['cursor-not-allowed', 'opacity-60'] : ['shadow-[0_14px_50px_-32px_rgba(0,0,0,0.55)]', 'backdrop-blur-sm'],
+      'bg-neutral-400/6 dark:bg-neutral-950/70',
+      'transition-[border-color,box-shadow,opacity] duration-200 ease-out',
+      isDisabled
+        ? ['cursor-not-allowed', 'opacity-60']
+        : ['shadow-[0_14px_50px_-32px_rgba(0,0,0,0.55)]', 'backdrop-blur-sm'],
       // before
       'before:bg-primary-300/50', 'dark:before:bg-primary-400/50',
       'before:rounded-md', 'sm:before:rounded-lg',
@@ -82,7 +94,9 @@ const rootStyle = computed(() => ({
         'transition-[color,background-color,border-color,transform]', 'duration-200', 'ease-out',
         'focus-visible:border-none', 'focus-visible:outline-none',
         sizeClasses,
-        isDisabled ? 'pointer-events-none' : 'cursor-pointer',
+        isDisabled
+          ? 'pointer-events-none'
+          : 'cursor-pointer',
         // checked
         'data-[state=checked]:text-primary-950', 'dark:data-[state=checked]:text-primary-50',
         // unchecked

package/src/components/form/textarea/basic-text-area.vue

@@ -53,7 +53,12 @@ watch(input, () => {
       return
     }
 
-    textareaHeight.value = `${textareaRef.value.scrollHeight}px`
+    // NOTICE: not sure why 4px is required but if not added, when
+    // input happened and placeholder now disappeared, the textarea will shrink
+    // a little bit and cause the input box to shake.
+    // TODO: find out the root cause and remove this magic number, or at least
+    // reference a more specific source.
+    textareaHeight.value = `${textareaRef.value.scrollHeight + 4}px`
   })
 }, { immediate: true })
 </script>

package/src/components/layouts/index.ts

@@ -1,3 +1,4 @@
 export { default as Collapsible } from './collapsible.vue'
 export { default as Screen } from './screen.vue'
 export { default as Skeleton } from './skeleton.vue'
+export { default as Truncatable } from './truncatable.vue'

package/src/components/layouts/truncatable.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+/**
+ * Amazing work by Derek Morash on CSS line-clamp animation.
+ *
+ * https://derekmorash.com/writing/css-line-clamp-animation/
+ */
+
+import { useResizeObserver } from '@vueuse/core'
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useTemplateRef } from 'vue'
+
+defineOptions({
+  name: 'Truncatable',
+})
+
+const props = withDefaults(defineProps<TruncatableProps>(), {
+  lineClamp: 3,
+})
+
+/**
+ * Props for a text/content container that can be line-clamped and expanded.
+ */
+interface TruncatableProps {
+  /**
+   * Maximum visible lines while collapsed.
+   *
+   * @default 3
+   */
+  lineClamp?: number
+}
+
+const contentRef = useTemplateRef<HTMLElement>('content')
+
+/**
+ * Matches the CSS max-height transition so closing can finish before line-clamp
+ * is restored to the inner content.
+ */
+const transitionDurationMs = 300
+
+const expanded = shallowRef(false)
+const lineClamped = shallowRef(true)
+const closedHeight = shallowRef(0)
+const openedHeight = shallowRef(0)
+const isOverflowing = shallowRef(false)
+const closeClampTimer = shallowRef<number>()
+
+const normalizedLineClamp = computed(() => Math.max(1, Math.floor(props.lineClamp)))
+const visibleHeight = computed(() => expanded.value ? openedHeight.value : closedHeight.value)
+const contentStyle = computed(() => ({
+  '--truncatable-line-clamp': String(normalizedLineClamp.value),
+  '--truncatable-transition-duration': `${transitionDurationMs}ms`,
+  'maxHeight': visibleHeight.value > 0 ? `${visibleHeight.value}px` : undefined,
+}))
+const containerRole = computed(() => isOverflowing.value ? 'button' : undefined)
+const containerTabindex = computed(() => isOverflowing.value ? 0 : undefined)
+
+function measureClampedHeight(element: HTMLElement) {
+  const previousDisplay = element.style.display
+  const previousOverflow = element.style.overflow
+  const previousWebkitBoxOrient = element.style.webkitBoxOrient
+  const previousWebkitLineClamp = element.style.webkitLineClamp
+
+  // DOM measurement needs the real rendered width, so temporarily apply the
+  // collapsed CSS to the visible content and restore the previous inline styles.
+  element.style.display = '-webkit-box'
+  element.style.overflow = 'hidden'
+  element.style.webkitBoxOrient = 'vertical'
+  element.style.webkitLineClamp = String(normalizedLineClamp.value)
+
+  const height = element.getBoundingClientRect().height
+
+  element.style.display = previousDisplay
+  element.style.overflow = previousOverflow
+  element.style.webkitBoxOrient = previousWebkitBoxOrient
+  element.style.webkitLineClamp = previousWebkitLineClamp
+
+  return height
+}
+
+async function measureHeights() {
+  await nextTick()
+
+  const element = contentRef.value
+  if (!element)
+    return
+
+  const nextClosedHeight = measureClampedHeight(element)
+  const nextOpenedHeight = element.scrollHeight
+
+  closedHeight.value = nextClosedHeight
+  openedHeight.value = nextOpenedHeight
+  isOverflowing.value = nextOpenedHeight > nextClosedHeight + 1
+
+  if (!isOverflowing.value) {
+    expanded.value = false
+    lineClamped.value = true
+  }
+}
+
+function toggleExpanded() {
+  if (!isOverflowing.value)
+    return
+
+  if (closeClampTimer.value != null)
+    window.clearTimeout(closeClampTimer.value)
+
+  if (expanded.value) {
+    expanded.value = false
+    closeClampTimer.value = window.setTimeout(() => {
+      lineClamped.value = true
+      closeClampTimer.value = undefined
+    }, transitionDurationMs)
+    return
+  }
+
+  lineClamped.value = false
+  expanded.value = !expanded.value
+}
+
+function handleContainerKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Enter' && event.key !== ' ')
+    return
+
+  event.preventDefault()
+  toggleExpanded()
+}
+
+onMounted(measureHeights)
+onBeforeUnmount(() => {
+  if (closeClampTimer.value != null)
+    window.clearTimeout(closeClampTimer.value)
+})
+useResizeObserver(contentRef, measureHeights)
+</script>
+
+<template>
+  <div
+    class="truncatable"
+    :class="{ 'truncatable--interactive': isOverflowing }"
+    :style="contentStyle"
+    :role="containerRole"
+    :tabindex="containerTabindex"
+    :aria-expanded="isOverflowing ? expanded : undefined"
+    @click="toggleExpanded"
+    @keydown="handleContainerKeydown"
+  >
+    <div
+      ref="content"
+      class="truncatable__inner"
+      :class="{ 'truncatable__inner--line-clamped': lineClamped }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.truncatable {
+  width: 100%;
+  overflow: hidden;
+  transition: max-height var(--truncatable-transition-duration) ease;
+}
+
+.truncatable--interactive {
+  cursor: pointer;
+}
+
+.truncatable:focus-visible {
+  outline: 2px solid currentcolor;
+  outline-offset: 2px;
+}
+
+.truncatable__inner--line-clamped {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--truncatable-line-clamp);
+}
+</style>

package/src/components/misc/button.vue

@@ -30,6 +30,7 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   disabled: false,
   loading: false,
   size: 'md',
+  shape: 'pill',
   theme: 'default',
   block: false,
 })
@@ -45,10 +46,10 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'primary': {
     default: {
       default: [
-        'rounded-xl',
+        'rounded-lg',
         'backdrop-blur-md',
         'bg-primary-500/15 hover:bg-primary-500/20 active:bg-primary-500/30 dark:bg-primary-700/30 dark:hover:bg-primary-700/40 dark:active:bg-primary-700/30',
-        'focus:ring-primary-300/60 dark:focus:ring-primary-600/30',
+        'focus:ring-none',
         'border-2 border-solid border-primary-500/5 dark:border-primary-900/40',
         'text-primary-950 dark:text-primary-100',
         'focus:ring-2',
@@ -58,10 +59,10 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'secondary': {
     default: {
       default: [
-        'rounded-xl',
+        'rounded-lg',
         'backdrop-blur-md',
         'bg-neutral-100/55 hover:bg-neutral-400/20 active:bg-neutral-400/30 dark:bg-neutral-700/60 dark:hover:bg-neutral-700/80 dark:active:bg-neutral-700/60',
-        'focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30',
+        'focus:ring-none',
         'border-2 border-solid border-neutral-300/30 dark:border-neutral-700/30',
         'text-neutral-950 dark:text-neutral-100',
         'focus:ring-2',
@@ -71,11 +72,11 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'secondary-muted': {
     default: {
       default: [
-        'rounded-xl',
+        'rounded-lg',
         'backdrop-blur-md',
         'hover:bg-neutral-50/50 active:bg-neutral-50/90 hover:dark:bg-neutral-800/50 active:dark:bg-neutral-800/90',
         'border-2 border-solid border-neutral-100/60 dark:border-neutral-800/30',
-        'focus:ring-2 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30',
+        'focus:ring-none',
       ],
       nonToggled: 'bg-neutral-50/70 dark:bg-neutral-800/70 text-neutral-500 dark:text-neutral-400',
       toggled: 'bg-white/90 dark:bg-neutral-500/70 ring-neutral-300/30 dark:ring-neutral-600/60 ring-2 dark:ring-neutral-600/30 text-primary-500 dark:text-primary-100',
@@ -84,10 +85,10 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'danger': {
     default: {
       default: [
-        'rounded-xl',
+        'rounded-lg',
         'backdrop-blur-md',
         'bg-red-500/15 hover:bg-red-500/20 active:bg-red-500/30 dark:bg-red-700/30 dark:hover:bg-red-700/40 dark:active:bg-red-700/30',
-        'focus:ring-2 focus:ring-red-300/30 dark:focus:ring-red-600/60 dark:focus:ring-red-600/30',
+        'focus:ring-none',
         'border-2 border-solid border-red-200/30 dark:border-red-900/30',
         'text-red-950 dark:text-red-100',
       ],
@@ -96,11 +97,11 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'caution': {
     default: {
       default: [
-        'rounded-xl',
+        'rounded-lg',
         'backdrop-blur-md',
-        'bg-amber-400/20 hover:bg-amber-400/25 active:bg-amber-400/35 dark:bg-amber-500/20 dark:hover:bg-amber-500/30 dark:active:bg-amber-500/35',
-        'focus:ring-2 focus:ring-amber-300/40 dark:focus:ring-amber-400/40',
-        'border-2 border-solid border-amber-300/40 dark:border-amber-500/40',
+        'bg-amber-400/20 hover:bg-amber-400/25 active:bg-amber-400/35 dark:bg-amber-500/20 dark:hover:bg-amber-500/30 dark:active:bg-amber-500/20',
+        'focus:ring-none',
+        'border-2 border-solid border-amber-300/30 dark:border-amber-500/15',
         'text-amber-900 dark:text-amber-50',
       ],
     },
@@ -108,6 +109,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'pure': {
     default: {
       default: [
+        'rounded-lg',
         'bg-transparent',
         'text-neutral-900 dark:text-neutral-50',
         '!px-0 !py-0',
@@ -117,10 +119,11 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'ghost': {
     default: {
       default: [
+        'rounded-lg',
         'bg-transparent',
         'hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50',
         'text-neutral-500 dark:text-neutral-400',
-        'focus:ring-2 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/30',
+        'focus:ring-none',
       ],
     },
   },
@@ -151,7 +154,7 @@ const baseClasses = computed(() => {
   const theme = variant[props.theme] || variant.default
 
   return [
-    'rounded-lg font-medium outline-none',
+    'font-medium outline-none',
     'transition-all duration-200 ease-in-out',
     'disabled:cursor-not-allowed disabled:opacity-50',
     'backdrop-blur-md',

package/src/components/misc/container-error.vue

@@ -157,11 +157,10 @@ async function copyContent() {
 <template>
   <div
     :class="[
-      'relative w-full rounded-xl border-2 border-red-200/70 bg-red-50/60 backdrop-blur-md p-1',
-      'dark:border-red-900/50 dark:bg-red-950/25',
+      'relative w-full rounded-lg bg-red-50/60 dark:bg-red-950/25 backdrop-blur-md p-1',
     ]"
   >
-    <div :class="['absolute right-4 -translate-x-full top-2 z-10']">
+    <div :class="['absolute right-2 -translate-x-full top-2 z-10']">
       <Button
         v-if="showCopyButton"
         size="sm"
@@ -172,9 +171,7 @@ async function copyContent() {
         :aria-label="copied ? copiedButtonLabel : copyButtonLabel"
         @click="copyContent"
       />
-    </div>
 
-    <div :class="['absolute right-2 top-2 z-10']">
       <Button
         v-if="showFeedbackButton"
         size="sm"
@@ -191,13 +188,12 @@ async function copyContent() {
       type="auto"
       :class="[
         'relative w-full overflow-hidden rounded-xl',
-        'bg-neutral-50/80 dark:bg-neutral-950/80',
         ...heightPresetClasses[heightPreset],
       ]"
     >
       <ScrollAreaViewport :class="['h-full w-full']">
         <div :class="['flex flex-col gap-2 p-3 text-xs']">
-          <div v-if="resolvedErrorName || resolvedMessage" :class="['font-mono font-semibold text-red-700 leading-relaxed dark:text-red-300']">
+          <div v-if="resolvedErrorName || resolvedMessage" :class="['font-mono text-red-700 leading-relaxed dark:text-red-300']">
             {{ resolvedErrorName || 'Error' }}
             <span v-if="resolvedMessage">
               : {{ resolvedMessage }}

package/src/components/misc/error-boundary.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue'
+
+import ContainerError from './container-error.vue'
+
+/**
+ * Error boundary that contains exceptions thrown during the render or setup of
+ * descendant components and renders a fallback UI instead of letting the error
+ * propagate to the host (which would tear the surrounding layout down).
+ *
+ * Use when:
+ * - Wrapping a `<RouterView>` so a single broken route never blanks the whole app shell.
+ * - Wrapping any subtree where partial failure is preferable to total failure.
+ *
+ * Expects:
+ * - Children may throw synchronously during render or in `setup`. Async rejections
+ *   that bubble out of unhandled promises are NOT caught — Vue does not surface those
+ *   to `onErrorCaptured`. Use `app.config.errorHandler` for those.
+ *
+ * Returns:
+ * - Default slot when there is no captured error.
+ * - `fallback` slot (or built-in `ContainerError` UI) when an error has been captured.
+ *   The boundary suppresses error propagation by returning `false` from
+ *   `onErrorCaptured`, so the parent stays mounted.
+ */
+
+interface ErrorBoundaryProps {
+  /**
+   * Optional title shown above the error details. Useful when the boundary
+   * wraps a recognizable region (e.g. "Stage failed to load").
+   */
+  title?: string
+  /**
+   * Whether to show the built-in retry button. Retry remounts the default slot
+   * by bumping an internal key, giving the subtree a fresh chance to render.
+   * @default true
+   */
+  retryable?: boolean
+  /**
+   * Label for the retry button.
+   * @default 'Try again'
+   */
+  retryLabel?: string
+}
+
+const props = withDefaults(defineProps<ErrorBoundaryProps>(), {
+  retryable: true,
+  retryLabel: 'Try again',
+})
+
+const emit = defineEmits<{
+  (e: 'error', err: unknown, instance: unknown, info: string): void
+  (e: 'retry'): void
+}>()
+
+const capturedError = ref<unknown>(null)
+const capturedInfo = ref<string>('')
+const renderKey = ref(0)
+
+onErrorCaptured((err, instance, info) => {
+  capturedError.value = err
+  capturedInfo.value = info
+  emit('error', err, instance, info)
+  // Stop propagation so the host layout keeps rendering.
+  return false
+})
+
+function retry() {
+  capturedError.value = null
+  capturedInfo.value = ''
+  renderKey.value += 1
+  emit('retry')
+}
+
+defineExpose({ retry, hasError: () => capturedError.value != null })
+</script>
+
+<template>
+  <template v-if="capturedError == null">
+    <slot :key="renderKey" />
+  </template>
+  <template v-else>
+    <slot
+      name="fallback"
+      :error="capturedError"
+      :info="capturedInfo"
+      :retry="retry"
+    >
+      <div :class="['flex flex-col gap-3 p-4 max-w-2xl mx-auto']">
+        <div v-if="props.title" :class="['text-base font-semibold text-red-700 dark:text-red-300']">
+          {{ props.title }}
+        </div>
+        <div v-if="capturedInfo" :class="['text-xs text-neutral-500 dark:text-neutral-400']">
+          During: {{ capturedInfo }}
+        </div>
+        <ContainerError
+          :error="capturedError"
+          height-preset="lg"
+        />
+        <div v-if="props.retryable" :class="['flex justify-end']">
+          <button
+            type="button"
+            :class="[
+              'px-3 py-1.5 rounded-lg text-sm font-medium',
+              'bg-red-100 hover:bg-red-200 text-red-800',
+              'dark:bg-red-900/40 dark:hover:bg-red-900/60 dark:text-red-200',
+              'transition-colors',
+            ]"
+            @click="retry"
+          >
+            {{ props.retryLabel }}
+          </button>
+        </div>
+      </div>
+    </slot>
+  </template>
+</template>

package/src/components/misc/index.ts

@@ -2,4 +2,5 @@ export { default as Button } from './button.vue'
 export { default as Callout } from './callout.vue'
 export { default as ContainerError } from './container-error.vue'
 export { default as DoubleCheckButton } from './double-check-button.vue'
+export { default as ErrorBoundary } from './error-boundary.vue'
 export { default as Progress } from './progress.vue'

package/src/composables/use-theme.ts

@@ -1,7 +1,12 @@
 import { useDark, useToggle } from '@vueuse/core'
 
+import { LocalStorageShim } from '../utils'
+
 const isDark = useDark({
   disableTransition: true,
+  // NOTICE: for histoire, used in packages/stage-ui, localStorage global variable exists but `storage.getItem is not a function` wil
+  // thrown, here we added LocalStorageShim to avoid this issue, and it will fallback to real localStorage when it's available.
+  storage: 'localStorage' in globalThis && localStorage != null && 'getItem' in localStorage && typeof localStorage.getItem === 'function' ? localStorage : new LocalStorageShim(),
 })
 
 const toggleDark = useToggle(isDark)

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { LocalStorageShim } from './shim'

package/src/utils/shim/index.ts

@@ -0,0 +1 @@
+export { LocalStorageShim } from './local-storage'

package/src/utils/shim/local-storage.ts

@@ -0,0 +1,27 @@
+export class LocalStorageShim implements Storage {
+  private map = new Map<string, any>()
+
+  clear() {
+    this.map.clear()
+  }
+
+  getItem(key: string) {
+    return this.map.get(key) || null
+  }
+
+  key(index: number) {
+    return Array.from(this.map.keys())[index] || null
+  }
+
+  get length() {
+    return this.map.size
+  }
+
+  setItem(key: string, value: string) {
+    this.map.set(key, value)
+  }
+
+  removeItem(key: string) {
+    this.map.delete(key)
+  }
+}