Pieces/Editor(56)

Editor pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

Zen Modemanifesto.md
Exit⌘+K+Z

Zen Mode

Minimal focus card with a focus icon, current filename, and an exit-shortcut reminder.

<<<<<<< CurrentHEAD
const greet = (name) =>  `Hi, ${name}!`;
=======
const greet = (name: string) =>  `Merhaba, ${name}!`;
>>>>>>> Incomingfeat/onboarding

Merge Conflict

Classic conflict block with emerald current section, sky incoming section, and <<< === >>> markers.

import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

Git Gutter

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

1const user = createUser(name: "Ayşe", role: "admin");
nameinlay parameter hints

Inlay Hints

Function call with muted parameter-name chips inlaid before each argument.

1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands

TODO Comment

Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.

1function render(items) {
2  items.forEach(draw);
3}
Matching bracket on line 3

Bracket Match

Three-line snippet with the matching opening and closing brackets highlighted in primary.

--primary:  #f43f5e;
--accent:  #8b5cf6;
--surface:  #0ea5e9;

Color Preview

CSS lines with inline color swatch squares next to each hex value.

col guide80
const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'

Ruler Guide

Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.

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

Branch Switcher

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

button.tsxSaved 3s ago

Save Indicator

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

function greet(name: string)

Code Lens

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

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

Regex Input

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

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

Git Blame

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

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

Selection Counter

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

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

Sticky Header

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

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

Parameter Hints

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

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

Multi Cursor

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

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

Snippet Placeholders

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

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

Problem Marker

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

return greet(name);
Ayşe

Collab Cursor

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

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Outline Panel

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

onboarding3/12
activation

Find & Replace

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

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

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

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

Command Palette

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

Markdown version