@santi020k/lumen-core 0.3.0 → 1.0.0

package/README.md

@@ -7,6 +7,28 @@ Most consumers should install a framework package such as `@santi020k/lumen-astr
 The package exports `lumenColors` and `lumenGlass` for consumers that need to mirror Lumen theme
 tokens outside the shared stylesheet.
 
+## Chart Helpers
+
+`@santi020k/lumen-core/charts` exports the shared `LumenChartSeries` contract plus deterministic
+domain, tick, scaling, line/area, grouped/stacked bar, and pie/donut geometry helpers. They render
+no DOM and perform no statistical analysis; framework packages use them to keep chart output
+aligned.
+
+```ts
+import {
+  createLumenLineGeometry,
+  type LumenChartSeries
+} from '@santi020k/lumen-core/charts'
+
+const series: LumenChartSeries = {
+  id: 'views',
+  label: 'Views',
+  data: [{ x: 'Mon', y: 42 }, { x: 'Tue', y: 68 }]
+}
+
+createLumenLineGeometry(series.data)
+```
+
 It also exports the Lucide-backed icon map (`lumenIcons`, `lumenIconNames`) and helpers such as
 `renderLumenIconSvg` so framework adapters can render icons by name.
 

package/dist/charts.d.ts

@@ -0,0 +1,106 @@
+export declare const lumenChartTones: readonly ["series-1", "series-2", "series-3", "series-4", "series-5", "series-6", "series-7", "series-8", "brand", "accent", "success", "warning", "danger", "neutral"];
+export type LumenChartTone = (typeof lumenChartTones)[number];
+export interface LumenChartDatum {
+    label?: string;
+    tone?: LumenChartTone;
+    x: number | string;
+    xLabel?: string;
+    y: number | null;
+}
+export interface LumenChartSeries {
+    data: readonly LumenChartDatum[];
+    id: string;
+    label: string;
+    tone?: LumenChartTone;
+}
+export interface LumenChartDomain {
+    max: number;
+    min: number;
+}
+export interface LumenChartGeometryPoint extends LumenChartDatum {
+    xCoordinate: number;
+    yCoordinate: number;
+}
+export interface LumenLineGeometry {
+    areaPaths: readonly string[];
+    domain: LumenChartDomain;
+    path: string;
+    points: readonly LumenChartGeometryPoint[];
+}
+export interface LumenLineGeometryOptions {
+    domain?: Partial<LumenChartDomain>;
+    height?: number;
+    includeZero?: boolean;
+    padding?: number;
+    width?: number;
+}
+export type LumenBarChartLayout = 'grouped' | 'stacked';
+export type LumenChartOrientation = 'horizontal' | 'vertical';
+export interface LumenBarGeometryMark {
+    category: number | string;
+    height: number;
+    seriesId: string;
+    seriesLabel: string;
+    tone: LumenChartTone;
+    value: number;
+    width: number;
+    x: number;
+    y: number;
+}
+export interface LumenBarGeometryCategory {
+    category: number | string;
+    label: number | string;
+    x: number;
+    y: number;
+}
+export interface LumenBarGeometry {
+    categories: readonly LumenBarGeometryCategory[];
+    domain: LumenChartDomain;
+    height: number;
+    marks: readonly LumenBarGeometryMark[];
+    width: number;
+}
+export interface LumenBarGeometryOptions {
+    categoryWidth?: number;
+    height?: number;
+    layout?: LumenBarChartLayout;
+    orientation?: LumenChartOrientation;
+    width?: number;
+}
+export type LumenPieChartVariant = 'donut' | 'pie';
+export interface LumenPieGeometrySlice {
+    label: string;
+    path: string;
+    percentage: number;
+    tone: LumenChartTone;
+    value: number;
+    x: number | string;
+}
+export interface LumenPieGeometry {
+    center: number;
+    innerRadius: number;
+    outerRadius: number;
+    size: number;
+    slices: readonly LumenPieGeometrySlice[];
+    total: number;
+}
+export interface LumenPieGeometryOptions {
+    padding?: number;
+    size?: number;
+    variant?: LumenPieChartVariant;
+}
+export declare const hasLumenChartData: (series: readonly LumenChartSeries[]) => boolean;
+export declare const hasLumenPieData: (data: readonly LumenChartDatum[]) => boolean;
+export declare const getLumenChartDomain: (values: readonly (number | null)[], includeZero?: boolean) => LumenChartDomain;
+export declare const scaleLumenChartValue: (value: number, domain: LumenChartDomain, rangeStart: number, rangeEnd: number) => number;
+export declare const getLumenChartTicks: (domain: LumenChartDomain, count?: number) => number[];
+export declare const resolveLumenChartTone: (tone: LumenChartTone | undefined, index?: number) => LumenChartTone;
+export declare const getLumenChartToneClassName: (tone: LumenChartTone | undefined, index?: number) => string;
+export declare const getLumenPieChartVariantClassName: (variant: LumenPieChartVariant) => string;
+export declare const createLumenPieGeometry: (data: readonly LumenChartDatum[], options?: LumenPieGeometryOptions) => LumenPieGeometry;
+export declare const createLumenLineGeometry: (data: readonly LumenChartDatum[], options?: LumenLineGeometryOptions) => LumenLineGeometry;
+export declare const getLumenChartValueRatio: (value: number, domain: LumenChartDomain) => number;
+export declare const getLumenChartCategories: (series: readonly LumenChartSeries[]) => (number | string)[];
+export declare const alignLumenChartSeries: (series: LumenChartSeries, categories: readonly (number | string)[]) => LumenChartSeries;
+export declare const createLumenBarGeometry: (series: readonly LumenChartSeries[], options?: LumenBarGeometryOptions) => LumenBarGeometry;
+//# sourceMappingURL=charts.d.ts.map

package/dist/charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../src/charts.ts"],"names":[],"mappings":"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"}

package/dist/charts.js

@@ -0,0 +1,380 @@
+export const lumenChartTones = [
+    'series-1',
+    'series-2',
+    'series-3',
+    'series-4',
+    'series-5',
+    'series-6',
+    'series-7',
+    'series-8',
+    'brand',
+    'accent',
+    'success',
+    'warning',
+    'danger',
+    'neutral'
+];
+const lumenChartToneClassNames = {
+    accent: 'ui-chart-tone--accent',
+    brand: 'ui-chart-tone--brand',
+    danger: 'ui-chart-tone--danger',
+    neutral: 'ui-chart-tone--neutral',
+    'series-1': 'ui-chart-tone--series-1',
+    'series-2': 'ui-chart-tone--series-2',
+    'series-3': 'ui-chart-tone--series-3',
+    'series-4': 'ui-chart-tone--series-4',
+    'series-5': 'ui-chart-tone--series-5',
+    'series-6': 'ui-chart-tone--series-6',
+    'series-7': 'ui-chart-tone--series-7',
+    'series-8': 'ui-chart-tone--series-8',
+    success: 'ui-chart-tone--success',
+    warning: 'ui-chart-tone--warning'
+};
+const lumenPieChartVariantClassNames = {
+    donut: 'ui-pie-chart--donut',
+    pie: 'ui-pie-chart--pie'
+};
+const defaultChartSize = 100;
+const defaultChartPadding = 4;
+const finiteValues = (values) => values.filter((value) => value !== null && Number.isFinite(value));
+export const hasLumenChartData = (series) => series.some(item => item.data.some(datum => datum.y !== null && Number.isFinite(datum.y)));
+export const hasLumenPieData = (data) => data.some(datum => datum.y !== null && Number.isFinite(datum.y) && datum.y > 0);
+export const getLumenChartDomain = (values, includeZero = true) => {
+    const available = finiteValues(values);
+    if (available.length === 0)
+        return { max: 1, min: 0 };
+    let min = Math.min(...available);
+    let max = Math.max(...available);
+    if (includeZero) {
+        min = Math.min(0, min);
+        max = Math.max(0, max);
+    }
+    if (min === max) {
+        const offset = Math.abs(min || 1) * 0.1;
+        min -= offset;
+        max += offset;
+    }
+    return { max, min };
+};
+export const scaleLumenChartValue = (value, domain, rangeStart, rangeEnd) => {
+    const domainSize = domain.max - domain.min;
+    if (!Number.isFinite(value) || domainSize === 0)
+        return rangeStart;
+    const ratio = (value - domain.min) / domainSize;
+    return rangeStart + ratio * (rangeEnd - rangeStart);
+};
+export const getLumenChartTicks = (domain, count = 5) => {
+    const safeCount = Math.max(2, Math.round(count));
+    const step = (domain.max - domain.min) / (safeCount - 1);
+    return Array.from({ length: safeCount }, (_, index) => domain.min + step * index);
+};
+export const resolveLumenChartTone = (tone, index = 0) => tone ?? lumenChartTones[index % 8] ?? 'series-1';
+export const getLumenChartToneClassName = (tone, index = 0) => lumenChartToneClassNames[resolveLumenChartTone(tone, index)];
+export const getLumenPieChartVariantClassName = (variant) => lumenPieChartVariantClassNames[variant];
+const polarPoint = (center, radius, angle) => {
+    const radians = (angle * Math.PI) / 180;
+    return {
+        x: center + Math.cos(radians) * radius,
+        y: center + Math.sin(radians) * radius
+    };
+};
+const formatPieCoordinate = (value) => value.toFixed(3);
+const pieArc = (radius, largeArc, sweep, point) => [
+    'A',
+    formatPieCoordinate(radius),
+    formatPieCoordinate(radius),
+    0,
+    largeArc ? 1 : 0,
+    sweep,
+    formatPieCoordinate(point.x),
+    formatPieCoordinate(point.y)
+].join(' ');
+const fullPiePath = (center, outerRadius, innerRadius) => {
+    const topOuter = polarPoint(center, outerRadius, -90);
+    const bottomOuter = polarPoint(center, outerRadius, 90);
+    const outer = [
+        `M ${formatPieCoordinate(topOuter.x)} ${formatPieCoordinate(topOuter.y)}`,
+        pieArc(outerRadius, true, 1, bottomOuter),
+        pieArc(outerRadius, true, 1, topOuter),
+        'Z'
+    ];
+    if (innerRadius === 0)
+        return outer.join(' ');
+    const topInner = polarPoint(center, innerRadius, -90);
+    const bottomInner = polarPoint(center, innerRadius, 90);
+    return [
+        ...outer,
+        `M ${formatPieCoordinate(topInner.x)} ${formatPieCoordinate(topInner.y)}`,
+        pieArc(innerRadius, true, 0, bottomInner),
+        pieArc(innerRadius, true, 0, topInner),
+        'Z'
+    ].join(' ');
+};
+const pieSlicePath = (center, outerRadius, innerRadius, startAngle, endAngle) => {
+    if (endAngle - startAngle >= 359.999) {
+        return fullPiePath(center, outerRadius, innerRadius);
+    }
+    const outerStart = polarPoint(center, outerRadius, startAngle);
+    const outerEnd = polarPoint(center, outerRadius, endAngle);
+    const largeArc = endAngle - startAngle > 180;
+    if (innerRadius === 0) {
+        return [
+            `M ${formatPieCoordinate(center)} ${formatPieCoordinate(center)}`,
+            `L ${formatPieCoordinate(outerStart.x)} ${formatPieCoordinate(outerStart.y)}`,
+            pieArc(outerRadius, largeArc, 1, outerEnd),
+            'Z'
+        ].join(' ');
+    }
+    const innerStart = polarPoint(center, innerRadius, startAngle);
+    const innerEnd = polarPoint(center, innerRadius, endAngle);
+    return [
+        `M ${formatPieCoordinate(outerStart.x)} ${formatPieCoordinate(outerStart.y)}`,
+        pieArc(outerRadius, largeArc, 1, outerEnd),
+        `L ${formatPieCoordinate(innerEnd.x)} ${formatPieCoordinate(innerEnd.y)}`,
+        pieArc(innerRadius, largeArc, 0, innerStart),
+        'Z'
+    ].join(' ');
+};
+export const createLumenPieGeometry = (data, options = {}) => {
+    const size = Math.max(1, options.size ?? 320);
+    const padding = Math.max(0, options.padding ?? 12);
+    const center = size / 2;
+    const outerRadius = Math.max(0, center - padding);
+    const innerRadius = options.variant === 'pie' ? 0 : outerRadius * 0.58;
+    const available = data.filter((datum) => datum.y !== null && Number.isFinite(datum.y) && datum.y > 0);
+    const total = available.reduce((sum, datum) => sum + datum.y, 0);
+    let angle = -90;
+    const slices = available.map((datum, index) => {
+        const percentage = total === 0 ? 0 : datum.y / total;
+        const startAngle = angle;
+        const endAngle = index === available.length - 1 ? 270 : startAngle + percentage * 360;
+        angle = endAngle;
+        return {
+            label: datum.label ?? datum.xLabel ?? String(datum.x),
+            path: pieSlicePath(center, outerRadius, innerRadius, startAngle, endAngle),
+            percentage,
+            tone: resolveLumenChartTone(datum.tone, index),
+            value: datum.y,
+            x: datum.x
+        };
+    });
+    return {
+        center,
+        innerRadius,
+        outerRadius,
+        size,
+        slices,
+        total
+    };
+};
+const splitGeometrySegments = (data, domain, width, height, padding) => {
+    const drawableWidth = Math.max(0, width - padding * 2);
+    const drawableHeight = Math.max(0, height - padding * 2);
+    const denominator = Math.max(1, data.length - 1);
+    const segments = [];
+    let current = [];
+    for (const [index, datum] of data.entries()) {
+        if (datum.y === null || !Number.isFinite(datum.y)) {
+            if (current.length > 0)
+                segments.push(current);
+            current = [];
+            continue;
+        }
+        current.push({
+            ...datum,
+            xCoordinate: padding +
+                (data.length === 1 ? 0.5 : index / denominator) * drawableWidth,
+            yCoordinate: scaleLumenChartValue(datum.y, domain, padding + drawableHeight, padding)
+        });
+    }
+    if (current.length > 0)
+        segments.push(current);
+    return segments;
+};
+const segmentPath = (points) => points
+    .map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.xCoordinate.toFixed(3)} ${point.yCoordinate.toFixed(3)}`)
+    .join(' ');
+export const createLumenLineGeometry = (data, options = {}) => {
+    const width = options.width ?? defaultChartSize;
+    const height = options.height ?? defaultChartSize;
+    const padding = options.padding ?? defaultChartPadding;
+    const calculatedDomain = getLumenChartDomain(data.map(datum => datum.y), options.includeZero ?? false);
+    const domain = {
+        max: options.domain?.max ?? calculatedDomain.max,
+        min: options.domain?.min ?? calculatedDomain.min
+    };
+    const segments = splitGeometrySegments(data, domain, width, height, padding);
+    const baseline = scaleLumenChartValue(Math.max(domain.min, Math.min(domain.max, 0)), domain, height - padding, padding);
+    return {
+        areaPaths: segments
+            .map(points => {
+            const first = points[0];
+            const last = points[points.length - 1];
+            if (!first || !last)
+                return '';
+            return [
+                segmentPath(points),
+                'L',
+                last.xCoordinate.toFixed(3),
+                baseline.toFixed(3),
+                'L',
+                first.xCoordinate.toFixed(3),
+                baseline.toFixed(3),
+                'Z'
+            ].join(' ');
+        })
+            .filter(Boolean),
+        domain,
+        path: segments.map(segmentPath).join(' '),
+        points: segments.flat()
+    };
+};
+export const getLumenChartValueRatio = (value, domain) => {
+    const ratio = scaleLumenChartValue(value, domain, 0, 1);
+    return Math.max(0, Math.min(1, ratio));
+};
+export const getLumenChartCategories = (series) => {
+    const categories = new Map();
+    for (const item of series) {
+        for (const datum of item.data) {
+            const key = `${typeof datum.x}:${String(datum.x)}`;
+            if (!categories.has(key))
+                categories.set(key, datum.x);
+        }
+    }
+    return [...categories.values()];
+};
+export const alignLumenChartSeries = (series, categories) => ({
+    ...series,
+    data: categories.map(category => series.data.find(datum => datum.x === category) ?? {
+        x: category,
+        y: null
+    })
+});
+const getDatumValue = (series, category) => series.data.find(datum => datum.x === category)?.y ?? 0;
+const getStackedDomain = (series, categories) => {
+    const totals = categories.flatMap(category => {
+        let positive = 0;
+        let negative = 0;
+        for (const item of series) {
+            const value = getDatumValue(item, category);
+            if (value >= 0)
+                positive += value;
+            else
+                negative += value;
+        }
+        return [negative, positive];
+    });
+    return getLumenChartDomain(totals);
+};
+const getBarStartValue = (layout, value, positiveOffset, negativeOffset) => {
+    if (layout !== 'stacked')
+        return 0;
+    return value >= 0 ? positiveOffset : negativeOffset;
+};
+/* eslint-disable complexity -- Bar geometry deliberately keeps both orientations and layouts in one deterministic pass. */
+export const createLumenBarGeometry = (series, options = {}) => {
+    const width = options.width ?? 640;
+    const height = options.height ?? 320;
+    const orientation = options.orientation ?? 'vertical';
+    const layout = options.layout ?? 'grouped';
+    const categories = getLumenChartCategories(series);
+    const values = series.flatMap(item => item.data.map(datum => datum.y));
+    const domain = layout === 'stacked' ?
+        getStackedDomain(series, categories) :
+        getLumenChartDomain(values);
+    const margin = orientation === 'horizontal' ?
+        {
+            bottom: 24,
+            left: Math.max(64, Math.min(240, options.categoryWidth ?? 112)),
+            right: 20,
+            top: 16
+        } :
+        { bottom: 52, left: 52, right: 16, top: 16 };
+    const plotWidth = Math.max(1, width - margin.left - margin.right);
+    const plotHeight = Math.max(1, height - margin.top - margin.bottom);
+    const categorySize = (orientation === 'horizontal' ? plotHeight : plotWidth) /
+        Math.max(1, categories.length);
+    const categoryGap = Math.min(16, categorySize * 0.24);
+    const usableCategorySize = Math.max(1, categorySize - categoryGap);
+    const seriesSize = usableCategorySize / Math.max(1, series.length);
+    const marks = [];
+    const categoryPositions = [];
+    for (const [categoryIndex, category] of categories.entries()) {
+        const categoryStart = (orientation === 'horizontal' ? margin.top : margin.left) +
+            categoryIndex * categorySize +
+            categoryGap / 2;
+        let positiveOffset = 0;
+        let negativeOffset = 0;
+        categoryPositions.push({
+            category,
+            label: series
+                .flatMap(item => item.data)
+                .find(datum => datum.x === category)?.xLabel ?? category,
+            x: orientation === 'horizontal' ?
+                margin.left - 8 :
+                categoryStart + usableCategorySize / 2,
+            y: orientation === 'horizontal' ?
+                categoryStart + usableCategorySize / 2 :
+                height - 20
+        });
+        for (const [seriesIndex, item] of series.entries()) {
+            const value = getDatumValue(item, category);
+            const tone = resolveLumenChartTone(item.tone, seriesIndex);
+            if (orientation === 'horizontal') {
+                const startValue = getBarStartValue(layout, value, positiveOffset, negativeOffset);
+                const endValue = startValue + value;
+                const start = scaleLumenChartValue(startValue, domain, margin.left, margin.left + plotWidth);
+                const end = scaleLumenChartValue(endValue, domain, margin.left, margin.left + plotWidth);
+                marks.push({
+                    category,
+                    height: layout === 'stacked' ?
+                        usableCategorySize :
+                        Math.max(1, seriesSize - 2),
+                    seriesId: item.id,
+                    seriesLabel: item.label,
+                    tone,
+                    value,
+                    width: Math.abs(end - start),
+                    x: Math.min(start, end),
+                    y: categoryStart +
+                        (layout === 'stacked' ? 0 : seriesIndex * seriesSize + 1)
+                });
+            }
+            else {
+                const startValue = getBarStartValue(layout, value, positiveOffset, negativeOffset);
+                const endValue = startValue + value;
+                const start = scaleLumenChartValue(startValue, domain, margin.top + plotHeight, margin.top);
+                const end = scaleLumenChartValue(endValue, domain, margin.top + plotHeight, margin.top);
+                marks.push({
+                    category,
+                    height: Math.abs(end - start),
+                    seriesId: item.id,
+                    seriesLabel: item.label,
+                    tone,
+                    value,
+                    width: layout === 'stacked' ?
+                        usableCategorySize :
+                        Math.max(1, seriesSize - 2),
+                    x: categoryStart +
+                        (layout === 'stacked' ? 0 : seriesIndex * seriesSize + 1),
+                    y: Math.min(start, end)
+                });
+            }
+            if (layout === 'stacked') {
+                if (value >= 0)
+                    positiveOffset += value;
+                else
+                    negativeOffset += value;
+            }
+        }
+    }
+    return {
+        categories: categoryPositions,
+        domain,
+        height,
+        marks,
+        width
+    };
+};
+/* eslint-enable complexity */

