@k2b/cloud 0.40.0 → 0.41.0

package/src/ssr/layout-help-panel-document.ts

@@ -0,0 +1,67 @@
+import type { HelpArticleLink, HelpDocumentManifest, HelpDocumentPayload } from "../shared/help";
+import { HELP_ACCESS_LEVELS, HELP_KINDS } from "../shared/help";
+import type { HelpPanelState } from "./layout-help-panel-state";
+
+const optionalString = (value: object, key: string): string | undefined => {
+  const field = Reflect.get(value, key);
+  return typeof field === "string" ? field : undefined;
+};
+/** A linked article from the Help API, or nothing when the server sent something else. */
+const articleLink = (value: unknown): HelpArticleLink | undefined => {
+  if (!value || typeof value !== "object") return undefined;
+  const [appId, appName, documentId, title, url] = ["appId", "appName", "documentId", "title", "url"].map((key) =>
+    optionalString(value, key),
+  );
+  if (!appId || !appName || !documentId || !title || !url?.startsWith("/")) return undefined;
+  const [accent, description, icon] = ["accent", "description", "icon"].map((key) => optionalString(value, key));
+  return { appId, appName, accent, documentId, title, description, icon, url };
+};
+
+export const loadPanelDocument = async (
+  state: HelpPanelState,
+  topic: HelpDocumentManifest,
+  signal: AbortSignal,
+  t: { requestFailed: string; invalidDocument: string },
+) => {
+  const cacheKey = `${topic.locale ?? "en"}:${topic.url}`;
+  const cached = state.cache.get(cacheKey);
+  if (cached) return cached;
+
+  const response = await fetch(topic.url, { signal, headers: { Accept: "application/json" } });
+  if (!response.ok) throw new Error(t.requestFailed);
+  const value: unknown = await response.json();
+  if (
+    !value ||
+    typeof value !== "object" ||
+    !("id" in value) ||
+    value.id !== topic.id ||
+    !("html" in value) ||
+    !("markdown" in value) ||
+    !("title" in value) ||
+    ("locale" in value && value.locale !== undefined && typeof value.locale !== "string") ||
+    (topic.locale !== undefined && "locale" in value && value.locale !== undefined && value.locale !== topic.locale) ||
+    typeof value.html !== "string" ||
+    typeof value.markdown !== "string" ||
+    typeof value.title !== "string"
+  ) {
+    throw new Error(t.invalidDocument);
+  }
+  const kind = Reflect.get(value, "kind");
+  const needs = Reflect.get(value, "needs");
+  const related = Reflect.get(value, "related");
+  const next = articleLink(Reflect.get(value, "next"));
+  const document: HelpDocumentPayload = {
+    id: topic.id,
+    title: value.title,
+    html: value.html,
+    markdown: value.markdown,
+    locale: "locale" in value && typeof value.locale === "string" ? value.locale : (topic.locale ?? "en"),
+    // A Core older than the app's Help reader sends no article facts; the article then shows none.
+    kind: HELP_KINDS.find((candidate) => candidate === kind) ?? "task",
+    needs: HELP_ACCESS_LEVELS.find((level) => level === needs),
+    ...(next ? { next } : {}),
+    related: Array.isArray(related) ? related.flatMap((link) => articleLink(link) ?? []) : [],
+  };
+  state.storeDocument(topic, document);
+  return document;
+};

package/src/ssr/layout-help-panel-lifecycle.ts

@@ -0,0 +1,32 @@
+const focused = new WeakMap<Element, string>();
+/** Module evaluation precedes SSR's destructive island mount. */
+export function capturePanelFocus() {
+  if (typeof document === "undefined") return;
+  const element = document.activeElement;
+  const wrapper = element?.closest("solid-island");
+  if (!wrapper || !(element instanceof HTMLElement)) return;
+  const topic = element.dataset.helpTopic;
+  const selector =
+    topic !== undefined
+      ? `[data-help-topic="${CSS.escape(topic)}"]`
+      : element.matches("[data-help-menu]")
+        ? "[data-help-menu]"
+        : element.matches(".help-head-back")
+          ? ".help-head-back"
+          : undefined;
+  if (selector) focused.set(wrapper, selector);
+}
+export function restorePanelFocus(element: Element) {
+  const wrapper = element.closest("solid-island");
+  const selector = wrapper && focused.get(wrapper);
+  if (!wrapper || !selector) return;
+  focused.delete(wrapper);
+  wrapper.querySelector<HTMLElement>(selector)?.focus({ preventScroll: true });
+}
+
+/** One provider reader per document; production island wrappers intentionally omit data-file. */
+export function panelElement(): HTMLElement {
+  const element = document.querySelector<HTMLElement>('.help-shell[data-surface="panel"]');
+  if (!element) throw new Error("Missing Help panel");
+  return element;
+}

