@isopodlabs/vscode_utils 0.2.5 → 0.3.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Adrian Stephens
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,8 +1,13 @@
-# @isopodlabs/vscode_utils
-
-This package provides a set of utilities for vscode.
-
-
-## License
-
+# @isopodlabs/vscode_utils
+[![npm version](https://img.shields.io/npm/v/@isopodlabs/vscode_utils.svg)](https://www.npmjs.com/package/@isopodlabs/vscode_utils)
+[![GitHub stars](https://img.shields.io/github/stars/adrianstephens/vscode-utils.svg?style=social)](https://github.com/adrianstephens/vscode-utils)
+[![License](https://img.shields.io/npm/l/@isopodlabs/vscode_utils.svg)](LICENSE.txt)
+
+This package provides a set of utilities for vscode.
+
+## ☕ Support My Work  
+If you use this package, consider [buying me a tea](https://coff.ee/adrianstephens) to support future updates!  
+
+## License
+
 This project is licensed under the MIT License.

package/assets/shared.css

@@ -1,244 +1,253 @@
-@font-face {
-	font-family: "codicon";
-	src: url("./codicon.ttf?9642aa1d48ab4e55aa1bf3f0b8678aa1") format("truetype");
-}
-
-html {
-	scrollbar-width: none;
-	/*user-select: none;*/
-}
-
-body {
-	font-family: var(--vscode-font-family);
-	font-size: var(--vscode-font-size);
-	font-weight: var(--vscode-font-weight);
-	color: var(--vscode-foreground);
-	--icon-color:  var(--vscode-foreground);
-}
-
-.loading-container {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-}
-
-.spinner {
-	width: 40px;
-	height: 40px;
-	margin-bottom: 16px;
-	border: 4px solid var(--vscode-button-background);
-	border-top: 4px solid transparent;
-	border-radius: 50%;
-	animation: spin 1s linear infinite;
-}
-
-.loading-text {
-	font-family: var(--vscode-font-family);
-	font-size: 14px;
-}
-
-@keyframes spin {
-	0% { transform: rotate(0deg); }
-	100% { transform: rotate(360deg); }
-}
-
-/* For font icons (character in icon attribute)*/
-[icon]::before {
-	content: attr(icon);
-	font: normal normal normal 16px/1 codicon;
-	display: inline-block;
-	color: var(--icon-color);
-	text-decoration: none;
-	text-rendering: auto;
-	text-align: center;
-	vertical-align: text-top;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-/* For img icons (img in --icon)*/
-.icon::before {
-    content: '';
-	display: inline-block;
-	text-decoration: none;
-	width: 16px;
-	height: 16px;
-    background-image: var(--icon);
-	margin-right: 5px;
-}
-
-.codicon {
-	font: normal normal normal 16px/1 codicon;
-	display: inline-block;
-	text-decoration: none;
-	text-rendering: auto;
-	text-align: center;
-	vertical-align: text-top;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-button[icon] {
-	border: none;
-	background-color: transparent;
-	padding: 0;
-	cursor: pointer;
-	color: var(--vscode-icon-foreground);
-
-	&:hover {
-		background-color: var(--vscode-list-hoverBackground);
-	}
-}
-
-button {
-	color: var(--vscode-button-foreground);
-	background-color: var(--vscode-button-background);
-	border: 1px solid var(--vscode-button-border, transparent);
-	border-radius: 2px;
-	padding: 4px 8px;
-	cursor: pointer;
-	&:hover {
-		background-color: var(--vscode-button-hoverBackground);
-	}
-}
-
-button.codicon {
-	border: none;
-	background-color: transparent;
-	padding: 0;
-	cursor: pointer;
-	color: var(--vscode-icon-foreground);
-	&:hover {
-		opacity: 0.8;
-	}
-}
-
-.select {
-    cursor: pointer;
-    width: fit-content;
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-.selected {
-    background-color: var(--vscode-editor-selectionBackground);
-}
-
-/* Splitter */
-
-.splitter {
-	position: relative;
-	width: 5px;
-	flex: none;
-	cursor:ew-resize;
-
-	&::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 2px;
-		width: 1px;
-		height: 100%;
-		background-color: var(--vscode-editorGroup-border);
-		transition: background-color 0.3s;
-	}
-
-	&:hover::before {
-		left: 0;
-		width: 100%;
-		background-color: var(--vscode-sash-hoverBorder);
-	}
-}
-
-/* Scrollbar */
-
-.vscrollbar, .hscrollbar {
-	position: fixed;
-	z-index: 20;
-	background: var(--vscode-scrollbarSlider-background);
-
-	opacity: 0;
-	transition: opacity .8s linear;
-
-	html:hover &, .resizing & {
-		opacity: 1;
-		transition: opacity .1s linear;
-
-		&:hover {
-			background: var(--vscode-scrollbarSlider-hoverBackground);
-		}
-		&.active {
-			background: var(--vscode-scrollbarSlider-activeBackground)
-		}
-
-		&.invisible {
-			opacity: 0;
-			transition: opacity .8s linear;
-			pointer-events: none;
-		}
-	}
-}
-
-.vscrollbar {
-	right: 0;
-	width: 14px;
-}
-
-.hscrollbar {
-	bottom: 0;
-	height: 14px;
-}
-/*
-.tooltip {
-	position: absolute;
-    display:    none;
-    padding:    .5em;
-    z-index:    1000;
-	overflow:   hidden;
-	background: var(--vscode-editorHoverWidget-background);
-	color:      var(--vscode-editorHoverWidget-foreground);
-	border:     1px solid var(--vscode-editorHoverWidget-border);
-	border-radius: 3px;
-	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
-    white-space: pre-wrap;
-    pointer-events: none;
-}
-	*/
-.tooltip {
-    position: fixed;
-    z-index: 1000;
-    pointer-events: none;
-    background: var(--vscode-editorHoverWidget-background);
-    color: var(--vscode-editorHoverWidget-foreground);
-    border: 1px solid var(--vscode-editorHoverWidget-border);
-    border-radius: 4px;
-    padding: 6px 12px;
-    font-size: 13px;
-    font-family: var(--vscode-font-family, sans-serif);
-    box-shadow: 0 2px 8px var(--vscode-widget-shadow);
-    opacity: 0;
-    transition: opacity 0.15s;
-    pointer-events: none;
-    white-space: pre;
-    max-width: 320px;
-    word-break: break-word;
-}
-
-.tooltip.visible {
-    opacity: 1;
-    transition: opacity 0.1s;
+@font-face {
+	font-family: "codicon";
+	src: url("./codicon.ttf?9642aa1d48ab4e55aa1bf3f0b8678aa1") format("truetype");
+}
+
+html {
+	scrollbar-width: none;
+	/*user-select: none;*/
+}
+
+body {
+	font-family: var(--vscode-font-family);
+	font-size: var(--vscode-font-size);
+	font-weight: var(--vscode-font-weight);
+	color: var(--vscode-foreground);
+	--icon-color:  var(--vscode-foreground);
+}
+
+.loading-container {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.spinner {
+	width: 40px;
+	height: 40px;
+	margin-bottom: 16px;
+	border: 4px solid var(--vscode-button-background);
+	border-top: 4px solid transparent;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+.loading-text {
+	font-family: var(--vscode-font-family);
+	font-size: 14px;
+}
+
+@keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+
+/* For font icons (character in icon attribute)*/
+[icon]::before {
+	content: attr(icon);
+	font: normal normal normal 16px/1 codicon;
+	display: inline-block;
+	color: var(--icon-color);
+	text-decoration: none;
+	text-rendering: auto;
+	text-align: center;
+	vertical-align: text-top;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+[icon*="\00eb19 "]::before {
+    animation: codicon-spin 1.5s linear infinite;
+}
+
+@keyframes codicon-spin {
+    to { transform: rotate(360deg); }
+}
+
+
+/* For img icons (img in --icon)*/
+.icon::before {
+    content: '';
+	display: inline-block;
+	text-decoration: none;
+	width: 16px;
+	height: 16px;
+    background-image: var(--icon);
+	margin-right: 5px;
+}
+
+.codicon {
+	font: normal normal normal 16px/1 codicon;
+	display: inline-block;
+	text-decoration: none;
+	text-rendering: auto;
+	text-align: center;
+	vertical-align: text-top;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+button[icon] {
+	border: none;
+	background-color: transparent;
+	padding: 0;
+	cursor: pointer;
+	color: var(--vscode-icon-foreground);
+
+	&:hover {
+		background-color: var(--vscode-list-hoverBackground);
+	}
+}
+
+button {
+	color: var(--vscode-button-foreground);
+	background-color: var(--vscode-button-background);
+	border: 1px solid var(--vscode-button-border, transparent);
+	border-radius: 2px;
+	padding: 4px 8px;
+	cursor: pointer;
+	&:hover {
+		background-color: var(--vscode-button-hoverBackground);
+	}
+}
+
+button.codicon {
+	border: none;
+	background-color: transparent;
+	padding: 0;
+	cursor: pointer;
+	color: var(--vscode-icon-foreground);
+	&:hover {
+		opacity: 0.8;
+	}
+}
+
+.select {
+    cursor: pointer;
+    width: fit-content;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.selected {
+    background-color: var(--vscode-editor-selectionBackground);
+}
+
+/* Splitter */
+
+.splitter {
+	position: relative;
+	width: 5px;
+	flex: none;
+	cursor:ew-resize;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 2px;
+		width: 1px;
+		height: 100%;
+		background-color: var(--vscode-editorGroup-border);
+		transition: background-color 0.3s;
+	}
+
+	&:hover::before {
+		left: 0;
+		width: 100%;
+		background-color: var(--vscode-sash-hoverBorder);
+	}
+}
+
+/* Scrollbar */
+
+.vscrollbar, .hscrollbar {
+	position: fixed;
+	z-index: 20;
+	background: var(--vscode-scrollbarSlider-background);
+
+	opacity: 0;
+	transition: opacity .8s linear;
+
+	html:hover &, .resizing & {
+		opacity: 1;
+		transition: opacity .1s linear;
+
+		&:hover {
+			background: var(--vscode-scrollbarSlider-hoverBackground);
+		}
+		&.active {
+			background: var(--vscode-scrollbarSlider-activeBackground)
+		}
+
+		&.invisible {
+			opacity: 0;
+			transition: opacity .8s linear;
+			pointer-events: none;
+		}
+	}
+}
+
+.vscrollbar {
+	right: 0;
+	width: 14px;
+}
+
+.hscrollbar {
+	bottom: 0;
+	height: 14px;
+}
+/*
+.tooltip {
+	position: absolute;
+    display:    none;
+    padding:    .5em;
+    z-index:    1000;
+	overflow:   hidden;
+	background: var(--vscode-editorHoverWidget-background);
+	color:      var(--vscode-editorHoverWidget-foreground);
+	border:     1px solid var(--vscode-editorHoverWidget-border);
+	border-radius: 3px;
+	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
+    white-space: pre-wrap;
+    pointer-events: none;
+}
+	*/
+.tooltip {
+    position: fixed;
+    z-index: 1000;
+    pointer-events: none;
+    background: var(--vscode-editorHoverWidget-background);
+    color: var(--vscode-editorHoverWidget-foreground);
+    border: 1px solid var(--vscode-editorHoverWidget-border);
+    border-radius: 4px;
+    padding: 6px 12px;
+    font-size: 13px;
+    font-family: var(--vscode-font-family, sans-serif);
+    box-shadow: 0 2px 8px var(--vscode-widget-shadow);
+    opacity: 0;
+    transition: opacity 0.15s;
+    pointer-events: none;
+    white-space: pre;
+    max-width: 320px;
+    word-break: break-word;
+}
+
+.tooltip.visible {
+    opacity: 1;
+    transition: opacity 0.1s;
 }

package/assets/tree.css

@@ -1,24 +1,24 @@
-.caret {
-	&::before {
-		font-family: 'codicon';
-		content: '\eab6';
-		margin-right: 6px;
-		pointer-events: auto;
-		cursor: pointer;
-	}
-
-	&.caret-down::before {
-		content: '\eab4';
-	}
-
-	&:has(> span:first-child > .codicon) > .children {
-		padding-left: 32px;
-	}
-
-	&:not(.caret-down) div {
-		display: none;
-	}
-	&:not(.caret-down) ul {
-		display: none;
-	}
-}
+.caret {
+	&::before {
+		font-family: 'codicon';
+		content: '\eab6';
+		margin-right: 6px;
+		pointer-events: auto;
+		cursor: pointer;
+	}
+
+	&.caret-down::before {
+		content: '\eab4';
+	}
+
+	&:has(> span:first-child > .codicon) > .children {
+		padding-left: 32px;
+	}
+
+	&:not(.caret-down) div {
+		display: none;
+	}
+	&:not(.caret-down) ul {
+		display: none;
+	}
+}

package/dist/codicon.d.ts

@@ -0,0 +1,16 @@
+import { Uri, ThemeIcon } from 'vscode';
+export declare const codicons: Record<string, string>;
+type IconType0 = string | Uri;
+export type IconType = IconType0 | ThemeIcon | {
+    light: IconType0;
+    dark: IconType0;
+};
+export declare function iconAttribute(icon: IconType0): string;
+export declare function iconAttributes(icon?: IconType): {
+    icon: string;
+    color?: undefined;
+} | {
+    icon: string;
+    color: string;
+} | undefined;
+export {};