package/dist/code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../src/code.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEhG,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,wBAAwB;;;;;;;CAOkB,CAAA;AA+NvD,eAAO,MAAM,kBAAkB,GAAI,MAAM,MAAM,WAc9C,CAAA;AAuKD,eAAO,MAAM,iBAAiB,GAAI,MAAM,MAAM,EAAE,iBAAa,KAAG,cAAc,EA0B7E,CAAA;AAgBD,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,EAAE,iBAAa,WACW,CAAA"}
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../src/code.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAC5B,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEjE,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,wBAAwB;;;;;;;CAOkB,CAAA;AAiPvD,eAAO,MAAM,kBAAkB,GAAI,MAAM,MAAM,WAc9C,CAAA;AA0LD,eAAO,MAAM,iBAAiB,GAC5B,MAAM,MAAM,EACZ,iBAAa,KACZ,cAAc,EA0BhB,CAAA;AAeD,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,EAAE,iBAAa,WAA6E,CAAA"}

package/dist/code.js

@@ -14,11 +14,7 @@ const bashLikeLanguages = new Set([
     'terminal',
     'zsh'
 ]);
-const jsonLikeLanguages = new Set([
-    'json',
-    'json5',
-    'jsonc'
-]);
+const jsonLikeLanguages = new Set(['json', 'json5', 'jsonc']);
 const javascriptLikeLanguages = new Set([
     'js',
     'jsx',
@@ -28,14 +24,8 @@ const javascriptLikeLanguages = new Set([
     'tsx',
     'typescript'
 ]);
-const luaLikeLanguages = new Set([
-    'lua'
-]);
-const markdownLikeLanguages = new Set([
-    'md',
-    'markdown',
-    'mdx'
-]);
+const luaLikeLanguages = new Set(['lua']);
+const markdownLikeLanguages = new Set(['md', 'markdown', 'mdx']);
 const markupLikeLanguages = new Set([
     'astro',
     'html',
@@ -44,13 +34,8 @@ const markupLikeLanguages = new Set([
     'vue',
     'xml'
 ]);
-const sqlLikeLanguages = new Set([
-    'sql'
-]);
-const yamlLikeLanguages = new Set([
-    'yaml',
-    'yml'
-]);
+const sqlLikeLanguages = new Set(['sql']);
+const yamlLikeLanguages = new Set(['yaml', 'yml']);
 const javascriptKeywords = new Set([
     'as',
     'async',
@@ -123,11 +108,7 @@ const bashKeywords = new Set([
     'unset',
     'while'
 ]);
-const jsonKeywords = new Set([
-    'false',
-    'null',
-    'true'
-]);
+const jsonKeywords = new Set(['false', 'null', 'true']);
 const luaKeywords = new Set([
     'and',
     'break',
@@ -192,14 +173,41 @@ const yamlKeywords = new Set([
     'true',
     'yes'
 ]);
-const bashTokenPattern = /#[^\n]*|"(?:\\.|[^"\\])*"|'[^']*'|\$\{?[A-Za-z_][\w]*\}?|--?[A-Za-z][\w-]*|\b[A-Za-z_][\w]*\b|\b\d+(?:\.\d+)?\b|[|&;<>()[\]{}=]+/g;
-const javascriptTokenPattern = /\/\/[^\n]*|\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`|\b\d[\d._]*\b|\b[A-Za-z_$][\w$]*\b|[=+\-*%<>!?:.,;()[\]{}|&/]+/g;
-const jsonTokenPattern = /\/\/[^\n]*|\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|\b(?:false|null|true)\b|-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b|[{},:]|\[|\]/gi;
-const luaTokenPattern = /--\[\[[\s\S]*?\]\]|--[^\n]*|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\b[A-Za-z_][\w]*\b|\b\d+(?:\.\d+)?\b|[=+\-*%<>~#.,:;()[\]{}]+/g;
-const markdownTokenPattern = /```[\s\S]*?```|`[^`\n]+`|<!--[\s\S]*?-->|^#{1,6}(?=\s)|^>\s?|^\s*(?:[-+*]|\d+\.)\s+|\*\*|__|\*|_|\[[^\]]+\]\([^)]+\)/gm;
-const markupTokenPattern = /<!--[\s\S]*?-->|---|<\/?|\/?>|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\b[A-Za-z_][\w:.-]*\b|[{}=]/g;
-const sqlTokenPattern = /--[^\n]*|\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|'(?:''|[^'])*'|\b[A-Za-z_][\w$]*\b|\b\d+(?:\.\d+)?\b|[=+\-*%<>!.,;()[\]]+/g;
-const yamlTokenPattern = /#[^\n]*|"(?:\\.|[^"\\])*"|'(?:''|[^'])*'|\b[A-Za-z_][\w.-]*(?=\s*:)|\b(?:false|no|null|off|on|true|yes)\b|\b\d+(?:\.\d+)?\b|[{},:&*!?|>@`~-]+|\[|\]/gi;
+const bashTokenPattern = new RegExp([
+    String.raw `#[^\n]*|"(?:\\.|[^"\\])*"|'[^']*'|\$\{?[A-Za-z_][\w]*\}?|`,
+    String.raw `--?[A-Za-z][\w-]*|\b[A-Za-z_][\w]*\b|\b\d+(?:\.\d+)?\b|[|&;<>()[\]{}=]+`
+].join(''), 'g');
+const javascriptTokenPattern = new RegExp([
+    String.raw `\/\/[^\n]*|\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`,
+    '`(?:\\\\.|[^`\\\\])*`|',
+    String.raw `\b\d[\d._]*\b|\b[A-Za-z_$][\w$]*\b|[=+\-*%<>!?:.,;()[\]{}|&/]+`
+].join(''), 'g');
+const jsonTokenPattern = new RegExp([
+    String.raw `\/\/[^\n]*|\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|`,
+    String.raw `\b(?:false|null|true)\b|-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b|[{},:]|\[|\]`
+].join(''), 'gi');
+const luaTokenPattern = new RegExp([
+    String.raw `--\[\[[\s\S]*?\]\]|--[^\n]*|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`,
+    String.raw `\b[A-Za-z_][\w]*\b|\b\d+(?:\.\d+)?\b|[=+\-*%<>~#.,:;()[\]{}]+`
+].join(''), 'g');
+const markdownTokenPattern = new RegExp([
+    '```[\\s\\S]*?```|`[^`\\n]+`|',
+    String.raw `<!--[\s\S]*?-->|^#{1,6}(?=\s)|^>\s?|^\s*(?:[-+*]|\d+\.)\s+|`,
+    String.raw `\*\*|__|\*|_|\[[^\]]+\]\([^)]+\)`
+].join(''), 'gm');
+const markupTokenPattern = new RegExp([
+    String.raw `<!--[\s\S]*?-->|---|<\/?|\/?>|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`,
+    String.raw `\b[A-Za-z_][\w:.-]*\b|[{}=]`
+].join(''), 'g');
+const sqlTokenPattern = new RegExp([
+    String.raw `--[^\n]*|\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|'(?:''|[^'])*'|`,
+    String.raw `\b[A-Za-z_][\w$]*\b|\b\d+(?:\.\d+)?\b|[=+\-*%<>!.,;()[\]]+`
+].join(''), 'g');
+const yamlTokenPattern = new RegExp([
+    String.raw `#[^\n]*|"(?:\\.|[^"\\])*"|'(?:''|[^'])*'|\b[A-Za-z_][\w.-]*(?=\s*:)|`,
+    String.raw `\b(?:false|no|null|off|on|true|yes)\b|\b\d+(?:\.\d+)?\b|`,
+    '[{},:&*!?|>@`~-]+|\\[|\\]'
+].join(''), 'gi');
 const leadingWhitespacePattern = /^[\t ]*/;
 const normalizeLanguage = (language = '') => language.trim().toLowerCase();
 const startsWithIdentifierPattern = /^[A-Za-z_$]/;
@@ -301,7 +309,10 @@ const getMarkupTokenKind = (value, source, start) => {
     const closingTagIndex = source.lastIndexOf('>', start);
     if (openingTagIndex < closingTagIndex)
         return undefined;
-    const beforeValue = source.slice(openingTagIndex + 1, start).replace('/', '').trim();
+    const beforeValue = source
+        .slice(openingTagIndex + 1, start)
+        .replace('/', '')
+        .trim();
     return beforeValue === '' ? 'keyword' : 'type';
 };
 const getSqlTokenKind = (value) => {