@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6

package/src/primitives/workbench-thumbnail/thumbnail.css

@@ -1,69 +1,69 @@
-.ui-workbench-thumbnail {
-  --ui-workbench-thumbnail-width: 46px;
-  --ui-workbench-thumbnail-height: 28px;
-  box-sizing: border-box;
-  display: inline-flex;
-  flex: 0 0 auto;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: var(--ui-workbench-thumbnail-width);
-  height: var(--ui-workbench-thumbnail-height);
-  min-width: var(--ui-workbench-thumbnail-width);
-  max-width: var(--ui-workbench-thumbnail-width);
-  min-height: var(--ui-workbench-thumbnail-height);
-  max-height: var(--ui-workbench-thumbnail-height);
-  overflow: hidden;
-  background: var(--shell-color-surface-sunken, var(--vscode-editor-background, var(--color-bg)));
-  border: 1px solid
-    var(--shell-color-border-subtle, var(--vscode-panel-border, var(--color-border)));
-  border-radius: var(--shell-radius-sm, 4px);
-}
-
-.ui-workbench-thumbnail[data-size='md'] {
-  --ui-workbench-thumbnail-width: 64px;
-  --ui-workbench-thumbnail-height: 36px;
-}
-
-.ui-workbench-thumbnail[data-size='library'] {
-  --ui-workbench-thumbnail-width: var(--shell-library-capsule-list-width, 116px);
-  --ui-workbench-thumbnail-height: var(--shell-library-capsule-list-height, 43px);
-}
-
-.ui-workbench-thumbnail[data-size='icon'] {
-  --ui-workbench-thumbnail-width: 20px;
-  --ui-workbench-thumbnail-height: 20px;
-  background: var(--ui-workbench-thumbnail-icon-background, transparent);
-  border: var(--ui-workbench-thumbnail-icon-border-width, 0) solid
-    var(--ui-workbench-thumbnail-icon-border-color, transparent);
-  border-radius: var(--shell-radius-xs, 2px);
-}
-
-.ui-workbench-thumbnail .ui-workbench-media-slot__placeholder {
-  width: 100%;
-  height: 100%;
-}
-
-.ui-workbench-thumbnail__image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.ui-workbench-thumbnail__icon {
-  color: var(--shell-color-text-muted, var(--vscode-icon-foreground, var(--color-icon)));
-  font-size: 14px;
-}
-
-.ui-workbench-thumbnail[data-size='md'] .ui-workbench-thumbnail__icon {
-  font-size: 18px;
-}
-
-.ui-workbench-thumbnail[data-size='library'] .ui-workbench-thumbnail__icon {
-  font-size: 22px;
-}
-
-.ui-workbench-thumbnail[data-size='icon'] .ui-workbench-thumbnail__icon {
-  font-size: 16px;
-}
+.ui-workbench-thumbnail {
+  --ui-workbench-thumbnail-width: 46px;
+  --ui-workbench-thumbnail-height: 28px;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-workbench-thumbnail-width);
+  height: var(--ui-workbench-thumbnail-height);
+  min-width: var(--ui-workbench-thumbnail-width);
+  max-width: var(--ui-workbench-thumbnail-width);
+  min-height: var(--ui-workbench-thumbnail-height);
+  max-height: var(--ui-workbench-thumbnail-height);
+  overflow: hidden;
+  background: var(--shell-color-surface-sunken, var(--vscode-editor-background, var(--color-bg)));
+  border: 1px solid
+    var(--shell-color-border-subtle, var(--vscode-panel-border, var(--color-border)));
+  border-radius: var(--shell-radius-sm, 4px);
+}
+
+.ui-workbench-thumbnail[data-size='md'] {
+  --ui-workbench-thumbnail-width: 64px;
+  --ui-workbench-thumbnail-height: 36px;
+}
+
+.ui-workbench-thumbnail[data-size='library'] {
+  --ui-workbench-thumbnail-width: var(--shell-library-capsule-list-width, 116px);
+  --ui-workbench-thumbnail-height: var(--shell-library-capsule-list-height, 43px);
+}
+
+.ui-workbench-thumbnail[data-size='icon'] {
+  --ui-workbench-thumbnail-width: 20px;
+  --ui-workbench-thumbnail-height: 20px;
+  background: var(--ui-workbench-thumbnail-icon-background, transparent);
+  border: var(--ui-workbench-thumbnail-icon-border-width, 0) solid
+    var(--ui-workbench-thumbnail-icon-border-color, transparent);
+  border-radius: var(--shell-radius-xs, 2px);
+}
+
+.ui-workbench-thumbnail .ui-workbench-media-slot__placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-workbench-thumbnail__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-workbench-thumbnail__icon {
+  color: var(--shell-color-text-muted, var(--vscode-icon-foreground, var(--color-icon)));
+  font-size: 14px;
+}
+
+.ui-workbench-thumbnail[data-size='md'] .ui-workbench-thumbnail__icon {
+  font-size: 18px;
+}
+
+.ui-workbench-thumbnail[data-size='library'] .ui-workbench-thumbnail__icon {
+  font-size: 22px;
+}
+
+.ui-workbench-thumbnail[data-size='icon'] .ui-workbench-thumbnail__icon {
+  font-size: 16px;
+}

