@workbench-kit/react 0.0.2-prototype.0.2.26 → 0.0.2-prototype.0.2.27

package/README.md

@@ -15,14 +15,44 @@ Peer: React 19.
 
 ## Styles
 
-Import once at app entry:
+Import one bundle at the app entry. A host that renders the broad Workbench feature
+set should use the core bundle, which excludes only the optional Auth and Chat
+surfaces:
 
 ```ts
-import '@workbench-kit/tokens/styles.css';
-import '@workbench-kit/react/styles.css';
-import '@workbench-kit/react/primitives.css';
+import '@workbench-kit/react/styles/core.css';
 ```
 
+Use `@workbench-kit/react/styles.css` when the host also renders Auth or Chat.
+Component-only consumers can instead combine token styles with
+`@workbench-kit/react/primitives.css`.
+
+Focused entries avoid loading unrelated feature hubs:
+
+| Entry                                        | Owns                                                                                       |
+| -------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `@workbench-kit/react/styles/foundation.css` | Theme tokens, Codicons, and shared scrollbars                                              |
+| `@workbench-kit/react/styles/overlay.css`    | Context-menu overlay rules and compact context-menu density; import after `foundation.css` |
+| `@workbench-kit/react/styles/core.css`       | Broad Workbench feature set except Auth and Chat                                           |
+| `@workbench-kit/react/styles.css`            | Full compatibility bundle                                                                  |
+
+For a non-shell surface that only uses co-located component styles and overlays:
+
+```ts
+import '@workbench-kit/react/styles/foundation.css';
+import '@workbench-kit/react/styles/overlay.css';
+```
+
+Use `core.css` for Workbench shell routes: shell composition commonly reaches Layout,
+Settings, Views, Workspace, and modal styles that a narrower name would not safely imply.
+When routes emit separate async CSS chunks, inspect the production manifest because
+bundlers can repeat a shared CSS import across chunks.
+
+The packed-consumer gate measures production `core.css` and focused overlay paths from
+packed tarballs. It checks required/forbidden selectors, the focused-to-core ratio,
+referenced static assets, and gzip budgets. Budget changes require an explicit initial-load
+review.
+
 ## Quick start
 
 ```tsx
@@ -50,19 +80,34 @@ Full walkthrough: [Getting Started](../../docs/guides/getting-started.md).
 
 ## Common subpaths
 
-| Subpath                                    | Purpose                                 |
-| ------------------------------------------ | --------------------------------------- |
-| `@workbench-kit/react/primitives`          | Buttons, editor chrome, library layouts |
-| `@workbench-kit/react/workbench/shell`     | Workbench shell / activity bar          |
-| `@workbench-kit/react/workbench/workspace` | Explorer, workspace editor panel        |
-| `@workbench-kit/react/workbench/chat`      | Chat panel and message surfaces         |
-| `@workbench-kit/react/overlay`             | Context menus, anchored overlays        |
-| `@workbench-kit/react/modal`               | Low-level modal frame                   |
-| `@workbench-kit/react/jdw`                 | JDW preview bridges                     |
-| `@workbench-kit/react/styles.css`          | Shell chrome CSS                        |
+| Subpath                                      | Purpose                              |
+| -------------------------------------------- | ------------------------------------ |
+| `@workbench-kit/react/primitives`            | App icons, controls, library layouts |
+| `@workbench-kit/react/workbench/shell`       | Workbench shell / activity bar       |
+| `@workbench-kit/react/workbench/workspace`   | Explorer, workspace editor panel     |
+| `@workbench-kit/react/workbench/chat`        | Chat panel and message surfaces      |
+| `@workbench-kit/react/overlay`               | Context menus, anchored overlays     |
+| `@workbench-kit/react/modal`                 | Low-level modal frame                |
+| `@workbench-kit/react/jdw`                   | JDW preview bridges                  |
+| `@workbench-kit/react/styles/foundation.css` | Theme/icon/scrollbar foundation      |
+| `@workbench-kit/react/styles/overlay.css`    | Focused context-menu overlay CSS     |
+| `@workbench-kit/react/styles/core.css`       | Core host CSS without Auth and Chat  |
+| `@workbench-kit/react/styles.css`            | Full CSS including Auth and Chat     |
 
 Import **only** through `exports`. Do not deep-import `src/` paths.
 
+## Host-owned app icon
+
+`AppIcon` standardizes icon sizing and image fitting without embedding a product
+mark. Supply either an image or custom content; the host remains responsible for
+the artwork.
+
+```tsx
+import { AppIcon } from '@workbench-kit/react/primitives';
+
+const appIcon = <AppIcon alt="Example app" src="/app-icon.svg" />;
+```
+
 ## Quick Open providers
 
 `WorkbenchQuickOpen` is a file/provider overlay distinct from the command palette.
@@ -123,3 +168,5 @@ pnpm dev:storybook
 Storybook stays a curated set of interaction stories — not a full package gallery.
 Demo and story modules under this package are for development; published consumers
 rely on the `exports` map and CSS entry points above.
+Storybook and the sample host intentionally keep `styles.css` so they exercise the
+full compatibility graph; focused production consumers are covered by the packed gate.

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@workbench-kit/react",
-  "version": "0.0.2-prototype.0.2.26",
+  "version": "0.0.2-prototype.0.2.27",
   "private": false,
   "sideEffects": [
     "**/*.css"
   ],
   "type": "module",
+  "typesVersions": {
+    "*": {
+      "overlay/context-menu-item": [
+        "src/overlay/context-menu-item.ts"
+      ]
+    }
+  },
   "exports": {
     ".": "./src/index.ts",
     "./drag-mime": "./src/utils/dragMime.ts",
@@ -14,7 +21,7 @@
     "./editor-tabs": "./src/workbench/editor-tabs/index.ts",
     "./icons": "./src/icons/index.ts",
     "./overlay": "./src/overlay/index.ts",
-    "./brand": "./src/brand/index.ts",
+    "./overlay/context-menu-item": "./src/overlay/context-menu-item.ts",
     "./primitives": "./src/primitives/index.ts",
     "./primitives.css": "./src/primitives/styles.css",
     "./workbench/auth": "./src/workbench/auth/index.ts",
@@ -47,6 +54,9 @@
     "./widget-tree": "./src/widget-tree/index.ts",
     "./widget-asset": "./src/widget-asset/index.ts",
     "./widget-studio": "./src/widget-studio/index.ts",
+    "./styles/core.css": "./src/styles/core.css",
+    "./styles/foundation.css": "./src/styles/foundation.css",
+    "./styles/overlay.css": "./src/styles/overlay.css",
     "./styles.css": "./src/styles.css",
     "./workbench-menu-surfaces.css": "./src/workbench-menu-surfaces.css"
   },
@@ -63,15 +73,15 @@
     "@vscode/codicons": "^0.0.45",
     "remark-gfm": "^4.0.1",
     "rehype-sanitize": "^6.0.0",
-    "@workbench-kit/contracts": "0.0.2-prototype.0.2.26",
-    "@workbench-kit/monaco": "0.0.2-prototype.0.2.26",
-    "@workbench-kit/jdw": "0.0.2-prototype.0.2.26",
-    "@workbench-kit/platform": "0.0.2-prototype.0.2.26",
-    "@workbench-kit/adapters": "0.0.2-prototype.0.2.26",
-    "@workbench-kit/runtime": "0.0.2-prototype.0.2.26",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.26",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.26",
-    "@workbench-kit/services": "0.0.2-prototype.0.2.26"
+    "@workbench-kit/contracts": "0.0.2-prototype.0.2.27",
+    "@workbench-kit/jdw": "0.0.2-prototype.0.2.27",
+    "@workbench-kit/adapters": "0.0.2-prototype.0.2.27",
+    "@workbench-kit/monaco": "0.0.2-prototype.0.2.27",
+    "@workbench-kit/runtime": "0.0.2-prototype.0.2.27",
+    "@workbench-kit/services": "0.0.2-prototype.0.2.27",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.27",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.27",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.27"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/index.ts

@@ -1,7 +1,5 @@
 export { Modal } from './modal/Modal';
 export type { ModalBodyLayout, ModalBodyPadding, ModalProps } from './modal/Modal';
-export { TilepaperAppIcon } from './brand/TilepaperAppIcon';
-export type { TilepaperAppIconProps } from './brand/TilepaperAppIcon';
 export {
   WorkbenchIcon,
   WorkbenchIconProvider,
@@ -604,6 +602,8 @@ export type {
 } from './workbench/shell/StatusBar';
 export { AbsoluteBox } from './primitives';
 export type { AbsoluteBoxProps, WorkbenchRect } from './primitives';
+export { AppIcon } from './primitives';
+export type { AppIconProps, AppIconSize } from './primitives';
 export { Badge } from './primitives';
 export type { BadgeProps } from './primitives';
 export { Button } from './primitives';

package/src/jdw/fixtures/jdw-fixtures.ts

@@ -35,18 +35,3 @@ export const JDW_FIXTURE_ROW_FLEX = `{
   }
 }
 `;
-
-export const JDW_FIXTURE_GRID_CELLS = `{
-  "type": "grid",
-  "args": {
-    "columns": 2,
-    "gap": 8,
-    "padding": 12,
-    "children": [
-      { "type": "text", "args": { "text": "A", "col": 0, "row": 0 } },
-      { "type": "text", "args": { "text": "B", "col": 1, "row": 0 } },
-      { "type": "text", "args": { "text": "Wide", "col": 0, "row": 1, "colSpan": 2 } }
-    ]
-  }
-}
-`;

package/src/overlay/ContextMenu.tsx

@@ -1,25 +1,13 @@
-import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import './context-menu.css';
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react';
 import { Button } from '../primitives/button';
 import { cxCodicon } from '../utils/codicon';
 import { cx } from '../utils/cx';
+import type { ContextMenuItem } from './context-menu-item';
 import { useClampedFixedOverlayPosition } from './useClampedFixedOverlayPosition';
 import { useFixedOverlayDismiss } from './useFixedOverlayDismiss';
 
-export type ContextMenuItem =
-  | {
-      type: 'separator';
-      id?: string | undefined;
-    }
-  | {
-      type?: 'item';
-      id?: string | undefined;
-      label: ReactNode;
-      icon?: string | undefined;
-      shortcut?: ReactNode | undefined;
-      disabled?: boolean | undefined;
-      danger?: boolean | undefined;
-      onSelect: () => void;
-    };
+export type { ContextMenuItem } from './context-menu-item';
 
 export interface ContextMenuProps {
   ariaLabel?: string | undefined;

package/src/overlay/context-menu-density.css

@@ -0,0 +1,22 @@
+/* Compact density overrides for ContextMenu. Keep before context-menu.css. */
+
+.ui-context-menu__item,
+.ui-context-menu__item.ui-button {
+  --ui-button-min-height: 28px;
+  --ui-button-height: auto;
+  --ui-button-padding: 4px 10px;
+  --ui-button-border-radius: 0;
+  border-radius: 0;
+  min-height: 28px;
+  height: auto;
+  padding: 4px 10px;
+}
+
+.ui-context-menu__separator {
+  margin: 0;
+}
+
+.ui-context-menu__shortcut {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-subtle);
+}

package/src/overlay/context-menu-item.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+export type ContextMenuItem =
+  | {
+      type: 'separator';
+      id?: string | undefined;
+    }
+  | {
+      type?: 'item';
+      id?: string | undefined;
+      label: ReactNode;
+      icon?: string | undefined;
+      shortcut?: ReactNode | undefined;
+      disabled?: boolean | undefined;
+      danger?: boolean | undefined;
+      onSelect: () => void;
+    };

package/src/overlay/context-menu.css

@@ -1,3 +1,5 @@
+@import './context-menu-density.css';
+
 .ui-context-menu {
   position: fixed;
   z-index: var(--ui-context-menu-z-index, 260);

package/src/primitives/app-icon/AppIcon.tsx

@@ -0,0 +1,33 @@
+import './app-icon.css';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+
+export type AppIconSize = 'sm' | 'md' | 'lg';
+
+type AppIconBaseProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+  size?: AppIconSize;
+};
+
+type AppIconImageProps = {
+  /** Accessible image text. Use an empty string when the surrounding surface already names the app. */
+  alt: string;
+  children?: never;
+  src: string;
+};
+
+type AppIconCustomProps = {
+  alt?: never;
+  children: ReactNode;
+  src?: never;
+};
+
+export type AppIconProps = AppIconBaseProps & (AppIconImageProps | AppIconCustomProps);
+
+export function AppIcon({ alt, children, className, size = 'md', src, ...props }: AppIconProps) {
+  return (
+    <span className={cx('ui-app-icon', className)} data-size={size} {...props}>
+      {src === undefined ? children : <img alt={alt} className="ui-app-icon__image" src={src} />}
+    </span>
+  );
+}

package/src/primitives/app-icon/app-icon.css

@@ -0,0 +1,28 @@
+.ui-app-icon {
+  --ui-app-icon-size: 20px;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-app-icon-size);
+  height: var(--ui-app-icon-size);
+  overflow: hidden;
+  border-radius: var(--shell-radius-xs, var(--radius-sm, 2px));
+}
+
+.ui-app-icon[data-size='sm'] {
+  --ui-app-icon-size: 16px;
+}
+
+.ui-app-icon[data-size='lg'] {
+  --ui-app-icon-size: 32px;
+}
+
+.ui-app-icon__image,
+.ui-app-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

package/src/primitives/catalog-browse-pane/CatalogBrowsePane.tsx

@@ -240,25 +240,32 @@ export function CatalogBrowsePane({
         >
           {items.map((item) => {
             const selected = selectedItemId === item.id;
-            if (renderGridItem) {
-              return <Fragment key={item.id}>{renderGridItem(item, { selected })}</Fragment>;
-            }
             return (
-              <CatalogBrowseCard
-                data-ui-catalog-browse-item={item.id}
-                imageAlt={item.imageAlt ?? item.label}
-                imageUrl={item.imageUrl ?? null}
+              <div
+                className="ui-catalog-browse__item"
+                data-ui-catalog-browse-item-container={item.id}
                 key={item.id}
-                label={item.label}
-                meta={item.meta ?? undefined}
-                onClick={() => onOpenItem(item.id)}
-                onContextMenu={(event) => {
-                  onItemContextMenu?.(item.id, item.label, event);
-                }}
-                selected={selected}
-                tooltip={item.label}
-                variant="cover"
-              />
+                role="listitem"
+              >
+                {renderGridItem ? (
+                  renderGridItem(item, { selected })
+                ) : (
+                  <CatalogBrowseCard
+                    data-ui-catalog-browse-item={item.id}
+                    imageAlt={item.imageAlt ?? item.label}
+                    imageUrl={item.imageUrl ?? null}
+                    label={item.label}
+                    meta={item.meta ?? undefined}
+                    onClick={() => onOpenItem(item.id)}
+                    onContextMenu={(event) => {
+                      onItemContextMenu?.(item.id, item.label, event);
+                    }}
+                    selected={selected}
+                    tooltip={item.label}
+                    variant="cover"
+                  />
+                )}
+              </div>
             );
           })}
           <BrowseScrollFooter

package/src/primitives/catalog-browse-pane/catalog-browse-pane.css

@@ -50,6 +50,10 @@
   min-height: 0;
 }
 
+.ui-catalog-browse__item {
+  min-width: 0;
+}
+
 .ui-catalog-browse__grid {
   align-content: start;
   display: grid;

package/src/primitives/index.ts

@@ -1,5 +1,7 @@
 export { AbsoluteBox } from './absolute-box/AbsoluteBox';
 export type { AbsoluteBoxProps, WorkbenchRect } from './absolute-box/AbsoluteBox';
+export { AppIcon } from './app-icon/AppIcon';
+export type { AppIconProps, AppIconSize } from './app-icon/AppIcon';
 export { Badge } from './badge/Badge';
 export type { BadgeProps } from './badge/Badge';
 export { Button } from './button/Button';

package/src/primitives/primitives.css

@@ -1,5 +1,6 @@
 /* Primitives component styles — co-located per component folder.
  * Leaf files are imported from owning TSX for HMR; this hub keeps CSS-only bundles working. */
+@import './app-icon/app-icon.css';
 @import './badge/badge.css';
 @import './button/button.css';
 @import './chip/chip.css';

package/src/scrollbars.css

@@ -117,9 +117,7 @@
   background-clip: content-box;
 }
 
-.ui-workbench-scrollbar--hidden,
-.workbench-primary-sidebar .ui-sidebar-view__body,
-.workbench-primary-sidebar .ui-workbench-sidebar-section__content {
+.ui-workbench-scrollbar--hidden {
   scrollbar-gutter: auto;
   scrollbar-width: none;
 }
@@ -136,9 +134,7 @@
 }
 
 .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 {
+.ui-workbench-scrollbar--overlay::-webkit-scrollbar {
   width: 0;
   height: 0;
 }

package/src/styles/core.css

@@ -0,0 +1,16 @@
+/* Core Workbench host styles.
+ * Auth and Chat are intentionally excluded so hosts only pay for those
+ * product surfaces when they opt into the full `styles.css` bundle. */
+@import '@workbench-kit/tokens/styles.css';
+@import '@vscode/codicons/dist/codicon.css';
+@import '../scrollbars.css';
+@import '../workbench/settings/settings.css';
+@import '../layout/layout.css';
+@import '../overlay/overlay.css';
+@import '../workbench/chrome/workbench-chrome.css';
+@import '../workbench/management/management.css';
+@import '../workbench/views/views.css';
+@import '../workbench/workspace/workspace.css';
+@import '../primitives/primitives.css';
+@import '../workbench/widgets/widgets.css';
+@import '../modal/modal.css';

package/src/styles/foundation.css

@@ -0,0 +1,4 @@
+/* Shared theme, icon, and scrollbar foundation for focused CSS compositions. */
+@import '@workbench-kit/tokens/styles.css';
+@import '@vscode/codicons/dist/codicon.css';
+@import '../scrollbars.css';

package/src/styles/overlay.css

@@ -0,0 +1,2 @@
+/* Context-menu overlays for focused non-shell compositions. */
+@import '../overlay/overlay.css';

package/src/styles.css

@@ -1,7 +1,6 @@
 @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';

package/src/widget-tree/WidgetSourceEditor.tsx

@@ -11,7 +11,6 @@ import {
 import {
   JsonCodeEditorPane,
   type JsonEditorRange,
-  type JsonEditorPosition,
   type JsonEditorProblem,
 } from '../jdw/JsonCodeEditorPane.js';
 import { JDW_WIDGET_DOCUMENT_MIME } from '../jdw/document.js';
@@ -34,19 +33,6 @@ export interface WidgetSourceEditorProps {
   readonly onSelectPath?: ((path: WidgetPath) => void) | undefined;
 }
 
-export function resolveWidgetSourceRevealPosition(
-  source: string,
-  path: WidgetPath | null | undefined,
-): JsonEditorPosition | null {
-  const position = resolveWidgetSourceActiveRange(source, path);
-  if (!position) return null;
-
-  return {
-    column: position.startColumn,
-    lineNumber: position.startLineNumber,
-  };
-}
-
 export function resolveWidgetSourceActiveRange(
   source: string,
   path: WidgetPath | null | undefined,

package/src/widget-tree/WidgetTreeCanvasPreview.tsx

@@ -41,6 +41,7 @@ import { usePreviewViewport } from '../layout/usePreviewViewport.js';
 import { JdwPreview } from '../jdw/JdwPreview.js';
 import { readWidgetPlacementAssetDragData } from './widget-placement-asset-dnd.js';
 import { canAddChildren, insertedWidgetPathForParent } from './widget-tree-layout.js';
+import type { WidgetTreeAssetDropOperation } from './WidgetTreeView.js';
 
 const RESIZE_HANDLE_POSITIONS = [
   'n',
@@ -68,12 +69,7 @@ export interface WidgetTreeCanvasPreviewProps {
   readonly onSelectPath: (path: WidgetPath) => void;
 }
 
-export interface WidgetTreeCanvasAssetDropOperation {
-  readonly asset: WidgetPlacementAsset;
-  readonly parentPath: WidgetPath;
-  readonly insertIndex: number;
-  readonly nextPath: WidgetPath;
-}
+export type WidgetTreeCanvasAssetDropOperation = WidgetTreeAssetDropOperation;
 
 interface WidgetTreeCanvasAssetDropTarget {
   readonly insertIndex: number;

package/src/widget-tree/WidgetTreeLab.tsx

@@ -31,10 +31,7 @@ import { WorkbenchLabeledPane } from '../layout/panel';
 import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
 import type { JsonEditorProblem } from '../jdw/JsonCodeEditorPane.js';
 import { WidgetAssetPalette } from './WidgetAssetPalette.js';
-import {
-  WidgetTreeCanvasPreview,
-  type WidgetTreeCanvasAssetDropOperation,
-} from './WidgetTreeCanvasPreview.js';
+import { WidgetTreeCanvasPreview } from './WidgetTreeCanvasPreview.js';
 import { WidgetInspectorPanel } from './WidgetInspectorPanel.js';
 import { WidgetSourceEditor } from './WidgetSourceEditor.js';
 import { WidgetTreeSidePanel } from './WidgetTreeSidePanel.js';
@@ -375,24 +372,6 @@ export function WidgetTreeLab({
     }
   };
 
-  const handlePlaceAssetPreviewPath = (operation: WidgetTreeCanvasAssetDropOperation) => {
-    if (!document.root) return;
-
-    const parent = getWidgetAtPath(document.root, operation.parentPath);
-    if (!parent || !canAddChildren(parent)) return;
-
-    const changed = applyPatch({
-      type: 'insert-child',
-      parentPath: operation.parentPath,
-      index: operation.insertIndex,
-      child: materializeWidgetPlacementAsset(operation.asset, parent),
-    });
-    if (changed) {
-      setSelection((current) => selectWidgetPath(current, operation.nextPath));
-      focusPropertyDetailTab();
-    }
-  };
-
   const handleRemovePath = (pathToRemove: WidgetPath) => {
     if (pathToRemove.length === 0) return;
     const parentPath = pathToRemove.slice(0, -1);
@@ -518,7 +497,7 @@ export function WidgetTreeLab({
         root={document.root}
         selectedPath={selectedPath}
         onPatch={handleCanvasPatch}
-        onPlaceAssetPath={readOnly ? undefined : handlePlaceAssetPreviewPath}
+        onPlaceAssetPath={readOnly ? undefined : handlePlaceAssetPath}
         onSelectPath={handlePreviewSelectPath}
       />
     </WorkbenchLabeledPane>

package/src/workbench/auth/WorkbenchLoginView.tsx

@@ -1,5 +1,4 @@
 import { useId, useState, type FormEvent, type ReactNode } from 'react';
-import { TilepaperAppIcon } from '../../brand/TilepaperAppIcon';
 import { Button } from '../../primitives/button';
 import { TextInput } from '../../primitives/text-input';
 import { cx } from '../../utils/cx';
@@ -165,7 +164,7 @@ export interface WorkbenchPasswordResetViewProps {
 export function WorkbenchLoginBrandMark() {
   return (
     <div className="workbench-login-brand-mark" aria-hidden>
-      <TilepaperAppIcon />
+      <span className="workbench-login-brand-mark__glyph">W</span>
     </div>
   );
 }

package/src/workbench/auth/auth-flows.css

@@ -135,8 +135,22 @@
 }
 
 .workbench-login-brand-mark {
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
   width: 100%;
   aspect-ratio: 1;
+  border: 1px solid var(--color-border);
+  border-radius: clamp(28px, 8vw, 72px);
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.workbench-login-brand-mark__glyph {
+  font-size: clamp(72px, 14vw, 160px);
+  font-weight: 650;
+  letter-spacing: -0.08em;
+  line-height: 1;
 }
 
 .workbench-login-view__footer-brand {

package/src/workbench/chrome/workbench-layout-regions.css

@@ -40,3 +40,16 @@
   --panel-bg-75: var(--color-primary-side-bar-bg-75);
   background: var(--panel-bg);
 }
+
+/* Primary-sidebar residency owns its intentionally hidden native scrollbars. */
+.workbench-primary-sidebar .ui-sidebar-view__body,
+.workbench-primary-sidebar .ui-workbench-sidebar-section__content {
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
+}
+
+.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/workbench/chrome/workbench-shell-titlebar.css

@@ -60,18 +60,10 @@
   object-position: center;
 }
 
-.workbench-shell-titlebar__app-icon > .tilepaper-app-icon,
 .workbench-shell-titlebar__app-icon > svg {
   shape-rendering: geometricPrecision;
 }
 
-.tilepaper-app-icon {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-
 .workbench-shell-titlebar__title {
   min-width: 0;
   overflow: hidden;