Repository navigation
Rework the Application blocks in the workspace style - #45
Merged
Merged
Conversation
Move the generic surfaces (panel, table surface, stat tile, key-value list, empty state) from billing-kit and the Agents Builder pan-and-zoom canvas (viewport, node shell, wires, zoom controls) into workspace-kit so every application block can use them. billing-kit keeps re-exporting its surfaces. Publish the kit as the subpath-only npm export @constructive-io/ui/workspace-kit (it needs motion >= 13.4) so npm-built packages such as Schema Builder can use it.
Replace React Flow with the shared workspace canvas: double-framed person cards, bezier reporting lines, folding teams, a details panel with the reporting chain highlighted, drag-to-reassign with a drop preview and hint, and a searchable change-manager dialog so the chart works from the keyboard as an ARIA tree. Existing props are unchanged; showDetails, onSelectNode, and defaultCollapsedIds are new and optional.
Buckets move into the workspace sidebar (a drawer on phones), files list on a table surface with type-tinted glyphs and hover actions, a floating bar acts on the selection, and files dropped on the list upload through the new onDropFiles. The detail, bucket, and upload sheets, badges, breadcrumb, and empty states share the workspace look. Folders (kind), host size labels, onOpenFolder, and selectable let a host that lists prefixes reuse the same browser. All additions are optional.
The pack keeps its resource, policy, and action contract but renders the Storage Browser: buckets in the sidebar, folder crumbs, local search and sort, uploads by button or drop, and confirmed deletes. Shared pack loading and empty states use the workspace surfaces, and date-only timestamps no longer show a midnight time. Org Chart and Storage docs previews load lazily.
Storage gets a single sidebar entry with an overview and tabs for the Storage Browser (now at /blocks/storage/browser) and the feature pack, on a shared doc-section model that Billing now uses too.
Section tabs become a pill track with counts, member, invitation, and credential lists move onto table surfaces with tinted role and status labels, member access opens in a side panel, and settings and capability checklists sit in divided cards. Organizations gains an organization switcher in its header and draws its hierarchy on the Org Chart canvas, with drag or keyboard reassignment, position edits, and removals routed through the host actions. Form state that followed incoming data now adjusts during render, and three selects show labels instead of raw values. Pack contracts are unchanged.
Notifications group by the day they arrived, unread ones carry a tinted bell tile and stronger type while read ones recede, and the inbox filters by read state and category. Row actions appear on hover or focus and stay visible on touch. The pack contract is unchanged.
Collapsed sidebar rows kept their full-width, left-padded layout, so icons sat off-centre with extra space on the right. They are now centred squares that match the rail's icon buttons, section headings no longer leave an empty strip in the icon rail, and rows gain an optional link mode for hosts that route through their own link component.
Console Kit renders through a new ConsoleShell on the shared workspace shell: features in the sidebar as host-routed links with quiet state glyphs, the account menu at its foot, a slim location bar, and the standard drawer on phones instead of a bottom tab bar. Loading, unavailable, incompatible, load failure, and sign-in states share the workspace surfaces, and the docs preview renders the real shell. The configuration contract is unchanged.
The active pill used the card colour, which sits darker than the muted track in dark mode, so the selected tab and filter barely showed. Tint it with the foreground instead.
The sidebar, header, and all four tabs move onto the workspace scale: - sidebar rows without repeated icons, one guide line with a blue segment for the current table, and field counts that give way to the actions menu - pill tabs with icons and a quiet system-tables toggle - Relationships, Indexes, and Policies share one view frame, card, badge, and empty state; pointing at one end of a relationship lights the other - a calmer fields table, a one-line Types library, and raised rail tiles that read in light mode - constraint cards behave as checkboxes, and every field in the field editor follows one spacing rhythm Policy presentation and field key lookups are shared helpers, and field rows are memoized. Adapter contracts and behaviour are unchanged.
The preview now runs on a project-tracker schema with relationships of every kind, several index methods, and row-level security on every table, served by a deterministic adapter. A feature tour describes each tab and where to find it in the preview.
A select showed the stored value instead of its label once an option was picked, a patterned string (a slug, a code) lowered to a textarea, and the page title used a display size inside forms.
…n blocks Lead with a framed live preview (with a full-page route), follow the shared section order, add pagination, and pair the generated form with tabs for the schema, the document, and the submitted values.
Rows drop to 32px with 13px type and instant hover, section headings become quiet sentence-case collapsibles with counts (Application included, so every heading aligns), and each section hangs off one guide line with a blue segment marking the current page, as in the Schema Builder sidebar.
![tenki-reviewer[bot]](https://avatars.githubusercontent.com/in/2900641?s=60&v=4){kind=small}
The detail strip sat below the list, so moving the pointer toward it crossed other rows and swapped it out. It now opens beside the highlighted row like a submenu, with reasoning levels as a stacked menu, and rows crossed on the way to it wait before taking it over. It opens on the current model, flips left when there is no room, and stacks below the list on narrow screens.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Brings every block under the docs site's Application menu onto the visual language of Agents Builder and Billing, through a shared
workspace-kit. Public contracts, adapters, policies, and host-owned behaviour are unchanged; new props are optional.Shared foundation
workspace-kitnow owns the Billing surfaces (panels, tables, stat tiles, empty states) and the Agents Builder canvas (pan/zoom, node cards, wires); both keep their existing exports.@constructive-io/ui/workspace-kitnpm subpath (not from the root, since it needs motion ≥ 13.4).Blocks
showDetails,onSelectNode,defaultCollapsedIds./blocks/storage,/blocks/storage/browser; the old/blocks/storage-browseris removed).ConsoleShellon the workspace shell (host-routed links, account menu, phone drawer), with restyled loading, unavailable, error, and sign-in states. The docs preview renders the real shell.blocks-uiselects show option labels; patterned strings lower to single-line inputs.Docs site
Test plan
pnpm check(package parity, all test suites)pnpm build:registry, with exact registry dependency edgesorg-chart,agents-builder,billing-account,billing-console,storage-browser,feature-pack-storage,console-module-storage,preset-b2b-storage, the App access and Organizations packs and modules,feature-pack-notifications,console-module-notifications,console-kit-core,console-kit-nextjs,preset-full,schema-builderpnpm build:pagesartifact verification (98 public routes, 16 preview routes)Generated with Devin