@multiplatform.one/components 7.81.1 → 7.82.0

package/src/layouts/EmptyState.tsx

@@ -10,8 +10,7 @@
  * not a second description. `intent="error"` is sober failure chrome
  * (DG-ST-01) — never for a successful empty dataset.
  */
-import { Button, Spinner } from "@multiplatform.one/forms";
-import { CopyIcon } from "@phosphor-icons/react";
+import { Spinner } from "@multiplatform.one/forms";
 import {
   IconSlot,
   Intent,
@@ -26,7 +25,6 @@ import {
   H2,
   Paragraph,
   type SizeTokens,
-  Text,
   View,
   XStack,
   YStack,
@@ -34,8 +32,7 @@ import {
   type YStackProps,
 } from "tamagui";
 import { componentColors, sectionHeading } from "../componentColors";
-import { NotifyRegion } from "../feedback/NotifyHost";
-import { useCopyFeedback } from "../feedback/copy";
+import { CodeBlock } from "../code/CodeBlock";
 
 export interface EmptyStateProps extends Omit<YStackProps, "size"> {
   /** One short title: what is true now ("No Pokémon yet"), not an instruction. */
@@ -102,43 +99,13 @@ function StateSymbol({
 }
 
 /**
- * The refusal gate's one command: mono, one line, with copy. The confirm is
- * notify() and the glyph never flips (DG-FB-01 / LC-16).
+ * The refusal gate's one command, as a code block with its copy inside
+ * (LC-267).
  */
 function CommandLine({ command }: { command: string }) {
-  const { knobProps } = useResolvedKnobs();
-  const { region, copy } = useCopyFeedback();
   return (
-    <YStack data-empty-command="" alignItems="center" {...readingWidthStyle()}>
-      <XStack
-        alignItems="center"
-        maxWidth="100%"
-        backgroundColor="$color3"
-        paddingLeft="$3"
-        paddingRight="$1"
-        paddingVertical="$1"
-        {...knobProps.containerRadius}
-        {...knobProps.gapSm}
-      >
-        <Text
-          {...knobProps.body}
-          fontFamily="$mono"
-          color={componentColors.text.primary}
-          numberOfLines={1}
-          flexShrink={1}
-        >
-          {command}
-        </Text>
-        <Button
-          nested
-          chromeless
-          flexShrink={0}
-          icon={<CopyIcon />}
-          aria-label="Copy to clipboard"
-          onPress={() => void copy(command)}
-        />
-      </XStack>
-      <NotifyRegion scope="field" region={region} size="$3" />
+    <YStack data-empty-command="" alignSelf="center" {...readingWidthStyle()}>
+      <CodeBlock language="text">{command}</CodeBlock>
     </YStack>
   );
 }

package/src/layouts/PageHeader.stories.tsx

@@ -1,27 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 // Catalog Button (G-15 story honesty / LC-18): raw tamagui buttons ignored
 // the knobs and pinned a non-house radius (UX-P06).
-import { Button, IconButton, Progress } from "@multiplatform.one/forms";
+import { Button, IconButton } from "@multiplatform.one/forms";
 import {
-  CopyIcon,
-  DotsThreeIcon,
+  CpuIcon,
+  DatabaseIcon,
   MagnifyingGlassIcon,
+  MemoryIcon,
   PlusIcon,
   SignOutIcon,
-  TrashIcon,
   UserIcon,
 } from "@phosphor-icons/react";
 import { Preset } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
-import { XStack, YStack } from "tamagui";
+import { Circle, Theme, View, XStack, YStack } from "tamagui";
 import { Avatar } from "../Avatar";
 import { Card } from "../Card";
+import { themed } from "../icons/themed";
+import { Chip } from "../Chip";
+import { CodeBlock } from "../code/CodeBlock";
 import { DropdownMenu } from "../DropdownMenu";
 import { Popover } from "../Popover";
 import { SchemeToggle } from "../SchemeToggle";
 import { PopoverContent } from "../surfaces";
 import { Tabs } from "../Tabs";
-import { PageBackButton, PageHeader, Screen, ScreenToolbar } from "./page";
+import { PageBackButton, PageHeader, PageSection, Screen, ScreenToolbar } from "./page";
 import { Paragraph, SizableText } from "../Text";
 
 const meta: Meta<typeof PageHeader> = {
@@ -174,23 +177,237 @@ export const LongTitleNarrow: Story = {
   ),
 };
 
-// FZ-8020 LC-176: the SHC console Nodes screen with every icon-button
-// context, drawn by the platform with no use-site paint. Its bar (back,
-// search, add) takes the accent, on Liquid Glass on iOS 26; content actions
-// (the inline copy, the card's overflow) are bold glyphs in the text colour;
-// the delete keeps its intent ink; the tile's favourite rides the media plate.
-function Meter({ label, value, detail }: { label: string; value: number; detail: string }) {
+// FZ-8442: the SHC console's Nodes screen as it is now (shc
+// features/console/src/manage/app/NodesPane.tsx and ManageApp.tsx's
+// NodesPlace): sites as sections, each node a front panel whose whole face
+// links to its detail, where the verbs live. The "+" opens one panel over
+// itself holding the join command as a code block (LC-112, LC-267). The bar
+// keeps every LC-176 icon-button context.
+const faceplate = {
+  ear: 18,
+  screw: 9,
+  slot: 1.5,
+  led: 14,
+  ledGap: 2,
+  digitWidth: 8,
+  digitHeight: 14,
+  segment: 2,
+  digitGap: 2,
+  window: 6,
+} as const;
+const LED_COUNT = 20;
+const bayGlyph = { cpu: themed(CpuIcon), memory: themed(MemoryIcon), disk: themed(DatabaseIcon) };
+
+function Screw({ angle }: { angle: number }) {
+  const inner = faceplate.screw - 2;
+  return (
+    <Circle
+      size={faceplate.screw}
+      borderWidth={1}
+      borderColor="$color9"
+      backgroundColor="$color6"
+      position="relative"
+    >
+      <View
+        position="absolute"
+        top={(inner - faceplate.slot) / 2}
+        left={0}
+        width={inner}
+        height={faceplate.slot}
+        backgroundColor="$color11"
+        rotate={`${angle}deg`}
+      />
+    </Circle>
+  );
+}
+
+function RackEar({ side, angles }: { side: "left" | "right"; angles: [number, number] }) {
+  return (
+    <YStack
+      width={faceplate.ear}
+      alignSelf="stretch"
+      alignItems="center"
+      justifyContent="space-between"
+      paddingVertical="$3"
+      backgroundColor="$color4"
+      borderColor="$color6"
+      borderLeftWidth={side === "right" ? 1 : 0}
+      borderRightWidth={side === "left" ? 1 : 0}
+      aria-hidden
+    >
+      <Screw angle={angles[0]} />
+      <Screw angle={angles[1]} />
+    </YStack>
+  );
+}
+
+const segmentsOf: Record<string, string> = {
+  "0": "abcdef",
+  "1": "bc",
+  "2": "abdeg",
+  "3": "abcdg",
+  "4": "bcfg",
+  "5": "acdfg",
+  "6": "acdefg",
+  "7": "abc",
+  "8": "abcdefg",
+  "9": "abcdfg",
+};
+
+function segmentBox(name: string, width: number) {
+  const { digitHeight: h, segment: t } = faceplate;
+  const middle = (h - t) / 2;
+  const stroke = (h + t) / 2;
+  const boxes: Record<string, { top: number; left: number; width: number; height: number }> = {
+    a: { top: 0, left: 0, width, height: t },
+    b: { top: 0, left: width - t, width: t, height: stroke },
+    c: { top: middle, left: width - t, width: t, height: stroke },
+    d: { top: h - t, left: 0, width, height: t },
+    e: { top: middle, left: 0, width: t, height: stroke },
+    f: { top: 0, left: 0, width: t, height: stroke },
+    g: { top: middle, left: 0, width, height: t },
+  };
+  return boxes[name]!;
+}
+
+function AddressDisplay({ address }: { address: string }) {
+  return (
+    <Theme name="dark">
+      <XStack
+        role="img"
+        aria-label={address}
+        alignItems="center"
+        gap={faceplate.digitGap}
+        backgroundColor="$color1"
+        borderColor="$color6"
+        borderWidth={1}
+        borderRadius="$2"
+        padding={faceplate.window}
+      >
+        {[...address].map((char, index) => {
+          if (char === "." || char === ":")
+            return (
+              <YStack
+                key={index}
+                width={faceplate.segment}
+                height={faceplate.digitHeight}
+                justifyContent={char === "." ? "flex-end" : "space-evenly"}
+              >
+                <View
+                  width={faceplate.segment}
+                  height={faceplate.segment}
+                  backgroundColor="$blue10"
+                />
+                {char === ":" ? (
+                  <View
+                    width={faceplate.segment}
+                    height={faceplate.segment}
+                    backgroundColor="$blue10"
+                  />
+                ) : null}
+              </YStack>
+            );
+          const width = char === "1" ? faceplate.segment : faceplate.digitWidth;
+          return (
+            <View key={index} width={width} height={faceplate.digitHeight} position="relative">
+              {[...(segmentsOf[char] ?? "")].map((name) => (
+                <View
+                  key={name}
+                  position="absolute"
+                  {...segmentBox(name, width)}
+                  backgroundColor="$blue10"
+                />
+              ))}
+            </View>
+          );
+        })}
+      </XStack>
+    </Theme>
+  );
+}
+
+const ledInk = { lit: "$color11", warning: "$orange9", critical: "$red9" } as const;
+const lampAt = (index: number) =>
+  index >= LED_COUNT * 0.9 ? "critical" : index >= LED_COUNT * 0.7 ? "warning" : "lit";
+
+function LedBar({
+  bay,
+  label,
+  percent,
+  amount,
+}: {
+  bay: keyof typeof bayGlyph;
+  label: string;
+  percent: number;
+  amount: string;
+}) {
+  const lit = Math.round((percent / 100) * LED_COUNT);
+  const Glyph = bayGlyph[bay];
   return (
-    <YStack gap="$2">
-      <XStack justifyContent="space-between">
-        <SizableText color="$color11">{label}</SizableText>
-        <SizableText>{detail}</SizableText>
+    <YStack gap="$1.5" role="meter" aria-label={label} aria-valuenow={percent}>
+      <XStack alignItems="center" gap="$2">
+        <Glyph size={16} weight="bold" color="$color11" />
+        <SizableText flex={1} size="$2" fontVariant={["tabular-nums"]} numberOfLines={1}>
+          {amount}
+        </SizableText>
+        <SizableText size="$2" fontWeight="700" fontVariant={["tabular-nums"]}>
+          {`${percent}%`}
+        </SizableText>
+      </XStack>
+      <XStack gap={faceplate.ledGap} aria-hidden>
+        {Array.from({ length: LED_COUNT }, (_, index) => (
+          <View
+            key={index}
+            flex={1}
+            height={faceplate.led}
+            borderRadius={1}
+            backgroundColor={ledInk[lampAt(index)]}
+            opacity={index < lit ? 1 : 0.18}
+          />
+        ))}
       </XStack>
-      <Progress value={value} />
     </YStack>
   );
 }
 
+function NodeFaceplate() {
+  return (
+    <Card padding="$0" overflow="hidden" flexDirection="row" alignItems="stretch">
+      <RackEar side="left" angles={[38, 121]} />
+      <YStack flex={1} gap="$3" padding="$3">
+        <XStack alignItems="center" justifyContent="space-between" gap="$2.5">
+          <XStack gap="$1.5" alignItems="center" aria-hidden>
+            <Circle size="$0.75" backgroundColor="$green9" />
+            <Circle size="$0.5" backgroundColor="$green9" />
+          </XStack>
+          <AddressDisplay address="10.64.96.1:4003" />
+        </XStack>
+        <XStack alignItems="center" gap="$2.5">
+          <SizableText size="$4" fontWeight="700" numberOfLines={1}>
+            incus01
+          </SizableText>
+          <SizableText size="$1" fontWeight="600">
+            incus
+          </SizableText>
+        </XStack>
+        <LedBar bay="cpu" label="CPU" percent={12} amount="2.83/24 cores" />
+        <LedBar bay="memory" label="Memory" percent={41} amount="25.3/61.9 GiB" />
+        <LedBar bay="disk" label="Disk" percent={74} amount="352/476 GiB" />
+        <XStack gap="$1.5" flexWrap="wrap">
+          <Chip size="$2">AMD Ryzen 9 7900</Chip>
+          <Chip size="$2">x86_64</Chip>
+        </XStack>
+        <Avatar.Group max={7} size={36} circular={false}>
+          {["pokemon", "keycloak", "nextcloud", "fizzy", "gitlab", "openobserve"].map((app) => (
+            <Avatar key={app} name={app} />
+          ))}
+        </Avatar.Group>
+      </YStack>
+      <RackEar side="right" angles={[92, 7]} />
+    </Card>
+  );
+}
+
 // LC-112 (FZ-8665 Round 45): each icon trigger's panel covers its button with
 // no X, and a press outside closes it. The join panel's title sits on the
 // panel's padding.
@@ -209,7 +426,7 @@ function AddNode() {
           </Popover.Header>
           <YStack paddingHorizontal="$4" gap="$3">
             <Paragraph color="$color11">Run this on the new machine.</Paragraph>
-            <SizableText fontFamily="$mono">shc node join</SizableText>
+            <CodeBlock language="text">shc node join</CodeBlock>
           </YStack>
         </YStack>
       </PopoverContent>
@@ -258,26 +475,9 @@ function NodesScreen() {
       }
     >
       <PageHeader title="Nodes" divider={false} actions={<AddNode />} />
-      <XStack alignItems="center">
-        <SizableText fontFamily="$mono" color="$color11">
-          shc node join
-        </SizableText>
-        <IconButton inline icon={CopyIcon} aria-label="Copy" />
-      </XStack>
-      <Card gap="$4">
-        <XStack justifyContent="space-between" alignItems="center">
-          <SizableText size="$6" fontWeight="600">
-            incus01
-          </SizableText>
-          <XStack alignItems="center">
-            <IconButton icon={DotsThreeIcon} aria-label="More for incus01" />
-            <IconButton error icon={TrashIcon} aria-label="Remove incus01" />
-          </XStack>
-        </XStack>
-        <SizableText color="$color11">10.64.96.1:4003</SizableText>
-        <Meter label="CPU" value={12} detail="2.83/24 cores  12%" />
-        <Meter label="Mem" value={41} detail="25.3/61.9 GiB  41%" />
-      </Card>
+      <PageSection title="Unplaced" description="1 node" headingLevel={3}>
+        <NodeFaceplate />
+      </PageSection>
     </Screen>
   );
 }

package/src/layouts/PageTemplates.tsx

@@ -315,3 +315,93 @@ export function SettingsPageLayout({
     </Screen>
   );
 }
+
+// ── DensePageLayout ────────────────────────────────────────────────────────
+
+export interface DensePageLayoutProps
+  extends Omit<ScreenProps, "scroll" | "bleed" | "noPadding">, TemplateHeaderProps {
+  /** The live state beside the title (a `StatusDot`). */
+  status?: ReactNode;
+  /**
+   * The column the dense region keeps at regular width: `"wide"` (a log or
+   * terminal, the page column) or `"readable"` (a chart, the `expanded`
+   * measure, so a dozen bars never stretch across a desktop).
+   */
+  measure?: "wide" | "readable";
+  /** Names the dense region (`data-dense-surface`), e.g. "log" or "chart". */
+  kind?: string;
+  /**
+   * Keep the page gutter inside the region on a phone. A chart takes it so its
+   * axis labels sit on the page line; a `LogView` pads its own text.
+   */
+  gutter?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * A page whose content is one dense surface: a log, a terminal or a chart
+ * (LC-215). The page keeps its head (title, live status, icon actions) and
+ * the surface takes the rest of the height. On a phone the surface bleeds to
+ * both screen edges; from `medium` up it stays in the page column, rounded
+ * as the page's one surface, at the measure its content reads at.
+ */
+export function DensePageLayout({
+  title,
+  subtitle,
+  status,
+  actions,
+  header,
+  nav,
+  measure = "wide",
+  kind,
+  gutter = false,
+  maxWidth,
+  children,
+  ...rest
+}: DensePageLayoutProps) {
+  const compact = useLayoutSizeClass() === "compact";
+  const { knobProps } = useResolvedKnobs({ component: "Screen" });
+  const head =
+    header !== undefined ? (
+      header
+    ) : title || subtitle || actions || nav || status ? (
+      <PageHeader title={title} subtitle={subtitle} status={status} actions={actions} nav={nav} />
+    ) : null;
+  const region = (
+    <YStack
+      flex={1}
+      minHeight={0}
+      minWidth={0}
+      data-dense-surface={kind}
+      {...(compact
+        ? gutter
+          ? { paddingHorizontal: knobProps.panelPadding.padding as "$4" }
+          : null
+        : { ...knobProps.containerRadius, overflow: "hidden" })}
+    >
+      {children}
+    </YStack>
+  );
+  if (compact)
+    return (
+      <Screen data-canonical="dense-page" scroll={false} bleed noPadding {...rest}>
+        {head ? (
+          <YStack {...knobProps.panelPadding} paddingBottom={0}>
+            {head}
+          </YStack>
+        ) : null}
+        {region}
+      </Screen>
+    );
+  return (
+    <Screen
+      data-canonical="dense-page"
+      scroll={false}
+      maxWidth={maxWidth ?? (measure === "readable" ? layoutBreakpoints.expanded : undefined)}
+      {...rest}
+    >
+      {head}
+      {region}
+    </Screen>
+  );
+}

package/src/layouts/barTitleSpan.spec.ts

@@ -0,0 +1,35 @@
+/**
+ * LC-157 (FZ-8442): the bar's inline title is centred on the bar while it
+ * fits clear of both side groups, and slides into the span between them when
+ * the wider group would touch it (Clay's "Inbox" beside four trailing glyphs).
+ */
+import { describe, expect, it } from "vitest";
+import { BAR_TITLE_GAP, barTitleSpan, sideExtents } from "./barTitleSpan";
+
+describe("bar title span (LC-157, FZ-8442)", () => {
+  it("centres on the bar when the title fits clear of both groups", () => {
+    const span = barTitleSpan({ row: 358, leftEnd: 44, rightStart: 314, title: 60 });
+    expect(span.left).toBe(span.right);
+    expect(span.left).toBe(44 + BAR_TITLE_GAP);
+  });
+
+  it("slides between the groups when centring would hide it", () => {
+    const span = barTitleSpan({ row: 358, leftEnd: 44, rightStart: 130, title: 45 });
+    expect(span).toEqual({ left: 44 + BAR_TITLE_GAP, right: 358 - 130 + BAR_TITLE_GAP });
+    expect(358 - span.left - span.right).toBeGreaterThanOrEqual(45);
+  });
+
+  it("reads the groups by side, so a right-to-left bar mirrors", () => {
+    const ltr = sideExtents(358, { x: 16, width: 44 }, { x: 250, width: 92 });
+    const rtl = sideExtents(358, { x: 298, width: 44 }, { x: 16, width: 92 });
+    expect(ltr).toEqual({ leftEnd: 60, rightStart: 250 });
+    expect(rtl).toEqual({ leftEnd: 108, rightStart: 298 });
+  });
+
+  it("an empty group takes no room", () => {
+    expect(sideExtents(358, { x: 16, width: 44 }, { x: 342, width: 0 })).toEqual({
+      leftEnd: 60,
+      rightStart: 0,
+    });
+  });
+});

package/src/layouts/barTitleSpan.ts

@@ -0,0 +1,44 @@
+/** The space kept between the bar's inline title and either side group. */
+export const BAR_TITLE_GAP = 8;
+
+export interface BarTitleBox {
+  /** The bar row's width. */
+  row: number;
+  /** Where the group on the left ends, from the row's left edge; 0 when empty. */
+  leftEnd: number;
+  /** Where the group on the right starts, from the row's left edge; 0 when empty. */
+  rightStart: number;
+  /** The title's natural one-line width. */
+  title: number;
+}
+
+/**
+ * Where the bar's inline title sits. Like UIKit it is centred on the bar
+ * while it fits clear of both side groups; when the wider group would touch
+ * it, it centres in the span left between the groups instead of vanishing.
+ */
+export function barTitleSpan(box: BarTitleBox): { left: number; right: number } {
+  const left = box.leftEnd + BAR_TITLE_GAP;
+  const right = (box.rightStart ? box.row - box.rightStart : 0) + BAR_TITLE_GAP;
+  const centred = Math.max(left, right);
+  return box.row - 2 * centred >= box.title ? { left: centred, right: centred } : { left, right };
+}
+
+type Extent = { x: number; width: number };
+
+/** The bar's two side groups as physical left and right extents (RTL-safe). */
+export function sideExtents(
+  row: number,
+  a: Extent,
+  b: Extent,
+): Pick<BarTitleBox, "leftEnd" | "rightStart"> {
+  const groups = [a, b].filter((group) => group.width > 0);
+  let leftEnd = 0;
+  let rightStart = 0;
+  for (const group of groups) {
+    if (group.x + group.width / 2 < row / 2)
+      leftEnd = Math.max(leftEnd, Math.ceil(group.x + group.width));
+    else rightStart = rightStart ? Math.min(rightStart, Math.floor(group.x)) : Math.floor(group.x);
+  }
+  return { leftEnd, rightStart };
+}