tera-system-ui 0.1.50 → 0.1.63

package/dist/paraglide/server.d.ts

@@ -13,10 +13,16 @@
  * - If URL doesn't match the determined locale, redirects to localized URL (only for document requests)
  * - De-localizes URLs before passing to server (e.g., `/fr/about` → `/about`)
  *
+ * @see https://inlang.com/m/gerre34r/library-inlang-paraglideJs/middleware
+ *
  * @template T - The return type of the resolve function
  *
  * @param {Request} request - The incoming request object
- * @param {(args: { request: Request, locale: import("./runtime.js").Locale }) => T | Promise<T>} resolve - Function to handle the request
+ * @param {(args: { request: Request, locale: import("./runtime.js").Locale }) => T | Promise<T>} resolve - Function to handle the request. The callback receives:
+ *   - `request`: A modified request with a delocalized URL when the URL strategy is used (e.g., `/fr/about` → `/about`).
+ *      If your framework handles URL localization itself (e.g., TanStack Router's `rewrite` option), use the original
+ *      request instead to avoid redirect loops.
+ *   - `locale`: The determined locale for this request.
  * @param {{ onRedirect:(response: Response) => void }} [callbacks] - Callbacks to handle events from middleware
  * @returns {Promise<Response>}
  *
@@ -24,7 +30,7 @@
  * ```typescript
  * // Basic usage in metaframeworks like NextJS, SvelteKit, Astro, Nuxt, etc.
  * export const handle = async ({ event, resolve }) => {
- *   return serverMiddleware(event.request, ({ request, locale }) => {
+ *   return paraglideMiddleware(event.request, ({ request, locale }) => {
  *     // let the framework further resolve the request
  *     return resolve(request);
  *   });
@@ -35,7 +41,7 @@
  * ```typescript
  * // Usage in a framework like Express JS or Hono
  * app.use(async (req, res, next) => {
- *   const result = await serverMiddleware(req, ({ request, locale }) => {
+ *   const result = await paraglideMiddleware(req, ({ request, locale }) => {
  *     // If a redirect happens this won't be called
  *     return next(request);
  *   });
@@ -50,7 +56,7 @@
  * // one request could leak into another concurrent request.
  * export default {
  *   fetch: async (request) => {
- *     return serverMiddleware(
+ *     return paraglideMiddleware(
  *       request,
  *       ({ request, locale }) => handleRequest(request, locale),
  *       { disableAsyncLocalStorage: true }
@@ -58,6 +64,36 @@
  *   }
  * };
  * ```
+ *
+ * @example
+ * ```typescript
+ * // Usage with frameworks that handle URL localization/delocalization themselves
+ * //
+ * // Some frameworks like TanStack Router handle URL localization and delocalization
+ * // themselves via their own rewrite APIs (e.g., `rewrite.input`/`rewrite.output`).
+ * //
+ * // When the framework handles this, the middleware's URL delocalization is not needed.
+ * // Using the modified `request` from the callback would cause a redirect loop because
+ * // both the middleware and the framework would attempt to delocalize the URL.
+ * //
+ * // Solution: Pass the original request to the handler instead of the modified one.
+ * // The middleware still handles locale detection, cookies, and AsyncLocalStorage context.
+ * //
+ * // ❌ WRONG - causes redirect loop when framework handles URL rewriting:
+ * // paraglideMiddleware(req, ({ request }) => handler.fetch(request))
+ * //
+ * // ✅ CORRECT - use original request when framework handles URL localization:
+ * // paraglideMiddleware(req, () => handler.fetch(req))
+ *
+ * * *
+ * export default {
+ *   fetch(req: Request): Promise<Response> {
+ *     // TanStack Router handles URL rewriting via deLocalizeUrl/localizeUrl
+ *     // so we pass the original `req` instead of the modified `request`
+ *     return paraglideMiddleware(req, () => handler.fetch(req))
+ *   },
+ * }
+ * ```
  */
 export function paraglideMiddleware<T>(request: Request, resolve: (args: {
     request: Request;

package/dist/paraglide/server.js

@@ -1,4 +1,4 @@
-// eslint-disable
+/* eslint-disable */
 
 import * as runtime from "./runtime.js";
 
@@ -17,10 +17,16 @@ import * as runtime from "./runtime.js";
  * - If URL doesn't match the determined locale, redirects to localized URL (only for document requests)
  * - De-localizes URLs before passing to server (e.g., `/fr/about` → `/about`)
  *
+ * @see https://inlang.com/m/gerre34r/library-inlang-paraglideJs/middleware
+ *
  * @template T - The return type of the resolve function
  *
  * @param {Request} request - The incoming request object
- * @param {(args: { request: Request, locale: import("./runtime.js").Locale }) => T | Promise<T>} resolve - Function to handle the request
+ * @param {(args: { request: Request, locale: import("./runtime.js").Locale }) => T | Promise<T>} resolve - Function to handle the request. The callback receives:
+ *   - `request`: A modified request with a delocalized URL when the URL strategy is used (e.g., `/fr/about` → `/about`).
+ *      If your framework handles URL localization itself (e.g., TanStack Router's `rewrite` option), use the original
+ *      request instead to avoid redirect loops.
+ *   - `locale`: The determined locale for this request.
  * @param {{ onRedirect:(response: Response) => void }} [callbacks] - Callbacks to handle events from middleware
  * @returns {Promise<Response>}
  *
@@ -28,7 +34,7 @@ import * as runtime from "./runtime.js";
  * ```typescript
  * // Basic usage in metaframeworks like NextJS, SvelteKit, Astro, Nuxt, etc.
  * export const handle = async ({ event, resolve }) => {
- *   return serverMiddleware(event.request, ({ request, locale }) => {
+ *   return paraglideMiddleware(event.request, ({ request, locale }) => {
  *     // let the framework further resolve the request
  *     return resolve(request);
  *   });
@@ -39,7 +45,7 @@ import * as runtime from "./runtime.js";
  * ```typescript
  * // Usage in a framework like Express JS or Hono
  * app.use(async (req, res, next) => {
- *   const result = await serverMiddleware(req, ({ request, locale }) => {
+ *   const result = await paraglideMiddleware(req, ({ request, locale }) => {
  *     // If a redirect happens this won't be called
  *     return next(request);
  *   });
@@ -54,7 +60,7 @@ import * as runtime from "./runtime.js";
  * // one request could leak into another concurrent request.
  * export default {
  *   fetch: async (request) => {
- *     return serverMiddleware(
+ *     return paraglideMiddleware(
  *       request,
  *       ({ request, locale }) => handleRequest(request, locale),
  *       { disableAsyncLocalStorage: true }
@@ -62,39 +68,67 @@ import * as runtime from "./runtime.js";
  *   }
  * };
  * ```
+ *
+ * @example
+ * ```typescript
+ * // Usage with frameworks that handle URL localization/delocalization themselves
+ * //
+ * // Some frameworks like TanStack Router handle URL localization and delocalization
+ * // themselves via their own rewrite APIs (e.g., `rewrite.input`/`rewrite.output`).
+ * //
+ * // When the framework handles this, the middleware's URL delocalization is not needed.
+ * // Using the modified `request` from the callback would cause a redirect loop because
+ * // both the middleware and the framework would attempt to delocalize the URL.
+ * //
+ * // Solution: Pass the original request to the handler instead of the modified one.
+ * // The middleware still handles locale detection, cookies, and AsyncLocalStorage context.
+ * //
+ * // ❌ WRONG - causes redirect loop when framework handles URL rewriting:
+ * // paraglideMiddleware(req, ({ request }) => handler.fetch(request))
+ * //
+ * // ✅ CORRECT - use original request when framework handles URL localization:
+ * // paraglideMiddleware(req, () => handler.fetch(req))
+ *
+ * * *
+ * export default {
+ *   fetch(req: Request): Promise<Response> {
+ *     // TanStack Router handles URL rewriting via deLocalizeUrl/localizeUrl
+ *     // so we pass the original `req` instead of the modified `request`
+ *     return paraglideMiddleware(req, () => handler.fetch(req))
+ *   },
+ * }
+ * ```
  */
 export async function paraglideMiddleware(request, resolve, callbacks) {
     if (!runtime.disableAsyncLocalStorage && !runtime.serverAsyncLocalStorage) {
-        const { AsyncLocalStorage } = await import("async_hooks");
-        runtime.overwriteServerAsyncLocalStorage(new AsyncLocalStorage());
+      const { AsyncLocalStorage } = await import("async_hooks");
+      runtime.overwriteServerAsyncLocalStorage(new AsyncLocalStorage());
+    } else if (!runtime.serverAsyncLocalStorage) {
+      runtime.overwriteServerAsyncLocalStorage(createMockAsyncLocalStorage());
     }
-    else if (!runtime.serverAsyncLocalStorage) {
-        runtime.overwriteServerAsyncLocalStorage(createMockAsyncLocalStorage());
-    }
-    const locale = runtime.extractLocaleFromRequest(request);
+    const decision = await runtime.shouldRedirect({ request });
+    const locale = decision.locale;
     const origin = new URL(request.url).origin;
     // if the client makes a request to a URL that doesn't match
     // the localizedUrl, redirect the client to the localized URL
     if (request.headers.get("Sec-Fetch-Dest") === "document" &&
-        runtime.strategy.includes("url")) {
-        const localizedUrl = runtime.localizeUrl(request.url, { locale });
-        if (normalizeURL(localizedUrl.href) !== normalizeURL(request.url)) {
-            // Create headers object with Vary header if preferredLanguage strategy is used
-            /** @type {Record<string, string>} */
-            const headers = {};
-            if (runtime.strategy.includes("preferredLanguage")) {
-                headers["Vary"] = "Accept-Language";
-            }
-            const response = new Response(null, {
-                status: 307,
-                headers: {
-                    Location: localizedUrl.href,
-                    ...headers,
-                },
-            });
-            callbacks?.onRedirect(response);
-            return response;
+        decision.shouldRedirect &&
+        decision.redirectUrl) {
+        // Create headers object with Vary header if preferredLanguage strategy is used
+        /** @type {Record<string, string>} */
+        const headers = {};
+        if (runtime.strategy.includes("preferredLanguage")) {
+            headers["Vary"] = "Accept-Language";
         }
+        const response = new Response(null, {
+            status: 307,
+            headers: {
+                Location: decision.redirectUrl.href,
+                ...headers,
+            },
+        });
+        callbacks?.onRedirect(response);
+        return response;
     }
     // If the strategy includes "url", we need to de-localize the URL
     // before passing it to the server middleware.
@@ -102,11 +136,24 @@ export async function paraglideMiddleware(request, resolve, callbacks) {
     // The middleware is responsible for mapping a localized URL to the
     // de-localized URL e.g. `/en/about` to `/about`. Otherwise,
     // the server can't render the correct page.
-    const newRequest = runtime.strategy.includes("url")
-        ? new Request(runtime.deLocalizeUrl(request.url), request)
-        : // need to create a new request object because some metaframeworks (nextjs!) throw otherwise
-            // https://github.com/opral/inlang-paraglide-js/issues/411
-            new Request(request);
+    let newRequest;
+    if (runtime.strategy.includes("url")) {
+        newRequest = new Request(runtime.deLocalizeUrl(request.url), request);
+    }
+    else {
+        // Some metaframeworks (NextJS) require a new Request object
+        // https://github.com/opral/inlang-paraglide-js/issues/411
+        // However, some frameworks (TanStack Start 1.143+) use custom Request
+        // implementations that cannot be cloned with `new Request(request)`
+        // https://github.com/opral/paraglide-js/issues/573
+        // Try to clone the request, but fall back to the original if cloning fails
+        try {
+            newRequest = new Request(request);
+        }
+        catch {
+            newRequest = request;
+        }
+    }
     // the message functions that have been called in this request
     /** @type {Set<string>} */
     const messageCalls = new Set();
@@ -138,18 +185,6 @@ export async function paraglideMiddleware(request, resolve, callbacks) {
     }
     return response;
 }
-/**
- * Normalize url for comparison.
- * Strips trailing slash
- * @param {string} url
- * @returns {string} normalized url string
- */
-function normalizeURL(url) {
-    const urlObj = new URL(url);
-    // // strip trailing slash from pathname
-    urlObj.pathname = urlObj.pathname.replace(/\/$/, "");
-    return urlObj.href;
-}
 /**
  * Creates a mock AsyncLocalStorage implementation for environments where
  * native AsyncLocalStorage is not available or disabled.
@@ -178,6 +213,8 @@ function createMockAsyncLocalStorage() {
         },
     };
 }
+// Used in generated server.js when async local storage is disabled.
+void createMockAsyncLocalStorage;
 /**
  * The compiled messages for the server middleware.
  *

package/dist/tera-i18n/projects/tera-system-ui/project.inlang/.meta.json

@@ -0,0 +1,3 @@
+{
+  "highestSdkVersion": "2.6.2"
+}

package/dist/tera-i18n/projects/tera-system-ui/project.inlang/README.md

@@ -0,0 +1,103 @@
+
+## What is this folder?
+
+This is an [unpacked (git-friendly)](https://inlang.com/docs/unpacked-project) inlang project.
+
+## At a glance
+
+Purpose:
+- This folder stores inlang project configuration and plugin cache data.
+- Translation files live outside this folder and are referenced from `settings.json`.
+
+Safe to edit:
+- `settings.json`
+
+Do not edit:
+- `cache/`
+- `.gitignore`
+
+Key files:
+- `settings.json` — locales, plugins, file patterns (source of truth)
+- `cache/` — plugin caches (safe to delete)
+- `.gitignore` — generated
+
+```
+*.inlang/
+├── settings.json    # Locales, plugins, and file patterns (source of truth)
+├── cache/           # Plugin caches (gitignored)
+└── .gitignore       # Ignores everything except settings.json
+```
+
+Translation files (like `messages/en.json`) live **outside** this folder and are referenced via plugins in `settings.json`.
+
+## What is inlang?
+
+[Inlang](https://inlang.com) is an open file format for building custom localization (i18n) tooling. It provides:
+
+- **CRUD API** — Read and write translations programmatically via SQL
+- **Plugin system** — Import/export any format (JSON, XLIFF, etc.)
+- **Version control** — Built-in version control via [lix](https://lix.dev)
+
+```
+┌──────────┐        ┌───────────┐         ┌────────────┐
+│ i18n lib │        │Translation│         │   CI/CD    │
+│          │        │   Tool    │         │ Automation │
+└────┬─────┘        └─────┬─────┘         └─────┬──────┘
+     │                    │                     │
+     └─────────┐          │          ┌──────────┘
+               ▼          ▼          ▼
+           ┌──────────────────────────────────┐
+           │          *.inlang file           │
+           └──────────────────────────────────┘
+```
+
+## Quick start
+
+```bash
+npm install @inlang/sdk
+```
+
+```ts
+import { loadProjectFromDirectory, saveProjectToDirectory } from "@inlang/sdk";
+
+const project = await loadProjectFromDirectory({ path: "./project.inlang" });
+// Query messages with SQLite + [Kysely](https://kysely.dev/) under the hood.
+const messages = await project.db.selectFrom("message").selectAll().execute();
+
+// Use project.db to update messages.
+await saveProjectToDirectory({ path: "./project.inlang", project });
+```
+
+## Ideas for custom tooling
+
+- Translation health dashboard (missing/empty/stale messages)
+- Locale coverage report in CI
+- Auto-PR for new keys with placeholders
+- Migration tool between file formats via plugins
+- Glossary/term consistency checker
+
+## Data model ([docs](https://inlang.com/docs/data-model))
+
+```
+bundle (a concept, e.g., "welcome_header")
+  └── message (per locale, e.g., "en", "de")
+        └── variant (plural forms, gender, etc.)
+```
+
+- **bundle**: Groups messages by ID (e.g., `welcome_header`)
+- **message**: A translation for a specific locale
+- **variant**: Handles pluralization/selectors (most messages have one variant)
+
+## Common tasks
+
+- List bundles: `project.db.selectFrom("bundle").selectAll().execute()`
+- List messages for locale: `project.db.selectFrom("message").where("locale", "=", "en").selectAll().execute()`
+- Find missing translations: compare message counts across locales
+- Update a message: `project.db.updateTable("message").set({ ... }).where("id", "=", "...").execute()`
+
+## Links
+
+- [SDK documentation](https://inlang.com/docs)
+- [inlang.com](https://inlang.com)
+- [List of plugins](https://inlang.com/c/plugins)
+- [List of tools](https://inlang.com/c/tools)

package/dist/themes/tera-ui-base.css

@@ -14,17 +14,52 @@ body:has(dialog[open]) {
     overflow: hidden
 }
 
-.ripple {
+/* AntD-style Wave Animation for Buttons */
+.btn-wave {
+    position: relative;
+}
+
+.btn-wave::after {
+    content: '';
     position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    animation: ripple-animation 1s ease-out;
+    inset: 0;
+    border-radius: inherit;
+    opacity: 0;
     pointer-events: none;
+    box-shadow: 0 0 0 0 var(--wave-color, var(--color-primary-600));
+}
+
+.btn-wave.wave-active::after {
+    animation: ant-wave 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+
+/* Wave color based on button variant */
+.btn-wave[data-variant="primary"]::after {
+    --wave-color: var(--color-primary-600);
+}
+
+.btn-wave[data-variant="default"]::after,
+.btn-wave[data-variant="dashed"]::after {
+    --wave-color: var(--color-primary-600);
 }
 
-@keyframes ripple-animation {
-    to {
-        transform: scale(4);
+.btn-wave[data-variant="text"]::after,
+.btn-wave[data-variant="link"]::after {
+    --wave-color: transparent;
+}
+
+/* Danger wave color */
+.btn-wave[data-danger="true"]::after {
+    --wave-color: var(--color-error-500);
+}
+
+@keyframes ant-wave {
+    0% {
+        box-shadow: 0 0 0 0 var(--wave-color);
+        opacity: 0.4;
+    }
+    100% {
+        box-shadow: 0 0 0 6px var(--wave-color);
         opacity: 0;
     }
 }
@@ -263,6 +298,34 @@ html.dark, .dark * {
     --color-primary-token-10: rgb(235, 243, 254);
 }
 
+/* ============================================= */
+/* === TeraUI Design System - Ant Design === */
+/* ============================================= */
+/* Consistent design tokens for all components */
+:root {
+    /* TeraUI Border Radius - Ant Design uses 6px as base */
+    --tera-radius-sm: 2px;
+    --tera-radius-base: 6px;
+    --tera-radius-lg: 8px;
+
+    /* TeraUI Control Heights - matches component sizes */
+    --tera-control-height-xs: 20px;
+    --tera-control-height-sm: 24px;
+    --tera-control-height-base: 32px;
+    --tera-control-height-lg: 40px;
+
+    /* TeraUI Transitions - Ant Design easing */
+    --tera-transition-fast: 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+    --tera-transition-base: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    --tera-transition-slow: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    /* TeraUI Focus Shadows - subtle glow like Ant Design */
+    --tera-focus-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+    --tera-focus-shadow-error: 0 0 0 2px rgba(239, 68, 68, 0.1);
+    --tera-focus-shadow-warning: 0 0 0 2px rgba(249, 115, 22, 0.1);
+    --tera-focus-shadow-success: 0 0 0 2px rgba(34, 197, 94, 0.1);
+}
+
 
 
 /* Base responsive variable */

package/dist/types/index.d.ts

@@ -0,0 +1,25 @@
+export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps } from '../components/accordion/Accordion.js';
+export type { AvatarProps } from '../components/avatar/Avatar.js';
+export type { BrandLogoProps } from '../components/brand-logo/BrandLogo.js';
+export type { ButtonProps } from '../components/button/Button.js';
+export type { CheckboxProps } from '../components/checkbox/Checkbox.js';
+export type { ComboboxProps } from '../components/combobox/Combobox.js';
+export type { DialogProps, DialogPropsAstro } from '../components/dialog/Dialog.js';
+export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps } from '../components/dropdown-menu/DropdownMenu.js';
+export type { HeaderProps } from '../components/header/Header.js';
+export type { InputProps } from '../components/input/Input.js';
+export type { LabelProps } from '../components/label/Label.js';
+export type { LanguagePickerButtonProps } from '../components/language-picker-button/LanguagePickerButton.js';
+export type { LightDarkToggleProps } from '../components/light-dark-toggle/LightDarkToggle.js';
+export type { PopoverProps } from '../components/popover/Popover.js';
+export type { PopoverResponsiveProps } from '../components/popover-responsive/PopoverResponsive.js';
+export type { SelectProps } from '../components/select/Select.js';
+export type { SideNavigationProps, SideNavigationItem } from '../components/side-navigation/SideNavigation.js';
+export type { SliderProps } from '../components/slider/Slider.js';
+export type { StarRatingProps } from '../components/star-rating/StarRating.js';
+export type { SwitchProps } from '../components/switch/Switch.js';
+export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps } from '../components/tabs/Tabs.svelte.js';
+export type { TeraUiContextProps, TeraUiContext } from '../components/tera-ui-context/TeraUiContext.js';
+export type { TextAreaProps, AutoSizeConfig } from '../components/text-area/TextArea.js';
+export type { UserAvatarWithMenuProps } from '../components/user-avatar-with-menu/UserAvatarWithMenu.js';
+export type { UserData, JwtToken } from './user-data.js';

package/dist/types/index.js

@@ -0,0 +1,3 @@
+// Component Props Types - Centralized exports for consumers
+// Usage: import type { ButtonProps, InputProps } from 'tera-system-ui/types'
+export {};