hermium 0.1.2 → 0.1.4

package/dist/web-server/_ssr/index-DqFrn6kj.mjs

@@ -0,0 +1,278 @@
+import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
+import { d as useNavigate } from "../_libs/tanstack__react-router.mjs";
+import { c as createSession, B as Button, a as cn } from "./router-59cN5lqo.mjs";
+import { T as Textarea } from "./textarea-CK0ROhfF.mjs";
+import { z as IconChevronLeft, v as IconPencil, A as IconBook, B as IconCode, C as IconHeart, D as IconCloud, E as IconArrowUp } from "../_libs/tabler__icons-react.mjs";
+import "../_libs/tanstack__router-core.mjs";
+import "../_libs/tanstack__history.mjs";
+import "../_libs/cookie-es.mjs";
+import "../_libs/seroval.mjs";
+import "../_libs/seroval-plugins.mjs";
+import "node:stream/web";
+import "node:stream";
+import "../_libs/react-dom.mjs";
+import "util";
+import "crypto";
+import "async_hooks";
+import "stream";
+import "../_libs/isbot.mjs";
+import "../_libs/tanstack__query-core.mjs";
+import "../_libs/tanstack__react-query.mjs";
+import "../_libs/clsx.mjs";
+import "../_libs/class-variance-authority.mjs";
+import "../_libs/zustand.mjs";
+import "../_libs/base-ui__react.mjs";
+import "../_libs/base-ui__utils.mjs";
+import "../_libs/use-sync-external-store.mjs";
+import "../_libs/floating-ui__utils.mjs";
+import "../_libs/floating-ui__react-dom.mjs";
+import "../_libs/floating-ui__dom.mjs";
+import "../_libs/floating-ui__core.mjs";
+import "../_libs/zod.mjs";
+const PROMPT_CARDS = [
+  {
+    icon: IconPencil,
+    label: "Write",
+    title: "Write",
+    description: "Articles, stories, documentation, and all kinds of written content.",
+    prompts: [
+      "Write a short story about a robot learning to paint — make it emotional and reflective, around 500 words.",
+      "Draft a professional email template for following up with clients after a meeting.",
+      "Write a persuasive blog post on why companies should adopt a 4-day work week.",
+      "Create a product description for a smart water bottle that tracks hydration, 3 sentences max per feature.",
+      "Rewrite this paragraph to be more concise and impactful: [paste text]"
+    ]
+  },
+  {
+    icon: IconBook,
+    label: "Learn",
+    title: "Learn",
+    description: "Explore new topics, get clear explanations, and dive deep into any subject.",
+    prompts: [
+      "Explain quantum computing like I'm 10 years old — simple but accurate with fun analogies.",
+      "Teach me the basics of investing: stocks, bonds, ETFs, and how to start with $500.",
+      "Give me a 5-minute summary of the French Revolution — key dates, people, and outcomes.",
+      "Explain how large language models like you actually work under the hood.",
+      "Walk me through the core principles of color theory for UI design."
+    ]
+  },
+  {
+    icon: IconCode,
+    label: "Code",
+    title: "Code",
+    description: "Build, debug, refactor, and architect software with AI assistance.",
+    prompts: [
+      "Build a Python script that monitors a directory for new files and uploads them to S3. Include error handling, logging, and a config file.",
+      "Review this code for performance bottlenecks and suggest specific improvements: [paste code]",
+      "Create a React hook that debounces a value and returns loading/error states.",
+      "Write a SQL query to find the top 5 customers by revenue this month, with their last order date.",
+      "Explain the difference between REST and GraphQL — when would you choose one over the other, with a real example."
+    ]
+  },
+  {
+    icon: IconHeart,
+    label: "Life stuff",
+    title: "Life Stuff",
+    description: "Productivity, habits, health, relationships, and everyday advice.",
+    prompts: [
+      "Give me a daily routine that balances deep work, exercise, social time, and rest. I work from home and tend to overwork.",
+      "How do I start a regular meditation practice? Suggest a beginner-friendly 10-minute routine.",
+      "I want to read more books — help me set up a sustainable reading habit and pick my first 5.",
+      "What are 3 evidence-backed techniques to reduce anxiety before a big presentation?",
+      "Help me plan a weekly meal prep routine that's healthy, affordable, and takes under 2 hours on Sunday."
+    ]
+  },
+  {
+    icon: IconCloud,
+    label: "Weather",
+    title: "Weather",
+    description: "Forecasts, climate insights, and weather patterns anywhere in the world.",
+    prompts: [
+      "What's the weather like today in my area? Give me a detailed forecast with temperature, humidity, and chance of rain.",
+      "What's the best time of year to visit Tokyo for mild weather and fewer crowds?",
+      "Explain how hurricanes form and how their intensity is categorized.",
+      "Compare the climates of San Francisco and New York — which one has milder winters?",
+      "What does 'dew point' actually mean and why does it matter for comfort?"
+    ]
+  }
+];
+function useGreeting() {
+  const [greeting, setGreeting] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    const hour = (/* @__PURE__ */ new Date()).getHours();
+    if (hour < 12) setGreeting("Good morning");
+    else if (hour < 17) setGreeting("Good afternoon");
+    else if (hour < 21) setGreeting("Good evening");
+    else setGreeting("Good night");
+  }, []);
+  return greeting;
+}
+function DashboardInput({
+  onSubmit,
+  disabled
+}) {
+  const [value, setValue] = reactExports.useState("");
+  const textareaRef = reactExports.useRef(null);
+  const autoResize = reactExports.useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
+  }, []);
+  reactExports.useEffect(() => {
+    autoResize();
+  }, [value, autoResize]);
+  reactExports.useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+  const handleSend = reactExports.useCallback(() => {
+    const text = value.trim();
+    if (!text || disabled) return;
+    setValue("");
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    onSubmit(text);
+  }, [value, disabled, onSubmit]);
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+  const canSend = value.trim().length > 0;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col rounded-2xl border border-border bg-card shadow-lg transition-colors", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Textarea,
+      {
+        ref: textareaRef,
+        value,
+        onChange: (e) => setValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: "Ask anything…",
+        rows: 1,
+        disabled,
+        className: cn(
+          "w-full !rounded-none border-0 p-4 outline-none text-[15px] text-foreground resize-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-transparent bg-transparent whitespace-pre-wrap break-words",
+          "min-h-[56px] max-h-[200px]"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-end p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        className: cn(
+          "rounded-full transition-colors cursor-pointer",
+          canSend && !disabled ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "bg-primary text-primary-foreground opacity-40"
+        ),
+        disabled: !canSend || disabled,
+        onClick: handleSend,
+        title: "Send message",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, { className: "h-4 w-4" })
+      }
+    ) })
+  ] });
+}
+function DashboardPage() {
+  const navigate = useNavigate();
+  const greeting = useGreeting();
+  const [selectedPrompt, setSelectedPrompt] = reactExports.useState(null);
+  const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
+  const submittingRef = reactExports.useRef(false);
+  const handleNewChat = reactExports.useCallback(
+    async (initialMessage) => {
+      if (submittingRef.current) return;
+      submittingRef.current = true;
+      setIsSubmitting(true);
+      try {
+        const session = await createSession();
+        if (initialMessage) {
+          sessionStorage.setItem(`hermium_pending_msg_${session.id}`, initialMessage);
+        }
+        navigate({
+          to: "/chat/$sessionId",
+          params: { sessionId: session.id }
+        });
+      } catch {
+        submittingRef.current = false;
+        setIsSubmitting(false);
+      }
+    },
+    [navigate]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center px-4 overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-10 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-5xl font-semibold tracking-tight", children: greeting }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full max-w-3xl", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DashboardInput,
+      {
+        onSubmit: handleNewChat,
+        disabled: isSubmitting
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-6 w-full max-w-3xl", children: selectedPrompt ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "rounded-2xl border bg-card p-6",
+        style: { animation: "fadeSlideIn 0.2s ease-out" },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              disabled: isSubmitting,
+              onClick: () => setSelectedPrompt(null),
+              className: "mb-4 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronLeft, { className: "size-3.5" }),
+                "Back to suggestions"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-2", children: selectedPrompt.prompts.map((prompt, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              disabled: isSubmitting,
+              onClick: () => handleNewChat(prompt),
+              className: "group w-full rounded-xl border border-border bg-muted/30 px-4 py-3 text-left text-sm leading-relaxed text-foreground transition-colors hover:bg-muted/60 hover:border-foreground/20 disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-2 text-xs font-medium text-muted-foreground", children: [
+                  i + 1,
+                  "."
+                ] }),
+                prompt
+              ]
+            }
+          ) }, i)) })
+        ]
+      },
+      "prompt-card"
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "flex flex-wrap justify-center gap-2",
+        style: { animation: "fadeSlideIn 0.2s ease-out" },
+        children: PROMPT_CARDS.map((meta) => {
+          const Icon = meta.icon;
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              disabled: isSubmitting,
+              className: "group flex items-center gap-2 rounded-lg border border-border bg-muted/40 dark:bg-muted/40 px-3 py-1.5 text-sm text-foreground transition-colors duration-200 ease-out hover:bg-muted/60 h-auto disabled:opacity-50",
+              onClick: () => setSelectedPrompt(meta),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "h-5 w-5 text-muted-foreground transition-colors group-hover:text-foreground" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[15px]", children: meta.label })
+              ]
+            },
+            meta.label
+          );
+        })
+      },
+      "chips"
+    ) })
+  ] });
+}
+const SplitComponent = DashboardPage;
+export {
+  SplitComponent as component
+};

