@santi020k/lumen-core 0.4.0 → 1.0.0

package/dist/charts.d.ts

@@ -1,9 +1,10 @@
 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 type LumenChartTone = (typeof lumenChartTones)[number];
 export interface LumenChartDatum {
     label?: string;
     tone?: LumenChartTone;
     x: number | string;
+    xLabel?: string;
     y: number | null;
 }
 export interface LumenChartSeries {
@@ -47,6 +48,7 @@ export interface LumenBarGeometryMark {
     y: number;
 }
 export interface LumenBarGeometryCategory {
+    category: number | string;
     label: number | string;
     x: number;
     y: number;
@@ -59,6 +61,7 @@ export interface LumenBarGeometry {
     width: number;
 }
 export interface LumenBarGeometryOptions {
+    categoryWidth?: number;
     height?: number;
     layout?: LumenBarChartLayout;
     orientation?: LumenChartOrientation;
@@ -92,6 +95,8 @@ export declare const getLumenChartDomain: (values: readonly (number | null)[], i
 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;

package/dist/charts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../src/charts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,yKAelB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,OAAO,eAAe,CAAC,MAAM,CAAC,CAAA;AAE3D,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,eAAe,EAAE,CAAA;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,MAAM,EAAE,gBAAgB,CAAA;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,SAAS,uBAAuB,EAAE,CAAA;CAC3C;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAClC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,CAAA;AACvD,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAA;AAE7D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,cAAc,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC/C,MAAM,EAAE,gBAAgB,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,oBAAoB,EAAE,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,WAAW,CAAC,EAAE,qBAAqB,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,cAAc,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,SAAS,qBAAqB,EAAE,CAAA;IACxC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B;AAQD,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,SAAS,gBAAgB,EAAE,KAClC,OAEF,CAAA;AAED,eAAO,MAAM,eAAe,GAC1B,MAAM,SAAS,eAAe,EAAE,KAC/B,OAEF,CAAA;AAED,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,EAClC,qBAAkB,KACjB,gBAuBF,CAAA;AAED,eAAO,MAAM,oBAAoB,GAC/B,OAAO,MAAM,EACb,QAAQ,gBAAgB,EACxB,YAAY,MAAM,EAClB,UAAU,MAAM,KACf,MAQF,CAAA;AAED,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,gBAAgB,EACxB,cAAS,KACR,MAAM,EAKR,CAAA;AAED,eAAO,MAAM,qBAAqB,GAChC,MAAM,cAAc,GAAG,SAAS,EAChC,cAAS,KACR,cAAkE,CAAA;AA+FrE,eAAO,MAAM,sBAAsB,GACjC,MAAM,SAAS,eAAe,EAAE,EAChC,UAAS,uBAA4B,KACpC,gBAgDF,CAAA;AAkDD,eAAO,MAAM,uBAAuB,GAClC,MAAM,SAAS,eAAe,EAAE,EAChC,UAAS,wBAA6B,KACrC,iBAqCF,CAAA;AAED,eAAO,MAAM,uBAAuB,GAClC,OAAO,MAAM,EACb,QAAQ,gBAAgB,KACvB,MAIF,CAAA;AAED,eAAO,MAAM,uBAAuB,GAClC,QAAQ,SAAS,gBAAgB,EAAE,KAClC,CAAC,MAAM,GAAG,MAAM,CAAC,EAYnB,CAAA;AAED,eAAO,MAAM,qBAAqB,GAChC,QAAQ,gBAAgB,EACxB,YAAY,SAAS,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KACvC,gBAKD,CAAA;AAyCF,eAAO,MAAM,sBAAsB,GACjC,QAAQ,SAAS,gBAAgB,EAAE,EACnC,UAAS,uBAA4B,KACpC,gBAiHF,CAAA"}
+{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../src/charts.ts"],"names":[],"mappings":"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"}

package/dist/charts.js

@@ -14,6 +14,26 @@ export const lumenChartTones = [
     '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));
@@ -49,15 +69,26 @@ export const getLumenChartTicks = (domain, count = 5) => {
     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;
+    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)}`;
+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);
@@ -116,12 +147,10 @@ export const createLumenPieGeometry = (data, options = {}) => {
     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;
+        const endAngle = index === available.length - 1 ? 270 : startAngle + percentage * 360;
         angle = endAngle;
         return {
-            label: datum.label ?? String(datum.x),
+            label: datum.label ?? datum.xLabel ?? String(datum.x),
             path: pieSlicePath(center, outerRadius, innerRadius, startAngle, endAngle),
             percentage,
             tone: resolveLumenChartTone(datum.tone, index),
@@ -153,7 +182,8 @@ const splitGeometrySegments = (data, domain, width, height, padding) => {
         }
         current.push({
             ...datum,
-            xCoordinate: padding + (data.length === 1 ? 0.5 : index / denominator) * drawableWidth,
+            xCoordinate: padding +
+                (data.length === 1 ? 0.5 : index / denominator) * drawableWidth,
             yCoordinate: scaleLumenChartValue(datum.y, domain, padding + drawableHeight, padding)
         });
     }
@@ -176,13 +206,24 @@ export const createLumenLineGeometry = (data, options = {}) => {
     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 => {
+        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`;
-        }).filter(Boolean),
+            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()
@@ -205,7 +246,10 @@ export const getLumenChartCategories = (series) => {
 };
 export const alignLumenChartSeries = (series, categories) => ({
     ...series,
-    data: categories.map(category => series.data.find(datum => datum.x === category) ?? { x: category, y: null })
+    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) => {
@@ -236,32 +280,43 @@ export const createLumenBarGeometry = (series, options = {}) => {
     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: 112, right: 20, top: 16 }
-        : { bottom: 52, left: 52, right: 16, top: 16 };
+    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 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;
+        const categoryStart = (orientation === 'horizontal' ? margin.top : margin.left) +
+            categoryIndex * categorySize +
+            categoryGap / 2;
         let positiveOffset = 0;
         let negativeOffset = 0;
         categoryPositions.push({
-            label: category,
-            x: orientation === 'horizontal'
-                ? margin.left - 8
-                : categoryStart + usableCategorySize / 2,
-            y: orientation === 'horizontal'
-                ? categoryStart + usableCategorySize / 2
-                : height - 20
+            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);
@@ -273,14 +328,17 @@ export const createLumenBarGeometry = (series, options = {}) => {
                 const end = scaleLumenChartValue(endValue, domain, margin.left, margin.left + plotWidth);
                 marks.push({
                     category,
-                    height: layout === 'stacked' ? usableCategorySize : Math.max(1, seriesSize - 2),
+                    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)
+                    y: categoryStart +
+                        (layout === 'stacked' ? 0 : seriesIndex * seriesSize + 1)
                 });
             }
             else {
@@ -295,8 +353,11 @@ export const createLumenBarGeometry = (series, options = {}) => {
                     seriesLabel: item.label,
                     tone,
                     value,
-                    width: layout === 'stacked' ? usableCategorySize : Math.max(1, seriesSize - 2),
-                    x: categoryStart + (layout === 'stacked' ? 0 : seriesIndex * seriesSize + 1),
+                    width: layout === 'stacked' ?
+                        usableCategorySize :
+                        Math.max(1, seriesSize - 2),
+                    x: categoryStart +
+                        (layout === 'stacked' ? 0 : seriesIndex * seriesSize + 1),
                     y: Math.min(start, end)
                 });
             }

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) => {