@duro-app/ui 5.8.0 → 5.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.8.0",
+  "version": "5.8.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^5.8.0"
+    "@duro-app/tokens": "^5.8.1"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/AppShell/AppShell.stories.tsx

@@ -19,6 +19,7 @@ import {Menu} from '../Menu/Menu'
 import {TextLink} from '../TextLink/TextLink'
 import {Aside} from '../Aside/Aside'
 import {Stack} from '../Stack/Stack'
+import {Prose} from '../Prose/Prose'
 
 // --- the story's frame -----------------------------------------------------
 
@@ -651,6 +652,60 @@ export const AsideBelowBar: Story = {
   },
 }
 
+/**
+ * A jump to a heading inside Prose lands below the phone bar, not under it:
+ * Prose's scroll margin adds the bar's height that AppShell publishes. Above
+ * the collapse point (no sticky bar) it is the spacing offset alone.
+ */
+export const ProseAnchorBelowBar: Story = {
+  tags: TEST_ONLY,
+  args: {width: 'phone', brand: ''},
+  render: ({width, ...args}) => (
+    <Frame px={FRAME_PX[width]}>
+      <Shell {...args}>
+        <Prose>
+          {PARAGRAPHS.slice(0, 40).map((text) => (
+            <html.p key={text}>{text}</html.p>
+          ))}
+          <html.h2 id="recovery-keys">Recovery keys</html.h2>
+          {PARAGRAPHS.slice(40).map((text) => (
+            <html.p key={text}>{text}</html.p>
+          ))}
+        </Prose>
+      </Shell>
+    </Frame>
+  ),
+  play: async ({canvas, canvasElement}) => {
+    const frame = frameOf(canvasElement)
+    setWidth(frame, PHONE_PX)
+    const heading = canvas.getByRole('heading', {name: 'Recovery keys'})
+    const banner = canvas.getByRole('banner')
+    const scroller = document.scrollingElement as HTMLElement
+    const start = scroller.scrollTop
+    try {
+      await waitFor(() =>
+        expect(getComputedStyle(heading).scrollMarginTop).toBe(
+          `${SIZES_PX.appBarH + SPACING_PX.lg}px`,
+        ),
+      )
+      heading.scrollIntoView({block: 'start'})
+      await waitFor(() =>
+        expect(Math.round(heading.getBoundingClientRect().top)).toBeGreaterThanOrEqual(
+          Math.round(banner.getBoundingClientRect().bottom),
+        ),
+      )
+      // above the collapse point: the spacing offset alone
+      setWidth(frame, DESKTOP_PX)
+      await waitFor(() =>
+        expect(getComputedStyle(heading).scrollMarginTop).toBe(`${SPACING_PX.lg}px`),
+      )
+    } finally {
+      scroller.scrollTop = start
+      frame.style.width = ''
+    }
+  },
+}
+
 /**
  * The server renders the shell once, for every width: CSS picks the rail or
  * the Menu button before any script runs, and hydration reports nothing. The

package/src/components/CodeBlock/CodeBlock.stories.tsx

@@ -3,6 +3,8 @@ import {expect, fn, spyOn, waitFor} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {CodeBlock} from './CodeBlock'
 import {onThemeSurface} from '../../docs/themedSurface'
+import {withCoarsePointer, withFinePointer} from '../../docs/coarsePointer'
+import {SIZES_PX} from '@duro-app/tokens/keys'
 
 interface CodeBlockArgs {
   /** The code shown (and copied). */
@@ -93,6 +95,34 @@ export const LongLineScrollsChecks: Story = {
   },
 }
 
