create-arsh-tauri 0.0.0-stage → 0.1.0

package/template/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "arsh-tauri-app",
+  "description": "Tauri + React + TypeScript desktop app",
+  "author": "Your Name",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "tauri dev",
+    "dev:web": "vite",
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && npm run build:web && tauri build",
+    "build:web": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "test": "vitest run",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/cli": "^2.0.0",
+    "@types/node": "^25.8.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
+    "@vitejs/plugin-react": "^6.1.1",
+    "clsx": "^2.1.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "lucide-react": "^1.48.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.0",
+    "vitest": "^4.0.14"
+  }
+}

package/template/src/App.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { invoke } from '@tauri-apps/api/core'
+import { AppLayout, TitleBar, Button } from './ui'
+import { hasNativeBridge } from './lib/tauri'
+
+export default function App() {
+  const [count, setCount] = useState(0)
+  const [greetMsg, setGreetMsg] = useState('')
+
+  async function greet() {
+    if (!hasNativeBridge) return
+    setGreetMsg(await invoke<string>('greet', { name: 'Arsh' }))
+  }
+
+  return (
+    <AppLayout titleBar={<TitleBar brand="Arsh Tauri" />}>
+      <div className="h-full flex flex-col items-center justify-center gap-4 text-center px-6">
+        <h1 className="text-3xl font-semibold text-main">Congratulations!</h1>
+        <p className="text-sm text-muted max-w-md leading-relaxed">
+          Your Tauri project has been initialized. Open this project with any AI
+          coding tool and build your own marvelous Tauri app.
+        </p>
+        <div className="flex items-center gap-2">
+          <Button onClick={() => setCount((c) => c + 1)}>count is {count}</Button>
+          <Button variant="secondary" onClick={greet}>greet from Rust</Button>
+        </div>
+        {greetMsg && <p className="text-xs text-dim">{greetMsg}</p>}
+        <p className="text-xs text-dim">
+          Edit src/App.tsx and save to see hot reload. The Rust backend lives in
+          src-tauri/.
+        </p>
+      </div>
+    </AppLayout>
+  )
+}

package/template/src/index.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "./ui/styles.css";
+
+html,
+body,
+#root {
+  height: 100%;
+}

package/template/src/lib/tauri.ts

@@ -0,0 +1,21 @@
+/**
+ * Native (Tauri) bridge detection.
+ *
+ * UI primitives must render correctly in plain web apps too. Anything that
+ * needs the native window (title-bar controls, drag regions) checks this
+ * first and degrades gracefully when it is absent.
+ */
+import { getCurrentWindow, type Window } from '@tauri-apps/api/window'
+
+export const hasNativeBridge =
+  typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
+
+/** The focused app window, or null when running as a plain web page. */
+export function getWindow(): Window | null {
+  if (!hasNativeBridge) return null
+  try {
+    return getCurrentWindow()
+  } catch {
+    return null
+  }
+}

package/template/src/lib/utils.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { cn } from './utils'
+
+describe('cn', () => {
+  it('joins conditional classes', () => {
+    expect(cn('flex', false && 'hidden', 'items-center')).toBe('flex items-center')
+  })
+
+  it('lets later tailwind classes win conflicts', () => {
+    expect(cn('px-2', 'px-4')).toBe('px-4')
+    expect(cn('text-sm text-main', 'text-lg')).toBe('text-main text-lg')
+  })
+
+  it('resolves conflicting class groups, not just identical classes', () => {
+    expect(cn('p-2', 'py-4')).toBe('p-2 py-4')
+  })
+})

package/template/src/lib/utils.ts

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

package/template/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/template/src/ui/appLayout.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+import { cn } from '../lib/utils'
+
+interface AppLayoutProps {
+  /** The TitleBar component */
+  titleBar: ReactNode
+  /** Main content area */
+  children: ReactNode
+  /** Optional sidebar rendered between title bar and content */
+  sidebar?: ReactNode
+  className?: string
+}
+
+/**
+ * AppLayout provides the top-level shell for an application.
+ * It stacks the title bar, optional sidebar, and main content vertically.
+ * Height follows the parent (h-full): use 100vh on the root container (e.g. #root).
+ */
+export function AppLayout({ titleBar, children, sidebar, className }: AppLayoutProps) {
+  return (
+    <div className={cn('h-full flex flex-col overflow-hidden bg-page', className)}>
+      {titleBar}
+      <div className="flex-1 flex overflow-hidden">
+        {sidebar && (
+          <div className="shrink-0 border-r border-line">
+            {sidebar}
+          </div>
+        )}
+        <main className="flex-1 overflow-auto">
+          {children}
+        </main>
+      </div>
+    </div>
+  )
+}

package/template/src/ui/button.tsx

