fss-link 1.0.40 → 1.0.45

package/dist/ui/themes/ayu.ts

@@ -0,0 +1,113 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { type ColorsTheme, Theme } from './theme.js';
+import { darkSemanticColors } from './semantic-tokens.js';
+
+const ayuDarkColors: ColorsTheme = {
+  type: 'dark',
+  Background: '#0b0e14',
+  Foreground: '#bfbdb6',
+  LightBlue: '#59C2FF',
+  AccentBlue: '#39BAE6',
+  AccentPurple: '#D2A6FF',
+  AccentCyan: '#95E6CB',
+  AccentGreen: '#AAD94C',
+  AccentYellow: '#FFB454',
+  AccentRed: '#F26D78',
+  DiffAdded: '#293022',
+  DiffRemoved: '#3D1215',
+  Comment: '#646A71',
+  Gray: '#3D4149',
+  GradientColors: ['#FFB454', '#F26D78'],
+};
+
+export const AyuDark: Theme = new Theme(
+  'Ayu',
+  'dark',
+  {
+    hljs: {
+      display: 'block',
+      overflowX: 'auto',
+      padding: '0.5em',
+      background: ayuDarkColors.Background,
+      color: ayuDarkColors.Foreground,
+    },
+    'hljs-keyword': {
+      color: ayuDarkColors.AccentYellow,
+    },
+    'hljs-literal': {
+      color: ayuDarkColors.AccentPurple,
+    },
+    'hljs-symbol': {
+      color: ayuDarkColors.AccentCyan,
+    },
+    'hljs-name': {
+      color: ayuDarkColors.LightBlue,
+    },
+    'hljs-link': {
+      color: ayuDarkColors.AccentBlue,
+    },
+    'hljs-function .hljs-keyword': {
+      color: ayuDarkColors.AccentYellow,
+    },
+    'hljs-subst': {
+      color: ayuDarkColors.Foreground,
+    },
+    'hljs-string': {
+      color: ayuDarkColors.AccentGreen,
+    },
+    'hljs-title': {
+      color: ayuDarkColors.AccentYellow,
+    },
+    'hljs-type': {
+      color: ayuDarkColors.AccentBlue,
+    },
+    'hljs-attribute': {
+      color: ayuDarkColors.AccentYellow,
+    },
+    'hljs-bullet': {
+      color: ayuDarkColors.AccentYellow,
+    },
+    'hljs-addition': {
+      color: ayuDarkColors.AccentGreen,
+    },
+    'hljs-variable': {
+      color: ayuDarkColors.Foreground,
+    },
+    'hljs-template-tag': {
+      color: ayuDarkColors.AccentYellow,
+    },
+    'hljs-template-variable': {
+      color: ayuDarkColors.AccentYellow,
+    },
+    'hljs-comment': {
+      color: ayuDarkColors.Comment,
+      fontStyle: 'italic',
+    },
+    'hljs-quote': {
+      color: ayuDarkColors.AccentCyan,
+      fontStyle: 'italic',
+    },
+    'hljs-deletion': {
+      color: ayuDarkColors.AccentRed,
+    },
+    'hljs-meta': {
+      color: ayuDarkColors.AccentYellow,
+    },
+    'hljs-doctag': {
+      fontWeight: 'bold',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
+  },
+  ayuDarkColors,
+  darkSemanticColors,
+);

package/dist/ui/themes/color-utils.test.ts

@@ -0,0 +1,221 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  isValidColor,
+  resolveColor,
+  CSS_NAME_TO_HEX_MAP,
+  INK_SUPPORTED_NAMES,
+} from './color-utils.js';
+
+describe('Color Utils', () => {
+  describe('isValidColor', () => {
+    it('should validate hex colors', () => {
+      expect(isValidColor('#ff0000')).toBe(true);
+      expect(isValidColor('#00ff00')).toBe(true);
+      expect(isValidColor('#0000ff')).toBe(true);
+      expect(isValidColor('#fff')).toBe(true);
+      expect(isValidColor('#000')).toBe(true);
+      expect(isValidColor('#FF0000')).toBe(true); // Case insensitive
+    });
+
+    it('should validate Ink-supported color names', () => {
+      expect(isValidColor('black')).toBe(true);
+      expect(isValidColor('red')).toBe(true);
+      expect(isValidColor('green')).toBe(true);
+      expect(isValidColor('yellow')).toBe(true);
+      expect(isValidColor('blue')).toBe(true);
+      expect(isValidColor('cyan')).toBe(true);
+      expect(isValidColor('magenta')).toBe(true);
+      expect(isValidColor('white')).toBe(true);
+      expect(isValidColor('gray')).toBe(true);
+      expect(isValidColor('grey')).toBe(true);
+      expect(isValidColor('blackbright')).toBe(true);
+      expect(isValidColor('redbright')).toBe(true);
+      expect(isValidColor('greenbright')).toBe(true);
+      expect(isValidColor('yellowbright')).toBe(true);
+      expect(isValidColor('bluebright')).toBe(true);
+      expect(isValidColor('cyanbright')).toBe(true);
+      expect(isValidColor('magentabright')).toBe(true);
+      expect(isValidColor('whitebright')).toBe(true);
+    });
+
+    it('should validate Ink-supported color names case insensitive', () => {
+      expect(isValidColor('BLACK')).toBe(true);
+      expect(isValidColor('Red')).toBe(true);
+      expect(isValidColor('GREEN')).toBe(true);
+    });
+
+    it('should validate CSS color names', () => {
+      expect(isValidColor('darkkhaki')).toBe(true);
+      expect(isValidColor('coral')).toBe(true);
+      expect(isValidColor('teal')).toBe(true);
+      expect(isValidColor('tomato')).toBe(true);
+      expect(isValidColor('turquoise')).toBe(true);
+      expect(isValidColor('violet')).toBe(true);
+      expect(isValidColor('wheat')).toBe(true);
+      expect(isValidColor('whitesmoke')).toBe(true);
+      expect(isValidColor('yellowgreen')).toBe(true);
+    });
+
+    it('should validate CSS color names case insensitive', () => {
+      expect(isValidColor('DARKKHAKI')).toBe(true);
+      expect(isValidColor('Coral')).toBe(true);
+      expect(isValidColor('TEAL')).toBe(true);
+    });
+
+    it('should reject invalid color names', () => {
+      expect(isValidColor('invalidcolor')).toBe(false);
+      expect(isValidColor('notacolor')).toBe(false);
+      expect(isValidColor('')).toBe(false);
+    });
+  });
+
+  describe('resolveColor', () => {
+    it('should resolve hex colors', () => {
+      expect(resolveColor('#ff0000')).toBe('#ff0000');
+      expect(resolveColor('#00ff00')).toBe('#00ff00');
+      expect(resolveColor('#0000ff')).toBe('#0000ff');
+      expect(resolveColor('#fff')).toBe('#fff');
+      expect(resolveColor('#000')).toBe('#000');
+    });
+
+    it('should resolve Ink-supported color names', () => {
+      expect(resolveColor('black')).toBe('black');
+      expect(resolveColor('red')).toBe('red');
+      expect(resolveColor('green')).toBe('green');
+      expect(resolveColor('yellow')).toBe('yellow');
+      expect(resolveColor('blue')).toBe('blue');
+      expect(resolveColor('cyan')).toBe('cyan');
+      expect(resolveColor('magenta')).toBe('magenta');
+      expect(resolveColor('white')).toBe('white');
+      expect(resolveColor('gray')).toBe('gray');
+      expect(resolveColor('grey')).toBe('grey');
+    });
+
+    it('should resolve CSS color names to hex', () => {
+      expect(resolveColor('darkkhaki')).toBe('#bdb76b');
+      expect(resolveColor('coral')).toBe('#ff7f50');
+      expect(resolveColor('teal')).toBe('#008080');
+      expect(resolveColor('tomato')).toBe('#ff6347');
+      expect(resolveColor('turquoise')).toBe('#40e0d0');
+      expect(resolveColor('violet')).toBe('#ee82ee');
+      expect(resolveColor('wheat')).toBe('#f5deb3');
+      expect(resolveColor('whitesmoke')).toBe('#f5f5f5');
+      expect(resolveColor('yellowgreen')).toBe('#9acd32');
+    });
+
+    it('should handle case insensitive color names', () => {
+      expect(resolveColor('DARKKHAKI')).toBe('#bdb76b');
+      expect(resolveColor('Coral')).toBe('#ff7f50');
+      expect(resolveColor('TEAL')).toBe('#008080');
+    });
+
+    it('should return undefined for invalid colors', () => {
+      expect(resolveColor('invalidcolor')).toBeUndefined();
+      expect(resolveColor('notacolor')).toBeUndefined();
+      expect(resolveColor('')).toBeUndefined();
+    });
+  });
+
+  describe('CSS_NAME_TO_HEX_MAP', () => {
+    it('should contain expected CSS color mappings', () => {
+      expect(CSS_NAME_TO_HEX_MAP['darkkhaki']).toBe('#bdb76b');
+      expect(CSS_NAME_TO_HEX_MAP['coral']).toBe('#ff7f50');
+      expect(CSS_NAME_TO_HEX_MAP['teal']).toBe('#008080');
+      expect(CSS_NAME_TO_HEX_MAP['tomato']).toBe('#ff6347');
+      expect(CSS_NAME_TO_HEX_MAP['turquoise']).toBe('#40e0d0');
+    });
+
+    it('should not contain Ink-supported color names', () => {
+      expect(CSS_NAME_TO_HEX_MAP['black']).toBeUndefined();
+      expect(CSS_NAME_TO_HEX_MAP['red']).toBeUndefined();
+      expect(CSS_NAME_TO_HEX_MAP['green']).toBeUndefined();
+      expect(CSS_NAME_TO_HEX_MAP['blue']).toBeUndefined();
+    });
+  });
+
+  describe('INK_SUPPORTED_NAMES', () => {
+    it('should contain all Ink-supported color names', () => {
+      expect(INK_SUPPORTED_NAMES.has('black')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('red')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('green')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('yellow')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('blue')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('cyan')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('magenta')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('white')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('gray')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('grey')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('blackbright')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('redbright')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('greenbright')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('yellowbright')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('bluebright')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('cyanbright')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('magentabright')).toBe(true);
+      expect(INK_SUPPORTED_NAMES.has('whitebright')).toBe(true);
+    });
+
+    it('should not contain CSS color names', () => {
+      expect(INK_SUPPORTED_NAMES.has('darkkhaki')).toBe(false);
+      expect(INK_SUPPORTED_NAMES.has('coral')).toBe(false);
+      expect(INK_SUPPORTED_NAMES.has('teal')).toBe(false);
+    });
+  });
+
+  describe('Consistency between validation and resolution', () => {
+    it('should have consistent behavior between isValidColor and resolveColor', () => {
+      // Test that any color that isValidColor returns true for can be resolved
+      const testColors = [
+        '#ff0000',
+        '#00ff00',
+        '#0000ff',
+        '#fff',
+        '#000',
+        'black',
+        'red',
+        'green',
+        'yellow',
+        'blue',
+        'cyan',
+        'magenta',
+        'white',
+        'gray',
+        'grey',
+        'darkkhaki',
+        'coral',
+        'teal',
+        'tomato',
+        'turquoise',
+        'violet',
+        'wheat',
+        'whitesmoke',
+        'yellowgreen',
+      ];
+
+      for (const color of testColors) {
+        expect(isValidColor(color)).toBe(true);
+        expect(resolveColor(color)).toBeDefined();
+      }
+
+      // Test that invalid colors are consistently rejected
+      const invalidColors = [
+        'invalidcolor',
+        'notacolor',
+        '',
+        '#gg0000',
+        '#ff00',
+      ];
+
+      for (const color of invalidColors) {
+        expect(isValidColor(color)).toBe(false);
+        expect(resolveColor(color)).toBeUndefined();
+      }
+    });
+  });
+});