package/src/scrollbars.css

@@ -1,144 +1,144 @@
-/*
- * Themed scrollbars:
- * - Theme host (`[data-theme]` / WorkbenchThemeProvider) owns the default look.
- * - Call sites use `overflow: auto` or `ScrollArea` — no class-name soup required.
- * - `.ui-workbench-scrollbar` remains an explicit opt-in for out-of-theme hosts/portals.
- * - Visibility modifiers (`--hidden`, primary sidebar) stay as exceptions.
- */
-
-[data-theme],
-[data-theme-preset],
-.ui-workbench-host-root {
-  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-  scrollbar-width: thin;
-}
-
-/*
- * Chromium often leaves overflow boxes at scrollbar-width:auto even though the
- * property is inherited — force inherit under the theme host.
- */
-[data-theme] :where(*),
-[data-theme-preset] :where(*),
-.ui-workbench-host-root :where(*) {
-  scrollbar-color: inherit;
-  scrollbar-width: inherit;
-}
-
-/* WebKit painting must target the scrollport; :where(*) survives CSS minify better than bare * */
-:is([data-theme], [data-theme-preset], .ui-workbench-host-root) :where(*)::-webkit-scrollbar {
-  width: var(--scrollbar-size);
-  height: var(--scrollbar-size);
-}
-
-:is([data-theme], [data-theme-preset], .ui-workbench-host-root)
-  :where(*)::-webkit-scrollbar-button {
-  display: none;
-}
-
-:is([data-theme], [data-theme-preset], .ui-workbench-host-root) :where(*)::-webkit-scrollbar-track {
-  background: var(--scrollbar-track);
-}
-
-:is([data-theme], [data-theme-preset], .ui-workbench-host-root) :where(*)::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border: var(--scrollbar-thumb-inset) solid transparent;
-  border-radius: calc(var(--scrollbar-size) / 2);
-  background-clip: content-box;
-}
-
-:is([data-theme], [data-theme-preset], .ui-workbench-host-root)
-  :where(*)::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
-  background-clip: content-box;
-}
-
-:is([data-theme], [data-theme-preset], .ui-workbench-host-root)
-  :where(*)::-webkit-scrollbar-thumb:active {
-  background: var(--scrollbar-thumb-active);
-  background-clip: content-box;
-}
-
-.ui-scroll-area {
-  min-width: 0;
-  min-height: 0;
-}
-
-.ui-scroll-area--both {
-  overflow: auto;
-}
-
-.ui-scroll-area--horizontal {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.ui-scroll-area--vertical {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.ui-scroll-area--stable-gutter {
-  scrollbar-gutter: stable;
-}
-
-/* Explicit opt-in (ScrollArea, out-of-theme hosts) — same tokens as theme host */
-.ui-workbench-scrollbar {
-  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-  scrollbar-width: thin;
-}
-
-.ui-workbench-scrollbar::-webkit-scrollbar {
-  width: var(--scrollbar-size);
-  height: var(--scrollbar-size);
-}
-
-.ui-workbench-scrollbar::-webkit-scrollbar-button {
-  display: none;
-}
-
-.ui-workbench-scrollbar::-webkit-scrollbar-track {
-  background: var(--scrollbar-track);
-}
-
-.ui-workbench-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border: var(--scrollbar-thumb-inset) solid transparent;
-  border-radius: calc(var(--scrollbar-size) / 2);
-  background-clip: content-box;
-}
-
-.ui-workbench-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
-  background-clip: content-box;
-}
-
-.ui-workbench-scrollbar::-webkit-scrollbar-thumb:active {
-  background: var(--scrollbar-thumb-active);
-  background-clip: content-box;
-}
-
-.ui-workbench-scrollbar--hidden,
-.workbench-primary-sidebar .ui-sidebar-view__body,
-.workbench-primary-sidebar .ui-workbench-sidebar-section__content {
-  scrollbar-gutter: auto;
-  scrollbar-width: none;
-}
-
-/*
- * Overlay scrollports hide the *native* classic bar (gutter 0, no hover width
- * toggle). `ScrollArea scrollbars="overlay"` paints an absolute rail/thumb in
- * `scroll-area-overlay.css`. Do not reintroduce ::-webkit-scrollbar width
- * 0↔N or scrollbar-width none↔thin on hover — that reflows Library filters.
- */
-.ui-workbench-scrollbar--overlay {
-  scrollbar-gutter: auto;
-  scrollbar-width: none;
-}
-
-.ui-workbench-scrollbar--hidden::-webkit-scrollbar,
-.ui-workbench-scrollbar--overlay::-webkit-scrollbar,
-.workbench-primary-sidebar .ui-sidebar-view__body::-webkit-scrollbar,
-.workbench-primary-sidebar .ui-workbench-sidebar-section__content::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
+/*
+ * Themed scrollbars:
+ * - Theme host (`[data-theme]` / WorkbenchThemeProvider) owns the default look.
+ * - Call sites use `overflow: auto` or `ScrollArea` — no class-name soup required.
+ * - `.ui-workbench-scrollbar` remains an explicit opt-in for out-of-theme hosts/portals.
+ * - Visibility modifiers (`--hidden`, primary sidebar) stay as exceptions.
+ */
+
+[data-theme],
+[data-theme-preset],
+.ui-workbench-host-root {
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  scrollbar-width: thin;
+}
+
+/*
+ * Chromium often leaves overflow boxes at scrollbar-width:auto even though the
+ * property is inherited — force inherit under the theme host.
+ */
+[data-theme] :where(*),
+[data-theme-preset] :where(*),
+.ui-workbench-host-root :where(*) {
+  scrollbar-color: inherit;
+  scrollbar-width: inherit;
+}
+
+/* WebKit painting must target the scrollport; :where(*) survives CSS minify better than bare * */
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root) :where(*)::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+  height: var(--scrollbar-size);
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root)
+  :where(*)::-webkit-scrollbar-button {
+  display: none;
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root) :where(*)::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root) :where(*)::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border: var(--scrollbar-thumb-inset) solid transparent;
+  border-radius: calc(var(--scrollbar-size) / 2);
+  background-clip: content-box;
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root)
+  :where(*)::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+  background-clip: content-box;
+}
+
+:is([data-theme], [data-theme-preset], .ui-workbench-host-root)
+  :where(*)::-webkit-scrollbar-thumb:active {
+  background: var(--scrollbar-thumb-active);
+  background-clip: content-box;
+}
+
+.ui-scroll-area {
+  min-width: 0;
+  min-height: 0;
+}
+
+.ui-scroll-area--both {
+  overflow: auto;
+}
+
+.ui-scroll-area--horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.ui-scroll-area--vertical {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.ui-scroll-area--stable-gutter {
+  scrollbar-gutter: stable;
+}
+
+/* Explicit opt-in (ScrollArea, out-of-theme hosts) — same tokens as theme host */
+.ui-workbench-scrollbar {
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  scrollbar-width: thin;
+}
+
+.ui-workbench-scrollbar::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+  height: var(--scrollbar-size);
+}
+
+.ui-workbench-scrollbar::-webkit-scrollbar-button {
+  display: none;
+}
+
+.ui-workbench-scrollbar::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+.ui-workbench-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border: var(--scrollbar-thumb-inset) solid transparent;
+  border-radius: calc(var(--scrollbar-size) / 2);
+  background-clip: content-box;
+}
+
+.ui-workbench-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+  background-clip: content-box;
+}
+
+.ui-workbench-scrollbar::-webkit-scrollbar-thumb:active {
+  background: var(--scrollbar-thumb-active);
+  background-clip: content-box;
+}
+
+.ui-workbench-scrollbar--hidden,
+.workbench-primary-sidebar .ui-sidebar-view__body,
+.workbench-primary-sidebar .ui-workbench-sidebar-section__content {
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
+}
+
+/*
+ * Overlay scrollports hide the *native* classic bar (gutter 0, no hover width
+ * toggle). `ScrollArea scrollbars="overlay"` paints an absolute rail/thumb in
+ * `scroll-area-overlay.css`. Do not reintroduce ::-webkit-scrollbar width
+ * 0↔N or scrollbar-width none↔thin on hover — that reflows Library filters.
+ */
+.ui-workbench-scrollbar--overlay {
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
+}
+
+.ui-workbench-scrollbar--hidden::-webkit-scrollbar,
+.ui-workbench-scrollbar--overlay::-webkit-scrollbar,
+.workbench-primary-sidebar .ui-sidebar-view__body::-webkit-scrollbar,
+.workbench-primary-sidebar .ui-workbench-sidebar-section__content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}

