claude-flow-novice 2.3.1 → 2.3.3

package/dist/src/web/frontend/node_modules/.monaco-editor-MndU045b/esm/vs/editor/contrib/colorPicker/browser/colorHoverParticipant.js

@@ -0,0 +1,244 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { AsyncIterableObject } from '../../../../base/common/async.js';
+import { CancellationToken } from '../../../../base/common/cancellation.js';
+import { Color, RGBA } from '../../../../base/common/color.js';
+import { Disposable, DisposableStore } from '../../../../base/common/lifecycle.js';
+import { Range } from '../../../common/core/range.js';
+import { getColorPresentations, getColors } from './color.js';
+import { ColorDetector } from './colorDetector.js';
+import { ColorPickerModel } from './colorPickerModel.js';
+import { ColorPickerWidget } from './colorPickerWidget.js';
+import { IThemeService } from '../../../../platform/theme/common/themeService.js';
+import { Dimension } from '../../../../base/browser/dom.js';
+export class ColorHover {
+    constructor(owner, range, model, provider) {
+        this.owner = owner;
+        this.range = range;
+        this.model = model;
+        this.provider = provider;
+        /**
+         * Force the hover to always be rendered at this specific range,
+         * even in the case of multiple hover parts.
+         */
+        this.forceShowAtRange = true;
+    }
+    isValidForHoverAnchor(anchor) {
+        return (anchor.type === 1 /* HoverAnchorType.Range */
+            && this.range.startColumn <= anchor.range.startColumn
+            && this.range.endColumn >= anchor.range.endColumn);
+    }
+}
+let ColorHoverParticipant = class ColorHoverParticipant {
+    constructor(_editor, _themeService) {
+        this._editor = _editor;
+        this._themeService = _themeService;
+        this.hoverOrdinal = 2;
+    }
+    computeSync(_anchor, _lineDecorations) {
+        return [];
+    }
+    computeAsync(anchor, lineDecorations, token) {
+        return AsyncIterableObject.fromPromise(this._computeAsync(anchor, lineDecorations, token));
+    }
+    async _computeAsync(_anchor, lineDecorations, _token) {
+        if (!this._editor.hasModel()) {
+            return [];
+        }
+        const colorDetector = ColorDetector.get(this._editor);
+        if (!colorDetector) {
+            return [];
+        }
+        for (const d of lineDecorations) {
+            if (!colorDetector.isColorDecoration(d)) {
+                continue;
+            }
+            const colorData = colorDetector.getColorData(d.range.getStartPosition());
+            if (colorData) {
+                const colorHover = await _createColorHover(this, this._editor.getModel(), colorData.colorInfo, colorData.provider);
+                return [colorHover];
+            }
+        }
+        return [];
+    }
+    renderHoverParts(context, hoverParts) {
+        return renderHoverParts(this, this._editor, this._themeService, hoverParts, context);
+    }
+};
+ColorHoverParticipant = __decorate([
+    __param(1, IThemeService)
+], ColorHoverParticipant);
+export { ColorHoverParticipant };
+export class StandaloneColorPickerHover {
+    constructor(owner, range, model, provider) {
+        this.owner = owner;
+        this.range = range;
+        this.model = model;
+        this.provider = provider;
+    }
+}
+let StandaloneColorPickerParticipant = class StandaloneColorPickerParticipant {
+    constructor(_editor, _themeService) {
+        this._editor = _editor;
+        this._themeService = _themeService;
+        this._color = null;
+    }
+    async createColorHover(defaultColorInfo, defaultColorProvider, colorProviderRegistry) {
+        if (!this._editor.hasModel()) {
+            return null;
+        }
+        const colorDetector = ColorDetector.get(this._editor);
+        if (!colorDetector) {
+            return null;
+        }
+        const colors = await getColors(colorProviderRegistry, this._editor.getModel(), CancellationToken.None);
+        let foundColorInfo = null;
+        let foundColorProvider = null;
+        for (const colorData of colors) {
+            const colorInfo = colorData.colorInfo;
+            if (Range.containsRange(colorInfo.range, defaultColorInfo.range)) {
+                foundColorInfo = colorInfo;
+                foundColorProvider = colorData.provider;
+            }
+        }
+        const colorInfo = foundColorInfo !== null && foundColorInfo !== void 0 ? foundColorInfo : defaultColorInfo;
+        const colorProvider = foundColorProvider !== null && foundColorProvider !== void 0 ? foundColorProvider : defaultColorProvider;
+        const foundInEditor = !!foundColorInfo;
+        return { colorHover: await _createColorHover(this, this._editor.getModel(), colorInfo, colorProvider), foundInEditor: foundInEditor };
+    }
+    async updateEditorModel(colorHoverData) {
+        if (!this._editor.hasModel()) {
+            return;
+        }
+        const colorPickerModel = colorHoverData.model;
+        let range = new Range(colorHoverData.range.startLineNumber, colorHoverData.range.startColumn, colorHoverData.range.endLineNumber, colorHoverData.range.endColumn);
+        if (this._color) {
+            await _updateColorPresentations(this._editor.getModel(), colorPickerModel, this._color, range, colorHoverData);
+            range = _updateEditorModel(this._editor, range, colorPickerModel);
+        }
+    }
+    renderHoverParts(context, hoverParts) {
+        return renderHoverParts(this, this._editor, this._themeService, hoverParts, context);
+    }
+    set color(color) {
+        this._color = color;
+    }
+    get color() {
+        return this._color;
+    }
+};
+StandaloneColorPickerParticipant = __decorate([
+    __param(1, IThemeService)
+], StandaloneColorPickerParticipant);
+export { StandaloneColorPickerParticipant };
+async function _createColorHover(participant, editorModel, colorInfo, provider) {
+    const originalText = editorModel.getValueInRange(colorInfo.range);
+    const { red, green, blue, alpha } = colorInfo.color;
+    const rgba = new RGBA(Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255), alpha);
+    const color = new Color(rgba);
+    const colorPresentations = await getColorPresentations(editorModel, colorInfo, provider, CancellationToken.None);
+    const model = new ColorPickerModel(color, [], 0);
+    model.colorPresentations = colorPresentations || [];
+    model.guessColorPresentation(color, originalText);
+    if (participant instanceof ColorHoverParticipant) {
+        return new ColorHover(participant, Range.lift(colorInfo.range), model, provider);
+    }
+    else {
+        return new StandaloneColorPickerHover(participant, Range.lift(colorInfo.range), model, provider);
+    }
+}
+function renderHoverParts(participant, editor, themeService, hoverParts, context) {
+    if (hoverParts.length === 0 || !editor.hasModel()) {
+        return Disposable.None;
+    }
+    if (context.setMinimumDimensions) {
+        const minimumHeight = editor.getOption(66 /* EditorOption.lineHeight */) + 8;
+        context.setMinimumDimensions(new Dimension(302, minimumHeight));
+    }
+    const disposables = new DisposableStore();
+    const colorHover = hoverParts[0];
+    const editorModel = editor.getModel();
+    const model = colorHover.model;
+    const widget = disposables.add(new ColorPickerWidget(context.fragment, model, editor.getOption(141 /* EditorOption.pixelRatio */), themeService, participant instanceof StandaloneColorPickerParticipant));
+    context.setColorPicker(widget);
+    let editorUpdatedByColorPicker = false;
+    let range = new Range(colorHover.range.startLineNumber, colorHover.range.startColumn, colorHover.range.endLineNumber, colorHover.range.endColumn);
+    if (participant instanceof StandaloneColorPickerParticipant) {
+        const color = hoverParts[0].model.color;
+        participant.color = color;
+        _updateColorPresentations(editorModel, model, color, range, colorHover);
+        disposables.add(model.onColorFlushed((color) => {
+            participant.color = color;
+        }));
+    }
+    else {
+        disposables.add(model.onColorFlushed(async (color) => {
+            await _updateColorPresentations(editorModel, model, color, range, colorHover);
+            editorUpdatedByColorPicker = true;
+            range = _updateEditorModel(editor, range, model, context);
+        }));
+    }
+    disposables.add(model.onDidChangeColor((color) => {
+        _updateColorPresentations(editorModel, model, color, range, colorHover);
+    }));
+    disposables.add(editor.onDidChangeModelContent((e) => {
+        if (editorUpdatedByColorPicker) {
+            editorUpdatedByColorPicker = false;
+        }
+        else {
+            context.hide();
+            editor.focus();
+        }
+    }));
+    return disposables;
+}
+function _updateEditorModel(editor, range, model, context) {
+    let textEdits;
+    let newRange;
+    if (model.presentation.textEdit) {
+        textEdits = [model.presentation.textEdit];
+        newRange = new Range(model.presentation.textEdit.range.startLineNumber, model.presentation.textEdit.range.startColumn, model.presentation.textEdit.range.endLineNumber, model.presentation.textEdit.range.endColumn);
+        const trackedRange = editor.getModel()._setTrackedRange(null, newRange, 3 /* TrackedRangeStickiness.GrowsOnlyWhenTypingAfter */);
+        editor.pushUndoStop();
+        editor.executeEdits('colorpicker', textEdits);
+        newRange = editor.getModel()._getTrackedRange(trackedRange) || newRange;
+    }
+    else {
+        textEdits = [{ range, text: model.presentation.label, forceMoveMarkers: false }];
+        newRange = range.setEndPosition(range.endLineNumber, range.startColumn + model.presentation.label.length);
+        editor.pushUndoStop();
+        editor.executeEdits('colorpicker', textEdits);
+    }
+    if (model.presentation.additionalTextEdits) {
+        textEdits = [...model.presentation.additionalTextEdits];
+        editor.executeEdits('colorpicker', textEdits);
+        if (context) {
+            context.hide();
+        }
+    }
+    editor.pushUndoStop();
+    return newRange;
+}
+async function _updateColorPresentations(editorModel, colorPickerModel, color, range, colorHover) {
+    const colorPresentations = await getColorPresentations(editorModel, {
+        range: range,
+        color: {
+            red: color.rgba.r / 255,
+            green: color.rgba.g / 255,
+            blue: color.rgba.b / 255,
+            alpha: color.rgba.a
+        }
+    }, colorHover.provider, CancellationToken.None);
+    colorPickerModel.colorPresentations = colorPresentations || [];
+}