package/src/ssr/layout-help-panel-menu.tsx

@@ -0,0 +1,113 @@
+import { clipboard } from "@k2b/stdlib/solid";
+import { Dropdown, toast, useLocale } from "@k2b/ui";
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { helpMessages } from "./help-messages";
+import { formatHelpBundleMarkdown, formatHelpDocumentMarkdown } from "./layout-help-markdown";
+import { loadPanelDocument } from "./layout-help-panel-document";
+import type { HelpPanelState } from "./layout-help-panel-state";
+import { layoutHelpTopicHref } from "./layout-help-url";
+
+export type MenuActivation = { key: string; focus: boolean; pointer?: boolean };
+export function HelpPanelMenu(props: { state: HelpPanelState; activation: MenuActivation }) {
+  const state = props.state;
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const write = (text: string) => navigator.clipboard.writeText(text);
+  const writer = clipboard.createWriter({ write, copiedFor: 1800 });
+  const allWriter = clipboard.createWriter({ write, copiedFor: 1800 });
+  createEffect(() => state.setAnnouncement(writer.wasCopied() ? t().articleCopiedAnnouncement : ""));
+  onCleanup(() => state.setAnnouncement(""));
+  const [copying, setCopying] = createSignal(false);
+  let controller: AbortController | undefined;
+  let trigger: HTMLButtonElement | undefined;
+  const topic = () => state.data.documents.find((topic) => topic.id === state.activeId());
+  const payload = () => {
+    const active = topic();
+    return active ? state.cachedDocument(active) : undefined;
+  };
+  const copyArticle = async () => {
+    const active = topic();
+    const document = payload();
+    if (!active || !document) return;
+    // Invoke the clipboard writer before the first await: Safari needs the menu item's user activation.
+    if (await writer.copy(formatHelpDocumentMarkdown({ ...active, markdown: document.markdown }))) {
+      toast.success(t().articleCopied);
+    } else
+      toast.error(t().copyFailed({ message: writer.error()?.message ?? t().copyFallback }), {
+        action: { label: t().tryAgain, onClick: () => void copyArticle() },
+      });
+  };
+  const copyAll = async () => {
+    if (!state.data.documents.length || copying()) return;
+    controller?.abort();
+    const current = new AbortController();
+    controller = current;
+    setCopying(true);
+    const progress = toast(t().preparing, { progress: "indeterminate", duration: 0, iconClass: "ti ti-markdown" });
+    try {
+      const documents = await Promise.all(
+        state.data.documents.map(async (topic) => ({
+          ...topic,
+          markdown: (await loadPanelDocument(state, topic, current.signal, t())).markdown,
+        })),
+      );
+      if (!(await allWriter.copy(formatHelpBundleMarkdown(documents)))) throw allWriter.error() ?? new Error(t().copyFallback);
+      progress.dismiss();
+      toast.success(t().helpCopied);
+    } catch (error) {
+      progress.dismiss();
+      if (!(error instanceof DOMException && error.name === "AbortError"))
+        toast.error(t().copyAllFailed({ message: error instanceof Error ? error.message : t().copyFallback }), {
+          action: { label: t().tryAgain, onClick: () => void copyAll() },
+        });
+    } finally {
+      if (controller === current) {
+        controller = undefined;
+        setCopying(false);
+      }
+    }
+  };
+  const [quiet, setQuiet] = createSignal(!!props.activation.pointer);
+  onCleanup(() => controller?.abort());
+  onMount(() => {
+    if (props.activation.focus) trigger?.focus({ preventScroll: true });
+    trigger?.dispatchEvent(new KeyboardEvent("keydown", { key: props.activation.key, bubbles: true, cancelable: true }));
+  });
+  const items = () => [
+    {
+      label: t().copyAsMarkdown,
+      icon: "ti ti-markdown",
+      ...(copying() || (state.view() === "article" ? !payload() : !state.data.documents.length)
+        ? { disabled: true as const }
+        : { action: () => void (state.view() === "article" ? copyArticle() : copyAll()) }),
+    },
+    ...(state.data.pageBase
+      ? [
+          {
+            label: t().openAsPage,
+            icon: "ti ti-app-window",
+            href: layoutHelpTopicHref(state.data.pageBase, state.view() === "article" ? state.activeId() : null),
+          },
+        ]
+      : []),
+  ];
+  return (
+    <Dropdown.Root label={t().moreActions} position="bottom-left" items={items()}>
+      <Dropdown.Trigger
+        ref={(element) => {
+          trigger = element;
+        }}
+        iconOnly
+        label={t().moreActions}
+        variant="ghost"
+        data-help-menu=""
+        // A press on the light trigger counts as a press here: like Dropdown.Trigger's own, its hint stays closed until
+        // the pointer leaves.
+        tooltip={quiet() ? false : undefined}
+        onPointerLeave={() => setQuiet(false)}
+      >
+        <i class="ti ti-dots" aria-hidden="true" />
+      </Dropdown.Trigger>
+    </Dropdown.Root>
+  );
+}