package/src/styles.css

@@ -1,17 +1,17 @@
-@import '@workbench-kit/tokens/styles.css';
-@import '@vscode/codicons/dist/codicon.css';
-@import './scrollbars.css';
-@import './workbench-menu-surfaces.css';
-@import './workbench/settings/settings.css';
-@import './layout/layout.css';
-@import './overlay/overlay.css';
-@import './workbench/workbench-chrome.css';
-@import './workbench/auth/auth.css';
-@import './workbench/management/management.css';
-@import './workbench/views/views.css';
-@import './workbench/workspace/workspace.css';
-@import './workbench/chat/chat.css';
-@import './primitives/primitives.css';
-@import './workbench/widgets/widgets.css';
-@import './workbench/jdw/jdw.css';
-@import './modal/modal.css';
+@import '@workbench-kit/tokens/styles.css';
+@import '@vscode/codicons/dist/codicon.css';
+@import './scrollbars.css';
+@import './workbench-menu-surfaces.css';
+@import './workbench/settings/settings.css';
+@import './layout/layout.css';
+@import './overlay/overlay.css';
+@import './workbench/workbench-chrome.css';
+@import './workbench/auth/auth.css';
+@import './workbench/management/management.css';
+@import './workbench/views/views.css';
+@import './workbench/workspace/workspace.css';
+@import './workbench/chat/chat.css';
+@import './primitives/primitives.css';
+@import './workbench/widgets/widgets.css';
+@import './workbench/jdw/jdw.css';
+@import './modal/modal.css';

