@graphenedata/cli 0.0.15 → 0.0.17

package/dist/ui/components/InlineDelta.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
+  import {formatFromField} from '../component-utilities/format.ts'
   import {getThemeStores} from '../component-utilities/themeStores'
-  import {toBoolean} from '../component-utilities/convert'
+  import {toBoolean} from '../component-utilities/inputUtils'
 
   interface Props {
     value?: number | string | null
-    fmt?: string
-    formatObject?: any
-    columnUnitSummary?: any
+    field?: any
     downIsGood?: boolean
     showValue?: boolean
     showSymbol?: boolean
@@ -22,9 +20,7 @@
 
   let {
     value = undefined,
-    fmt = undefined,
-    formatObject = undefined,
-    columnUnitSummary = undefined,
+    field = undefined,
     downIsGood: downIsGoodProp = false,
     showValue: showValueProp = true,
     showSymbol: showSymbolProp = true,
@@ -58,11 +54,6 @@
     return neutral
   }
 
-  let symbol = $derived((() => {
-    if (status === 'positive') return '▲'
-    if (status === 'negative') return '▼'
-    return '–'
-  })())
   let symbolColor = $derived(pickColor(
     downIsGood ? $theme.colors.negative : $theme.colors.positive,
     downIsGood ? $theme.colors.positive : $theme.colors.negative,
@@ -75,13 +66,11 @@
     $theme.colors['base-content-muted'],
   ))
 
-  let chipClass = $derived(pickColor('delta-chip--positive', 'delta-chip--negative', 'delta-chip--neutral'))
-
-  let resolvedFormat = $derived((() => {
-    if (formatObject) return formatObject
-    if (fmt) return getFormatObjectFromString(fmt, 'number')
-    return undefined
-  })())
+  let chipClass = $derived(pickColor(
+    downIsGood ? 'delta-chip--negative' : 'delta-chip--positive',
+    downIsGood ? 'delta-chip--positive' : 'delta-chip--negative',
+    'delta-chip--neutral',
+  ))
 
   let deltaClass = $derived((() => {
     let classes = ['delta']
@@ -95,7 +84,7 @@
   const renderValue = () => {
     if (numericValue === null) return '–'
     try {
-      return formatValue(numericValue, resolvedFormat, columnUnitSummary)
+      return formatFromField(field, numericValue)
     } catch(error) {
       console.error('Failed to format delta value', error)
       return String(numericValue)
@@ -103,19 +92,33 @@
   }
 </script>
 
+{#snippet deltaSymbol()}
+  {#if showSymbol}
+    <span class="delta-symbol" style={`color:${symbolColor}`} aria-hidden="true">
+      {#if status === 'positive'}
+        <svg viewBox="0 0 16 16" focusable="false">
+          <path d="M8 3 14 13H2Z" fill="currentColor" />
+        </svg>
+      {:else if status === 'negative'}
+        <svg viewBox="0 0 16 16" focusable="false">
+          <path d="M2 3h12L8 13Z" fill="currentColor" />
+        </svg>
+      {:else}
+        <span class="delta-symbol__neutral">–</span>
+      {/if}
+    </span>
+  {/if}
+{/snippet}
+
 <span class={deltaClass} style={`text-align:${resolvedAlign}`}>
   {#if symbolPosition === 'left'}
-    {#if showSymbol}
-      <span class="delta-symbol" style={`color:${symbolColor}`}>{symbol}</span>
-    {/if}
+    {@render deltaSymbol()}
   {/if}
   {#if showValue}
     <span class="delta-value" style={`color:${textColor}`}>{renderValue()}</span>
   {/if}
   {#if symbolPosition === 'right'}
-    {#if showSymbol}
-      <span class="delta-symbol" style={`color:${symbolColor}`}>{symbol}</span>
-    {/if}
+    {@render deltaSymbol()}
   {/if}
   {#if text}
     <span class="delta-text">{text}</span>
@@ -135,6 +138,22 @@
   }
 
   .delta-symbol {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 0.75em;
+    height: 0.75em;
+    line-height: 1;
+    flex: 0 0 0.75em;
+  }
+
+  .delta-symbol svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .delta-symbol__neutral {
     font-size: 0.75em;
     line-height: 1;
   }
@@ -153,13 +172,13 @@
   }
 
   .delta-chip--positive {
-    background: rgba(22, 163, 74, 0.1);
-    border-color: rgba(22, 163, 74, 0.2);
+    background: rgba(135, 166, 140, 0.15);
+    border-color: rgba(135, 166, 140, 0.3);
   }
 
   .delta-chip--negative {
-    background: rgba(220, 38, 38, 0.1);
-    border-color: rgba(220, 38, 38, 0.2);
+    background: rgba(184, 116, 112, 0.15);
+    border-color: rgba(184, 116, 112, 0.3);
   }
 
   .delta-chip--neutral {

package/dist/ui/components/LineChart.svelte

@@ -1,136 +1,65 @@
 <script lang="ts">
-  import type {Snippet} from 'svelte'
-  import Chart from './Chart.svelte'
-  import Line from './Line.svelte'
-  import QueryLoad from './QueryLoad.svelte'
-  import {getThemeStores} from '../component-utilities/themeStores'
+  import {untrack} from 'svelte'
+  import ECharts from './ECharts.svelte'
+  import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
+  import type {EChartsConfig, QueryResult, SeriesWithGroupingHint} from '../component-utilities/types.ts'
 
   interface Props {
-    data?: any, x?: any, y?: any, y2?: any, series?: any, xType?: any, yLog?: any, yLogBase?: any
-    y2SeriesType?: any, yFmt?: any, xFmt?: any, y2Fmt?: any, title?: any, subtitle?: any, legend?: any
-    xAxisTitle?: any, yAxisTitle?: any, y2AxisTitle?: any, xGridlines?: any, yGridlines?: any
-    y2Gridlines?: any, xAxisLabels?: any, yAxisLabels?: any, y2AxisLabels?: any, xBaseline?: any
-    yBaseline?: any, y2Baseline?: any, xTickMarks?: any, yTickMarks?: any, y2TickMarks?: any
-    yMin?: any, yMax?: any, yScale?: any, y2Min?: any, y2Max?: any, y2Scale?: any, sort?: any
-    lineColor?: any, lineType?: any, lineWidth?: any, lineOpacity?: any, chartAreaHeight?: any
-    markers?: any, markerShape?: any, markerSize?: any, handleMissing?: any, step?: any
-    stepPosition?: any, colorPalette?: string, labels?: any, labelSize?: any, labelPosition?: any
-    labelColor?: any, labelFmt?: any, yLabelFmt?: any, y2LabelFmt?: any, showAllLabels?: any
-    yAxisColor?: any, y2AxisColor?: any, echartsOptions?: any, seriesOptions?: any, seriesColors?: any
-    seriesOrder?: any, connectGroup?: any, seriesLabelFmt?: any, leftPadding?: any, rightPadding?: any
-    xLabelWrap?: any, children?: Snippet
+    data: string | QueryResult
+    x: string
+    y: string
+    y2?: string
+    splitBy?: string
+    sort?: string
+    title?: string
+    height?: string | number
+    width?: string | number
   }
 
-  const {resolveColor, resolveColorsObject, resolveColorPalette} = getThemeStores()
-
   let {
-    data = undefined, x = undefined, y = undefined, y2 = undefined, series = undefined, xType = undefined,
-    yLog = undefined, yLogBase = undefined, y2SeriesType = undefined, yFmt = undefined, xFmt = undefined,
-    y2Fmt = undefined, title = undefined, subtitle = undefined, legend = undefined, xAxisTitle = undefined,
-    yAxisTitle = undefined, y2AxisTitle = undefined, xGridlines = undefined, yGridlines = undefined,
-    y2Gridlines = undefined, xAxisLabels = undefined, yAxisLabels = undefined, y2AxisLabels = undefined,
-    xBaseline = undefined, yBaseline = undefined, y2Baseline = undefined, xTickMarks = undefined,
-    yTickMarks = undefined, y2TickMarks = undefined, yMin = undefined, yMax = undefined, yScale = undefined,
-    y2Min = undefined, y2Max = undefined, y2Scale = undefined, sort = undefined, lineColor = undefined,
-    lineType = undefined, lineWidth = undefined, lineOpacity = undefined, chartAreaHeight = undefined,
-    markers = undefined, markerShape = undefined, markerSize = undefined, handleMissing = undefined,
-    step = undefined, stepPosition = undefined, colorPalette = 'default', labels = undefined,
-    labelSize = undefined, labelPosition = undefined, labelColor = undefined, labelFmt = undefined,
-    yLabelFmt = undefined, y2LabelFmt = undefined, showAllLabels = undefined, yAxisColor = undefined,
-    y2AxisColor = undefined, echartsOptions = undefined, seriesOptions = undefined, seriesColors = undefined,
-    seriesOrder = undefined, connectGroup = undefined, seriesLabelFmt = undefined, leftPadding = undefined,
-    rightPadding = undefined, xLabelWrap = undefined, children,
-  }: Props = $props()
+    data,
+    x,
+    y,
+    y2 = undefined,
+    splitBy = undefined,
+    sort = undefined,
+    title = undefined,
+    height = undefined,
+    width = undefined,
+    ...extraProps
+  }: Props & Record<string, unknown> = $props()
 
-  let lineColorStore = $derived(resolveColor(lineColor))
-  let colorPaletteStore = $derived(resolveColorPalette(colorPalette))
-  let labelColorStore = $derived(resolveColor(labelColor))
-  let yAxisColorStore = $derived(resolveColor(yAxisColor))
-  let y2AxisColorStore = $derived(resolveColor(y2AxisColor))
-  let seriesColorsStore = $derived(resolveColorsObject(seriesColors))
+  let logger = untrack(() => componentLogger('LineChart', {data: typeof data == 'string' ? data : undefined, x, y}))
+  untrack(() => logExtraProps(logger, 'LineChart', extraProps))
 
-  let derivedYAxisTitle = $derived(yAxisTitle ?? (y2 ? 'true' : undefined))
-  let derivedY2AxisTitle = $derived(y2AxisTitle ?? (y2 ? 'true' : undefined))
-</script>
+  function buildConfig(): EChartsConfig {
+    let yFields = parseCommaList(y)
+    if (splitBy && yFields.length > 1) throw new Error('LineChart does not support splitBy with multiple y fields')
+
+    let sortHint = typeof sort === 'string' && sort.trim().length > 0 ? {sort} : {}
+    let series: SeriesWithGroupingHint[]
+
+    if (splitBy) {
+      // "tall" data, one template split into one series per splitBy value by enrich()
+      series = [{type: 'line' as const, encode: {x, y: yFields[0], splitBy, ...sortHint}}]
+    } else {
+      // "wide" data, one line per field listed in y
+      series = yFields.map(field => ({type: 'line' as const, name: field, encode: {x, y: field, ...sortHint}}))
+    }
 
-{#snippet lineChartContent(loaded: any[])}
-  <Chart
-    data={loaded}
-    chartContext={{data, x, y, series}}
-    {x}
-    {y}
-    {y2}
-    {xFmt}
-    {yFmt}
-    {y2Fmt}
-    {series}
-    {xType}
-    {yLog}
-    {yLogBase}
-    {legend}
-    {xAxisTitle}
-    yAxisTitle={derivedYAxisTitle}
-    y2AxisTitle={derivedY2AxisTitle}
-    {xGridlines}
-    {yGridlines}
-    {y2Gridlines}
-    {xAxisLabels}
-    {yAxisLabels}
-    {y2AxisLabels}
-    {xBaseline}
-    {yBaseline}
-    {y2Baseline}
-    {xTickMarks}
-    {yTickMarks}
-    {y2TickMarks}
-    yAxisColor={yAxisColorStore}
-    y2AxisColor={y2AxisColorStore}
-    {yMin}
-    {yMax}
-    {yScale}
-    {y2Min}
-    {y2Max}
-    {y2Scale}
-    {title}
-    {subtitle}
-    chartType="Line Chart"
-    {sort}
-    {chartAreaHeight}
-    colorPalette={colorPaletteStore}
-    {echartsOptions}
-    {seriesOptions}
-    {connectGroup}
-    seriesColors={seriesColorsStore}
-    {leftPadding}
-    {rightPadding}
-    {xLabelWrap}
-  >
-    <Line
-      lineColor={lineColorStore}
-      {lineWidth}
-      {lineOpacity}
-      {lineType}
-      {markers}
-      {markerShape}
-      {markerSize}
-      {handleMissing}
-      {step}
-      {stepPosition}
-      {labels}
-      {labelSize}
-      {labelPosition}
-      labelColor={labelColorStore}
-      {labelFmt}
-      {yLabelFmt}
-      {y2LabelFmt}
-      {showAllLabels}
-      {y2SeriesType}
-      {seriesOrder}
-      {seriesLabelFmt}
-    />
-    {@render children?.()}
-  </Chart>
-{/snippet}
+    if (y2) series.push({type: 'line' as const, name: y2, yAxisIndex: 1, encode: {x, y: y2, ...sortHint}})
+
+    return {
+      title: title ? {text: title} : undefined,
+      tooltip: {trigger: 'axis'},
+      legend: {show: Boolean(splitBy || y2 || yFields.length > 1)},
+      xAxis: {},
+      yAxis: [{}, ...(y2 ? [{}] : [])],
+      series,
+    }
+  }
+
+</script>
 
-<QueryLoad data={data} fields={{x, y: parseCommaList(y), y2: parseCommaList(y2), series}} children={lineChartContent} />
+<ECharts data={data} config={buildConfig()} {height} {width} componentId={logger.id} />

package/dist/ui/components/PieChart.svelte

@@ -1,47 +1,37 @@
 <script lang="ts">
+  import {untrack} from 'svelte'
   import ECharts from './ECharts.svelte'
-  import QueryLoad from './QueryLoad.svelte'
+  import type {EChartsConfig, QueryResult} from '../component-utilities/types.ts'
+  import {componentLogger, logExtraProps} from '../internal/telemetry.ts'
 
   interface Props {
-    data: any
-    category: any
-    value: any
-    title?: any
-    subtitle?: any
-    printEchartsConfig?: any
-    echartsOptions?: any
-    seriesOptions?: any
-    seriesColors?: any
+    data: string | QueryResult
+    category: string
+    value: string
+    title?: string
+    height?: string | number
+    width?: string | number
   }
 
   let {
-    data, category, value, title = undefined, subtitle = undefined, printEchartsConfig = undefined,
-    echartsOptions = undefined, seriesOptions = undefined, seriesColors = undefined,
-  }: Props = $props()
+    data,
+    category,
+    value,
+    title = undefined,
+    height = undefined,
+    width = undefined,
+    ...extraProps
+  }: Props & Record<string, unknown> = $props()
 
-  // printEchartsConfig is intentionally unused - it's a debug prop that
-  // users can pass but we don't implement it yet. Using $derived to read
-  // it reactively and suppress state_referenced_locally warning.
-  $effect(() => { void printEchartsConfig })
-</script>
+  let logger = untrack(() => componentLogger('PieChart', {data: typeof data == 'string' ? data : undefined, category, value}))
+  untrack(() => logExtraProps(logger, 'PieChart', extraProps))
 
-{#snippet pieChartContent(loaded: any[])}
-  <ECharts data={loaded} {echartsOptions} {seriesOptions} {seriesColors} config={{
-    title: {
-      text: title,
-      subtext: subtitle,
-    },
-    tooltip: {
-      formatter: '{b}: {c} ({d}%)',
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['40%', '70%'],
-        data: [...loaded.map(r => ({name: r[category], value: r[value]}))],
-      },
-    ],
-  }} />
-{/snippet}
+  function buildConfig(): EChartsConfig {
+    return {
+      title: title ? {text: title} : undefined,
+      series: [{type: 'pie', encode: {itemName: category, value}}],
+    }
+  }
+</script>
 
-<QueryLoad data={data} fields={{category, value}} children={pieChartContent} />
+<ECharts data={data} config={buildConfig()} {height} {width} componentId={logger.id} />

package/dist/ui/components/QueryLoad.svelte

@@ -1,30 +1,40 @@
 <script lang="ts">
-  import {onDestroy, onMount, type Snippet} from 'svelte'
+  import {onDestroy, onMount, untrack, type Snippet} from 'svelte'
+  import type {GrapheneError} from '../../lang/index.d.ts'
   import ErrorDisplay from '../internal/ErrorDisplay.svelte'
+  import type {QueryResult} from '../component-utilities/types.ts'
+  import {componentLogger} from '../internal/telemetry.ts'
+  import Skeleton from './Skeleton.svelte'
 
   interface Props {
-    data: string | {rows?: any[]}
+    data: string | QueryResult
     height?: number
     fields?: Record<string, string | string[]>
-    children?: Snippet<[any[]]>
+    inline?: boolean
+    componentId?: string
+    children?: Snippet<[QueryResult]>
   }
 
-  let {data, height = 200, fields = {}, children}: Props = $props()
+  let {data, height = 200, fields = {}, inline = false, componentId = undefined, children}: Props = $props()
+  let logger = untrack(() => componentLogger(componentId || 'QueryLoad', componentId ? {} : {data: typeof data == 'string' ? data : undefined, ...fields}))
 
-  let errors: Error[] | null = $state(null)
-  let loaded: any[] | null = $state(null)
+  let error: GrapheneError | null = $state(null)
+  let loaded: QueryResult | null = $state(null)
+  let tooltipId = `query-error-${Math.random().toString(36).slice(2)}`
 
-  let handleResults = (result: any) => {
-    errors = result.errors || null
-    loaded = result.rows
+  let handleResults = (result: QueryResult) => {
+    error = result?.error || null
+    loaded = {rows: result?.rows ?? [], fields: result?.fields ?? [], error: result?.error, sql: result?.sql}
+    if (result?.error) logger.error(result.error, {...result.error, componentId: logger.id})
   }
 
   onMount(() => {
     if (typeof data !== 'string') {
-      loaded = data.rows ?? null
+      error = data.error || null
+      loaded = {rows: data.rows ?? [], fields: data.fields ?? [], error: data.error, sql: data.sql}
     } else {
       let usedFields = Object.fromEntries(Object.entries(fields).filter(e => !!e[1]))
-      window.$GRAPHENE.query(data, usedFields, handleResults)
+      window.$GRAPHENE.query(data, usedFields, handleResults, logger.id)
     }
   })
 
@@ -33,47 +43,28 @@
   })
 </script>
 
-{#if errors}
-  <div style="min-height:{height}px;width:100%;display:grid;align-content:center;padding:8px;box-sizing:border-box">
-    <ErrorDisplay error={errors[0]} />
-  </div>
+{#if error}
+  {#if inline}
+    <span class="inline-error">
+      <button class="inline-error__icon" type="button" aria-label="Query failed" aria-describedby={tooltipId}>!</button>
+      <span class="inline-error__tooltip" id={tooltipId} role="tooltip">
+        <ErrorDisplay {error} />
+      </span>
+    </span>
+  {:else}
+    <div style="min-height:{height}px;width:100%;display:grid;align-content:center;padding:8px;box-sizing:border-box">
+      <ErrorDisplay {error} />
+    </div>
+  {/if}
 {:else if !loaded}
-  <div class='ql-skeleton' style={`height:${height}px`} role="status" aria-live="polite">
-    <span class="ql-skeleton__pulse"></span>
-  </div>
-{:else if loaded.length == 0}
+  <Skeleton />
+{:else if loaded.rows.length == 0}
   <div class="empty-chart" role="note">Dataset is empty - query ran successfully, but no data was returned from the database</div>
 {:else}
   {@render children?.(loaded)}
 {/if}
 
 <style>
-  .ql-skeleton {
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    background: var(--chart-skeleton-bg, #f3f4f6);
-    border-radius: 4px;
-  }
-
-  .ql-skeleton__pulse {
-    position: absolute;
-    inset: 0;
-    transform: translateX(-100%);
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
-    animation: ql-pulse 1.4s ease-in-out infinite;
-    content: '';
-  }
-
-  @keyframes ql-pulse {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
   .empty-chart {
     width: 100%;
     padding: 12px;
@@ -85,4 +76,45 @@
     text-align: center;
     background: rgba(243, 244, 246, 0.6);
   }
+
+  .inline-error {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  .inline-error__icon {
+    width: 1.05em;
+    height: 1.05em;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--graphene-error-border, #ef4444);
+    border-radius: 999px;
+    background: var(--graphene-error-background, #fef2f2);
+    color: var(--graphene-error-content-strong, #b91c1c);
+    cursor: help;
+    font: inherit;
+    font-size: 0.75em;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .inline-error__tooltip {
+    display: none;
+    position: absolute;
+    z-index: 1000;
+    top: calc(100% + 8px);
+    left: 0;
+    width: min(420px, 80vw);
+    text-align: left;
+    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.18));
+  }
+
+  .inline-error:hover .inline-error__tooltip,
+  .inline-error:focus-within .inline-error__tooltip {
+    display: block;
+  }
 </style>

package/dist/ui/components/Row.svelte

@@ -4,11 +4,12 @@
   div {
     display: flex;
     flex-direction: row;
-    gap: 1rem;
+    gap: 1.5rem;
   }
 
   /* Ensure styles apply to slotted children (not scoped) */
   div > :global(*) {
     flex: 1 1 0;
+    min-width: 0; /* avoids some rendering instability */
   }
 </style>

package/dist/ui/components/ScatterPlot.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import ECharts from './ECharts.svelte'
+  import {parseCommaList} from '../component-utilities/inputUtils.ts'
+  import type {EChartsConfig, QueryResult, SeriesWithGroupingHint} from '../component-utilities/types.ts'
+
+  interface Props {
+    data: string | QueryResult
+    x: string
+    y: string
+    splitBy?: string
+    title?: string
+    height?: string | number
+    width?: string | number
+  }
+
+  let {
+    data,
+    x,
+    y,
+    splitBy = undefined,
+    title = undefined,
+    height = undefined,
+    width = undefined,
+  }: Props = $props()
+
+  function buildConfig(): EChartsConfig {
+    let yFields = parseCommaList(y)
+    if (splitBy && yFields.length > 1) throw new Error('ScatterPlot does not support splitBy with multiple y fields')
+
+    let series: SeriesWithGroupingHint[]
+
+    if (splitBy) {
+      // "tall" data, one template split into one series per splitBy value by enrich()
+      series = [{type: 'scatter' as const, encode: {x, y: yFields[0], splitBy}}]
+    } else {
+      // "wide" data, one scatter series per field listed in y
+      series = yFields.map(field => ({type: 'scatter' as const, name: field, encode: {x, y: field}}))
+    }
+
+    return {
+      title: title ? {text: title} : undefined,
+      tooltip: {trigger: 'item'},
+      legend: {show: Boolean(splitBy || yFields.length > 1)},
+      grid: {left: 56, bottom: 52},
+      xAxis: {name: x, nameLocation: 'middle', nameGap: 28},
+      yAxis: {name: y, nameLocation: 'middle', nameGap: 40},
+      series,
+    }
+  }
+</script>
+
+<ECharts data={data} config={buildConfig()} {height} {width} />

package/dist/ui/components/Skeleton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  let {height}: {height: number} = $props()
+</script>
+
+<div class='ql-skeleton' style={`height:${height}px`} role="status" aria-live="polite">
+  <span class="ql-skeleton__pulse"></span>
+</div>
+
+<style>
+  .ql-skeleton {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background: var(--chart-skeleton-bg, #f3f4f6);
+    border-radius: 4px;
+  }
+
+  .ql-skeleton__pulse {
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
+    animation: ql-pulse 1.4s ease-in-out infinite;
+    content: '';
+  }
+
+  @keyframes ql-pulse {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+</style>