rift-ds 1.0.0

package/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useId } from "react";
+import { MOTION_FEEDBACK_RESET_MS } from "../../tokens/motion.js";
+import "./CodeBlock.css";
+import "../../fonts/material-symbols.css";
+const CodeBlock = ({
+  code,
+  language,
+  filename,
+  showCopy = true,
+  maxHeight,
+  collapsible = false,
+  defaultCollapsed = false,
+  className = ""
+}) => {
+  const baseClass = "ds-code-block";
+  const [copied, setCopied] = useState(false);
+  const [collapsed, setCollapsed] = useState(collapsible && defaultCollapsed);
+  const panelId = useId();
+  const classes = [
+    baseClass,
+    collapsed ? `${baseClass}--collapsed` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const style = maxHeight !== void 0 ? {
+    "--ds-code-block-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+  } : void 0;
+  const hasHeader = Boolean(filename || language || showCopy || collapsible);
+  const copy = () => {
+    const fallback = () => {
+      const textarea = document.createElement("textarea");
+      textarea.value = code;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "absolute";
+      textarea.style.left = "-9999px";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+    };
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(code).catch(fallback);
+    } else {
+      fallback();
+    }
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), MOTION_FEEDBACK_RESET_MS);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes, style, children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__meta`, children: [
+        collapsible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${baseClass}__toggle`,
+            onClick: () => setCollapsed((c) => !c),
+            "aria-expanded": !collapsed,
+            "aria-controls": panelId,
+            "aria-label": collapsed ? "Expand code" : "Collapse code",
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "expand_more" })
+          }
+        ),
+        filename && /* @__PURE__ */ jsx("code", { className: `${baseClass}__filename`, children: filename }),
+        language && /* @__PURE__ */ jsx("span", { className: `${baseClass}__language`, children: language })
+      ] }),
+      showCopy && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__copy`,
+          onClick: copy,
+          "aria-label": copied ? "Copied" : "Copy code",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: copied ? "check" : "content_copy" }),
+            copied ? "Copied" : "Copy"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { id: panelId, className: `${baseClass}__panel`, "aria-hidden": collapsed || void 0, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__panel-inner`, children: /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: `${baseClass}__pre`,
+        tabIndex: collapsed ? -1 : 0,
+        role: "region",
+        "aria-label": filename ? `Code: ${filename}` : language ? `Code: ${language}` : "Code",
+        children: /* @__PURE__ */ jsx("code", { className: `${baseClass}__code`, children: code })
+      }
+    ) }) })
+  ] });
+};
+export {
+  CodeBlock
+};

package/components/CodeDiff/CodeDiff.css

