@elabs-ai/components-ui 4.0.0

package/src/components/list-editor/list-editor.test.tsx

@@ -0,0 +1,96 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ListEditor } from "./list-editor";
+
+describe("ListEditor", () => {
+  it("renders one input per row", () => {
+    render(<ListEditor defaultValue={["a", "b", "c"]} />);
+    expect(screen.getAllByRole("textbox")).toHaveLength(3);
+  });
+
+  it("renders a real empty state for an empty list", () => {
+    render(<ListEditor defaultValue={[]} />);
+    expect(screen.getByText("No items yet.")).toBeInTheDocument();
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+  });
+
+  it("adds a row via the Add item button", async () => {
+    const onValueChange = vi.fn();
+    render(<ListEditor defaultValue={["a"]} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("button", { name: /add item/i }));
+    expect(onValueChange).toHaveBeenCalledWith(["a", ""]);
+  });
+
+  it("edits a row's value", async () => {
+    const onValueChange = vi.fn();
+    render(<ListEditor defaultValue={["a", "b"]} onValueChange={onValueChange} />);
+    const input = screen.getByRole("textbox", { name: "Item 1" });
+    await userEvent.type(input, "x");
+    expect(onValueChange).toHaveBeenLastCalledWith(["ax", "b"]);
+  });
+
+  it("removes a row via the remove button", async () => {
+    const onValueChange = vi.fn();
+    render(<ListEditor defaultValue={["a", "b"]} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("button", { name: "Remove item 1" }));
+    expect(onValueChange).toHaveBeenCalledWith(["b"]);
+  });
+
+  it("moves a row up via the move-up button (keyboard-operable, real <button>)", async () => {
+    const onValueChange = vi.fn();
+    render(<ListEditor defaultValue={["a", "b", "c"]} onValueChange={onValueChange} />);
+    const moveUp = screen.getByRole("button", { name: "Move item 2 up" });
+    expect(moveUp.tagName).toBe("BUTTON");
+    await userEvent.click(moveUp);
+    expect(onValueChange).toHaveBeenCalledWith(["b", "a", "c"]);
+  });
+
+  it("moves a row down via the move-down button", async () => {
+    const onValueChange = vi.fn();
+    render(<ListEditor defaultValue={["a", "b", "c"]} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("button", { name: "Move item 1 down" }));
+    expect(onValueChange).toHaveBeenCalledWith(["b", "a", "c"]);
+  });
+
+  it("disables move-up on the first row and move-down on the last row", () => {
+    render(<ListEditor defaultValue={["a", "b"]} />);
+    expect(screen.getByRole("button", { name: "Move item 1 up" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Move item 2 down" })).toBeDisabled();
+  });
+
+  it("move-up/move-down buttons are reachable via Tab and activate via Enter", async () => {
+    const onValueChange = vi.fn();
+    render(<ListEditor defaultValue={["a", "b"]} onValueChange={onValueChange} />);
+    const moveDown = screen.getByRole("button", { name: "Move item 1 down" });
+    moveDown.focus();
+    expect(moveDown).toHaveFocus();
+    await userEvent.keyboard("{Enter}");
+    expect(onValueChange).toHaveBeenCalledWith(["b", "a"]);
+  });
+
+  it("hides reorder buttons when reorderable=false", () => {
+    render(<ListEditor defaultValue={["a", "b"]} reorderable={false} />);
+    // Anchored at the start — "Remove item 1" contains the substring "move
+    // item" (as in "Re-move item"), so an unanchored /move item/i overmatches.
+    expect(screen.queryByRole("button", { name: /^move item/i })).not.toBeInTheDocument();
+  });
+
+  it("enforces max row count", () => {
+    render(<ListEditor defaultValue={["a", "b"]} max={2} />);
+    expect(screen.getByRole("button", { name: /add item/i })).toBeDisabled();
+  });
+
+  it("supports the controlled mode via value/onValueChange", async () => {
+    const onValueChange = vi.fn();
+    render(<ListEditor value={["a"]} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("button", { name: /add item/i }));
+    expect(onValueChange).toHaveBeenCalledWith(["a", ""]);
+  });
+
+  it("is disabled when disabled prop is set", () => {
+    render(<ListEditor defaultValue={["a"]} disabled />);
+    expect(screen.getByRole("textbox", { name: "Item 1" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /add item/i })).toBeDisabled();
+  });
+});

package/src/components/list-editor/list-editor.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { ChevronDown, ChevronUp, Plus, X } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Button } from "../button";
+import { Input } from "../input";
+import { useLocale } from "../locale-provider";
+
+export interface ListEditorProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "defaultValue"
+> {
+  /** Controlled list of strings. */
+  value?: string[];
+  /** Uncontrolled initial list of strings. */
+  defaultValue?: string[];
+  /** Called when the list changes (add, remove, edit, or reorder). */
+  onValueChange?: (value: string[]) => void;
+  /**
+   * Whether rows can be reordered via move-up/move-down buttons. Default
+   * true. Reordering is keyboard-operable (real buttons), never drag-only.
+   */
+  reorderable?: boolean;
+  /** Placeholder shown in each row's text field. */
+  placeholder?: string;
+  /** Maximum number of rows allowed. */
+  max?: number;
+  /** Whether the editor is disabled. */
+  disabled?: boolean;
+  /** Label for the "add item" control. */
+  addLabel?: ReactNode;
+}
+
+/**
+ * ListEditor — one `Input` per row over a `string[]`, with add / remove /
+ * keyboard-operable reorder (move-up/move-down buttons, not drag-and-drop —
+ * no drag library exists in the monorepo and none should be added for this).
+ *
+ * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.
+ */
+export const ListEditor = forwardRef<HTMLDivElement, ListEditorProps>(function ListEditor(
+  {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    reorderable = true,
+    placeholder,
+    max,
+    disabled,
+    addLabel,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const { t } = useLocale();
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState<string[]>(defaultValue ?? []);
+  const rows = useMemo(
+    () => (isControlled ? (valueProp ?? []) : internalValue),
+    [isControlled, valueProp, internalValue],
+  );
+
+  const commit = useCallback(
+    (next: string[]) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const addRow = useCallback(() => {
+    if (max !== undefined && rows.length >= max) return;
+    commit([...rows, ""]);
+  }, [rows, max, commit]);
+
+  const updateRow = useCallback(
+    (index: number, next: string) => {
+      commit(rows.map((row, i) => (i === index ? next : row)));
+    },
+    [rows, commit],
+  );
+
+  const removeRow = useCallback(
+    (index: number) => {
+      commit(rows.filter((_, i) => i !== index));
+    },
+    [rows, commit],
+  );
+
+  const moveRow = useCallback(
+    (index: number, direction: -1 | 1) => {
+      const target = index + direction;
+      if (target < 0 || target >= rows.length) return;
+      const next = [...rows];
+      const [moved] = next.splice(index, 1);
+      next.splice(target, 0, moved!);
+      commit(next);
+    },
+    [rows, commit],
+  );
+
+  const atMax = max !== undefined && rows.length >= max;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="list-editor"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    >
+      {rows.length === 0 ? (
+        <p data-slot="list-editor-empty" className="text-body text-muted-foreground">
+          {t("ui.listEditor.empty")}
+        </p>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {rows.map((row, index) => (
+            <div key={index} data-slot="list-editor-row" className="flex items-center gap-1">
+              <Input
+                data-slot="list-editor-item"
+                value={row}
+                placeholder={placeholder}
+                disabled={disabled}
+                aria-label={t("ui.listEditor.itemLabel", { n: index + 1 })}
+                onChange={(event) => updateRow(index, event.target.value)}
+                className="flex-1"
+              />
+              {reorderable && (
+                <>
+                  <Button
+                    data-slot="list-editor-move-up"
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    disabled={disabled || index === 0}
+                    aria-label={t("ui.listEditor.moveUp", { n: index + 1 })}
+                    onClick={() => moveRow(index, -1)}
+                  >
+                    <ChevronUp aria-hidden="true" />
+                  </Button>
+                  <Button
+                    data-slot="list-editor-move-down"
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    disabled={disabled || index === rows.length - 1}
+                    aria-label={t("ui.listEditor.moveDown", { n: index + 1 })}
+                    onClick={() => moveRow(index, 1)}
+                  >
+                    <ChevronDown aria-hidden="true" />
+                  </Button>
+                </>
+              )}
+              <Button
+                data-slot="list-editor-remove"
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                disabled={disabled}
+                aria-label={t("ui.listEditor.removeItem", { n: index + 1 })}
+                onClick={() => removeRow(index)}
+              >
+                <X aria-hidden="true" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+      <Button
+        data-slot="list-editor-add"
+        type="button"
+        variant="outline-subtle"
+        size="sm"
+        disabled={disabled || atMax}
+        onClick={addRow}
+        className="self-start"
+      >
+        <Plus aria-hidden="true" />
+        {addLabel ?? t("ui.listEditor.addItem")}
+      </Button>
+    </div>
+  );
+});

package/src/components/loading-state/index.ts

@@ -0,0 +1 @@
+export { LoadingState, type LoadingStateProps } from "./loading-state";

package/src/components/loading-state/loading-state.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LoadingState } from "./loading-state";
+
+const meta = {
+  title: "States/LoadingState",
+  component: LoadingState,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '@deprecated — use `<StatePanel kind="loading" />` instead. Thin back-compat wrapper.',
+      },
+    },
+  },
+  argTypes: {
+    label: {
+      description: 'Accessible status label shown below the spinner. Default "Loading…".',
+      control: "text",
+      table: { category: "Content" },
+    },
+    size: {
+      description: "Visual size of the spinner.",
+      control: { type: "radio" },
+      options: ["sm", "md", "lg"],
+      table: { category: "Appearance" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the container.",
+      control: "text",
+      table: { category: "Styling" },
+    },
+  },
+} satisfies Meta<typeof LoadingState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: "Loading workspace…" } };

package/src/components/loading-state/loading-state.tsx

@@ -0,0 +1,26 @@
+/**
+ * @deprecated Use `StatePanel kind="loading"` from `@elabs-ai/components-ui` instead.
+ * This wrapper is kept for back-compat and will be removed in a future release.
+ */
+import { type ReactNode } from "react";
+import { StatePanel } from "../state-panel/state-panel";
+
+export interface LoadingStateProps {
+  /** Accessible status label. Defaults to "Loading…". */
+  label?: ReactNode;
+  /** Visual size of the spinner. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+/** @deprecated Use `<StatePanel kind="loading" />` instead. */
+export function LoadingState({ label = "Loading…", size = "md", className }: LoadingStateProps) {
+  return (
+    <StatePanel
+      kind="loading"
+      loadingLabel={typeof label === "string" ? label : undefined}
+      size={size}
+      className={className}
+    />
+  );
+}

package/src/components/locale-provider/index.ts

@@ -0,0 +1,8 @@
+export {
+  LocaleProvider,
+  useLocale,
+  type LocaleContextValue,
+  type LocaleProviderProps,
+  type Messages,
+} from "./locale-provider";
+export { DEFAULT_MESSAGES } from "./messages";

package/src/components/locale-provider/locale-provider.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LocaleProvider, useLocale } from "./locale-provider";
+
+const meta = {
+  title: "Providers/LocaleProvider",
+  component: LocaleProvider,
+  tags: ["autodocs"],
+} satisfies Meta<typeof LocaleProvider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Demo component: reads the active locale context
+// ---------------------------------------------------------------------------
+
+function LocaleDemo() {
+  const { locale, dir, t, formatNumber, formatDate } = useLocale();
+  return (
+    <div className="space-y-2 rounded-md border border-border p-4 text-body">
+      <p>
+        <span className="font-medium text-muted-foreground">locale: </span>
+        {locale}
+      </p>
+      <p>
+        <span className="font-medium text-muted-foreground">dir: </span>
+        {dir}
+      </p>
+      <p>
+        <span className="font-medium text-muted-foreground">t(&quot;next&quot;): </span>
+        {t("next")}
+      </p>
+      <p>
+        <span className="font-medium text-muted-foreground">t(&quot;previous&quot;): </span>
+        {t("previous")}
+      </p>
+      <p>
+        <span className="font-medium text-muted-foreground">t(&quot;close&quot;): </span>
+        {t("close")}
+      </p>
+      <p>
+        <span className="font-medium text-muted-foreground">
+          formatNumber(1234567.89, currency EUR):{" "}
+        </span>
+        {formatNumber(1234567.89, { style: "currency", currency: "EUR" })}
+      </p>
+      <p>
+        <span className="font-medium text-muted-foreground">formatDate(2026-06-08): </span>
+        {formatDate(new Date(2026, 5, 8))}
+      </p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+/** English (en-US) locale — the default. */
+export const Default: Story = {
+  render: () => (
+    <LocaleProvider locale="en-US" dir="ltr">
+      <LocaleDemo />
+    </LocaleProvider>
+  ),
+};
+
+/**
+ * Arabic (ar-EG) locale with RTL direction.
+ * Overrides `next` and `previous` keys; other keys fall back to the English defaults.
+ */
+export const RtlArabic: Story = {
+  render: () => (
+    <LocaleProvider locale="ar-EG" dir="rtl" messages={{ next: "التالي", previous: "السابق" }}>
+      <LocaleDemo />
+    </LocaleProvider>
+  ),
+};
+
+/** Without a provider — `useLocale` degrades to en-US / ltr defaults. */
+export const NoProvider: Story = {
+  render: () => <LocaleDemo />,
+};

package/src/components/locale-provider/locale-provider.test.tsx

@@ -0,0 +1,238 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { createPortal } from "react-dom";
+import { useDirection } from "@radix-ui/react-direction";
+import { LocaleProvider, useLocale } from "./locale-provider";
+
+// ---------------------------------------------------------------------------
+// Helper component — renders all locale values as text
+// ---------------------------------------------------------------------------
+
+function LocaleReader({ numberInput, dateInput }: { numberInput?: number; dateInput?: Date }) {
+  const { locale, dir, t, formatNumber, formatDate } = useLocale();
+  return (
+    <div>
+      <span data-testid="locale">{locale}</span>
+      <span data-testid="dir">{dir}</span>
+      <span data-testid="close">{t("close")}</span>
+      <span data-testid="next">{t("next")}</span>
+      <span data-testid="previous">{t("previous")}</span>
+      {numberInput !== undefined && <span data-testid="number">{formatNumber(numberInput)}</span>}
+      {dateInput !== undefined && <span data-testid="date">{formatDate(dateInput)}</span>}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("useLocale (no provider)", () => {
+  it("returns en-US locale and ltr direction", () => {
+    render(<LocaleReader />);
+    expect(screen.getByTestId("locale").textContent).toBe("en-US");
+    expect(screen.getByTestId("dir").textContent).toBe("ltr");
+  });
+
+  it("t('close') returns the English default 'Close'", () => {
+    render(<LocaleReader />);
+    expect(screen.getByTestId("close").textContent).toBe("Close");
+  });
+
+  it("t('next') returns the English default 'Next'", () => {
+    render(<LocaleReader />);
+    expect(screen.getByTestId("next").textContent).toBe("Next");
+  });
+});
+
+describe("LocaleProvider — default en-US", () => {
+  it("provides locale and dir to children", () => {
+    render(
+      <LocaleProvider locale="en-US" dir="ltr">
+        <LocaleReader />
+      </LocaleProvider>,
+    );
+    expect(screen.getByTestId("locale").textContent).toBe("en-US");
+    expect(screen.getByTestId("dir").textContent).toBe("ltr");
+  });
+
+  it("applies dir attribute to the wrapper element", () => {
+    const { container } = render(
+      <LocaleProvider locale="en-US" dir="ltr">
+        <span>content</span>
+      </LocaleProvider>,
+    );
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper.getAttribute("dir")).toBe("ltr");
+  });
+
+  it("t('close') returns English default when no messages override provided", () => {
+    render(
+      <LocaleProvider>
+        <LocaleReader />
+      </LocaleProvider>,
+    );
+    expect(screen.getByTestId("close").textContent).toBe("Close");
+  });
+});
+
+describe("LocaleProvider — custom messages", () => {
+  it("overrides t() for the provided keys", () => {
+    render(
+      <LocaleProvider messages={{ next: "Weiter", previous: "Zurück" }}>
+        <LocaleReader />
+      </LocaleProvider>,
+    );
+    expect(screen.getByTestId("next").textContent).toBe("Weiter");
+    expect(screen.getByTestId("previous").textContent).toBe("Zurück");
+  });
+
+  it("non-overridden keys fall through to English defaults", () => {
+    render(
+      <LocaleProvider messages={{ next: "Weiter" }}>
+        <LocaleReader />
+      </LocaleProvider>,
+    );
+    // "close" was not overridden
+    expect(screen.getByTestId("close").textContent).toBe("Close");
+  });
+});
+
+describe("LocaleProvider — RTL Arabic", () => {
+  it("provides ar-EG locale and rtl direction", () => {
+    render(
+      <LocaleProvider locale="ar-EG" dir="rtl" messages={{ next: "التالي", previous: "السابق" }}>
+        <LocaleReader />
+      </LocaleProvider>,
+    );
+    expect(screen.getByTestId("locale").textContent).toBe("ar-EG");
+    expect(screen.getByTestId("dir").textContent).toBe("rtl");
+  });
+
+  it("applies dir='rtl' on the wrapper element", () => {
+    const { container } = render(
+      <LocaleProvider locale="ar-EG" dir="rtl">
+        <span>content</span>
+      </LocaleProvider>,
+    );
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper.getAttribute("dir")).toBe("rtl");
+  });
+
+  it("t() returns overridden Arabic strings", () => {
+    render(
+      <LocaleProvider locale="ar-EG" dir="rtl" messages={{ next: "التالي", previous: "السابق" }}>
+        <LocaleReader />
+      </LocaleProvider>,
+    );
+    expect(screen.getByTestId("next").textContent).toBe("التالي");
+    expect(screen.getByTestId("previous").textContent).toBe("السابق");
+  });
+});
+
+describe("LocaleProvider — formatNumber", () => {
+  it("formats a number in en-US locale", () => {
+    render(
+      <LocaleProvider locale="en-US">
+        <LocaleReader numberInput={1234567.89} />
+      </LocaleProvider>,
+    );
+    // en-US formats with comma thousands separator
+    const text = screen.getByTestId("number").textContent ?? "";
+    expect(text).toMatch(/1[,.]?234/);
+  });
+
+  it("formats without a provider (en-US default)", () => {
+    render(<LocaleReader numberInput={42} />);
+    expect(screen.getByTestId("number").textContent).toBe("42");
+  });
+});
+
+describe("LocaleProvider — formatDate", () => {
+  it("formats a date in en-US locale", () => {
+    render(
+      <LocaleProvider locale="en-US">
+        <LocaleReader dateInput={new Date(2026, 5, 8)} />
+      </LocaleProvider>,
+    );
+    const text = screen.getByTestId("date").textContent ?? "";
+    // en-US default format includes the year 2026
+    expect(text).toContain("2026");
+  });
+
+  it("formats without a provider (en-US default)", () => {
+    render(<LocaleReader dateInput={new Date(2026, 5, 8)} />);
+    const text = screen.getByTestId("date").textContent ?? "";
+    expect(text).toContain("2026");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// DirectionProvider — RTL reaches portalled content (ADR-0014, #181)
+// ---------------------------------------------------------------------------
+
+/**
+ * Reads Radix's direction context (the channel every portalled Radix overlay
+ * uses) and renders it through a PORTAL to document.body — i.e. outside the
+ * `<div dir>` DOM ancestor. React context flows through portals, so this proves
+ * `DirectionProvider` (not the DOM `dir`) is what carries direction to overlays.
+ */
+function PortaledDirectionReader() {
+  const dir = useDirection();
+  return createPortal(<span data-testid="portal-dir">{dir}</span>, document.body);
+}
+
+describe("LocaleProvider — DirectionProvider (RTL portals)", () => {
+  it("provides dir='rtl' to portalled content via Radix direction context", () => {
+    render(
+      <LocaleProvider locale="ar-EG" dir="rtl">
+        <PortaledDirectionReader />
+      </LocaleProvider>,
+    );
+    expect(screen.getByTestId("portal-dir").textContent).toBe("rtl");
+  });
+
+  it("defaults portalled content to ltr", () => {
+    render(
+      <LocaleProvider>
+        <PortaledDirectionReader />
+      </LocaleProvider>,
+    );
+    expect(screen.getByTestId("portal-dir").textContent).toBe("ltr");
+  });
+});
+
+describe("t() — variable interpolation", () => {
+  function Interpolated({ vars }: { vars: Record<string, string | number> }) {
+    const { t } = useLocale();
+    return <span data-testid="result">{t("greeting", vars)}</span>;
+  }
+
+  it("substitutes {name}-style placeholders", () => {
+    render(
+      <LocaleProvider messages={{ greeting: "Hello, {name}!" }}>
+        <Interpolated vars={{ name: "World" }} />
+      </LocaleProvider>,
+    );
+    expect(screen.getByTestId("result").textContent).toBe("Hello, World!");
+  });
+
+  it("leaves unknown placeholders intact", () => {
+    render(
+      <LocaleProvider messages={{ greeting: "Hi {user}" }}>
+        <Interpolated vars={{ notUser: "Alice" }} />
+      </LocaleProvider>,
+    );
+    expect(screen.getByTestId("result").textContent).toBe("Hi {user}");
+  });
+
+  it("returns the key itself when the key is absent", () => {
+    render(
+      <LocaleProvider>
+        <Interpolated vars={{}} />
+      </LocaleProvider>,
+    );
+    // "greeting" is not in DEFAULT_MESSAGES
+    expect(screen.getByTestId("result").textContent).toBe("greeting");
+  });
+});