+/**
+ * The copy button never covers the code — a long first line included, and
+ * on a touch screen where the button grows to the 44px target (seen on a
+ * phone in kb-vision: it sat over `kubectl ... get`).
+ */
+export const CopyButtonClearsTheCode: Story = {
+  ...LongLineScrolls,
+  tags: TEST_ONLY,
+  play: async ({canvas, canvasElement}) => {
+    const pre = canvasElement.querySelector('pre') as HTMLElement
+    const button = () => canvas.getByRole('button', {name: 'Copy'})
+    const clear = () =>
+      expect(button().getBoundingClientRect().bottom).toBeLessThanOrEqual(
+        pre.getBoundingClientRect().top,
+      )
+    await withFinePointer()
+    await clear()
+    await withCoarsePointer(async () => {
+      await waitFor(() =>
+        expect(button().getBoundingClientRect().height).toBeGreaterThanOrEqual(
+          SIZES_PX.touchTarget,
+        ),
+      )
+      await clear()
+    })
+  },
+}
+
 /** Copies the text, confirms on the button and announces it, then resets. */
 export const CopiesAndAnnounces: Story = {
   tags: TEST_ONLY,

package/src/components/CodeBlock/CodeBlock.tsx

@@ -81,6 +81,11 @@ export function CodeBlock({
 
   return (
     <html.div style={styles.root}>
+      <html.div style={styles.bar}>
+        <Button variant="secondary" size="small" onClick={() => void copy()}>
+          {copied ? copiedLabel : copyLabel}
+        </Button>
+      </html.div>
       <html.pre
         ref={preRef}
         tabIndex={scrollable ? 0 : undefined}
@@ -88,11 +93,6 @@ export function CodeBlock({
       >
         {children}
       </html.pre>
-      <html.div style={styles.copy}>
-        <Button variant="secondary" size="small" onClick={() => void copy()}>
-          {copied ? copiedLabel : copyLabel}
-        </Button>
-      </html.div>
       <LiveRegion visuallyHidden>{copied ? copiedLabel : ''}</LiveRegion>
     </html.div>
   )

package/src/components/CodeBlock/styles.css.ts

@@ -4,33 +4,45 @@ import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
-  // Anchors the copy button to the block's top-right corner.
+  // One bordered block: a row for the copy button, then the code. The button
+  // never sits over the code, which scrolls sideways under a long line.
   root: {
-    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
     minWidth: 0,
+    backgroundColor: colors.bgCard,
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.md,
+  },
+  bar: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    paddingTop: spacing.xs,
+    paddingRight: spacing.xs,
+    paddingLeft: spacing.xs,
   },
   pre: {
     margin: 0,
-    paddingTop: spacing.md,
+    paddingTop: spacing.xs,
     paddingBottom: spacing.md,
     paddingLeft: spacing.md,
     paddingRight: spacing.md,
     overflowX: 'auto',
     color: colors.text,
-    backgroundColor: colors.bgCard,
-    borderWidth: borders.hairline,
-    borderStyle: 'solid',
-    borderColor: colors.border,
-    borderRadius: radii.md,
+    // The root draws the block; inside Prose its pre rule would add a second
+    // border, background and rounded top, so this pre states its own.
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: radii.md,
+    borderBottomRightRadius: radii.md,
     whiteSpace: 'pre',
     outlineWidth: {default: 0, ':focus-visible': borders.focusRing},
     outlineStyle: {default: 'none', ':focus-visible': 'solid'},
     outlineColor: {default: 'transparent', ':focus-visible': colors.accent},
     outlineOffset: {default: 0, ':focus-visible': borders.focusOffset},
   },
-  copy: {
-    position: 'absolute',
-    top: spacing.sm,
-    right: spacing.sm,
-  },
 })

package/src/components/Prose/Prose.stories.tsx

@@ -229,5 +229,12 @@ export const DuroComponentsInsideChecks: Story = {
     // headingLg is 30px; a Prose h2 would be 20px
     await expect(style(heading).fontSize).toBe('30px')
     await expect(canvas.getByRole('button', {name: 'Copy'})).toBeVisible()
+    // CodeBlock draws one block: Prose's own pre rule must not add a second
+    // border, background or rounded top inside it
+    const pre = canvas.getByText('pnpm add @duro-app/ui').closest('pre') as HTMLElement
+    await expect(style(pre).borderTopWidth).toBe('0px')
+    await expect(style(pre).borderLeftWidth).toBe('0px')
+    await expect(style(pre).backgroundColor).toBe('rgba(0, 0, 0, 0)')
+    await expect(style(pre).borderTopLeftRadius).toBe('0px')
   },
 }

package/src/components/Prose/prose.css

@@ -40,8 +40,10 @@
     letter-spacing: var(--duro-type-scale-letter-spacing-tight);
     margin-block-start: var(--duro-spacing-xl);
     margin-block-end: var(--duro-spacing-sm);
-    /* A table-of-contents jump lands with room above the heading. */
-    scroll-margin-top: var(--duro-spacing-lg);
+    /* A table-of-contents jump lands with room above the heading, and below
+       AppShell's sticky bar when there is one (it sets --duro-app-shell-bar
+       below its collapse point; elsewhere the fallback adds nothing). */
+    scroll-margin-top: calc(var(--duro-spacing-lg) + var(--duro-app-shell-bar, 0px));
   }
   :where(.duro-prose, [data-duro-prose]) :where(h1) {
     font-size: var(--duro-type-scale-font-size9);