@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

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

@@ -0,0 +1,440 @@
+.workbench-auth-gate {
+  min-width: 0;
+  min-height: 100%;
+}
+
+.workbench-auth-gate__loading {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--color-text-muted);
+  background: var(--color-bg);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-bootstrap-gate {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+.workbench-bootstrap-view {
+  width: min(100%, 440px);
+  display: grid;
+  gap: 16px;
+}
+
+.workbench-bootstrap-view__header {
+  display: grid;
+  gap: 6px;
+}
+
+.workbench-bootstrap-view__heading {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.workbench-bootstrap-view__subtitle,
+.workbench-bootstrap-view__active {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-bootstrap-view__tasks {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.workbench-bootstrap-view__task {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-bootstrap-view__task--running {
+  border-color: color-mix(in srgb, var(--color-accent, #3794ff) 45%, var(--color-border));
+}
+
+.workbench-bootstrap-view__task--completed {
+  color: var(--color-text-muted);
+}
+
+.workbench-bootstrap-view__task--failed {
+  border-color: color-mix(in srgb, var(--color-danger, #f14c4c) 45%, var(--color-border));
+}
+
+.workbench-bootstrap-view__task-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.workbench-bootstrap-view__task-detail {
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.workbench-bootstrap-view__error {
+  display: grid;
+  gap: 10px;
+  color: var(--color-danger, #f14c4c);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-bootstrap-view__error p {
+  margin: 0;
+}
+
+.workbench-bootstrap-view__footer {
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.workbench-login-view {
+  box-sizing: border-box;
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: minmax(300px, 0.86fr) minmax(420px, 1.14fr);
+  color: var(--color-text);
+  background: var(--color-bg);
+  font-family: var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
+  overflow: hidden;
+}
+
+.workbench-login-view__brand-pane {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(32px, 5vw, 72px);
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+}
+
+.workbench-login-view__mark {
+  width: min(100%, 360px);
+  max-width: 100%;
+}
+
+.workbench-login-brand-mark {
+  width: 100%;
+  aspect-ratio: 1;
+}
+
+.workbench-login-view__footer-brand {
+  position: absolute;
+  left: clamp(32px, 5vw, 72px);
+  bottom: clamp(28px, 5vh, 56px);
+  max-width: calc(100% - clamp(64px, 10vw, 144px));
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbench-login-view__form {
+  box-sizing: border-box;
+  width: min(100%, 440px);
+  min-width: 0;
+  display: grid;
+  justify-self: center;
+  align-content: center;
+  gap: 22px;
+  padding: clamp(32px, 5vw, 72px);
+}
+
+.workbench-login-view__heading {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.workbench-login-view__title {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: currentColor;
+  font-size: clamp(2rem, 3vw, 2.75rem);
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.08;
+}
+
+.workbench-login-view__status {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-base);
+  line-height: 1.45;
+}
+
+.workbench-login-view__fields {
+  display: grid;
+  gap: 14px;
+}
+
+.workbench-login-view__field {
+  display: grid;
+  gap: 7px;
+}
+
+.workbench-login-view__label {
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.workbench-login-view__field .ui-input {
+  --ui-input-height: var(--workbench-login-input-height);
+  --ui-input-padding: 0 var(--control-padding-x-md);
+  height: var(--workbench-login-input-height);
+  min-width: 0;
+  padding: 0 var(--control-padding-x-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  background: var(--color-bg);
+  font-size: var(--font-size-base);
+}
+
+.workbench-login-view__field .ui-input:focus {
+  border-color: var(--color-accent);
+}
+
+.workbench-login-view__field .ui-input:disabled {
+  opacity: 0.62;
+  cursor: default;
+}
+
+.workbench-login-view__error {
+  padding: 9px 11px;
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, transparent);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: 1.45;
+}
+
+.workbench-login-view__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.workbench-login-view__actions .ui-button {
+  --ui-button-height: var(--workbench-login-button-height);
+  --ui-button-min-height: var(--workbench-login-button-height);
+  --ui-button-padding: 0 var(--control-padding-x-lg);
+  min-width: 104px;
+  height: var(--workbench-login-button-height);
+}
+
+.workbench-login-view__actions .ui-button:disabled {
+  opacity: 0.58;
+  cursor: default;
+}
+
+.workbench-login-view__secondary-actions {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+  text-align: center;
+}
+
+.workbench-auth-story-brand {
+  display: grid;
+  gap: 18px;
+}
+
+.workbench-auth-story-brand__icon {
+  width: 52px;
+  height: 52px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: var(--color-accent);
+  border-radius: var(--radius-sm);
+}
+
+.workbench-auth-story-brand__icon .codicon {
+  font-size: 24px;
+}
+
+.workbench-auth-story-brand__copy {
+  display: grid;
+  gap: 6px;
+}
+
+.workbench-auth-story-brand__copy strong {
+  color: var(--color-text);
+  font-size: clamp(1.85rem, 4vw, 3.25rem);
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.05;
+}
+
+.workbench-auth-story-brand__copy span {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-base);
+}
+
+.workbench-auth-story-link {
+  padding: 0;
+  border: 0;
+  color: var(--color-accent);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.workbench-auth-story-link:hover {
+  color: var(--color-accent-hover);
+  text-decoration: underline;
+}
+
+@media (max-width: 760px) {
+  .workbench-settings-modal {
+    --ui-modal-max-width: 100vw;
+    --ui-modal-max-height: 100vh;
+  }
+
+  .ui-workbench-navigation-panel,
+  .ui-workbench-navigation-panel[data-has-nav='true'] {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .ui-workbench-navigation-panel__nav {
+    height: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .ui-workbench-navigation-panel__nav-scroll.ui-scroll-area--vertical {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .workbench-settings-sidebar {
+    flex-direction: row;
+    padding: 8px 12px;
+    border-bottom: 0;
+  }
+
+  .workbench-settings-nav-item {
+    width: auto;
+    flex: 0 0 auto;
+  }
+
+  .workbench-settings-content > .ui-workbench-navigation-panel__content-scroll > * {
+    padding-inline: var(--workbench-panel-padding-inline-compact);
+  }
+
+  .ui-workbench-sectioned-panel__nav {
+    display: flex;
+    padding: 8px 0;
+  }
+
+  .ui-workbench-section-tab-panel__scroll,
+  .ui-workbench-sectioned-panel__scroll {
+    padding-left: var(--workbench-panel-padding-inline-compact);
+  }
+
+  .ui-workbench-structured-data-form__section {
+    max-width: none;
+    padding: var(--workbench-panel-padding-block-start)
+      var(--workbench-panel-padding-inline-compact) var(--workbench-panel-padding-block-end);
+  }
+
+  .ui-workbench-structured-data-form__actions {
+    padding-inline: 12px;
+  }
+}
+
+@media (max-width: 900px) {
+  .workbench-login-view {
+    grid-template-columns: minmax(0, 1fr);
+    overflow: auto;
+  }
+
+  .workbench-login-view__brand-pane {
+    min-height: auto;
+    padding: 36px 32px 22px;
+    border-right: 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .workbench-login-view__mark {
+    width: min(62vw, 320px);
+  }
+
+  .workbench-login-view__footer-brand {
+    position: static;
+    justify-self: start;
+    align-self: end;
+    max-width: 100%;
+    font-size: 1rem;
+  }
+
+  .workbench-login-view__brand-pane {
+    display: grid;
+    place-items: center;
+    gap: 20px;
+  }
+
+  .workbench-login-view__form {
+    width: 100%;
+    align-content: start;
+    padding: 32px;
+  }
+
+  .workbench-login-view__title {
+    font-size: 2.15rem;
+  }
+}
+
+@media (max-width: 520px) {
+  .workbench-login-view__field {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .workbench-login-view__actions {
+    justify-content: stretch;
+  }
+
+  .workbench-login-view__actions .ui-button {
+    width: 100%;
+  }
+
+  .workbench-login-view__actions {
+    align-items: stretch;
+  }
+}

package/src/workbench/auth/auth.css

@@ -0,0 +1,3 @@
+/* workbench/auth feature styles — Plan A import hub */
+@import './profile-modals.css';
+@import './auth-flows.css';

package/src/workbench/auth/profile-modals.css

@@ -0,0 +1,115 @@
+.workbench-help-modal {
+  --ui-modal-width: 640px;
+}
+
+.workbench-profile-modal {
+  --ui-modal-width: 520px;
+  --ui-modal-height: 520px;
+}
+
+.workbench-profile-modal__footer-spacer {
+  flex: 1;
+}
+
+.workbench-profile-card {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.workbench-profile-card__avatar {
+  width: 56px;
+  height: 56px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--color-accent, #3794ff) 45%, var(--color-border));
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--color-accent, #3794ff) 18%, var(--color-surface));
+  color: var(--color-text);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.workbench-profile-card__identity {
+  min-width: 0;
+}
+
+.workbench-profile-card__identity h2 {
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text);
+  font-size: 18px;
+  font-weight: 650;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbench-profile-card__identity p {
+  margin: 5px 0 0;
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbench-profile-session {
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+}
+
+.workbench-profile-section {
+  display: grid;
+  gap: 12px;
+}
+
+.workbench-profile-section h3 {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.workbench-profile-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px;
+  margin: 0;
+}
+
+.workbench-profile-detail-grid div {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  background: var(--color-surface);
+}
+
+.workbench-profile-detail-grid dt {
+  color: var(--color-text-subtle);
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.workbench-profile-detail-grid dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+}

package/src/workbench/bootstrap/WorkbenchBootstrapGate.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import { cx } from '../../utils/cx';
+import { WorkbenchBootstrapView } from './WorkbenchBootstrapView';
+import type { WorkbenchBootstrapController } from './useWorkbenchBootstrap';
+
+export interface WorkbenchBootstrapGateProps {
+  bootstrap: WorkbenchBootstrapController;
+  children: ReactNode;
+  className?: string | undefined;
+  footer?: ReactNode;
+  heading?: string | undefined;
+  renderBootstrap?: ((bootstrap: WorkbenchBootstrapController) => ReactNode) | undefined;
+  subtitle?: string | undefined;
+}
+
+export function WorkbenchBootstrapGate({
+  bootstrap,
+  children,
+  className,
+  footer,
+  heading,
+  renderBootstrap,
+  subtitle,
+}: WorkbenchBootstrapGateProps) {
+  if (bootstrap.isReady) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className={cx('workbench-bootstrap-gate', className)}>
+      {renderBootstrap?.(bootstrap) ?? (
+        <WorkbenchBootstrapView
+          currentTaskId={bootstrap.currentTaskId}
+          error={bootstrap.error}
+          footer={footer}
+          heading={heading}
+          status={bootstrap.status}
+          subtitle={subtitle}
+          tasks={bootstrap.tasks}
+          onRetry={bootstrap.status === 'failed' ? bootstrap.retry : undefined}
+        />
+      )}
+    </div>
+  );
+}

package/src/workbench/bootstrap/WorkbenchBootstrapView.tsx

@@ -0,0 +1,100 @@
+import type { ReactNode } from 'react';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
+import type {
+  WorkbenchBootstrapRunStatus,
+  WorkbenchBootstrapTaskViewModel,
+} from './useWorkbenchBootstrap';
+
+export interface WorkbenchBootstrapViewProps {
+  className?: string | undefined;
+  currentTaskId?: string | undefined;
+  error?: string | undefined;
+  footer?: ReactNode;
+  heading?: string | undefined;
+  onRetry?: (() => void) | undefined;
+  status?: WorkbenchBootstrapRunStatus | undefined;
+  subtitle?: string | undefined;
+  tasks: readonly WorkbenchBootstrapTaskViewModel[];
+}
+
+function taskStatusIcon(status: WorkbenchBootstrapTaskViewModel['status']): string {
+  switch (status) {
+    case 'completed':
+      return 'codicon codicon-check';
+    case 'failed':
+      return 'codicon codicon-error';
+    case 'running':
+      return 'codicon codicon-loading codicon-modifier-spin';
+    default:
+      return 'codicon codicon-circle-outline';
+  }
+}
+
+export function WorkbenchBootstrapView({
+  className,
+  currentTaskId,
+  error,
+  footer,
+  heading = 'Preparing workbench',
+  onRetry,
+  status = 'running',
+  subtitle = 'Setting up extensions, workspace, and editor services.',
+  tasks,
+}: WorkbenchBootstrapViewProps) {
+  const activeTask =
+    tasks.find((task) => task.id === currentTaskId) ??
+    tasks.find((task) => task.status === 'running');
+
+  return (
+    <div
+      aria-busy={status === 'running'}
+      aria-live="polite"
+      className={cx('workbench-bootstrap-view', className)}
+      role="status"
+    >
+      <div className="workbench-bootstrap-view__header">
+        <h1 className="workbench-bootstrap-view__heading">{heading}</h1>
+        {subtitle ? <p className="workbench-bootstrap-view__subtitle">{subtitle}</p> : null}
+      </div>
+
+      {activeTask && status === 'running' ? (
+        <p className="workbench-bootstrap-view__active">{activeTask.label}…</p>
+      ) : null}
+
+      <ol className="workbench-bootstrap-view__tasks">
+        {tasks.map((task) => (
+          <li
+            key={task.id}
+            className={cx(
+              'workbench-bootstrap-view__task',
+              task.status === 'running' && 'workbench-bootstrap-view__task--running',
+              task.status === 'completed' && 'workbench-bootstrap-view__task--completed',
+              task.status === 'failed' && 'workbench-bootstrap-view__task--failed',
+            )}
+            data-status={task.status}
+          >
+            <i aria-hidden className={taskStatusIcon(task.status)} />
+            <span className="workbench-bootstrap-view__task-label">{task.label}</span>
+            {task.detail ? (
+              <span className="workbench-bootstrap-view__task-detail">{task.detail}</span>
+            ) : null}
+          </li>
+        ))}
+      </ol>
+
+      {status === 'failed' ? (
+        <div className="workbench-bootstrap-view__error" role="alert">
+          <p>{error ?? 'Startup failed.'}</p>
+          {onRetry ? (
+            <Button type="button" onClick={onRetry}>
+              Retry
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+
+      {footer ? <div className="workbench-bootstrap-view__footer">{footer}</div> : null}
+    </div>
+  );
+}

package/src/workbench/bootstrap/index.ts

@@ -0,0 +1,12 @@
+export { WorkbenchBootstrapGate } from './WorkbenchBootstrapGate';
+export type { WorkbenchBootstrapGateProps } from './WorkbenchBootstrapGate';
+export { WorkbenchBootstrapView } from './WorkbenchBootstrapView';
+export type { WorkbenchBootstrapViewProps } from './WorkbenchBootstrapView';
+export { useWorkbenchBootstrap } from './useWorkbenchBootstrap';
+export type {
+  WorkbenchBootstrapController,
+  WorkbenchBootstrapRunStatus,
+  WorkbenchBootstrapTaskDefinition,
+  WorkbenchBootstrapTaskStatus,
+  WorkbenchBootstrapTaskViewModel,
+} from './useWorkbenchBootstrap';