package/dist/src/web/frontend/node_modules/.monaco-editor-MndU045b/esm/vs/editor/contrib/colorPicker/browser/colorPickerModel.js

@@ -0,0 +1,71 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { Emitter } from '../../../../base/common/event.js';
+export class ColorPickerModel {
+    get color() {
+        return this._color;
+    }
+    set color(color) {
+        if (this._color.equals(color)) {
+            return;
+        }
+        this._color = color;
+        this._onDidChangeColor.fire(color);
+    }
+    get presentation() { return this.colorPresentations[this.presentationIndex]; }
+    get colorPresentations() {
+        return this._colorPresentations;
+    }
+    set colorPresentations(colorPresentations) {
+        this._colorPresentations = colorPresentations;
+        if (this.presentationIndex > colorPresentations.length - 1) {
+            this.presentationIndex = 0;
+        }
+        this._onDidChangePresentation.fire(this.presentation);
+    }
+    constructor(color, availableColorPresentations, presentationIndex) {
+        this.presentationIndex = presentationIndex;
+        this._onColorFlushed = new Emitter();
+        this.onColorFlushed = this._onColorFlushed.event;
+        this._onDidChangeColor = new Emitter();
+        this.onDidChangeColor = this._onDidChangeColor.event;
+        this._onDidChangePresentation = new Emitter();
+        this.onDidChangePresentation = this._onDidChangePresentation.event;
+        this.originalColor = color;
+        this._color = color;
+        this._colorPresentations = availableColorPresentations;
+    }
+    selectNextColorPresentation() {
+        this.presentationIndex = (this.presentationIndex + 1) % this.colorPresentations.length;
+        this.flushColor();
+        this._onDidChangePresentation.fire(this.presentation);
+    }
+    guessColorPresentation(color, originalText) {
+        let presentationIndex = -1;
+        for (let i = 0; i < this.colorPresentations.length; i++) {
+            if (originalText.toLowerCase() === this.colorPresentations[i].label) {
+                presentationIndex = i;
+                break;
+            }
+        }
+        if (presentationIndex === -1) {
+            // check which color presentation text has same prefix as original text's prefix
+            const originalTextPrefix = originalText.split('(')[0].toLowerCase();
+            for (let i = 0; i < this.colorPresentations.length; i++) {
+                if (this.colorPresentations[i].label.toLowerCase().startsWith(originalTextPrefix)) {
+                    presentationIndex = i;
+                    break;
+                }
+            }
+        }
+        if (presentationIndex !== -1 && presentationIndex !== this.presentationIndex) {
+            this.presentationIndex = presentationIndex;
+            this._onDidChangePresentation.fire(this.presentation);
+        }
+    }
+    flushColor() {
+        this._onColorFlushed.fire(this._color);
+    }
+}

