@gogitcms/design-system 0.15.0-next.3

package/src/components/ChangeDetail.tsx

@@ -0,0 +1,472 @@
+import React, { useState } from "react";
+import { View, ScrollView, Image, Pressable } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Input } from "./Input";
+import { Button } from "./Button";
+import { Badge, DiffStat } from "./primitives";
+
+/** How one field differs between the branch and its base. */
+export type FieldChangeKind = "added" | "removed" | "changed" | "unchanged";
+
+export type FieldChange = {
+  name: string;
+  label?: string;
+  kind: FieldChangeKind;
+  before?: unknown;
+  after?: unknown;
+};
+
+/**
+ * Renderable versions of a changed binary asset. `after` is the version on this
+ * branch, `before` the base branch's.
+ *
+ * A deleted file has no `after`, which is exactly why the rule "show the asset
+ * unless it was deleted" needs no flag: there is nothing current to show, and
+ * the URL of a file this branch removed would be a preview of something that is
+ * no longer there.
+ */
+export type ChangePreview = {
+  /** Render class (image|svg|…). Only visual kinds are previewed. */
+  kind?: string;
+  beforeUrl?: string | null;
+  afterUrl?: string | null;
+};
+
+export type DocumentChange = {
+  path: string;
+  /** The base branch's path, for a rename. */
+  previousPath?: string;
+  status: "A" | "M" | "D" | "R";
+  label: string;
+  /** Ordered to match the content model's schema, so it reads like the editor. */
+  fields: FieldChange[];
+  bodyBefore?: string | null;
+  bodyAfter?: string | null;
+  added: number;
+  removed: number;
+  /** Set for a media change; documents have nothing to preview. */
+  preview?: ChangePreview;
+};
+
+/** A per-field merge conflict resolution choice. */
+export type ConflictChoice = "ours" | "theirs" | "override";
+
+/**
+ * One field of the selected document that couldn't merge automatically. `before`
+ * is the target/HEAD value, `after` the source value — the two sides the user
+ * picks between (or overrides). `field` is "" for the document body.
+ */
+export type FieldConflict = {
+  id: string;
+  field: string;
+  isBody: boolean;
+  before?: unknown;
+  after?: unknown;
+  resolution?: ConflictChoice | null;
+};
+
+export type ChangeDetailProps = {
+  change?: DocumentChange;
+  loading?: boolean;
+  /** Shown when nothing is selected. */
+  emptyMessage?: string;
+  /**
+   * Merge conflicts for the selected document. A field with a conflict renders
+   * the red resolution control instead of its normal diff. Omitted → no
+   * conflicts (the read-only comparison view).
+   */
+  conflicts?: FieldConflict[];
+  onResolveConflict?: (conflict: FieldConflict, choice: ConflictChoice, override?: unknown) => void;
+};
+
+const STATUS_LABEL: Record<DocumentChange["status"], string> = {
+  A: "Added",
+  M: "Modified",
+  D: "Deleted",
+  R: "Renamed",
+};
+
+/** Renders a field value the way the editor would show it, not as raw JSON. */
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) return "—";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  // Objects and arrays (groups, lists, media references) have no single-line
+  // form; pretty JSON is honest about the shape rather than pretending it's text.
+  return JSON.stringify(value, null, 2);
+}
+
+/**
+ * One side of a field diff: the removed (−) or added (+) value, tinted with the
+ * diff signal colours — the only chromatic tokens in the system.
+ */
+function DiffLine({ sign, value, tone }: { sign: "+" | "−"; value: unknown; tone: "add" | "del" }) {
+  const t = useTheme();
+  const bg = tone === "add" ? t.color.diffAddBg : t.color.diffDelBg;
+  const fg = tone === "add" ? t.color.diffAddFg : t.color.diffDelFg;
+  return (
+    <View
+      testID={`diff-${tone}`}
+      style={{
+        flexDirection: "row",
+        gap: t.space(2),
+        paddingHorizontal: t.space(3),
+        paddingVertical: t.space(2),
+        backgroundColor: bg,
+      }}
+    >
+      <Text variant="mono" color={fg}>{sign}</Text>
+      <Text variant="mono" color={fg} style={{ flex: 1 }}>{formatValue(value)}</Text>
+    </View>
+  );
+}
+
+/** An unchanged value: same frame as a read-only input, no diff tint. */
+function ContextValue({ value }: { value: unknown }) {
+  const t = useTheme();
+  return (
+    <View
+      style={{
+        paddingHorizontal: t.space(3),
+        paddingVertical: t.space(2),
+        borderWidth: 1,
+        borderColor: t.color.borderDefault,
+        borderRadius: t.radius.md,
+        backgroundColor: t.color.surfaceRaised,
+      }}
+    >
+      <Text variant="mono" color="secondary">{formatValue(value)}</Text>
+    </View>
+  );
+}
+
+function FieldRow({ field }: { field: FieldChange }) {
+  const t = useTheme();
+  const changed = field.kind !== "unchanged";
+  return (
+    <View testID={`change-field-${field.name}`} style={{ gap: t.space(2) }}>
+      <Text variant="label" color="tertiary">
+        {(field.label || field.name).toUpperCase()}
+      </Text>
+      {changed ? (
+        <View
+          style={{
+            borderRadius: t.radius.md,
+            borderWidth: 1,
+            borderColor: t.color.borderSubtle,
+            overflow: "hidden",
+          }}
+        >
+          {field.kind !== "added" ? <DiffLine sign="−" value={field.before} tone="del" /> : null}
+          {field.kind !== "removed" ? <DiffLine sign="+" value={field.after} tone="add" /> : null}
+        </View>
+      ) : (
+        <ContextValue value={field.after} />
+      )}
+    </View>
+  );
+}
+
+/**
+ * A conflicted field: the two sides couldn't merge, so instead of a diff the user
+ * picks one — before (HEAD/target), after (Source) — or types an override. The
+ * whole row wears a subtle red wash so conflicts are unmistakable in a long form.
+ */
+function ConflictRow({
+  conflict,
+  label,
+  onResolve,
+}: {
+  conflict: FieldConflict;
+  label: string;
+  onResolve?: (choice: ConflictChoice, override?: unknown) => void;
+}) {
+  const t = useTheme();
+  const [overriding, setOverriding] = useState(conflict.resolution === "override");
+  const [draft, setDraft] = useState(
+    conflict.resolution === "override" ? "" : typeof conflict.after === "string" ? conflict.after : "",
+  );
+
+  const choiceButton = (choice: ConflictChoice, text: string) => {
+    const active = conflict.resolution === choice;
+    return (
+      <Pressable
+        testID={`conflict-${conflict.id}-${choice}`}
+        onPress={() => {
+          if (choice === "override") {
+            setOverriding(true);
+            return;
+          }
+          setOverriding(false);
+          onResolve?.(choice);
+        }}
+        style={({ pressed }) => ({
+          paddingHorizontal: t.space(2.5),
+          height: t.control.sm,
+          justifyContent: "center",
+          borderRadius: t.radius.sm,
+          borderWidth: 1,
+          borderColor: active ? t.color.borderStrong : t.color.borderDefault,
+          backgroundColor: active ? t.color.surfaceInverted : "transparent",
+          opacity: pressed ? 0.7 : 1,
+        })}
+      >
+        <Text variant="sm" weight={active ? "semibold" : "regular"} color={active ? t.color.textInverted : "secondary"}>
+          {text}
+        </Text>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View testID={`conflict-field-${conflict.field || "body"}`} style={{ gap: t.space(2) }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+        <Text variant="label" color="tertiary">{label.toUpperCase()}</Text>
+        <Badge label={conflict.resolution ? "Resolved" : "Conflict"} tone={conflict.resolution ? "add" : "del"} />
+      </View>
+
+      {/* The two candidate values, under the red wash. */}
+      <View
+        style={{
+          borderRadius: t.radius.md,
+          borderWidth: 1,
+          borderColor: t.color.diffDelFg,
+          backgroundColor: t.color.diffDelBg,
+          overflow: "hidden",
+        }}
+      >
+        <ConflictSide label="before" value={conflict.before} chosen={conflict.resolution === "ours"} />
+        <View style={{ height: 1, backgroundColor: t.color.diffDelFg, opacity: 0.3 }} />
+        <ConflictSide label="after" value={conflict.after} chosen={conflict.resolution === "theirs"} />
+      </View>
+
+      {/* Resolution controls. */}
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2), flexWrap: "wrap" }}>
+        {choiceButton("ours", "Use before")}
+        {choiceButton("theirs", "Use after")}
+        {choiceButton("override", "Override")}
+      </View>
+
+      {overriding ? (
+        <View style={{ gap: t.space(2) }}>
+          <Input value={draft} onChangeText={setDraft} placeholder="Enter a value" testID={`conflict-${conflict.id}-override-input`} />
+          <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
+            <Button
+              title="Save override"
+              variant="primary"
+              size="sm"
+              onPress={() => onResolve?.("override", draft)}
+              testID={`conflict-${conflict.id}-override-save`}
+            />
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function ConflictSide({ label, value, chosen }: { label: string; value: unknown; chosen: boolean }) {
+  const t = useTheme();
+  return (
+    <View style={{ paddingHorizontal: t.space(3), paddingVertical: t.space(2), gap: 2, backgroundColor: chosen ? t.color.diffAddBg : "transparent" }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(1.5) }}>
+        <Text variant="monoSm" color={chosen ? t.color.diffAddFg : "tertiary"}>{label}</Text>
+        {chosen ? <Icon name="check" size={12} color={t.color.diffAddFg} /> : null}
+      </View>
+      <Text variant="mono" color={chosen ? t.color.diffAddFg : "secondary"}>{formatValue(value)}</Text>
+    </View>
+  );
+}
+
+/**
+ * The body diff. Bodies are prose, so unlike a scalar field they are shown as
+ * stacked blocks rather than a single line — the whole before and the whole
+ * after, each tinted, so a reviewer can read them.
+ */
+function BodyDiff({ before, after }: { before?: string | null; after?: string | null }) {
+  const t = useTheme();
+  if ((before ?? "") === (after ?? "")) {
+    if (!after) return null;
+    return (
+      <View style={{ gap: t.space(2) }}>
+        <Text variant="label" color="tertiary">BODY</Text>
+        <ContextValue value={after} />
+      </View>
+    );
+  }
+  return (
+    <View testID="change-body" style={{ gap: t.space(2) }}>
+      <Text variant="label" color="tertiary">BODY</Text>
+      <View
+        style={{
+          borderRadius: t.radius.md,
+          borderWidth: 1,
+          borderColor: t.color.borderSubtle,
+          overflow: "hidden",
+        }}
+      >
+        {before ? <DiffLine sign="−" value={before} tone="del" /> : null}
+        {after ? <DiffLine sign="+" value={after} tone="add" /> : null}
+      </View>
+    </View>
+  );
+}
+
+// Which render classes are worth showing. A PDF or a video has no cheap inline
+// representation, so those fall through to their metadata rather than to a
+// broken frame.
+const PREVIEWABLE = new Set(["image", "svg"]);
+
+/**
+ * The asset itself, above its metadata. A modification shows both versions
+ * side by side under the same −/+ tinting as a field diff; an addition shows
+ * only the new one.
+ */
+function AssetPreview({ preview }: { preview: ChangePreview }) {
+  const t = useTheme();
+  if (!PREVIEWABLE.has(preview.kind ?? "")) return null;
+  // No current version means the file was deleted — there is nothing to show.
+  if (!preview.afterUrl) return null;
+
+  const frame = (url: string, tone: "add" | "del", label: string) => (
+    <View
+      key={label}
+      testID={`preview-${tone}`}
+      style={{
+        flex: 1,
+        gap: t.space(1),
+        padding: t.space(2),
+        borderRadius: t.radius.md,
+        backgroundColor: tone === "add" ? t.color.diffAddBg : t.color.diffDelBg,
+      }}
+    >
+      <Text variant="monoSm" color={tone === "add" ? t.color.diffAddFg : t.color.diffDelFg}>
+        {label}
+      </Text>
+      <Image
+        source={{ uri: url }}
+        // contain, not cover: this is a diff, and cropping to fill would hide
+        // the very change (an aspect-ratio or framing edit) being reviewed.
+        resizeMode="contain"
+        style={{ width: "100%", height: 180, borderRadius: t.radius.sm }}
+        accessibilityLabel={`${label} version`}
+      />
+    </View>
+  );
+
+  const showBefore = !!preview.beforeUrl;
+  return (
+    <View testID="change-preview" style={{ gap: t.space(2) }}>
+      <Text variant="label" color="tertiary">PREVIEW</Text>
+      <View style={{ flexDirection: "row", gap: t.space(2) }}>
+        {showBefore ? frame(preview.beforeUrl!, "del", "− before") : null}
+        {frame(preview.afterUrl, "add", showBefore ? "+ after" : "+ added")}
+      </View>
+    </View>
+  );
+}
+
+/**
+ * The changes surface's detail pane: one document rendered field by field, with
+ * changed fields showing their before/after and unchanged fields shown as
+ * context. Strictly read-only — editing happens on the Edit surface, and this
+ * view describes a comparison rather than a document you can save.
+ */
+export function ChangeDetail({ change, loading, emptyMessage = "Select a change", conflicts, onResolveConflict }: ChangeDetailProps) {
+  const t = useTheme();
+
+  // Conflicts keyed by field name (and a body flag), so each field can check for
+  // one as it renders. The body conflict is looked up separately.
+  const conflictByField = new Map<string, FieldConflict>();
+  let bodyConflict: FieldConflict | undefined;
+  for (const c of conflicts ?? []) {
+    if (c.isBody) bodyConflict = c;
+    else conflictByField.set(c.field, c);
+  }
+
+  if (loading) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <Text variant="monoSm" color="tertiary" testID="change-loading">Loading…</Text>
+      </View>
+    );
+  }
+  if (!change) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
+        <Text variant="body" color="tertiary" testID="change-empty">{emptyMessage}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View testID="change-detail" style={{ flex: 1, minHeight: 0, backgroundColor: t.color.surfacePage }}>
+      <View
+        style={{
+          height: t.layout.topbar,
+          paddingHorizontal: t.space(4),
+          flexDirection: "row",
+          alignItems: "center",
+          gap: t.space(2),
+          borderBottomWidth: 1,
+          borderBottomColor: t.color.borderSubtle,
+        }}
+      >
+        <Icon name="file" size={15} color={t.color.textSecondary} />
+        <Text variant="monoSm" numberOfLines={1} style={{ flex: 1 }}>{change.path}</Text>
+        <Badge label={STATUS_LABEL[change.status]} tone={change.status === "D" ? "del" : change.status === "A" ? "add" : "neutral"} />
+        <DiffStat added={change.added} removed={change.removed} />
+      </View>
+
+      <ScrollView
+        key={change.path}
+        testID="change-scroll"
+        style={{ flex: 1, minHeight: 0 }}
+        contentContainerStyle={{ padding: t.space(5), gap: t.space(4) }}
+      >
+        {change.previousPath ? (
+          <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+            <Text variant="monoSm" color="tertiary">{change.previousPath}</Text>
+            <Text variant="monoSm" color="tertiary">→</Text>
+            <Text variant="monoSm">{change.path}</Text>
+          </View>
+        ) : null}
+        {change.preview ? <AssetPreview preview={change.preview} /> : null}
+        {change.fields.map((f) => {
+          const conflict = conflictByField.get(f.name);
+          conflictByField.delete(f.name); // consumed → the leftovers render below
+          return conflict ? (
+            <ConflictRow
+              key={f.name}
+              conflict={conflict}
+              label={f.label || f.name}
+              onResolve={onResolveConflict ? (choice, override) => onResolveConflict(conflict, choice, override) : undefined}
+            />
+          ) : (
+            <FieldRow key={f.name} field={f} />
+          );
+        })}
+        {/* Conflicts on fields the schema-ordered diff didn't surface (rare). */}
+        {[...conflictByField.values()].map((c) => (
+          <ConflictRow
+            key={c.field}
+            conflict={c}
+            label={c.field}
+            onResolve={onResolveConflict ? (choice, override) => onResolveConflict(c, choice, override) : undefined}
+          />
+        ))}
+        {bodyConflict ? (
+          <ConflictRow
+            conflict={bodyConflict}
+            label="Body"
+            onResolve={onResolveConflict ? (choice, override) => onResolveConflict(bodyConflict!, choice, override) : undefined}
+          />
+        ) : (
+          <BodyDiff before={change.bodyBefore} after={change.bodyAfter} />
+        )}
+      </ScrollView>
+    </View>
+  );
+}

