Source bar

Once something is loaded, the playground’s input shrinks to this one line and the views take the page (playground spec, decision 15): “Loaded”, what it is (brand-ab example, tokenhaus export, a file name), a mono detail (6 files, converted into 1 token file), then “Replace files” and “Paste JSON instead”.

When to use

• Above a workspace whose content comes from an input the visitor chose: it says what the views show and offers to change it, without taking room from them.
• Not before anything is loaded: then the Token input takes the page.

The example loaded

Light

Loaded brand-ab example 6 files: Brand(Alias).BrandA.json, Brand(Alias).BrandB.json, Primitives.Value.json, ScreenType.Desktop.json, ScreenType.Mobile.json, ScreenType.Tablet.json

Replace filesPaste JSON instead

Graphite

Loaded brand-ab example 6 files: Brand(Alias).BrandA.json, Brand(Alias).BrandB.json, Primitives.Value.json, ScreenType.Desktop.json, ScreenType.Mobile.json, ScreenType.Tablet.json

Replace filesPaste JSON instead

Story: /stories/source-bar/example/

A plugin export converted, paste field open

Light

Loaded tokenhaus export converted into 1 token file: Primitives.Mode 1.json

Replace filesPaste JSON instead

Graphite

Loaded tokenhaus export converted into 1 token file: Primitives.Mode 1.json

Replace filesPaste JSON instead

Story: /stories/source-bar/import/

Guidelines

• One line on the surface: bg-surface with a stroke-hairline in border-default and radius-md, like a card’s edge but flat. It wraps (actions under the label) when the container is narrow; it never scrolls sideways. A file name as the label breaks between its segments (Token path).
• Words: the kicker “Loaded” and the detail in mono fg-subtle / fg-muted; what is loaded in label type. For an import, the words of dta pull --from-file (“converted into 1 token file”).
• Actions: “Replace files” is an outline Button and opens the file picker (several files at once); “Paste JSON instead” is a link button that opens the paste field under the bar (aria-expanded says whether it is open). Both 44 px tall.
• Screen readers: the line is a status region that also reads out the file names (visually the detail stands for them). After a new read, focus moves to it, because the button that started the read is gone.
• A Preact component (the playground island renders it); it reads files with the Token input’s readFiles, so both inputs read the same way.
• Motion: the bar is the view-transition part dta-source, shared with the Token input’s drop area, so on loading the drop area collapses into the bar; after “Replace files” its text crossfades in place. See Motion.

Tokens used

Read from the component’s source:

--action-bg--bg-surface--border-default--fg-default--fg-muted--fg-subtle--font-mono--font-sans--radius-md--space-2--space-4--stroke-focus--stroke-hairline--stroke-ink--type-label-line-height--type-label-size--type-label-weight--type-meta-size