@globalbrain/sefirot 3.47.1 → 3.48.0

package/lib/components/SIndicator.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import IconCheckCircleFill from '@iconify-icons/ph/check-circle-fill'
+import IconCircle from '@iconify-icons/ph/circle-bold'
+import IconCircleDashed from '@iconify-icons/ph/circle-dashed-bold'
+import IconCircleNotch from '@iconify-icons/ph/circle-notch-bold'
+import IconXCircle from '@iconify-icons/ph/x-circle-bold'
+import { computed } from 'vue'
+import SIcon from './SIcon.vue'
+
+export type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
+export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed'
+export type Mode = 'colored' | 'monochrome'
+
+const props = withDefaults(defineProps<{
+  size?: Size
+  state: State
+  mode?: Mode
+}>(), {
+  size: 'medium',
+  mode: 'colored'
+})
+
+const classes = computed(() => [
+  props.size,
+  props.state,
+  props.mode
+])
+
+const stateIconDict = {
+  pending: IconCircle,
+  ready: IconCircle,
+  queued: IconCircleDashed,
+  running: IconCircleNotch,
+  completed: IconCheckCircleFill,
+  failed: IconXCircle
+}
+</script>
+
+<template>
+  <div class="SIndicator" :class="classes">
+    <SIcon class="icon" :icon="stateIconDict[state]" />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+@keyframes indicator-blink {
+  0%   { opacity: 1; }
+  50%  { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+
+@keyframes indicator-spin {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.icon {
+  width: 100%;
+  height: 100%;
+}
+
+.SIndicator.nano   { width: 20px; height: 20px; }
+.SIndicator.mini   { width: 24px; height: 24px; }
+.SIndicator.small  { width: 28px; height: 28px; }
+.SIndicator.medium { width: 32px; height: 32px; }
+.SIndicator.large  { width: 40px; height: 40px; }
+.SIndicator.jumbo  { width: 48px; height: 48px; }
+
+.SIndicator.queued {
+  animation: indicator-blink 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
+}
+
+.SIndicator.running {
+  animation: indicator-spin 1.5s linear infinite;
+}
+
+.SIndicator.colored {
+  &.pending   { color: var(--c-fg-gray-1); }
+  &.ready     { color: var(--c-fg-info-1); }
+  &.queued    { color: var(--c-fg-info-1); }
+  &.running   { color: var(--c-fg-info-1); }
+  &.completed { color: var(--c-fg-success-1); }
+  &.failed    { color: var(--c-fg-danger-1); }
+}
+
+.SIndicator.monochrome {
+  color: var(--c-fg-gray-1);
+}
+</style>

package/lib/components/SInputTextarea.vue

@@ -8,7 +8,7 @@ import SInputSegments from './SInputSegments.vue'
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   size?: Size
   name?: string
   label?: string
@@ -21,6 +21,7 @@ const props = defineProps<{
   placeholder?: string
   disabled?: boolean
   rows?: number | 'fill'
+  autoResize?: boolean | number
   value?: string | null
   modelValue?: string | null
   hideError?: boolean
@@ -28,7 +29,10 @@ const props = defineProps<{
   preview?: (value: string | null) => string
   previewLabel?: string
   writeLabel?: string
-}>()
+}>(), {
+  size: 'small',
+  rows: 3
+})
 
 const emit = defineEmits<{
   (e: 'update:model-value', value: string | null): void
@@ -36,6 +40,12 @@ const emit = defineEmits<{
   (e: 'blur', value: string | null): void
 }>()
 
+const sizePaddingYDict = {
+  mini: 12,
+  small: 14,
+  medium: 22
+}
+
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
@@ -43,11 +53,26 @@ const _value = computed(() => {
 })
 
 const classes = computed(() => [
-  props.size ?? 'small',
+  props.size,
   { disabled: props.disabled },
   { fill: props.rows === 'fill' }
 ])
 
+const style = computed(() => {
+  if (!props.autoResize) {
+    return undefined
+  }
+
+  const rows = props.rows === 'fill' ? 3 : props.rows
+  const padding = sizePaddingYDict[props.size]
+  const fontSize = 24
+
+  const minHeight = `min-height: ${rows * fontSize + padding}px;`
+  const maxHeight = props.autoResize === true ? '' : `max-height: calc(${props.autoResize}lh + ${padding}px);`
+
+  return `field-sizing:content;${minHeight}${maxHeight}`
+})
+
 function emitInput(e: Event): void {
   const v = (e.target as HTMLInputElement).value || null
   emit('update:model-value', v)
@@ -95,8 +120,9 @@ const isPreview = ref(false)
         v-show="!isPreview"
         :id="name"
         class="input"
+        :style="style"
         :placeholder="placeholder"
-        :rows="rows ?? 3"
+        :rows="rows === 'fill' ? 3 : rows"
         :disabled="disabled"
         :value="_value ?? undefined"
         @input="emitInput"
@@ -172,7 +198,7 @@ const isPreview = ref(false)
   .prose {
     padding: 6px 10px;
     width: 100%;
-    min-height: 80px;
+    min-height: 30px;
     line-height: 20px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
@@ -183,7 +209,7 @@ const isPreview = ref(false)
   .prose {
     padding: 7px 12px;
     width: 100%;
-    min-height: 96px;
+    min-height: 38px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-small-font-size));
   }
@@ -194,7 +220,7 @@ const isPreview = ref(false)
   .prose {
     padding: 11px 16px;
     width: 100%;
-    min-height: 96px;
+    min-height: 46px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-medium-font-size));
   }
@@ -204,12 +230,6 @@ const isPreview = ref(false)
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  height: 100%;
-
-  .input,
-  .prose {
-    height: 100%;
-  }
 }
 
 .SInputTextarea.disabled {

package/lib/composables/Error.ts

@@ -1,8 +1,9 @@
 /**
  * Adapted from
- * @see https://github.com/vuejs/core/blob/76c9c742e9b045d1342f5952866972498e59f00b/packages/runtime-core/src/component.ts
- * @see https://github.com/vuejs/core/blob/bc37258caa2f6f67f4554ab8587aca3798d92124/packages/runtime-core/src/warning.ts
+ * @see https://github.com/vuejs/core/blob/8d606c44ece5a9940ede05513f844f698d082589/packages/runtime-core/src/component.ts
+ * @see https://github.com/vuejs/core/blob/cdb1d1795d21591659e2560e201ee4fbf1ea4aca/packages/runtime-core/src/warning.ts
  * @see https://github.com/getsentry/sentry-javascript/blob/2cfb0ef3fa5c40f90c317267a4d10b969994d021/packages/vue/src/errorhandler.ts
+ * @see https://github.com/vercel/ai/blob/d544886d4f61440bacd6e44c86144bfac7c98282/packages/provider-utils/src/get-error-message.ts#L12
  *
  * Original licenses:
  *
@@ -11,6 +12,9 @@
  *
  * (c) 2019 Sentry (https://sentry.io) and individual contributors
  * @license MIT
+ *
+ * (c) 2023 Vercel, Inc.
+ * @license Apache-2.0
  */
 
 import * as Sentry from '@sentry/browser'
@@ -136,6 +140,12 @@ function formatProps(props: Record<string, unknown>): string {
     .join(' ')
 }
 
+const ignoreErrors = [
+  /Network Error/,
+  /Non-Error (?:exception|promise rejection) captured/,
+  /ResizeObserver loop/
+]
+
 export function useErrorHandler({
   dsn,
   environment,
@@ -147,6 +157,14 @@ export function useErrorHandler({
 }) {
   const error = useError()
 
+  function set(value: any) {
+    const message = getErrorMessage(value)
+    if (ignoreErrors.some((ignore) => ignore.test(message))) {
+      return
+    }
+    error.set(value)
+  }
+
   const enabled = !!dsn && import.meta.env.PROD
 
   // No need to manually report these errors as they are automatically
@@ -154,22 +172,15 @@ export function useErrorHandler({
   // onMounted because it's not available outside component lifecycle.
   if (typeof document !== 'undefined') {
     addEventListener('error', (event) => {
-      error.set(event.error)
+      set(event.error)
     })
     addEventListener('unhandledrejection', (event) => {
-      error.set(event.reason)
+      set(event.reason)
     })
   }
 
   if (enabled) {
-    Sentry.init({
-      dsn,
-      environment,
-      ignoreErrors: [
-        'ResizeObserver loop limit exceeded',
-        'ResizeObserver loop completed with undelivered notifications'
-      ]
-    })
+    Sentry.init({ dsn, environment, ignoreErrors })
   }
 
   return function errorHandler(
@@ -177,7 +188,7 @@ export function useErrorHandler({
     instance: ComponentPublicInstance | null = null,
     info: string = ''
   ) {
-    error.set(e)
+    set(e)
 
     if (enabled) {
       pauseTracking()
@@ -211,3 +222,19 @@ export function useErrorHandler({
     }
   }
 }
+
+function getErrorMessage(error: unknown | undefined) {
+  if (error == null) {
+    return 'unknown error'
+  }
+
+  if (typeof error === 'string') {
+    return error
+  }
+
+  if (error instanceof Error) {
+    return error.message
+  }
+
+  return JSON.stringify(error)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.47.1",
+  "version": "3.48.0",
   "packageManager": "pnpm@9.1.1",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",