@nexttylabs/echo 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @nexttylabs/echo
 
+## 0.13.0
+
+### Minor Changes
+
+- fc3d8f1: support light/dark theme
+- cc04d9f: Use the organization member role uniformly.
+- 5cfdeb7: feat: support editing user profile
+
+### Patch Changes
+
+- 76fda4d: fix organizational setting i18n
+- 7dba561: remove legacy changeset files
+- 158b254: show current orgnization
+- 1e798f1: remove unuse tables and published files
+- e3c4e1c: fix workflow errors
+- d315d85: Fix the theme display issue.
+- daf9abb: first release
+
+## 0.12.0
+
+### Minor Changes
+
+- fc3d8f1: support light/dark theme
+- cc04d9f: Use the organization member role uniformly.
+- 5cfdeb7: feat: support editing user profile
+
+### Patch Changes
+
+- 76fda4d: fix organizational setting i18n
+- 7dba561: remove legacy changeset files
+- 158b254: show current orgnization
+- 1e798f1: remove unuse tables and published files
+- e3c4e1c: fix workflow errors
+- d315d85: Fix the theme display issue.
+- daf9abb: first release
+
 ## 0.11.0
 
 ### Minor Changes

package/app/(auth)/login/page.tsx

@@ -36,13 +36,13 @@ export default async function LoginPage() {
   const t = await getTranslations("auth.login");
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-12">
+    <div className="min-h-screen bg-background px-4 py-12">
       <div className="mx-auto flex w-full max-w-md flex-col gap-6">
         <div className="text-center">
-          <h1 className="text-3xl font-semibold tracking-tight text-slate-900">
+          <h1 className="text-3xl font-semibold tracking-tight text-foreground">
             {t("pageTitle")}
           </h1>
-          <p className="mt-2 text-sm text-slate-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             {t("pageSubtitle")}
           </p>
         </div>

package/app/(auth)/register/page.tsx

@@ -31,13 +31,13 @@ export default async function RegisterPage() {
   const t = await getTranslations("auth.register");
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-12">
+    <div className="min-h-screen bg-background px-4 py-12">
       <div className="mx-auto flex w-full max-w-md flex-col gap-6">
         <div className="text-center">
-          <h1 className="text-3xl font-semibold tracking-tight text-slate-900">
+          <h1 className="text-3xl font-semibold tracking-tight text-foreground">
             {t("pageTitle")}
           </h1>
-          <p className="mt-2 text-sm text-slate-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             {t("pageSubtitle")}
           </p>
         </div>

package/app/(dashboard)/admin/feedback/new/page.tsx

@@ -39,11 +39,11 @@ export default async function NewFeedbackPage() {
 
   if (!organization) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-12">
+      <div className="min-h-screen bg-background px-4 py-12">
         <div className="mx-auto flex w-full max-w-2xl flex-col gap-6">
-          <div className="rounded-lg border border-amber-200 bg-amber-50 p-6">
-            <h1 className="text-xl font-semibold text-amber-800">未找到组织</h1>
-            <p className="mt-2 text-sm text-amber-700">
+          <div className="rounded-lg border border-amber-200 bg-amber-50 p-6 dark:border-amber-800 dark:bg-amber-950">
+            <h1 className="text-xl font-semibold text-amber-800 dark:text-amber-200">未找到组织</h1>
+            <p className="mt-2 text-sm text-amber-700 dark:text-amber-300">
               请先加入组织后再代客户提交反馈。
             </p>
           </div>
@@ -58,11 +58,11 @@ export default async function NewFeedbackPage() {
 
   if (!hasSubmitOnBehalfPermission) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-12">
+      <div className="min-h-screen bg-background px-4 py-12">
         <div className="mx-auto flex w-full max-w-2xl flex-col gap-6">
-          <div className="rounded-lg border border-red-200 bg-red-50 p-6">
-            <h1 className="text-xl font-semibold text-red-800">权限不足</h1>
-            <p className="mt-2 text-sm text-red-600">
+          <div className="rounded-lg border border-red-200 bg-red-50 p-6 dark:border-red-800 dark:bg-red-950">
+            <h1 className="text-xl font-semibold text-red-800 dark:text-red-200">权限不足</h1>
+            <p className="mt-2 text-sm text-red-600 dark:text-red-300">
               您没有代客户提交反馈的权限。请联系管理员获取相应权限。
             </p>
           </div>
@@ -72,13 +72,13 @@ export default async function NewFeedbackPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-12">
+    <div className="min-h-screen bg-background px-4 py-12">
       <div className="mx-auto flex w-full max-w-2xl flex-col gap-6">
         <div>
-          <h1 className="text-3xl font-semibold tracking-tight text-slate-900">
+          <h1 className="text-3xl font-semibold tracking-tight text-foreground">
             代客户提交反馈
           </h1>
-          <p className="mt-2 text-sm text-slate-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             以客服身份代表客户提交反馈，系统将同时记录客服和客户信息
           </p>
         </div>

package/app/(dashboard)/settings/branding/page.tsx

@@ -38,7 +38,7 @@ export default async function BrandingSettingsPage() {
         <p className="text-muted-foreground">{t("pageDescription")}</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("themeTitle")}</CardTitle>
           <CardDescription>{t("themeDesc")}</CardDescription>
@@ -48,7 +48,7 @@ export default async function BrandingSettingsPage() {
         </CardContent>
       </Card>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("copyTitle")}</CardTitle>
           <CardDescription>{t("copyDesc")}</CardDescription>

package/app/(dashboard)/settings/changelog/page.tsx

@@ -35,13 +35,13 @@ export default async function ChangelogSettingsPage() {
         <p className="text-muted-foreground">{t("pageDescription")}</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("settingsTitle")}</CardTitle>
           <CardDescription>{t("settingsDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="rounded-md border border-dashed border-slate-200 bg-slate-50/50 px-4 py-8 text-center text-sm text-muted-foreground">
+          <div className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
             {t("settingsComingSoon")}
           </div>
         </CardContent>

package/app/(dashboard)/settings/feedback/page.tsx

@@ -35,25 +35,25 @@ export default async function FeedbackSettingsPage() {
         <p className="text-muted-foreground">{t("pageDescription")}</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("settingsTitle")}</CardTitle>
           <CardDescription>{t("settingsDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="rounded-md border border-dashed border-slate-200 bg-slate-50/50 px-4 py-8 text-center text-sm text-muted-foreground">
+          <div className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
             {t("settingsComingSoon")}
           </div>
         </CardContent>
       </Card>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("roadmapTitle")}</CardTitle>
           <CardDescription>{t("roadmapDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="rounded-md border border-dashed border-slate-200 bg-slate-50/50 px-4 py-8 text-center text-sm text-muted-foreground">
+          <div className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
             {t("roadmapComingSoon")}
           </div>
         </CardContent>

package/app/(dashboard)/settings/integrations/page.tsx

@@ -35,16 +35,16 @@ export default async function IntegrationsSettingsPage() {
         <p className="text-muted-foreground">{t("pageDescription")}</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("availableTitle")}</CardTitle>
           <CardDescription>{t("availableDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="grid gap-4 md:grid-cols-2">
-            <div className="rounded-lg border border-slate-200 p-4">
+            <div className="rounded-lg border p-4">
               <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-md bg-slate-100">
+                <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
                   <span className="text-lg">🔗</span>
                 </div>
                 <div>
@@ -53,9 +53,9 @@ export default async function IntegrationsSettingsPage() {
                 </div>
               </div>
             </div>
-            <div className="rounded-lg border border-slate-200 p-4">
+            <div className="rounded-lg border p-4">
               <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-md bg-slate-100">
+                <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
                   <span className="text-lg">📋</span>
                 </div>
                 <div>
@@ -64,9 +64,9 @@ export default async function IntegrationsSettingsPage() {
                 </div>
               </div>
             </div>
-            <div className="rounded-lg border border-slate-200 p-4">
+            <div className="rounded-lg border p-4">
               <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-md bg-slate-100">
+                <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
                   <span className="text-lg">📊</span>
                 </div>
                 <div>
@@ -75,9 +75,9 @@ export default async function IntegrationsSettingsPage() {
                 </div>
               </div>
             </div>
-            <div className="rounded-lg border border-slate-200 p-4">
+            <div className="rounded-lg border p-4">
               <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-md bg-slate-100">
+                <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted">
                   <span className="text-lg">💬</span>
                 </div>
                 <div>

package/app/(dashboard)/settings/modules/page.tsx

@@ -40,7 +40,7 @@ export default async function ModulesSettingsPage() {
         <p className="text-muted-foreground">{t("pageDescription")}</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("configTitle")}</CardTitle>
           <CardDescription>{t("configDesc")}</CardDescription>

package/app/(dashboard)/settings/organizations/[orgId]/members/page.tsx

@@ -46,13 +46,13 @@ export default async function OrganizationMembersPage({
     : [];
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-12">
+    <div className="min-h-screen bg-background px-4 py-12">
       <div className="mx-auto flex w-full max-w-3xl flex-col gap-6">
         <div>
-          <h1 className="text-3xl font-semibold tracking-tight text-slate-900">
+          <h1 className="text-3xl font-semibold tracking-tight text-foreground">
             成员管理
           </h1>
-          <p className="mt-2 text-sm text-slate-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             管理当前组织成员并发送新的邀请
           </p>
         </div>

package/app/(dashboard)/settings/organizations/new/page.tsx

@@ -19,13 +19,13 @@ import { OrganizationForm } from "@/components/settings/organization-form";
 
 export default function NewOrganizationPage() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-12">
+    <div className="min-h-screen bg-background px-4 py-12">
       <div className="mx-auto flex w-full max-w-2xl flex-col gap-6">
         <div>
-          <h1 className="text-3xl font-semibold tracking-tight text-slate-900">
+          <h1 className="text-3xl font-semibold tracking-tight text-foreground">
             创建组织
           </h1>
-          <p className="mt-2 text-sm text-slate-600">
+          <p className="mt-2 text-sm text-muted-foreground">
             为新的团队或项目创建独立空间
           </p>
         </div>

package/app/(dashboard)/settings/portal-access/page.tsx

@@ -35,7 +35,7 @@ export default async function PortalAccessSettingsPage() {
         <p className="text-muted-foreground">控制 Portal 的公开访问与权限范围</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>可见性与权限</CardTitle>
           <CardDescription>设置公开访问、投票与索引策略</CardDescription>

package/app/(dashboard)/settings/portal-branding/page.tsx

@@ -35,7 +35,7 @@ export default async function PortalBrandingSettingsPage() {
         <p className="text-muted-foreground">{t("description")}</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("theme.title")}</CardTitle>
           <CardDescription>{t("theme.description")}</CardDescription>
@@ -45,7 +45,7 @@ export default async function PortalBrandingSettingsPage() {
         </CardContent>
       </Card>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("copy.title")}</CardTitle>
           <CardDescription>{t("copy.description")}</CardDescription>

package/app/(dashboard)/settings/portal-growth/page.tsx

@@ -33,7 +33,7 @@ export default async function PortalGrowthSettingsPage() {
         <p className="text-muted-foreground">配置分享入口与 SEO 优化</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>分享设置</CardTitle>
           <CardDescription>配置社交分享与传播渠道</CardDescription>
@@ -43,7 +43,7 @@ export default async function PortalGrowthSettingsPage() {
         </CardContent>
       </Card>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>SEO 设置</CardTitle>
           <CardDescription>搜索引擎与社交分享优化</CardDescription>

package/app/(dashboard)/settings/portal-modules/page.tsx

@@ -35,7 +35,7 @@ export default async function PortalModulesSettingsPage() {
         <p className="text-muted-foreground">自定义 Portal 的功能模块开关</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>模块配置</CardTitle>
           <CardDescription>按需启用反馈、路线图与更新日志</CardDescription>

package/app/(dashboard)/settings/portal-resources/page.tsx

@@ -37,7 +37,7 @@ export default async function PortalResourcesSettingsPage() {
         <p className="text-muted-foreground">门户入口与相关资源链接</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div>
             <CardTitle>Portal 链接</CardTitle>
@@ -48,8 +48,8 @@ export default async function PortalResourcesSettingsPage() {
           </Badge>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="text-sm text-slate-600">
-            门户链接：<span className="font-medium text-slate-900">{portalLink}</span>
+          <div className="text-sm text-muted-foreground">
+            门户链接：<span className="font-medium text-foreground">{portalLink}</span>
           </div>
           <div className="flex flex-wrap gap-3">
             <Button asChild variant="outline" size="sm">

package/app/(dashboard)/settings/widgets/page.tsx

@@ -35,25 +35,25 @@ export default async function WidgetsSettingsPage() {
         <p className="text-muted-foreground">{t("pageDescription")}</p>
       </div>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("feedbackWidget")}</CardTitle>
           <CardDescription>{t("feedbackWidgetDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="rounded-md border border-dashed border-slate-200 bg-slate-50/50 px-4 py-8 text-center text-sm text-muted-foreground">
+          <div className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
             {t("feedbackWidgetComingSoon")}
           </div>
         </CardContent>
       </Card>
 
-      <Card className="border-slate-200/80 bg-white/80 shadow-sm">
+      <Card>
         <CardHeader>
           <CardTitle>{t("changelogWidget")}</CardTitle>
           <CardDescription>{t("changelogWidgetDesc")}</CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="rounded-md border border-dashed border-slate-200 bg-slate-50/50 px-4 py-8 text-center text-sm text-muted-foreground">
+          <div className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
             {t("changelogWidgetComingSoon")}
           </div>
         </CardContent>

package/components/landing/hero.tsx

@@ -25,11 +25,11 @@ export function Hero() {
   const t = useTranslations("hero");
   
   return (
-    <div className="min-h-screen bg-linear-to-br from-slate-50 via-white to-slate-100">
+    <div className="min-h-screen bg-background">
       <header className="container mx-auto flex items-center justify-between px-4 py-6">
         <div className="flex items-center gap-2">
           <MessageSquare className="size-8 text-primary" />
-          <span className="text-2xl font-bold text-slate-900">{t("title")}</span>
+          <span className="text-2xl font-bold text-foreground">{t("title")}</span>
         </div>
         <nav className="flex items-center gap-4">
           <LanguageSwitcher variant="icon" />
@@ -44,13 +44,13 @@ export function Hero() {
 
       <main className="container mx-auto px-4 py-20">
         <section className="mx-auto max-w-4xl text-center">
-          <h1 className="text-5xl font-bold tracking-tight text-slate-900 sm:text-6xl">
+          <h1 className="text-5xl font-bold tracking-tight text-foreground sm:text-6xl">
             {t("headline")}
           </h1>
-          <p className="mt-6 text-xl text-slate-600">
+          <p className="mt-6 text-xl text-muted-foreground">
             {t("description")}
             <br />
-            <span className="font-medium text-slate-700">{t("subtitle")}</span>
+            <span className="font-medium text-foreground/80">{t("subtitle")}</span>
           </p>
           <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
             <Button size="lg" asChild>
@@ -63,7 +63,7 @@ export function Hero() {
         </section>
 
         <section className="mx-auto mt-32 max-w-5xl">
-          <h2 className="text-center text-3xl font-bold text-slate-900">{t("coreValues")}</h2>
+          <h2 className="text-center text-3xl font-bold text-foreground">{t("coreValues")}</h2>
           <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
             <FeatureCard
               icon={<Zap className="size-6" />}
@@ -89,8 +89,8 @@ export function Hero() {
         </section>
 
         <section className="mx-auto mt-32 max-w-3xl text-center">
-          <h2 className="text-3xl font-bold text-slate-900">{t("ready.title")}</h2>
-          <p className="mt-4 text-lg text-slate-600">
+          <h2 className="text-3xl font-bold text-foreground">{t("ready.title")}</h2>
+          <p className="mt-4 text-lg text-muted-foreground">
             {t("ready.description")}
           </p>
           <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
@@ -104,21 +104,21 @@ export function Hero() {
         </section>
       </main>
 
-      <footer className="container mx-auto border-t border-slate-200 px-4 py-8">
+      <footer className="container mx-auto border-t border-border px-4 py-8">
         <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
-          <div className="flex items-center gap-2 text-sm text-slate-500">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
             <MessageSquare className="size-4" />
             <span>{t("footer.title")}</span>
           </div>
-          <div className="flex gap-6 text-sm text-slate-500">
-            <Link href="/docs" className="hover:text-slate-700">
+          <div className="flex gap-6 text-sm text-muted-foreground">
+            <Link href="/docs" className="hover:text-foreground">
               {t("footer.docs")}
             </Link>
             <a
               href="https://github.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-slate-700"
+              className="hover:text-foreground"
             >
               GitHub
             </a>
@@ -139,12 +139,12 @@ function FeatureCard({
   description: string;
 }) {
   return (
-    <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+    <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
       <div className="flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
         {icon}
       </div>
-      <h3 className="mt-4 font-semibold text-slate-900">{title}</h3>
-      <p className="mt-2 text-sm text-slate-600">{description}</p>
+      <h3 className="mt-4 font-semibold text-card-foreground">{title}</h3>
+      <p className="mt-2 text-sm text-muted-foreground">{description}</p>
     </div>
   );
 }

package/components/layout/language-switcher.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect } from "react";
 
 /*
  * Copyright (c) 2026 Nexttylabs Team
@@ -66,6 +67,32 @@ function useLocaleSwitcher() {
 
 export function LanguageSwitcher({ variant = "text" }: LanguageSwitcherProps) {
   const { locale, t, isPending, handleSelect } = useLocaleSwitcher();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Render a placeholder button during SSR to avoid hydration mismatch
+  // caused by Radix UI's dynamic ID generation
+  if (!mounted) {
+    return variant === "icon" ? (
+      <Button
+        variant="ghost"
+        size="icon"
+        disabled
+        aria-label={t("label")}
+      >
+        <Languages className="h-4 w-4" />
+        <span className="sr-only">{t("label")}</span>
+      </Button>
+    ) : (
+      <Button variant="ghost" size="sm" disabled>
+        <Languages className="h-4 w-4 mr-2" />
+        {t(locale)}
+      </Button>
+    );
+  }
 
   return (
     <DropdownMenu>

package/components/layout/sidebar.tsx

@@ -120,6 +120,7 @@ export function Sidebar({ user, organizations = [], currentOrgId, onClose }: Sid
   const handleLocaleChange = (nextLocale: AppLocale) => {
     if (nextLocale === locale) return;
     const secure = window.location.protocol === "https:" ? ";secure" : "";
+    // eslint-disable-next-line react-hooks/immutability
     document.cookie = `${LOCALE_COOKIE_NAME}=${nextLocale};path=/;max-age=${60 * 60 * 24 * 365};samesite=lax${secure}`;
     startTransition(() => {
       router.refresh();

package/components/portal/portal-modules-panel.tsx

@@ -56,10 +56,10 @@ export function PortalModulesPanel({ organizationId, initialModules }: PortalMod
   };
 
   return (
-    <div className="space-y-4 rounded-xl border bg-white/80 p-5 shadow-sm">
+    <div className="space-y-4 rounded-xl border bg-muted/50 p-5 shadow-sm">
       <div>
-        <h3 className="text-sm font-semibold text-slate-900">{t("panelTitle")}</h3>
-        <p className="mt-1 text-sm text-slate-600">
+        <h3 className="text-sm font-semibold text-foreground">{t("panelTitle")}</h3>
+        <p className="mt-1 text-sm text-muted-foreground">
           {t("panelDescription")}
         </p>
       </div>
@@ -89,7 +89,7 @@ export function PortalModulesPanel({ organizationId, initialModules }: PortalMod
         <Button onClick={onSave} disabled={saving}>
           {saving ? t("saving") : t("saveButton")}
         </Button>
-        {message && <span className="text-sm text-slate-600">{message}</span>}
+        {message && <span className="text-sm text-muted-foreground">{message}</span>}
       </div>
     </div>
   );
@@ -107,10 +107,10 @@ function ModuleRow({
   onChange: (value: boolean) => void;
 }) {
   return (
-    <div className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-white px-4 py-3">
+    <div className="flex items-center justify-between gap-4 rounded-lg border bg-background px-4 py-3">
       <div>
-        <p className="text-sm font-medium text-slate-900">{label}</p>
-        <p className="text-xs text-slate-500">{description}</p>
+        <p className="text-sm font-medium text-foreground">{label}</p>
+        <p className="text-xs text-muted-foreground">{description}</p>
       </div>
       <Switch checked={checked} onCheckedChange={onChange} />
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexttylabs/echo",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "license": "AGPL-3.0",
   "private": false,
   "publishConfig": {