package/src/ssr/layout-help-panel-modules.ts

@@ -0,0 +1,7 @@
+// Keep importOnDemand() from ../browser/reload out: its eager toast import would break the panel bundle budget.
+export const helpPanelModules = {
+  menu: () => import("./layout-help-panel-menu"),
+  search: () => import("./layout-help-panel-search"),
+  reader: () => import("./layout-help-panel-reader"),
+  document: () => import("./layout-help-panel-document"),
+};

package/src/ssr/layout-help-panel-reader.tsx

@@ -0,0 +1,159 @@
+import { Dropdown, LocaleProvider, MarkdownView, TableOfContents, useLocale } from "@k2b/ui";
+import { type Accessor, createMemo, createSignal, onMount } from "solid-js";
+import { render } from "solid-js/web";
+import type { HelpDocumentPayload } from "../shared/help";
+import { helpMessages } from "./help-messages";
+import { helpArticleParts } from "./layout-help-article";
+import type { HelpPanelState } from "./layout-help-panel-state";
+import type { HelpTopic } from "./layout-help-registry";
+import { HelpArticleView } from "./layout-help-views";
+
+function Sections(props: {
+  sections: { id: string; label: string }[];
+  onSection: (id: string) => void;
+  active: Accessor<string | null>;
+  activation?: { key: string; focused: boolean };
+}) {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  let trigger: HTMLButtonElement | undefined;
+  onMount(() => {
+    if (!props.activation) return;
+    if (props.activation.focused) trigger?.focus({ preventScroll: true });
+    trigger?.dispatchEvent(new KeyboardEvent("keydown", { key: props.activation.key, bubbles: true, cancelable: true }));
+  });
+  return (
+    <Dropdown.Root
+      label={t().onThisPage}
+      position="bottom-left"
+      items={props.sections.map((section) => ({
+        label: section.label,
+        choice: "radio" as const,
+        checked: () => props.active() === section.id,
+        action: () => {
+          props.onSection(section.id);
+        },
+      }))}
+    >
+      <Dropdown.Trigger
+        ref={(element) => {
+          trigger = element;
+        }}
+        label={t().onThisPage}
+        size="sm"
+        tooltip={false}
+        variant="secondary"
+      >
+        <i class="ti ti-list" aria-hidden="true" />
+        <span>{t().onThisPage}</span>
+        <i class="ti ti-chevron-down" aria-hidden="true" />
+      </Dropdown.Trigger>
+    </Dropdown.Root>
+  );
+}
+export function HelpPanelReader(props: {
+  state: HelpPanelState;
+  topic: HelpTopic;
+  document: HelpDocumentPayload;
+  onSection: (id: string) => void;
+}) {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const parts = createMemo(() => helpArticleParts(props.document.html));
+  const [active, setActive] = createSignal<string | null>(parts().sections[0]?.id ?? null);
+  let content: HTMLDivElement | undefined;
+  return (
+    <HelpArticleView
+      surface="panel"
+      topic={props.topic}
+      appId={props.state.data.appId}
+      parts={parts()}
+      document={props.document}
+      Markdown={MarkdownView}
+      showTools={parts().sections.length > 0}
+      sectionMenu={
+        parts().sections.length ? (
+          <Sections
+            sections={parts().sections}
+            active={active}
+            onSection={(id) => {
+              setActive(id);
+              props.onSection(id);
+            }}
+          />
+        ) : null
+      }
+      copyButton={null}
+      loading={null}
+      failure={null}
+      toc={
+        <TableOfContents
+          items={parts().sections}
+          title={t().onThisPage}
+          scrollRoot={() => props.state.scroller() ?? undefined}
+          contentRoot={() => content}
+          onActiveChange={(id) => setActive(id ?? null)}
+        />
+      }
+      copyAction={null}
+      headingRef={() => {}}
+      contentRef={(element) => {
+        content = element;
+      }}
+      onBack={props.state.back}
+    />
+  );
+}
+export function mountPanelSections(
+  container: HTMLElement,
+  props: { locale: string; state: HelpPanelState; key: string; focused: boolean; onSection: (id: string) => void },
+): () => void {
+  const article = container.closest("article");
+  const sections = Array.from(article?.querySelectorAll<HTMLAnchorElement>(".help-article-aside a[href^='#']") ?? []).map((link) => ({
+    id: decodeURIComponent(link.getAttribute("href")!.slice(1)),
+    label: link.textContent ?? "",
+  }));
+  const [active, setActive] = createSignal<string | null>(sections[0]?.id ?? null);
+  const aside = article?.querySelector<HTMLElement>(".help-article-aside-sticky");
+  let disposeToc = () => {};
+  // The aside is hidden at every panel width. Upgrade its scroll spy only when the section menu needs it.
+  if (aside) {
+    aside.textContent = "";
+    disposeToc = render(
+      () => (
+        <LocaleProvider locale={props.locale}>
+          <TableOfContents
+            items={sections}
+            title={helpMessages.resolve([props.locale]).t.onThisPage}
+            scrollRoot={() => props.state.scroller() ?? undefined}
+            contentRoot={() => article ?? undefined}
+            onActiveChange={(id) => setActive(id ?? null)}
+          />
+        </LocaleProvider>
+      ),
+      aside,
+    );
+  }
+  container.textContent = "";
+  container.style.display = "contents";
+  const disposeMenu = render(
+    () => (
+      <LocaleProvider locale={props.locale}>
+        <Sections
+          sections={sections}
+          active={active}
+          onSection={(id) => {
+            setActive(id);
+            props.onSection(id);
+          }}
+          activation={{ key: props.key, focused: props.focused }}
+        />
+      </LocaleProvider>
+    ),
+    container,
+  );
+  return () => {
+    disposeMenu();
+    disposeToc();
+  };
+}

