drexler 0.2.12 → 0.2.14

package/src/ui/Message.tsx

@@ -1,7 +1,13 @@
 import { Box, Text } from "ink";
 import { memo, useMemo } from "react";
 import { renderMarkdown } from "../renderer.ts";
+import {
+  firstDisplayLine,
+  normalizeAssistantDisplayContent,
+  normalizeAssistantMarkdownRenderContent,
+} from "./displayContent.ts";
 import { fitDisplayText } from "./graphemes.ts";
+import { MarkdownBody } from "./MarkdownBody.tsx";
 import { useTheme } from "./ThemeContext.tsx";
 
 interface MessageItem {
@@ -30,12 +36,16 @@ function Separator() {
 
 function MessageInner({ role, content }: MessageItem) {
   const t = useTheme();
+  const displayContent =
+    role === "assistant"
+      ? normalizeAssistantMarkdownRenderContent(content)
+      : content;
   const assistantLines = useMemo(
     () =>
       role === "assistant"
-        ? renderMarkdown(content).trimEnd().split("\n")
+        ? renderMarkdown(displayContent).trimEnd().split("\n")
         : [],
-    [content, role],
+    [displayContent, role],
   );
 
   if (role === "user") {
@@ -111,12 +121,16 @@ interface StreamingProps {
 
 function StreamingMessageInner({ content, width = 80 }: StreamingProps) {
   const t = useTheme();
-  const lines = useMemo(() => content.split("\n"), [content]);
   const safeWidth = Math.max(1, Math.floor(width));
-  const contentWidth = Math.max(1, safeWidth - 3);
+  const innerWidth = Math.max(1, safeWidth - 2);
+  const compactDisplayContent = normalizeAssistantDisplayContent(content);
+  const markdownDisplayContent = normalizeAssistantMarkdownRenderContent(content);
 
   if (safeWidth < 18) {
-    const compactLine = fitDisplayText(content.replace(/\s+/g, " "), safeWidth);
+    const compactLine = fitDisplayText(
+      firstDisplayLine(compactDisplayContent).replace(/\s+/g, " "),
+      safeWidth,
+    );
     return (
       <Box width={safeWidth} flexShrink={1}>
         <Text color={t.primaryLight} wrap="truncate">
@@ -135,16 +149,15 @@ function StreamingMessageInner({ content, width = 80 }: StreamingProps) {
         <Text color={t.primaryDim}> ─ </Text>
         <Text color={t.dim}>drafting live</Text>
       </Box>
-      {lines.map((ln, i) => (
-        <Box key={i} paddingLeft={1}>
-          <Text color={i === lines.length - 1 ? t.primaryLight : t.primary}>
-            │{" "}
-          </Text>
-          <Text color={t.text} wrap="truncate">
-            {fitDisplayText(ln, contentWidth)}
-          </Text>
-        </Box>
-      ))}
+      <MarkdownBody
+        content={markdownDisplayContent}
+        baseColor={t.text}
+        accentColor={t.primaryLight}
+        dimColor={t.dim}
+        codeColor={t.primaryDim}
+        width={innerWidth}
+        paddingLeft={1}
+      />
     </Box>
   );
 }

package/src/ui/Spinner.tsx

@@ -1,6 +1,6 @@
 import { Box, Text } from "ink";
 import { useEffect, useState } from "react";
-import { fitDisplayText } from "./graphemes.ts";
+import { displayWidth, fitDisplayText } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
 const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -47,8 +47,15 @@ export function Spinner({ label, width = 80 }: Props) {
     );
   }
 
-  const labelBudget = Math.max(1, safeWidth - 22);
+  const innerWidth = Math.max(1, safeWidth - 4);
   const showStage = safeWidth >= 42;
+  const stageLabel = showStage ? ` · ${stage}` : "";
+  const secondsLabel = seconds > 0 && safeWidth >= 34 ? ` · ${seconds}s` : "";
+  const fixedWidth =
+    displayWidth(`${FRAMES[i]} WORKING ─ `) +
+    displayWidth(stageLabel) +
+    displayWidth(secondsLabel);
+  const labelBudget = Math.max(1, innerWidth - fixedWidth);
 
   return (
     <Box
@@ -66,13 +73,8 @@ export function Spinner({ label, width = 80 }: Props) {
       <Text color={t.text} wrap="truncate">
         {fitDisplayText(label, labelBudget)}
       </Text>
-      {showStage ? <Text color={t.dim}> · {stage}</Text> : null}
-      {seconds > 0 && safeWidth >= 34 ? (
-        <>
-          <Text color={t.primaryDim}> · </Text>
-          <Text color={t.dim}>{seconds}s</Text>
-        </>
-      ) : null}
+      {stageLabel ? <Text color={t.dim}>{stageLabel}</Text> : null}
+      {secondsLabel ? <Text color={t.dim}>{secondsLabel}</Text> : null}
     </Box>
   );
 }

package/src/ui/StatusBar.tsx

@@ -16,13 +16,6 @@ interface Props {
 
 const MAX_WITTICISM_LEN = 60;
 
-function clampText(input: string, max: number): string {
-  if (input.length <= max) return input;
-  if (max <= 0) return "";
-  if (max === 1) return "…";
-  return input.slice(0, max - 1) + "…";
-}
-
 function StatusBarInner({
   messageCount,
   witticism,
@@ -40,52 +33,27 @@ function StatusBarInner({
     }),
     [t.primaryLight, t.warning, t.error],
   );
+  const safeWidth =
+    typeof maxWidth === "number" ? Math.max(1, Math.floor(maxWidth)) : undefined;
   const countLabel = `${messageCount} message${messageCount === 1 ? "" : "s"}`;
-  const hintLabel = scrollHint ? `  │  ${scrollHint}` : "";
-  const quoteWidth =
-    typeof maxWidth === "number"
-      ? Math.max(
-          0,
-          maxWidth -
-            "● ".length -
-            countLabel.length -
-            hintLabel.length -
-            "  │  ".length -
-            2,
-        )
-      : MAX_WITTICISM_LEN;
-  const safe = clampText(witticism, Math.min(MAX_WITTICISM_LEN, quoteWidth));
+  const quote = `"${fitDisplayText(witticism, MAX_WITTICISM_LEN)}"`;
+  const line = compact
+    ? `${countLabel}${scrollHint ? `  │  ${scrollHint}` : ""}`
+    : `${countLabel}${scrollHint ? `  │  ${scrollHint}` : ""}  │  ${quote}`;
+  const body = fitDisplayText(line, Math.max(1, (safeWidth ?? 80) - 2));
   const box = compact ? (
     <Box>
       <Text color={dotColor[status]}>● </Text>
-      <Text color={t.dim}>{countLabel}</Text>
-      {scrollHint ? (
-        <>
-          <Text color={t.primaryDim}>{"  │  "}</Text>
-          <Text color={t.primaryLight}>
-            {fitDisplayText(scrollHint, Math.max(1, maxWidth ?? 24))}
-          </Text>
-        </>
-      ) : null}
+      <Text color={t.dim} wrap="truncate">{body}</Text>
     </Box>
   ) : (
     <Box>
       <Text color={dotColor[status]}>● </Text>
-      <Text color={t.dim}>{countLabel}</Text>
-      {scrollHint ? (
-        <>
-          <Text color={t.primaryDim}>{"  │  "}</Text>
-          <Text color={t.primaryLight}>{scrollHint}</Text>
-        </>
-      ) : null}
-      <Text color={t.primaryDim}>{"  │  "}</Text>
-      <Text color={t.dim} italic>
-        "{safe}"
-      </Text>
+      <Text color={t.dim} italic wrap="truncate">{body}</Text>
     </Box>
   );
-  if (typeof maxWidth === "number") {
-    return <Box width={maxWidth}>{box}</Box>;
+  if (typeof safeWidth === "number") {
+    return <Box width={safeWidth}>{box}</Box>;
   }
   return box;
 }

package/src/ui/SynergyEvent.tsx

@@ -16,8 +16,9 @@ export interface SynergyEventDefinition {
 
 export const SYNERGY_EVENT_FRAMES = 28;
 const FULL_EVENT_WIDTH = 88;
-const FULL_EVENT_ROWS = 12;
-const FULL_EVENT_ART_ROWS = 4;
+const FULL_EVENT_ART_ROWS = 6;
+const FULL_EVENT_CHROME_ROWS = 7;
+const FULL_EVENT_ROWS = FULL_EVENT_CHROME_ROWS + FULL_EVENT_ART_ROWS;
 
 export const SYNERGY_EVENTS: readonly SynergyEventDefinition[] = [
   {

package/src/ui/TranscriptViewport.tsx

@@ -1,5 +1,11 @@
 import { Box, Text } from "ink";
 import { Children, memo, useMemo, type ReactNode } from "react";
+import {
+  assistantDisplayLines,
+  firstDisplayLine,
+  normalizeAssistantDisplayContent,
+  type AssistantDisplayLine,
+} from "./displayContent.ts";
 import { displayWidth, fitDisplayText, splitGraphemes } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
@@ -41,6 +47,105 @@ const ROLE_MARKERS: Record<TranscriptViewportItem["role"], string> = {
   system: "!",
 };
 
+const BODY_SUFFIX = " │";
+const CONTINUATION_PREFIX = "│   ";
+const CODE_GUTTER = "┃ ";
+const DRACULA_CODE = {
+  text: "#f8f8f2",
+  keyword: "#ff79c6",
+  function: "#50fa7b",
+  string: "#f1fa8c",
+  number: "#bd93f9",
+  comment: "#6272a4",
+  operator: "#8be9fd",
+  gutter: "#6272a4",
+};
+
+interface WrappedTranscriptLine {
+  kind: AssistantDisplayLine["kind"];
+  text: string;
+  language?: string;
+}
+
+interface CodeToken {
+  kind:
+    | "plain"
+    | "keyword"
+    | "function"
+    | "string"
+    | "number"
+    | "comment"
+    | "operator";
+  text: string;
+}
+
+const CODE_KEYWORDS = new Set([
+  "and",
+  "as",
+  "async",
+  "await",
+  "break",
+  "case",
+  "catch",
+  "class",
+  "const",
+  "continue",
+  "def",
+  "default",
+  "do",
+  "elif",
+  "else",
+  "except",
+  "export",
+  "extends",
+  "false",
+  "finally",
+  "for",
+  "from",
+  "function",
+  "if",
+  "import",
+  "in",
+  "interface",
+  "let",
+  "new",
+  "none",
+  "not",
+  "null",
+  "or",
+  "pass",
+  "return",
+  "switch",
+  "throw",
+  "true",
+  "try",
+  "type",
+  "var",
+  "while",
+  "with",
+  "yield",
+]);
+
+const CODE_OPERATOR_RE = /^[()[\]{}.,:;+\-*/%=<>!&|^~?]+/u;
+const CODE_NUMBER_RE = /^\b(?:0x[\da-f]+|\d+(?:\.\d+)?)\b/iu;
+const CODE_IDENTIFIER_RE = /^[A-Za-z_$][\w$]*/u;
+
+function bodyPrefixForRole(role: TranscriptViewportItem["role"]): string {
+  if (role === "user") return "│ › ";
+  if (role === "assistant") return "│ ◆ ";
+  return CONTINUATION_PREFIX;
+}
+
+function transcriptContentWidth(
+  role: TranscriptViewportItem["role"],
+  cols: number,
+): number {
+  return Math.max(
+    1,
+    cols - displayWidth(bodyPrefixForRole(role)) - displayWidth(BODY_SUFFIX),
+  );
+}
+
 function wrapDisplayLine(input: string, maxWidth: number): string[] {
   const width = Math.max(1, maxWidth);
   if (input.length === 0) return [""];
@@ -91,10 +196,99 @@ function wrapDisplayLine(input: string, maxWidth: number): string[] {
   return rows.filter((row, index) => row.length > 0 || index === 0);
 }
 
-function wrappedContentRows(content: string, width: number): string[] {
-  return content
-    .split("\n")
-    .flatMap((line) => wrapDisplayLine(line, width));
+function displayContentForItem(item: TranscriptViewportItem): string {
+  if (item.role !== "assistant") return item.content;
+  return normalizeAssistantDisplayContent(item.content);
+}
+
+function displayLinesForItem(item: TranscriptViewportItem): AssistantDisplayLine[] {
+  if (item.role === "assistant") return assistantDisplayLines(item.content);
+  return item.content.split("\n").map((text) => ({ kind: "text", text }));
+}
+
+function wrappedTranscriptLines(
+  item: TranscriptViewportItem,
+  contentWidth: number,
+): WrappedTranscriptLine[] {
+  return displayLinesForItem(item).flatMap((line) => {
+    const width =
+      line.kind === "code"
+        ? Math.max(1, contentWidth - displayWidth(CODE_GUTTER))
+        : contentWidth;
+    return wrapDisplayLine(line.text, width).map((text) => ({
+      kind: line.kind,
+      text,
+      language: line.language,
+    }));
+  });
+}
+
+function tokenizeCodeLine(line: string): CodeToken[] {
+  const tokens: CodeToken[] = [];
+  let rest = line;
+
+  while (rest.length > 0) {
+    const comment =
+      rest.startsWith("#") || rest.startsWith("//") ? rest : undefined;
+    if (comment !== undefined) {
+      tokens.push({ kind: "comment", text: comment });
+      break;
+    }
+
+    const stringQuote = rest[0];
+    if (stringQuote === "\"" || stringQuote === "'" || stringQuote === "`") {
+      let end = 1;
+      let escaped = false;
+      while (end < rest.length) {
+        const char = rest[end];
+        if (escaped) {
+          escaped = false;
+        } else if (char === "\\") {
+          escaped = true;
+        } else if (char === stringQuote) {
+          end += 1;
+          break;
+        }
+        end += 1;
+      }
+      tokens.push({ kind: "string", text: rest.slice(0, end) });
+      rest = rest.slice(end);
+      continue;
+    }
+
+    const number = CODE_NUMBER_RE.exec(rest)?.[0];
+    if (number) {
+      tokens.push({ kind: "number", text: number });
+      rest = rest.slice(number.length);
+      continue;
+    }
+
+    const identifier = CODE_IDENTIFIER_RE.exec(rest)?.[0];
+    if (identifier) {
+      const after = rest.slice(identifier.length);
+      const kind =
+        CODE_KEYWORDS.has(identifier.toLowerCase())
+          ? "keyword"
+          : /^\s*\(/u.test(after)
+            ? "function"
+            : "plain";
+      tokens.push({ kind, text: identifier });
+      rest = rest.slice(identifier.length);
+      continue;
+    }
+
+    const operator = CODE_OPERATOR_RE.exec(rest)?.[0];
+    if (operator) {
+      tokens.push({ kind: "operator", text: operator });
+      rest = rest.slice(operator.length);
+      continue;
+    }
+
+    tokens.push({ kind: "plain", text: rest[0]! });
+    rest = rest.slice(1);
+  }
+
+  return tokens;
 }
 
 function itemRows(
@@ -103,13 +297,8 @@ function itemRows(
   cols: number,
 ): number {
   if (compact) return 1;
-  const bodyPrefix = "│ › ";
-  const bodySuffix = " │";
-  const contentWidth = Math.max(
-    1,
-    cols - displayWidth(bodyPrefix) - displayWidth(bodySuffix),
-  );
-  return 2 + wrappedContentRows(item.content, contentWidth).length;
+  const contentWidth = transcriptContentWidth(item.role, cols);
+  return 2 + wrappedTranscriptLines(item, contentWidth).length;
 }
 
 function roleAccentColor(
@@ -145,12 +334,39 @@ function DefaultTranscriptItem({
   const t = useTheme();
   const label = ROLE_LABELS[item.role];
   const accent = roleAccentColor(item.role, t);
+  const renderCodeLine = (line: string) =>
+    tokenizeCodeLine(line).map((token, tokenIndex) => {
+      const color =
+        token.kind === "keyword"
+          ? DRACULA_CODE.keyword
+          : token.kind === "function"
+            ? DRACULA_CODE.function
+            : token.kind === "string"
+              ? DRACULA_CODE.string
+              : token.kind === "number" || token.kind === "operator"
+                ? token.kind === "number"
+                  ? DRACULA_CODE.number
+                  : DRACULA_CODE.operator
+                : token.kind === "comment"
+                  ? DRACULA_CODE.comment
+                  : DRACULA_CODE.text;
+      return (
+        <Text
+          key={tokenIndex}
+          color={color}
+          bold={token.kind === "keyword" || token.kind === "function"}
+          italic={token.kind === "comment"}
+        >
+          {token.text}
+        </Text>
+      );
+    });
 
   if (compact) {
     const marker = item.role === "assistant" ? "◆" : ROLE_MARKERS[item.role];
     const prefix = `${label} ${marker} `;
     const budget = Math.max(1, cols - displayWidth(prefix));
-    const firstLine = item.content.split("\n")[0] ?? "";
+    const firstLine = firstDisplayLine(displayContentForItem(item));
     return (
       <Box width={cols} flexShrink={1}>
         <Text color={accent} bold>
@@ -168,13 +384,9 @@ function DefaultTranscriptItem({
   const headerPrefix = `╭─ ${label} `;
   const headerRuleWidth = Math.max(0, cols - displayWidth(headerPrefix) - 1);
   const footerWidth = Math.max(0, cols - 2);
-  const bodyPrefix = item.role === "user" ? "│ › " : "│   ";
-  const continuationPrefix = "│   ";
-  const bodySuffix = " │";
-  const contentWidth = Math.max(
-    1,
-    cols - displayWidth(bodyPrefix) - displayWidth(bodySuffix),
-  );
+  const bodyPrefix = bodyPrefixForRole(item.role);
+  const contentWidth = transcriptContentWidth(item.role, cols);
+  const displayLines = wrappedTranscriptLines(item, contentWidth);
 
   return (
     <Box flexDirection="column" width={cols} flexShrink={1}>
@@ -184,18 +396,39 @@ function DefaultTranscriptItem({
           cols,
         )}
       </Text>
-      {wrappedContentRows(item.content, contentWidth).map((line, index) => (
+      {displayLines.map((line, index) => (
         <Box key={index} width={cols} flexShrink={1}>
           <Text color={accent} bold={item.role === "user"}>
-            {index === 0 ? bodyPrefix : continuationPrefix}
+            {index === 0 ? bodyPrefix : CONTINUATION_PREFIX}
           </Text>
-          <Text color={roleBodyColor(item.role, t)}>
-            {fitDisplayText(line, contentWidth)}
+          {line.kind === "code" ? (
+            <Text color={DRACULA_CODE.gutter}>{CODE_GUTTER}</Text>
+          ) : null}
+          <Text
+            color={
+              line.kind === "code"
+                ? DRACULA_CODE.text
+                : roleBodyColor(item.role, t)
+            }
+          >
+            {line.kind === "code"
+              ? renderCodeLine(
+                  fitDisplayText(
+                    line.text,
+                    Math.max(1, contentWidth - displayWidth(CODE_GUTTER)),
+                  ),
+                )
+              : fitDisplayText(line.text, contentWidth)}
           </Text>
           <Text color={accent} bold={item.role === "user"}>
             {`${" ".repeat(
-              Math.max(0, contentWidth - displayWidth(line)),
-            )}${bodySuffix}`}
+              Math.max(
+                0,
+                contentWidth -
+                  displayWidth(line.text) -
+                  (line.kind === "code" ? displayWidth(CODE_GUTTER) : 0),
+              ),
+            )}${BODY_SUFFIX}`}
           </Text>
         </Box>
       ))}
@@ -275,11 +508,19 @@ function selectWindow(
     reserveTop = nextReserveTop;
   }
 
-  return {
-    visible: entries.slice(start, end),
-    hiddenBefore: start,
-    hiddenAfter: entries.length - end,
-  };
+  const visible = entries.slice(start, end);
+  const visibleRows = visible.reduce(
+    (sum, entry) => sum + Math.max(1, entry.estimatedRows),
+    0,
+  );
+  let hiddenBefore = start;
+  let hiddenAfter = entries.length - end;
+  if (visibleRows + (hiddenBefore > 0 ? 1 : 0) + (hiddenAfter > 0 ? 1 : 0) > safeRows) {
+    if (hiddenBefore > 0) hiddenBefore = 0;
+    if (visibleRows + (hiddenAfter > 0 ? 1 : 0) > safeRows) hiddenAfter = 0;
+  }
+
+  return { visible, hiddenBefore, hiddenAfter };
 }
 
 function ScrollIndicator({

package/src/ui/displayContent.ts

@@ -0,0 +1,114 @@
+const FENCE_OPEN_RE = /^[ \t]*(`{3,}|~{3,})([^`~\n\r]*)$/u;
+const TAB_DISPLAY = "  ";
+
+export interface AssistantDisplayLine {
+  kind: "text" | "code";
+  text: string;
+  language?: string;
+}
+
+function isFenceClose(line: string, fenceChar: string, minLength: number): boolean {
+  const trimmed = line.trim();
+  if (trimmed.length < minLength) return false;
+  for (const char of trimmed) {
+    if (char !== fenceChar) return false;
+  }
+  return true;
+}
+
+function isMarkdownFence(info: string): boolean {
+  const lang = info.trim().split(/\s+/u)[0]?.toLowerCase() ?? "";
+  return lang === "markdown" || lang === "md" || lang === "mdown";
+}
+
+function fenceLanguage(info: string): string | undefined {
+  const lang = info.trim().split(/\s+/u)[0]?.toLowerCase();
+  return lang && !isMarkdownFence(lang) ? lang : undefined;
+}
+
+export function assistantDisplayLines(content: string): AssistantDisplayLine[] {
+  const lines = content.replace(/\r\n?/gu, "\n").split("\n");
+  const output: AssistantDisplayLine[] = [];
+  let fenceChar = "";
+  let fenceLength = 0;
+  let fenceKind: AssistantDisplayLine["kind"] = "text";
+  let fenceLang: string | undefined;
+
+  for (const rawLine of lines) {
+    const line = rawLine.replace(/\t/gu, TAB_DISPLAY);
+    if (fenceChar.length > 0) {
+      if (isFenceClose(line, fenceChar, fenceLength)) {
+        fenceChar = "";
+        fenceLength = 0;
+        fenceKind = "text";
+        fenceLang = undefined;
+      } else {
+        output.push({ kind: fenceKind, text: line, language: fenceLang });
+      }
+      continue;
+    }
+
+    const openingFence = FENCE_OPEN_RE.exec(line);
+    if (openingFence) {
+      const marker = openingFence[1]!;
+      const info = openingFence[2] ?? "";
+      fenceChar = marker[0]!;
+      fenceLength = marker.length;
+      fenceKind = isMarkdownFence(info) ? "text" : "code";
+      fenceLang = fenceKind === "code" ? fenceLanguage(info) : undefined;
+      continue;
+    }
+
+    output.push({ kind: "text", text: line });
+  }
+
+  return output;
+}
+
+export function normalizeAssistantDisplayContent(content: string): string {
+  return assistantDisplayLines(content)
+    .map((line) => line.text)
+    .join("\n");
+}
+
+export function normalizeAssistantMarkdownRenderContent(content: string): string {
+  const lines = content.replace(/\r\n?/gu, "\n").split("\n");
+  const output: string[] = [];
+  let fenceChar = "";
+  let fenceLength = 0;
+  let markdownFence = false;
+
+  for (const rawLine of lines) {
+    const line = rawLine.replace(/\t/gu, TAB_DISPLAY);
+    if (fenceChar.length > 0) {
+      if (isFenceClose(line, fenceChar, fenceLength)) {
+        if (!markdownFence) output.push("```");
+        fenceChar = "";
+        fenceLength = 0;
+        markdownFence = false;
+      } else {
+        output.push(line);
+      }
+      continue;
+    }
+
+    const openingFence = FENCE_OPEN_RE.exec(line);
+    if (openingFence) {
+      const marker = openingFence[1]!;
+      const info = openingFence[2] ?? "";
+      fenceChar = marker[0]!;
+      fenceLength = marker.length;
+      markdownFence = isMarkdownFence(info);
+      if (!markdownFence) output.push("```");
+      continue;
+    }
+
+    output.push(line);
+  }
+
+  return output.join("\n");
+}
+
+export function firstDisplayLine(content: string): string {
+  return content.split("\n").find((line) => line.trim().length > 0) ?? "";
+}

package/src/ui/graphemes.ts

@@ -35,6 +35,7 @@ function isWideCodePoint(codePoint: number): boolean {
 function graphemeWidth(input: string): number {
   if (input.length === 0) return 0;
   if (/^\p{Mark}+$/u.test(input)) return 0;
+  if (/^[©®™]$/u.test(input)) return 1;
   if (/\p{Extended_Pictographic}/u.test(input)) return 2;
   let width = 0;
   for (const char of input) {