@@ -0,0 +1,63 @@
+import { type ReactNode, type ButtonHTMLAttributes } from 'react'
+import { cn } from '../lib/utils'
+import { Loader2 } from 'lucide-react'
+
+const variants = {
+  default: 'bg-accent text-fg hover:opacity-80',
+  secondary: 'bg-surface border border-line text-main hover:bg-hover',
+  ghost: 'text-muted hover:text-main hover:bg-hover',
+  destructive: 'bg-destructive text-white hover:opacity-80',
+  link: 'text-accent underline-offset-4 hover:underline',
+} as const
+
+const sizes = {
+  sm: 'px-2.5 py-1 text-xs rounded-md',
+  md: 'px-4 py-1.5 text-sm rounded-lg',
+  lg: 'px-5 py-2 text-sm rounded-lg',
+} as const
+
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+  /** Button visual style */
+  variant?: keyof typeof variants
+  /** Button size */
+  size?: keyof typeof sizes
+  /** Optional icon shown before the label */
+  icon?: ReactNode
+  /** Show loading spinner */
+  loading?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function Button({
+  variant = 'default',
+  size = 'md',
+  icon,
+  loading = false,
+  disabled,
+  className,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      disabled={disabled || loading}
+      className={cn(
+        'inline-flex items-center justify-center gap-1.5 font-medium transition-all cursor-pointer select-none',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20',
+        'disabled:opacity-40 disabled:cursor-not-allowed',
+        variants[variant],
+        sizes[size],
+        className,
+      )}
+      {...props}
+    >
+      {loading ? (
+        <Loader2 className={cn('size-4 animate-spin', children && 'shrink-0')} />
+      ) : icon ? (
+        <span className="size-4 shrink-0 flex items-center justify-center">{icon}</span>
+      ) : null}
+      {children}
+    </button>
+  )
+}

package/template/src/ui/dialog.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useCallback, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from '../lib/utils'
+
+interface DialogProps {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  /** Whether clicking the overlay closes the dialog */
+  closeOnOverlay?: boolean
+  /** Whether to close on Escape key */
+  closeOnEscape?: boolean
+  className?: string
+  overlayClassName?: string
+}
+
+export function Dialog({
+  open,
+  onClose,
+  children,
+  closeOnOverlay = true,
+  closeOnEscape = true,
+  className,
+  overlayClassName,
+}: DialogProps) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (closeOnEscape && e.key === 'Escape') onClose()
+    },
+    [onClose, closeOnEscape],
+  )
+
+  useEffect(() => {
+    if (!open) return
+    document.addEventListener('keydown', handleKeyDown)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.body.style.overflow = ''
+    }
+  }, [open, handleKeyDown])
+
+  if (!open) return null
+
+  return createPortal(
+    <div
+      className={cn(
+        'fixed inset-0 z-60 flex items-center justify-center',
+        'animate-[fade-in_150ms_ease-out]',
+        overlayClassName,
+      )}
+      style={{ background: 'rgba(0,0,0,0.45)' }}
+      onClick={(e) => {
+        if (closeOnOverlay && e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          'bg-surface rounded-lg shadow-lg max-w-md w-full mx-4',
+          'animate-[scale-in_150ms_ease-out]',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  )
+}

package/template/src/ui/index.ts

@@ -0,0 +1,8 @@
+export { AppLayout } from './appLayout'
+export { TitleBar } from './titleBar'
+export { NavItem } from './navItem'
+export { Button } from './button'
+export { Dialog } from './dialog'
+export { Tooltip } from './tooltip'
+export { Spinner } from './spinner'
+export { Switch } from './switch'

package/template/src/ui/navItem.tsx

@@ -0,0 +1,37 @@
+import { type ReactNode, type MouseEvent } from 'react'
+import { cn } from '../lib/utils'
+
+interface NavItemProps {
+  children: ReactNode
+  className?: string
+  /** Optional icon shown before the label */
+  icon?: ReactNode
+  /** Active (highlighted) state */
+  active?: boolean
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
+  title?: string
+}
+
+/**
+ * Top navigation item, typically used as a child of TitleBar.
+ * Not bound to any router: the caller computes `active` and handles navigation.
+ */
+export function NavItem({ children, className, icon, active = false, onClick, title }: NavItemProps) {
+  return (
+    <button
+      onClick={onClick}
+      aria-current={active ? 'page' : undefined}
+      title={title}
+      className={cn(
+        'flex items-center gap-1.5 px-3 text-xs font-medium border-r border-line/40 transition-colors cursor-pointer',
+        active
+          ? 'bg-hover text-main'
+          : 'text-muted hover:text-main hover:bg-hover/50',
+        className,
+      )}
+    >
+      {icon && <span className="size-3.5 flex items-center justify-center">{icon}</span>}
+      {children}
+    </button>
+  )
+}

package/template/src/ui/spinner.tsx

@@ -0,0 +1,33 @@
+import { cn } from '../lib/utils'
+import { Loader2 } from 'lucide-react'
+
+interface SpinnerProps {
+  /** Spinner size */
+  size?: 'sm' | 'md' | 'lg'
+  /** Show label below the spinner */
+  label?: string
+  className?: string
+}
+
+const sizes = {
+  sm: { icon: 'size-4', label: 'text-xs' },
+  md: { icon: 'size-6', label: 'text-sm' },
+  lg: { icon: 'size-8', label: 'text-sm' },
+}
+
+export function Spinner({ size = 'md', label, className }: SpinnerProps) {
+  const s = sizes[size]
+
+  return (
+    <div className={cn('inline-flex flex-col items-center gap-2', className)}>
+      <Loader2
+        className={cn('animate-spin text-accent', s.icon)}
+        role="status"
+        aria-label={label || 'Loading'}
+      />
+      {label && (
+        <span className={cn('text-muted', s.label)}>{label}</span>
+      )}
+    </div>
+  )
+}

package/template/src/ui/styles.css

@@ -0,0 +1,96 @@
+/*
+ * Theme tokens.
+ *
+ * Every color maps to a plain CSS variable, so apps (and dark themes) can
+ * re-skin the whole kit by overriding the `:root` block below.
+ */
+
+@theme inline {
+  --color-page: var(--page);
+  --color-surface: var(--surface);
+  --color-hover: var(--hover);
+  --color-accent: var(--accent);
+  --color-fg: var(--accent-foreground);
+  --color-main: var(--text-primary);
+  --color-muted: var(--text-secondary);
+  --color-dim: var(--text-tertiary);
+  --color-line: var(--border);
+  --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+}
+
+:root {
+  --page: #f1f5f9;
+  --surface: #ffffff;
+  --hover: #e2e8f0;
+  --accent: #1e293b;
+  --accent-foreground: #ffffff;
+  --text-primary: #1e293b;
+  --text-secondary: #94a3b8;
+  --text-tertiary: #475569;
+  --border: #e2e8f0;
+  --destructive: #dc2626;
+  --success: #16a34a;
+  --warning: #d97706;
+  --info: #2563eb;
+}
+
+* {
+  border-color: var(--border);
+}
+
+body {
+  margin: 0;
+  background: var(--page);
+  color: var(--text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+}
+
+/*
+ * Frameless window dragging: put `data-tauri-drag-region` on the element that
+ * should drag the window (see src/ui/titleBar.tsx). Interactive children must
+ * not carry the attribute.
+ */
+
+svg:focus { outline: none; }
+svg *:focus { outline: none; }
+
+/* Overlay scrim shared by Dialog / Drawer / Toast containers */
+.arshui-scrim {
+  background: rgba(0, 0, 0, 0.45);
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slide-in-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slide-in-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes progress-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}

package/template/src/ui/switch.tsx

@@ -0,0 +1,77 @@
+import { cn } from '../lib/utils'
+
+interface SwitchProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  /** Label text shown next to the switch */
+  label?: string
+  /** Position of the label */
+  labelPosition?: 'left' | 'right'
+  disabled?: boolean
+  className?: string
+}
+
+export function Switch({
+  checked,
+  onChange,
+  label,
+  labelPosition = 'right',
+  disabled = false,
+  className,
+}: SwitchProps) {
+  const handleClick = () => {
+    if (!disabled) onChange(!checked)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      handleClick()
+    }
+  }
+
+  const switchEl = (
+    <button
+      onClick={handleClick}
+      disabled={disabled}
+      className={cn(
+        'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full',
+        'border-2 border-transparent transition-colors duration-200 ease-in-out',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20',
+        'disabled:opacity-40 disabled:cursor-not-allowed',
+        checked ? 'bg-accent' : 'bg-hover',
+      )}
+      role="switch"
+      aria-checked={checked}
+      onKeyDown={handleKeyDown}
+    >
+      <span
+        className={cn(
+          'pointer-events-none block size-3.5 rounded-full bg-surface shadow-sm',
+          'ring-0 transition-transform duration-200 ease-in-out',
+          checked ? 'translate-x-[18px]' : 'translate-x-0.5',
+        )}
+      />
+    </button>
+  )
+
+  if (!label) return switchEl
+
+  return (
+    <label
+      className={cn(
+        'inline-flex items-center gap-2 select-none cursor-pointer',
+        disabled && 'opacity-40 cursor-not-allowed',
+        className,
+      )}
+    >
+      {labelPosition === 'left' && (
+        <span className="text-sm text-main">{label}</span>
+      )}
+      {switchEl}
+      {labelPosition === 'right' && (
+        <span className="text-sm text-main">{label}</span>
+      )}
+    </label>
+  )
+}