@surflane/ui 0.6.0 → 0.7.0

package/README.md

@@ -18,7 +18,7 @@ Import the stylesheets once at the application root. `all.css` brings the tokens
 @import '@surflane/ui/all.css';
 ```
 
-To ship only what you use, import component stylesheets instead, such as `@surflane/ui/button.css` and `@surflane/ui/dialog.css`. Each brings the tokens and the styles of what its component renders. The rules sit in `surflane.*` cascade layers, so your unlayered CSS overrides them. Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`. The [install guide](https://surflane.page/install) walks through Vite, Next.js, React Router and Astro, with or without Tailwind CSS.
+To ship only what you use, import component stylesheets instead, such as `@surflane/ui/button.css` and `@surflane/ui/dialog.css`. Each brings the tokens and the styles of what its component renders. The rules sit in `surflane.*` cascade layers, so your unlayered CSS overrides them. Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`. With AppShell, which fills the window, also give `<body>` no margin and the `--chrome` background. The [install guide](https://surflane.page/install) walks through Vite, Next.js, React Router and Astro, with or without Tailwind CSS.
 
 ```tsx
 import {

package/dist/css/rules/app-shell.css

@@ -3,10 +3,18 @@
   surflane.sizes;
 
 @layer surflane.components {
-  /* Application frame slots: navigation state and product routing remain caller-owned. */
+  /* Application frame slots: navigation state and product routing remain caller-owned.
+     The shell is never rounded: its edge is the window's, or the edge of a container
+     that frames it and clips it. Only the page surface inside it is rounded. */
   .pui-app-shell {
-    --app-shell-radius: var(--radius-sheet);
     --app-shell-inset: var(--space-3);
+    /* --app-shell-radius, if a caller still sets it, keeps deriving the page radius. */
+    --app-shell-page-radius: max(
+      0px,
+      calc(
+        var(--app-shell-radius, var(--radius-sheet)) - var(--app-shell-inset)
+      )
+    );
     --app-shell-sidebar-width: 216px;
     /* The collapsed sidebar's width. Set it on the shell for a narrower rail. */
     --app-shell-rail-width: 64px;
@@ -17,7 +25,6 @@
     min-inline-size: 0;
     padding: var(--app-shell-inset);
     background: var(--chrome);
-    border-radius: var(--app-shell-radius);
   }
   .pui-app-shell[data-sidebar='collapsed'] {
     --app-shell-sidebar-width: var(--app-shell-rail-width);
@@ -43,10 +50,7 @@
     min-block-size: 0;
     padding: var(--space-6);
     background: var(--canvas);
-    border-radius: max(
-      0px,
-      calc(var(--app-shell-radius) - var(--app-shell-inset))
-    );
+    border-radius: var(--app-shell-page-radius);
     overflow-wrap: anywhere;
   }
   .pui-app-shell-footer {
@@ -98,16 +102,24 @@
     clip-path: inset(50%);
     overflow: hidden;
   }
+  /* On a phone the frame costs more room than it gives: the page meets the screen's
+     edges, and only the header keeps its inset. */
   @media (max-width: 760px) {
     .pui-app-shell {
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: auto minmax(0, 1fr);
+      gap: 0;
+      padding: 0;
+    }
+    .pui-app-shell > .pui-app-shell-header {
+      padding: var(--app-shell-inset);
     }
     .pui-app-shell-sidebar {
       display: none;
     }
     .pui-app-shell-content {
       padding: var(--space-4);
+      border-radius: 0;
     }
   }
   @media (max-width: 760px), (pointer: coarse) {
@@ -163,19 +175,14 @@
     margin-inline-start: 0;
     padding: var(--space-6);
     background: var(--canvas);
-    border-radius: max(
-      0px,
-      calc(var(--app-shell-radius) - var(--app-shell-inset))
-    );
+    border-radius: var(--app-shell-page-radius);
   }
-  /* Without the sidebar the page insets evenly. Below a mobile header it starts flush. */
+  /* On a phone the page meets the screen's edges, below the mobile header. */
   @media (max-width: 760px) {
     .pui-app-shell-page {
-      margin: var(--app-shell-inset);
+      margin: 0;
       padding: var(--space-4);
-    }
-    .pui-app-shell:has(> .pui-app-shell-header) .pui-app-shell-page {
-      margin-block-start: 0;
+      border-radius: 0;
     }
   }
   .pui-app-shell[data-layout='workspace'] .pui-app-shell-footer {

package/dist/css/rules/chart.css

@@ -87,6 +87,14 @@
     outline-offset: var(--focus-ring-offset);
     border-radius: var(--radius-sm);
   }
+  /* The browser's SVG styles ring any :focus, so a tap or click would draw its own
+     ring: around the surface, or around the layer a tapped line or point sits in,
+     since Recharts gives each layer tabindex -1. Only the surface is a keyboard
+     target, and it rings for keyboard focus only, like every other control. */
+  .pui-chart-plot .recharts-surface:focus:not(:focus-visible),
+  .pui-chart-plot .recharts-surface :focus {
+    outline: none;
+  }
   .pui-chart-axis-label {
     margin: 0;
     color: var(--ink-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -407,7 +407,7 @@
   "peerDependencies": {
     "@headless-tree/core": "^1.8.0",
     "@headless-tree/react": "^1.8.0",
-    "@surflane/design-tokens": "^0.6.0",
+    "@surflane/design-tokens": "^0.7.0",
     "@tanstack/react-virtual": "^3.14.21",
     "react": "^19.0.0",
     "react-aria-components": "^1.22.1",