Inline Edit Field
The value, help text and save path stay attached to one product field.
Workspace name
Shown to collaborators in the workspace switcher.
Product systems · contextual layer
Forms, data, overlays and workflows that preserve context, native semantics and a clear next action.
01 · Forms
The value, help text and save path stay attached to one product field.
Workspace name
Shown to collaborators in the workspace switcher.
A compact intent trigger opens a focused query without sending the user to another page.
Invalid, correcting and valid are readable states with the field still in place.
A local example; no request is sent.
Completed sections condense into context while the next useful decision opens.
Section 1 of 3
Name the project.
Up next
AudienceChoose who sees it next.
04 · Composition & editing
These systems keep the original field, the next decision and the editing context close together.
A compact value surface becomes a focused editor without losing its source identity.
A one-line prompt grows into a multiline editing surface with attached tools.
Confirmed values wrap as real tokens while the next value remains ready to type.
Press Enter or comma to keep a value. Backspace removes the previous token.
Property, operator and value stay coordinated as one compact condition authoring surface.
Typed text stays raw until a visible suggestion is explicitly accepted.
A suggestion is proposed, never silently substituted.
Slash commands become removable content tokens instead of opening a navigation palette.
Commands become visible tokens inside the composition, separate from navigation commands.
05 · Context & validation
Choosing shipping reveals the address fields in the same document flow.
One property at a time becomes an editor while the object context remains stable.
Select a phrase in the note to reveal formatting tools attached to that selection.
Handoff note
Select text to reveal the attached tools. No floating editor is created outside the field.
06 · Adjustable values
Drag the bounded surface or type a precise number; both paths update the same unit value.
Two endpoints share one track and remain ordered while either value changes.
One date value is entered through three labelled, keyboard-connected segments.
02 · Data
Grouped choices, active chips and result count remain one navigable surface.
16 results
A structured table keeps columns intact while pointer, keyboard and touch paths all reorder the same rows.
Project brief
Updated 4m ago
Interaction audit
Updated yesterday
Release notes
Updated Friday
The row opens its detail context in place instead of breaking the scan with a modal.
Keyboard path, reduced motion and touch fallback have all been checked for this handoff.
Batch actions enter the flow only after there is something selected.
No batch action yet
04 · Data visualization
A small chart language for reading, comparison, selection and context. Every surface has a direct value path, a keyboard path and a table-minded fallback.
quiet / precise / inspectable
A hairline crosshair snaps to the nearest point and keeps the value in a reading rail.
Focus the plot, then use ← → to move through the reading points. Pointer and touch follow the same rail.
Overview and focused reading share one selected window.
Drag the selected window or adjust either labelled handle. The focused chart keeps its reading position.
Two series expose the gap directly instead of relying on a floating tooltip.
The solid circle, outlined square and direct difference rail keep the comparison readable without relying on colour alone.
Events explain the curve while remaining a small, traversable set of buttons.
Campaign. The first campaign widened the audience.
State is carried by labelled bands, hairlines and the active marker—not colour alone.
Hairline thresholds, direct band labels and the diamond marker keep state legible without colour-only meaning.
Metric changes and sorting preserve the identity of each row.
Change the metric or sort order. Rows keep their identity while the ranking changes.
Four metrics share one reading position without becoming four independent tooltips.
$59k
5.4%
82%
36k
Pointer, touch and keyboard move one shared crosshair; each metric keeps its own direct value label.
The same dataset remains available as a chart or a real semantic table.
Same data, two readings
Sun · 26k
The table is the same data source, not a hidden accessibility-only duplicate.
03 · Workflows
Completed decisions become compact context while the active task and next decision remain visible.
Active decision · 1 / 3
Shape the interaction brief.
Define the one decision this screen needs to make.
Next context
ReviewCheck keyboard and touch paths.
Queued, active, complete and failed states stay on one spatial track, including retry.
Queued is active
04 · Overlays
inspector
A selected source keeps its readable properties in a nearby inspector instead of a detached modal.
popover
A contextual surface measures its local boundary, flips when needed and stays attached to the trigger.
tooltip
A short, non-interactive label appears near a control on hover or focus, and nowhere else.
dialog
A standard modal dialog — scrim, focus trap and Escape — with no shared-element continuity to its trigger.
Browse all · 73 systems
Live studies stay above. This compact catalogue keeps the full family visible, with canonical patterns first and quieter variations kept in context.
name / relationship / detail
6 entries
An aligned media comparison driven by a native range.
Inline media expands into a larger captioned view as the same object.
A host player can minimize, restore or close without becoming a streaming platform.
Pointer position previews video time with keyboard and touch alternatives.
Pointer, drag and keyboard inspection across supplied frames.
A selected thumbnail expands into a focus-managed collection view.
22 entries
A small formatting surface appears beside a real text selection instead of floating independently from the editor.
A compact property list turns one row at a time into an attached editor while the object context stays stable.
A single-line composer grows into an attached multiline editing surface with tools and a submit path.
Slash commands selected inside a composer become explicit structured tokens instead of navigating away.
A product field keeps its label, help text and validation attached while entering edit mode.
A compact value control becomes a focused editor while the source surface keeps its identity.
A coordinated field builder composes property, operator and value into readable conditions.
A field-level choice reveals only the dependent inputs required by the selected intent.
Two value endpoints share one readable track and preserve their order while either value is edited.
One logical value is entered through coordinated segments with traversal and paste distribution.
Typed content stays raw while a keyboard-complete suggestion is proposed as a separate choice.
A multi-value field turns confirmed text into removable values while the next value stays ready to type.
A numeric value with a unit can be scrubbed through a bounded surface while manual input remains precise.
A compact value selector with one elastic active surface; use Fluid Tabs for tab-panel navigation.
A compact search intent expands into an autofocus query surface without leaving the current layout.
Sustained input confirms one rare consequential action.
A labeled compact control expands into a complete active-descendant listbox and returns the selected value to the same surface.
Completed form sections condense into context while only the next useful section opens.
A real file input with drag states and local validation hooks.
A native range with quiet tactile thumb, fill and formatted value.
A field communicates idle, correcting, valid, warning and invalid states as readable feedback.
A motion-focused inline editing preset where the resting value becomes a focused validated field.
18 entries
A structured row opens its detail surface in place while preserving identity and nearby values.
A locale-aware numeric update with one stable accessible final value.
A trend and its meaningful events share one reading structure so change has context.
One dataset moves between an inspectable chart and a semantic table without losing selection context.
A small labeled dataset compared against one shared baseline.
Two aligned series reveal values, direction and the gap between them at one readable point.
Chart-agnostic pointer, touch and keyboard local inspection.
A grouped filter rail keeps active choices, removal and result context in one compact surface.
Ranked rows can change metric and order while each item keeps its spatial identity and value.
A calm line reading surface with snapped crosshair, direct values and keyboard point browsing.
A dependency-free SVG trend with point inspection and textual output.
Several compact charts share one reading position while keeping each metric’s identity visible.
A restrained semantic circular value display with optional segments.
An overview and focused chart share one selected window with draggable and keyboard-adjustable bounds.
A contextual action tray appears when multiple data items are selected and stays out of the way otherwise.
Structured data rows can be reordered without losing their columns or keyboard path.
Normal, warning and target ranges become labelled chart structure with threshold-aware reading.
A native snapping range across labeled horizontal or vertical stops.
12 entries
Rows expand into a masked media gallery and caption layer while retaining the title row as the object identity.
A text-first collection reveals one contextual preview near the active item while the list remains the primary surface.
A card's secondary surface enters from the side where the pointer arrived, making spatial intent part of the reveal.
An editorial row expands in document flow to expose media, metadata and secondary content without a modal detour.
A horizontal or vertical strip redistributes space so one selected content item becomes the readable focus.
A minimal editorial list keeps text primary while one fixed media viewport reveals the active item.
A selected collection item becomes a larger detail surface while preserving its visual identity and return path.
A numbered editorial content index pairs typographic rows with a shared preview without becoming page navigation.
A collection keeps its items visible while an attached neighbouring panel reveals context for the active item.
One active item receives real layout space and context while the rest remain compact and scannable.
A bounded content surface scrubs through supplied preview frames with pointer, keyboard and touch alternatives.
Many compact collection entries control one larger shared preview that changes without duplicating heavy media surfaces.
15 entries
A contextual surface measures its local boundary, flips when needed and stays attached to the trigger.
A selected source keeps its readable properties in a nearby inspector instead of a detached modal.
Pointer and explicit keyboard intent open actions at the source without requiring a platform-specific menu shell.
A compact action surface follows pointer intent across a bounded source area and can be pinned for touch.
A standard modal dialog — scrim, focus trap and Escape — with no shared-element continuity to its trigger.
A contextual panel docks beside its source on wide screens and becomes an inline continuation on touch.
A compact object action expands into an attached action row while retaining the source identity.
A contextual surface tracks a moving source while keeping its relationship readable and bounded.
A source surface grows into a focused contextual editor while retaining its visual identity and return path.
A contextual surface can open a child surface while preserving a clear back path through the local layer stack.
A lightweight preview overlays its source so the user can inspect context without leaving the collection.
A nearby toolbar appears only after source surfaces are selected, keeping batch intent close to the selection.
Several sources rebind one persistent context surface, preserving its place and reducing layer churn.
A soft scrim lowers surrounding noise while a selected source remains the reason for the contextual layer.
A short, non-interactive label appears near a control on hover or focus, and nowhere else.