@multiplatform.one/components 6.1.0 → 6.3.0

package/src/layouts/PageSection.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Paragraph, YStack } from "tamagui";
+import { PageSection } from "./page";
+
+const meta: Meta<typeof PageSection> = {
+  title: "Components/PageSection",
+  component: PageSection,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Labeled content section: H2 title, optional description, divider, and optional soft card surface.",
+      },
+    },
+  },
+  argTypes: {
+    title: { control: "text" },
+    description: { control: "text" },
+    divider: { control: "boolean" },
+    surface: { control: "boolean" },
+  },
+  args: {
+    title: "Section title",
+    description: "Short description of what lives in this section",
+    divider: true,
+    surface: false,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof PageSection>;
+
+export const Default: Story = {
+  name: "Main",
+  render: (args) => (
+    <PageSection {...args}>
+      <Paragraph>Section body content.</Paragraph>
+    </PageSection>
+  ),
+};
+
+export const Surface: Story = {
+  args: { surface: true },
+  render: (args) => (
+    <PageSection {...args}>
+      <Paragraph>Content inside the soft card surface.</Paragraph>
+    </PageSection>
+  ),
+};
+
+export const HeaderOnly: Story = {
+  render: (args) => <PageSection {...args} />,
+};
+
+export const Empty: Story = {
+  args: { title: undefined, description: undefined },
+  render: (args) => <PageSection {...args} />,
+};
+
+export const LongHeading: Story = {
+  args: {
+    title:
+      "A very long section heading that keeps going well past a reasonable length to test wrapping behaviour",
+  },
+  render: (args) => (
+    <YStack maxWidth={360}>
+      <PageSection {...args}>
+        <Paragraph>Narrow container content.</Paragraph>
+      </PageSection>
+    </YStack>
+  ),
+};
+
+export const Nested: Story = {
+  args: { surface: true },
+  render: (args) => (
+    <PageSection {...args} title="Outer section">
+      <Paragraph>Outer content.</Paragraph>
+      <PageSection {...args} title="Inner section">
+        <Paragraph>Inner content — check for double borders/padding.</Paragraph>
+      </PageSection>
+    </PageSection>
+  ),
+};

package/src/layouts/PageTemplates.spec.tsx

@@ -0,0 +1,136 @@
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { layoutBreakpoints } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button, Paragraph } from "tamagui";
+import { CONTENT_MAX_WIDTH, PageSection, Screen } from "./page";
+import { DetailPageLayout, ListPageLayout, SettingsPageLayout } from "./PageTemplates";
+import * as Layouts from "./index";
+
+afterEach(cleanup);
+
+describe("layouts index exports (W11 templates)", () => {
+  it("exports page templates + content max-width token", () => {
+    expect(Layouts.ListPageLayout).toBe(ListPageLayout);
+    expect(Layouts.DetailPageLayout).toBe(DetailPageLayout);
+    expect(Layouts.SettingsPageLayout).toBe(SettingsPageLayout);
+    expect(Layouts.CONTENT_MAX_WIDTH).toBe(CONTENT_MAX_WIDTH);
+  });
+});
+
+describe("Screen content max-width (DG-LAY-01)", () => {
+  it("CONTENT_MAX_WIDTH is the canonical xl breakpoint", () => {
+    expect(CONTENT_MAX_WIDTH).toBe(layoutBreakpoints.xl);
+    expect(CONTENT_MAX_WIDTH).toBe(1280);
+  });
+
+  it("Screen defaults its content cap to CONTENT_MAX_WIDTH", () => {
+    renderWithProviders(
+      <Screen data-testid="screen-shell">
+        <Paragraph>Body</Paragraph>
+      </Screen>,
+    );
+    expect(screen.getByTestId("screen-shell")).toHaveStyle({
+      maxWidth: `${CONTENT_MAX_WIDTH}px`,
+    });
+  });
+});
+
+describe("ListPageLayout", () => {
+  it("renders header, toolbar slot, and flex content region", () => {
+    renderWithProviders(
+      <ListPageLayout
+        title="Pokemon"
+        subtitle="All records"
+        actions={<Button>New</Button>}
+        toolbar={<Paragraph>Filters</Paragraph>}
+      >
+        <Paragraph>Rows</Paragraph>
+      </ListPageLayout>,
+    );
+    expect(screen.getByText("Pokemon")).toBeInTheDocument();
+    expect(screen.getByText("All records")).toBeInTheDocument();
+    expect(screen.getByText("New")).toBeInTheDocument();
+    expect(screen.getByText("Filters")).toBeInTheDocument();
+    expect(screen.getByTestId("list-page-content")).toHaveTextContent("Rows");
+  });
+});
+
+describe("DetailPageLayout", () => {
+  it("shows main + aside side-by-side from expanded up (supporting pane)", () => {
+    renderWithProviders(
+      <DetailPageLayout sizeClass="expanded" title="Bulbasaur" aside={<Paragraph>Meta</Paragraph>}>
+        <Paragraph>Main</Paragraph>
+      </DetailPageLayout>,
+    );
+    const pane = screen.getByTestId("pane-scaffold");
+    expect(pane).toHaveAttribute("data-panes", "2");
+    expect(pane).toHaveAttribute("data-canonical", "supporting-pane");
+    expect(screen.getByText("Main")).toBeInTheDocument();
+    expect(screen.getByText("Meta")).toBeInTheDocument();
+  });
+
+  it("stacks the aside below main content on compact (never hidden)", () => {
+    renderWithProviders(
+      <DetailPageLayout sizeClass="compact" title="Bulbasaur" aside={<Paragraph>Meta</Paragraph>}>
+        <Paragraph>Main</Paragraph>
+      </DetailPageLayout>,
+    );
+    expect(screen.queryByTestId("pane-scaffold")).not.toBeInTheDocument();
+    const stack = screen.getByTestId("detail-page-stack");
+    expect(stack).toHaveTextContent("Main");
+    expect(stack).toHaveTextContent("Meta");
+  });
+
+  it("renders toolbar leading/trailing slots", () => {
+    renderWithProviders(
+      <DetailPageLayout
+        sizeClass="compact"
+        toolbarLeading={<Button>Back</Button>}
+        toolbarTrailing={<Button>Edit</Button>}
+      >
+        <Paragraph>Main</Paragraph>
+      </DetailPageLayout>,
+    );
+    expect(screen.getByText("Back")).toBeInTheDocument();
+    expect(screen.getByText("Edit")).toBeInTheDocument();
+  });
+
+  it("renders children directly when no aside is given", () => {
+    renderWithProviders(
+      <DetailPageLayout sizeClass="xl" title="Bulbasaur">
+        <Paragraph>Main only</Paragraph>
+      </DetailPageLayout>,
+    );
+    expect(screen.queryByTestId("pane-scaffold")).not.toBeInTheDocument();
+    expect(screen.getByText("Main only")).toBeInTheDocument();
+  });
+});
+
+describe("SettingsPageLayout", () => {
+  it("caps content at the expanded breakpoint by default", () => {
+    renderWithProviders(
+      <SettingsPageLayout title="Settings" data-testid="settings-shell">
+        <PageSection title="Profile">
+          <Paragraph>Fields</Paragraph>
+        </PageSection>
+      </SettingsPageLayout>,
+    );
+    expect(screen.getByTestId("settings-shell")).toHaveStyle({
+      maxWidth: `${layoutBreakpoints.expanded}px`,
+    });
+    expect(screen.getByText("Profile")).toBeInTheDocument();
+    expect(screen.getByText("Fields")).toBeInTheDocument();
+  });
+
+  it("honors a caller max-width override", () => {
+    renderWithProviders(
+      <SettingsPageLayout maxWidth={layoutBreakpoints.large} data-testid="settings-shell">
+        <Paragraph>Fields</Paragraph>
+      </SettingsPageLayout>,
+    );
+    expect(screen.getByTestId("settings-shell")).toHaveStyle({
+      maxWidth: `${layoutBreakpoints.large}px`,
+    });
+  });
+});

