@multiplatform.one/components 6.1.0 → 6.4.0

package/src/code/CodeInline.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Anchor, H2, Paragraph, YStack } from "tamagui";
+import { CodeInline } from "./Code/index";
+
+const meta: Meta<typeof CodeInline> = {
+  title: "Components/CodeInline",
+  component: CodeInline,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Inline code chip: mono font, tinted background, percentage-based padding sized relative to surrounding text.",
+      },
+    },
+  },
+  argTypes: {
+    children: { control: "text" },
+  },
+  args: {
+    children: "npm install",
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof CodeInline>;
+
+export const Default: Story = {
+  name: "Main",
+  render: (args) => <CodeInline>{args.children}</CodeInline>,
+};
+
+export const InProse: Story = {
+  render: (args) => (
+    <YStack gap="$4" maxWidth={520}>
+      <Paragraph>
+        Run <CodeInline>{args.children}</CodeInline> in your terminal, then edit{" "}
+        <CodeInline>package.json</CodeInline> to add the script.
+      </Paragraph>
+      <H2>
+        Heading with <CodeInline>inline code</CodeInline>
+      </H2>
+      <Paragraph>
+        Linked:{" "}
+        <Anchor href="https://example.com">
+          docs for <CodeInline>useResolvedKnobs</CodeInline>
+        </Anchor>
+      </Paragraph>
+    </YStack>
+  ),
+};
+
+export const EdgeTokens: Story = {
+  render: () => (
+    <YStack gap="$3" maxWidth={420} borderWidth={1} borderColor="$color6" borderStyle="dashed">
+      <Paragraph>
+        Spaces: <CodeInline>{"  padded  "}</CodeInline> end.
+      </Paragraph>
+      <Paragraph>
+        Backticks: <CodeInline>{"`quoted`"}</CodeInline> end.
+      </Paragraph>
+      <Paragraph>
+        Long token:{" "}
+        <CodeInline>
+          averyveryverylongunbrokentokenthatnormallywouldwanttowrapacrosslines_and_keeps_going
+        </CodeInline>{" "}
+        end.
+      </Paragraph>
+      <Paragraph>
+        Empty: <CodeInline>{""}</CodeInline> end.
+      </Paragraph>
+    </YStack>
+  ),
+};

package/src/code/HighlightedCode/HighlightedCode.stories.tsx

@@ -1,9 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { YStack } from "tamagui";
+import type { ComponentProps } from "react";
+import { YStack, useThemeName } from "tamagui";
 import { HighlightedCode } from "./index";
 import type { HighlightLine } from "../Highlighter";
 
-const sampleTokens: HighlightLine[] = [
+// one-dark-ish palette for dark scheme, github-light-ish (WCAG AA on light
+// surfaces) palette for light scheme
+const darkSampleTokens: HighlightLine[] = [
   [
     { content: "const ", color: "#c678dd" },
     { content: "hello", color: "#e06c75" },
@@ -21,6 +24,34 @@ const sampleTokens: HighlightLine[] = [
   ],
 ];
 
+const lightSampleTokens: HighlightLine[] = [
+  [
+    { content: "const ", color: "#cf222e" },
+    { content: "hello", color: "#8250df" },
+    { content: " = ", color: "#0550ae" },
+    { content: "'world'", color: "#0a3069" },
+    { content: ";", color: "#57606a" },
+  ],
+  [
+    { content: "console", color: "#953800" },
+    { content: ".", color: "#57606a" },
+    { content: "log", color: "#8250df" },
+    { content: "(", color: "#57606a" },
+    { content: "hello", color: "#8250df" },
+    { content: ");", color: "#57606a" },
+  ],
+];
+
+function useSampleTokens(): HighlightLine[] {
+  const themeName = useThemeName();
+  return themeName?.includes("dark") ? darkSampleTokens : lightSampleTokens;
+}
+
+const SampleHighlightedCode = (props: Omit<ComponentProps<typeof HighlightedCode>, "tokens">) => {
+  const tokens = useSampleTokens();
+  return <HighlightedCode tokens={tokens} {...props} />;
+};
+
 const meta: Meta<typeof HighlightedCode> = {
   title: "Components/HighlightedCode",
   component: HighlightedCode,
@@ -36,7 +67,7 @@ export const Default: Story = {
   name: "Main",
   render: () => (
     <YStack padding="$4" backgroundColor="$color2" borderRadius="$3">
-      <HighlightedCode tokens={sampleTokens} />
+      <SampleHighlightedCode />
     </YStack>
   ),
 };
@@ -44,7 +75,7 @@ export const Default: Story = {
 export const WithLineNumbers: Story = {
   render: () => (
     <YStack padding="$4" backgroundColor="$color2" borderRadius="$3">
-      <HighlightedCode tokens={sampleTokens} showLineNumbers />
+      <SampleHighlightedCode showLineNumbers />
     </YStack>
   ),
 };
@@ -52,7 +83,7 @@ export const WithLineNumbers: Story = {
 export const WithHighlightedLines: Story = {
   render: () => (
     <YStack padding="$4" backgroundColor="$color2" borderRadius="$3">
-      <HighlightedCode tokens={sampleTokens} highlightLines={[1]} showLineNumbers />
+      <SampleHighlightedCode highlightLines={[1]} showLineNumbers />
     </YStack>
   ),
 };

package/src/code/HighlightedCode/index.tsx

@@ -9,7 +9,7 @@
 
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
-import { Text } from "tamagui";
+import { Text, isWeb } from "tamagui";
 import type { HighlightLine } from "../Highlighter";
 import { componentColors } from "../../componentColors";
 
@@ -34,7 +34,9 @@ export function HighlightedCode({
   fontSize,
 }: HighlightedCodeProps) {
   const { knobProps } = useResolvedKnobs();
-
+  // Code content scales with the size knob (T-VALUE via sizeToken, LC-18);
+  // an explicit fontSize prop from the caller ejects.
+  const resolvedFontSize = fontSize ?? knobProps.sizeToken;
   // While tokens are loading, show the raw children (plain text fallback)
   if (!tokens) {
     return <>{children}</>;
@@ -52,18 +54,21 @@ export function HighlightedCode({
             {...(isHighlighted && {
               backgroundColor: componentColors.code.highlightLine,
             })}
-            fontSize={fontSize}
-            {...knobProps.body}
+            fontSize={resolvedFontSize}
+            // Code text stays mono with normal tracking; the bodyFont /
+            // fontWeight knobs never restyle code content.
+            fontFamily="$mono"
+            letterSpacing={0}
           >
             {showLineNumbers && (
               <Text
-                color={componentColors.code.lineNumber}
-                opacity={0.5}
-                fontSize={fontSize}
+                color={componentColors.text.secondary}
+                fontSize={resolvedFontSize}
                 width={40}
                 display="inline-flex"
-                textAlign="right"
-                marginRight="$2"
+                // "end" is web-only CSS; native textAlign has no logical values
+                textAlign={(isWeb ? "end" : "right") as any}
+                marginInlineEnd="$2"
                 userSelect="none"
               >
                 {lineNumber}
@@ -75,7 +80,7 @@ export function HighlightedCode({
                 color={token.color}
                 {...(token.fontStyle && token.fontStyle & 1 ? { fontStyle: "italic" } : {})}
                 {...(token.fontStyle && token.fontStyle & 2 ? { fontWeight: "bold" } : {})}
-                fontSize={fontSize}
+                fontSize={resolvedFontSize}
               >
                 {token.content}
               </Text>

package/src/code/Highlighter/Highlighter.spec.ts

@@ -0,0 +1,35 @@
+/**
+ * Canonical shiki stack (LC-16 ONE-IMPLEMENTATION) — the single highlighter
+ * every code surface consumes (components code family, markdown CodeBlock).
+ * Uses the pure-JS regex engine so tokens also resolve on native/Expo Go.
+ */
+
+import { describe, expect, it } from "vitest";
+import { highlightCode } from "./index";
+
+const joined = (lines: { content: string }[][]) =>
+  lines.map((line) => line.map((token) => token.content).join("")).join("\n");
+
+describe("highlightCode (canonical shiki stack)", () => {
+  it("returns colored tokens for a known language", { timeout: 30000 }, async () => {
+    const lines = await highlightCode("const x = 1;", "typescript");
+    expect(lines).toHaveLength(1);
+    // Real syntax highlighting: more than one token, at least one colored.
+    expect(lines[0]!.length).toBeGreaterThan(1);
+    expect(lines[0]!.some((token) => token.color)).toBe(true);
+    expect(joined(lines)).toBe("const x = 1;");
+  });
+
+  it("preserves content across lines", { timeout: 30000 }, async () => {
+    const code = 'function greet() {\n  return "hello";\n}';
+    const lines = await highlightCode(code, "javascript");
+    expect(lines).toHaveLength(3);
+    expect(joined(lines)).toBe(code);
+  });
+
+  it("falls back to plain text for unknown languages", { timeout: 30000 }, async () => {
+    const code = "just some words";
+    const lines = await highlightCode(code, "not-a-real-language");
+    expect(joined(lines)).toBe(code);
+  });
+});

package/src/code/Highlighter/index.ts

@@ -7,6 +7,7 @@
  */
 
 import { createContext, useContext, useEffect, useState } from "react";
+import { useThemeName } from "tamagui";
 
 /** A single highlighted token with inline color */
 export interface HighlightToken {
@@ -23,7 +24,7 @@ export interface ShikiContextValue {
   theme?: string;
 }
 
-export const ShikiContext = createContext<ShikiContextValue>({ theme: "github-dark" });
+export const ShikiContext = createContext<ShikiContextValue>({});
 
 /**
  * Hook that tokenizes code using shiki.
@@ -36,7 +37,11 @@ export function useShikiTokens(
   theme?: string,
 ): HighlightLine[] | null {
   const ctx = useContext(ShikiContext);
-  const resolvedTheme = theme || ctx.theme || "github-dark";
+  const themeName = useThemeName();
+  // Default shiki theme follows the app scheme so light mode gets a
+  // dark-on-light token palette instead of github-dark's light inks
+  const schemeDefault = themeName?.includes("dark") ? "github-dark" : "github-light";
+  const resolvedTheme = theme || ctx.theme || schemeDefault;
   const [tokens, setTokens] = useState<HighlightLine[] | null>(null);
 
   useEffect(() => {
@@ -62,15 +67,32 @@ export function useShikiTokens(
   return tokens;
 }
 
-/**
- * Highlight code using shiki and return structured tokens.
- * Dynamically imports shiki so it's only loaded when actually used.
- */
 /** Plain text fallback when shiki is unavailable */
 function plainTextTokens(code: string): HighlightLine[] {
   return code.split("\n").map((line) => [{ content: line }]);
 }
 
+// One shared highlighter for the whole app (LC-16 ONE-IMPLEMENTATION — this
+// replaced the second stack `@multiplatform.one/markdown` used to ship).
+// Uses shiki's pure-JavaScript regex engine so highlighting works on web,
+// Expo Go, and native without WASM; languages/themes load on demand instead
+// of an eager preload.
+let highlighterPromise: Promise<any> | null = null;
+
+function getHighlighter(): Promise<any> {
+  if (!highlighterPromise) {
+    highlighterPromise = Promise.all([import("shiki"), import("shiki/engine/javascript")]).then(
+      ([shiki, jsEngine]) =>
+        shiki.createHighlighter({
+          themes: [],
+          langs: [],
+          engine: jsEngine.createJavaScriptRegexEngine(),
+        }),
+    );
+  }
+  return highlighterPromise;
+}
+
 /**
  * Highlight code using shiki and return structured tokens.
  * Dynamically imports shiki so it's only loaded when actually used.
@@ -82,17 +104,24 @@ export async function highlightCode(
   theme = "github-dark",
 ): Promise<HighlightLine[]> {
   try {
-    const shiki = await Promise.race([
-      import("shiki"),
+    const highlighter = await Promise.race([
+      getHighlighter(),
       new Promise<never>((_, reject) =>
         setTimeout(() => reject(new Error("shiki import timeout")), 5000),
       ),
     ]);
-    const result = await shiki.codeToTokens(code, {
-      lang: language as any,
+    await Promise.all([
+      highlighter.loadTheme(theme as any),
+      // Unknown languages fall back to plain text below; theme failures
+      // reject into the catch (matching the old shorthand behavior).
+      highlighter.loadLanguage(language as any).catch(() => {}),
+    ]);
+    const lang = highlighter.getLoadedLanguages().includes(language) ? language : "text";
+    const result = highlighter.codeToTokens(code, {
+      lang: lang as any,
       theme: theme as any,
     });
-    return result.tokens.map((line) =>
+    return result.tokens.map((line: any[]) =>
       line.map((token) => ({
         content: token.content,
         color: token.color,

package/src/code/highlightedCode.spec.tsx

@@ -0,0 +1,97 @@
+/**
+ * HighlightedCode contract specs — the token renderer under CodeBlock /
+ * MDXCodeBlock. Locks down: plain-children fallback while tokens load,
+ * token color/style mapping (shiki fontStyle bitmask → italic/bold),
+ * optional line numbers, and highlight-line marking.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import type { HighlightLine } from "./Highlighter";
+import { HighlightedCode } from "./HighlightedCode";
+
+const tokens: HighlightLine[] = [
+  [
+    { content: "const", color: "#ff0000", fontStyle: 2 },
+    { content: " x = 1;", color: "#00ff00" },
+  ],
+  [{ content: "return x;", color: "#0000ff", fontStyle: 1 }],
+];
+
+describe("HighlightedCode", () => {
+  it("renders the raw children as fallback while tokens are loading", () => {
+    const { container } = renderWithProviders(
+      <HighlightedCode tokens={null}>{"plain fallback"}</HighlightedCode>,
+    );
+    expect(container.textContent).toContain("plain fallback");
+  });
+
+  it("renders every token line once tokens arrive (children replaced)", () => {
+    const { container } = renderWithProviders(
+      <HighlightedCode tokens={tokens}>{"fallback should vanish"}</HighlightedCode>,
+    );
+    expect(container.textContent).toContain("const x = 1;");
+    expect(container.textContent).toContain("return x;");
+    expect(container.textContent).not.toContain("fallback should vanish");
+  });
+
+  it("styles bold/italic tokens differently from plain tokens (fontStyle bitmask applied)", () => {
+    // Tamagui compiles style props to atomic classes, so the observable
+    // contract is: tokens with a fontStyle bit render with different styling
+    // than plain tokens of the same line.
+    const { container } = renderWithProviders(
+      <HighlightedCode
+        tokens={[
+          [
+            { content: "boldtok", color: "#ff0000", fontStyle: 2 },
+            { content: "plaintok", color: "#ff0000" },
+            { content: "italictok", color: "#ff0000", fontStyle: 1 },
+          ],
+        ]}
+      />,
+    );
+    const spans = Array.from(container.querySelectorAll("span"));
+    const bold = spans.find((el) => el.textContent === "boldtok");
+    const plain = spans.find((el) => el.textContent === "plaintok");
+    const italic = spans.find((el) => el.textContent === "italictok");
+    expect(bold).toBeTruthy();
+    expect(plain).toBeTruthy();
+    expect(italic).toBeTruthy();
+    expect(bold!.className).not.toBe(plain!.className);
+    expect(italic!.className).not.toBe(plain!.className);
+    expect(bold!.className).not.toBe(italic!.className);
+  });
+
+  it("shows 1-based line numbers only when asked", () => {
+    const withNumbers = renderWithProviders(<HighlightedCode tokens={tokens} showLineNumbers />);
+    expect(withNumbers.container.textContent).toContain("1");
+    expect(withNumbers.container.textContent).toContain("2");
+
+    const withoutNumbers = renderWithProviders(<HighlightedCode tokens={[[{ content: "x" }]]} />);
+    expect(withoutNumbers.container.textContent).not.toContain("1");
+  });
+
+  it("styles requested highlight lines differently from plain lines", () => {
+    const twin: HighlightLine[] = [[{ content: "line one" }], [{ content: "line two" }]];
+    const { container } = renderWithProviders(
+      <HighlightedCode tokens={twin} highlightLines={[2]} />,
+    );
+
+    // The line wrapper span carries the token content plus the trailing
+    // newline. Theme wrappers (display: contents) share the same text, so
+    // take the DEEPEST matching span — the styled line element itself.
+    function lineWrapper(text: string): HTMLElement {
+      const matches = Array.from(container.querySelectorAll("span")).filter(
+        (el) => el.textContent === `${text}\n`,
+      );
+      const deepest = matches.filter(
+        (el) => !matches.some((other) => other !== el && el.contains(other)),
+      );
+      expect(deepest).toHaveLength(1);
+      return deepest[0] as HTMLElement;
+    }
+
+    // Same token shape, only line 2 highlighted → wrappers must differ in styling.
+    expect(lineWrapper("line one").className).not.toBe(lineWrapper("line two").className);
+  });
+});

package/src/componentColors.ts

@@ -22,11 +22,12 @@ export const componentColors = {
     border: "$color7",
   },
 
-  /** Text color levels */
+  /** Text color levels. muted sits on the $color11 tier — the lowest ramp
+   * step that keeps secondary text AA-readable on color1/2 surfaces. */
   text: {
     primary: "$color12",
     secondary: "$color11",
-    muted: "$color10",
+    muted: "$color11",
     subtle: "$color8",
   },
 
@@ -56,20 +57,25 @@ export const componentColors = {
     text: "$color11",
   },
 
-  /** Badge semantic colors */
+  /** Badge semantic colors. Step 11 (not 9) so the count text clears AA:
+   * white-on-$red9 measured 3.91:1 (SB-R-02). Step 11 flips with the scheme
+   * (deep hue in light, pale hue in dark), pairing with $color1 text. */
   badge: {
-    red: "$red9",
-    blue: "$blue9",
-    green: "$green9",
-    orange: "$orange9",
-    gray: "$color8",
+    red: "$red11",
+    blue: "$blue11",
+    green: "$green11",
+    orange: "$orange11",
+    gray: "$color11",
   },
 
-  /** Semantic status colors for diff-like displays */
+  /** Semantic status colors for diff-like displays. Step 11 (not 10) for the
+   * same AA reason as `badge`: these color small status/trend text (KPICard
+   * trend, Timeline diffs, Attachments errors) and step 10 measured
+   * 3.37–4.36:1 on color1/2 surfaces — under the 4.5:1 normal-text floor. */
   semantic: {
-    error: "$red10",
-    success: "$green10",
-    info: "$color10",
+    error: "$red11",
+    success: "$green11",
+    info: "$color11",
   },
 
   /** Separator/divider tokens */
@@ -78,3 +84,25 @@ export const componentColors = {
   /** Debug indicator color */
   debug: "$color9",
 } as const;
+
+/**
+ * Shared section-heading scale.
+ *
+ * One step below the page `<H1>` title so every catalog section label
+ * (PageSection title, Timeline label, Attachments label) reads at ONE
+ * consistent 20px scale on a composed screen — instead of each component
+ * picking its own H2/H4/Label size. Spread onto the heading node:
+ *
+ *   <H2 margin={0} {...sectionHeading}>{title}</H2>
+ *
+ * Numeric px on purpose: the token `$7` resolves per font SCOPE — 20px in
+ * the `$body` scope (Label) but 28px in the `$heading` scope (H2/H4, whose
+ * size table is 1.4x) — which put 28px text on this 26px leading (ratio
+ * 0.93, wrapped titles overlapped). Fixed values render the same 20px/26px
+ * (1.3) in every scope and every headingFont category.
+ */
+export const sectionHeading = {
+  fontSize: 20,
+  lineHeight: 26,
+  fontWeight: "600",
+} as const;