Skip to content

refactor(emcn): split the Platform design system into packages - #9764

Open
emir-karabeg wants to merge 6 commits into
improvement/integration-centerfrom
improvement/platform-preview
Open

emir-karabeg wants to merge 6 commits into
improvement/integration-centerfrom
improvement/platform-preview

Conversation

@emir-karabeg

Copy link
Copy Markdown
Collaborator

Summary

Moves the Platform design system out of apps/sim/platform/design-system into workspace packages, on top of the integration center (#9725) and the latest platform-core-chat:

  • packages/emcn holds shared controls, tokens, fonts and recipes; packages/emcn-platform holds Platform compositions; packages/emcn-auth and packages/emcn-docs hold the Auth and Docs surfaces. The old package is now @sim/emcn-legacy, so @sim/emcn means the modern package everywhere.
  • The zone, embedded/, shared/ and app/o import public family subpaths (@sim/emcn/<family>, @sim/emcn-platform/<family>). Package code uses its private #emcn / #platform aliases.
  • check:platform-design, check:platform-css and check:boundaries combine package ownership with the embedded/shared/convergence rules. Their tests and the CI change fixture model the packages.

For the embedded/ owner

These change what the organization views render or import, following the zone:

  • Quiet Selects became ChoiceMenu. Quiet MultiSelect / SearchableSelect use variant='text'. Pickers have no quiet variant, and Select has no block.
  • ActivityRow uses textMetadata (paired with people). DataTable columns take share for a percentage share; width keeps compact / regular.
  • Hydrated moved to app/o/[organizationId]/components/hydrated.tsx: hydration belongs to the host, not a UI package.
  • An embedded surface paints its canvas only with canvas, and the host bridge names the EMCN Geist family.

Verification

Run locally on the merge commit 5f2fc54e6b, before the docs-only commit on top:

  • Lint: 30/30 tasks. Types: 32/32 workspaces, including every EMCN package. Audits: 68/68. Block registry passes against origin/staging.
  • Platform production build passes. The main app production build passes with CI's environment (1,708 pages).
  • Platform browser suite: 118/118, fixtures on and off. The Electron renderer check passes.
  • Full test suite: 40,122 app tests pass. Three network tests (gateway.server, egress-end-to-end.server, processing-recovery-queue-transport) fail under the local Node 23.10, as they do before this change, and pass under Node 24.19.
  • Not run: the live suite (checks/live), which needs a running app and database.

Details and the decisions above are in apps/sim/platform/docs/consolidation-checkpoint.md.

🤖 Generated with Claude Code

Move modern shared controls into EMCN and surface compositions into Auth, Docs, and Platform packages. Preserve existing application consumers through emcn-legacy and migrate imports, generators, audits, styles, fonts, and CI together.

Consolidate integration details, credentials, modal fields, responsive people tables, destructive actions, and disabled explanations. Record the combined local handoff and verification evidence.

Validation: repository lint, types, 67 audits, complete 20-task test gate, Platform build, block registry, browser regressions, and actual Electron checks passed. Production-runtime and fixture-off verification of the shipping commit remains a separate pre-publish step.
Bring b5a30e9 (platform/design-system into packages/emcn and
packages/emcn-platform, the old package as @sim/emcn-legacy) onto the
merge with platform-core-chat, so the embedded and shared trees build on
the packages too.

- Imports: embedded/, shared/, app/o and the zone import package family
  subpaths; @sim/emcn now names the modern package everywhere, and the
  legacy barrel, icons and code styles import from @sim/emcn-legacy.
  Waleed's new design-system files sit beside their families, with
  export entries for ConfirmDialog, QueryBoundary, RowList, SaveActions,
  PopupRow, HoverPopover, SectionSearch and AutofillDecoys.
- Ported upstream edits to the moved owners: Button aria-label,
  SearchableSelect selectedLeading, generic Select and SelectField values,
  optional modal confirmation, picker option leading marks, ActionMenu
  lazy actions with triggerText, provider-mark fallback, switch thumb,
  row dividers, spinner timing and the table viewport offset.
- PlatformSurface carries embedded, canvas, detached and the system font
  flags; the embedded Surface host lives in emcn-platform and paints its
  canvas only when asked. Hydrated moved to app/o, since React Query
  hydration belongs to the host.
- Embedded quiet Selects became ChoiceMenu and quiet pickers use the text
  variant, as in the zone; DataTable's percentage column width is now
  `share`, beside the zone's compact/regular `width`.
- Checks: check-platform-design, -css and boundaries combine package
  ownership with the embedded/shared/convergence rules; their tests and
  the CI change fixture model the packages. @sim/emcn runs its tests.
- Docs: root CLAUDE.md keeps the trimmed text with the package rule;
  the Platform contract, styling and views rules, CI notes and the
  implement-platform skill point at the packages.
Note both merge commits, the embedded decisions for review and the
verification each merge passed, including the Node 23 network tests that
fail the same way before the merge.
@emir-karabeg
emir-karabeg requested a review from a team as a code owner November 7, 2026 02:42
@vercel

vercel Bot commented Nov 7, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated
docs Skipped Skipped Nov 7, 2026 3:21am UTC

Request Review

@greptile-apps

greptile-apps Bot commented Nov 7, 2026 •

Copy link
Copy Markdown
Contributor

RetriggerView in GreptileConfidence Score: 4/5

[High impact] The package split reaches UI across the main app, Platform, Auth, Docs, and embedded views.

The PR appears safe to merge with two non-blocking UI regressions to fix.

Findings

  1. P2 Desktop headers stop dragging windows ▶

Summary

Splits the design system into shared EMCN and Auth, Docs and Platform packages, while moving existing controls to @sim/emcn-legacy.

  • Shared EMCN controls and data displays live in their own package.
  • Platform surfaces load their styles and shared assets from the new packages.
  • Embedded views use the new picker and table control options.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  Shared["@sim/emcn: controls, tokens, fonts"]
  Auth["@sim/emcn-auth"]
  Docs["@sim/emcn-docs"]
  Platform["@sim/emcn-platform"]
  Legacy["@sim/emcn-legacy"]
  Shared --> Auth
  Shared --> Docs
  Shared --> Platform
  Auth --> AuthHosts["Auth routes and desktop"]
  Docs --> DocsApp["Docs app"]
  Platform --> Zone["Platform zone"]
  Platform --> Embedded["Organization views"]
  Legacy --> Existing["Unreplaced application routes"]
Loading

Reviews (1) · Last reviewed commit: "docs(platform): record the platform-core..." · Reviewed by Greptile

Comment thread apps/sim/platform/app/layout.tsx Resolved
@greptile-apps

greptile-apps Bot commented Nov 7, 2026

Copy link
Copy Markdown
Contributor

Comments Outside Diff

These findings could not be posted inline.

  • P2 Embedded surfaces lose host styles packages/emcn-platform/src/components/surface/surface.tsx:25 ▶

    Surface never passes embedded to PlatformSurface, so organization views never receive data-embedded. The new stylesheet requires that marker to preserve keyboard focus outlines and keep surfaces without canvas transparent. Embedded buttons and links therefore lose their focus outline, and previously transparent islands paint a canvas background. Pass embedded from the host-facing Surface wrapper.

        <PlatformSurface theme='system' embedded canvas={canvas} detached={detached}>
    

@cubic-dev-ai cubic-dev-ai Bot left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 2709 files

Confidence score: 4/5

  • In api-reference.tsx, the NeutralBadge stretches across the column, so the “Deprecated operation” pill no longer fits its content. Keep the badge aligned to its content width.
Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/docs/components/docs/api-reference/api-reference.tsx">

<violation number="1" location="apps/docs/components/docs/api-reference/api-reference.tsx:102">
P3: Switching this container to `flex flex-col` makes the direct child `NeutralBadge` (an `inline-flex` span) stretch to full width, so the "Deprecated operation" pill now spans the whole column. The previous `space-y-8` block layout kept it shrink-wrapped; either revert this className or add `self-start` to the badge.</violation>
</file>

Note: This PR contains a large number of files. cubic selects up to 200 of the highest-priority eligible files for this review, so some files may not have been reviewed.

Turn on auto-fix | Re-trigger cubic

Comment thread .github/workflows/platform-design.yml Resolved
Comment thread .claude/rules/sim-imports.md Resolved
Comment thread apps/docs/app/global.css Resolved
Comment thread .github/CI.md Resolved
Comment thread apps/desktop/package.json Resolved
Comment thread .github/workflows/auth-ui.yml Resolved
@blacksmith-sh

This comment has been minimized.

…focus

- Pass embedded from the host Surface, so organization views keep their
  focus outline and stay transparent without canvas.
- Restore the Electron drag region for headers marked data-desktop-drag
  in the Platform bootstrap.
- Give Docs a keyboard focus outline outside text fields, and keep
  NeutralBadge at its intrinsic width in column layouts.
- Keep EMCN out of the packaged desktop dependencies: the renderer
  bundles it.
- Trigger the Platform and Auth workflows on the legacy package and the
  hairline plugin; name the legacy package in the CI notes.
- Wait for the reopened workspace picker before pressing Escape in the
  Auth browser check.
The live shell's SessionState mounted the discard dialog for live
Settings; consolidating the local preview removed it, so leaving a dirty
editor (such as a data retention pattern) no longer asked first. Fixture
Settings and the fixture integration center keep their own mounts.
Takes the base's live Settings leave guard fix, which this branch already
carries with the package imports.

This branch was previously deployed

1 inactive deployment
Preview — 3e5c2461 Deployed Nov 7, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant