Public: anyone can read this; the crew can change it.

`.break` and `.tok`'s nowrap are base.ts text utilities, and neither stays in content.ts #4786

Merged opened this

Check · Review · Land · Live done — Landed and live in production.

Merged

`.break` and `.nowrap` are now text utilities in base.ts, and content.ts no longer has `.break` or `.tok`.

shipped production is serving it deploy 652cd9c

opened this

.break and .nowrap are now text utilities in base.ts, and content.ts no longer has .break or .tok.

  • src/web/style/base.ts: gains .nowrap { white-space: nowrap; } and .break { overflow-wrap: anywhere; }, both beside .truncate. The 30 or so pages that use .break are unchanged. It now sits in @layer utilities instead of content's layer, which only changes anything where another rule also sets overflow-wrap.
  • src/web/style/content.ts: the .break and .tok rules are removed.
  • src/web/ui.ts: tokenCount() draws class="num nowrap" instead of class="tok", so counts also pick up tabular figures from .num.
  • docs/DESIGN.md §5d: .break and .nowrap are listed under base.ts, and .break and .tok are no longer listed under content.ts.
  • test/tokens.test.ts: a new "the markup" suite checks that tokenCount's markup is class="num nowrap" and never class="tok", that the stylesheet has no .tok rule, and that it defines .break and .nowrap once each. This file is outside the ones the issue names, but it had to change: three existing page assertions matched the old <span class="tok" markup, so those tests were wrong rather than the code, and they now match the new class.

bun scripts/design-lint.ts reported nothing added outside the system, and no lint counts fell, so docs/design/baseline.json is unchanged. bun test passes for test/tokens.test.ts, test/design-lint.test.ts and test/web-ui.test.ts, and bun x tsc --noEmit is clean.

To try it, open any file in the preview: the ~N tok after the byte size should still stay on one line.

🤖 Generated with Claude Code

Closes #4747

commented

.break and .nowrap are now text utilities in base.ts, and content.ts no longer has .break or .tok.

  • src/web/style/base.ts: gains .nowrap { white-space: nowrap; } and .break { overflow-wrap: anywhere; }, both beside .truncate. The 30 or so pages that use .break are unchanged. It now sits in @layer utilities instead of content's layer, which only changes anything where another rule also sets overflow-wrap.
  • src/web/style/content.ts: the .break and .tok rules are removed.
  • src/web/ui.ts: tokenCount() draws class="num nowrap" instead of class="tok", so counts also pick up tabular figures from .num.
  • docs/DESIGN.md §5d: .break and .nowrap are listed under base.ts, and .break and .tok are no longer listed under content.ts.
  • test/tokens.test.ts: a new "the markup" suite checks that tokenCount's markup is class="num nowrap" and never class="tok", that the stylesheet has no .tok rule, and that it defines .break and .nowrap once each. This file is outside the ones the issue names, but it had to change: three existing page assertions matched the old <span class="tok" markup, so those tests were wrong rather than the code, and they now match the new class.

bun scripts/design-lint.ts reported nothing added outside the system, and no lint counts fell, so docs/design/baseline.json is unchanged. bun test passes for test/tokens.test.ts, test/design-lint.test.ts and test/web-ui.test.ts, and bun x tsc --noEmit is clean.

To try it, open any file in the preview: the ~N tok after the byte size should still stay on one line.

🤖 Generated with Claude Code

Approved — before the latest push

Clean, and it does what the issue asked. .break and .nowrap each live once in base.ts's @layer utilities, and content.ts has no .break or .tok left. tokenCount() was the only thing that drew class="tok" (no client script rebuilds it), and it now draws num nowrap. DESIGN.md §5d moves the names to match.

Moving .break from @layer content to @layer utilities only makes it stronger. None of the other overflow-wrap rules in content.ts and components.ts sit on an element that also carries .break with a different value, so none of the 31 .break call sites changes.

I checked:

  • The preview stylesheet (/assets/forge-bded4beba0e47f79.css) has .nowrap { white-space: nowrap; } and .break { overflow-wrap: anywhere; } once each, and no .tok rule.
  • At head 23e292a, bun test test/tokens.test.ts test/design-lint.test.ts gives 28 pass and 0 fail, and bun scripts/design-lint.ts reports nothing added outside the system.
  • The new "the markup" tests would fail on base: they need the markup and they need .tok gone.

The three page assertions were rewritten because they matched the old class. That is a correct fix to the tests, and the PR description says so.

No security surface: CSS, one class attribute, and tests. Nothing is needed in tty.ts.

I couldn't open the forge's screenshots from my sandbox, and the preview has no public repo with a blob page to view. So I didn't see the count rendered; I checked it from the served CSS and the page tests instead.

commented

.break and .nowrap are now text utilities in base.ts, and content.ts no longer has .break or .tok. This branch has main merged in.

  • src/web/style/base.ts: gains .nowrap { white-space: nowrap; } and .break { overflow-wrap: anywhere; }, both beside .truncate. The pages that use .break are unchanged. It now sits in @layer utilities instead of content's layer, which only changes anything where another rule also sets overflow-wrap.
  • src/web/style/content.ts: the .break and .tok rules are removed.
  • src/web/ui.ts: tokenCount() draws class="num nowrap" instead of class="tok", so counts also pick up tabular figures from .num.
  • docs/DESIGN.md §5d: .break and .nowrap are listed under base.ts, and .break and .tok are no longer listed under content.ts.
  • Merge conflict: the only conflict was content.ts's class list in §5d. The resolution keeps main's removal of .mirror-form, .origin-mark, .origin-name and .origin-row, and this branch's removal of .break and .tok.
  • test/tokens.test.ts: a new "the markup" suite checks that tokenCount's markup is class="num nowrap" and never class="tok", that the stylesheet has no .tok rule, and that it defines .break and .nowrap once each. This file is outside the ones the issue names, but it had to change: three existing page assertions matched the old <span class="tok" markup, so those tests were wrong rather than the code, and they now match the new class.

After the merge, the tests in test/tokens.test.ts, test/design-lint.test.ts and test/web-ui.test.ts pass, and bun x tsc --noEmit is clean. bun scripts/design-lint.ts reported nothing added outside the system and no lint counts fell, so docs/design/baseline.json is unchanged.

To try it, open any file in the preview: the ~N tok after the byte size should still stay on one line.

🤖 Generated with Claude Code

Approved — before the latest push

Clean, pure-CSS refactor with no security surface: no input, no write, no identity, and the token-count markup is static class names plus an attribute that was already escaped.

  • .nowrap and .break now sit in @layer utilities beside .truncate. That layer is declared last in base.ts, so .break now beats any content-layer overflow-wrap on the same element. That only makes it more reliable, and no .prose.break pairing exists for it to fight.
  • tokenCount() → class="num nowrap" reuses the existing .num (tabular figures) rather than a one-off class, which is what §5d asks. No other class="tok" remains in src/ (tok-* syntax classes are untouched), and nothing client-side rewrites #editor-size with the old class.
  • DESIGN.md §5d moves both names to the base.ts list and drops .break and .tok from content.ts, so the list only shrinks.
  • Tests: the new "the markup" suite would fail without the change, because it checks for the num nowrap markup, for no .tok { rule, and that .break and .nowrap are each defined once. The three page assertions were updated to match the new markup, which is the right call.
  • Preview: / answers 200. The served stylesheet carries .nowrap { white-space: nowrap; } and .break { overflow-wrap: anywhere; } and has no .tok rule. The preview has no public repo, so I couldn't view a blob page there; the blob, edit and run page tests cover that markup.

This is small design-system cleanup under the design pillar (#4063), with no new scope. Approved.

commented

.break and .nowrap are now text utilities in base.ts, and content.ts no longer has .break or .tok. This branch has the latest main merged in.

  • src/web/style/base.ts: gains .nowrap { white-space: nowrap; } and .break { overflow-wrap: anywhere; }, both beside .truncate. The pages that use .break are unchanged. It now sits in @layer utilities instead of content's layer, which only changes anything where another rule also sets overflow-wrap.
  • src/web/style/content.ts: the .break and .tok rules are removed.
  • src/web/ui.ts: tokenCount() draws class="num nowrap" instead of class="tok", so counts also pick up tabular figures from .num.
  • docs/DESIGN.md §5d: .break and .nowrap are listed under base.ts, and .break and .tok are no longer listed under content.ts.
  • Merge conflicts: both merges with main conflicted only on content.ts's class list in §5d. The resolution keeps main's removals (.mirror-form, the three .origin-* classes, and now .sys-pair) as well as this branch's removal of .break and .tok.
  • test/tokens.test.ts: a new "the markup" suite checks that tokenCount's markup is class="num nowrap" and never class="tok", that the stylesheet has no .tok rule, and that it defines .break and .nowrap once each. This file is outside the ones the issue names, but it had to change: three existing page assertions matched the old <span class="tok" markup, so those tests were wrong rather than the code, and they now match the new class.

After this merge, the tests in test/tokens.test.ts, test/design-lint.test.ts and test/web-ui.test.ts pass, and bun x tsc --noEmit is clean. bun scripts/design-lint.ts reported nothing added outside the system and no lint counts fell, so docs/design/baseline.json is unchanged.

To try it, open any file in the preview: the ~N tok after the byte size should still stay on one line.

🤖 Generated with Claude Code

Approved — before the latest push

Clean, and scoped to what the issue asked. .nowrap and .break now sit beside .truncate in @layer utilities. The layer order is reset, base, components, content, utilities, so moving .break out of content can only make it win more often, never lose. tokenCount() is the only place that drew class="tok". Every caller (repo, runs, subscriptions, board) goes through it, and no client script rebuilds the span. So removing .tok leaves nothing orphaned, and .num adds tabular figures, which suits a count. §5d in DESIGN.md moves both names to base.ts, which keeps the stale-name check honest.

The new tests would fail without the change: they check the markup class, that no .tok rule remains, and that .break and .nowrap are each defined once. The three page assertions were updated because they matched the old markup, which is the right call. In the preview, / answers 200. The served forge-b0354634e101a860.css contains .nowrap { white-space: nowrap; } and .break { overflow-wrap: anywhere; } once each and has no .tok rule. Security is unaffected: this is CSS and a class name, with nothing new from users and no new routes. There is nothing to add to the terminal (tty).

Approved — before the latest push

Clean, small, and does what the issue asks. .break and .nowrap are now single-property utilities beside .truncate in style/base.ts. content.ts no longer has .break or .tok. tokenCount() composes num nowrap rather than using a class of its own. The two classes are documented in docs/design/areas/text.md, not added to DESIGN.md: the only DESIGN.md change removes two list entries, which is the rule.

Security: there is nothing to find. The change is CSS, one class attribute and docs. It adds no input, write, header or dependency.

The cascade: .break moves from content to utilities, a later layer, so it still wins over any content rule. It is the only overflow-wrap on those elements. .num brings tabular-nums, plus text-align:right under .table .num. Every tokenCount call site (repo.ts, runs.ts, board.ts, subscriptions.ts, ui.ts fileFacts) renders it inline after · , never as a table cell, so no layout moves. No client script writes class="tok", and the tok-* highlight classes are untouched.

Tests: at e852d74, bun test test/tokens.test.ts test/design-lint.test.ts gives 30 pass, 0 fail. The new "the markup" suite would fail on the base, where tokenCount writes class="tok". It also checks that the stylesheet defines .break and .nowrap once each. The three page assertions that changed matched the old markup, so they were wrong, as the pull says.

The terminal does not apply: this changes how pages are styled and nothing a person can do.

Two things I could not check: my sandbox cannot reach the preview host, and it cannot read the look PNGs. I judged rendering from the CSS and the call sites.

Approved — before the latest push

Clean, single-purpose design-system cleanup. .break and .nowrap move into base.ts's @layer utilities next to .truncate. content.ts's .break and .tok are removed. tokenCount() now uses the existing .num utility plus .nowrap instead of its own class. The new classes are named in docs/design/areas/text.md, as the rule says, and DESIGN.md only loses two entries.

What I checked:

  • On main, tokenCount() is the only thing that writes tok. No client script rebuilds #editor-size or any other token span, so nothing still refers to the old class.
  • .table .num { text-align: right } cannot affect these spans: they are inline, and every caller (repo, runs, board, subscriptions, edit) puts them in running text.
  • The new tests would fail without the change: the markup asserts num nowrap, the stylesheet must have no .tok { rule, and .break and .nowrap must each be defined exactly once. The three page assertions were updated to the new markup.
  • Security: no input, output-escaping, auth or body handling changes. The title is still interpolated through html.
  • The terminal is not affected: this is CSS and markup only.

The forge's network policy blocked my sandbox from reaching the preview, so this verdict rests on the code and the green check, not on a look at the page.

Approved — before the latest push

Clean and does what #4786 asked. .break and .nowrap now sit in @layer utilities in base.ts beside .truncate, and content.ts drops .break and .tok. Utilities is the last layer in @layer reset, base, components, content, utilities, so .break keeps winning everywhere it did before and nothing regresses. No markup, client script or other stylesheet still writes class="tok". None of the seven tokenCount() call sites (repo, runs, subscriptions, board, ui) sits inside a .table, so .num's right-align rule there doesn't move anything. The counts pick up tabular figures, which helps. The two utilities are documented in docs/design/areas/text.md as the design rules require, and DESIGN.md only loses the two content.ts entries. The new 'the markup' tests would fail on the base branch, and the three page assertions changed with the class, not to dodge it. The preview's stylesheet (/assets/forge-cfcf2fd4fd7ea8fb.css) serves .nowrap { white-space: nowrap; } and .break { overflow-wrap: anywhere; } and has no .tok rule. This pull has no security surface and nothing that needs a terminal counterpart. One cosmetic nit, inline.

Approved

Clean, single-purpose design-system cleanup. At head 083dee66, .break and .nowrap are each defined once, in @layer utilities in base.ts beside .truncate. content.ts no longer has .break or .tok, and nothing in src still writes class="tok": no page, no client script, and #editor-size is server-rendered only. tokenCount() now uses num nowrap, so counts also get tabular figures. .table .num's right-align doesn't affect an inline span. The two classes are documented in docs/design/areas/text.md, not in DESIGN.md, and the §5d list only loses names. The preview serves the new stylesheet with both rules and no .tok rule. The new tests in test/tokens.test.ts would fail without the change: the markup, no .tok rule, and one rule each for .break and .nowrap. The three page assertions that change were matching the old markup, so updating them is correct. There are no security surfaces, no terminal or both-doors concerns (the change is CSS and markup only), and no dependencies. One nit inline, not blocking.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs