create-strayl-web-app 1.0.0

package/template/src/components/ui/toggle-group.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import type { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+import {
+  Toggle as ToggleComponent,
+  type toggleVariants,
+} from "@/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+function ToggleGroup({
+  className,
+  variant = "default",
+  size = "default",
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive
+      className={cn(
+        "flex w-fit *:focus-visible:z-10 dark:*:[[data-slot=separator]:has(+[data-slot=toggle]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle][data-pressed])]:before:bg-input dark:*:[[data-slot=toggle]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle][data-pressed]+[data-slot=separator]]:before:bg-input",
+        orientation === "horizontal"
+          ? "*:pointer-coarse:after:min-w-auto"
+          : "*:pointer-coarse:after:min-h-auto",
+        variant === "default"
+          ? "gap-0.5"
+          : orientation === "horizontal"
+            ? "*:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none"
+            : "*:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block",
+        className,
+      )}
+      data-size={size}
+      data-slot="toggle-group"
+      data-variant={variant}
+      orientation={orientation}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ size, variant }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+function Toggle({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  const resolvedVariant = context.variant || variant;
+  const resolvedSize = context.size || size;
+
+  return (
+    <ToggleComponent
+      className={className}
+      data-size={resolvedSize}
+      data-variant={resolvedVariant}
+      size={resolvedSize}
+      variant={resolvedVariant}
+      {...props}
+    >
+      {children}
+    </ToggleComponent>
+  );
+}
+
+function ToggleGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      className={cn(
+        "pointer-events-none relative bg-input before:absolute before:inset-0 dark:before:bg-input/32",
+        className,
+      )}
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+export { ToggleGroup, Toggle, Toggle as ToggleGroupItem, ToggleGroupSeparator };

package/template/src/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8",
+        lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9",
+        sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7",
+      },
+      variant: {
+        default: "border-transparent",
+        outline:
+          "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none",
+      },
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      className={cn(toggleVariants({ className, size, variant }))}
+      data-slot="toggle"
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/template/src/components/ui/toolbar.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar";
+
+import { cn } from "@/lib/utils";
+
+function Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props) {
+  return (
+    <ToolbarPrimitive.Root
+      className={cn(
+        "relative flex gap-2 rounded-xl border bg-card not-dark:bg-clip-padding p-1 text-card-foreground",
+        className,
+      )}
+      data-slot="toolbar"
+      {...props}
+    />
+  );
+}
+
+function ToolbarButton({ className, ...props }: ToolbarPrimitive.Button.Props) {
+  return (
+    <ToolbarPrimitive.Button
+      className={cn(className)}
+      data-slot="toolbar-button"
+      {...props}
+    />
+  );
+}
+
+function ToolbarLink({ className, ...props }: ToolbarPrimitive.Link.Props) {
+  return (
+    <ToolbarPrimitive.Link
+      className={cn(className)}
+      data-slot="toolbar-link"
+      {...props}
+    />
+  );
+}
+
+function ToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props) {
+  return (
+    <ToolbarPrimitive.Input
+      className={cn(className)}
+      data-slot="toolbar-input"
+      {...props}
+    />
+  );
+}
+
+function ToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props) {
+  return (
+    <ToolbarPrimitive.Group
+      className={cn("flex items-center gap-1", className)}
+      data-slot="toolbar-group"
+      {...props}
+    />
+  );
+}
+
+function ToolbarSeparator({
+  className,
+  ...props
+}: ToolbarPrimitive.Separator.Props) {
+  return (
+    <ToolbarPrimitive.Separator
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:my-0.5 data-[orientation=vertical]:my-1.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
+        className,
+      )}
+      data-slot="toolbar-separator"
+      {...props}
+    />
+  );
+}
+
+export {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+  ToolbarButton,
+  ToolbarLink,
+  ToolbarInput,
+};

package/template/src/components/ui/tooltip.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipCreateHandle = TooltipPrimitive.createHandle;
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipPopup({
+  className,
+  align = "center",
+  sideOffset = 4,
+  side = "top",
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props & {
+  align?: TooltipPrimitive.Positioner.Props["align"];
+  side?: TooltipPrimitive.Positioner.Props["side"];
+  sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"];
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        className="z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none"
+        data-slot="tooltip-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <TooltipPrimitive.Popup
+          className={cn(
+            "relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) text-balance rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:duration-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="tooltip-popup"
+          {...props}
+        >
+          <TooltipPrimitive.Viewport
+            className="relative size-full overflow-clip px-(--viewport-inline-padding) py-1 [--viewport-inline-padding:--spacing(2)] data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:truncate **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity"
+            data-slot="tooltip-viewport"
+          >
+            {children}
+          </TooltipPrimitive.Viewport>
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export {
+  TooltipCreateHandle,
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipPopup,
+  TooltipPopup as TooltipContent,
+};

package/template/src/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/template/src/lib/i18n.ts

@@ -0,0 +1,70 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+const resources = {
+  en: {
+    translation: {
+      tagline: 'Build end to end',
+      description: 'Create your app with AI. Describe your idea — Strayl will build, deploy, and host it for you. No coding required.',
+      deployButton: 'Deploy to Strayl',
+      beginJourney: 'Begin your journey by asking the agent to edit your app',
+      toggleTheme: 'Toggle theme',
+      language: 'Language',
+      languages: {
+        en: 'English',
+        ru: 'Русский',
+        kk: 'Қазақша',
+      },
+    },
+  },
+  ru: {
+    translation: {
+      tagline: 'Создавай от начала до конца',
+      description: 'Создайте приложение с помощью ИИ. Опишите идею — Strayl соберёт, задеплоит и захостит его за вас. Код писать не нужно.',
+      deployButton: 'Деплой на Strayl',
+      beginJourney: 'Начните путь, попросив агента отредактировать ваше приложение',
+      toggleTheme: 'Сменить тему',
+      language: 'Язык',
+      languages: {
+        en: 'English',
+        ru: 'Русский',
+        kk: 'Қазақша',
+      },
+    },
+  },
+  kk: {
+    translation: {
+      tagline: 'Басынан аяғына дейін құр',
+      description: 'AI көмегімен қосымша жасаңыз. Идеяңызды сипаттаңыз — Strayl оны құрастырып, орналастырып, хостинг жасайды. Код жазу қажет емес.',
+      deployButton: 'Strayl-ға орналастыру',
+      beginJourney: 'Агенттен қосымшаңызды өңдеуді сұрап, саяхатыңызды бастаңыз',
+      toggleTheme: 'Тақырыпты ауыстыру',
+      language: 'Тіл',
+      languages: {
+        en: 'English',
+        ru: 'Русский',
+        kk: 'Қазақша',
+      },
+    },
+  },
+}
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: 'en',
+    supportedLngs: ['en', 'ru', 'kk'],
+    load: 'languageOnly',
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+    },
+  })
+
+export default i18n

package/template/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/template/src/routeTree.gen.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/template/src/router.tsx

@@ -0,0 +1,17 @@
+import { createRouter } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+export const getRouter = () => {
+  const router = createRouter({
+    routeTree,
+    context: {},
+
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}

package/template/src/routes/__root.tsx

@@ -0,0 +1,62 @@
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+
+// Fontsource imports - must be in JS, not CSS
+import '@fontsource-variable/geist'
+import '@fontsource-variable/geist-mono'
+import '@fontsource-variable/bitcount-prop-single'
+
+// i18n
+import '../lib/i18n'
+
+import { ThemeProvider } from '../components/theme-provider'
+
+import appCss from '../styles.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'Strayl',
+      },
+      {
+        name: 'description',
+        content: 'Build end to end',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+      {
+        rel: 'icon',
+        href: '/favicon.ico',
+      },
+    ],
+  }),
+
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <ThemeProvider>
+          {children}
+        </ThemeProvider>
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/template/src/routes/index.tsx

@@ -0,0 +1,71 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useTheme } from 'next-themes'
+import { useTranslation } from 'react-i18next'
+import { useEffect, useState } from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { ThemedLogo } from '../components/themed-logo'
+import { LanguageSwitcher } from '../components/language-switcher'
+import { Button } from '@/components/ui/button'
+
+export const Route = createFileRoute('/')({ component: App })
+
+function App() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const { t } = useTranslation()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Language switcher - top left */}
+      <div className="fixed top-4 left-4 z-50">
+        <LanguageSwitcher />
+      </div>
+
+      {/* Theme toggle - top right */}
+      <div className="fixed top-4 right-4 z-50">
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+          aria-label={t('toggleTheme')}
+        >
+          {mounted ? (
+            resolvedTheme === 'dark' ? <Sun className="size-4" /> : <Moon className="size-4" />
+          ) : (
+            <div className="size-4" />
+          )}
+        </Button>
+      </div>
+
+      {/* Hero */}
+      <section className="relative py-20 px-6 text-center overflow-hidden">
+        <div className="relative max-w-5xl mx-auto">
+          <div className="flex items-center justify-center gap-4 mb-6">
+            <h1 className="text-6xl md:text-8xl font-normal text-foreground font-[family-name:var(--font-bitcount)]">
+              STRAYL
+            </h1>
+          </div>
+          <p className="text-2xl md:text-3xl text-muted-foreground mb-4 font-light">
+            {t('tagline')}
+          </p>
+          <p className="text-lg text-muted-foreground max-w-3xl mx-auto mb-8">
+            {t('description')}
+          </p>
+          <div className="flex flex-col items-center gap-4">
+            <Button size="lg" render={<a href="https://strayl.dev" target="_blank" rel="noopener noreferrer" />}>
+              <ThemedLogo width={20} height={20} inverted />
+              {t('deployButton')}
+            </Button>
+            <p className="text-muted-foreground text-sm mt-2">
+              {t('beginJourney')}
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}