package/dist/web-server/_ssr/index-EKE8NFy_.mjs

@@ -0,0 +1,189 @@
+import { j as jsxRuntimeExports } from "../_libs/react.mjs";
+import { R as Route$5, u as useTheme } from "./router-59cN5lqo.mjs";
+import { i as IconLanguage, h as IconKey, g as IconBell, f as IconPaint, e as IconUser, q as IconRobot, c as IconSun, d as IconMoon, M as IconDeviceDesktop } from "../_libs/tabler__icons-react.mjs";
+import "../_libs/tanstack__react-router.mjs";
+import "../_libs/tanstack__router-core.mjs";
+import "../_libs/tanstack__history.mjs";
+import "../_libs/cookie-es.mjs";
+import "../_libs/seroval.mjs";
+import "../_libs/seroval-plugins.mjs";
+import "node:stream/web";
+import "node:stream";
+import "../_libs/react-dom.mjs";
+import "util";
+import "crypto";
+import "async_hooks";
+import "stream";
+import "../_libs/isbot.mjs";
+import "../_libs/tanstack__query-core.mjs";
+import "../_libs/tanstack__react-query.mjs";
+import "../_libs/clsx.mjs";
+import "../_libs/class-variance-authority.mjs";
+import "../_libs/zustand.mjs";
+import "../_libs/base-ui__react.mjs";
+import "../_libs/base-ui__utils.mjs";
+import "../_libs/use-sync-external-store.mjs";
+import "../_libs/floating-ui__utils.mjs";
+import "../_libs/floating-ui__react-dom.mjs";
+import "../_libs/floating-ui__dom.mjs";
+import "../_libs/floating-ui__core.mjs";
+import "../_libs/zod.mjs";
+const settingsMap = {
+  profile: {
+    icon: IconUser,
+    title: "Profile",
+    description: "Your name, email, and avatar",
+    content: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-foreground", children: "Display Name" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "text",
+            defaultValue: "User",
+            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/60 outline-none focus:border-primary/50 transition-colors"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-foreground", children: "Email" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "email",
+            defaultValue: "user@hermium.dev",
+            className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/60 outline-none focus:border-primary/50 transition-colors"
+          }
+        )
+      ] })
+    ] })
+  },
+  appearance: {
+    icon: IconPaint,
+    title: "Appearance",
+    description: "Theme, font size, and density",
+    get content() {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(AppearanceSettings, {});
+    }
+  },
+  notifications: {
+    icon: IconBell,
+    title: "Notifications",
+    description: "Push and in-app notifications",
+    content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: ["Desktop notifications", "Sound on new message", "Show preview in notification"].map((label) => /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-3 cursor-pointer", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "checkbox", defaultChecked: true, className: "rounded border-border accent-primary" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-foreground", children: label })
+    ] }, label)) })
+  },
+  "api-keys": {
+    icon: IconKey,
+    title: "API Keys",
+    description: "Manage providers and keys",
+    content: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+      [
+        { provider: "OpenAI", key: "sk-••••••••••••••••", status: "active" },
+        { provider: "Anthropic", key: "sk-ant-•••••••••••", status: "active" },
+        { provider: "Groq", key: "gsk-••••••••••••••••", status: "active" }
+      ].map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded-lg border border-border px-3 py-2.5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(IconRobot, { className: "size-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-foreground", children: p.provider }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground ml-2", children: p.key })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] font-medium text-green-600 dark:text-green-400 uppercase tracking-wider", children: p.status })
+      ] }, p.provider)),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "w-full rounded-lg border border-dashed border-border px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-foreground/30 transition-colors", children: "+ Add API Key" })
+    ] })
+  },
+  language: {
+    icon: IconLanguage,
+    title: "Language & Region",
+    description: "Language, timezone, and format preferences",
+    content: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-foreground", children: "Language" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("select", { className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary/50 transition-colors", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "English" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "Spanish" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "French" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "German" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "Japanese" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-foreground", children: "Timezone" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("select", { className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary/50 transition-colors", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "UTC (Coordinated Universal Time)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "America/New_York" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "America/Los_Angeles" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "Europe/London" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { children: "Asia/Tokyo" })
+        ] })
+      ] })
+    ] })
+  }
+};
+function AppearanceSettings() {
+  const { resolvedTheme, setTheme } = useTheme();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-foreground", children: "Theme" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-3 gap-2", children: [
+        { id: "light", icon: IconSun, label: "Light" },
+        { id: "dark", icon: IconMoon, label: "Dark" },
+        { id: "system", icon: IconDeviceDesktop, label: "System" }
+      ].map((t) => {
+        const isActive = t.id === (resolvedTheme === "dark" ? "dark" : t.id === "system" ? "system" : "light");
+        const Icon = t.icon;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: () => setTheme(t.id),
+            className: cn(
+              "flex flex-col items-center gap-1.5 rounded-lg border px-3 py-2.5 text-xs transition-colors",
+              isActive ? "border-primary/50 bg-primary/5 text-foreground" : "border-border text-muted-foreground hover:border-foreground/20 hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "size-5" }),
+              t.label
+            ]
+          },
+          t.id
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium text-foreground", children: "Font Size" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground", children: "A" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "range", min: "12", max: "20", defaultValue: "14", className: "flex-1 accent-primary" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-lg text-muted-foreground", children: "A" })
+      ] })
+    ] })
+  ] });
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function SettingsPage({ section }) {
+  const currentSectionId = section && section in settingsMap ? section : "profile";
+  const current = settingsMap[currentSectionId];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-2xl px-8 py-8", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold text-foreground", children: current.title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: current.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-xl border border-border bg-card p-6", children: current.content })
+  ] }) });
+}
+function SettingsRoute() {
+  const {
+    section
+  } = Route$5.useSearch();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPage, { section });
+}
+export {
+  SettingsRoute as component
+};