@@ -0,0 +1,175 @@
+/* ============================================
+   CODE DIFF COMPONENT
+   Unified diff view: added, removed, and context
+   lines with old/new line number gutters.
+   Note: the system typeface is Nunito Sans;
+   code is the one sanctioned monospace context.
+   ============================================ */
+
+.ds-codediff {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-300);
+  background-color: var(--color-bg-container-primary);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER — filename + additions/deletions stats
+   ============================================ */
+
+.ds-codediff__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-200);
+  padding: var(--padding-150) var(--padding-400);
+  border-bottom: var(--border-025) solid var(--color-bg-container-border);
+  flex-shrink: 0;
+}
+
+.ds-codediff__filename {
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-codediff__stats {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-100);
+  flex-shrink: 0;
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+}
+
+.ds-codediff__stat--add {
+  color: var(--color-status-positive-text);
+}
+
+.ds-codediff__stat--remove {
+  color: var(--color-status-error-text);
+}
+
+/* ============================================
+   SCROLL CONTAINER
+   Long lines scroll horizontally inside the
+   component; the tab stop makes that scroll
+   keyboard-reachable.
+   ============================================ */
+
+.ds-codediff__scroll {
+  overflow-x: auto;
+}
+
+.ds-codediff__scroll:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   LINES
+   ============================================ */
+
+/* width: max-content + min-width: 100% so row tints
+   span the full width of the longest line, not just
+   the visible scrollport */
+.ds-codediff__lines {
+  list-style: none;
+  margin: 0;
+  padding: var(--padding-150) 0;
+  width: max-content;
+  min-width: 100%;
+  font-family: var(--font-family-code);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-codediff__line {
+  display: flex;
+  align-items: baseline;
+  /* keeps blank diff lines from collapsing to zero height */
+  min-height: var(--font-paragraph-sm-line-height);
+}
+
+/* ============================================
+   GUTTERS & MARKER
+   Fixed-width columns in the monospace metric so
+   rows align; excluded from text selection so a
+   copied diff carries only the code.
+   ============================================ */
+
+.ds-codediff__gutter {
+  flex-shrink: 0;
+  min-width: 4ch;
+  padding: 0 var(--padding-100);
+  text-align: right;
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+.ds-codediff__marker {
+  flex-shrink: 0;
+  width: 2ch;
+  text-align: center;
+  user-select: none;
+}
+
+.ds-codediff__content {
+  white-space: pre;
+  padding-right: var(--padding-400);
+}
+
+/* ============================================
+   LINE VARIANTS
+   Added rows tint with the positive status
+   background, removed with the error one.
+   ============================================ */
+
+.ds-codediff__line--add {
+  background-color: var(--color-status-positive-bg);
+}
+
+.ds-codediff__line--add .ds-codediff__marker {
+  color: var(--color-status-positive-text);
+}
+
+.ds-codediff__line--remove {
+  background-color: var(--color-status-error-bg);
+}
+
+.ds-codediff__line--remove .ds-codediff__marker {
+  color: var(--color-status-error-text);
+}
+
+.ds-codediff__line--hunk {
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   SCREEN-READER-ONLY TEXT
+   Announces the change type; the marker column
+   itself is decorative (aria-hidden).
+   ============================================ */
+
+.ds-codediff__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/CodeDiff/CodeDiff.d.ts

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+/** The kind of line a parsed diff row represents. */
+export type CodeDiffLineType = 'add' | 'remove' | 'context' | 'hunk';
+export interface CodeDiffLine {
+    /** Whether the line is an addition, a removal, unchanged context, or a hunk header */
+    type: CodeDiffLineType;
+    /** The line's text with its diff marker stripped (hunk headers keep the full `@@` line) */
+    content: string;
+    /** Line number in the old file, or null for additions and hunk headers */
+    oldLine: number | null;
+    /** Line number in the new file, or null for removals and hunk headers */
+    newLine: number | null;
+}
+export interface ParsedCodeDiff {
+    /** The diff's rows in order, with per-side line numbers computed */
+    lines: CodeDiffLine[];
+    /** Count of added lines */
+    additions: number;
+    /** Count of removed lines */
+    deletions: number;
+}
+/**
+ * Parse a unified-format diff body into typed lines with old/new line
+ * numbers. Lines starting with `+` are additions, `-` removals, `@@ … @@`
+ * hunk headers, and everything else context. File header lines (`+++`,
+ * `---`) and no-newline markers (``) carry no
+ * content and are skipped. A diff with no hunk headers is treated as one
+ * hunk starting at line 1.
+ */
+export declare function parseUnifiedDiff(diff: string): ParsedCodeDiff;
+/** Props owned by CodeDiff itself — everything else falls through to the root div. */
+type CodeDiffOwnProps = {
+    /**
+     * A unified-format diff body. Lines starting with `+` render as additions,
+     * `-` as removals, `@@ … @@` as hunk headers, everything else as context;
+     * `+++`/`---` file header lines are ignored. Without hunk headers the
+     * whole string is treated as one hunk starting at line 1.
+     */
+    diff: string;
+    /** Filename shown in a header bar above the diff, with an additions/deletions summary */
+    filename?: string;
+    /** Show the old and new line number gutters */
+    showLineNumbers?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface CodeDiffProps extends CodeDiffOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CodeDiffOwnProps> {
+}
+/**
+ * CodeDiff component — unified diff view for code changes. Added lines tint
+ * with the positive status background, removed lines with the error one, and
+ * two gutters track old and new line numbers. Purely presentational: parsing
+ * happens in the exported `parseUnifiedDiff`, long lines scroll horizontally
+ * inside the block, and the change type is announced through visually hidden
+ * text while the marker column stays decorative.
+ */
+export declare const CodeDiff: React.ForwardRefExoticComponent<CodeDiffProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/CodeDiff/CodeDiff.js

@@ -0,0 +1,114 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import "./CodeDiff.css";
+const HUNK_HEADER = /^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/;
+function parseUnifiedDiff(diff) {
+  const rawLines = diff.replace(/\n$/, "").split("\n");
+  const lines = [];
+  let additions = 0;
+  let deletions = 0;
+  let oldLine = 1;
+  let newLine = 1;
+  for (const raw of rawLines) {
+    if (raw.startsWith("+++") || raw.startsWith("---") || raw.startsWith("\\")) {
+      continue;
+    }
+    const hunk = raw.match(HUNK_HEADER);
+    if (hunk) {
+      oldLine = parseInt(hunk[1], 10);
+      newLine = parseInt(hunk[2], 10);
+      lines.push({ type: "hunk", content: raw, oldLine: null, newLine: null });
+      continue;
+    }
+    if (raw.startsWith("+")) {
+      additions += 1;
+      lines.push({ type: "add", content: raw.slice(1), oldLine: null, newLine });
+      newLine += 1;
+      continue;
+    }
+    if (raw.startsWith("-")) {
+      deletions += 1;
+      lines.push({ type: "remove", content: raw.slice(1), oldLine, newLine: null });
+      oldLine += 1;
+      continue;
+    }
+    lines.push({
+      type: "context",
+      content: raw.startsWith(" ") ? raw.slice(1) : raw,
+      oldLine,
+      newLine
+    });
+    oldLine += 1;
+    newLine += 1;
+  }
+  return { lines, additions, deletions };
+}
+const CHANGE_LABELS = {
+  add: "Added line:",
+  remove: "Removed line:"
+};
+const CodeDiff = React.forwardRef(
+  ({ diff, filename, showLineNumbers = true, className = "", ...rest }, ref) => {
+    const baseClass = "ds-codediff";
+    const { lines, additions, deletions } = parseUnifiedDiff(diff);
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      filename && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+        /* @__PURE__ */ jsx("code", { className: `${baseClass}__filename`, children: filename }),
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stats`, children: [
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stat ${baseClass}__stat--add`, children: [
+            "+",
+            additions,
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: " added" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stat ${baseClass}__stat--remove`, children: [
+            "-",
+            deletions,
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: " removed" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${baseClass}__scroll`,
+          tabIndex: 0,
+          role: "region",
+          "aria-label": filename ? `Code diff: ${filename}` : "Code diff",
+          children: /* @__PURE__ */ jsx("ol", { className: `${baseClass}__lines`, children: lines.map((line, index) => {
+            const changeLabel = CHANGE_LABELS[line.type];
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: [
+                  `${baseClass}__line`,
+                  line.type === "add" ? `${baseClass}__line--add` : "",
+                  line.type === "remove" ? `${baseClass}__line--remove` : "",
+                  line.type === "hunk" ? `${baseClass}__line--hunk` : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  showLineNumbers && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__gutter`, "aria-hidden": "true", children: line.oldLine ?? "" }),
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__gutter`, "aria-hidden": "true", children: line.newLine ?? "" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__marker`, "aria-hidden": "true", children: line.type === "add" ? "+" : line.type === "remove" ? "-" : "" }),
+                  changeLabel && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__sr-only`, children: [
+                    changeLabel,
+                    " "
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__content`, children: line.content })
+                ]
+              },
+              index
+            );
+          }) })
+        }
+      )
+    ] });
+  }
+);
+CodeDiff.displayName = "CodeDiff";
+export {
+  CodeDiff,
+  parseUnifiedDiff
+};