Skip to content
CroStreamUI kit

Inspector fields

Dense property editing for editors: property panels and rows, slider fields, vectors with aspect lock, box sides, angles, colour, swatches, gradients and nine-slice guides.

01PropertyPanel

PropertyPanel

The inspector's frame: a header for the thing being edited, then collapsible sections of dense two-column rows. Rows are Fields, so the control inside picks up its id, label and hint; sections remember whether you left them open.

An element selected Sections persist open/closed per key; the dot says a section has changes, in words too.

Hydrate alert Widget

Image · alerts layer

Linked to the Hydrate widget

Edits here change every overlay that uses it.

Below 100% the layer behind shows through.

Name

Nothing selected The empty state says what to do, not just that it's empty.

Select a layer on the canvas or in the Layers list to change it here.

02SliderField

SliderField

A slider for feel and a number for precision, editing one value. Every change reports its phase: drag while it moves, commit when the gesture ends, so an editor can record one undo step per drag.

In rows Drag, arrow, or type; the log shows the phases.
Blur 12 px
Disabled Readable, dashed in High contrast.

03VectorInput

VectorInput

Two numbers that belong together. Each prefix is a scrub handle: drag it sideways (Shift for big steps, Alt for fine ones). With the lock on, a size keeps the proportions it had when the lock went on.

Position and size Try the lock: change W and H follows at 16:9.
Size 1280 × 720 (locked)
Custom axes Any pair: a shadow's offset, a gradient's centre.

04BoxSidesInput

BoxSidesInput

Four related numbers with a “same for all” link: padding and insets by side, or radii by corner. Linked shows one field; unlinked shows four, each tagged with its side or corner.

Sides Turn the link off to set each side.
Padding 16 16 16 16 px
Corners A speech bubble: three round corners, one tight.
Thanks for the raid!

05AngleInput

AngleInput

A dial and a number. The dial is a slider: drag around it (Shift snaps to 15°), or use the keys. A change commits when the drag or key ends, never on Tab, so a whole turn is one undo step.

Gradient angle 0° points up, like CSS. Arrows step 1°, Shift or PageUp/PageDown 15°.
Angle 135°
Light direction zero='right' for shadow lights; dial only where space is tight.

06ColorInput

ColorInput

A swatch over a checkerboard that opens the picker, a hex field (#rgb, #rrggbb or #rrggbbaa) and an opacity field. Theme colours stay linked: they show as a named chip with Detach, and follow the theme until detached.

In rows Open the swatch: square, hue and opacity strips, hex, theme colours, recent colours.
Text

No opacity for outlines.

Fill #3d7effcc
The picker Everything works from the keyboard: the square is a 2-D slider (←/→ saturation, ↑/↓ brightness, Shift ×10).

Theme colours

Picked #36c2ff

07SwatchGrid

SwatchGrid

A radio group of swatches: one tab stop, arrows move in two dimensions and select, every swatch is named, and the chosen one carries a check, so it's never colour alone.

Tag colours Arrow keys move; the grid's real column count is used.
Tag colour Green
SwatchStrip One scrolling row: a theme at a glance.
Theme colour Accent

08GradientEditor

GradientEditor

Stops are focusable handles: drag or arrow them along the bar, Delete removes one (never below two). Clicking the bar adds a stop with the colour already there, mixed in OKLab so midpoints don't go muddy; Add stop does the same from the keyboard.

A fill Each stop's colour and position below the bar.

Arrow keys move the stop; Delete removes it.

Stop 1
3 of 8 stops

Result The CSS the gradient produces.
CSS linear-gradient(120deg, #36c2ff 0%, #3d7eff 55%, #a07cff 100%)

09OptionalField

OptionalField

A property that may have no value at all: “None” with an Add button, or its controls with a Remove button. Add lands focus on the new controls; Remove lands it back on Add.

Unset and set Outline starts unset; Glow starts set.
None

10PickerTrigger

PickerTrigger

A button that shows a value and opens a picker for it: a font in its own face, an icon, a sound. It takes a Popover or Dialog's trigger props as they are.

A font The value is drawn in the font itself; the raw family underneath.
Other values A sound file and an empty value.

11IconPicker

IconPicker

Search the set or browse the grid. ↓ from the search moves into the grid; arrows move in two dimensions; typing letters jumps to the next icon starting with them; Enter picks and focus returns to the button.

In rows The trigger previews the icon and names it.
Icon heart

12IconRadioGrid

IconRadioGrid

One of a few choices shown as pictures. A radio group: one tab stop, arrows move in two dimensions and select (skipping unavailable tiles), and every tile is named.

Frame shapes Custom pictures through a glyph snippet.
Shape Rounded
With labels, one unavailable Justify is disabled: dashed, skipped by the arrows.
Align left Align centre Align right Justify

13SliceEditor

SliceEditor

Nine-slice guides over a frame picture: corners stay put, edges stretch one way, the middle stretches both. Each guide is a slider with a 24px grab strip; arrows move a line the way they point, whichever edge it measures from.

An alert frame Drag a dashed line, or Tab to it and use the arrows (Shift ×10).
Insets (top right bottom left) 28 36 28 36 px

14Composed: text style

Composed: text style

The pieces together, as the overlay editor's text inspector: a font in its own face, size and weight sliders, a linked theme colour, and an optional shadow built from a vector, a slider and a colour.

Inspector

Alert title

Text · Hydrate alert

Text

Preview

Stay hydrated!

15Composed: frame

Composed: frame

The frame editor rebuilt from kit parts: a shape, corner radii, a gradient fill and nine-slice guides over the result.

Inspector

Alert frame

Frame preset

Arrow keys move the stop; Delete removes it.

Stop 1
2 of 8 stops

Preview
pixel_mage raided with 34 viewers!