Pieces/Editor

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
// Ship it

Code Window

editor1

Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.

user.
  • idstring
  • namestring
  • emailstring
  • isAdminboolean
  • save(): Promise<void>

IntelliSense

editor2

Autocomplete popup with a blinking caret up top and a dropdown listing kind-colored tiles, names, and type signatures.

src
components
beste
button.tsx

Path Breadcrumb

editor3

Path row with folder or file icons, chevron separators, and a bold final crumb.

button.tsx
export function Button({ label }) {
  return <button>{label}</button>;
  return <button className="btn">{label}</button>;
}

Diff View

editor4

Unified diff with tinted add and remove rows, line numbers, and +/− prefix column.

File Tree

editor5

Nested file explorer with folder chevrons, amber folder icons, and a highlighted active file.

index.tsx
button.tsx
card.tsx
theme.css

Editor Tab Bar

editor6

Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.

const msg = greet("Beste");
function greet(name: string): string

Returns a localized greeting for the given name.

@/lib/greet.ts

Hover Popover

editor7

Wavy-underlined symbol above a type-hover card showing signature, one-line description, and source path.

AI Suggestion
const greet = (name: string) => `Hello, ${name}!`;

Inline Suggestion

editor8

AI Suggestion caption above a code line with a solid prefix, italic muted ghost text, and a blinking caret.

format
  • Format DocumentEditor
  • Format SelectionEditor
  • Reveal in File ExplorerFile

Command Palette

editor9

Command palette card with a search bar, ranked results, hint captions, and kbd shortcut pills.

Launch Checklist

Ship with confidence by running through the five-point review.

  • Verify preview URL
  • Run smoke suite
  • Tag the release
pnpm release

Markdown Preview

editor10

Rendered markdown mini card with a heading, lede paragraph, bullet list, and inline code chip.

onboarding3/12
activation

Find & Replace

editor11

Two-row editor find bar with match counter, case/regex toggles, prev/next, replace, and replace-all.

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Outline Panel

editor12

Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.

return greet(name);
Ayşe

Collab Cursor

editor13

Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.

const total = items.reduce(sum, i) => sum + i.price);
Expected 2 arguments, but got 1.ts(2554)

Problem Marker

editor14

Code line with a rose wavy underline on the offending token above an alert card with message and source code.

for (let $1:i = 0; $1 < $2:arr.length; $1++) {}
Tab throughTab

Snippet Placeholders

editor15

Code template with dashed-outline tab stops. Active placeholder tints primary, others stay muted.

3 cursors
const name = 'Ayşe';
const role = 'design';
const team = 'core';

Multi Cursor

editor16

Stacked code lines each with a primary-tinted blinking caret at the same column plus a header count.

greet()
greet(name: string, locale: Locale): string
Greet the user with a localized message.

Parameter Hints

editor17

Function call line with a caret plus a signature popover underneath. The current parameter underlines in primary.

Dashboardrender()if (isReady)
    // hidden lines…
    const ready = useReady();
    if (!ready) return null;

Sticky Header

editor18

Scope breadcrumb pinned above a code snippet, showing the current class, method, and block.

Ship production-ready components in a weekend.
27 chars·3 words

Selection Counter

editor19

Text with a primary-tinted highlight and a floating dark pill showing character and word counts.

const greet = (name: string) =>Ayşe·3d ago·a1b2c3d
  `Merhaba, ${name}!`;Merve·today·9f0e4c2
 Ayşe·3d ago·a1b2c3d

Git Blame

editor20

Code lines with inline blame showing author, relative time, and short commit hash to the right.

/\b\w+@\w+\.com\b/gi
12

Regex Input

editor21

Regex input with slashes, violet flags, and a tabular match-count pill on the right.

function greet(name: string)

Code Lens

editor22

Action row above a function signature showing references, implementations, and inline commands.

button.tsxSaved 3s ago

Save Indicator

editor23

Pill with filename and a state glyph: emerald check for saved, sky dot for dirty.

Switch branch…
  • feat/onboarding
  • main
  • feat/ai-suggest↑3
  • chore/cleanup

Branch Switcher

editor24

Branch picker popover with search, a list of branches, ahead counts, and an emerald check on the current one.