@chrryai/chrry 1.1.78

package/context/providers/README.md

@@ -0,0 +1,329 @@
+# Provider Architecture
+
+## 🎯 Entry Point: DataProvider
+
+`DataProvider` is now the **main entry point** that accepts a `token` prop and provides all app-wide context.
+
+## 📦 Usage
+
+### Basic Setup
+
+```tsx
+import { DataProvider } from "chrry/context/providers"
+
+function App() {
+  const [token, setToken] = useState<string | null>(null)
+
+  // Get token from your auth system
+  useEffect(() => {
+    const authToken = localStorage.getItem("authToken")
+    setToken(authToken)
+  }, [])
+
+  return (
+    <DataProvider token={token}>
+      <YourApp />
+    </DataProvider>
+  )
+}
+```
+
+### With Authentication Flow
+
+```tsx
+import { DataProvider } from "chrry/context/providers"
+
+function App() {
+  const [token, setToken] = useState<string | null>(null)
+
+  const handleLogin = async (email: string, password: string) => {
+    const response = await fetch("/api/auth/login", {
+      method: "POST",
+      body: JSON.stringify({ email, password }),
+    })
+    const { token } = await response.json()
+    setToken(token)
+    localStorage.setItem("authToken", token)
+  }
+
+  const handleLogout = () => {
+    setToken(null)
+    localStorage.removeItem("authToken")
+  }
+
+  return (
+    <DataProvider token={token}>
+      {token ? (
+        <AuthenticatedApp onLogout={handleLogout} />
+      ) : (
+        <LoginScreen onLogin={handleLogin} />
+      )}
+    </DataProvider>
+  )
+}
+```
+
+### Accessing Context
+
+```tsx
+import { useData } from "chrry/context/providers"
+
+function MyComponent() {
+  const {
+    // Auth
+    token,
+
+    // Environment
+    env,
+    setEnv,
+    isDevelopment,
+
+    // URLs
+    API_URL,
+    WS_URL,
+    FRONTEND_URL,
+    setApiUrl,
+    setWsUrl,
+    setFrontendUrl,
+
+    // Regional Routing
+    enableRegionalRouting,
+    setRegion,
+    currentRegion,
+
+    // Configuration
+    PROMPT_LIMITS,
+    setPromptLimits,
+
+    // API Actions (all typed!)
+    actions,
+  } = useData()
+
+  // Use actions
+  const loadThreads = async () => {
+    const threads = await actions.getThreads({ pageSize: 20 })
+  }
+
+  return <div>...</div>
+}
+```
+
+## 🌍 Regional Routing
+
+### Automatic Detection
+
+```tsx
+function App() {
+  const { enableRegionalRouting } = useData()
+
+  useEffect(() => {
+    // Auto-detect and route to nearest server
+    enableRegionalRouting()
+  }, [])
+
+  return <YourApp />
+}
+```
+
+### Manual Region Selection
+
+```tsx
+function RegionSelector() {
+  const { setRegion, currentRegion } = useData()
+
+  return (
+    <select
+      value={currentRegion || ""}
+      onChange={(e) => setRegion(e.target.value as Region)}
+    >
+      <option value="us">🇺🇸 United States</option>
+      <option value="eu">🇪🇺 Europe</option>
+      <option value="asia">🇨🇳 Asia</option>
+      <option value="oceania">🇦🇺 Oceania</option>
+      <option value="africa">🇿🇦 Africa</option>
+      <option value="south-america">🇧🇷 South America</option>
+    </select>
+  )
+}
+```
+
+## ⚙️ Admin Panel Features
+
+### Environment Switching
+
+```tsx
+function AdminPanel() {
+  const { env, setEnv, API_URL } = useData()
+
+  return (
+    <div>
+      <h2>Environment</h2>
+      <select value={env} onChange={(e) => setEnv(e.target.value)}>
+        <option value="development">Development</option>
+        <option value="staging">Staging</option>
+        <option value="production">Production</option>
+      </select>
+      <p>Current API: {API_URL}</p>
+    </div>
+  )
+}
+```
+
+### Custom Endpoints
+
+```tsx
+function CustomEndpoints() {
+  const { setApiUrl, setWsUrl, API_URL, WS_URL } = useData()
+
+  return (
+    <div>
+      <h2>Custom Endpoints</h2>
+      <input
+        placeholder="API URL"
+        onChange={(e) => setApiUrl(e.target.value || null)}
+      />
+      <input
+        placeholder="WebSocket URL"
+        onChange={(e) => setWsUrl(e.target.value || null)}
+      />
+      <p>Active API: {API_URL}</p>
+      <p>Active WS: {WS_URL}</p>
+    </div>
+  )
+}
+```
+
+### Prompt Limits Configuration
+
+```tsx
+function PromptLimitsConfig() {
+  const { PROMPT_LIMITS, setPromptLimits } = useData()
+
+  const handleUpdate = () => {
+    setPromptLimits({
+      INPUT: 10000,
+      INSTRUCTIONS: 3000,
+      TOTAL: 50000,
+      WARNING_THRESHOLD: 7000,
+      THREAD_TITLE: 150,
+    })
+  }
+
+  return (
+    <div>
+      <h2>Prompt Limits</h2>
+      <p>Input: {PROMPT_LIMITS.INPUT}</p>
+      <p>Instructions: {PROMPT_LIMITS.INSTRUCTIONS}</p>
+      <p>Total: {PROMPT_LIMITS.TOTAL}</p>
+      <button onClick={handleUpdate}>Update Limits</button>
+    </div>
+  )
+}
+```
+
+## 🚀 API Actions
+
+All API actions are fully typed and automatically include the auth token:
+
+```tsx
+function Example() {
+  const { actions } = useData()
+
+  // Thread operations
+  await actions.getThreads({ pageSize: 20, sort: "date" })
+  await actions.getThread({ id: "thread-id" })
+  await actions.updateThread({ id: "thread-id", title: "New Title" })
+
+  // User operations
+  await actions.getUser()
+  await actions.updateUser({ name: "John Doe" })
+  await actions.uploadUserImage(file)
+
+  // Message operations
+  await actions.updateMessage({ messageId: "msg-id", like: true })
+  await actions.deleteMessage("msg-id")
+
+  // Calendar operations
+  await actions.createCalendarEvent(eventData)
+  await actions.getCalendarEvents({ startDate: "2024-01-01" })
+
+  // App operations
+  await actions.createApp(appData)
+  await actions.updateApp("app-id", appData)
+  await actions.deleteApp("app-id")
+}
+```
+
+## 🎨 Complete Example
+
+```tsx
+import { DataProvider, useData } from "chrry/context/providers"
+import { useState, useEffect } from "react"
+
+// Root App Component
+function App() {
+  const [token, setToken] = useState<string | null>(null)
+
+  useEffect(() => {
+    // Load token from storage
+    const savedToken = localStorage.getItem("authToken")
+    setToken(savedToken)
+  }, [])
+
+  const handleLogin = async (credentials: any) => {
+    const response = await fetch("/api/auth/login", {
+      method: "POST",
+      body: JSON.stringify(credentials),
+    })
+    const { token } = await response.json()
+    setToken(token)
+    localStorage.setItem("authToken", token)
+  }
+
+  return (
+    <DataProvider token={token}>
+      {token ? <Dashboard /> : <Login onLogin={handleLogin} />}
+    </DataProvider>
+  )
+}
+
+// Dashboard Component
+function Dashboard() {
+  const { actions, enableRegionalRouting, API_URL, currentRegion } = useData()
+
+  useEffect(() => {
+    // Auto-route to nearest server
+    enableRegionalRouting()
+
+    // Load initial data
+    loadData()
+  }, [])
+
+  const loadData = async () => {
+    const threads = await actions.getThreads({ pageSize: 20 })
+    const user = await actions.getUser()
+    console.log({ threads, user })
+  }
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>Region: {currentRegion}</p>
+      <p>API: {API_URL}</p>
+      {/* Your app content */}
+    </div>
+  )
+}
+
+export default App
+```
+
+## 🔥 Benefits
+
+✅ **Single Entry Point** - One provider to rule them all  
+✅ **Type-Safe** - Full TypeScript support throughout  
+✅ **Flexible URLs** - Switch environments/regions on the fly  
+✅ **Regional Routing** - Automatic geo-based server selection  
+✅ **Admin Controls** - Runtime configuration without rebuilds  
+✅ **Zero Boilerplate** - All API calls pre-configured with auth  
+✅ **Production Ready** - Enterprise-grade architecture