package/src/layouts/PageTemplates.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+// Catalog Button (G-15 story honesty / LC-18, UX-P06).
+import { Button } from "@multiplatform.one/forms";
+import { Paragraph, YStack } from "tamagui";
+import { PageSection } from "./page";
+import { DetailPageLayout, ListPageLayout, SettingsPageLayout } from "./PageTemplates";
+
+function ContentBox({
+  label,
+  minHeight = 160,
+  grow = true,
+}: {
+  label: string;
+  minHeight?: number;
+  grow?: boolean;
+}) {
+  return (
+    <YStack
+      flex={grow ? 1 : undefined}
+      minHeight={minHeight}
+      padding="$4"
+      backgroundColor="$color3"
+      borderWidth={1}
+      borderColor="$borderColor"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Paragraph fontWeight="600">{label}</Paragraph>
+    </YStack>
+  );
+}
+
+const meta: Meta<typeof ListPageLayout> = {
+  title: "Components/PageTemplates",
+  component: ListPageLayout,
+  parameters: {
+    status: { type: "beta" },
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Standard page templates (W11): ListPageLayout / DetailPageLayout / SettingsPageLayout. Thin shells over Screen + PageHeader + canonical scaffolds; breakpoints from theme layout tokens (DG-LAY-01/02), gaps semantic (DG-LAY-03). Field grids (forms' FormGrid) slot into settings content.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ListPageLayout>;
+
+export const ListPage: Story = {
+  name: "Main",
+  render: () => (
+    <ListPageLayout
+      title="Pokemon"
+      subtitle="All records in the collection"
+      actions={<Button>New</Button>}
+      toolbar={<ContentBox label="Filter / search toolbar slot" minHeight={48} grow={false} />}
+    >
+      <ContentBox label="List content (table / grid) — flex fills the page" minHeight={320} />
+    </ListPageLayout>
+  ),
+};
+
+export const DetailPage: StoryObj<typeof DetailPageLayout> = {
+  render: () => (
+    <DetailPageLayout
+      sizeClass="expanded"
+      title="Bulbasaur"
+      subtitle="Pokemon · #0001"
+      toolbarLeading={<Button variant="outlined">Back</Button>}
+      toolbarTrailing={<Button theme="accent">Edit</Button>}
+      aside={<ContentBox label="Aside (meta / timeline) ⅓" minHeight={240} />}
+    >
+      <ContentBox label="Main content ⅔" minHeight={240} />
+    </DetailPageLayout>
+  ),
+};
+
+export const DetailPageCompact: StoryObj<typeof DetailPageLayout> = {
+  render: () => (
+    <DetailPageLayout
+      sizeClass="compact"
+      title="Bulbasaur"
+      toolbarLeading={<Button variant="outlined">Back</Button>}
+      aside={<ContentBox label="Aside — stacked below, never hidden" minHeight={140} />}
+    >
+      <ContentBox label="Main content" minHeight={200} />
+    </DetailPageLayout>
+  ),
+};
+
+export const SettingsPage: StoryObj<typeof SettingsPageLayout> = {
+  render: () => (
+    <SettingsPageLayout title="Settings" subtitle="Workspace preferences">
+      <PageSection title="Profile" description="Name, avatar, contact details.">
+        <ContentBox label="Fields (FormGrid slots here)" minHeight={120} />
+      </PageSection>
+      <PageSection title="Notifications" description="Choose what you get notified about.">
+        <ContentBox label="Fields" minHeight={120} />
+      </PageSection>
+      <PageSection title="Danger zone" surface>
+        <ContentBox label="Destructive actions" minHeight={80} />
+      </PageSection>
+    </SettingsPageLayout>
+  ),
+};

package/src/layouts/PageTemplates.tsx

@@ -0,0 +1,203 @@
+/**
+ * Standard page templates (W11 close-out) — DG-LAY-01/02/03.
+ *
+ * Thin, compose-only shells over the existing page primitives (`Screen`,
+ * `PageHeader`, `ScreenToolbar`) and canonical scaffolds (`SupportingPaneLayout`).
+ * They exist so product screens declare intent ("this is a list page") instead
+ * of re-assembling scroll + max-width + header + pane plumbing by hand.
+ *
+ * - **ListPageLayout** — collection screens: header + optional filter toolbar +
+ *   a flex content region for tables / grids / feeds.
+ * - **DetailPageLayout** — single-record screens: back/actions toolbar + header +
+ *   main content with an optional supporting `aside` (⅔ / ⅓ from `expanded` up,
+ *   stacked below the main content on compact/medium).
+ * - **SettingsPageLayout** — form-heavy screens: content capped at the
+ *   `expanded` breakpoint for a comfortable form measure; sections stack with
+ *   the semantic between-groups gap. Field grids (e.g. forms' `FormGrid`)
+ *   slot into the children.
+ *
+ * Breakpoints come from the canonical layout tokens (DG-LAY-01) — no raw px.
+ */
+
+import {
+  defaultMaxPanes,
+  layoutBreakpoints,
+  useLayoutSizeClass,
+  useSemanticGaps,
+  type LayoutSizeClass,
+} from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { YStack } from "tamagui";
+import { PageHeader, Screen, ScreenToolbar, type ScreenProps } from "./page";
+import { SupportingPaneLayout } from "./PaneScaffold";
+
+// ── Shared header slot ─────────────────────────────────────────────────────
+
+interface TemplateHeaderProps {
+  title?: string;
+  subtitle?: string;
+  actions?: ReactNode;
+  /** Full override — replaces the default `PageHeader`. */
+  header?: ReactNode;
+}
+
+function renderTemplateHeader({ title, subtitle, actions, header }: TemplateHeaderProps) {
+  if (header !== undefined) return header;
+  if (!title && !subtitle && !actions) return null;
+  return <PageHeader title={title} subtitle={subtitle} actions={actions} />;
+}
+
+// ── ListPageLayout ─────────────────────────────────────────────────────────
+
+export interface ListPageLayoutProps extends ScreenProps, TemplateHeaderProps {
+  /** Filter / search / view-switcher row rendered between header and content. */
+  toolbar?: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Standard collection screen: `PageHeader` (title + actions), optional filter
+ * toolbar, then a flex content region so tables / image grids fill the page.
+ *
+ * @example
+ * <ListPageLayout title="Pokemon" actions={<ViewSwitcher … />}>
+ *   <FrappeListView doctype="Pokemon" flex={1} />
+ * </ListPageLayout>
+ */
+export function ListPageLayout({
+  title,
+  subtitle,
+  actions,
+  header,
+  toolbar,
+  children,
+  ...rest
+}: ListPageLayoutProps) {
+  return (
+    <Screen data-canonical="list-page" {...rest}>
+      {renderTemplateHeader({ title, subtitle, actions, header })}
+      {toolbar}
+      <YStack flex={1} minWidth={0} data-testid="list-page-content">
+        {children}
+      </YStack>
+    </Screen>
+  );
+}
+
+// ── DetailPageLayout ───────────────────────────────────────────────────────
+
+export interface DetailPageLayoutProps extends ScreenProps, TemplateHeaderProps {
+  /** Leading toolbar content (typically a back button). */
+  toolbarLeading?: ReactNode;
+  /** Trailing toolbar content (typically edit / primary actions). */
+  toolbarTrailing?: ReactNode;
+  /**
+   * Supporting content (metadata, timeline, related records). Side-by-side
+   * (⅔ / ⅓) from `expanded` (860) up; stacked below the main content on
+   * compact/medium — never hidden.
+   */
+  aside?: ReactNode;
+  /** Optional size-class override (tests / Storybook viewports). */
+  sizeClass?: LayoutSizeClass;
+  children: ReactNode;
+}
+
+/**
+ * Standard single-record screen: back/actions toolbar, header, main content
+ * with an optional supporting pane.
+ *
+ * @example
+ * <DetailPageLayout
+ *   title={displayName}
+ *   toolbarLeading={<Button onPress={back}>Back</Button>}
+ *   toolbarTrailing={<Button theme="accent">Edit</Button>}
+ *   aside={<Timeline … />}
+ * >
+ *   <FrappeForm doctype="Pokemon" name={id} />
+ * </DetailPageLayout>
+ */
+export function DetailPageLayout({
+  title,
+  subtitle,
+  actions,
+  header,
+  toolbarLeading,
+  toolbarTrailing,
+  aside,
+  sizeClass: sizeClassProp,
+  children,
+  ...rest
+}: DetailPageLayoutProps) {
+  const liveClass = useLayoutSizeClass();
+  const sizeClass = sizeClassProp ?? liveClass;
+  const multi = defaultMaxPanes(sizeClass) >= 2;
+  const gaps = useSemanticGaps();
+
+  const toolbar =
+    toolbarLeading || toolbarTrailing ? (
+      <ScreenToolbar leading={toolbarLeading} trailing={toolbarTrailing} />
+    ) : null;
+
+  let body: ReactNode;
+  if (aside === null || aside === undefined) {
+    body = children;
+  } else if (multi) {
+    body = (
+      <SupportingPaneLayout sizeClass={sizeClass} supporting={aside}>
+        {children}
+      </SupportingPaneLayout>
+    );
+  } else {
+    // Supporting content stays reachable on small viewports (stacked, not hidden).
+    body = (
+      <YStack {...gaps.betweenGroups} data-testid="detail-page-stack">
+        {children}
+        {aside}
+      </YStack>
+    );
+  }
+
+  return (
+    <Screen data-canonical="detail-page" {...rest}>
+      {toolbar}
+      {renderTemplateHeader({ title, subtitle, actions, header })}
+      {body}
+    </Screen>
+  );
+}
+
+// ── SettingsPageLayout ─────────────────────────────────────────────────────
+
+export interface SettingsPageLayoutProps extends ScreenProps, TemplateHeaderProps {
+  children: ReactNode;
+}
+
+/**
+ * Standard settings / preferences screen. Content is capped at the `expanded`
+ * breakpoint (860) — a comfortable measure for label + control rows — instead
+ * of the full `CONTENT_MAX_WIDTH`. Compose `PageSection` blocks as children;
+ * field grids (forms' `FormGrid`) collapse to one column on their own below
+ * their container threshold.
+ *
+ * @example
+ * <SettingsPageLayout title="Settings" subtitle="Workspace preferences">
+ *   <PageSection title="Profile">…fields…</PageSection>
+ *   <PageSection title="Notifications">…fields…</PageSection>
+ * </SettingsPageLayout>
+ */
+export function SettingsPageLayout({
+  title,
+  subtitle,
+  actions,
+  header,
+  maxWidth = layoutBreakpoints.expanded,
+  children,
+  ...rest
+}: SettingsPageLayoutProps) {
+  return (
+    <Screen data-canonical="settings-page" maxWidth={maxWidth} {...rest}>
+      {renderTemplateHeader({ title, subtitle, actions, header })}
+      {children}
+    </Screen>
+  );
+}

package/src/layouts/PaneScaffold.spec.tsx

@@ -0,0 +1,139 @@
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import { Paragraph, YStack } from "tamagui";
+import {
+  FeedLayout,
+  ListDetailLayout,
+  PaneScaffold,
+  ReadingWidth,
+  SupportingPaneLayout,
+} from "./PaneScaffold";
+import * as Layouts from "./index";
+
+afterEach(cleanup);
+
+describe("layouts index exports (W11)", () => {
+  it("exports PaneScaffold canonical layouts + ReadingWidth", () => {
+    expect(Layouts.PaneScaffold).toBe(PaneScaffold);
+    expect(Layouts.ListDetailLayout).toBe(ListDetailLayout);
+    expect(Layouts.SupportingPaneLayout).toBe(SupportingPaneLayout);
+    expect(Layouts.FeedLayout).toBe(FeedLayout);
+    expect(Layouts.ReadingWidth).toBe(ReadingWidth);
+  });
+});
+
+describe("PaneScaffold", () => {
+  it("shows one pane on compact/medium", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="compact"
+        primary={<Paragraph>List</Paragraph>}
+        secondary={<Paragraph>Detail</Paragraph>}
+      />,
+    );
+    const root = screen.getByTestId("pane-scaffold");
+    expect(root).toHaveAttribute("data-panes", "1");
+    expect(screen.getByText("List")).toBeInTheDocument();
+    expect(screen.queryByText("Detail")).not.toBeInTheDocument();
+  });
+
+  it("honors activePane=secondary on single-pane", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="medium"
+        activePane="secondary"
+        primary={<Paragraph>List</Paragraph>}
+        secondary={<Paragraph>Detail</Paragraph>}
+      />,
+    );
+    expect(screen.getByText("Detail")).toBeInTheDocument();
+    expect(screen.queryByText("List")).not.toBeInTheDocument();
+  });
+
+  it("shows two panes from expanded (860) up", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="expanded"
+        primary={<Paragraph>List</Paragraph>}
+        secondary={<Paragraph>Detail</Paragraph>}
+      />,
+    );
+    const root = screen.getByTestId("pane-scaffold");
+    expect(root).toHaveAttribute("data-panes", "2");
+    expect(root).toHaveAttribute("data-size-class", "expanded");
+    expect(screen.getByTestId("pane-primary")).toHaveTextContent("List");
+    expect(screen.getByTestId("pane-secondary")).toHaveTextContent("Detail");
+  });
+
+  it("maxPanes=1 ejects to single column even when expanded", () => {
+    renderWithProviders(
+      <PaneScaffold
+        sizeClass="xl"
+        maxPanes={1}
+        primary={<Paragraph>Only</Paragraph>}
+        secondary={<Paragraph>Hidden</Paragraph>}
+      />,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-panes", "1");
+    expect(screen.queryByText("Hidden")).not.toBeInTheDocument();
+  });
+});
+
+describe("ListDetailLayout", () => {
+  it("flips to detail when selected on compact", () => {
+    renderWithProviders(
+      <ListDetailLayout
+        sizeClass="compact"
+        selected
+        list={<Paragraph>Items</Paragraph>}
+        detail={<Paragraph>Item 1</Paragraph>}
+      />,
+    );
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.queryByText("Items")).not.toBeInTheDocument();
+  });
+});
+
+describe("SupportingPaneLayout", () => {
+  it("renders side-by-side at large", () => {
+    renderWithProviders(
+      <SupportingPaneLayout sizeClass="large" supporting={<Paragraph>Meta</Paragraph>}>
+        <Paragraph>Body</Paragraph>
+      </SupportingPaneLayout>,
+    );
+    expect(screen.getByTestId("pane-scaffold")).toHaveAttribute("data-panes", "2");
+    expect(screen.getByText("Body")).toBeInTheDocument();
+    expect(screen.getByText("Meta")).toBeInTheDocument();
+  });
+});
+
+describe("FeedLayout", () => {
+  it("renders feed items", () => {
+    renderWithProviders(
+      <FeedLayout>
+        <YStack>
+          <Paragraph>A</Paragraph>
+        </YStack>
+        <YStack>
+          <Paragraph>B</Paragraph>
+        </YStack>
+      </FeedLayout>,
+    );
+    expect(screen.getByTestId("feed-layout")).toHaveAttribute("data-canonical", "feed");
+    expect(screen.getByText("A")).toBeInTheDocument();
+    expect(screen.getByText("B")).toBeInTheDocument();
+  });
+});
+
+describe("ReadingWidth", () => {
+  it("applies ~70ch maxWidth by default", () => {
+    renderWithProviders(
+      <ReadingWidth>
+        <Paragraph>Prose</Paragraph>
+      </ReadingWidth>,
+    );
+    const el = screen.getByTestId("reading-width");
+    expect(el).toHaveStyle({ maxWidth: "70ch" });
+  });
+});