package/dist/src/web/frontend/node_modules/.monaco-editor-MndU045b/esm/vs/editor/contrib/colorPicker/browser/colorPickerWidget.js

@@ -0,0 +1,353 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { PixelRatio } from '../../../../base/browser/browser.js';
+import * as dom from '../../../../base/browser/dom.js';
+import { GlobalPointerMoveMonitor } from '../../../../base/browser/globalPointerMoveMonitor.js';
+import { Widget } from '../../../../base/browser/ui/widget.js';
+import { Codicon } from '../../../../base/common/codicons.js';
+import { Color, HSVA, RGBA } from '../../../../base/common/color.js';
+import { Emitter } from '../../../../base/common/event.js';
+import { Disposable } from '../../../../base/common/lifecycle.js';
+import { ThemeIcon } from '../../../../base/common/themables.js';
+import './colorPicker.css';
+import { localize } from '../../../../nls.js';
+import { editorHoverBackground } from '../../../../platform/theme/common/colorRegistry.js';
+import { registerIcon } from '../../../../platform/theme/common/iconRegistry.js';
+const $ = dom.$;
+export class ColorPickerHeader extends Disposable {
+    constructor(container, model, themeService, showingStandaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this.showingStandaloneColorPicker = showingStandaloneColorPicker;
+        this._closeButton = null;
+        this._domNode = $('.colorpicker-header');
+        dom.append(container, this._domNode);
+        this._pickedColorNode = dom.append(this._domNode, $('.picked-color'));
+        dom.append(this._pickedColorNode, $('span.codicon.codicon-color-mode'));
+        this._pickedColorPresentation = dom.append(this._pickedColorNode, document.createElement('span'));
+        this._pickedColorPresentation.classList.add('picked-color-presentation');
+        const tooltip = localize('clickToToggleColorOptions', "Click to toggle color options (rgb/hsl/hex)");
+        this._pickedColorNode.setAttribute('title', tooltip);
+        this._originalColorNode = dom.append(this._domNode, $('.original-color'));
+        this._originalColorNode.style.backgroundColor = Color.Format.CSS.format(this.model.originalColor) || '';
+        this.backgroundColor = themeService.getColorTheme().getColor(editorHoverBackground) || Color.white;
+        this._register(themeService.onDidColorThemeChange(theme => {
+            this.backgroundColor = theme.getColor(editorHoverBackground) || Color.white;
+        }));
+        this._register(dom.addDisposableListener(this._pickedColorNode, dom.EventType.CLICK, () => this.model.selectNextColorPresentation()));
+        this._register(dom.addDisposableListener(this._originalColorNode, dom.EventType.CLICK, () => {
+            this.model.color = this.model.originalColor;
+            this.model.flushColor();
+        }));
+        this._register(model.onDidChangeColor(this.onDidChangeColor, this));
+        this._register(model.onDidChangePresentation(this.onDidChangePresentation, this));
+        this._pickedColorNode.style.backgroundColor = Color.Format.CSS.format(model.color) || '';
+        this._pickedColorNode.classList.toggle('light', model.color.rgba.a < 0.5 ? this.backgroundColor.isLighter() : model.color.isLighter());
+        this.onDidChangeColor(this.model.color);
+        // When the color picker widget is a standalone color picker widget, then add a close button
+        if (this.showingStandaloneColorPicker) {
+            this._domNode.classList.add('standalone-colorpicker');
+            this._closeButton = this._register(new CloseButton(this._domNode));
+        }
+    }
+    get closeButton() {
+        return this._closeButton;
+    }
+    get pickedColorNode() {
+        return this._pickedColorNode;
+    }
+    get originalColorNode() {
+        return this._originalColorNode;
+    }
+    onDidChangeColor(color) {
+        this._pickedColorNode.style.backgroundColor = Color.Format.CSS.format(color) || '';
+        this._pickedColorNode.classList.toggle('light', color.rgba.a < 0.5 ? this.backgroundColor.isLighter() : color.isLighter());
+        this.onDidChangePresentation();
+    }
+    onDidChangePresentation() {
+        this._pickedColorPresentation.textContent = this.model.presentation ? this.model.presentation.label : '';
+    }
+}
+class CloseButton extends Disposable {
+    constructor(container) {
+        super();
+        this._onClicked = this._register(new Emitter());
+        this.onClicked = this._onClicked.event;
+        this._button = document.createElement('div');
+        this._button.classList.add('close-button');
+        dom.append(container, this._button);
+        const innerDiv = document.createElement('div');
+        innerDiv.classList.add('close-button-inner-div');
+        dom.append(this._button, innerDiv);
+        const closeButton = dom.append(innerDiv, $('.button' + ThemeIcon.asCSSSelector(registerIcon('color-picker-close', Codicon.close, localize('closeIcon', 'Icon to close the color picker')))));
+        closeButton.classList.add('close-icon');
+        this._button.onclick = () => {
+            this._onClicked.fire();
+        };
+    }
+}
+export class ColorPickerBody extends Disposable {
+    constructor(container, model, pixelRatio, isStandaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this.pixelRatio = pixelRatio;
+        this._insertButton = null;
+        this._domNode = $('.colorpicker-body');
+        dom.append(container, this._domNode);
+        this._saturationBox = new SaturationBox(this._domNode, this.model, this.pixelRatio);
+        this._register(this._saturationBox);
+        this._register(this._saturationBox.onDidChange(this.onDidSaturationValueChange, this));
+        this._register(this._saturationBox.onColorFlushed(this.flushColor, this));
+        this._opacityStrip = new OpacityStrip(this._domNode, this.model, isStandaloneColorPicker);
+        this._register(this._opacityStrip);
+        this._register(this._opacityStrip.onDidChange(this.onDidOpacityChange, this));
+        this._register(this._opacityStrip.onColorFlushed(this.flushColor, this));
+        this._hueStrip = new HueStrip(this._domNode, this.model, isStandaloneColorPicker);
+        this._register(this._hueStrip);
+        this._register(this._hueStrip.onDidChange(this.onDidHueChange, this));
+        this._register(this._hueStrip.onColorFlushed(this.flushColor, this));
+        if (isStandaloneColorPicker) {
+            this._insertButton = this._register(new InsertButton(this._domNode));
+            this._domNode.classList.add('standalone-colorpicker');
+        }
+    }
+    flushColor() {
+        this.model.flushColor();
+    }
+    onDidSaturationValueChange({ s, v }) {
+        const hsva = this.model.color.hsva;
+        this.model.color = new Color(new HSVA(hsva.h, s, v, hsva.a));
+    }
+    onDidOpacityChange(a) {
+        const hsva = this.model.color.hsva;
+        this.model.color = new Color(new HSVA(hsva.h, hsva.s, hsva.v, a));
+    }
+    onDidHueChange(value) {
+        const hsva = this.model.color.hsva;
+        const h = (1 - value) * 360;
+        this.model.color = new Color(new HSVA(h === 360 ? 0 : h, hsva.s, hsva.v, hsva.a));
+    }
+    get domNode() {
+        return this._domNode;
+    }
+    get saturationBox() {
+        return this._saturationBox;
+    }
+    get enterButton() {
+        return this._insertButton;
+    }
+    layout() {
+        this._saturationBox.layout();
+        this._opacityStrip.layout();
+        this._hueStrip.layout();
+    }
+}
+class SaturationBox extends Disposable {
+    constructor(container, model, pixelRatio) {
+        super();
+        this.model = model;
+        this.pixelRatio = pixelRatio;
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._onColorFlushed = new Emitter();
+        this.onColorFlushed = this._onColorFlushed.event;
+        this._domNode = $('.saturation-wrap');
+        dom.append(container, this._domNode);
+        // Create canvas, draw selected color
+        this._canvas = document.createElement('canvas');
+        this._canvas.className = 'saturation-box';
+        dom.append(this._domNode, this._canvas);
+        // Add selection circle
+        this.selection = $('.saturation-selection');
+        dom.append(this._domNode, this.selection);
+        this.layout();
+        this._register(dom.addDisposableListener(this._domNode, dom.EventType.POINTER_DOWN, e => this.onPointerDown(e)));
+        this._register(this.model.onDidChangeColor(this.onDidChangeColor, this));
+        this.monitor = null;
+    }
+    get domNode() {
+        return this._domNode;
+    }
+    onPointerDown(e) {
+        if (!e.target || !(e.target instanceof Element)) {
+            return;
+        }
+        this.monitor = this._register(new GlobalPointerMoveMonitor());
+        const origin = dom.getDomNodePagePosition(this._domNode);
+        if (e.target !== this.selection) {
+            this.onDidChangePosition(e.offsetX, e.offsetY);
+        }
+        this.monitor.startMonitoring(e.target, e.pointerId, e.buttons, event => this.onDidChangePosition(event.pageX - origin.left, event.pageY - origin.top), () => null);
+        const pointerUpListener = dom.addDisposableListener(e.target.ownerDocument, dom.EventType.POINTER_UP, () => {
+            this._onColorFlushed.fire();
+            pointerUpListener.dispose();
+            if (this.monitor) {
+                this.monitor.stopMonitoring(true);
+                this.monitor = null;
+            }
+        }, true);
+    }
+    onDidChangePosition(left, top) {
+        const s = Math.max(0, Math.min(1, left / this.width));
+        const v = Math.max(0, Math.min(1, 1 - (top / this.height)));
+        this.paintSelection(s, v);
+        this._onDidChange.fire({ s, v });
+    }
+    layout() {
+        this.width = this._domNode.offsetWidth;
+        this.height = this._domNode.offsetHeight;
+        this._canvas.width = this.width * this.pixelRatio;
+        this._canvas.height = this.height * this.pixelRatio;
+        this.paint();
+        const hsva = this.model.color.hsva;
+        this.paintSelection(hsva.s, hsva.v);
+    }
+    paint() {
+        const hsva = this.model.color.hsva;
+        const saturatedColor = new Color(new HSVA(hsva.h, 1, 1, 1));
+        const ctx = this._canvas.getContext('2d');
+        const whiteGradient = ctx.createLinearGradient(0, 0, this._canvas.width, 0);
+        whiteGradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
+        whiteGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
+        whiteGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+        const blackGradient = ctx.createLinearGradient(0, 0, 0, this._canvas.height);
+        blackGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+        blackGradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
+        ctx.rect(0, 0, this._canvas.width, this._canvas.height);
+        ctx.fillStyle = Color.Format.CSS.format(saturatedColor);
+        ctx.fill();
+        ctx.fillStyle = whiteGradient;
+        ctx.fill();
+        ctx.fillStyle = blackGradient;
+        ctx.fill();
+    }
+    paintSelection(s, v) {
+        this.selection.style.left = `${s * this.width}px`;
+        this.selection.style.top = `${this.height - v * this.height}px`;
+    }
+    onDidChangeColor(color) {
+        if (this.monitor && this.monitor.isMonitoring()) {
+            return;
+        }
+        this.paint();
+        const hsva = color.hsva;
+        this.paintSelection(hsva.s, hsva.v);
+    }
+}
+class Strip extends Disposable {
+    constructor(container, model, showingStandaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._onColorFlushed = new Emitter();
+        this.onColorFlushed = this._onColorFlushed.event;
+        if (showingStandaloneColorPicker) {
+            this.domNode = dom.append(container, $('.standalone-strip'));
+            this.overlay = dom.append(this.domNode, $('.standalone-overlay'));
+        }
+        else {
+            this.domNode = dom.append(container, $('.strip'));
+            this.overlay = dom.append(this.domNode, $('.overlay'));
+        }
+        this.slider = dom.append(this.domNode, $('.slider'));
+        this.slider.style.top = `0px`;
+        this._register(dom.addDisposableListener(this.domNode, dom.EventType.POINTER_DOWN, e => this.onPointerDown(e)));
+        this._register(model.onDidChangeColor(this.onDidChangeColor, this));
+        this.layout();
+    }
+    layout() {
+        this.height = this.domNode.offsetHeight - this.slider.offsetHeight;
+        const value = this.getValue(this.model.color);
+        this.updateSliderPosition(value);
+    }
+    onDidChangeColor(color) {
+        const value = this.getValue(color);
+        this.updateSliderPosition(value);
+    }
+    onPointerDown(e) {
+        if (!e.target || !(e.target instanceof Element)) {
+            return;
+        }
+        const monitor = this._register(new GlobalPointerMoveMonitor());
+        const origin = dom.getDomNodePagePosition(this.domNode);
+        this.domNode.classList.add('grabbing');
+        if (e.target !== this.slider) {
+            this.onDidChangeTop(e.offsetY);
+        }
+        monitor.startMonitoring(e.target, e.pointerId, e.buttons, event => this.onDidChangeTop(event.pageY - origin.top), () => null);
+        const pointerUpListener = dom.addDisposableListener(e.target.ownerDocument, dom.EventType.POINTER_UP, () => {
+            this._onColorFlushed.fire();
+            pointerUpListener.dispose();
+            monitor.stopMonitoring(true);
+            this.domNode.classList.remove('grabbing');
+        }, true);
+    }
+    onDidChangeTop(top) {
+        const value = Math.max(0, Math.min(1, 1 - (top / this.height)));
+        this.updateSliderPosition(value);
+        this._onDidChange.fire(value);
+    }
+    updateSliderPosition(value) {
+        this.slider.style.top = `${(1 - value) * this.height}px`;
+    }
+}
+class OpacityStrip extends Strip {
+    constructor(container, model, showingStandaloneColorPicker = false) {
+        super(container, model, showingStandaloneColorPicker);
+        this.domNode.classList.add('opacity-strip');
+        this.onDidChangeColor(this.model.color);
+    }
+    onDidChangeColor(color) {
+        super.onDidChangeColor(color);
+        const { r, g, b } = color.rgba;
+        const opaque = new Color(new RGBA(r, g, b, 1));
+        const transparent = new Color(new RGBA(r, g, b, 0));
+        this.overlay.style.background = `linear-gradient(to bottom, ${opaque} 0%, ${transparent} 100%)`;
+    }
+    getValue(color) {
+        return color.hsva.a;
+    }
+}
+class HueStrip extends Strip {
+    constructor(container, model, showingStandaloneColorPicker = false) {
+        super(container, model, showingStandaloneColorPicker);
+        this.domNode.classList.add('hue-strip');
+    }
+    getValue(color) {
+        return 1 - (color.hsva.h / 360);
+    }
+}
+export class InsertButton extends Disposable {
+    constructor(container) {
+        super();
+        this._onClicked = this._register(new Emitter());
+        this.onClicked = this._onClicked.event;
+        this._button = dom.append(container, document.createElement('button'));
+        this._button.classList.add('insert-button');
+        this._button.textContent = 'Insert';
+        this._button.onclick = e => {
+            this._onClicked.fire();
+        };
+    }
+    get button() {
+        return this._button;
+    }
+}
+export class ColorPickerWidget extends Widget {
+    constructor(container, model, pixelRatio, themeService, standaloneColorPicker = false) {
+        super();
+        this.model = model;
+        this.pixelRatio = pixelRatio;
+        this._register(PixelRatio.onDidChange(() => this.layout()));
+        const element = $('.colorpicker-widget');
+        container.appendChild(element);
+        this.header = this._register(new ColorPickerHeader(element, this.model, themeService, standaloneColorPicker));
+        this.body = this._register(new ColorPickerBody(element, this.model, this.pixelRatio, standaloneColorPicker));
+    }
+    layout() {
+        this.body.layout();
+    }
+}