package/dist/ui/themes/color-utils.ts

@@ -0,0 +1,231 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Mapping from common CSS color names (lowercase) to hex codes (lowercase)
+// Excludes names directly supported by Ink
+export const CSS_NAME_TO_HEX_MAP: Readonly<Record<string, string>> = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  blanchedalmond: '#ffebcd',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgrey: '#a9a9a9',
+  darkgreen: '#006400',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategray: '#2f4f4f',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  greenyellow: '#adff2f',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgrey: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  whitesmoke: '#f5f5f5',
+  yellowgreen: '#9acd32',
+};
+
+// Define the set of Ink's named colors for quick lookup
+export const INK_SUPPORTED_NAMES = new Set([
+  'black',
+  'red',
+  'green',
+  'yellow',
+  'blue',
+  'cyan',
+  'magenta',
+  'white',
+  'gray',
+  'grey',
+  'blackbright',
+  'redbright',
+  'greenbright',
+  'yellowbright',
+  'bluebright',
+  'cyanbright',
+  'magentabright',
+  'whitebright',
+]);
+
+/**
+ * Checks if a color string is valid (hex, Ink-supported color name, or CSS color name).
+ * This function uses the same validation logic as the Theme class's _resolveColor method
+ * to ensure consistency between validation and resolution.
+ * @param color The color string to validate.
+ * @returns True if the color is valid.
+ */
+export function isValidColor(color: string): boolean {
+  const lowerColor = color.toLowerCase();
+
+  // 1. Check if it's a hex code
+  if (lowerColor.startsWith('#')) {
+    return /^#[0-9A-Fa-f]{3}([0-9A-Fa-f]{3})?$/.test(color);
+  }
+
+  // 2. Check if it's an Ink supported name
+  if (INK_SUPPORTED_NAMES.has(lowerColor)) {
+    return true;
+  }
+
+  // 3. Check if it's a known CSS name we can map to hex
+  if (CSS_NAME_TO_HEX_MAP[lowerColor]) {
+    return true;
+  }
+
+  // 4. Not a valid color
+  return false;
+}
+
+/**
+ * Resolves a CSS color value (name or hex) into an Ink-compatible color string.
+ * @param colorValue The raw color string (e.g., 'blue', '#ff0000', 'darkkhaki').
+ * @returns An Ink-compatible color string (hex or name), or undefined if not resolvable.
+ */
+export function resolveColor(colorValue: string): string | undefined {
+  const lowerColor = colorValue.toLowerCase();
+
+  // 1. Check if it's already a hex code and valid
+  if (lowerColor.startsWith('#')) {
+    if (/^#[0-9A-Fa-f]{3}([0-9A-Fa-f]{3})?$/.test(colorValue)) {
+      return lowerColor;
+    } else {
+      return undefined;
+    }
+  }
+  // 2. Check if it's an Ink supported name (lowercase)
+  else if (INK_SUPPORTED_NAMES.has(lowerColor)) {
+    return lowerColor; // Use Ink name directly
+  }
+  // 3. Check if it's a known CSS name we can map to hex
+  else if (CSS_NAME_TO_HEX_MAP[lowerColor]) {
+    return CSS_NAME_TO_HEX_MAP[lowerColor]; // Use mapped hex
+  }
+
+  // 4. Could not resolve
+  console.warn(
+    `[ColorUtils] Could not resolve color "${colorValue}" to an Ink-compatible format.`,
+  );
+  return undefined;
+}

