feat(auth): implement isolated Paper design system

Author: emir-karabeg

apps/desktop/package.json

@@ -43,7 +43,8 @@
     "electron-updater": "6.8.9",
     "micromatch": "4.0.8",
     "safe-regex2": "5.1.2",
-    "pdf-lib": "1.17.1"
+    "pdf-lib": "1.17.1",
+    "@sim/auth-ui": "workspace:*"
   },
   "devDependencies": {
     "@electron/fuses": "1.8.0",

apps/desktop/scripts/build.ts

@@ -108,14 +108,17 @@ const renderer: BuildOptions = {
     {
       name: 'desktop-tailwind',
       setup(builder) {
-        builder.onLoad({ filter: /shell\.css$/ }, async ({ path }) => {
+        builder.onLoad({ filter: /(?:shell|utilities|styles\.module)\.css$/ }, async ({ path }) => {
           const config = await loadPostcssConfig({}, resolve('../sim'))
           const result = await postcss(config.plugins).process(readFileSync(path, 'utf8'), {
             from: path,
           })
           return {
-            contents: result.css,
-            loader: 'css',
+            contents: result.css.replace(
+              /url\(["']?\.\/assets\/(geist[^)"']+)["']?\)/g,
+              'url(./$1)'
+            ),
+            loader: path.endsWith('.module.css') ? 'local-css' : 'css',
             resolveDir: dirname(path),
             watchFiles: result.messages.flatMap((message) =>
               message.type === 'dependency' ? [message.file as string] : []
@@ -130,6 +133,10 @@ const renderer: BuildOptions = {
 async function run(): Promise<void> {
   execFileSync(process.execPath, ['run', 'scripts/build-native.ts'], { stdio: 'inherit' })
   compileComputerUse()
+  mkdirSync('dist/renderer', { recursive: true })
+  for (const font of ['geist-variable.woff2', 'geist-mono-variable.woff2']) {
+    cpSync(resolve('../../packages/auth-ui/src/assets', font), join('dist/renderer', font))
+  }
   if (watch) {
     const { context } = await import('esbuild')
     const rendererCtx = await context(renderer)

apps/desktop/src/main/local-pages.ts

@@ -37,6 +37,8 @@ const LOCAL_PAGES: ReadonlySet<string> = new Set<LocalPage>(['offline.html', 'se
 const SERVABLE_FILES: ReadonlySet<string> = new Set([
   ...LOCAL_PAGES,
   'SeasonSansUprightsVF.woff2',
+  'geist-variable.woff2',
+  'geist-mono-variable.woff2',
   'server.js',
   'server.css',
   'offline.js',

apps/desktop/src/renderer/auth.css

@@ -0,0 +1,7 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: white;
+  color-scheme: light;
+}

apps/desktop/src/renderer/offline/index.tsx

@@ -1,9 +1,15 @@
 import { useState } from 'react'
+import {
+  AuthRoot,
+  AuthShellView,
+  AuthTextLink,
+  AuthWordmark,
+  AuthButton as Chip,
+  AuthStatusContent as StatusPageContent,
+} from '@sim/auth-ui'
 import { observeDesktopTitleBar, type SimDesktopApi } from '@sim/desktop-bridge'
-import { Chip, LogoPage, SimWordmark, StatusPageContent } from '@sim/emcn'
 import { createRoot } from 'react-dom/client'
-import { initializeShellPage } from '@/renderer/shell'
-import '@/renderer/shell.css'
+import '@/renderer/auth.css'
 
 const ERROR_COPY = {
   offline: {
@@ -57,51 +63,55 @@ function OfflinePage({ isSimCloud }: OfflinePageProps) {
   }
 
   return (
-    <LogoPage
-      center
-      className='desktop-title-bar-page'
-      titleBar={
-        <div aria-hidden className='desktop-login-window-drag-region desktop-window-drag-region' />
-      }
-      logo={
-        <span role='img' aria-label='Sim' className='flex h-[30px] items-center'>
-          <SimWordmark />
-        </span>
-      }
-    >
-      <StatusPageContent
-        titleId='title'
-        title={copy.title}
-        description={copy.message}
-        detail={
-          <p
-            id='detail'
-            role='status'
-            className='max-w-full break-words text-[var(--text-muted)] text-caption'
+    <AuthRoot>
+      <AuthShellView
+        homeHref='https://sim.ai'
+        logo={<AuthWordmark />}
+        titlebar={<div data-auth-titlebar='' aria-hidden='true' />}
+        footer={
+          <AuthTextLink
+            onClick={() => {
+              void bridge?.openExternal('mailto:support@sim.ai')
+            }}
           >
-            {actionError || detail}
-          </p>
+            Contact support
+          </AuthTextLink>
         }
       >
-        <Chip id='retry' variant='primary' onClick={() => bridge?.offlineRetry()}>
-          Retry
-        </Chip>
-        {isSimCloud ? (
-          <Chip id='status' onClick={checkStatus}>
-            Check status
+        <StatusPageContent
+          titleId='title'
+          title={copy.title}
+          description={copy.message}
+          detail={
+            <p
+              id='detail'
+              role='status'
+              className='au:max-w-full au:break-words au:text-[var(--auth-secondary)] au:text-caption'
+            >
+              {actionError || detail}
+            </p>
+          }
+        >
+          <Chip fullWidth id='retry' variant='primary' onClick={() => bridge?.offlineRetry()}>
+            Retry
           </Chip>
-        ) : null}
-        <Chip id='server' onClick={() => bridge?.server?.open()}>
-          Change server
-        </Chip>
-      </StatusPageContent>
-    </LogoPage>
+          {isSimCloud ? (
+            <Chip fullWidth id='status' onClick={checkStatus}>
+              Check status
+            </Chip>
+          ) : null}
+          <Chip fullWidth variant='ghost' id='server' onClick={() => bridge?.server?.open()}>
+            Change server
+          </Chip>
+        </StatusPageContent>
+      </AuthShellView>
+    </AuthRoot>
   )
 }
 
 const container = document.getElementById('root')
 if (!container) throw new Error('Offline page root is missing')
-void initializeShellPage().then(() => {
+{
   observeDesktopTitleBar(document.documentElement, navigator.userAgent, bridge)
   const root = createRoot(container)
   root.render(<OfflinePage isSimCloud={false} />)
@@ -111,4 +121,4 @@ void initializeShellPage().then(() => {
       root.render(<OfflinePage isSimCloud={isSimCloud} />)
     })
     .catch(() => {})
-})
+}

apps/desktop/src/renderer/server/index.tsx

@@ -1,7 +1,9 @@
 import { createRoot } from 'react-dom/client'
 import { ServerModal } from '@/renderer/server/server-modal'
-import { initializeShellPage, shellWindow } from '@/renderer/shell'
-import '@/renderer/shell.css'
+import type { ShellWindowApi } from '@/shared/shell'
+
+const shellWindow = (window as Window & { simShell?: ShellWindowApi }).simShell
+import '@/renderer/auth.css'
 
 const container = document.getElementById('root')
 if (!container || !shellWindow) throw new Error('Server modal host is unavailable')
@@ -17,4 +19,4 @@ async function renderServerModal() {
   }
 }
 
-void initializeShellPage().then(renderServerModal)
+void renderServerModal()

apps/desktop/src/renderer/server/server-modal.tsx

@@ -1,14 +1,6 @@
 import { useRef, useState } from 'react'
+import { AuthButton, AuthField, AuthHeader, AuthInput, AuthRoot, AuthStack } from '@sim/auth-ui'
 import type { DesktopServerConfiguration } from '@sim/desktop-bridge'
-import {
-  ChipModalBody,
-  ChipModalDescription,
-  ChipModalField,
-  ChipModalFooter,
-  ChipModalHeader,
-  ChipModalSurface,
-} from '@sim/emcn'
-import { mountShellModal } from '@/renderer/shell'
 import type { ShellWindowApi } from '@/shared/shell'
 
 interface ServerModalProps {
@@ -22,7 +14,24 @@ function closeWindow() {
 }
 
 function mountServerModal(element: HTMLDivElement | null) {
-  return mountShellModal(element, closeWindow)
+  if (!element) return
+  element.querySelector<HTMLInputElement>('input')?.focus()
+  const host = (window as Window & { simShell?: ShellWindowApi }).simShell
+  const resize = () => host?.resizeContent(Math.ceil(element.scrollHeight))
+  const observer = new ResizeObserver(resize)
+  observer.observe(element)
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      closeWindow()
+    }
+  }
+  document.addEventListener('keydown', onKey)
+  resize()
+  return () => {
+    observer.disconnect()
+    document.removeEventListener('keydown', onKey)
+  }
 }
 
 export function ServerModal({ server, configuration, initialError }: ServerModalProps) {
@@ -58,50 +67,73 @@ export function ServerModal({ server, configuration, initialError }: ServerModal
   }
 
   return (
-    <ChipModalSurface
-      ref={mountServerModal}
-      role='dialog'
-      aria-modal='true'
-      aria-labelledby='server-title'
-      aria-describedby='server-description'
-      className='max-h-screen'
-    >
-      <ChipModalHeader
-        onClose={closeWindow}
-        className='[-webkit-app-region:drag] [&_button]:[-webkit-app-region:no-drag]'
+    <AuthRoot>
+      <div
+        ref={mountServerModal}
+        role='dialog'
+        aria-modal='true'
+        aria-label='Sim server'
+        className='au:p-6'
       >
-        <span id='server-title'>Sim server</span>
-      </ChipModalHeader>
-      <ChipModalBody>
-        <ChipModalDescription id='server-description'>
-          Point this app at your own Sim deployment. Self-hosted servers must use HTTPS; localhost
-          may use HTTP.
-        </ChipModalDescription>
-        <ChipModalField
-          type='input'
-          inputType='url'
-          title='Server URL'
-          value={origin}
-          onChange={(value) => {
-            setOrigin(value)
-            setError(undefined)
-            setMessage('')
-          }}
-          autoComplete='off'
-          placeholder='https://sim.example.com'
-          disabled={pending}
-          error={error}
-          hint={<span role='status'>{pending ? 'Connecting…' : message}</span>}
-        />
-      </ChipModalBody>
-      <ChipModalFooter
-        onCancel={closeWindow}
-        primaryAction={{
-          label: pending ? 'Connecting…' : 'Connect',
-          onClick: connect,
-          disabled: pending || !origin.trim(),
-        }}
-      />
-    </ChipModalSurface>
+        <AuthStack>
+          <div className='au:[-webkit-app-region:drag]'>
+            <AuthHeader
+              title='Sim server'
+              description='Connect to your organization’s Sim deployment.'
+            />
+          </div>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              void connect()
+            }}
+            className='au:space-y-5'
+          >
+            <AuthField
+              htmlFor='server-origin'
+              label='Server URL'
+              errors={error ? [error] : undefined}
+              hint={
+                <>
+                  <span>Use HTTPS for self-hosted servers. Localhost may use HTTP.</span>
+                  <span role='status'>{message && ` ${message}`}</span>
+                </>
+              }
+            >
+              <AuthInput
+                id='server-origin'
+                type='url'
+                value={origin}
+                onChange={(event) => {
+                  setOrigin(event.target.value)
+                  setError(undefined)
+                  setMessage('')
+                }}
+                autoComplete='off'
+                placeholder='https://sim.example.com'
+                disabled={pending}
+                error={Boolean(error)}
+                aria-describedby='server-origin-hint'
+              />
+            </AuthField>
+            <div className='au:grid au:grid-cols-2 au:gap-2'>
+              <AuthButton onClick={closeWindow} fullWidth>
+                Cancel
+              </AuthButton>
+              <AuthButton
+                type='submit'
+                variant='primary'
+                disabled={!origin.trim()}
+                loading={pending}
+                loadingLabel='Connecting…'
+                fullWidth
+              >
+                Connect
+              </AuthButton>
+            </div>
+          </form>
+        </AuthStack>
+      </div>
+    </AuthRoot>
   )
 }