package/src/ssr/layout-help-panel-search.tsx

@@ -0,0 +1,69 @@
+import { useLocale } from "@k2b/ui";
+import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js";
+import { helpMessages } from "./help-messages";
+import type { HelpPanelState } from "./layout-help-panel-state";
+import { searchHelpTopics } from "./layout-help-search";
+import { HelpResultsView } from "./layout-help-views";
+
+export function HelpPanelSearchResults(props: { state: HelpPanelState }) {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const query = createMemo(() => props.state.query().trim().toLocaleLowerCase());
+  const [ids, setIds] = createSignal<readonly string[] | null>(null);
+  const [searching, setSearching] = createSignal(false);
+  const [failed, setFailed] = createSignal(false);
+  const [attempt, setAttempt] = createSignal(0);
+  let version = 0;
+  createEffect(() => {
+    const value = query();
+    attempt();
+    const current = ++version;
+    setIds(null);
+    setSearching(false);
+    setFailed(false);
+    const urls = [...new Set(props.state.data.documents.map((topic) => topic.searchUrl))];
+    if (!value || !urls.length) return;
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      setSearching(true);
+      void Promise.all(
+        urls.map(async (url) => {
+          const response = await fetch(`${url}?q=${encodeURIComponent(value)}`, {
+            signal: controller.signal,
+            headers: { Accept: "application/json" },
+          });
+          if (!response.ok) throw new Error(t().searchFailed);
+          const payload: unknown = await response.json();
+          return payload && typeof payload === "object" && "ids" in payload && Array.isArray(payload.ids)
+            ? payload.ids.filter((id): id is string => typeof id === "string")
+            : [];
+        }),
+      )
+        .then((groups) => {
+          if (current === version) setIds([...new Set(groups.flat())]);
+        })
+        .catch((error) => {
+          if (!(error instanceof DOMException && error.name === "AbortError") && current === version) setFailed(true);
+        })
+        .finally(() => {
+          if (current === version) setSearching(false);
+        });
+    }, 120);
+    onCleanup(() => {
+      clearTimeout(timer);
+      controller.abort();
+      if (current === version) version++;
+    });
+  });
+  return (
+    <Show when={query()}>
+      <HelpResultsView
+        results={searchHelpTopics(props.state.data.documents, query(), ids())}
+        searching={searching()}
+        failed={failed()}
+        onRetry={() => setAttempt((value) => value + 1)}
+        onOpen={() => {}}
+      />
+    </Show>
+  );
+}

