@multiplatform.one/components 7.76.0 → 7.77.1

package/src/Card.stories.tsx

@@ -9,7 +9,6 @@ import {
 } from "@multiplatform.one/forms";
 import {
   CompassIcon,
-  FileCodeIcon,
   HouseLineIcon,
   LinkIcon,
   ShieldCheckIcon,
@@ -19,8 +18,10 @@ import { XStack, YStack } from "tamagui";
 import { ActionBar } from "./actions/ActionBar";
 import { ActionButton } from "./actions/StandardAction";
 import { Card } from "./Card";
+import { CopyMenuButton } from "./CopyField/CopyMenuButton";
+import { NotifyHost } from "./feedback";
 import { StatusDot } from "./layouts/StatusDot";
-import { reportCopy } from "./feedback/copy";
+import { StatusGlyphStrip, type StatusGlyph } from "./layouts/StatusGlyphStrip";
 import { Paragraph, SizableText } from "./Text";
 
 const meta: Meta<typeof Card> = {
@@ -131,66 +132,93 @@ export const LongContent: Story = {
 };
 
 // ── Sign-on (LC-169, FZ-7970 r3) ───────────────────────────────
-// The SHC console's Identity › Sign-on cards rebuilt on MPO parts. Clay on
-// the console's: "The shc cards still look like shit. There's no visual
-// hairachy it's all just text that runs together", then on round 3: "Good but
-// use better hierarchy communication with icons less verbose where possible."
-// The three console cards repeated realm master and the same issuer, so the
-// shared facts sit once in the first card and the checks card carries only
-// what differs: each check's status as a dot and one word. Rows are inline
-// (glyph and label leading, value trailing); the URLs stack, mono, cut in the
-// middle, with copy.
+// The SHC console's Identity › Sign-on cards rebuilt on MPO parts, round 4.
+// Clay on round 3: "I wonder if you could even get one fewer row." One card,
+// two rows: the realm as an icon-only fact with its three checks trailing as
+// a glyph cluster (the realm's accessory), then the issuer. Names are the
+// glyphs' accessible names and tooltips. The discovery URL derives from the
+// issuer, so it sits behind the issuer's copy menu.
 
 const issuer = "https://91-98-47-56.sslip.io/auth/realms/master";
 
+function SignOnCard({
+  checks,
+  ...args
+}: { checks: readonly StatusGlyph[] } & Record<string, unknown>) {
+  return (
+    <Card {...args}>
+      <Card.Header status={<StatusDot tone={signOnTone(checks)} />}>Sign-on</Card.Header>
+      <DescriptionList
+        placement="inline"
+        maxWidth="fluid"
+        items={[
+          {
+            icon: <ShieldCheckIcon />,
+            term: "Realm",
+            value: "master",
+            labelHidden: true,
+            accessory: <StatusGlyphStrip items={checks} />,
+          },
+          {
+            icon: <LinkIcon />,
+            term: "Issuer",
+            value: issuer,
+            identifier: true,
+            labelHidden: true,
+            copyAction: (
+              <CopyMenuButton
+                items={[
+                  { label: "Copy issuer", value: issuer },
+                  {
+                    label: "Copy discovery URL",
+                    value: `${issuer}/.well-known/openid-configuration`,
+                  },
+                ]}
+              />
+            ),
+          },
+        ]}
+      />
+    </Card>
+  );
+}
+
+function signOnTone(checks: readonly StatusGlyph[]) {
+  if (checks.some((check) => check.tone === "critical")) return "critical" as const;
+  if (checks.some((check) => check.tone === "warning")) return "warning" as const;
+  return "positive" as const;
+}
+
+const healthyChecks: readonly StatusGlyph[] = [
+  { icon: <StarIcon />, label: "Default realm", tone: "positive" },
+  { icon: <HouseLineIcon />, label: "Realm for this host", tone: "positive" },
+  { icon: <CompassIcon />, label: "Discovery", tone: "positive" },
+];
+
 export const SignOn: Story = {
   name: "Sign-on (LC-169)",
   parameters: { layout: "fullscreen" },
   render: (args) => (
     <YStack padding="$4" gap="$3" backgroundColor="$background" minHeight="100%">
-      <Card {...args}>
-        <Card.Header status={<StatusDot tone="positive">OK</StatusDot>}>Sign-on</Card.Header>
-        <DescriptionList
-          placement="inline"
-          maxWidth="fluid"
-          onCopyResult={(ok) => reportCopy(ok)}
-          items={[
-            { icon: <ShieldCheckIcon />, term: "Realm", value: "master" },
-            { icon: <LinkIcon />, term: "Issuer", value: issuer, identifier: true },
-          ]}
-        />
-      </Card>
-      <Card {...args}>
-        <Card.Header>Checks</Card.Header>
-        <DescriptionList
-          placement="inline"
-          maxWidth="fluid"
-          onCopyResult={(ok) => reportCopy(ok)}
-          items={[
-            {
-              icon: <StarIcon />,
-              term: "Default realm",
-              children: <StatusDot tone="positive">OK</StatusDot>,
-            },
-            {
-              icon: <HouseLineIcon />,
-              term: "Realm for this host",
-              children: <StatusDot tone="positive">OK</StatusDot>,
-            },
-            {
-              icon: <CompassIcon />,
-              term: "Discovery",
-              children: <StatusDot tone="positive">OK</StatusDot>,
-            },
-            {
-              icon: <FileCodeIcon />,
-              term: "Configuration",
-              value: `${issuer}/.well-known/openid-configuration`,
-              identifier: true,
-            },
-          ]}
-        />
-      </Card>
+      <NotifyHost />
+      <SignOnCard {...args} checks={healthyChecks} />
+    </YStack>
+  ),
+};
+
+export const SignOnFailing: Story = {
+  name: "Sign-on, a failing check (LC-169)",
+  parameters: { layout: "fullscreen" },
+  render: (args) => (
+    <YStack padding="$4" gap="$3" backgroundColor="$background" minHeight="100%">
+      <SignOnCard
+        {...args}
+        checks={[
+          healthyChecks[0]!,
+          healthyChecks[1]!,
+          { icon: <CompassIcon />, label: "Discovery", tone: "critical", reason: "Timeout" },
+        ]}
+      />
     </YStack>
   ),
 };

package/src/CopyField/CopyMenuButton.spec.tsx

@@ -0,0 +1,28 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { CopyMenuButton } from "./CopyMenuButton";
+
+describe("CopyMenuButton (LC-169)", () => {
+  it("one copy glyph opens the value and its derived values as menu items", async () => {
+    const result = renderWithProviders(
+      <CopyMenuButton
+        items={[
+          { label: "Copy issuer", value: "https://id.example/realms/master" },
+          {
+            label: "Copy discovery URL",
+            value: "https://id.example/realms/master/.well-known/openid-configuration",
+          },
+        ]}
+      />,
+    );
+    const trigger = result.getByLabelText("Copy");
+    fireEvent.click(trigger);
+    await waitFor(() => expect(result.getByText("Copy discovery URL")).toBeTruthy());
+    expect(result.getByText("Copy issuer")).toBeTruthy();
+  });
+});

package/src/CopyField/CopyMenuButton.tsx

@@ -0,0 +1,50 @@
+/**
+ * CopyMenuButton — an identifier's copy action when there is more than one
+ * thing worth copying (LC-169): the value itself and values derived from it,
+ * such as an issuer and its discovery URL. A derived value lives here rather
+ * than as its own row, so a card says the identifier once.
+ *
+ * The glyph never flips; the confirm is notify() (DG-FB-01 / LC-16).
+ */
+import { Button } from "@multiplatform.one/forms";
+import { CopyIcon } from "@phosphor-icons/react";
+import { DropdownMenu } from "../DropdownMenu";
+import { useCopyFeedback } from "../feedback/copy";
+import { useTranslation } from "../shared/i18n";
+
+export interface CopyMenuItem {
+  key?: string;
+  /** "Copy issuer", "Copy discovery URL". */
+  label: string;
+  value: string;
+}
+
+export interface CopyMenuButtonProps {
+  items: readonly CopyMenuItem[];
+  /** The button's accessible name. Default "Copy". */
+  "aria-label"?: string;
+}
+
+export function CopyMenuButton({ items, "aria-label": ariaLabel }: CopyMenuButtonProps) {
+  const { t } = useTranslation();
+  const { copy } = useCopyFeedback();
+  return (
+    <DropdownMenu
+      placement="bottom-end"
+      items={items.map((item) => ({
+        key: item.key ?? item.label,
+        label: item.label,
+        onSelect: () => void copy(item.value),
+      }))}
+    >
+      <Button
+        nested
+        chromeless
+        circular
+        flexShrink={0}
+        icon={<CopyIcon />}
+        aria-label={ariaLabel ?? t("Copy")}
+      />
+    </DropdownMenu>
+  );
+}

package/src/CopyField/index.tsx

@@ -25,3 +25,5 @@ export function CopyField(props: CopyFieldProps) {
     </YStack>
   );
 }
+
+export { CopyMenuButton, type CopyMenuButtonProps, type CopyMenuItem } from "./CopyMenuButton";

package/src/componentColors.ts

@@ -152,5 +152,6 @@ export const componentColors = {
 export const sectionHeading = {
   fontFamily: "$heading",
   size: isWeb ? "$6" : "$5",
+  fontWeight: "700",
   color: "$color12",
 } as const;

package/src/export-surface.spec.tsx

@@ -113,11 +113,12 @@ describe("semantic colour layer is importable by a stable name", () => {
     expect(pkg.sectionHeading).toBe(sectionHeading);
   });
 
-  it("pins sectionHeading to the prominent step: $heading, primary ink, $6 on web (LC-156)", () => {
+  it("pins sectionHeading to the prominent step: $heading, 700, primary ink, $6 on web (LC-156)", () => {
     // jsdom runs the web branch; native resolves $5 (20 pt over its 17 pt body).
     expect(sectionHeading).toEqual({
       fontFamily: "$heading",
       size: "$6",
+      fontWeight: "700",
       color: "$color12",
     });
   });

package/src/layouts/Sidebar.spec.tsx

@@ -94,6 +94,15 @@ describe("Sidebar nesting", () => {
   });
 });
 
+describe("Sidebar item testID", () => {
+  it("puts an item's testID on its row", () => {
+    const result = renderWithProviders(
+      <Sidebar sections={[{ items: [{ value: "a", label: "Alpha", testID: "alpha-row" }] }]} />,
+    );
+    expect(result.getByTestId("alpha-row").getAttribute("data-sidebar-row")).toBe("true");
+  });
+});
+
 describe("Sidebar footer", () => {
   const sections = [{ items: [{ value: "a", label: "Alpha" }] }];
 

package/src/layouts/StatusGlyphStrip.spec.tsx

@@ -0,0 +1,40 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { StatusGlyphStrip } from "./StatusGlyphStrip";
+
+describe("StatusGlyphStrip (LC-169)", () => {
+  it("each check is a glyph and a dot, named by its label and state, with no printed word when OK", () => {
+    const result = renderWithProviders(
+      <StatusGlyphStrip
+        items={[
+          { icon: <span />, label: "Default realm", tone: "positive" },
+          { icon: <span />, label: "Discovery", tone: "positive" },
+        ]}
+      />,
+    );
+    const glyphs = Array.from(
+      result.container.querySelectorAll("[data-mpo-status-glyph]"),
+    ) as HTMLElement[];
+    expect(glyphs).toHaveLength(2);
+    expect(glyphs[0]!.getAttribute("aria-label")).toBe("Default realm: OK");
+    expect(glyphs[0]!.getAttribute("role")).toBe("img");
+    expect(glyphs[0]!.querySelector("[data-tone='positive']")).not.toBeNull();
+    expect(result.container.textContent).not.toContain("Default realm");
+    expect(result.container.textContent).not.toContain("OK");
+  });
+
+  it("a failing check prints its one-word reason beside its dot", () => {
+    const result = renderWithProviders(
+      <StatusGlyphStrip
+        items={[{ icon: <span />, label: "Discovery", tone: "critical", reason: "Timeout" }]}
+      />,
+    );
+    const glyph = result.container.querySelector("[data-mpo-status-glyph]") as HTMLElement;
+    expect(glyph.getAttribute("aria-label")).toBe("Discovery: Timeout");
+    expect(glyph.textContent).toBe("Timeout");
+  });
+});

package/src/layouts/StatusGlyphStrip.tsx

@@ -0,0 +1,96 @@
+/**
+ * StatusGlyphStrip — a row of checks as glyphs, each with its own status dot
+ * (LC-169 icon-only facts).
+ *
+ * The glyph names the check, so no word is printed for it: the name is the
+ * glyph's accessible name and its tooltip (hover on web, long-press on
+ * device). A check that is not OK prints its one-word reason beside its dot,
+ * because a failure is what the reader needs without asking.
+ */
+import { IconSlot, useGlyphColor, useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { Text, View, XStack, isWeb } from "tamagui";
+import { useTranslation } from "../shared/i18n";
+import { Tooltip } from "../Tooltip";
+import { StatusMark, statusToneInk, type StatusTone } from "./StatusDot";
+
+export interface StatusGlyph {
+  key?: string;
+  /** The glyph that names the check (a star for "Default realm"). */
+  icon: ReactNode;
+  /** The check's name: the accessible name and the tooltip. */
+  label: string;
+  tone: StatusTone;
+  /** One word for a check that is not OK ("Missing", "Timeout"). */
+  reason?: string;
+}
+
+export interface StatusGlyphStripProps {
+  items: readonly StatusGlyph[];
+  testID?: string;
+}
+
+const toneWord: Record<StatusTone, string> = {
+  positive: "OK",
+  warning: "Warning",
+  critical: "Failing",
+  neutral: "Unknown",
+};
+
+function GlyphCheck({ item }: { item: StatusGlyph }) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const ink = useGlyphColor("$color");
+  const state = item.reason ?? t(toneWord[item.tone]);
+  const name = `${item.label}: ${state}`;
+  const showReason = item.tone !== "positive" && item.reason != null;
+  return (
+    <Tooltip content={name}>
+      <XStack
+        data-mpo-status-glyph=""
+        data-tone={item.tone}
+        role="img"
+        aria-label={name}
+        alignItems="center"
+        flexShrink={0}
+        {...knobProps.gapSm}
+        {...(isWeb ? ({ title: name } as Record<string, unknown>) : { accessible: true })}
+      >
+        <View
+          aria-hidden
+          {...(isWeb && ink ? ({ style: { color: ink } } as Record<string, unknown>) : {})}
+        >
+          <IconSlot icon={item.icon} color={ink} size={20} />
+        </View>
+        <StatusMark tone={item.tone} />
+        {showReason ? (
+          <Text
+            {...knobProps.textRole.meta}
+            color={statusToneInk[item.tone] as never}
+            numberOfLines={1}
+          >
+            {item.reason}
+          </Text>
+        ) : null}
+      </XStack>
+    </Tooltip>
+  );
+}
+
+export function StatusGlyphStrip({ items, testID }: StatusGlyphStripProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <XStack
+      data-mpo-status-glyph-strip=""
+      data-testid={testID}
+      alignItems="center"
+      flexWrap="wrap"
+      minWidth={0}
+      {...knobProps.gapLg}
+    >
+      {items.map((item) => (
+        <GlyphCheck key={item.key ?? item.label} item={item} />
+      ))}
+    </XStack>
+  );
+}

package/src/layouts/index.tsx

@@ -40,6 +40,7 @@ export {
   type StatusDotProps,
   type StatusTone,
 } from "./StatusDot";
+export { StatusGlyphStrip, type StatusGlyph, type StatusGlyphStripProps } from "./StatusGlyphStrip";
 export {
   AsyncBoundary,
   AsyncSkeleton,

package/src/layouts/sectionHeadingWeight.native-press.spec.tsx

@@ -0,0 +1,68 @@
+import { createDefaultThemeConfig, Preset } from "@multiplatform.one/theme";
+import { cleanup, render, screen } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider, isWeb } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { EmptyState } from "./EmptyState";
+import { IdentityPlate } from "./IdentityPlate";
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  isWeb: false,
+  isNative: true,
+}));
+
+const config = createDefaultThemeConfig();
+
+type FaceName = string | { val?: string } | undefined;
+type Face = Record<string, Record<string, FaceName> | undefined>;
+
+const headingFace: Face =
+  (config.tamagui as unknown as { fonts: Record<string, { face?: Face } | undefined> }).fonts
+    .heading?.face ?? {};
+
+afterEach(cleanup);
+
+function resolvedWeight(el: HTMLElement): string {
+  const family = el.style.fontFamily.replace(/["']/g, "").trim();
+  for (const [weight, styles] of Object.entries(headingFace)) {
+    const name = styles?.normal;
+    if ((typeof name === "string" ? name : name?.val) === family) return weight;
+  }
+  return el.style.fontWeight;
+}
+
+function weightOf(node: ReactElement, text: string): string {
+  render(
+    <TamaguiProvider config={config.tamagui} defaultTheme="light" disableInjectCSS>
+      {node}
+    </TamaguiProvider>,
+  );
+  return resolvedWeight(screen.getByText(text));
+}
+
+const cases: [string, () => ReactElement, string][] = [
+  [
+    "IdentityPlate's title",
+    () => <IdentityPlate title="affine" status="Running" statusTone="positive" />,
+    "affine",
+  ],
+  ["EmptyState's title", () => <EmptyState title="Nothing is running" />, "Nothing is running"],
+];
+
+describe("section heading weight on native (LC-156, FZ-8633)", () => {
+  it("runs tamagui's native build", async () => {
+    expect(isWeb).toBe(false);
+    expect((await import("@multiplatform.one/platform")).isWeb).toBe(false);
+  });
+
+  it.each(cases)("%s draws at the heading weight, as on web", (_, node, text) => {
+    expect(weightOf(node(), text)).toBe("700");
+  });
+
+  it.each(cases)("%s keeps the heading weight on a category heading font", (_, node, text) => {
+    expect(weightOf(<Preset overrides={{ headingFont: "serif" }}>{node()}</Preset>, text)).toBe(
+      "700",
+    );
+  });
+});

package/src/layouts/sectionHeadingWeight.spec.tsx

@@ -0,0 +1,48 @@
+import { createDefaultThemeConfig, Preset } from "@multiplatform.one/theme";
+import { cleanup, render, screen } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { EmptyState } from "./EmptyState";
+import { IdentityPlate } from "./IdentityPlate";
+
+const config = createDefaultThemeConfig();
+
+afterEach(cleanup);
+
+function computedWeight(el: HTMLElement): string {
+  const style = getComputedStyle(el);
+  const weight = style.fontWeight;
+  const variable = weight.match(/^var\((--[^,)]+)/)?.[1];
+  return variable ? style.getPropertyValue(variable).trim() : weight;
+}
+
+function weightOf(node: ReactElement, text: string): string {
+  render(
+    <TamaguiProvider config={config.tamagui} defaultTheme="light">
+      {node}
+    </TamaguiProvider>,
+  );
+  return computedWeight(screen.getByText(text));
+}
+
+const cases: [string, () => ReactElement, string][] = [
+  [
+    "IdentityPlate's title",
+    () => <IdentityPlate title="affine" status="Running" statusTone="positive" />,
+    "affine",
+  ],
+  ["EmptyState's title", () => <EmptyState title="Nothing is running" />, "Nothing is running"],
+];
+
+describe("section heading weight on web (LC-156, FZ-8633)", () => {
+  it.each(cases)("%s draws at the heading weight", (_, node, text) => {
+    expect(weightOf(node(), text)).toBe("700");
+  });
+
+  it.each(cases)("%s keeps the heading weight on a category heading font", (_, node, text) => {
+    expect(weightOf(<Preset overrides={{ headingFont: "serif" }}>{node()}</Preset>, text)).toBe(
+      "700",
+    );
+  });
+});

package/src/layouts/sidebar.tsx

@@ -51,6 +51,7 @@ export interface SidebarItem {
    * indents by one icon column per level, with no extra edge or fill.
    */
   depth?: number;
+  testID?: string;
 }
 
 export interface SidebarProps {
@@ -179,7 +180,7 @@ export function Sidebar({
                   </YStack>
                 ) : null}
 
-                <YStack width="100%">
+                <YStack width="100%" data-sidebar-group="">
                   {section.items.map((item, itemIdx, items) => {
                     const position = getGroupPosition(itemIdx, items.length);
                     const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
@@ -209,6 +210,7 @@ export function Sidebar({
                         <XStack
                           data-group-position={position}
                           data-sidebar-row="true"
+                          testID={item.testID}
                           data-depth={depth > 0 ? depth : undefined}
                           data-active={item.active ? true : undefined}
                           aria-current={item.active ? "page" : undefined}

package/types/CopyField/CopyMenuButton.d.ts

@@ -0,0 +1,13 @@
+export interface CopyMenuItem {
+    key?: string;
+    /** "Copy issuer", "Copy discovery URL". */
+    label: string;
+    value: string;
+}
+export interface CopyMenuButtonProps {
+    items: readonly CopyMenuItem[];
+    /** The button's accessible name. Default "Copy". */
+    "aria-label"?: string;
+}
+export declare function CopyMenuButton({ items, "aria-label": ariaLabel }: CopyMenuButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CopyMenuButton.d.ts.map

package/types/CopyField/CopyMenuButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyMenuButton.d.ts","sourceRoot":"","sources":["../../src/CopyField/CopyMenuButton.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAsBrF"}

package/types/CopyField/index.d.ts

@@ -12,4 +12,5 @@
 import { type InputProps } from "@multiplatform.one/forms";
 export type CopyFieldProps = Omit<InputProps, "copy" | "onCopyResult" | "secureTextEntry">;
 export declare function CopyField(props: CopyFieldProps): import("react/jsx-runtime").JSX.Element;
+export { CopyMenuButton, type CopyMenuButtonProps, type CopyMenuItem } from "./CopyMenuButton";
 //# sourceMappingURL=index.d.ts.map

package/types/CopyField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CopyField/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKlE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,cAAc,GAAG,iBAAiB,CAAC,CAAC;AAE3F,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAQ9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CopyField/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKlE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,cAAc,GAAG,iBAAiB,CAAC,CAAC;AAE3F,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAQ9C;AAED,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/types/componentColors.d.ts

@@ -128,6 +128,7 @@ export declare const componentColors: {
 export declare const sectionHeading: {
     readonly fontFamily: "$heading";
     readonly size: "$5" | "$6";
+    readonly fontWeight: "700";
     readonly color: "$color12";
 };
 //# sourceMappingURL=componentColors.d.ts.map

package/types/componentColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentColors.d.ts","sourceRoot":"","sources":["../src/componentColors.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,eAAO,MAAM,eAAe;IAC1B;;;;;;;;OAQG;;;;;IAMH,yEAAyE;;;;;;;IAQzE;;;;;OAKG;;;;;;;;IASH,yBAAyB;;;;;IAczB,yBAAyB;;;;;;;;IASzB;;;;;;;;;;OAUG;;;;;;;;IASH,4BAA4B;;;;;;IAO5B;;2EAEuE;;;;;;;;IASvE;;;+EAG2E;;;;;;IAO3E;;;OAGG;;;;IAKH,+BAA+B;;IAG/B,4BAA4B;;IAG5B;;;;OAIG;;;;;CAKK,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC"}
+{"version":3,"file":"componentColors.d.ts","sourceRoot":"","sources":["../src/componentColors.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,eAAO,MAAM,eAAe;IAC1B;;;;;;;;OAQG;;;;;IAMH,yEAAyE;;;;;;;IAQzE;;;;;OAKG;;;;;;;;IASH,yBAAyB;;;;;IAczB,yBAAyB;;;;;;;;IASzB;;;;;;;;;;OAUG;;;;;;;;IASH,4BAA4B;;;;;;IAO5B;;2EAEuE;;;;;;;;IASvE;;;+EAG2E;;;;;;IAO3E;;;OAGG;;;;IAKH,+BAA+B;;IAG/B,4BAA4B;;IAG5B;;;;OAIG;;;;;CAKK,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC"}

package/types/layouts/StatusGlyphStrip.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { type StatusTone } from "./StatusDot";
+export interface StatusGlyph {
+    key?: string;
+    /** The glyph that names the check (a star for "Default realm"). */
+    icon: ReactNode;
+    /** The check's name: the accessible name and the tooltip. */
+    label: string;
+    tone: StatusTone;
+    /** One word for a check that is not OK ("Missing", "Timeout"). */
+    reason?: string;
+}
+export interface StatusGlyphStripProps {
+    items: readonly StatusGlyph[];
+    testID?: string;
+}
+export declare function StatusGlyphStrip({ items, testID }: StatusGlyphStripProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusGlyphStrip.d.ts.map

package/types/layouts/StatusGlyphStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusGlyphStrip.d.ts","sourceRoot":"","sources":["../../src/layouts/StatusGlyphStrip.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAA6B,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzE,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,IAAI,EAAE,SAAS,CAAC;IAChB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiDD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAgBxE"}

package/types/layouts/index.d.ts

@@ -19,5 +19,6 @@ export * from "./PaneScaffold";
 export { EmptyState, type EmptyStateProps } from "./EmptyState";
 export { IdentityPlate, type IdentityPlateFact, type IdentityPlateProps, type IdentityPlateTone, } from "./IdentityPlate";
 export { StatusDot, StatusMark, statusToneInk, type StatusDotProps, type StatusTone, } from "./StatusDot";
+export { StatusGlyphStrip, type StatusGlyph, type StatusGlyphStripProps } from "./StatusGlyphStrip";
 export { AsyncBoundary, AsyncSkeleton, asyncLoadDelayMs, resolveAsyncStatus, useAsyncBoundary, useAsyncCount, __resetAsyncDevWarnSeen, type AsyncBoundaryProps, type AsyncBoundaryLayout, type AsyncBoundaryContextValue, type AsyncStatus, } from "./AsyncBoundary";
 //# sourceMappingURL=index.d.ts.map