From 7527f56aa9b79c586ab3556d61bc6d6c20023046 Mon Sep 17 00:00:00 2001 From: Emir Karabeg Date: Thu, 29 Oct 2026 17:55:02 -0700 Subject: [PATCH 1/6] feat(auth): implement isolated Paper design system --- apps/desktop/package.json | 3 +- apps/desktop/scripts/build.ts | 13 +- apps/desktop/src/main/local-pages.ts | 2 + apps/desktop/src/renderer/auth.css | 7 + apps/desktop/src/renderer/offline/index.tsx | 90 +- apps/desktop/src/renderer/server/index.tsx | 8 +- .../src/renderer/server/server-modal.tsx | 140 +- .../app/(auth)/components/auth-divider.tsx | 21 - apps/sim/app/(auth)/components/auth-field.tsx | 41 - .../(auth)/components/auth-form-message.tsx | 28 - .../sim/app/(auth)/components/auth-header.tsx | 23 - apps/sim/app/(auth)/components/auth-input.tsx | 20 - .../(auth)/components/auth-legal-footer.tsx | 26 +- .../components/auth-loading-skeleton.tsx | 47 +- .../app/(auth)/components/auth-nav-prompt.tsx | 27 - .../app/(auth)/components/auth-navigation.tsx | 30 + apps/sim/app/(auth)/components/auth-shell.tsx | 79 +- .../(auth)/components/auth-submit-button.tsx | 47 +- .../app/(auth)/components/auth-text-link.tsx | 57 - apps/sim/app/(auth)/components/constants.ts | 19 +- apps/sim/app/(auth)/components/index.ts | 18 +- .../app/(auth)/components/password-input.tsx | 37 - .../components/social-login-buttons.tsx | 56 +- .../(auth)/components/sso-login-button.tsx | 15 +- .../app/(auth)/components/support-footer.tsx | 38 +- apps/sim/app/(auth)/layout.tsx | 3 +- apps/sim/app/(auth)/login/loading.tsx | 10 +- apps/sim/app/(auth)/login/login-form.tsx | 172 +- apps/sim/app/(auth)/login/page.tsx | 2 - .../oauth/consent/consent-view.test.tsx | 47 +- .../app/(auth)/oauth/consent/consent-view.tsx | 78 +- apps/sim/app/(auth)/oauth/consent/loading.tsx | 8 +- apps/sim/app/(auth)/oauth/consent/page.tsx | 2 +- .../sim/app/(auth)/reset-password/loading.tsx | 10 +- .../reset-password/reset-password-content.tsx | 6 +- .../reset-password/reset-password-form.tsx | 38 +- apps/sim/app/(auth)/signup/loading.tsx | 12 +- .../(auth)/signup/registration-disabled.tsx | 2 +- apps/sim/app/(auth)/signup/signup-form.tsx | 52 +- apps/sim/app/(auth)/sso/loading.tsx | 10 +- apps/sim/app/(auth)/verify/loading.tsx | 8 +- .../sim/app/(auth)/verify/use-verification.ts | 17 +- apps/sim/app/(auth)/verify/verify-content.tsx | 115 +- .../(interfaces)/chat/[identifier]/chat.tsx | 13 +- .../chat/components/auth/email/email-auth.tsx | 212 +- .../auth/password/password-auth.tsx | 125 +- .../interfaces-shell/interfaces-shell.tsx | 15 +- .../interfaces-support-footer.tsx | 18 + apps/sim/app/(interfaces)/layout.tsx | 15 +- apps/sim/app/(interfaces)/resume/layout.tsx | 13 + apps/sim/app/cli/auth/cli-auth-view.tsx | 51 +- apps/sim/app/cli/auth/loading.tsx | 14 +- .../app/credential-groups/complete/page.tsx | 4 +- .../enroll/[token]/oauth-reconnect-link.tsx | 10 +- .../enroll/[token]/oauth-toast.tsx | 10 +- .../enroll/[token]/page.test.tsx | 4 +- .../credential-groups/enroll/[token]/page.tsx | 54 +- .../credential-groups/slack-complete/page.tsx | 2 +- .../app/desktop/auth/authorize-handoff.tsx | 17 +- .../desktop-handoff-shell.tsx | 36 +- .../app/desktop/connect/connect-launcher.tsx | 2 +- .../connect/source-connect-launcher.tsx | 2 +- .../app/desktop/connect/switch-account.tsx | 2 +- .../app/f/[token]/public-file-auth-shell.tsx | 29 +- apps/sim/app/f/[token]/public-file-auth.tsx | 67 +- .../app/f/[token]/public-file-email-auth.tsx | 153 +- .../app/f/[token]/public-file-sso-auth.tsx | 12 +- apps/sim/app/invite/[id]/invite.tsx | 14 +- apps/sim/app/invite/[id]/loading.tsx | 14 +- .../components/invitation-disclosure.tsx | 53 +- .../invitation-workspace-access.tsx | 49 +- apps/sim/app/invite/components/layout.tsx | 2 +- .../sim/app/invite/components/status-card.tsx | 32 +- apps/sim/app/knowledge/github/setup/setup.tsx | 6 +- .../app/oauth/credential-connected/page.tsx | 6 +- .../app/slack-search/connect/[token]/page.tsx | 12 +- .../[token]/slack-search-onboarding.tsx | 22 +- .../slack-search/install/[teamId]/page.tsx | 10 +- apps/sim/auth-migration/baseline.json | 254 +++ apps/sim/auth-migration/coverage.json | 352 +++ apps/sim/auth-migration/route-parity.json | 12 + apps/sim/auth-migration/surfaces.json | 84 + apps/sim/auth-migration/validation.json | 357 +++ apps/sim/components/branded-layout.tsx | 25 +- apps/sim/ee/sso/components/sso-auth.tsx | 108 +- apps/sim/ee/sso/components/sso-form.test.tsx | 20 +- apps/sim/ee/sso/components/sso-form.tsx | 158 +- apps/sim/lib/navigation/auth-surfaces.ts | 26 + apps/sim/next.config.ts | 1 + apps/sim/package.json | 3 +- apps/sim/proxy.test.ts | 19 +- apps/sim/proxy.ts | 2 + biome.json | 2 +- bun.lock | 25 +- packages/auth-ui/design/contract.json | 100 + packages/auth-ui/design/paper-tokens.json | 2007 +++++++++++++++++ packages/auth-ui/package.json | 36 + packages/auth-ui/src/assets/geist-LICENSE.txt | 92 + .../auth-ui/src/assets/geist-mono-LICENSE.txt | 92 + .../src/assets/geist-mono-variable.woff2 | Bin 0 -> 71596 bytes .../auth-ui/src/assets/geist-variable.woff2 | Bin 0 -> 69652 bytes packages/auth-ui/src/code-entry.tsx | 91 + packages/auth-ui/src/compositions.tsx | 264 +++ packages/auth-ui/src/controls.tsx | 479 ++++ packages/auth-ui/src/icons.tsx | 76 + packages/auth-ui/src/index.ts | 40 + packages/auth-ui/src/primitives.tsx | 160 ++ packages/auth-ui/src/styles.d.ts | 6 + packages/auth-ui/src/styles.module.css | 800 +++++++ packages/auth-ui/src/utilities.css | 25 + packages/auth-ui/src/wordmark.tsx | 27 + packages/auth-ui/tsconfig.json | 6 + packages/emcn/package.json | 1 - packages/emcn/src/components/index.ts | 3 +- .../src/components/input-otp/input-otp.tsx | 95 - scripts/test-patterns-baseline.json | 1 - 116 files changed, 6647 insertions(+), 1786 deletions(-) create mode 100644 apps/desktop/src/renderer/auth.css delete mode 100644 apps/sim/app/(auth)/components/auth-divider.tsx delete mode 100644 apps/sim/app/(auth)/components/auth-field.tsx delete mode 100644 apps/sim/app/(auth)/components/auth-form-message.tsx delete mode 100644 apps/sim/app/(auth)/components/auth-header.tsx delete mode 100644 apps/sim/app/(auth)/components/auth-input.tsx delete mode 100644 apps/sim/app/(auth)/components/auth-nav-prompt.tsx create mode 100644 apps/sim/app/(auth)/components/auth-navigation.tsx delete mode 100644 apps/sim/app/(auth)/components/auth-text-link.tsx delete mode 100644 apps/sim/app/(auth)/components/password-input.tsx create mode 100644 apps/sim/app/(interfaces)/components/interfaces-shell/interfaces-support-footer.tsx create mode 100644 apps/sim/app/(interfaces)/resume/layout.tsx create mode 100644 apps/sim/auth-migration/baseline.json create mode 100644 apps/sim/auth-migration/coverage.json create mode 100644 apps/sim/auth-migration/route-parity.json create mode 100644 apps/sim/auth-migration/surfaces.json create mode 100644 apps/sim/auth-migration/validation.json create mode 100644 apps/sim/lib/navigation/auth-surfaces.ts create mode 100644 packages/auth-ui/design/contract.json create mode 100644 packages/auth-ui/design/paper-tokens.json create mode 100644 packages/auth-ui/package.json create mode 100644 packages/auth-ui/src/assets/geist-LICENSE.txt create mode 100644 packages/auth-ui/src/assets/geist-mono-LICENSE.txt create mode 100644 packages/auth-ui/src/assets/geist-mono-variable.woff2 create mode 100644 packages/auth-ui/src/assets/geist-variable.woff2 create mode 100644 packages/auth-ui/src/code-entry.tsx create mode 100644 packages/auth-ui/src/compositions.tsx create mode 100644 packages/auth-ui/src/controls.tsx create mode 100644 packages/auth-ui/src/icons.tsx create mode 100644 packages/auth-ui/src/index.ts create mode 100644 packages/auth-ui/src/primitives.tsx create mode 100644 packages/auth-ui/src/styles.d.ts create mode 100644 packages/auth-ui/src/styles.module.css create mode 100644 packages/auth-ui/src/utilities.css create mode 100644 packages/auth-ui/src/wordmark.tsx create mode 100644 packages/auth-ui/tsconfig.json delete mode 100644 packages/emcn/src/components/input-otp/input-otp.tsx diff --git a/apps/desktop/package.json b/apps/desktop/package.json index 303f47a78f4..92826c3aec4 100644 --- a/apps/desktop/package.json +++ b/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", diff --git a/apps/desktop/scripts/build.ts b/apps/desktop/scripts/build.ts index c87f64c0e00..73dff48279f 100644 --- a/apps/desktop/scripts/build.ts +++ b/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 { 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) diff --git a/apps/desktop/src/main/local-pages.ts b/apps/desktop/src/main/local-pages.ts index 42e80f6b2ad..1d871eacef6 100644 --- a/apps/desktop/src/main/local-pages.ts +++ b/apps/desktop/src/main/local-pages.ts @@ -37,6 +37,8 @@ const LOCAL_PAGES: ReadonlySet = new Set(['offline.html', 'se const SERVABLE_FILES: ReadonlySet = new Set([ ...LOCAL_PAGES, 'SeasonSansUprightsVF.woff2', + 'geist-variable.woff2', + 'geist-mono-variable.woff2', 'server.js', 'server.css', 'offline.js', diff --git a/apps/desktop/src/renderer/auth.css b/apps/desktop/src/renderer/auth.css new file mode 100644 index 00000000000..9b198c08086 --- /dev/null +++ b/apps/desktop/src/renderer/auth.css @@ -0,0 +1,7 @@ +html, +body { + margin: 0; + padding: 0; + background: white; + color-scheme: light; +} diff --git a/apps/desktop/src/renderer/offline/index.tsx b/apps/desktop/src/renderer/offline/index.tsx index 2797d496129..45141ccba49 100644 --- a/apps/desktop/src/renderer/offline/index.tsx +++ b/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 ( - - } - logo={ - - - - } - > - + } + titlebar={