package/src/components/ChangeRequestSummary.tsx

@@ -0,0 +1,173 @@
+import React from "react";
+import { View, ScrollView, Linking } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Button } from "./Button";
+import { Badge } from "./primitives";
+
+export type ChangeRequestComment = {
+  author: string;
+  body: string;
+  createdAt: string;
+};
+
+export type ChangeRequestSummaryData = {
+  id: string;
+  status: "open" | "rejected" | "completed" | string;
+  sourceBranch: string;
+  targetBranch: string;
+  prNumber: number;
+  prUrl: string;
+  explanation: string;
+  conflictFiles: string[];
+  mergeBranch: string;
+  description?: string | null;
+  comments: ChangeRequestComment[];
+};
+
+export type ChangeRequestSummaryProps = {
+  data: ChangeRequestSummaryData;
+  /** The repository's clone URL, for the developer instructions. */
+  cloneUrl?: string;
+  /** Back to the changes view. */
+  onBack?: () => void;
+};
+
+const STATUS_TONE: Record<string, "neutral" | "add" | "del" | "strong"> = {
+  open: "neutral",
+  completed: "add",
+  rejected: "del",
+};
+
+/**
+ * The change-request summary surface: the escalated pull request's description
+ * and comments, the conflicting files, and developer instructions for resolving
+ * them locally or on GitHub. Read-only — the developer acts on GitHub, and the
+ * webhook drives the status.
+ */
+export function ChangeRequestSummary({ data, cloneUrl, onBack }: ChangeRequestSummaryProps) {
+  const t = useTheme();
+  const tone = STATUS_TONE[data.status] ?? "neutral";
+  const open = data.status === "open";
+  // `data` may come from the lighter openChangeRequest fragment, which omits the
+  // live comments/description until the full query resolves.
+  const comments = data.comments ?? [];
+  const conflictFiles = data.conflictFiles ?? [];
+
+  return (
+    <ScrollView
+      testID="change-request-summary"
+      style={{ flex: 1 }}
+      contentContainerStyle={{ padding: t.space(5), gap: t.space(5), maxWidth: 820, width: "100%", alignSelf: "center" }}
+    >
+      {/* Header */}
+      <View style={{ gap: t.space(3) }}>
+        {onBack ? (
+          <Button title="Back to changes" variant="ghost" size="sm" iconLeft="chevronLeft" onPress={onBack} testID="cr-back" />
+        ) : null}
+        <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(3), flexWrap: "wrap" }}>
+          <Icon name="gitPullRequest" size={20} color={t.color.textSecondary} />
+          <Text variant="h2" weight="semibold">Change request</Text>
+          <Badge tone={tone} label={data.status} testID="cr-status" />
+          <Text variant="monoSm" color="tertiary">{`#${data.prNumber}`}</Text>
+        </View>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+          <BranchChip name={data.sourceBranch} />
+          <Text variant="monoSm" color="tertiary">→</Text>
+          <BranchChip name={data.targetBranch} />
+        </View>
+        <View style={{ flexDirection: "row", gap: t.space(2) }}>
+          <Button title="Open on GitHub" variant="primary" size="sm" iconLeft="link" onPress={() => Linking.openURL(data.prUrl)} testID="cr-open-github" />
+        </View>
+      </View>
+
+      {/* Explanation / description */}
+      <Section title="Description">
+        {data.explanation ? <Text variant="body" color="primary">{data.explanation}</Text> : null}
+        {data.description ? (
+          <Text variant="body" color="secondary" style={{ marginTop: t.space(2) }}>{data.description}</Text>
+        ) : null}
+      </Section>
+
+      {/* Conflicting files */}
+      <Section title={`Conflicting files (${conflictFiles.length})`}>
+        {conflictFiles.length === 0 ? (
+          <Text variant="body" color="tertiary">None recorded.</Text>
+        ) : (
+          <View style={{ gap: 2 }}>
+            {conflictFiles.map((f) => (
+              <View key={f} style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+                <Icon name="fileText" size={14} color={t.color.diffDelFg} />
+                <Text variant="monoSm" color={t.color.diffDelFg} testID={`cr-file-${f}`}>{f}</Text>
+              </View>
+            ))}
+          </View>
+        )}
+      </Section>
+
+      {/* Developer instructions */}
+      {open ? (
+        <Section title="Resolve it">
+          <Text variant="body" color="secondary">
+            The CMS content is already merged on this branch. The files above changed on both branches — merge the pull request and resolve them with normal git conflict resolution (on GitHub, or locally):
+          </Text>
+          <View style={{ gap: 2, padding: t.space(3), borderRadius: t.radius.md, backgroundColor: t.color.surfaceSunken }}>
+            {cloneUrl ? <Text variant="monoSm" color="secondary">{`git clone ${cloneUrl}`}</Text> : null}
+            <Text variant="monoSm" color="secondary">{`git fetch origin ${data.targetBranch} ${data.mergeBranch}`}</Text>
+            <Text variant="monoSm" color="secondary">{`git checkout ${data.mergeBranch}`}</Text>
+            <Text variant="monoSm" color="secondary">{`git merge origin/${data.targetBranch}`}</Text>
+            {conflictFiles.map((f) => (
+              <Text key={f} variant="monoSm" color="tertiary">{`# resolve ${f}`}</Text>
+            ))}
+          </View>
+        </Section>
+      ) : null}
+
+      {/* Comments */}
+      <Section title={`Comments (${comments.length})`}>
+        {comments.length === 0 ? (
+          <Text variant="body" color="tertiary">No comments yet.</Text>
+        ) : (
+          <View style={{ gap: t.space(3) }}>
+            {comments.map((c, i) => (
+              <View key={i} style={{ gap: 2, padding: t.space(3), borderRadius: t.radius.md, borderWidth: 1, borderColor: t.color.borderDefault }}>
+                <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+                  <Text variant="body" weight="medium">{c.author}</Text>
+                  <Text variant="monoSm" color="tertiary">{c.createdAt.slice(0, 10)}</Text>
+                </View>
+                <Text variant="body" color="secondary">{c.body}</Text>
+              </View>
+            ))}
+          </View>
+        )}
+      </Section>
+    </ScrollView>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  const t = useTheme();
+  return (
+    <View style={{ gap: t.space(2) }}>
+      <Text variant="h3" weight="semibold">{title}</Text>
+      {children}
+    </View>
+  );
+}
+
+function BranchChip({ name }: { name: string }) {
+  const t = useTheme();
+  return (
+    <View
+      style={{
+        flexDirection: "row", alignItems: "center", gap: 6,
+        paddingHorizontal: t.space(2), height: t.control.sm,
+        borderRadius: t.radius.md, borderWidth: 1, borderColor: t.color.borderDefault,
+      }}
+    >
+      <Icon name="gitBranch" size={13} color={t.color.textSecondary} />
+      <Text variant="monoSm" color="secondary">{name}</Text>
+    </View>
+  );
+}