@allbluecn/admin-app 0.2.5 → 0.3.0

package/src/components/ui/toast.tsx

@@ -0,0 +1,282 @@
+import * as React from "react"
+import { Toast as ToastPrimitive } from "@base-ui/react/toast"
+import { cn } from "cn"
+
+import { Button } from "@/components/ui/button"
+import { XIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const toastManager = ToastPrimitive.createToastManager()
+
+interface SonnerToastOptions {
+  description?: React.ReactNode
+  duration?: number
+  action?: { label: React.ReactNode; onClick?: () => void }
+}
+
+function buildOptions(message: React.ReactNode, type: string | undefined, opts?: SonnerToastOptions) {
+  return {
+    type,
+    title: message,
+    description: opts?.description,
+    timeout: opts?.duration,
+    actionProps: opts?.action
+      ? { children: opts.action.label, onClick: opts.action.onClick }
+      : undefined,
+  }
+}
+
+const toast = Object.assign(
+  (message: React.ReactNode, opts?: SonnerToastOptions) =>
+    toastManager.add(buildOptions(message, undefined, opts)),
+  {
+    success: (message: React.ReactNode, opts?: SonnerToastOptions) =>
+      toastManager.add(buildOptions(message, "success", opts)),
+    error: (message: React.ReactNode, opts?: SonnerToastOptions) =>
+      toastManager.add(buildOptions(message, "error", opts)),
+    warning: (message: React.ReactNode, opts?: SonnerToastOptions) =>
+      toastManager.add(buildOptions(message, "warning", opts)),
+    info: (message: React.ReactNode, opts?: SonnerToastOptions) =>
+      toastManager.add(buildOptions(message, "info", opts)),
+    loading: (message: React.ReactNode, opts?: SonnerToastOptions) =>
+      toastManager.add(buildOptions(message, "loading", { ...opts, duration: 0 })),
+    message: (message: React.ReactNode, opts?: SonnerToastOptions) =>
+      toastManager.add(buildOptions(message, undefined, opts)),
+    dismiss: (id?: string) => toastManager.close(id),
+    promise: <Value,>(
+      promiseValue: Promise<Value>,
+      options: {
+        loading: string
+        success: string | ((result: Value) => string)
+        error: string | ((error: unknown) => string)
+      },
+    ) =>
+      toastManager.promise(promiseValue, {
+        loading: options.loading,
+        success: options.success,
+        error: options.error,
+      }),
+  },
+)
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+  return <ToastPrimitive.Provider {...props} />
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+  return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        "pointer-events-none fixed bottom-4 right-4 z-50 w-full max-w-sm outline-none sm:bottom-6 sm:right-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+        "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+        "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        "flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+  return (
+    <ToastPrimitive.Title
+      data-slot="toast-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastDescription({
+  className,
+  ...props
+}: ToastPrimitive.Description.Props) {
+  return (
+    <ToastPrimitive.Description
+      data-slot="toast-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastAction({
+  className,
+  render = <Button variant="outline" size="sm" />,
+  ...props
+}: ToastPrimitive.Action.Props) {
+  return (
+    <ToastPrimitive.Action
+      data-slot="toast-action"
+      render={render}
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  )
+}
+
+function ToastClose({
+  className,
+  children,
+  render = <Button variant="ghost" size="icon-sm" />,
+  ...props
+}: ToastPrimitive.Close.Props) {
+  return (
+    <ToastPrimitive.Close
+      data-slot="toast-close"
+      aria-label="Close toast"
+      render={render}
+      className={cn(
+        "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <XIcon aria-hidden="true" />
+      )}
+    </ToastPrimitive.Close>
+  )
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  let icon: React.ReactNode = null
+
+  if (type === "success") {
+    icon = (
+      <CircleCheckIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "info") {
+    icon = (
+      <InfoIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "warning") {
+    icon = (
+      <TriangleAlertIcon aria-hidden="true" />
+    )
+  }
+
+  if (type === "error") {
+    icon = (
+      <OctagonXIcon className="text-destructive" aria-hidden="true" />
+    )
+  }
+
+  if (type === "loading") {
+    icon = (
+      <Loader2Icon className="animate-spin" aria-hidden="true" />
+    )
+  }
+
+  if (!icon) {
+    return null
+  }
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  )
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager()
+
+  return toasts.map((toastItem) => (
+    <Toast key={toastItem.id} toast={toastItem}>
+      <ToastContent>
+        <ToastIcon type={toastItem.type} />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <ToastAction />
+        <ToastClose />
+      </ToastContent>
+    </Toast>
+  ))
+}
+
+function Toaster({
+  children,
+  ...props
+}: ToastPrimitive.Provider.Props) {
+  return (
+    <ToastProvider toastManager={toastManager} {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  )
+}
+
+const createToastManager = ToastPrimitive.createToastManager
+const useToastManager = ToastPrimitive.useToastManager
+
+export {
+  Toaster,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  createToastManager,
+  toast,
+  useToastManager,
+}

package/src/components/ui/tooltip.tsx

@@ -1,74 +1,63 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-"use client"
-
-import * as React from "react"
-import { Tooltip as TooltipPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { cn } from "cn"
 
 function TooltipProvider({
-  delayDuration = 0,
+  delay = 0,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: TooltipPrimitive.Provider.Props) {
   return (
     <TooltipPrimitive.Provider
       data-slot="tooltip-provider"
-      delayDuration={delayDuration}
+      delay={delay}
       {...props}
     />
   )
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
   return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
 }
 
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
 function TooltipContent({
   className,
-  sideOffset = 0,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
   return (
     <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className={cn(
-          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
-        )}
-        {...props}
+        className="isolate z-50"
       >
-        {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
-      </TooltipPrimitive.Content>
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
   )
 }
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/user/settings-activity-log.tsx

@@ -216,7 +216,7 @@ export default function SettingsActivityLog({
                   {m.common_activityLog_actionType()}
                 </FieldLabel>
               </div>
-              <Select onValueChange={setSelectedType} value={selectedType}>
+              <Select onValueChange={(v) => setSelectedType(v ?? "")} value={selectedType}>
                 <SelectTrigger id="action-type">
                   <SelectValue />
                 </SelectTrigger>

package/src/components/user/user-create-dialog.tsx

@@ -35,7 +35,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { createUserFn } from "@/server/serverFns/user/create";
-import { toast } from '@/components/ui/sonner';
+import { toast } from '@/components/ui/toast';
 
 interface UserCreateDialogProps {
   open: boolean;
@@ -111,7 +111,7 @@ export function UserCreateDialog({ open, onOpenChange }: UserCreateDialogProps)
             </div>
             <div className="grid gap-2">
               <Label>角色</Label>
-              <Select value={form.role}                 onValueChange={(v: string) => setForm((f) => ({ ...f, role: v as typeof form.role }))}>
+              <Select value={form.role}                 onValueChange={(v) => setForm((f) => ({ ...f, role: (v ?? "") as typeof form.role }))}>
                 <SelectTrigger>
                   <SelectValue />
                 </SelectTrigger>

package/src/components/user/user-filters.tsx

@@ -76,7 +76,7 @@ export function UserFilters({ search, role, status }: UserFiltersProps) {
 
       <Select
         value={role || "all"}
-        onValueChange={(v: string) => updateParam("role", v)}
+        onValueChange={(v) => updateParam("role", v ?? "")}
       >
         <SelectTrigger className="w-32.5">
           <SelectValue placeholder={m.common_userFilters_rolePlaceholder()} />
@@ -91,7 +91,7 @@ export function UserFilters({ search, role, status }: UserFiltersProps) {
 
       <Select
         value={status || "all"}
-        onValueChange={(v: string) => updateParam("status", v)}
+        onValueChange={(v) => updateParam("status", v ?? "")}
       >
         <SelectTrigger className="w-32.5">
           <SelectValue placeholder={m.common_userFilters_statusPlaceholder()} />

package/src/hooks/use-mobile.ts

@@ -1,20 +1,3 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
 import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768

package/src/lib/pacer.ts

@@ -0,0 +1,21 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// apps/admin/src/lib/pacer.ts
+export { useDebouncedCallback } from "@tanstack/react-pacer"
+
+export const PROMPT_PREVIEW_DEBOUNCE_MS = 300

package/src/lib/utils.ts

@@ -1,23 +1 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+export { cn } from "cn"

package/src/paraglide/.gitignore

@@ -0,0 +1,3 @@
+# ignore everything because the directory is auto-generated by inlang paraglide-js
+# for more info visit https://paraglidejs.com
+*

package/src/paraglide/.prettierignore

@@ -0,0 +1,3 @@
+# ignore everything because the directory is auto-generated by inlang paraglide-js
+# for more info visit https://paraglidejs.com
+*

package/src/paraglide/README.md

@@ -0,0 +1,162 @@
+# Paraglide JS Compiled Output
+
+> Auto-generated i18n message functions. Import `messages.js` to use translated strings.
+
+Compiled from: `/Users/urmynami/HelloAI/AllBlue-Workspace/AllBlue/apps/admin/project.inlang`
+
+
+## What is this folder?
+
+This folder contains compiled [Paraglide JS](https://github.com/opral/paraglide-js) output. Paraglide JS compiles your translation messages into tree-shakeable JavaScript functions.
+
+## At a glance
+
+Purpose:
+- This folder stores compiled i18n message functions.
+- Source translations live outside this folder in your inlang project.
+
+Safe to import:
+- `messages.js` — all message functions
+- `runtime.js` — locale utilities
+- `server.js` — server-side middleware
+
+Do not edit:
+- All files in this folder are auto-generated.
+- Changes will be overwritten on next compilation.
+
+```
+paraglide/
+├── messages.js      # Message exports (import this)
+├── messages/        # Individual message functions
+├── runtime.js       # Locale detection & configuration
+├── registry.js      # Formatting utilities (plural, number, datetime, relativetime)
+├── server.js        # Server-side middleware
+└── .gitignore       # Marks folder as generated
+```
+
+## Usage
+
+```js
+import * as m from "./paraglide/messages.js";
+
+// Messages are functions that return localized strings
+m.hello_world();             // "Hello, World!" (in current locale)
+m.greeting({ name: "Sam" }); // "Hello, Sam!"
+
+// Override locale per-call
+m.hello_world({}, { locale: "de" });           // "Hallo, Welt!"
+m.greeting({ name: "Sam" }, { locale: "de" }); // "Hallo, Sam!"
+```
+
+## Runtime API
+
+```js
+import { getLocale, getTextDirection, setLocale, locales, baseLocale } from "./paraglide/runtime.js";
+
+getLocale();    // Current locale, e.g., "en"
+getTextDirection(); // "ltr" | "rtl" for current locale
+setLocale("de"); // Set locale
+locales;        // Available locales, e.g., ["en", "de", "fr"]
+baseLocale;     // Default locale, e.g., "en"
+```
+
+## Strategy
+
+The strategy determines how the current locale is detected and persisted:
+
+- **Cookie**: Stores locale preference in a cookie.
+- **URL**: Derives locale from URL patterns (e.g., `/en/about`, `en.example.com`).
+- **GlobalVariable**: Uses a global variable (client-side only).
+- **BaseLocale**: Always returns the base locale.
+
+Strategies can be combined. The order defines precedence:
+
+```js
+await compile({
+  project: "./project.inlang",
+  outdir: "./src/paraglide",
+  strategy: ["url", "cookie", "baseLocale"],
+});
+```
+
+See the [strategy documentation](https://paraglidejs.com/strategy) for details.
+
+## Markup (Rich Text)
+
+Messages can contain markup tags for bold, links, and other inline elements. Translators control where tags appear; developers control how they render.
+
+Important:
+- Tag names are app-defined. There is no built-in list of HTML tags.
+- `{#b}...{/b}` does not automatically render as `<b>...</b>`.
+- Renderers/snippets are looked up by the same tag name used in the message.
+
+### Message syntax
+
+```json
+{
+  "cta": "{#link to=|/docs| rel=$relationship @track}Read the docs{/link}",
+  "welcome": "{#b}Hi {name}{/b}{#icon/}"
+}
+```
+
+- `{#tagName}` opens a tag, `{/tagName}` closes it.
+- `{#tagName/}` creates a standalone tag.
+- Options: `to=|/docs|` or `rel=$relationship` (accessed via `options.*`).
+- Attributes: `@track` or `@variant=|hero|` (accessed via `attributes.*`).
+
+This is the default inlang message syntax. Paraglide's message format is plugin-based — you can use [ICU MessageFormat 1](https://inlang.com/m/p7c8m1d2/plugin-inlang-icu-messageformat-1), [i18next](https://inlang.com/m/3i8bor92/plugin-inlang-i18next), or other [plugins](https://inlang.com/c/plugins) instead.
+
+### Rendering markup
+
+Calling the message function still returns **plain text** (markup stripped):
+
+```js
+m.cta({ relationship: "noopener" }); // "Read the docs"
+```
+
+To render markup, use the framework adapter or the low-level `parts()` API:
+
+```js
+const parts = m.cta.parts({ relationship: "noopener" });
+// [
+//   { type: "markup-start", name: "link", options: { to: "/docs", rel: "noopener" }, attributes: { track: true } },
+//   { type: "text", value: "Read the docs" },
+//   { type: "markup-end", name: "link" }
+// ]
+```
+
+Framework adapters provide a `<ParaglideMessage>` component that accepts markup renderers:
+
+- `@inlang/paraglide-js-react`
+- `@inlang/paraglide-js-vue`
+- `@inlang/paraglide-js-svelte`
+- `@inlang/paraglide-js-solid`
+
+```jsx
+import { ParaglideMessage } from "@inlang/paraglide-js-react"; // or -vue, -svelte, -solid
+
+<ParaglideMessage
+  message={m.welcome}
+  inputs={{ name: "Ada" }}
+  markup={{
+    b: ({ children }) => <b>{children}</b>,
+    icon: () => <span aria-hidden="true" className="icon-wave" />,
+  }}
+/>
+```
+
+The available renderer/snippet names come from the message itself. You can inspect them through `message.parts()`, and TypeScript uses the same names to type-check your markup renderers.
+
+See the [markup documentation](https://paraglidejs.com/markup) for details.
+
+## Key concepts
+
+- **Tree-shakeable**: Each message is a function, enabling [up to 70% smaller i18n bundle sizes](https://paraglidejs.com/benchmark) than traditional i18n libraries.
+- **Typesafe**: Full TypeScript/JSDoc support with autocomplete.
+- **Variants**: Messages can have variants for pluralization, gender, etc.
+- **Fallbacks**: Missing translations fall back to the base locale.
+
+## Links
+
+- [Paraglide JS Documentation](https://paraglidejs.com)
+- [Source Repository](https://github.com/opral/paraglide-js)