@pelatform/starter 0.1.8 → 0.1.9

package/dist/extend.js

@@ -6,7 +6,7 @@ import {
   request,
   setLastVisitedWorkspace,
   socialProviders
-} from "./chunk-IEJXTIKE.js";
+} from "./chunk-7Y52PHJN.js";
 import {
   WORKSPACE_SCOPED_PREFIXES,
   lastVisitedWorkspace

package/dist/index.d.ts

@@ -3914,7 +3914,7 @@ type WorkspaceProviderProps = {
     fetchWorkspaceList?: string;
     fetchWorkspaceBySlug?: string;
 };
-declare function WorkspaceProvider({ children, initialWorkspace, workspaceSlug, fetchWorkspaceList, fetchWorkspaceBySlug, }: WorkspaceProviderProps): react_jsx_runtime.JSX.Element;
+declare function WorkspaceProvider({ children, initialWorkspace, workspaceSlug, fetchWorkspaceList: fetchWorkspaceListProp, fetchWorkspaceBySlug: fetchWorkspaceBySlugProp, }: WorkspaceProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function CardComponent({ children, className, classNames, title, description, instructions, actionLabel, action, disabled, isDestructive, isPending, isSubmitting, ...props }: CardComponentProps): react_jsx_runtime.JSX.Element;
 declare function CardHeaderComponent({ className, classNames, title, description, isPending, }: CardComponentProps): react_jsx_runtime.JSX.Element;
@@ -3933,7 +3933,9 @@ declare function SkeletonInputComponent({ classNames }: {
 
 declare function getUserName(user: Profile | null | undefined): string | null | undefined;
 declare function UserAvatar({ className, classNames, isPending, size, user, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
-declare function WorkspaceLogo({ className, classNames, isPending, size, workspace, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+declare function WorkspaceLogo({ className, classNames, isPending, size, workspace, image, ...props }: AvatarProps & {
+    image?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function DisplayIdCard({ className, classNames, isPending, id, title, description, ...props }: CardComponentProps & {
     id: string | undefined;
@@ -3975,6 +3977,22 @@ declare function ApiKeyView({ className, classNames, apiKey }: ViewProps & {
 }): react_jsx_runtime.JSX.Element;
 declare function WorkspaceView({ className, classNames, isPending, size, workspace }: ViewProps): react_jsx_runtime.JSX.Element;
 
+declare function WorkspaceDeleteCard({ className, classNames, ...props }: CardComponentProps): react_jsx_runtime.JSX.Element | null;
+
+declare function WorkspaceLogoCard({ className, classNames, logo, ...props }: CardComponentProps & {
+    logo?: ImageOptions;
+}): react_jsx_runtime.JSX.Element;
+
+declare function WorkspaceNameCard({ className, classNames, ...props }: CardComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function WorkspaceSlugCard({ className, classNames, ...props }: CardComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function WorkspaceSettingsCards({ className, classNames, logo, }: {
+    className?: string;
+    classNames?: CardClassNames;
+    logo?: ImageOptions;
+}): react_jsx_runtime.JSX.Element;
+
 declare function WorkspaceSwitcher(): react_jsx_runtime.JSX.Element;
 
-export { AcceptInvitation, ApiKeyDeleteDialog, ApiKeyDisplayDialog, ApiKeyView, ApiKeysCard, type AuthButtonProps, AuthCallback, AuthForm, type AuthFormClassNames, type AuthFormProps, AuthLayout, AuthView, type AuthViewClassNames, type AuthViewProps, BackupCodesDialog, CardActionComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ConfigContext, ConfigProvider, type ConfigProviderProps, CreateApiKeyDialog, DeleteAccountCard, DeleteAccountDialog, DialogComponent, DialogFooterComponent, DisplayIdCard, EmailOTPButton, EmailOTPForm, EmptyState, type EmptyStateProps, ForgotPasswordForm, FormAvatarCard, FormEmailCard, FormFieldsCard, FormNameCard, FormPasswordCard, FormUsernameCard, Header, HeaderLeft, HeaderRight, HeaderSidebarMobile, LanguageSwitcher, LastUsedButton, LayoutContext, type LayoutContextType, LayoutLoader, LayoutProvider, type LayoutProviderProps, LayoutWrapper, MagicLinkButton, MagicLinkForm, MultiAccountCard, NewWorkspace, NewWorkspaceForm, OTPInputGroup, OneTap, PasskeyButton, PasskeysCard, PasswordInput, ProviderButton, ProvidersCard, QueryContext, RecoverAccountForm, ResetPasswordForm, SecurityCards, SessionFreshnessDialog, SessionsCard, SettingsCards, SharedProviders, type SharedProvidersProps, Sidebar, SidebarContent, SidebarContentMenu, SidebarHeaderBack, SidebarHeaderWorkspaces, SignInForm, SignOut, SignUpForm, SignedInHint, SiteFooter, SiteHeader, SiteHeaderSecondary, SkeletonInputComponent, SkeletonViewComponent, Toolbar, TwoFactorCard, TwoFactorForm, TwoFactorPasswordDialog, UserAvatar, UserMenu, UserView, VerifyEmail, WorkspaceContext, type WorkspaceContextType, WorkspaceLogo, WorkspaceProvider, WorkspaceSwitcher, WorkspaceView, getUserName, useAccountInfo, useAuthMutation, useAuthQuery, useConfig, useCreateApiKey, useDeleteApiKey, useDeletePasskey, useInvitation, useLayout, useListAccounts, useListApiKeys, useListDeviceSessions, useListPasskeys, useListSessions, useOnMutateError, useOnSuccessTransition, useRevokeDeviceSession, useRevokeOtherSessions, useRevokeSession, useRevokeSessions, useSession, useSetActiveSession, useUnlinkAccount, useUpdateUser, useWorkspace };
+export { AcceptInvitation, ApiKeyDeleteDialog, ApiKeyDisplayDialog, ApiKeyView, ApiKeysCard, type AuthButtonProps, AuthCallback, AuthForm, type AuthFormClassNames, type AuthFormProps, AuthLayout, AuthView, type AuthViewClassNames, type AuthViewProps, BackupCodesDialog, CardActionComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ConfigContext, ConfigProvider, type ConfigProviderProps, CreateApiKeyDialog, DeleteAccountCard, DeleteAccountDialog, DialogComponent, DialogFooterComponent, DisplayIdCard, EmailOTPButton, EmailOTPForm, EmptyState, type EmptyStateProps, ForgotPasswordForm, FormAvatarCard, FormEmailCard, FormFieldsCard, FormNameCard, FormPasswordCard, FormUsernameCard, Header, HeaderLeft, HeaderRight, HeaderSidebarMobile, LanguageSwitcher, LastUsedButton, LayoutContext, type LayoutContextType, LayoutLoader, LayoutProvider, type LayoutProviderProps, LayoutWrapper, MagicLinkButton, MagicLinkForm, MultiAccountCard, NewWorkspace, NewWorkspaceForm, OTPInputGroup, OneTap, PasskeyButton, PasskeysCard, PasswordInput, ProviderButton, ProvidersCard, QueryContext, RecoverAccountForm, ResetPasswordForm, SecurityCards, SessionFreshnessDialog, SessionsCard, SettingsCards, SharedProviders, type SharedProvidersProps, Sidebar, SidebarContent, SidebarContentMenu, SidebarHeaderBack, SidebarHeaderWorkspaces, SignInForm, SignOut, SignUpForm, SignedInHint, SiteFooter, SiteHeader, SiteHeaderSecondary, SkeletonInputComponent, SkeletonViewComponent, Toolbar, TwoFactorCard, TwoFactorForm, TwoFactorPasswordDialog, UserAvatar, UserMenu, UserView, VerifyEmail, WorkspaceContext, type WorkspaceContextType, WorkspaceDeleteCard, WorkspaceLogo, WorkspaceLogoCard, WorkspaceNameCard, WorkspaceProvider, WorkspaceSettingsCards, WorkspaceSlugCard, WorkspaceSwitcher, WorkspaceView, getUserName, useAccountInfo, useAuthMutation, useAuthQuery, useConfig, useCreateApiKey, useDeleteApiKey, useDeletePasskey, useInvitation, useLayout, useListAccounts, useListApiKeys, useListDeviceSessions, useListPasskeys, useListSessions, useOnMutateError, useOnSuccessTransition, useRevokeDeviceSession, useRevokeOtherSessions, useRevokeSession, useRevokeSessions, useSession, useSetActiveSession, useUnlinkAccount, useUpdateUser, useWorkspace };

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   request,
   setLastVisitedWorkspace,
   socialProviders
-} from "./chunk-IEJXTIKE.js";
+} from "./chunk-7Y52PHJN.js";
 import {
   WORKSPACE_SCOPED_PREFIXES
 } from "./chunk-K5RU54UL.js";
@@ -839,6 +839,7 @@ function WorkspaceLogo({
   isPending,
   size,
   workspace,
+  image,
   ...props
 }) {
   const t = useTranslations3();
@@ -867,7 +868,7 @@ function WorkspaceLogo({
         /* @__PURE__ */ jsx5(
           AvatarImage,
           {
-            src: src || void 0,
+            src: image || src || void 0,
             alt: name || t("systems.ORGANIZATION"),
             className: classNames?.image
           }
@@ -5804,9 +5805,9 @@ import { useMediaQuery } from "pelatform-ui/hooks";
 import { jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
 function WorkspaceSwitcher() {
   const { path } = useConfig();
+  const { activeWorkspace, updateActiveWorkspace, workspaceList, isFetchingWorkspace } = useWorkspace();
   const router = useRouter16();
   const t = useTranslations46();
-  const { activeWorkspace, updateActiveWorkspace, workspaceList, isFetchingWorkspace } = useWorkspace();
   const ownedWorkspaces = workspaceList?.filter((workspace) => workspace.currentUserRole === "owner") || [];
   const sharedWorkspaces = workspaceList?.filter((workspace) => workspace.currentUserRole !== "owner") || [];
   async function switchWorkspace(org) {
@@ -6981,10 +6982,10 @@ function WorkspaceProvider({
   children,
   initialWorkspace,
   workspaceSlug,
-  fetchWorkspaceList = "api/workspaces",
-  fetchWorkspaceBySlug = "api/workspace/s"
+  fetchWorkspaceList: fetchWorkspaceListProp,
+  fetchWorkspaceBySlug: fetchWorkspaceBySlugProp
 }) {
-  const { authClient } = useConfig();
+  const { authClient, app } = useConfig();
   const { queryKey } = useContext14(QueryContext);
   const pathname = usePathname5();
   const queryClient = useQueryClient3();
@@ -6992,6 +6993,8 @@ function WorkspaceProvider({
   const [activeWorkspace, setActiveWorkspace] = useState23(initialWorkspace);
   const [isSwitchingWorkspace, setIsSwitchingWorkspace] = useState23(false);
   const shouldFetchWorkspace = !!workspaceSlug && (!activeWorkspace || activeWorkspace.slug !== workspaceSlug);
+  const fetchWorkspaceList = fetchWorkspaceListProp || `${app.api}/workspaces`;
+  const fetchWorkspaceBySlug = fetchWorkspaceBySlugProp || `${app.api}/workspace/s`;
   const { data: usersWorkspaces } = useQuery3({
     queryKey: queryKey.workspaceList,
     queryFn: async () => {
@@ -7148,6 +7151,730 @@ function EmptyState({
     children
   ] });
 }
+
+// src/ui/workspace/partials/delete.tsx
+import { useContext as useContext15, useState as useState24 } from "react";
+import { useRouter as useRouter22 } from "next/navigation";
+import { zodResolver as zodResolver16 } from "@hookform/resolvers/zod";
+import { useMutation as useMutation4, useQueryClient as useQueryClient4 } from "@tanstack/react-query";
+import { useTranslations as useTranslations54 } from "next-intl";
+import { useForm as useForm17 } from "react-hook-form";
+import { z as z16 } from "zod";
+import { cn as cn47 } from "pelatform-ui";
+import { AlertToast as AlertToast29 } from "pelatform-ui/components";
+import {
+  Button as Button39,
+  Card as Card14,
+  Form as Form17,
+  FormControl as FormControl16,
+  FormField as FormField16,
+  FormItem as FormItem16,
+  FormLabel as FormLabel15,
+  FormMessage as FormMessage16,
+  Input as Input13,
+  Spinner as Spinner23
+} from "pelatform-ui/default";
+import { Fragment as Fragment22, jsx as jsx68, jsxs as jsxs57 } from "react/jsx-runtime";
+function WorkspaceDeleteCard({ className, classNames, ...props }) {
+  const { activeWorkspace, isOwner } = useWorkspace();
+  const t = useTranslations54();
+  const [showDialog, setShowDialog] = useState24(false);
+  if (!isOwner || !activeWorkspace) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs57(Fragment22, { children: [
+    /* @__PURE__ */ jsx68(
+      CardComponent,
+      {
+        className,
+        classNames,
+        title: t("systems.DELETE_ORGANIZATION"),
+        description: t("systems.DELETE_ORGANIZATION_DESCRIPTION"),
+        actionLabel: t("systems.DELETE_ORGANIZATION"),
+        action: () => setShowDialog(true),
+        isDestructive: true,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx68(
+      DeleteWorkspaceDialog,
+      {
+        classNames,
+        open: showDialog,
+        onOpenChange: setShowDialog
+      }
+    )
+  ] });
+}
+function DeleteWorkspaceDialog({
+  classNames,
+  onOpenChange,
+  title,
+  description,
+  ...props
+}) {
+  const { authClient, path } = useConfig();
+  const { queryKey } = useContext15(QueryContext);
+  const { activeWorkspace, isOwner, updateActiveWorkspace, workspaceList } = useWorkspace();
+  const queryClient = useQueryClient4();
+  const router = useRouter22();
+  const t = useTranslations54();
+  const formSchema = z16.object({
+    slug: z16.string().min(1, {
+      error: `${t("systems.ORGANIZATION_SLUG")} ${t("systems.IS_REQUIRED")}`
+    }).refine((val) => val === activeWorkspace?.slug, {
+      error: t("systems.SLUG_DOES_NOT_MATCH")
+    })
+  });
+  const form = useForm17({
+    resolver: zodResolver16(formSchema),
+    defaultValues: {
+      slug: ""
+    }
+  });
+  const disableSubmit = form.formState.isSubmitting || !form.formState.isValid;
+  const { mutate: deleteMutation, isPending } = useMutation4({
+    mutationFn: async ({ organizationId }) => {
+      await authClient.organization.delete({
+        organizationId
+      });
+    },
+    onSuccess: async () => {
+      AlertToast29({
+        message: t("systems.DELETE_ORGANIZATION_SUCCESS")
+      });
+      const remainingWorkspaces = workspaceList?.filter((org) => org.id !== activeWorkspace?.id);
+      if (!remainingWorkspaces || remainingWorkspaces.length === 0) {
+        router.push(path.custom.NEW_WORKSPACE || "/");
+        return;
+      }
+      queryClient.invalidateQueries({
+        queryKey: queryKey.workspaceList
+      });
+      const nextWorkspace = remainingWorkspaces[0];
+      if (!nextWorkspace) {
+        router.push(path.custom.NEW_WORKSPACE || "/");
+        return;
+      }
+      await updateActiveWorkspace(nextWorkspace);
+      router.push(`/${nextWorkspace.slug}`);
+      onOpenChange?.(false);
+    },
+    onError: (error) => {
+      AlertToast29({
+        message: getTranslations({ error, t }),
+        icon: "destructive"
+      });
+    }
+  });
+  const onSubmit = () => {
+    if (!isOwner || !activeWorkspace?.id) {
+      return;
+    }
+    deleteMutation({ organizationId: activeWorkspace.id });
+  };
+  return /* @__PURE__ */ jsxs57(
+    DialogComponent,
+    {
+      classNames,
+      onOpenChange,
+      title: title || t("systems.DELETE_ORGANIZATION"),
+      description: description || t("systems.DELETE_ORGANIZATION_DESCRIPTION"),
+      disableFooter: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx68(Card14, { className: cn47("mb-4 flex-row p-4", classNames?.cell), children: /* @__PURE__ */ jsx68(WorkspaceView, { workspace: activeWorkspace }) }),
+        /* @__PURE__ */ jsx68(Form17, { ...form, children: /* @__PURE__ */ jsxs57("form", { onSubmit: form.handleSubmit(onSubmit), children: [
+          /* @__PURE__ */ jsx68(
+            FormField16,
+            {
+              control: form.control,
+              name: "slug",
+              render: ({ field }) => /* @__PURE__ */ jsxs57(FormItem16, { children: [
+                /* @__PURE__ */ jsxs57(FormLabel15, { className: cn47("font-normal", classNames?.label), children: [
+                  t("systems.DELETE_ORGANIZATION_INSTRUCTIONS"),
+                  " ",
+                  /* @__PURE__ */ jsx68("span", { className: "font-bold", children: activeWorkspace?.slug })
+                ] }),
+                /* @__PURE__ */ jsx68(FormControl16, { children: /* @__PURE__ */ jsx68(
+                  Input13,
+                  {
+                    placeholder: activeWorkspace?.slug,
+                    className: classNames?.input,
+                    autoComplete: "off",
+                    disabled: isPending,
+                    ...field
+                  }
+                ) }),
+                /* @__PURE__ */ jsx68(FormMessage16, { className: classNames?.error })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx68(
+            DialogFooterComponent,
+            {
+              classNames,
+              onOpenChange,
+              cancelButton: true,
+              cancelButtonDisabled: isPending,
+              button: /* @__PURE__ */ jsxs57(
+                Button39,
+                {
+                  type: "submit",
+                  variant: "destructive",
+                  className: cn47(
+                    disableSubmit && "pointer-events-auto! cursor-not-allowed",
+                    classNames?.button,
+                    classNames?.destructiveButton
+                  ),
+                  disabled: disableSubmit,
+                  children: [
+                    isPending && /* @__PURE__ */ jsx68(Spinner23, {}),
+                    t("systems.DELETE_ORGANIZATION")
+                  ]
+                }
+              )
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/ui/workspace/partials/logo.tsx
+import { useContext as useContext16, useRef as useRef8, useState as useState25 } from "react";
+import { useRouter as useRouter23 } from "next/navigation";
+import { useMutation as useMutation5, useQueryClient as useQueryClient5 } from "@tanstack/react-query";
+import { Trash2Icon as Trash2Icon2, UploadCloudIcon as UploadCloudIcon2 } from "lucide-react";
+import { useTranslations as useTranslations55 } from "next-intl";
+import { fileToBase64 as fileToBase642, resizeAndCropImage as resizeAndCropImage2 } from "pelatform-ui";
+import { AlertToast as AlertToast30 } from "pelatform-ui/components";
+import {
+  Button as Button40,
+  DropdownMenu as DropdownMenu5,
+  DropdownMenuContent as DropdownMenuContent5,
+  DropdownMenuItem as DropdownMenuItem5,
+  DropdownMenuTrigger as DropdownMenuTrigger5
+} from "pelatform-ui/default";
+import { jsx as jsx69, jsxs as jsxs58 } from "react/jsx-runtime";
+function WorkspaceLogoCard({
+  className,
+  classNames,
+  logo,
+  ...props
+}) {
+  const { authClient } = useConfig();
+  const { queryKey } = useContext16(QueryContext);
+  const { activeWorkspace, isOwner } = useWorkspace();
+  const queryClient = useQueryClient5();
+  const router = useRouter23();
+  const t = useTranslations55();
+  const fileInputRef = useRef8(null);
+  const [logoUrl, setLogoUrl] = useState25(activeWorkspace?.logo || null);
+  const [loading, setLoading] = useState25(false);
+  const isBase64Logo = logoUrl?.includes("data:image");
+  const isDicebearLogo = logoUrl?.includes("api.dicebear.com");
+  const { mutate: updateMutation, isPending } = useMutation5({
+    mutationFn: async ({ organizationId, logo: logo2 }) => {
+      const res = await authClient.organization.update({
+        organizationId,
+        data: { logo: logo2 }
+      });
+      if (res?.error) {
+        throw new Error(res.error.message);
+      }
+      return res;
+    },
+    onSuccess: (_, variables) => {
+      setLogoUrl(variables.logo);
+      AlertToast30({
+        message: `${t("systems.LOGO_UPDATED")}`
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKey.workspaceById(variables.organizationId)
+      });
+      router.refresh();
+    },
+    onError: (error) => {
+      AlertToast30({
+        message: getTranslations({ error, t }),
+        icon: "destructive"
+      });
+    }
+  });
+  const handleLogoChange = async (file) => {
+    if (!activeWorkspace?.id || !isOwner) return;
+    setLoading(true);
+    try {
+      const resizedFile = await resizeAndCropImage2(
+        file,
+        crypto.randomUUID(),
+        logo?.size || 256,
+        logo?.extension || "png"
+      );
+      let image;
+      if (logo?.upload) {
+        image = await logo.upload(resizedFile);
+      } else {
+        image = await fileToBase642(resizedFile);
+      }
+      if (!image) {
+        setLoading(false);
+        return;
+      }
+      updateMutation({
+        organizationId: activeWorkspace.id,
+        logo: image
+      });
+    } catch (error) {
+      AlertToast30({
+        message: getTranslations({ error, t }),
+        icon: "destructive"
+      });
+    }
+    setLoading(false);
+  };
+  const handleDeleteLogo = async () => {
+    if (!activeWorkspace?.id || !isOwner) return;
+    setLoading(true);
+    try {
+      if (logoUrl && !isBase64Logo && !isDicebearLogo && logo?.delete) {
+        await logo.delete(logoUrl);
+      }
+      const defaultLogo = `https://api.dicebear.com/9.x/glass/svg?seed=${activeWorkspace.slug}`;
+      updateMutation({
+        organizationId: activeWorkspace.id,
+        logo: defaultLogo
+      });
+    } catch (error) {
+      AlertToast30({
+        message: getTranslations({ error, t }),
+        icon: "destructive"
+      });
+    }
+    setLoading(false);
+  };
+  const openFileDialog = () => {
+    fileInputRef.current?.click();
+  };
+  return /* @__PURE__ */ jsxs58(
+    CardComponent,
+    {
+      className,
+      classNames: {
+        content: "flex items-center justify-between",
+        header: "w-full",
+        ...classNames
+      },
+      title: t("systems.LOGO"),
+      description: t("systems.LOGO_DESCRIPTION"),
+      instructions: t("systems.LOGO_INSTRUCTIONS"),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx69(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            hidden: true,
+            accept: "image/*",
+            onChange: (e) => {
+              const file = e.target.files?.item(0);
+              if (file) handleLogoChange(file);
+              e.target.value = "";
+            },
+            disabled: loading || !isOwner
+          }
+        ),
+        /* @__PURE__ */ jsxs58(DropdownMenu5, { children: [
+          /* @__PURE__ */ jsx69(DropdownMenuTrigger5, { asChild: true, children: /* @__PURE__ */ jsx69(Button40, { variant: "ghost", size: "icon", className: "size-fit rounded-full", disabled: !isOwner, children: /* @__PURE__ */ jsx69(
+            WorkspaceLogo,
+            {
+              className: "size-16 lg:size-20",
+              classNames: {
+                fallback: "text-xl lg:text-2xl",
+                ...classNames?.avatar
+              },
+              isPending,
+              workspace: activeWorkspace,
+              image: logoUrl || void 0
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs58(DropdownMenuContent5, { align: "end", onCloseAutoFocus: (e) => e.preventDefault(), children: [
+            /* @__PURE__ */ jsxs58(DropdownMenuItem5, { onClick: openFileDialog, disabled: loading || !isOwner, children: [
+              /* @__PURE__ */ jsx69(UploadCloudIcon2, {}),
+              t("systems.UPLOAD_LOGO")
+            ] }),
+            !isDicebearLogo && /* @__PURE__ */ jsxs58(
+              DropdownMenuItem5,
+              {
+                variant: "destructive",
+                onClick: handleDeleteLogo,
+                disabled: loading || !isOwner,
+                children: [
+                  /* @__PURE__ */ jsx69(Trash2Icon2, {}),
+                  t("systems.DELETE_LOGO")
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/ui/workspace/partials/name.tsx
+import { useContext as useContext17, useId } from "react";
+import { useRouter as useRouter24 } from "next/navigation";
+import { zodResolver as zodResolver17 } from "@hookform/resolvers/zod";
+import { useMutation as useMutation6, useQueryClient as useQueryClient6 } from "@tanstack/react-query";
+import { useTranslations as useTranslations56 } from "next-intl";
+import { useForm as useForm18 } from "react-hook-form";
+import { z as z17 } from "zod";
+import { AlertToast as AlertToast31 } from "pelatform-ui/components";
+import { Form as Form18, FormControl as FormControl17, FormField as FormField17, FormItem as FormItem17, FormMessage as FormMessage17, Input as Input14 } from "pelatform-ui/default";
+import { jsx as jsx70, jsxs as jsxs59 } from "react/jsx-runtime";
+function WorkspaceNameCard({ className, classNames, ...props }) {
+  const { authClient } = useConfig();
+  const { queryKey } = useContext17(QueryContext);
+  const { activeWorkspace, isOwner } = useWorkspace();
+  const queryClient = useQueryClient6();
+  const router = useRouter24();
+  const t = useTranslations56();
+  const id = useId();
+  const formSchema = z17.object({
+    name: z17.string().min(1, {
+      error: `${t("systems.ORGANIZATION_NAME")} ${t("systems.IS_REQUIRED")}`
+    })
+  });
+  const form = useForm18({
+    resolver: zodResolver17(formSchema),
+    values: { name: activeWorkspace?.name || "" }
+  });
+  const disableSubmit = form.formState.isSubmitting || !form.formState.isValid || !form.formState.isDirty;
+  const { mutate: updateMutation, isPending } = useMutation6({
+    mutationFn: async ({
+      organizationId,
+      data
+    }) => {
+      const res = await authClient.organization.update({
+        organizationId,
+        data: {
+          name: data.name
+        }
+      });
+      if (res?.error) {
+        throw new Error(res.error.message);
+      }
+      return res;
+    },
+    onSuccess: (_, variables) => {
+      AlertToast31({
+        message: `${t("systems.ORGANIZATION_NAME")} ${t("systems.UPDATED_SUCCESSFULLY")}`
+      });
+      form.reset({ name: form.getValues("name") });
+      queryClient.invalidateQueries({
+        queryKey: queryKey.workspaceById(variables.organizationId)
+      });
+      router.refresh();
+    },
+    onError: (error) => {
+      AlertToast31({
+        message: getTranslations({ error, t }),
+        icon: "destructive"
+      });
+    }
+  });
+  const onSubmit = (data) => {
+    if (!isOwner || !activeWorkspace?.id) {
+      return;
+    }
+    const name = data.name.trim();
+    if (activeWorkspace?.name === name) {
+      AlertToast31({
+        message: `${t("systems.ORGANIZATION_NAME")} ${t("systems.IS_THE_SAME")}`,
+        icon: "destructive"
+      });
+      return;
+    }
+    updateMutation({
+      organizationId: activeWorkspace.id,
+      data: { name }
+    });
+  };
+  return /* @__PURE__ */ jsx70(Form18, { ...form, children: /* @__PURE__ */ jsx70("form", { onSubmit: form.handleSubmit(onSubmit), children: /* @__PURE__ */ jsx70(
+    CardComponent,
+    {
+      className,
+      classNames,
+      title: t("systems.ORGANIZATION_NAME"),
+      description: t("systems.ORGANIZATION_NAME_DESCRIPTION"),
+      instructions: t("systems.ORGANIZATION_NAME_INSTRUCTIONS"),
+      actionLabel: t("systems.SAVE"),
+      disabled: disableSubmit || !isOwner,
+      isSubmitting: isPending,
+      ...props,
+      children: /* @__PURE__ */ jsx70(
+        FormField17,
+        {
+          control: form.control,
+          name: "name",
+          render: ({ field }) => /* @__PURE__ */ jsxs59(FormItem17, { children: [
+            /* @__PURE__ */ jsx70(FormControl17, { children: /* @__PURE__ */ jsx70(
+              Input14,
+              {
+                id,
+                className: classNames?.input,
+                placeholder: t("systems.ORGANIZATION_NAME_PLACEHOLDER"),
+                disabled: !isOwner,
+                ...field
+              }
+            ) }),
+            /* @__PURE__ */ jsx70(FormMessage17, { className: classNames?.error })
+          ] })
+        }
+      )
+    }
+  ) }) });
+}
+
+// src/ui/workspace/partials/slug.tsx
+import { useContext as useContext18, useId as useId2 } from "react";
+import { useRouter as useRouter25 } from "next/navigation";
+import { zodResolver as zodResolver18 } from "@hookform/resolvers/zod";
+import { useMutation as useMutation7, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
+import { useTranslations as useTranslations57 } from "next-intl";
+import { useForm as useForm19 } from "react-hook-form";
+import { z as z18 } from "zod";
+import { AlertToast as AlertToast32 } from "pelatform-ui/components";
+import { Form as Form19, FormControl as FormControl18, FormField as FormField18, FormItem as FormItem18, FormMessage as FormMessage18, Input as Input15 } from "pelatform-ui/default";
+
+// src/lib/string.ts
+function generateSlug(text) {
+  const slug = text.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+  return slug;
+}
+
+// src/ui/workspace/partials/slug.tsx
+import { jsx as jsx71, jsxs as jsxs60 } from "react/jsx-runtime";
+function WorkspaceSlugCard({ className, classNames, ...props }) {
+  const { authClient, path } = useConfig();
+  const { queryKey } = useContext18(QueryContext);
+  const { activeWorkspace, isOwner } = useWorkspace();
+  const queryClient = useQueryClient7();
+  const router = useRouter25();
+  const t = useTranslations57();
+  const RESERVED_SLUGS = [
+    // Main routes
+    path.main.ERROR.replace("/", ""),
+    path.main.HOME.replace("/", ""),
+    path.main.FEATURES.replace("/", ""),
+    path.main.PRICING.replace("/", ""),
+    path.main.TERMS.replace("/", ""),
+    path.main.PRIVACY.replace("/", ""),
+    // Auth routes
+    path.auth.EMAIL_OTP.replace("/", ""),
+    path.auth.FORGOT_PASSWORD.replace("/", ""),
+    path.auth.MAGIC_LINK.replace("/", ""),
+    path.auth.RECOVER_ACCOUNT.replace("/", ""),
+    path.auth.RESET_PASSWORD.replace("/", ""),
+    path.auth.SIGN_IN.replace("/", ""),
+    path.auth.SIGN_OUT.replace("/", ""),
+    path.auth.SIGN_UP.replace("/", ""),
+    path.auth.TWO_FACTOR.replace("/", ""),
+    // System routes
+    "new",
+    "accept",
+    "invitation",
+    "join",
+    "verify",
+    "api",
+    "account",
+    "accounts",
+    "billing",
+    "billings",
+    "user",
+    "users",
+    "onboarding",
+    "organization",
+    "organizations",
+    "workspace",
+    "workspaces",
+    "setting",
+    "settings",
+    "apikey",
+    "apikeys",
+    "member",
+    "members",
+    "people",
+    "peoples",
+    // Next.js internals
+    "_next",
+    "static",
+    "favicon",
+    "robots",
+    "sitemap",
+    // Future-proofing common patterns
+    "admin",
+    "dashboard",
+    "app",
+    "www",
+    "home",
+    "blog",
+    "docs",
+    "help",
+    "support",
+    "about",
+    "contact",
+    "features",
+    "pricing",
+    "terms",
+    "privacy"
+  ];
+  const id = useId2();
+  const formSchema = z18.object({
+    slug: z18.string().min(1, {
+      error: `${t("systems.ORGANIZATION_SLUG")} ${t("systems.IS_REQUIRED")}`
+    }).regex(/^[a-z0-9]+([a-z0-9-]*[a-z0-9])?$/, {
+      error: `${t("systems.ORGANIZATION_SLUG")} ${t("systems.IS_INVALID")}`
+    }).refine((slug) => !RESERVED_SLUGS.includes(slug), {
+      error: `${t("systems.ORGANIZATION_SLUG")} ${t("systems.IS_INVALID")}`
+    })
+  });
+  const form = useForm19({
+    resolver: zodResolver18(formSchema),
+    values: { slug: activeWorkspace?.slug || "" }
+  });
+  const disableSubmit = form.formState.isSubmitting || !form.formState.isValid || !form.formState.isDirty;
+  const { mutate: updateMutation, isPending } = useMutation7({
+    mutationFn: async ({
+      organizationId,
+      data
+    }) => {
+      const { data: checkSlug, error } = await authClient.organization.checkSlug({
+        slug: data.slug
+      });
+      if (error) {
+        throw new Error(error.message);
+      }
+      if (!checkSlug.status) {
+        form.setError("slug", { message: t("systems.SLUG_ALREADY_TAKEN") });
+        throw new Error(t("systems.SLUG_ALREADY_TAKEN"));
+      }
+      const res = await authClient.organization.update({
+        organizationId,
+        data: {
+          slug: data.slug
+        }
+      });
+      if (res?.error) {
+        throw new Error(res.error.message);
+      }
+      return res;
+    },
+    onSuccess: (data, variables) => {
+      if (!data) {
+        return;
+      }
+      AlertToast32({
+        message: `${t("systems.ORGANIZATION_SLUG")} ${t("systems.UPDATED_SUCCESSFULLY")}`
+      });
+      form.reset({ slug: data.data?.slug });
+      queryClient.invalidateQueries({
+        queryKey: queryKey.workspaceById(variables.organizationId)
+      });
+      router.replace(`/${data.data?.slug}${path.workspaces.SETTINGS}`);
+      router.refresh();
+    },
+    onError: (error) => {
+      AlertToast32({
+        message: getTranslations({ error, t }),
+        icon: "destructive"
+      });
+    }
+  });
+  const onSubmit = (data) => {
+    if (!isOwner || !activeWorkspace?.id) {
+      return;
+    }
+    const slug = generateSlug(data.slug);
+    if (activeWorkspace?.slug === slug) {
+      AlertToast32({
+        message: `${t("systems.ORGANIZATION_SLUG")} ${t("systems.IS_THE_SAME")}`,
+        icon: "destructive"
+      });
+      return;
+    }
+    updateMutation({
+      organizationId: activeWorkspace.id,
+      data: { slug }
+    });
+  };
+  return /* @__PURE__ */ jsx71(Form19, { ...form, children: /* @__PURE__ */ jsx71("form", { onSubmit: form.handleSubmit(onSubmit), children: /* @__PURE__ */ jsx71(
+    CardComponent,
+    {
+      className,
+      classNames,
+      title: t("systems.ORGANIZATION_SLUG"),
+      description: t("systems.ORGANIZATION_SLUG_DESCRIPTION"),
+      instructions: t("systems.ORGANIZATION_SLUG_INSTRUCTIONS"),
+      actionLabel: t("systems.SAVE"),
+      disabled: disableSubmit || !isOwner,
+      isSubmitting: isPending,
+      ...props,
+      children: /* @__PURE__ */ jsx71(
+        FormField18,
+        {
+          control: form.control,
+          name: "slug",
+          render: ({ field }) => /* @__PURE__ */ jsxs60(FormItem18, { children: [
+            /* @__PURE__ */ jsx71(FormControl18, { children: /* @__PURE__ */ jsx71(
+              Input15,
+              {
+                id,
+                className: classNames?.input,
+                placeholder: t("systems.ORGANIZATION_SLUG_PLACEHOLDER"),
+                disabled: !isOwner,
+                ...field
+              }
+            ) }),
+            /* @__PURE__ */ jsx71(FormMessage18, { className: classNames?.error })
+          ] })
+        }
+      )
+    }
+  ) }) });
+}
+
+// src/ui/workspace/settings.tsx
+import { useTranslations as useTranslations58 } from "next-intl";
+import { cn as cn48 } from "pelatform-ui";
+import { jsx as jsx72, jsxs as jsxs61 } from "react/jsx-runtime";
+function WorkspaceSettingsCards({
+  className,
+  classNames,
+  logo
+}) {
+  const t = useTranslations58();
+  const { activeWorkspace } = useWorkspace();
+  return /* @__PURE__ */ jsxs61("div", { className: cn48("grid w-full gap-6 md:gap-8", className), children: [
+    /* @__PURE__ */ jsx72(WorkspaceLogoCard, { classNames, logo }),
+    /* @__PURE__ */ jsx72(WorkspaceNameCard, { classNames }),
+    /* @__PURE__ */ jsx72(WorkspaceSlugCard, { classNames }),
+    /* @__PURE__ */ jsx72(
+      DisplayIdCard,
+      {
+        classNames,
+        id: activeWorkspace?.id,
+        title: t("systems.DISPLAY_ORGANIZATION_TITLE"),
+        description: t("systems.DISPLAY_ORGANIZATION_DESCRIPTION")
+      }
+    ),
+    /* @__PURE__ */ jsx72(WorkspaceDeleteCard, { classNames })
+  ] });
+}
 export {
   AcceptInvitation,
   ApiKeyDeleteDialog,
@@ -7234,8 +7961,13 @@ export {
   UserView,
   VerifyEmail,
   WorkspaceContext,
+  WorkspaceDeleteCard,
   WorkspaceLogo,
+  WorkspaceLogoCard,
+  WorkspaceNameCard,
   WorkspaceProvider,
+  WorkspaceSettingsCards,
+  WorkspaceSlugCard,
   WorkspaceSwitcher,
   WorkspaceView,
   getUserName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pelatform/starter",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A collection of SaaS starter kit components and utilities for Pelatform applications.",
   "author": "Pelatform",
   "license": "MIT",