package/dist/ui/themes/default-light.ts

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { lightTheme, Theme } from './theme.js';
+import { lightSemanticColors } from './semantic-tokens.js';
+
+export const DefaultLight: Theme = new Theme(
+  'Default Light',
+  'light',
+  {
+    hljs: {
+      display: 'block',
+      overflowX: 'auto',
+      padding: '0.5em',
+      background: lightTheme.Background,
+      color: lightTheme.Foreground,
+    },
+    'hljs-comment': {
+      color: lightTheme.Comment,
+    },
+    'hljs-quote': {
+      color: lightTheme.Comment,
+    },
+    'hljs-variable': {
+      color: lightTheme.Foreground,
+    },
+    'hljs-keyword': {
+      color: lightTheme.AccentBlue,
+    },
+    'hljs-selector-tag': {
+      color: lightTheme.AccentBlue,
+    },
+    'hljs-built_in': {
+      color: lightTheme.AccentBlue,
+    },
+    'hljs-name': {
+      color: lightTheme.AccentBlue,
+    },
+    'hljs-tag': {
+      color: lightTheme.AccentBlue,
+    },
+    'hljs-string': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-title': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-section': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-attribute': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-literal': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-template-tag': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-template-variable': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-type': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-addition': {
+      color: lightTheme.AccentGreen,
+    },
+    'hljs-deletion': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-selector-attr': {
+      color: lightTheme.AccentCyan,
+    },
+    'hljs-selector-pseudo': {
+      color: lightTheme.AccentCyan,
+    },
+    'hljs-meta': {
+      color: lightTheme.AccentCyan,
+    },
+    'hljs-doctag': {
+      color: lightTheme.Gray,
+    },
+    'hljs-attr': {
+      color: lightTheme.AccentRed,
+    },
+    'hljs-symbol': {
+      color: lightTheme.AccentCyan,
+    },
+    'hljs-bullet': {
+      color: lightTheme.AccentCyan,
+    },
+    'hljs-link': {
+      color: lightTheme.AccentCyan,
+    },
+    'hljs-emphasis': {
+      fontStyle: 'italic',
+    },
+    'hljs-strong': {
+      fontWeight: 'bold',
+    },
+  },
+  lightTheme,
+  lightSemanticColors,
+);