package/src/test-utils/workbenchMonacoMock.tsx

@@ -1,37 +1,37 @@
-import type { ReactNode } from 'react';
-import { createElement } from 'react';
-
-export interface MockWorkbenchMonacoEditorProps {
-  language?: string;
-  onChange?: (value?: string) => void;
-  path?: string;
-  theme?: string;
-  value?: string;
-}
-
-export function createWorkbenchMonacoMockModule(
-  renderEditor?: (props: MockWorkbenchMonacoEditorProps) => ReactNode,
-) {
-  const defaultRender = ({ value }: MockWorkbenchMonacoEditorProps) =>
-    createElement('div', { 'data-testid': 'monaco-editor' }, value ?? 'Mocked Monaco Editor');
-
-  return {
-    WorkbenchMonacoEditor: renderEditor ?? defaultRender,
-    useMonacoWorkbenchThemeSync: () => undefined,
-    prepareMonacoWorkbenchEditor: () => undefined,
-    monacoThemeForWorkspaceTheme: (theme: string) =>
-      theme === 'light' ? 'workbench-kit-light' : 'workbench-kit-dark',
-    MONACO_DARK_THEME_ID: 'workbench-kit-dark',
-    MONACO_LIGHT_THEME_ID: 'workbench-kit-light',
-    monaco: {
-      KeyMod: { CtrlCmd: 1 },
-      KeyCode: { KeyS: 1 },
-      editor: {
-        defineTheme: () => undefined,
-        setTheme: () => undefined,
-        onDidChangeMarkers: () => ({ dispose: () => undefined }),
-        getModelMarkers: () => [],
-      },
-    },
-  };
-}
+import type { ReactNode } from 'react';
+import { createElement } from 'react';
+
+export interface MockWorkbenchMonacoEditorProps {
+  language?: string;
+  onChange?: (value?: string) => void;
+  path?: string;
+  theme?: string;
+  value?: string;
+}
+
+export function createWorkbenchMonacoMockModule(
+  renderEditor?: (props: MockWorkbenchMonacoEditorProps) => ReactNode,
+) {
+  const defaultRender = ({ value }: MockWorkbenchMonacoEditorProps) =>
+    createElement('div', { 'data-testid': 'monaco-editor' }, value ?? 'Mocked Monaco Editor');
+
+  return {
+    WorkbenchMonacoEditor: renderEditor ?? defaultRender,
+    useMonacoWorkbenchThemeSync: () => undefined,
+    prepareMonacoWorkbenchEditor: () => undefined,
+    monacoThemeForWorkspaceTheme: (theme: string) =>
+      theme === 'light' ? 'workbench-kit-light' : 'workbench-kit-dark',
+    MONACO_DARK_THEME_ID: 'workbench-kit-dark',
+    MONACO_LIGHT_THEME_ID: 'workbench-kit-light',
+    monaco: {
+      KeyMod: { CtrlCmd: 1 },
+      KeyCode: { KeyS: 1 },
+      editor: {
+        defineTheme: () => undefined,
+        setTheme: () => undefined,
+        onDidChangeMarkers: () => ({ dispose: () => undefined }),
+        getModelMarkers: () => [],
+      },
+    },
+  };
+}

package/src/utils/codicon.ts

@@ -1,17 +1,17 @@
-import { cx } from './cx';
-
-export function getCodiconClassName(icon: string | undefined): string | undefined {
-  const token = icon?.trim();
-  if (!token) return undefined;
-
-  return token.startsWith('codicon-') ? token : `codicon-${token}`;
-}
-
-export function cxCodicon(
-  icon: string | undefined,
-  ...classNames: Array<false | null | string | undefined>
-) {
-  const iconClassName = getCodiconClassName(icon);
-
-  return iconClassName ? cx('codicon', iconClassName, ...classNames) : cx(...classNames);
-}
+import { cx } from './cx';
+
+export function getCodiconClassName(icon: string | undefined): string | undefined {
+  const token = icon?.trim();
+  if (!token) return undefined;
+
+  return token.startsWith('codicon-') ? token : `codicon-${token}`;
+}
+
+export function cxCodicon(
+  icon: string | undefined,
+  ...classNames: Array<false | null | string | undefined>
+) {
+  const iconClassName = getCodiconClassName(icon);
+
+  return iconClassName ? cx('codicon', iconClassName, ...classNames) : cx(...classNames);
+}