@globalbrain/sefirot 4.12.0 → 4.14.0

package/config/vite.js

@@ -57,6 +57,7 @@ export const baseConfig = {
       '@vueuse/core',
       'body-scroll-lock',
       'dayjs',
+      'd3',
       'file-saver',
       'fuse.js',
       'lodash-es',
@@ -80,7 +81,8 @@ export const baseConfig = {
       'dayjs/plugin/timezone',
       'dayjs/plugin/utc',
       'markdown-it > argparse',
-      'markdown-it > entities'
+      'markdown-it > entities',
+      'file-saver'
     ],
     exclude: [
       'markdown-it'

package/lib/components/SChartBar.vue

@@ -0,0 +1,384 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import * as d3 from 'd3'
+import { useTemplateRef, watch } from 'vue'
+import { type ChartColor, type KV, type Margins, c, scheme } from '../support/Chart'
+
+const props = withDefaults(defineProps<{
+  // State
+  data: KV[]
+
+  // Chart appearance
+  type?: 'horizontal' | 'vertical'
+  colors?: ChartColor[]
+  margins?: Margins
+  maxBandwidth?: number
+
+  // Axis & labels
+  xLabel?: string
+  yLabel?: string
+  xLabelOffset?: number
+  yLabelOffset?: number
+  xLabelFontSize?: string
+  yLabelFontSize?: string
+  ticks?: number
+  tickFontSize?: string
+
+  // Tooltip & interactivity
+  tooltip?: boolean
+  tooltipFormat?: (d: KV, color: string) => string
+
+  // Animation & debug
+  animate?: boolean
+  debug?: boolean
+}>(), {
+  type: 'vertical',
+  colors: () => ['blue'],
+  maxBandwidth: 100,
+
+  xLabelFontSize: '14px',
+  yLabelFontSize: '14px',
+  ticks: 5,
+  tickFontSize: '14px',
+
+  tooltip: true,
+  tooltipFormat: (d: KV) => `${d.key} – ${d.value}`,
+
+  animate: true,
+  debug: false
+})
+
+const chartRef = useTemplateRef('chart')
+const { width, height } = useElementSize(chartRef)
+
+let tooltipTimeout = 0
+
+// Function to render the chart
+function renderChart({
+  clientWidth,
+  clientHeight,
+  animate
+}: {
+  clientWidth: number
+  clientHeight: number
+  animate: boolean
+}) {
+  if (!chartRef.value) { return }
+
+  // Create color scale
+  const color = scheme(props.data, props.colors)
+
+  // Clear any existing SVG
+  d3
+    .select(chartRef.value)
+    .selectAll('*')
+    .remove()
+
+  // Set dimensions and margins
+  const vertical = props.type === 'vertical'
+
+  const margin = {
+    top: props.margins?.top ?? 30,
+    right: props.margins?.right ?? 40,
+    bottom: props.margins?.bottom ?? (props.xLabel ? 80 : 60),
+    left: props.margins?.left ?? (props.yLabel ? (vertical ? 80 : 100) : (vertical ? 60 : 80))
+  }
+
+  const width = clientWidth - margin.left - margin.right
+  const height = clientHeight - margin.top - margin.bottom
+
+  const xLabelOffset = props.xLabelOffset ?? 46
+  const yLabelOffset = props.yLabelOffset ?? (vertical ? 40 : 56)
+
+  // Create SVG
+  const svg = d3
+    .select(chartRef.value)
+    .append('svg')
+    .attr('width', '100%')
+    .attr('height', height + margin.top + margin.bottom)
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`)
+
+  // Create a padded scale for the bars (with padding for visual spacing)
+  const paddedScale = d3
+    .scaleBand<string>()
+    .domain(props.data.map((d) => d.key))
+    .range(vertical ? [0, width] : [0, height])
+    .padding(0.4)
+
+  // Y scale for bar values
+  const y = d3
+    .scaleLinear()
+    .domain([0, d3.max(props.data, (d) => d.value)!])
+    .nice()
+    .range(vertical ? [height, 0] : [0, width])
+
+  // Compute a constant offset to center the colored bar inside its full band.
+  const groupOffset = (paddedScale.step() - paddedScale.bandwidth()) / 2
+  const heightPadding = 24
+  const bandwidth = Math.min(paddedScale.bandwidth(), props.maxBandwidth)
+  const innerOffset = (paddedScale.bandwidth() - bandwidth) / 2
+
+  // For the axes, use the paddedScale so ticks remain centered on the bars.
+  svg
+    .append('g')
+    .attr('transform', `translate(0,${height})`)
+    .call(vertical ? d3.axisBottom(paddedScale) : d3.axisBottom(y).ticks(props.ticks))
+    .selectAll('text')
+    .attr('fill', c.text2)
+    .style('font-size', props.tickFontSize)
+    .style('text-anchor', 'middle')
+
+  // Remove X axis line
+  svg
+    .select('.domain')
+    .remove()
+
+  // Add Y axis
+  svg
+    .append('g')
+    .call(vertical ? d3.axisLeft(y).ticks(props.ticks) : d3.axisLeft(paddedScale))
+    .selectAll('text')
+    .attr('fill', c.text2)
+    .style('font-size', props.tickFontSize)
+
+  // Remove Y axis line
+  svg
+    .select('.domain')
+    .remove()
+
+  // Add horizontal grid lines
+  const gridLines = svg
+    .selectAll()
+    .data(y.ticks(props.ticks))
+    .enter()
+    .append('line')
+    .attr('stroke', c.divider)
+    .attr('stroke-dasharray', '2,2')
+
+  if (vertical) {
+    gridLines
+      .attr('x1', 0)
+      .attr('x2', width)
+      .attr('y1', (d) => y(d))
+      .attr('y2', (d) => y(d))
+  } else {
+    gridLines
+      .attr('x1', (d) => y(d))
+      .attr('x2', (d) => y(d))
+      .attr('y1', 0)
+      .attr('y2', height)
+  }
+
+  // Add axis labels
+  if (props.xLabel) {
+    svg
+      .append('text')
+      .attr('x', width / 2)
+      .attr('y', height + xLabelOffset)
+      .attr('fill', c.text2)
+      .style('font-size', props.xLabelFontSize)
+      .style('text-anchor', 'middle')
+      .html(props.xLabel)
+  }
+  if (props.yLabel) {
+    svg
+      .append('text')
+      .attr('x', -height / 2)
+      .attr('y', -yLabelOffset)
+      .attr('transform', 'rotate(-90)')
+      .attr('fill', c.text2)
+      .style('font-size', props.yLabelFontSize)
+      .style('text-anchor', 'middle')
+      .html(props.yLabel)
+  }
+
+  // Add bars
+  const barGroups = svg
+    .selectAll()
+    .data(props.data)
+    .enter()
+    .append('g')
+    .attr('transform', (d) =>
+      vertical
+        ? `translate(${(paddedScale(d.key)! - groupOffset)},0)`
+        : `translate(0,${(paddedScale(d.key)! - groupOffset)})`
+    )
+
+  // Each group gets a transparent rect covering the full band (using paddedScale.step())
+  const outerBars = barGroups
+    .append('rect')
+    .attr('fill', 'transparent')
+    .attr('pointer-events', 'all')
+
+  // Append the colored bar rect inside each group.
+  // We now offset it by groupOffset so its left edge is at paddedScale(d.key)
+  const bars = barGroups
+    .append('rect')
+    .attr('fill', (d) => color(d))
+    .attr('rx', 2)
+    .attr('ry', 2)
+
+  if (!animate) {
+    if (vertical) {
+      outerBars
+        .attr('x', 0)
+        .attr('y', (d) => Math.max(0, y(d.value) - heightPadding))
+        .attr('width', paddedScale.step())
+        .attr('height', (d) => height - Math.max(0, y(d.value) - heightPadding))
+      bars
+        .attr('x', groupOffset + innerOffset)
+        .attr('y', (d) => y(d.value))
+        .attr('width', bandwidth)
+        .attr('height', (d) => height - y(d.value))
+    } else {
+      outerBars
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', (d) => Math.min(width, y(d.value) + heightPadding))
+        .attr('height', paddedScale.step())
+      bars
+        .attr('x', 0)
+        .attr('y', groupOffset + innerOffset)
+        .attr('width', (d) => y(d.value))
+        .attr('height', bandwidth)
+    }
+  } else {
+    // Animate the bars
+    if (vertical) {
+      outerBars
+        .attr('x', 0)
+        .attr('y', height)
+        .attr('width', paddedScale.step())
+        .attr('height', 0)
+        .transition()
+        .duration(800)
+        .delay((_, i) => i * 100)
+        .attr('y', (d) => Math.max(0, y(d.value) - heightPadding))
+        .attr('height', (d) => height - Math.max(0, y(d.value) - heightPadding))
+      bars
+        .attr('x', groupOffset + innerOffset)
+        .attr('y', height)
+        .attr('width', bandwidth)
+        .attr('height', 0)
+        .transition()
+        .duration(800)
+        .delay((_, i) => i * 100)
+        .attr('y', (d) => y(d.value))
+        .attr('height', (d) => height - y(d.value))
+    } else {
+      outerBars
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', 0)
+        .attr('height', paddedScale.step())
+        .transition()
+        .duration(800)
+        .delay((_, i) => i * 100)
+        .attr('width', (d) => Math.min(width, y(d.value) + heightPadding))
+      bars
+        .attr('x', 0)
+        .attr('y', groupOffset + innerOffset)
+        .attr('width', 0)
+        .attr('height', bandwidth)
+        .transition()
+        .duration(800)
+        .delay((_, i) => i * 100)
+        .attr('width', (d) => y(d.value))
+    }
+  }
+
+  if (props.tooltip) {
+    const Tooltip = d3
+      .select(chartRef.value)
+      .append('div')
+      .attr('class', 'tooltip')
+
+    function updatePos(event: PointerEvent) {
+      const [x, y] = d3.pointer(event, chartRef.value)
+      Tooltip
+        .style('left', `${x + 14}px`)
+        .style('top', `${y + 14}px`)
+    }
+
+    barGroups
+      .on('pointerenter', (event: PointerEvent, d) => {
+        window.clearTimeout(tooltipTimeout)
+        Tooltip
+          .html(props.tooltipFormat(d, color(d)))
+          .style('opacity', '1')
+        updatePos(event)
+      })
+      .on('pointermove', updatePos)
+      .on('pointerleave', () => {
+        window.clearTimeout(tooltipTimeout)
+        tooltipTimeout = window.setTimeout(() => {
+          Tooltip
+            .style('opacity', '0')
+        }, 400)
+      })
+  }
+
+  // Render outline for debugging
+  if (props.debug) {
+    d3
+      .select(chartRef.value)
+      .append('div')
+      .style('position', 'absolute')
+      .style('top', `${margin.top}px`)
+      .style('left', `${margin.left}px`)
+      .style('width', `${width}px`)
+      .style('height', `${height}px`)
+      .style('outline', '1px solid blue')
+      .style('pointer-events', 'none')
+    outerBars
+      .style('outline', '1px solid green')
+  }
+}
+
+watch(
+  [width, height, () => props],
+  ([clientWidth, clientHeight], [oldWidth, oldHeight]) => {
+    if (!clientWidth || !clientHeight) { return }
+    renderChart({
+      clientWidth,
+      clientHeight,
+      animate:
+        props.animate
+        && ((oldWidth === 0 && oldHeight === 0)
+          || (clientHeight === oldHeight && clientWidth === oldWidth))
+    })
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <div ref="chart" class="SChartBar" />
+</template>
+
+<style scoped lang="postcss">
+.SChartBar {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-feature-settings: 'tnum' 1;
+}
+
+:deep(.tooltip) {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 2px 8px;
+  background-color: var(--c-bg-elv-2);
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+:deep(.tick line) {
+  display: none;
+}
+</style>

package/lib/components/SChartPie.vue

@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import * as d3 from 'd3'
+import { useTemplateRef, watch } from 'vue'
+import { type ChartColor, type KV, type Margins, c, scheme } from '../support/Chart'
+
+const props = withDefaults(defineProps<{
+  // State
+  data: KV[]
+  activeKey?: string
+
+  // Chart appearance
+  type?: 'pie' | 'donut'
+  half?: boolean
+  colors?: ChartColor[]
+  margins?: Margins
+  innerRadius?: (outerRadius: number) => number
+
+  // Labels
+  labels?: boolean
+  labelFormat?: (d: KV) => string
+  labelFontSize?: string
+
+  // Legend
+  legend?: boolean
+  legendFormatKey?: (d: KV) => string
+  legendFormatValue?: (d: KV) => string
+  legendPadding?: number
+  legendFontSize?: string
+
+  // Tooltip & interactivity
+  tooltip?: boolean
+  tooltipFormat?: (d: KV, color: string) => string
+
+  // Animation & debug
+  animate?: boolean
+  debug?: boolean
+}>(), {
+  type: 'donut',
+  half: false,
+
+  labels: false,
+  labelFormat: (d: KV) => `${d.key} – ${d.value}`,
+  labelFontSize: '14px',
+
+  legend: true,
+  legendFormatKey: (d: KV) => d.key,
+  legendFormatValue: (d: KV) => d.value.toString(),
+  legendPadding: 70,
+  legendFontSize: '14px',
+
+  tooltip: true,
+  tooltipFormat: (d: KV) => `${d.key} – ${d.value}`,
+
+  animate: true,
+  debug: false
+})
+
+const chartRef = useTemplateRef('chart')
+const { width, height } = useElementSize(chartRef)
+
+let tooltipTimeout = 0
+
+// Function to render the chart
+function renderChart({
+  clientWidth,
+  clientHeight,
+  animate
+}: {
+  clientWidth: number
+  clientHeight: number
+  animate: boolean
+}) {
+  if (!chartRef.value) { return }
+
+  // Create color scale
+  const color = scheme(props.data, props.colors)
+
+  // Clear any existing SVG
+  d3
+    .select(chartRef.value)
+    .selectAll('*')
+    .remove()
+
+  // Set dimensions and margins
+  const margin = {
+    top: props.margins?.top ?? 30,
+    right: props.margins?.right ?? 30,
+    bottom: props.margins?.bottom ?? 30,
+    left: props.margins?.left ?? 30
+  }
+  const width = clientWidth - margin.left - margin.right
+  const height = clientHeight - margin.top - margin.bottom
+
+  const width_2 = width / 2
+  const height_2 = props.half ? height : height / 2
+
+  // Create SVG
+  const svg = d3
+    .select(chartRef.value)
+    .append('svg')
+    .attr('width', '100%')
+    .attr('height', clientHeight)
+    .append('g')
+
+  // Prepare data
+  const pie = d3
+    .pie<KV>()
+    .value((d) => d.value)
+    .sort(null)
+    .padAngle(0.02)
+
+  if (props.half) {
+    pie.startAngle(-Math.PI / 2)
+    pie.endAngle(Math.PI / 2)
+  }
+
+  const dataReady = pie(props.data)
+
+  // Render legend
+  let legendGroup
+  let legendHeight = 0
+  let legendWidth = 0
+  if (props.legend) {
+    // Create a group for the legend
+    legendGroup = svg
+      .append('g')
+
+    // Add legend
+    const legend = legendGroup
+      .selectAll()
+      .data(dataReady)
+      .enter()
+      .append('g')
+      .attr('transform', (d, i) => `translate(0,${i * 24})`)
+      .style('font-size', props.legendFontSize)
+
+    // Add colored rectangles to the legend
+    legend
+      .append('rect')
+      .attr('x', 0)
+      .attr('rx', 2)
+      .attr('ry', 2)
+      .attr('width', 14)
+      .attr('height', 14)
+      .attr('fill', (d) => color(d.data))
+
+    // Add legend text
+    legend
+      .append('text')
+      .attr('x', 30)
+      .attr('y', 14 / 2)
+      .attr('dy', '0.35em')
+      .attr('fill', c.text2)
+      .html((d) => props.legendFormatKey(d.data))
+
+    // Show value next to the legend
+    legend
+      .append('text')
+      .attr('x', 30 + props.legendPadding)
+      .attr('y', 14 / 2)
+      .attr('dy', '0.35em')
+      .attr('fill', c.text1)
+      .attr('text-anchor', 'end')
+      .html((d) => props.legendFormatValue(d.data))
+
+    ;({ width: legendWidth = 0, height: legendHeight = 0 } = legendGroup?.node()?.getBBox() ?? {})
+
+    // Animate the legends
+    if (animate) {
+      legend
+        .attr('opacity', 0)
+        .transition()
+        .delay((d, i) => i * 100)
+        .duration(800)
+        .attr('opacity', 1)
+    }
+  }
+
+  // Calculate radius and center the chart
+  const r_k = props.half ? 0.25 : 0.5
+  const radius = Math.min(height_2, (width - legendWidth) / (2 + (props.legend ? r_k : 0)))
+  const innerRadius = props.innerRadius?.(radius) ?? (props.type === 'pie' ? 6 : Math.max(radius / 1.5, radius - 50))
+
+  legendGroup
+    ?.attr('transform', `translate(${radius * (1 + r_k)},${-(props.half ? height_2 : 0) / 2 - legendHeight / 2})`)
+  svg
+    .attr('transform', `translate(${margin.left + width_2 - (props.legend ? radius * r_k + legendWidth : 0) / 2},${margin.top + height_2})`)
+
+  // Create arc generator
+  const arc = d3
+    .arc<d3.PieArcDatum<KV>>()
+    .innerRadius(innerRadius)
+    .outerRadius(radius)
+    .cornerRadius(2)
+
+  // Add the arcs
+  const transform = `translate(0,${-(height_2 - radius) / 2})`
+  const activeTransform = `${transform} scale(1.05)`
+
+  const arcs = svg
+    .selectAll()
+    .data(dataReady)
+    .join('path')
+    .attr('fill', (d) => color(d.data))
+    .attr('transform', transform)
+
+  const activeArcs = arcs
+    .filter((d) => d.data.key === props.activeKey)
+
+  if (!animate) {
+    arcs
+      .attr('d', arc)
+
+    activeArcs
+      .attr('transform', activeTransform)
+  } else {
+    // Animate the arcs
+    arcs
+      .attr('d', arc({ startAngle: 0, endAngle: 0, data: {} } as any))
+      .transition()
+      .duration(800 + props.data.length * 100)
+      .attrTween('d', (d) => {
+        const startAngle = props.half ? -Math.PI / 2 : 0
+        const i = d3.interpolate({ startAngle, endAngle: startAngle }, d)
+        return (t) => arc(i(t))!
+      })
+      .end()
+      .then(() => {
+        activeArcs
+          .transition()
+          .duration(200)
+          .attr('transform', activeTransform)
+      })
+  }
+
+  if (props.labels) {
+    const labelArc = d3.arc<d3.PieArcDatum<KV>>()
+      .innerRadius(radius)
+      .outerRadius(radius)
+
+    const labels = svg
+      .selectAll()
+      .data(dataReady)
+      .enter()
+      .append('g')
+      .attr('transform', transform)
+
+    const leftOrRight = (d: d3.PieArcDatum<KV>) => {
+      const midAngle = (d.startAngle + d.endAngle) / 2
+      if (props.half) {
+        return midAngle < 0 ? -1 : 1
+      }
+      return midAngle < Math.PI ? 1 : -1
+    }
+
+    labels
+      .append('polyline')
+      .attr('stroke', c.divider)
+      .attr('fill', 'none')
+      .attr('points', (d) => {
+        const posA = arc.centroid(d)
+        const posB = labelArc.centroid(d)
+        const posC = labelArc.centroid(d)
+        posC[0] = radius * 1.05 * leftOrRight(d)
+        return [posA, posB, posC].map((p) => p.join(','))
+      })
+
+    labels
+      .append('text')
+      .attr('transform', (d) => {
+        const pos = labelArc.centroid(d)
+        pos[0] = radius * 1.1 * leftOrRight(d)
+        return `translate(${pos})`
+      })
+      .attr('dy', '0.35em')
+      .attr('fill', c.text2)
+      .attr('text-anchor', (d) => leftOrRight(d) === 1 ? 'start' : 'end')
+      .style('font-size', props.labelFontSize)
+      .html((d) => props.labelFormat(d.data))
+
+    if (animate) {
+      labels
+        .attr('opacity', 0)
+        .transition()
+        .delay((_, i) => 800 + i * 100)
+        .duration(500)
+        .attr('opacity', 1)
+    }
+  }
+
+  if (props.tooltip) {
+    const Tooltip = d3
+      .select(chartRef.value)
+      .append('div')
+      .attr('class', 'tooltip')
+
+    function updatePos(event: PointerEvent) {
+      const [x, y] = d3.pointer(event, chartRef.value)
+      Tooltip
+        .style('left', `${x + 14}px`)
+        .style('top', `${y + 14}px`)
+    }
+
+    arcs
+      .on('pointerenter', (event: PointerEvent, { data: d }) => {
+        window.clearTimeout(tooltipTimeout)
+        Tooltip
+          .html(props.tooltipFormat(d, color(d)))
+          .style('opacity', '1')
+        updatePos(event)
+      })
+      .on('pointermove', updatePos)
+      .on('pointerleave', () => {
+        window.clearTimeout(tooltipTimeout)
+        tooltipTimeout = window.setTimeout(() => {
+          Tooltip
+            .style('opacity', '0')
+        }, 400)
+      })
+  }
+
+  // Render outline for debugging
+  if (props.debug) {
+    d3
+      .select(chartRef.value)
+      .append('div')
+      .style('position', 'absolute')
+      .style('top', `${margin.top}px`)
+      .style('left', `${margin.left}px`)
+      .style('width', `${width}px`)
+      .style('height', `${height}px`)
+      .style('outline', '1px solid blue')
+      .style('pointer-events', 'none')
+  }
+}
+
+watch(
+  [width, height, () => props],
+  ([clientWidth, clientHeight], [oldWidth, oldHeight]) => {
+    if (!clientWidth || !clientHeight) { return }
+    renderChart({
+      clientWidth,
+      clientHeight,
+      animate:
+        props.animate
+        && ((oldWidth === 0 && oldHeight === 0)
+          || (clientHeight === oldHeight && clientWidth === oldWidth))
+    })
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<template>
+  <div ref="chart" class="SChartPie" />
+</template>
+
+<style scoped lang="postcss">
+.SChartPie {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-feature-settings: 'tnum' 1;
+}
+
+:deep(.tooltip) {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 2px 8px;
+  background-color: var(--c-bg-elv-2);
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
+  font-size: 12px;
+}
+</style>

package/lib/components/STooltip.vue

@@ -87,7 +87,7 @@ const cleanups = [
       setTimeout(() => { ignore.value = false })
     }
   }),
-  onClickOutside(root, hide, { ignore: [content] }),
+  onClickOutside(root, hide, { ignore: [content], controls: false }),
   () => timeoutId.value != null && window.clearTimeout(timeoutId.value)
 ]
 

package/lib/composables/Error.ts

@@ -1,16 +1,16 @@
 /**
  * Adapted from
- * @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
+ * @see https://github.com/vuejs/core/blob/1755ac0a108ba3486bd8397e56d3bdcd69196594/packages/runtime-core/src/component.ts
+ * @see https://github.com/vuejs/core/blob/ac9e7e8bfa55432a73a10864805fdf48bda2ff73/packages/runtime-core/src/warning.ts
+ * @see https://github.com/getsentry/sentry-javascript/blob/04711c20246f7cdaac2305286fec783ab1859a18/packages/vue/src/errorhandler.ts
+ * @see https://github.com/vercel/ai/blob/d544886d4f61440bacd6e44c86144bfac7c98282/packages/provider-utils/src/get-error-message.ts
  *
  * Original licenses:
  *
  * (c) 2018-present Yuxi (Evan) You and Vue contributors
  * @license MIT
  *
- * (c) 2019 Sentry (https://sentry.io) and individual contributors
+ * (c) 2012-2024 Functional Software, Inc. dba Sentry
  * @license MIT
  *
  * (c) 2023 Vercel, Inc.
@@ -18,7 +18,9 @@
  */
 
 import * as Sentry from '@sentry/browser'
+import { createSentryPiniaPlugin } from '@sentry/vue'
 import { pauseTracking, resetTracking } from '@vue/reactivity'
+import { getActivePinia } from 'pinia'
 import {
   type ComponentInternalInstance,
   type ComponentOptions,
@@ -115,11 +117,8 @@ function formatTrace(instance: ComponentInternalInstance | null): string {
 }
 
 function formatTraceEntry({ vnode, recurseCount }: TraceEntry): string {
-  return `at <${formatComponentName(vnode.component)}${
-    vnode.props ? ` ${formatProps(vnode.props)}` : ''
-  }>${
-    recurseCount > 0 ? ` ... (${recurseCount} recursive call${recurseCount > 1 ? 's' : ''})` : ''
-  }`
+  return `at <${formatComponentName(vnode.component)}${vnode.props ? ` ${formatProps(vnode.props)}` : ''}>\
+${recurseCount > 0 ? ` ... (${recurseCount} recursive call${recurseCount > 1 ? 's' : ''})` : ''}`
 }
 
 function formatProps(props: Record<string, unknown>): string {
@@ -183,6 +182,7 @@ export function useErrorHandler({
 
   if (enabled) {
     Sentry.init({ dsn, environment, ignoreErrors })
+    getActivePinia()?.use(createSentryPiniaPlugin())
   }
 
   return function errorHandler(
@@ -190,8 +190,6 @@ export function useErrorHandler({
     instance: ComponentPublicInstance | null = null,
     info: string = ''
   ) {
-    set(e)
-
     if (enabled) {
       pauseTracking()
 
@@ -222,6 +220,8 @@ export function useErrorHandler({
     } else {
       console.error(e)
     }
+
+    set(e)
   }
 }
 

package/lib/composables/Lang.ts

@@ -1,4 +1,4 @@
-import { inject, provide } from 'vue'
+import { type InjectionKey, getCurrentInstance, inject } from 'vue'
 
 export type Lang = 'en' | 'ja'
 
@@ -15,7 +15,7 @@ export interface HasLang {
   lang: Lang
 }
 
-export const SefirotLangKey = 'sefirot-lang-key'
+export const SefirotLangKey: InjectionKey<Lang> = Symbol.for('sefirot-lang-key')
 
 export function useSetupLang(): (user?: HasLang | null) => void {
   const browserLang = useBrowserLang()
@@ -26,7 +26,7 @@ export function useSetupLang(): (user?: HasLang | null) => void {
 }
 
 export function provideLang(lang: Lang) {
-  provide(SefirotLangKey, lang)
+  getCurrentInstance()?.appContext.app.provide(SefirotLangKey, lang)
 }
 
 export function useLang(): Lang {

package/lib/http/Http.ts

@@ -2,7 +2,7 @@ import { parse as parseContentDisposition } from '@tinyhttp/content-disposition'
 import { parse as parseCookie } from '@tinyhttp/cookie'
 import FileSaver from 'file-saver'
 import { FetchError, type FetchOptions, type FetchRequest, type FetchResponse, ofetch } from 'ofetch'
-import { stringify } from 'qs'
+import { type IStringifyOptions, stringify } from 'qs'
 import { type Lang } from '../composables/Lang'
 import { isBlob, isError, isFormData, isRequest, isResponse, isString } from '../support/Utils'
 
@@ -20,6 +20,7 @@ export interface HttpOptions {
   lang?: Lang
   payloadKey?: string
   headers?: () => Awaitable<Record<string, string>>
+  stringifyOptions?: IStringifyOptions
 }
 
 export class Http {
@@ -29,6 +30,7 @@ export class Http {
   private static lang: Lang | undefined = undefined
   private static payloadKey = '__payload__'
   private static headers: () => Awaitable<Record<string, string>> = async () => ({})
+  private static stringifyOptions: IStringifyOptions = {}
 
   static config(options: HttpOptions): void {
     if (options.baseUrl) {
@@ -49,6 +51,9 @@ export class Http {
     if (options.headers) {
       Http.headers = options.headers
     }
+    if (options.stringifyOptions) {
+      Http.stringifyOptions = options.stringifyOptions
+    }
   }
 
   private async ensureXsrfToken(): Promise<string | undefined> {
@@ -69,7 +74,8 @@ export class Http {
   private async buildRequest(url: string, _options: FetchOptions = {}): Promise<[string, FetchOptions]> {
     const { method, params, query, ...options } = _options
     const xsrfToken = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method || '') && (await this.ensureXsrfToken())
-    const queryString = stringify({ ...params, ...query }, { encodeValuesOnly: true })
+
+    const queryString = stringify({ ...params, ...query }, { encodeValuesOnly: true, ...Http.stringifyOptions })
 
     return [
       `${url}${queryString ? `?${queryString}` : ''}`,
@@ -195,16 +201,10 @@ export class Http {
 export function isFetchError(e: unknown): e is FetchError {
   return (
     e instanceof FetchError
-    || (isError(e)
-      && (isString((e as FetchError).request) || isRequest((e as FetchError).request))
-      && ((e as FetchError).response === undefined || isResponse((e as FetchError).response))
-      && e.message.startsWith(
-        `[${
-          ((e as FetchError).request as Request | undefined)?.method || (e as FetchError).options?.method || 'GET'
-        }] ${JSON.stringify(
-          ((e as FetchError).request as Request | undefined)?.url || String((e as FetchError).request) || '/'
-        )}: `
-      ))
+    || (isError<FetchError>(e)
+      && (e.response === undefined || isResponse(e.response))
+      && ((isString(e.request) && e.message.startsWith(`[${e.options?.method || 'GET'}] ${JSON.stringify(e.request || '/')}: `))
+        || (isRequest(e.request) && e.message.startsWith(`[${e.request.method}] ${JSON.stringify(e.request.url)}: `))))
   )
 }
 

package/lib/styles/base.css

@@ -4,6 +4,14 @@
   box-sizing: border-box;
 }
 
+:root:not(.dark):not(.htw-dark) {
+  color-scheme: light;
+}
+
+:root.dark {
+  color-scheme: dark;
+}
+
 body {
   width: 100%;
   min-width: 320px;

package/lib/styles/utilities.css

@@ -155,6 +155,15 @@
 .s-max-w-lg     { max-width: 960px; }
 .s-max-w-xl     { max-width: 1216px; }
 
+.s-h-256  { height: 256px; }
+.s-h-320  { height: 320px; }
+.s-h-512  { height: 512px; }
+.s-h-full { height: 100%; }
+
+.s-aspect-16-9 { aspect-ratio: 16 / 9; }
+.s-aspect-4-3  { aspect-ratio: 4 / 3; }
+.s-aspect-1-1  { aspect-ratio: 1 / 1; }
+
 /**
  * Typography
  * -------------------------------------------------------------------------- */

package/lib/support/Chart.ts

@@ -0,0 +1,92 @@
+/**
+ * Credits:
+ *
+ * - @radix-ui/colors - MIT License
+ *     Copyright (c) 2021 Radix
+ *     https://github.com/radix-ui/colors/blob/main/LICENSE
+ */
+
+import FileSaver from 'file-saver'
+import html2canvas from 'html2canvas'
+
+export const c = {
+  text1: 'light-dark(#1c2024, #edeef0)',
+  text2: 'light-dark(#5d616b, #abafb7)',
+  divider: 'light-dark(#e0e0e1, #2e3035)'
+}
+
+// radixLight.9, radixDark.10
+export const chartColors = {
+  // orange: 'light-dark(#f76b15, #ff801f)',
+  tomato: 'light-dark(#e54d2e, #ec6142)',
+  // red: 'light-dark(#e5484d, #ec5d5e)',
+  ruby: 'light-dark(#e54666, #ec5a72)',
+  // crimson: 'light-dark(#e93d82, #ee518a)',
+  pink: 'light-dark(#d6409f, #de51a8)',
+  // plum: 'light-dark(#ab4aba, #b658c4)',
+  purple: 'light-dark(#8e4ec6, #9a5cd0)',
+  // violet: 'light-dark(#6e56cf, #7d66d9)',
+  iris: 'light-dark(#5b5bd6, #6e6ade)',
+  // indigo: 'light-dark(#3e63dd, #5472e4)',
+  blue: 'light-dark(#0090ff, #3b9eff)',
+  // cyan: 'light-dark(#00a2c7, #23afd0)',
+  teal: 'light-dark(#12a594, #0eb39e)',
+  // jade: 'light-dark(#29a383, #27b08b)',
+  green: 'light-dark(#30a46c, #33b074)',
+  // grass: 'light-dark(#46a758, #53b365)',
+  gray: 'light-dark(#8d8d8d, #7b7b7b)'
+} as const
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type ChartColor = keyof typeof chartColors | (string & {})
+export type KV = { key: string; value: number; color?: ChartColor }
+export type Margins = Partial<{ top: number; right: number; bottom: number; left: number }>
+
+export function getColor(...colors: (ChartColor | string | null | undefined)[]): string {
+  const color = colors.find((color) => color != null)
+  return chartColors[color as keyof typeof chartColors] || color || chartColors.blue
+}
+
+const { gray: _gray, ...rest } = chartColors
+
+export function scheme<T extends { key: string; color?: ChartColor }>(
+  data: T[],
+  colors: ChartColor[] = Object.keys(rest),
+  unknown: ChartColor = 'gray'
+): (d: T) => string {
+  const map = new Map<string, string>(
+    data.map((d, i) => [d.key, getColor(d.color, colors?.[i % (colors?.length ?? 1)])])
+  )
+
+  return (d: T): string => map.get(d.key) ?? unknown
+}
+
+export async function exportAsPng(_el: any, fileName = 'chart.png', delay = 0): Promise<void> {
+  if (!_el) { return }
+
+  // TODO: automatically wait for chart to be ready
+  await new Promise((resolve) => setTimeout(resolve, delay))
+
+  const el = '$el' in _el ? _el.$el : _el
+  if (!(el instanceof HTMLElement)) { return }
+
+  const SCard = el.closest('.SCard')
+  if (!(SCard instanceof HTMLElement)) { return }
+
+  const canvas = await html2canvas(SCard, {
+    scale: 2,
+    logging: false,
+    ignoreElements: (el) => el.classList.contains('SControlActionBar'),
+    onclone(document, element) {
+      document.documentElement.classList.remove('dark')
+      element.querySelectorAll<HTMLElement>('*').forEach((el) => {
+        el.style.backgroundColor = 'transparent'
+        el.style.fill = el.getAttribute('fill') ?? el.style.fill
+        el.style.stroke = el.getAttribute('stroke') ?? el.style.stroke
+      })
+    }
+  })
+
+  const dataUrl = canvas.toDataURL('image/png')
+  FileSaver.saveAs(dataUrl, fileName)
+}

package/lib/support/Utils.ts

@@ -16,7 +16,7 @@ export function isDate(value: unknown): value is Date {
   return _isDate(value)
 }
 
-export function isError(value: unknown): value is Error {
+export function isError<T extends Error = Error>(value: unknown): value is T {
   return _isError(value)
 }
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.12.0",
-  "packageManager": "pnpm@9.15.3",
+  "version": "4.14.0",
+  "packageManager": "pnpm@9.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -51,32 +51,36 @@
     "@vue/reactivity": "^3.5.13",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^12.4.0",
+    "@vueuse/core": "^12 || ^13",
     "body-scroll-lock": "4.0.0-beta.0",
     "dayjs": "^1.11.13",
-    "fuse.js": "^7.0.0",
+    "fuse.js": "^7.1.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.3.0",
-    "postcss": "^8.4.49",
+    "pinia": "^3.0.1",
+    "postcss": "^8.5.3",
     "postcss-nested": "^7.0.2",
     "v-calendar": "3.0.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
   "dependencies": {
-    "@sentry/browser": "^8.48.0",
+    "@sentry/browser": "^9.5.0",
+    "@sentry/vue": "^9.5.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
     "@tinyhttp/content-disposition": "^2.2.2",
     "@tinyhttp/cookie": "^2.1.1",
+    "@types/d3": "^7.4.3",
     "@types/file-saver": "^2.0.7",
-    "@types/qs": "^6.9.17",
+    "@types/qs": "^6.9.18",
+    "d3": "^7.9.0",
     "file-saver": "^2.0.5",
+    "html2canvas": "^1.4.1",
     "magic-string": "^0.30.17",
     "ofetch": "^1.4.1",
-    "qs": "^6.13.1",
-    "unplugin-icons": "^22.0.0"
+    "qs": "^6.14.0",
+    "unplugin-icons": "^22.1.0"
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.7.1",
@@ -87,35 +91,35 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.13.10",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": ">=3.0.0-beta.0",
+    "@vitest/coverage-v8": "^3.0.8",
     "@vue/reactivity": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^12.4.0",
+    "@vueuse/core": "^13.0.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "dayjs": "^1.11.13",
     "eslint": "8.57.0",
-    "fuse.js": "^7.0.0",
-    "happy-dom": "^14.12.3",
+    "fuse.js": "^7.1.0",
+    "happy-dom": "^17.4.4",
     "histoire": "0.16.5",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.3.0",
-    "postcss": "^8.4.49",
+    "pinia": "^3.0.1",
+    "postcss": "^8.5.3",
     "postcss-nested": "^7.0.2",
     "punycode": "^2.3.1",
-    "release-it": "^18.1.1",
-    "typescript": "~5.6.3",
+    "release-it": "^18.1.2",
+    "typescript": "~5.8.2",
     "v-calendar": "3.0.1",
-    "vite": "^6.0.7",
-    "vitepress": "^1.5.0",
-    "vitest": ">=3.0.0-beta.0",
+    "vite": "^6.2.1",
+    "vitepress": ">=2.0.0-alpha.3",
+    "vitest": "^3.0.8",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "vue-tsc": "^2.2.0"
+    "vue-tsc": "^2.2.8"
   }
 }