package/dist/About.module-RPTFOKG6.scss

@@ -0,0 +1,112 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+
+.ossLink,
+.oss {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.ossWrapper {
+  margin-bottom: toRem.toRem(20);
+  display: flex;
+  flex-direction: column;
+}
+
+.ossContainer {
+  display: flex;
+  gap: 15px;
+  flex-direction: column;
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.apps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: toRem.toRem(15);
+  margin: toRem.toRem(15) 0;
+}
+
+.app {
+  flex: 1;
+  min-width: toRem.toRem(200);
+  padding: toRem.toRem(15);
+  border: 1px dashed var(--shade-2);
+  border-radius: toRem.toRem(20);
+
+  transition: border-color 0.3s ease;
+
+  &:hover {
+    border: 1px solid var(--accent-1);
+    background-color: var(--shade-1);
+  }
+
+  h4 {
+    margin: 0;
+    font-size: toRem.toRem(15);
+    margin-bottom: toRem.toRem(8);
+    display: flex;
+    align-items: center;
+    gap: toRem.toRem(5);
+  }
+}
+
+.signInButton {
+  margin-left: auto;
+  font-size: 13px;
+}
+
+.appDescription {
+  font-size: toRem.toRem(13);
+  color: var(--shade-6);
+}
+
+.video {
+  width: 100%;
+  max-width: 100%;
+  margin-top: toRem.toRem(10);
+  border-radius: toRem.toRem(10);
+}
+
+.copyright {
+  margin-bottom: toRem.toRem(20);
+}
+
+.about {
+  section {
+    font-size: toRem.toRem(15);
+    h2,
+    h3 {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+  }
+}
+
+.oss {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20px;
+  > li {
+    > a {
+      svg {
+        color: var(--foreground);
+      }
+    }
+  }
+}
+
+.lastUpdated {
+  font-size: toRem.toRem(13);
+  color: var(--shade-6);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  margin-top: toRem.toRem(20);
+}

package/dist/Account.module-AA2NOD5S.scss

@@ -0,0 +1,159 @@
+@use "./toRem.scss";
+
+.accountButton {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  padding: toRem.toRem(5) toRem.toRem(10);
+  background-color: var(--background);
+  border: toRem.toRem(1) solid var(--shade-2);
+  box-shadow: none;
+  color: var(--foreground);
+  svg {
+    stroke: var(--accent-6);
+  }
+  &:hover,
+  &:disabled {
+    background-color: var(--background);
+
+    svg {
+      stroke: var(--accent-5);
+    }
+
+    color: var(--shade-6);
+  }
+}
+
+.userNameContainer {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  margin: toRem.toRem(10) 0 toRem.toRem(5) 0;
+
+  input {
+    flex: 1;
+  }
+}
+
+.email {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+}
+.deleteAccountButton {
+  margin-left: auto;
+}
+
+.userImageContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+}
+
+.userImageWrapper {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+  position: relative;
+  cursor: pointer;
+}
+
+.userImage {
+  border-radius: 50%;
+}
+
+.editImageButton {
+  padding: toRem.toRem(3) !important;
+  position: absolute;
+  bottom: toRem.toRem(-4);
+  right: toRem.toRem(-5);
+}
+
+.deleteAccount {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.accountContainer {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: toRem.toRem(15);
+  margin: 0;
+  flex: 1;
+}
+
+.title {
+  font-size: toRem.toRem(22);
+  flex: 1;
+  line-height: 1.2;
+}
+
+.close {
+  margin-left: auto;
+}
+
+.accounts {
+  margin-top: toRem.toRem(5);
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.linkAccount,
+.accountLinked {
+  margin-bottom: toRem.toRem(10);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  justify-content: center;
+}
+
+.linkAccount {
+  margin-left: auto;
+}
+.cookieConsent {
+  max-width: toRem.toRem(400);
+  padding: 0;
+  border: none;
+  margin-bottom: toRem.toRem(10);
+}
+.accountLinked {
+  justify-content: flex-start;
+}
+
+.logoutButton {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: toRem.toRem(5);
+  margin-left: auto;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  align-self: flex-end;
+  gap: toRem.toRem(15);
+  margin-top: toRem.toRem(5);
+  font-size: toRem.toRem(14);
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(toRem.toRem(20)); /* Start slightly below */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0); /* End at original position */
+  }
+}

package/dist/AddToHomeScreen.module-P6HAQ4QD.scss

@@ -0,0 +1,126 @@
+@use "./breakpoints.scss";
+@use "./utils.scss";
+
+.addToHomeScreen {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  top: 0;
+  left: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001;
+  position: fixed;
+  background: var(--overlay);
+
+  .main {
+    margin: 0 auto;
+    width: auto;
+    padding: 0 10px;
+    z-index: 3;
+    position: relative;
+    flex: 1;
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    @media (min-width: breakpoints.$breakpoint-mobile) {
+      max-width: breakpoints.$breakpoint-mobile;
+      width: inherit;
+    }
+
+    .inner {
+      animation: slideUp 0.4s ease forwards;
+      background-color: var(--background);
+      padding: 20px;
+      border-radius: 20px;
+      border: 1px solid var(--shade-2);
+      position: relative;
+      min-width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      box-shadow: var(--shadow);
+
+      @media (min-width: breakpoints.$breakpoint-mobile) {
+        flex-direction: row;
+        gap: 20px;
+      }
+
+      @media (min-width: breakpoints.$breakpoint-mobile) {
+        min-width: 320px;
+      }
+
+      .close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
+
+      .logoContainer {
+        display: inline-flex;
+        border-radius: 10px;
+        padding: 10px;
+        border: 1px solid var(--shade-2);
+        background-color: var(--background);
+        height: fit-content;
+        width: fit-content;
+      }
+
+      .content {
+        .icon {
+          width: 24px;
+          height: 24px;
+        }
+        > p {
+          margin: 0 0 10px 0;
+          display: flex;
+          gap: 10px;
+          align-items: center;
+        }
+        > div {
+          margin: 0 0 10px 0;
+        }
+        .addHomeScreen,
+        .addHomeScreenAndroid,
+        .share {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+          border: 1px solid var(--shade-2);
+          background-color: var(--background);
+          margin-top: 10px;
+          border-radius: 10px;
+          width: fit-content;
+          padding: 5px 8px;
+        }
+
+        .addHomeScreenAndroid {
+          margin-top: 0;
+        }
+
+        .selectAddToHomeScreen {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+        }
+        .quickAccess {
+          font-size: 14px;
+        }
+        .scrollDown {
+          font-weight: bold;
+        }
+      }
+
+      @include utils.respect-reduced-motion;
+    }
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    margin: 0 0 10px 0;
+  }
+}