package/src/ssr/layout-help-panel-shortcuts.ts

@@ -0,0 +1,7 @@
+import { getContext } from "../browser/panel";
+import { panelShortcutsReceived, readPanelShortcuts } from "../browser/panel-shortcuts";
+import type { HelpShortcutCommand } from "./layout-help-start";
+
+/** An empty host list is authoritative too, including when a reader remounts. */
+export const readHelpPanelShortcuts = (seed: HelpShortcutCommand[]): HelpShortcutCommand[] =>
+  panelShortcutsReceived() && getContext() !== null ? readPanelShortcuts() : seed;

package/src/ssr/layout-help-panel-state.ts

@@ -0,0 +1,141 @@
+import { batch, createSignal } from "solid-js";
+import type { HelpDocumentManifest, HelpDocumentPayload } from "../shared/help";
+import { focusHelpArticleHeading } from "./layout-help-navigation";
+
+export type HelpPanelData = {
+  documents: HelpDocumentManifest[];
+  appId?: string;
+  pageBase?: string;
+  article?: Omit<HelpDocumentPayload, "html">;
+};
+const states = new WeakMap<Element, ReturnType<typeof createPanelState>>();
+export const panelRoot = (element: Element): HTMLElement => {
+  const root = element.closest<HTMLElement>('.help-shell[data-surface="panel"]');
+  if (!root) throw new Error("Missing Help panel");
+  return root;
+};
+const createPanelState = (root: HTMLElement) => {
+  // This is our own server's inert JSON, shared once instead of repeating it in island props.
+  const data: HelpPanelData = JSON.parse(root.querySelector("[data-help-panel-data]")?.textContent ?? "{}");
+  const [view, setView] = createSignal<"hub" | "article">(root.dataset.helpInitialTopic ? "article" : "hub");
+  const [activeId, setActiveId] = createSignal<string | null>(data.article?.id ?? root.dataset.helpInitialTopic ?? null);
+  const [query, setQuery] = createSignal("");
+  const [searchReturnId, setSearchReturnId] = createSignal<string | null>(null);
+  const [navigation, setNavigation] = createSignal({ hash: "", version: 0 });
+  const [announcement, setAnnouncement] = createSignal("");
+  const cache = new Map<string, HelpDocumentPayload>();
+  const [cacheVersion, setCacheVersion] = createSignal(0);
+  const cacheKey = (topic: HelpDocumentManifest) => `${topic.locale ?? "en"}:${topic.url}`;
+  if (data.article) {
+    const topic = data.documents.find((topic) => topic.id === data.article?.id);
+    if (topic) cache.set(cacheKey(topic), { ...data.article, html: "" });
+  }
+  const cachedDocument = (topic: HelpDocumentManifest) => {
+    cacheVersion();
+    return cache.get(cacheKey(topic));
+  };
+  const storeDocument = (topic: HelpDocumentManifest, payload: HelpDocumentPayload) => {
+    cache.set(cacheKey(topic), payload);
+    setCacheVersion((value) => value + 1);
+  };
+  const results = () => root.querySelector<HTMLElement>("[data-help-results]");
+  const scroller = () => root.querySelector<HTMLElement>("[data-scroll-fade-mode]");
+  const sync = () => {
+    const hub = view() === "hub";
+    const start = results();
+    if (start) start.hidden = !hub;
+    const server = root.querySelector<HTMLElement>("[data-help-server-article]");
+    if (server) server.hidden = hub || activeId() !== data.article?.id;
+  };
+  const back = () => {
+    setSearchReturnId(null);
+    setView("hub");
+    sync();
+  };
+  /** Where the article stood when a search started from it; clearing the search returns there. */
+  let articleScrollTop = 0;
+  const changeQuery = (value: string) => {
+    const searching = !!value.trim();
+    let returned = false;
+    batch(() => {
+      if (searching && view() === "article") {
+        articleScrollTop = scroller()?.scrollTop ?? 0;
+        setSearchReturnId(activeId());
+        const region = results();
+        if (region) region.style.minHeight = "";
+        setView("hub");
+      }
+      setQuery(value);
+      if (!searching) {
+        const region = results();
+        if (region) region.style.minHeight = "";
+        const id = searchReturnId();
+        setSearchReturnId(null);
+        if (id && data.documents.some((topic) => topic.id === id)) {
+          setActiveId(id);
+          setView("article");
+          returned = true;
+        }
+      }
+    });
+    sync();
+    // The article stayed in the document while results showed; give it back its place once it has its height again.
+    if (returned) {
+      const top = articleScrollTop;
+      requestAnimationFrame(() => {
+        const scroll = scroller();
+        if (scroll) scroll.scrollTop = top;
+      });
+    }
+  };
+  const open = (id: string, hash = "") => {
+    if (!data.documents.some((topic) => topic.id === id)) return;
+    try {
+      localStorage.setItem("cloud.layoutHelp.activeTopic", id);
+    } catch {
+      /* Storage is optional. */
+    }
+    batch(() => {
+      setSearchReturnId(null);
+      setActiveId(id);
+      setView("article");
+      setNavigation((value) => ({ hash, version: value.version + 1 }));
+    });
+    const scroll = scroller();
+    if (scroll) scroll.scrollTop = 0;
+    sync();
+  };
+  const focusHeading = () =>
+    focusHelpArticleHeading(root.querySelector<HTMLHeadingElement>("article:not([hidden]) .help-article-title") ?? undefined);
+  return {
+    root,
+    data,
+    view,
+    activeId,
+    query,
+    changeQuery,
+    back,
+    open,
+    navigation,
+    cache,
+    cacheKey,
+    cachedDocument,
+    storeDocument,
+    sync,
+    results,
+    scroller,
+    focusHeading,
+    announcement,
+    setAnnouncement,
+  };
+};
+export type HelpPanelState = ReturnType<typeof createPanelState>;
+export function helpPanelState(element: Element): HelpPanelState {
+  const root = panelRoot(element);
+  let state = states.get(root);
+  if (!state) {
+    state = createPanelState(root);
+    states.set(root, state);
+  }
+  return state;
+}

package/src/ssr/layout-help-panel-types.ts

@@ -0,0 +1,19 @@
+import type { HelpDocumentManifest } from "@k2b/cloud/shared";
+import type { KeyboardPlatform } from "@k2b/ui";
+import type { LayoutHelpArticle } from "./help";
+
+export type LayoutHelpPanelProps = {
+  documents: readonly HelpDocumentManifest[];
+  /** Absent when the context selected Help the reader may not see. */
+  app?: { id: string; name: string; icon?: string };
+  /** appAppearanceStyle() of the app, from the server. */
+  appearance?: string;
+  /** Server-filtered For this view ids. */
+  view?: readonly string[];
+  initialTopic?: string;
+  /** Authorized article and server-parsed parts for an identical first frame. */
+  initialArticle?: LayoutHelpArticle;
+  pageBase?: string;
+  platform: KeyboardPlatform;
+  state?: "failed" | "unavailable";
+};