diff --git a/apps/backgrounds/package.json b/apps/backgrounds/package.json
index f77fb2ac57..c935da75c5 100644
--- a/apps/backgrounds/package.json
+++ b/apps/backgrounds/package.json
@@ -11,12 +11,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@next/third-parties": "16.1.2",
+    "@next/third-parties": "16.1.3",
     "@react-three/drei": "^10.0.7",
     "@react-three/fiber": "9.1.2",
     "clsx": "^2.1.1",
     "motion": "^12.11.0",
-    "next": "16.1.2",
+    "next": "16.1.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "shadergradient": "^1.2.14",
@@ -31,7 +31,7 @@
     "@types/react-dom": "^19",
     "@types/three": "^0.170.0",
     "eslint": "^9",
-    "eslint-config-next": "16.1.2",
+    "eslint-config-next": "16.1.3",
     "tailwindcss": "^4",
     "typescript": "^5"
   }
diff --git a/apps/viewer/package.json b/apps/viewer/package.json
index 58c6ff6a30..11373b5a68 100644
--- a/apps/viewer/package.json
+++ b/apps/viewer/package.json
@@ -9,11 +9,10 @@
     "lint": "eslint",
     "typecheck": "tsc --noEmit"
   },
-  "packageManager": "pnpm@10.10.0",
   "dependencies": {
     "@uidotdev/usehooks": "^2.4.1",
     "lucide-react": "^0.511.0",
-    "next": "16.1.2",
+    "next": "16.1.3",
     "pdfjs-dist": "4.8.69",
     "react": "19.2.3",
     "react-dom": "19.2.3",
@@ -27,9 +26,10 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "16.1.2",
+    "eslint-config-next": "16.1.3",
     "postcss": "^8",
     "tailwindcss": "^4",
     "typescript": "^5"
-  }
+  },
+  "packageManager": "pnpm@10.10.0"
 }
diff --git a/database/database.types.ts b/database/database.types.ts
index 1de17bf7b1..2eb50e2129 100644
--- a/database/database.types.ts
+++ b/database/database.types.ts
@@ -27,6 +27,13 @@ export type Database = MergeDeep<
           Row: DatabaseGenerated["public"]["Tables"]["customer"]["Row"] & {
             tags: string[];
           };
+          /**
+           * `customer_with_tags` is a view with an INSTEAD OF INSERT trigger.
+           * We model Insert so client code can insert without `any` casts.
+           */
+          Insert: DatabaseGenerated["public"]["Tables"]["customer"]["Insert"] & {
+            tags?: string[] | null;
+          };
         };
       };
     };
diff --git a/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts b/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts
index 76570c573e..47bcaac8ed 100644
--- a/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts
+++ b/editor/app/(api)/(public)/v1/session/[session]/field/[field]/challenge/email/start/route.ts
@@ -122,13 +122,44 @@ export async function POST(
     .select("lang")
     .eq("form_id", ctx.form.id)
     .single();
+
+  if (!formDoc) {
+    return NextResponse.json({ error: "form not found" }, { status: 404 });
+  }
+
+  // Resolve brand info for email sender/display.
+  // Prefer published tenant branding (`www.title` / `www.publisher`) when available,
+  // otherwise fall back to a generic placeholder. (Do not expose internal project names.)
+  const { data: www_list, error: www_err } = await service_role.www
+    .from("www")
+    .select("title, publisher, lang")
+    .eq("project_id", ctx.form.project_id)
+    .limit(1);
+
+  const www = !www_err && www_list && www_list.length > 0 ? www_list[0] : null;
+
+  const brand_name =
+    www && typeof www.title === "string" && www.title
+      ? String(www.title)
+      : "(Untitled)";
+
+  const publisher =
+    www && typeof www.publisher === "string" && www.publisher
+      ? String(www.publisher)
+      : "";
+  const brand_support_url =
+    publisher.startsWith("http://") || publisher.startsWith("https://")
+      ? publisher
+      : undefined;
+  const brand_support_contact = publisher.includes("@") ? publisher : undefined;
+
+  const langCandidate =
+    www && typeof www.lang === "string" && www.lang ? www.lang : formDoc.lang;
   const emailLang: CIAMVerificationEmailLang = select_lang(
-    (formDoc as { lang?: unknown } | null)?.lang,
+    langCandidate,
     supported_languages,
     "en"
   );
-
-  const brand_name = "Grida";
   const { error: resend_err } = await resend.emails.send({
     from: `${brand_name} <no-reply@accounts.grida.co>`,
     to: email,
@@ -138,6 +169,8 @@ export async function POST(
       brand_name,
       expires_in_minutes,
       lang: emailLang,
+      brand_support_url,
+      brand_support_contact,
     }),
   });
 
diff --git a/editor/app/(dev)/ui/components/tags/_page.tsx b/editor/app/(dev)/ui/components/tags/_page.tsx
new file mode 100644
index 0000000000..0424f111d7
--- /dev/null
+++ b/editor/app/(dev)/ui/components/tags/_page.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import React, { useState } from "react";
+import { TagInput } from "@/components/tag";
+import { ComponentDemo } from "../component-demo";
+
+export default function TagsPage() {
+  const [tags, setTags] = useState<{ id: string; text: string }[]>([
+    { id: "react", text: "react" },
+    { id: "typescript", text: "typescript" },
+  ]);
+  const [tagsWithAutocomplete, setTagsWithAutocomplete] = useState<
+    { id: string; text: string }[]
+  >([]);
+  const [emptyTags, setEmptyTags] = useState<{ id: string; text: string }[]>(
+    []
+  );
+  const [coloredTags, setColoredTags] = useState<
+    { id: string; text: string; color?: string }[]
+  >([{ id: "urgent", text: "urgent", color: "#ef4444" }]);
+
+  const autocompleteOptions = [
+    { id: "apple", text: "apple" },
+    { id: "banana", text: "banana" },
+    { id: "cherry", text: "cherry" },
+    { id: "date", text: "date" },
+    { id: "elderberry", text: "elderberry" },
+    { id: "fig", text: "fig" },
+    { id: "grape", text: "grape" },
+    { id: "honeydew", text: "honeydew" },
+    { id: "kiwi", text: "kiwi" },
+    { id: "lemon", text: "lemon" },
+    { id: "mango", text: "mango" },
+    { id: "orange", text: "orange" },
+    { id: "papaya", text: "papaya" },
+    { id: "raspberry", text: "raspberry" },
+    { id: "strawberry", text: "strawberry" },
+  ];
+
+  const coloredAutocompleteOptions = [
+    { id: "urgent", text: "urgent", color: "#ef4444" },
+    { id: "review", text: "review", color: "#f59e0b" },
+    { id: "planned", text: "planned", color: "#3b82f6" },
+    { id: "done", text: "done", color: "#22c55e" },
+    { id: "blocked", text: "blocked", color: "#a855f7" },
+  ];
+
+  return (
+    <main className="container max-w-screen-lg mx-auto py-10">
+      <div className="space-y-8">
+        <div>
+          <h1 className="text-3xl font-bold mb-2">Tag Input</h1>
+          <p className="text-gray-600">
+            A flexible tag input component with autocomplete support for
+            managing multiple values.
+          </p>
+        </div>
+
+        <hr />
+
+        <section className="space-y-4">
+          <div>
+            <h2 className="text-xl font-semibold mb-1">Basic Usage</h2>
+            <p className="text-sm text-gray-600">
+              Create and manage tags with keyboard support
+            </p>
+          </div>
+          <ComponentDemo
+            notes={
+              <>
+                <strong>Tips:</strong> Type and press Enter to add tags. Click
+                on a tag to remove it.
+              </>
+            }
+          >
+            <TagInput
+              tags={tags}
+              setTags={setTags}
+              activeTagIndex={null}
+              setActiveTagIndex={() => {}}
+            />
+          </ComponentDemo>
+        </section>
+
+        <hr />
+
+        <section className="space-y-4">
+          <div>
+            <h2 className="text-xl font-semibold mb-1">With Autocomplete</h2>
+            <p className="text-sm text-gray-600">
+              Enable autocomplete suggestions for faster input
+            </p>
+          </div>
+          <ComponentDemo
+            notes={
+              <>
+                <strong>Tips:</strong> Start typing to see autocomplete
+                suggestions. Select from the dropdown or create custom tags.
+              </>
+            }
+          >
+            <TagInput
+              tags={tagsWithAutocomplete}
+              setTags={setTagsWithAutocomplete}
+              enableAutocomplete
+              autocompleteOptions={autocompleteOptions}
+              activeTagIndex={null}
+              setActiveTagIndex={() => {}}
+            />
+          </ComponentDemo>
+        </section>
+
+        <hr />
+
+        <section className="space-y-4">
+          <div>
+            <h2 className="text-xl font-semibold mb-1">With Colors</h2>
+            <p className="text-sm text-gray-600">
+              Autocomplete and selected tags can be color-coded.
+            </p>
+          </div>
+          <ComponentDemo
+            notes={
+              <>
+                <strong>Tips:</strong> Pick from the colored suggestions to see
+                the chips tinted, Notion-style.
+              </>
+            }
+          >
+            <TagInput
+              tags={coloredTags}
+              setTags={setColoredTags}
+              enableAutocomplete
+              autocompleteOptions={coloredAutocompleteOptions}
+              activeTagIndex={null}
+              setActiveTagIndex={() => {}}
+            />
+          </ComponentDemo>
+        </section>
+
+        <hr />
+
+        <section className="space-y-4">
+          <div>
+            <h2 className="text-xl font-semibold mb-1">Empty State</h2>
+            <p className="text-sm text-gray-600">
+              Tag input without any initial values
+            </p>
+          </div>
+          <ComponentDemo notes="Start typing to add your first tag.">
+            <TagInput
+              tags={emptyTags}
+              setTags={setEmptyTags}
+              activeTagIndex={null}
+              setActiveTagIndex={() => {}}
+            />
+          </ComponentDemo>
+        </section>
+      </div>
+    </main>
+  );
+}
diff --git a/editor/app/(dev)/ui/components/tags/page.tsx b/editor/app/(dev)/ui/components/tags/page.tsx
index a4d382d414..476173f381 100644
--- a/editor/app/(dev)/ui/components/tags/page.tsx
+++ b/editor/app/(dev)/ui/components/tags/page.tsx
@@ -1,176 +1,17 @@
-"use client";
-
-import React, { useState } from "react";
-import { TagInput } from "@/components/tag";
-import { ComponentDemo } from "../component-demo";
+import _TagsPage from "./_page";
+
+export const metadata = {
+  title: "Tag Input | Grida",
+  description: "Tag input with autocomplete for managing multiple values",
+  keywords: [
+    "tag input",
+    "autocomplete",
+    "multiple values",
+    "tag management",
+    "tag input component",
+  ],
+};
 
 export default function TagsPage() {
-  const [tags, setTags] = useState<{ id: string; text: string }[]>([
-    { id: "react", text: "react" },
-    { id: "typescript", text: "typescript" },
-  ]);
-  const [tagsWithAutocomplete, setTagsWithAutocomplete] = useState<
-    { id: string; text: string }[]
-  >([]);
-  const [emptyTags, setEmptyTags] = useState<{ id: string; text: string }[]>(
-    []
-  );
-
-  const autocompleteOptions = [
-    { id: "apple", text: "apple" },
-    { id: "banana", text: "banana" },
-    { id: "cherry", text: "cherry" },
-    { id: "date", text: "date" },
-    { id: "elderberry", text: "elderberry" },
-    { id: "fig", text: "fig" },
-    { id: "grape", text: "grape" },
-    { id: "honeydew", text: "honeydew" },
-    { id: "kiwi", text: "kiwi" },
-    { id: "lemon", text: "lemon" },
-    { id: "mango", text: "mango" },
-    { id: "orange", text: "orange" },
-    { id: "papaya", text: "papaya" },
-    { id: "raspberry", text: "raspberry" },
-    { id: "strawberry", text: "strawberry" },
-  ];
-
-  return (
-    <main className="container max-w-screen-lg mx-auto py-10">
-      <div className="space-y-8">
-        <div>
-          <h1 className="text-3xl font-bold mb-2">Tag Input</h1>
-          <p className="text-gray-600">
-            A flexible tag input component with autocomplete support for
-            managing multiple values.
-          </p>
-        </div>
-
-        <hr />
-
-        <section className="space-y-4">
-          <div>
-            <h2 className="text-xl font-semibold mb-1">Basic Usage</h2>
-            <p className="text-sm text-gray-600">
-              Create and manage tags with keyboard support
-            </p>
-          </div>
-          <ComponentDemo
-            notes={
-              <>
-                <strong>Tips:</strong> Type and press Enter to add tags. Click
-                on a tag to remove it.
-              </>
-            }
-          >
-            <TagInput
-              tags={tags}
-              setTags={setTags}
-              activeTagIndex={null}
-              setActiveTagIndex={() => {}}
-            />
-          </ComponentDemo>
-        </section>
-
-        <hr />
-
-        <section className="space-y-4">
-          <div>
-            <h2 className="text-xl font-semibold mb-1">With Autocomplete</h2>
-            <p className="text-sm text-gray-600">
-              Enable autocomplete suggestions for faster input
-            </p>
-          </div>
-          <ComponentDemo
-            notes={
-              <>
-                <strong>Tips:</strong> Start typing to see autocomplete
-                suggestions. Select from the dropdown or create custom tags.
-              </>
-            }
-          >
-            <TagInput
-              tags={tagsWithAutocomplete}
-              setTags={setTagsWithAutocomplete}
-              enableAutocomplete
-              autocompleteOptions={autocompleteOptions}
-              activeTagIndex={null}
-              setActiveTagIndex={() => {}}
-            />
-          </ComponentDemo>
-        </section>
-
-        <hr />
-
-        <section className="space-y-4">
-          <div>
-            <h2 className="text-xl font-semibold mb-1">Empty State</h2>
-            <p className="text-sm text-gray-600">
-              Tag input without any initial values
-            </p>
-          </div>
-          <ComponentDemo notes="Start typing to add your first tag.">
-            <TagInput
-              tags={emptyTags}
-              setTags={setEmptyTags}
-              activeTagIndex={null}
-              setActiveTagIndex={() => {}}
-            />
-          </ComponentDemo>
-        </section>
-
-        <hr />
-
-        <section className="space-y-4">
-          <div>
-            <h2 className="text-xl font-semibold mb-1">Current Tags</h2>
-            <p className="text-sm text-gray-600">View all active tags</p>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div className="p-6 bg-gray-50 rounded-lg">
-              <h3 className="font-semibold mb-2 text-sm">Basic Tags</h3>
-              <div className="space-y-1">
-                {tags.length > 0 ? (
-                  tags.map((tag) => (
-                    <div key={tag.id} className="text-sm text-gray-600">
-                      • {tag.text}
-                    </div>
-                  ))
-                ) : (
-                  <div className="text-sm text-gray-400 italic">No tags</div>
-                )}
-              </div>
-            </div>
-            <div className="p-6 bg-gray-50 rounded-lg">
-              <h3 className="font-semibold mb-2 text-sm">Autocomplete Tags</h3>
-              <div className="space-y-1">
-                {tagsWithAutocomplete.length > 0 ? (
-                  tagsWithAutocomplete.map((tag) => (
-                    <div key={tag.id} className="text-sm text-gray-600">
-                      • {tag.text}
-                    </div>
-                  ))
-                ) : (
-                  <div className="text-sm text-gray-400 italic">No tags</div>
-                )}
-              </div>
-            </div>
-            <div className="p-6 bg-gray-50 rounded-lg">
-              <h3 className="font-semibold mb-2 text-sm">Empty Tags</h3>
-              <div className="space-y-1">
-                {emptyTags.length > 0 ? (
-                  emptyTags.map((tag) => (
-                    <div key={tag.id} className="text-sm text-gray-600">
-                      • {tag.text}
-                    </div>
-                  ))
-                ) : (
-                  <div className="text-sm text-gray-400 italic">No tags</div>
-                )}
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-    </main>
-  );
+  return <_TagsPage />;
 }
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/_components/quests-table.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/_components/quests-table.tsx
index 707b14ff62..97a2b78294 100644
--- a/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/_components/quests-table.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/_components/quests-table.tsx
@@ -28,7 +28,7 @@ import {
   CheckCircle2,
   Clock,
   AlertCircle,
-  Plus,
+  Infinity,
 } from "lucide-react";
 import {
   DropdownMenu,
@@ -87,8 +87,7 @@ export function QuestsTable() {
   const { tokens } = useReferrerQuests(campaign.id);
   const project = useProject();
 
-  // FIXME:
-  const max_invitations_per_referrer = 10;
+  const max_invitations_per_referrer = campaign.max_invitations_per_referrer;
 
   const toggleQuestExpand = (questId: string) => {
     setExpandedQuests((prev) =>
@@ -98,38 +97,51 @@ export function QuestsTable() {
     );
   };
 
+  const BADGE_PRESETS = {
+    quest_status: {
+      active: {
+        label: "Active",
+        className: "bg-green-50 text-green-700 border-green-200",
+      },
+      completed: {
+        label: "Completed",
+        className: "bg-blue-50 text-blue-700 border-blue-200",
+      },
+      expired: {
+        label: "Expired",
+        className: "bg-amber-50 text-amber-700 border-amber-200",
+      },
+    },
+    claim_status: {
+      claimed: {
+        label: "Claimed",
+        className: "bg-green-50 text-green-700 border-green-200",
+      },
+      not_claimed: {
+        label: "Not claimed",
+        className: "bg-amber-50 text-amber-700 border-amber-200",
+      },
+    },
+  } as const;
+
   const getStatusBadge = (status: "active" | "completed" | "expired") => {
-    switch (status) {
-      case "active":
-        return (
-          <Badge
-            variant="outline"
-            className="bg-green-50 text-green-700 border-green-200"
-          >
-            Active
-          </Badge>
-        );
-      case "completed":
-        return (
-          <Badge
-            variant="outline"
-            className="bg-blue-50 text-blue-700 border-blue-200"
-          >
-            Completed
-          </Badge>
-        );
-      case "expired":
-        return (
-          <Badge
-            variant="outline"
-            className="bg-amber-50 text-amber-700 border-amber-200"
-          >
-            Expired
-          </Badge>
-        );
-      default:
-        return <Badge variant="outline">{status}</Badge>;
-    }
+    const preset = BADGE_PRESETS.quest_status[status];
+    return (
+      <Badge variant="outline" className={preset.className}>
+        {preset.label}
+      </Badge>
+    );
+  };
+
+  const getClaimStatusBadge = (is_claimed: boolean) => {
+    const preset = is_claimed
+      ? BADGE_PRESETS.claim_status.claimed
+      : BADGE_PRESETS.claim_status.not_claimed;
+    return (
+      <Badge variant="outline" className={preset.className}>
+        {preset.label}
+      </Badge>
+    );
   };
 
   if (!tokens) {
@@ -216,35 +228,48 @@ export function QuestsTable() {
                     <Badge variant="outline">{QUESTNAME}</Badge>
                   </TableCell>
                   <TableCell>
-                    <div className="flex flex-col gap-1">
+                    {max_invitations_per_referrer !== null ? (
+                      <div className="flex flex-col gap-1">
+                        <div className="text-xs text-muted-foreground">
+                          {Math.round(
+                            (quest.invitation_count /
+                              max_invitations_per_referrer) *
+                              100
+                          )}
+                          %
+                        </div>
+                        <Progress
+                          value={
+                            (quest.invitation_count /
+                              max_invitations_per_referrer) *
+                            100
+                          }
+                          className="h-2"
+                        />
+                      </div>
+                    ) : (
                       <div className="text-xs text-muted-foreground">
-                        {(quest.invitation_count /
-                          (max_invitations_per_referrer ?? 0)) *
-                          100}
-                        %
+                        Unlimited
                       </div>
-                      <Progress
-                        value={
-                          (quest.invitation_count /
-                            (max_invitations_per_referrer ?? 0)) *
-                          100
-                        }
-                        className="h-2"
-                      />
-                    </div>
+                    )}
                   </TableCell>
                   <TableCell>
                     <div className="flex items-center gap-1">
                       <Users className="size-4 text-muted-foreground" />
-                      <span>
-                        {quest.invitation_count} /{" "}
-                        {max_invitations_per_referrer ?? "∞"}
-                      </span>
+                      <div className="flex items-center gap-1">
+                        <span>{quest.invitation_count} /</span>
+                        {max_invitations_per_referrer !== null ? (
+                          <span>{max_invitations_per_referrer}</span>
+                        ) : (
+                          <Infinity className="size-4 text-muted-foreground" />
+                        )}
+                      </div>
                     </div>
                   </TableCell>
                   <TableCell>
                     {getStatusBadge(
-                      quest.invitation_count === max_invitations_per_referrer
+                      max_invitations_per_referrer !== null &&
+                        quest.invitation_count === max_invitations_per_referrer
                         ? "completed"
                         : "active"
                     )}
@@ -301,9 +326,6 @@ export function QuestsTable() {
                                 <TableHead>Onboarding</TableHead>
                                 <TableHead>Step 1: Claim</TableHead>
                                 <TableHead>Step 2: Submit Form</TableHead>
-                                <TableHead>
-                                  Step 3: Complete Test Drive
-                                </TableHead>
                                 <TableHead className="text-right">
                                   Status
                                 </TableHead>
@@ -345,13 +367,8 @@ export function QuestsTable() {
                                       </span>
                                     </div>
                                   </TableCell>
-                                  <TableCell></TableCell>
                                   <TableCell className="text-right">
-                                    <Badge className="bg-green-100 text-green-800 hover:bg-green-100">
-                                      {challenge.is_claimed
-                                        ? "claimed"
-                                        : "not claimed"}
-                                    </Badge>
+                                    {getClaimStatusBadge(challenge.is_claimed)}
                                     {/* {challenge.steps.every(
                                       (step) => step.completed
                                     ) ? (
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/store.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/store.tsx
index f1aace5970..89e92fa620 100644
--- a/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/store.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/store.tsx
@@ -6,6 +6,7 @@ const CampaignContext = createContext<{
   id: string;
   title: string;
   layout_id: string | null;
+  max_invitations_per_referrer: number | null;
 } | null>(null);
 
 export function CampaignProvider({
@@ -17,6 +18,7 @@ export function CampaignProvider({
     id: string;
     title: string;
     layout_id: string | null;
+    max_invitations_per_referrer: number | null;
   };
 }) {
   return (
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/customers/[uid]/page.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/customers/[uid]/page.tsx
index 7c4277fb79..e7032b2c7e 100644
--- a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/customers/[uid]/page.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/customers/[uid]/page.tsx
@@ -21,7 +21,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { FormCustomerDetail } from "@/app/(api)/private/editor/customers/[uid]/route";
 import useSWR, { mutate } from "swr";
 import { Spinner } from "@/components/ui/spinner";
-import { ClockIcon, Cross1Icon, Link2Icon } from "@radix-ui/react-icons";
+import { ClockIcon, Link2Icon } from "@radix-ui/react-icons";
 import {
   ArrowLeft,
   ChevronDown,
@@ -51,8 +51,9 @@ import {
 import React, { useCallback, useMemo, useState, use } from "react";
 import { toast } from "sonner";
 import { useDialogState } from "@/components/hooks/use-dialog-state";
-import CustomerEditDialog, {
-  CustomerEditDialogDTO,
+import {
+  CustomerContactsEditDialog,
+  CustomerContactsEditDialogDTO,
 } from "@/scaffolds/platform/customer/customer-edit-dialog";
 import {
   Dialog,
@@ -103,7 +104,7 @@ function useCustomer(project_id: number, uid: string) {
   }, [uid, supabase]);
 
   const _update = useCallback(
-    async (data: CustomerEditDialogDTO) => {
+    async (data: CustomerContactsEditDialogDTO) => {
       const { error } = await supabase
         .from("customer")
         .update(data)
@@ -198,7 +199,6 @@ function useCustomer(project_id: number, uid: string) {
       update_tags: _update_tags,
       update_marketing: _update_marketing,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [uid, supabase]
   );
 }
@@ -274,7 +274,7 @@ export default function CustomerDetailPage(props0: {
     }
   };
 
-  const onUpdateCustomer = async (data: CustomerEditDialogDTO) => {
+  const onUpdateCustomer = async (data: CustomerContactsEditDialogDTO) => {
     const success = await actions.update(data);
     mutate(key);
 
@@ -389,10 +389,9 @@ export default function CustomerDetailPage(props0: {
         options={allTags.map((t) => t.name)}
         onSave={onUpdateCustomerTags}
       />
-      <CustomerEditDialog
+      <CustomerContactsEditDialog
         key={editCustomerDialog.refreshkey}
         {...editCustomerDialog.props}
-        operation="update"
         onSubmit={onUpdateCustomer}
         default={customer}
       />
@@ -821,7 +820,7 @@ function MetadataEditDialog({
       await onSave?.(data).then((success) => {
         if (success) props.onOpenChange?.(false);
       });
-    } catch (e) {
+    } catch {
       toast.error("Invalid JSON");
     }
   };
@@ -829,6 +828,9 @@ function MetadataEditDialog({
   return (
     <AlertDialog {...props}>
       <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Edit customer metadata</AlertDialogTitle>
+        </AlertDialogHeader>
         <ThemedMonacoEditor
           defaultValue={
             defaultValue ? JSON.stringify(defaultValue, null, 2) : ""
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/customers/page.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/customers/page.tsx
index 591014ae37..9a6288d874 100644
--- a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/customers/page.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/customers/page.tsx
@@ -27,44 +27,36 @@ import {
 } from "@/lib/supabase/client";
 import {
   DataPlatformProvider,
+  PredicateConfigProvider,
   SchemaNameProvider,
   StandaloneDataQueryProvider,
   TableDefinitionProvider,
+  type PredicateConfig,
 } from "@/scaffolds/data-query";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ResourceTypeIcon } from "@/components/resource-type-icon";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
   DropdownMenu,
-  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import {
-  ChevronDownIcon,
-  Cross2Icon,
-  GearIcon,
-  UploadIcon,
-} from "@radix-ui/react-icons";
+import { ChevronDownIcon, Cross2Icon, UploadIcon } from "@radix-ui/react-icons";
 import { useProject } from "@/scaffolds/workspace";
 import { useDialogState } from "@/components/hooks/use-dialog-state";
 import { ImportCSVDialog } from "@/scaffolds/platform/customer/import-csv-dialog";
 import { usePathname, useRouter } from "next/navigation";
 import { subscribeTable } from "@/lib/supabase/realtime";
-import { Badge } from "@/components/ui/badge";
-import { DateFormatRadioGroup } from "@/scaffolds/data-format/ui/date-format";
-import { DateTimeZoneRadioGroup } from "@/scaffolds/data-format/ui/date-timezone";
 import { cn } from "@/components/lib/utils";
-import CustomerEditDialog from "@/scaffolds/platform/customer/customer-edit-dialog";
+import CustomerCreateDialog from "@/scaffolds/platform/customer/customer-edit-dialog";
 import { toast } from "sonner";
 import { Platform } from "@/lib/platform";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { TableQueryChips } from "@/scaffolds/grid-editor/components/query/query-chips";
 import { txt_n_plural } from "@/utils/plural";
 import { DeleteSelectionButton } from "@/scaffolds/grid-editor/components/delete";
+import { useTags } from "@/scaffolds/workspace";
 
 export default function Customers() {
   return (
@@ -83,6 +75,26 @@ function Body() {
   const pathname = usePathname();
   const client = useMemo(() => createBrowserClient(), []);
   const [selection, setSelection] = useState<Set<string>>(new Set());
+  const { tags: projectTags } = useTags();
+  const tagOptions = useMemo(
+    () => projectTags.map((t) => ({ value: t.name, color: t.color })),
+    [projectTags]
+  );
+  const predicateConfig = useMemo<PredicateConfig>(
+    () => ({
+      getEnumOptions: (meta) => {
+        if (meta.name === "tags" && meta.array && meta.scalar_format === "text")
+          return tagOptions;
+        return undefined;
+      },
+      getDefaultPredicate: (meta) => {
+        if (meta.name === "tags" && meta.array && meta.scalar_format === "text")
+          return { op: "ov" };
+        return undefined;
+      },
+    }),
+    [tagOptions]
+  );
 
   const has_selected_rows = selection.size > 0;
 
@@ -142,154 +154,160 @@ function Body() {
         provider: "grida",
       }}
     >
-      <SchemaNameProvider schema={undefined}>
-        <TableDefinitionProvider definition={Platform.Customer.TABLE}>
-          <GridLayout.Root>
-            <GridLayout.Header>
-              <GridLayout.HeaderLine>
-                <GridLayout.HeaderMenus>
-                  {has_selected_rows ? (
-                    <div
-                      className={cn(
-                        "flex items-center",
-                        !has_selected_rows ? "hidden" : ""
-                      )}
-                    >
-                      <div className="flex gap-2 items-center">
-                        <div className="flex items-center gap-1.5">
-                          <Button
-                            size="icon"
-                            variant="outline"
-                            className="size-7"
-                            onClick={onClearSelection}
-                          >
-                            <Cross2Icon />
-                          </Button>
-                          <span
-                            className="text-sm font-norma text-muted-foreground"
-                            aria-label="selected responses"
-                          >
-                            {txt_n_plural(selection.size, "customer")} selected
-                          </span>
+      <PredicateConfigProvider config={predicateConfig}>
+        <SchemaNameProvider schema={undefined}>
+          <TableDefinitionProvider definition={Platform.Customer.TABLE}>
+            <GridLayout.Root>
+              <GridLayout.Header>
+                <GridLayout.HeaderLine>
+                  <GridLayout.HeaderMenus>
+                    {has_selected_rows ? (
+                      <div
+                        className={cn(
+                          "flex items-center",
+                          !has_selected_rows ? "hidden" : ""
+                        )}
+                      >
+                        <div className="flex gap-2 items-center">
+                          <div className="flex items-center gap-1.5">
+                            <Button
+                              size="icon"
+                              variant="outline"
+                              className="size-7"
+                              onClick={onClearSelection}
+                            >
+                              <Cross2Icon />
+                            </Button>
+                            <span
+                              className="text-sm font-norma text-muted-foreground"
+                              aria-label="selected responses"
+                            >
+                              {txt_n_plural(selection.size, "customer")}{" "}
+                              selected
+                            </span>
+                          </div>
+                          <GridLayout.HeaderSeparator />
+                          {/* <SelectionExport /> */}
+                          {/* <GridLayout.HeaderSeparator /> */}
+                          <DeleteSelectionButton
+                            count={selection.size}
+                            keyword={"customer"}
+                            onDeleteClick={() => {
+                              onDeleteCustomers(
+                                Array.from(selection.values()).map((v) => v)
+                              );
+                            }}
+                          />
                         </div>
-                        <GridLayout.HeaderSeparator />
-                        {/* <SelectionExport /> */}
-                        {/* <GridLayout.HeaderSeparator /> */}
-                        <DeleteSelectionButton
-                          count={selection.size}
-                          keyword={"customer"}
-                          onDeleteClick={() => {
-                            onDeleteCustomers(
-                              Array.from(selection.values()).map((v) => v)
-                            );
-                          }}
-                        />
                       </div>
-                    </div>
-                  ) : (
-                    <>
-                      <div className="flex justify-center items-center divide-x *:px-2 *:first:pl-0 *:last:pr-0">
-                        <Tabs defaultValue="default">
-                          <TabsList>
-                            <TabsTrigger value="default">
-                              <ResourceTypeIcon
-                                type={"user"}
-                                className="inline align-middle w-4 min-size-4"
+                    ) : (
+                      <>
+                        <div className="flex justify-center items-center divide-x *:px-2 *:first:pl-0 *:last:pr-0">
+                          <Tabs defaultValue="default">
+                            <TabsList>
+                              <TabsTrigger value="default">
+                                <ResourceTypeIcon
+                                  type={"user"}
+                                  className="inline align-middle w-4 min-size-4"
+                                />
+                                Customer
+                              </TabsTrigger>
+                            </TabsList>
+                          </Tabs>
+                          <GridLayout.HeaderMenuItems>
+                            <DataQueryPredicatesMenu {...tablespace}>
+                              <DataQueryPredicatesMenuTriggerButton
+                                active={tablespace.isPredicatesSet}
                               />
-                              Customer
-                            </TabsTrigger>
-                          </TabsList>
-                        </Tabs>
-                        <GridLayout.HeaderMenuItems>
-                          <DataQueryPredicatesMenu {...tablespace}>
-                            <DataQueryPredicatesMenuTriggerButton
-                              active={tablespace.isPredicatesSet}
-                            />
-                          </DataQueryPredicatesMenu>
-                          <DataQueryOrderByMenu {...tablespace}>
-                            <DataQueryOrderbyMenuTriggerButton
-                              active={tablespace.isOrderbySet}
+                            </DataQueryPredicatesMenu>
+                            <DataQueryOrderByMenu {...tablespace}>
+                              <DataQueryOrderbyMenuTriggerButton
+                                active={tablespace.isOrderbySet}
+                              />
+                            </DataQueryOrderByMenu>
+                            <DataQueryTextSearch
+                              placeholder="Type to search"
+                              onValueChange={(v) => {
+                                if (v.trim()) {
+                                  tablespace.onTextSearch(
+                                    Platform.Customer.TABLE_SEARCH_TEXT,
+                                    v.trim()
+                                  );
+                                } else {
+                                  tablespace.onTextSearchClear();
+                                }
+                              }}
+                              debounce={500}
                             />
-                          </DataQueryOrderByMenu>
-                          <DataQueryTextSearch
-                            placeholder="Type to search"
-                            onValueChange={(v) => {
-                              if (v.trim()) {
-                                tablespace.onTextSearch(
-                                  Platform.Customer.TABLE_SEARCH_TEXT,
-                                  v.trim()
-                                );
-                              } else {
-                                tablespace.onTextSearchClear();
-                              }
-                            }}
-                            debounce={500}
-                          />
-                        </GridLayout.HeaderMenuItems>
-                      </div>
-                    </>
-                  )}
-                </GridLayout.HeaderMenus>
-                <GridLayout.HeaderMenus>
-                  {/* <ViewSettings /> */}
-                  <NewButton
-                    onNewData={() => {
-                      tablespace.onRefresh();
-                    }}
-                  />
-                </GridLayout.HeaderMenus>
-              </GridLayout.HeaderLine>
-              {(tablespace.isPredicatesSet || tablespace.isOrderbySet) && (
-                <GridLayout.HeaderLine className="border-b-0 px-0">
-                  <ScrollArea>
-                    <ScrollBar orientation="horizontal" className="invisible" />
-                    <div className="px-2">
-                      <TableQueryChips {...tablespace} />
-                    </div>
-                  </ScrollArea>
+                          </GridLayout.HeaderMenuItems>
+                        </div>
+                      </>
+                    )}
+                  </GridLayout.HeaderMenus>
+                  <GridLayout.HeaderMenus>
+                    {/* <ViewSettings /> */}
+                    <NewButton
+                      onNewData={() => {
+                        tablespace.onRefresh();
+                      }}
+                    />
+                  </GridLayout.HeaderMenus>
                 </GridLayout.HeaderLine>
-              )}
-              <GridLoadingProgressLine loading={tablespace.loading} />
-            </GridLayout.Header>
-            <GridLayout.Content>
-              <CustomerGrid
-                loading={tablespace.loading}
-                tokens={
-                  tablespace.q_text_search
-                    ? [tablespace.q_text_search?.query]
-                    : []
-                }
-                // TODO:
-                // masked={state.datagrid_local_filter.masking_enabled}
-                // dateformat=""
-                // datetz=''
-                selectedRows={new Set(selection)}
-                onSelectedRowsChange={setSelection}
-                rows={tablespace.stream || []}
-                onCellDoubleClick={(row) => {
-                  router.push(`${pathname}/${row.uid}`);
-                  //
-                }}
-              />
-            </GridLayout.Content>
-            <GridLayout.Footer>
-              <GridQueryPaginationControl {...tablespace} />
-              <GridQueryLimitSelect
-                value={tablespace.limit}
-                onValueChange={tablespace.onLimit}
-              />
-              <GridQueryCount
-                count={tablespace.estimated_count}
-                keyword="customer"
-              />
-              <GridRefreshButton
-                refreshing={tablespace.loading}
-                onRefreshClick={tablespace.onRefresh}
-              />
-            </GridLayout.Footer>
-          </GridLayout.Root>
-        </TableDefinitionProvider>
-      </SchemaNameProvider>
+                {(tablespace.isPredicatesSet || tablespace.isOrderbySet) && (
+                  <GridLayout.HeaderLine className="border-b-0 px-0">
+                    <ScrollArea>
+                      <ScrollBar
+                        orientation="horizontal"
+                        className="invisible"
+                      />
+                      <div className="px-2">
+                        <TableQueryChips {...tablespace} />
+                      </div>
+                    </ScrollArea>
+                  </GridLayout.HeaderLine>
+                )}
+                <GridLoadingProgressLine loading={tablespace.loading} />
+              </GridLayout.Header>
+              <GridLayout.Content>
+                <CustomerGrid
+                  loading={tablespace.loading}
+                  tokens={
+                    tablespace.q_text_search
+                      ? [tablespace.q_text_search?.query]
+                      : []
+                  }
+                  // TODO:
+                  // masked={state.datagrid_local_filter.masking_enabled}
+                  // dateformat=""
+                  // datetz=''
+                  selectedRows={new Set(selection)}
+                  onSelectedRowsChange={setSelection}
+                  rows={tablespace.stream || []}
+                  onCellDoubleClick={(row) => {
+                    router.push(`${pathname}/${row.uid}`);
+                    //
+                  }}
+                />
+              </GridLayout.Content>
+              <GridLayout.Footer>
+                <GridQueryPaginationControl {...tablespace} />
+                <GridQueryLimitSelect
+                  value={tablespace.limit}
+                  onValueChange={tablespace.onLimit}
+                />
+                <GridQueryCount
+                  count={tablespace.estimated_count}
+                  keyword="customer"
+                />
+                <GridRefreshButton
+                  refreshing={tablespace.loading}
+                  onRefreshClick={tablespace.onRefresh}
+                />
+              </GridLayout.Footer>
+            </GridLayout.Root>
+          </TableDefinitionProvider>
+        </SchemaNameProvider>
+      </PredicateConfigProvider>
     </DataPlatformProvider>
   );
 }
@@ -297,7 +315,8 @@ function Body() {
 function NewButton({ onNewData }: { onNewData?: () => void }) {
   const project = useProject();
   const project_id = project.id;
-  const client = useMemo(() => createBrowserClient(), []);
+  const ciamClient = useMemo(() => createBrowserCIAMClient(), []);
+  const { tags: allTags } = useTags();
   const createCustomerDialog = useDialogState("create-customer", {
     refreshkey: true,
   });
@@ -316,12 +335,15 @@ function NewButton({ onNewData }: { onNewData?: () => void }) {
 
   return (
     <div className="flex items-center gap-1">
-      <CustomerEditDialog
+      <CustomerCreateDialog
         {...createCustomerDialog.props}
         key={createCustomerDialog.refreshkey}
-        operation="insert"
+        tagOptions={allTags.map((t) => t.name)}
         onSubmit={async (data) => {
-          const { error } = await insertCustomer(client, project_id, data);
+          const { error } = await insertCustomer(ciamClient, project_id, {
+            ...data,
+          });
+
           if (error) {
             console.error("Failed to create customer", error);
             toast.error("Failed to create customer");
@@ -372,73 +394,3 @@ function NewButton({ onNewData }: { onNewData?: () => void }) {
     </div>
   );
 }
-
-function ViewSettings() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button className="flex items-center justify-center">
-          <Badge variant="outline" className="cursor-pointer">
-            <GearIcon />
-          </Badge>
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-56">
-        <DropdownMenuLabel>View Options</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuLabel
-          inset
-          className="text-xs text-muted-foreground font-normal"
-        >
-          Data Consistency & Protection
-        </DropdownMenuLabel>
-        <DropdownMenuCheckboxItem
-        // checked={datagrid_filter.masking_enabled}
-        // onCheckedChange={(checked) => {
-        //   dispatch({
-        //     type: "editor/data-grid/local-filter",
-        //     masking_enabled: checked,
-        //   });
-        // }}
-        >
-          Mask data{" "}
-          <span className="inline ms-2 text-muted-foreground text-xs">
-            Locally
-          </span>
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuSeparator />
-        {/*  */}
-        {/* date format */}
-        <DropdownMenuLabel
-          inset
-          className="text-xs text-muted-foreground font-normal"
-        >
-          Date Format
-        </DropdownMenuLabel>
-        <DateFormatRadioGroup
-          value="datetime"
-          // value={dateformat}
-          onValueChange={(value) => {
-            //
-          }}
-        />
-
-        <DropdownMenuSeparator />
-        <DropdownMenuLabel
-          inset
-          className="text-xs text-muted-foreground font-normal"
-        >
-          Date Timezone
-        </DropdownMenuLabel>
-        {/* tz */}
-        <DateTimeZoneRadioGroup
-          value="UTC"
-          // value={dateformat}
-          onValueChange={(value) => {
-            //
-          }}
-        />
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/editor/components/ai-elements/code-block.tsx b/editor/components/ai-elements/code-block.tsx
index 7738f3da3d..0711c5b13c 100644
--- a/editor/components/ai-elements/code-block.tsx
+++ b/editor/components/ai-elements/code-block.tsx
@@ -2,7 +2,6 @@
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/components/lib/utils/index";
-import type { Element } from "hast";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import {
   type ComponentProps,
@@ -31,7 +30,7 @@ const CodeBlockContext = createContext<CodeBlockContextType>({
 
 const lineNumberTransformer: ShikiTransformer = {
   name: "line-numbers",
-  line(node: Element, line: number) {
+  line(node, line) {
     node.children.unshift({
       type: "element",
       tagName: "span",
@@ -110,12 +109,12 @@ export const CodeBlock = ({
       >
         <div className="relative">
           <div
-            className="overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            className="overflow-auto dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: html }}
           />
           <div
-            className="hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            className="hidden overflow-auto dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: darkHtml }}
           />
diff --git a/editor/components/formfield/email-challenge.tsx b/editor/components/formfield/email-challenge.tsx
index 540522f84f..4b257f44b2 100644
--- a/editor/components/formfield/email-challenge.tsx
+++ b/editor/components/formfield/email-challenge.tsx
@@ -230,6 +230,7 @@ function _EmailChallenge({
   label,
   placeholder,
   required,
+  requiredAsterisk = true,
   disabled,
   sendPending,
   i18n,
@@ -250,6 +251,7 @@ function _EmailChallenge({
   label?: string;
   placeholder?: string;
   required?: boolean;
+  requiredAsterisk?: boolean;
   disabled?: boolean;
   sendPending?: boolean;
   i18n?: EmailChallengeI18n;
@@ -283,7 +285,12 @@ function _EmailChallenge({
   return (
     <div data-slot="email-challenge" data-state={state} className="space-y-3">
       {label && (
-        <label className="text-sm font-medium leading-none">{label}</label>
+        <label className="text-sm font-medium leading-none">
+          {label}{" "}
+          {required && requiredAsterisk && (
+            <span className="text-red-500/80">*</span>
+          )}
+        </label>
       )}
 
       <InputGroup data-disabled={disabled ? "true" : undefined}>
@@ -509,6 +516,7 @@ export function EmailChallenge({
   label,
   placeholder,
   required,
+  requiredAsterisk = true,
   disabled,
   otpLength,
   otpType,
@@ -520,6 +528,7 @@ export function EmailChallenge({
   label?: string;
   placeholder?: string;
   required?: boolean;
+  requiredAsterisk?: boolean;
   disabled?: boolean;
   otpLength?: number;
   otpType?: "text" | "numeric";
@@ -552,6 +561,7 @@ export function EmailChallenge({
       label={label}
       placeholder={placeholder}
       required={required}
+      requiredAsterisk={requiredAsterisk}
       disabled={disabled}
       sendPending={false}
       i18n={defaultEmailChallengeI18nEn}
@@ -584,6 +594,7 @@ export function ChallengeEmailField({
   label,
   placeholder,
   required,
+  requiredAsterisk = true,
   disabled,
   otpLength = 6,
   otpType = "numeric",
@@ -599,6 +610,7 @@ export function ChallengeEmailField({
   label?: string;
   placeholder?: string;
   required?: boolean;
+  requiredAsterisk?: boolean;
   disabled?: boolean;
   otpLength?: number;
   otpType?: "text" | "numeric";
@@ -641,7 +653,6 @@ export function ChallengeEmailField({
     if (lastAutoVerifyOtpRef.current === otp) return;
     lastAutoVerifyOtpRef.current = otp;
     void onVerifyClick();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [otp, otpLength, verifyPending, sessionState.challenge_id, widgetState]);
 
   React.useEffect(() => {
@@ -665,7 +676,6 @@ export function ChallengeEmailField({
       cancelled = true;
     };
     // intentionally omit `email` from deps: we only want to hydrate once
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [provider, effectiveSessionId, effectiveFieldId]);
 
   const canSend = useMemo(() => {
@@ -732,6 +742,7 @@ export function ChallengeEmailField({
       label={label}
       placeholder={placeholder}
       required={required}
+      requiredAsterisk={requiredAsterisk}
       disabled={disabled}
       sendPending={sendPending}
       verifyPending={verifyPending}
@@ -762,6 +773,7 @@ export function EmailChallengePreview({
   label,
   placeholder,
   required,
+  requiredAsterisk = true,
   disabled,
   otpLength,
   otpType,
@@ -772,6 +784,7 @@ export function EmailChallengePreview({
   label?: string;
   placeholder?: string;
   required?: boolean;
+  requiredAsterisk?: boolean;
   disabled?: boolean;
   otpLength?: number;
   otpType?: "text" | "numeric";
@@ -813,6 +826,7 @@ export function EmailChallengePreview({
       label={label}
       placeholder={placeholder}
       required={required}
+      requiredAsterisk={requiredAsterisk}
       disabled={disabled}
       sendPending={false}
       i18n={defaultEmailChallengeI18nEn}
diff --git a/editor/components/formfield/form-field.tsx b/editor/components/formfield/form-field.tsx
index a8d554b66f..e869b3ff6c 100644
--- a/editor/components/formfield/form-field.tsx
+++ b/editor/components/formfield/form-field.tsx
@@ -317,6 +317,7 @@ function MonoFormField({
               label={label}
               placeholder={placeholder}
               required={required}
+              requiredAsterisk={requiredAsterisk}
               disabled={disabled}
             />
           );
@@ -330,6 +331,7 @@ function MonoFormField({
             label={label}
             placeholder={placeholder}
             required={required}
+            requiredAsterisk={requiredAsterisk}
             disabled={disabled}
           />
         );
diff --git a/editor/components/tag/autocomplete.tsx b/editor/components/tag/autocomplete.tsx
index 17a07a5829..111e0103ec 100644
--- a/editor/components/tag/autocomplete.tsx
+++ b/editor/components/tag/autocomplete.tsx
@@ -303,6 +303,12 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                       onClick={() => toggleTag(option)}
                     >
                       <div className="w-full flex items-center gap-2">
+                        {option.color && (
+                          <span
+                            className="size-2 rounded-full border"
+                            style={{ backgroundColor: option.color }}
+                          />
+                        )}
                         {option.text}
                         {tags.some((tag) => tag.text === option.text) && (
                           <svg
diff --git a/editor/components/tag/tag-input.tsx b/editor/components/tag/tag-input.tsx
index 7de9fa8195..180a727b88 100644
--- a/editor/components/tag/tag-input.tsx
+++ b/editor/components/tag/tag-input.tsx
@@ -23,6 +23,10 @@ type OmittedInputProps = Omit<
 export type Tag = {
   id: string;
   text: string;
+  /**
+   * Optional tint color (e.g. hex string) for the tag.
+   */
+  color?: string;
 };
 
 export interface TagInputStyleClassesProps {
diff --git a/editor/components/tag/tag.tsx b/editor/components/tag/tag.tsx
index 04d5ecf6b5..d2a5e50661 100644
--- a/editor/components/tag/tag.tsx
+++ b/editor/components/tag/tag.tsx
@@ -109,6 +109,19 @@ export const Tag: React.FC<TagProps> = ({
   tagClasses,
   disabled,
 }) => {
+  const style: React.CSSProperties | undefined = tagObj.color
+    ? ({
+        /**
+         * We keep the styling simple and avoid manual hex->rgba conversion.
+         * `color-mix()` is widely supported in modern browsers (Chromium/Safari/Firefox).
+         */
+        ["--tag-color" as keyof React.CSSProperties]: tagObj.color,
+        borderColor: "var(--tag-color)",
+        backgroundColor:
+          "color-mix(in srgb, var(--tag-color) 12%, transparent)",
+      } satisfies React.CSSProperties)
+    : undefined;
+
   return (
     <span
       key={tagObj.id}
@@ -132,7 +145,14 @@ export const Tag: React.FC<TagProps> = ({
         tagClasses?.body
       )}
       onClick={() => onTagClick?.(tagObj)}
+      style={style}
     >
+      {tagObj.color && (
+        <span
+          className="me-1 size-2 rounded-full border shrink-0"
+          style={{ backgroundColor: tagObj.color }}
+        />
+      )}
       {tagObj.text}
       <Button
         type="button"
diff --git a/editor/grida-forms-hosted/e/formview.tsx b/editor/grida-forms-hosted/e/formview.tsx
index 3525d82015..8ee09bb43d 100644
--- a/editor/grida-forms-hosted/e/formview.tsx
+++ b/editor/grida-forms-hosted/e/formview.tsx
@@ -553,6 +553,7 @@ function BlockRenderer({
               label={field.label ?? field.name}
               placeholder={field.placeholder ?? "alice@example.com"}
               required={field.required}
+              requiredAsterisk
               disabled={is_not_in_current_section_nor_root || hidden}
               i18n={emailChallengeTranslation}
             />
diff --git a/editor/lib/data/index.ts b/editor/lib/data/index.ts
index 310fe43e57..af6fc1675f 100644
--- a/editor/lib/data/index.ts
+++ b/editor/lib/data/index.ts
@@ -378,7 +378,9 @@ export namespace Data {
               ""
             ) as PGSupportedColumnType;
             // For array types, the operators "cs" (contains) and "cd" (contained by) are typically used
-            return [..._get_for_non_array(baseFormat), "cs", "cd"];
+            return Array.from(
+              new Set([..._get_for_non_array(baseFormat), "cs", "cd", "ov"])
+            );
           } else {
             return _get_for_non_array(format as PGSupportedColumnType);
           }
@@ -395,6 +397,7 @@ export namespace Data {
           "ilike",
           "is",
           "in",
+          "ov",
         ];
 
         export const supported_extensions: Extension.PrediacteExtensionType[] =
diff --git a/editor/lib/platform/index.ts b/editor/lib/platform/index.ts
index ab4a1e2ad6..43843b92d0 100644
--- a/editor/lib/platform/index.ts
+++ b/editor/lib/platform/index.ts
@@ -410,6 +410,19 @@ export namespace Platform.Customer {
         null: false,
         default: "false",
       },
+      tags: {
+        name: "tags",
+        description: "customer tags",
+        type: "array",
+        format: "text[]",
+        scalar_format: "text",
+        enum: undefined,
+        array: true,
+        pk: false,
+        fk: false,
+        null: false,
+        default: undefined,
+      },
     },
   };
 
diff --git a/editor/lib/supabase-postgrest/builder.ts b/editor/lib/supabase-postgrest/builder.ts
index b3385f50e8..77e241f093 100644
--- a/editor/lib/supabase-postgrest/builder.ts
+++ b/editor/lib/supabase-postgrest/builder.ts
@@ -8,6 +8,57 @@ import type { SupabaseClient } from "@supabase/supabase-js";
 import { Data } from "@/lib/data";
 
 export namespace XPostgrestQuery {
+  /**
+   * Helpers for encoding/decoding Postgres literals used in PostgREST filters.
+   */
+  export namespace Literal {
+    /**
+     * Parse a Postgres `text[]` array literal (e.g. `{"a","b"}`) into string[].
+     *
+     * If the value is not an array literal, it is treated as a single item
+     * (e.g. `"rock"` -> `["rock"]`).
+     */
+    export function parsePostgresTextArrayLiteral(value: unknown): string[] {
+      if (typeof value !== "string") return [];
+      const v = value.trim();
+      if (!v.startsWith("{") || !v.endsWith("}")) {
+        return v ? [v] : [];
+      }
+
+      const inner = v.slice(1, -1).trim();
+      if (!inner) return [];
+
+      const quotedMatches = Array.from(
+        inner.matchAll(/"((?:\\.|[^"\\])*)"/g)
+      ).map((m) =>
+        m[1]
+          .replace(/\\(["\\])/g, "$1")
+          .replace(/\\\\/g, "\\")
+          .trim()
+      );
+
+      if (quotedMatches.length > 0) {
+        return quotedMatches.filter(Boolean);
+      }
+
+      return inner
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean);
+    }
+
+    /**
+     * Encode string[] into a Postgres `text[]` array literal, e.g.
+     * `["a","b"]` -> `{"a","b"}`.
+     */
+    export function toPostgresTextArrayLiteral(values: string[]): string {
+      const escaped = values.map(
+        (v) => `"${v.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`
+      );
+      return `{${escaped.join(",")}}`;
+    }
+  }
+
   export namespace PredicateOperator {
     export type PostgRESTSQLPredicateNegateOperatorKeyword =
       `not.${Data.Query.Predicate.PredicateOperatorKeyword}`;
diff --git a/editor/package.json b/editor/package.json
index 603f53b7a6..f5123a0418 100644
--- a/editor/package.json
+++ b/editor/package.json
@@ -58,8 +58,8 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.1.0",
     "@monaco-editor/react": "^4.6.0",
-    "@next/mdx": "16.1.2",
-    "@next/third-parties": "16.1.2",
+    "@next/mdx": "16.1.3",
+    "@next/third-parties": "16.1.3",
     "@number-flow/react": "^0.5.7",
     "@octokit/rest": "^21.1.1",
     "@radix-ui/react-accordion": "^1.2.10",
@@ -177,7 +177,7 @@
     "ms": "^2.1.3",
     "nanoid": "^3.3.11",
     "negotiator": "^1.0.0",
-    "next": "16.1.2",
+    "next": "16.1.3",
     "next-themes": "^0.4.6",
     "openai": "^4.96.0",
     "p-queue": "^7.2.0",
@@ -250,7 +250,6 @@
     "@types/deep-equal": "^1.0.4",
     "@types/file-saver": "^2.0.5",
     "@types/geojson": "^7946.0.14",
-    "@types/hast": "^3.0.4",
     "@types/mapbox-gl": "^3.1.0",
     "@types/mdx": "^2.0.11",
     "@types/mime-types": "^2.1.4",
@@ -268,8 +267,7 @@
     "@types/uuid": "^9.0.8",
     "@types/validator": "^13.12.0",
     "eslint": "^9",
-    "eslint-config-next": "16.1.2",
-    "hast": "^1.0.0",
+    "eslint-config-next": "16.1.3",
     "import-in-the-middle": "^1.13.2",
     "openapi-types": "^12.1.3",
     "require-in-the-middle": "^7.5.2",
diff --git a/editor/scaffolds/data-query/index.ts b/editor/scaffolds/data-query/index.ts
index c12b4bd362..1d8040df00 100644
--- a/editor/scaffolds/data-query/index.ts
+++ b/editor/scaffolds/data-query/index.ts
@@ -4,3 +4,4 @@ export * from "./data-query.provider";
 export * from "./data-query.type";
 export * from "./schema-name.provider";
 export * from "./table-definition.provider";
+export * from "./predicate-config.provider";
diff --git a/editor/scaffolds/data-query/predicate-config.provider.tsx b/editor/scaffolds/data-query/predicate-config.provider.tsx
new file mode 100644
index 0000000000..4be1555b8c
--- /dev/null
+++ b/editor/scaffolds/data-query/predicate-config.provider.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import type { Data } from "@/lib/data";
+import React, { createContext, useContext } from "react";
+
+export type ColorTintedItem = {
+  value: string;
+  color: string;
+};
+
+export type PredicateEnumOptions = string[] | ColorTintedItem[];
+
+export type PredicateConfig = {
+  /**
+   * Provide a finite option set for a column. Intended for cases like `text[]`
+   * where the value should be chosen from known values.
+   *
+   * Returning `undefined` means \"no enum/options\" for this column.
+   */
+  getEnumOptions?: (
+    meta: Data.Relation.Attribute
+  ) => PredicateEnumOptions | undefined;
+
+  /**
+   * Provide default predicate settings when adding a predicate for a column.
+   * Returning `undefined` means \"use built-in defaults\".
+   */
+  getDefaultPredicate?: (
+    meta: Data.Relation.Attribute
+  ) => Partial<Data.Query.Predicate.ExtendedPredicate> | undefined;
+};
+
+const PredicateConfigContext = createContext<PredicateConfig | null>(null);
+
+export function PredicateConfigProvider({
+  config,
+  children,
+}: React.PropsWithChildren<{ config: PredicateConfig | null }>) {
+  return (
+    <PredicateConfigContext.Provider value={config}>
+      {children}
+    </PredicateConfigContext.Provider>
+  );
+}
+
+/**
+ * Optional config hook. Returns `null` when no provider is present.
+ */
+export function usePredicateConfig() {
+  return useContext(PredicateConfigContext);
+}
diff --git a/editor/scaffolds/grid-editor/components/query/predicate.tsx b/editor/scaffolds/grid-editor/components/query/predicate.tsx
index fa955ee5f8..9e5344e6a4 100644
--- a/editor/scaffolds/grid-editor/components/query/predicate.tsx
+++ b/editor/scaffolds/grid-editor/components/query/predicate.tsx
@@ -2,6 +2,7 @@
 
 import React, { useCallback, useEffect } from "react";
 import { Badge } from "@/components/ui/badge";
+import { TagInput, type Tag as TagInputTag } from "@/components/tag";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -26,6 +27,7 @@ import {
 } from "@/components/ui/select";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Data } from "@/lib/data";
+import { XPostgrestQuery } from "@/lib/supabase-postgrest/builder";
 import { useDebounce } from "@uidotdev/usehooks";
 import { QueryChip } from "../ui/chip";
 import { PostgresTypeTools } from "@/lib/x-supabase/typemap";
@@ -44,7 +46,9 @@ import {
   useSchemaName,
   useTableDefinition,
   type IDataQueryPredicatesConsumer,
+  usePredicateConfig,
 } from "@/scaffolds/data-query";
+import type { ColorTintedItem } from "@/scaffolds/data-query";
 import { toShorter } from "@/lib/pg-meta/k/alias";
 import type { SQLLiteralInputValue } from "./types";
 import { SQLLiteralInput } from "./sql-literal-input";
@@ -53,10 +57,195 @@ const {
   Query: { Predicate },
 } = Data;
 
+const { parsePostgresTextArrayLiteral, toPostgresTextArrayLiteral } =
+  XPostgrestQuery.Literal;
+
+function areTagInputTagsEqual(a: TagInputTag[], b: TagInputTag[]) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].text !== b[i].text) return false;
+    if (a[i].color !== b[i].color) return false;
+  }
+  return true;
+}
+
+function normalizeEnumOptions(
+  options: string[] | ColorTintedItem[] | undefined
+): TagInputTag[] | undefined {
+  if (!options || options.length === 0) return undefined;
+  const first = options[0];
+  if (typeof first === "string") {
+    return (options as string[]).map((v) => ({ id: v, text: v }));
+  }
+
+  return (options as ColorTintedItem[]).map((o) => ({
+    id: o.value,
+    text: o.value,
+    color: o.color,
+  }));
+}
+
+function ArrayPredicateValueInput({
+  value,
+  onValueChange,
+  options,
+}: {
+  value: unknown;
+  onValueChange: (value: string | null) => void;
+  options?: TagInputTag[];
+}) {
+  const [activeTagIndex, setActiveTagIndex] = React.useState<number | null>(
+    null
+  );
+  const [tags, setTags] = React.useState<TagInputTag[]>(() =>
+    parsePostgresTextArrayLiteral(value).map((t) => ({ id: t, text: t }))
+  );
+
+  useEffect(() => {
+    const colorByText = new Map(
+      (options ?? []).map((o) => [o.text, o.color] as const)
+    );
+    const next = parsePostgresTextArrayLiteral(value).map((t) => ({
+      id: t,
+      text: t,
+      color: colorByText.get(t),
+    }));
+    setTags((prev) => (areTagInputTagsEqual(prev, next) ? prev : next));
+  }, [value, options]);
+
+  useEffect(() => {
+    const cleaned = tags.map((t) => t.text.trim()).filter((t) => t.length > 0);
+    const encoded = cleaned.length ? toPostgresTextArrayLiteral(cleaned) : null;
+
+    const current =
+      typeof value === "string" ? value : value == null ? null : String(value);
+
+    if (encoded === current) return;
+    onValueChange(encoded);
+  }, [tags, value, onValueChange]);
+
+  return (
+    <TagInput
+      tags={tags}
+      setTags={setTags}
+      activeTagIndex={activeTagIndex}
+      setActiveTagIndex={setActiveTagIndex}
+      placeholder="Comma separated values"
+      enableAutocomplete={(options?.length ?? 0) > 0}
+      restrictTagsToAutocompleteOptions={(options?.length ?? 0) > 0}
+      autocompleteOptions={options}
+    />
+  );
+}
+
+function ArrayPredicateValuePopover({
+  value,
+  onValueChange,
+  options,
+}: {
+  value: unknown;
+  onValueChange: (value: string | null) => void;
+  options?: TagInputTag[];
+}) {
+  const tags = parsePostgresTextArrayLiteral(value);
+  const label = tags.length > 0 ? tags.join(", ") : "Select values";
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          className="w-full max-w-64 justify-start font-normal overflow-hidden"
+        >
+          <span className="truncate">{label}</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-2 w-[320px]" align="start">
+        <ArrayPredicateValueInput
+          value={value}
+          onValueChange={onValueChange}
+          options={options}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function PredicateValueEditor({
+  predicate,
+  meta,
+  platform,
+  schema_name,
+  predicateConfig,
+  onValueChange,
+}: {
+  predicate: Data.Query.Predicate.ExtendedPredicate;
+  meta: Data.Relation.Attribute;
+  platform: ReturnType<typeof useDataPlatform>;
+  schema_name: string | undefined;
+  predicateConfig: ReturnType<typeof usePredicateConfig>;
+  onValueChange: (value: SQLLiteralInputValue) => void;
+}) {
+  const enumOptionsRaw = meta.array
+    ? predicateConfig?.getEnumOptions?.(meta)
+    : undefined;
+  const enumOptions = normalizeEnumOptions(enumOptionsRaw);
+  const isArrayEnum = Array.isArray(enumOptions) && enumOptions.length > 0;
+  const isArray = !!meta.array;
+
+  if (isArrayEnum) {
+    return (
+      <ArrayPredicateValuePopover
+        value={predicate.value}
+        onValueChange={(v) => onValueChange(v ?? undefined)}
+        options={enumOptions}
+      />
+    );
+  }
+
+  if (isArray) {
+    return (
+      <ArrayPredicateValuePopover
+        value={predicate.value}
+        onValueChange={(v) => onValueChange(v ?? undefined)}
+      />
+    );
+  }
+
+  if (platform.provider === "x-supabase") {
+    return (
+      <XSBSQLLiteralInput
+        supabase={{
+          supabase_project_id: platform.supabase_project_id,
+          supabase_schema_name: schema_name!,
+        }}
+        config={PostgresTypeTools.getSQLLiteralInputConfig(meta, predicate.op)}
+        value={predicate.value as string}
+        onValueChange={onValueChange}
+      />
+    );
+  }
+
+  return (
+    <SQLLiteralInput
+      config={PostgresTypeTools.getSQLLiteralInputConfig(meta, predicate.op)}
+      value={predicate.value as string}
+      onValueChange={onValueChange}
+    />
+  );
+}
+
 export function DataQueryPredicatesMenu({
   children,
+  asChild,
   ...props
-}: React.PropsWithChildren<IDataQueryPredicatesConsumer>) {
+}: React.PropsWithChildren<
+  IDataQueryPredicatesConsumer & {
+    asChild?: boolean;
+  }
+>) {
   const {
     isPredicatesSet: isset,
     predicates,
@@ -71,17 +260,20 @@ export function DataQueryPredicatesMenu({
 
   const schema_name = useSchemaName();
   const platform = useDataPlatform();
+  const predicateConfig = usePredicateConfig();
 
   if (!isset) {
     return (
-      <DataQueryPrediateAddMenu {...props}>{children}</DataQueryPrediateAddMenu>
+      <DataQueryPrediateAddMenu {...props} asChild={asChild}>
+        {children}
+      </DataQueryPrediateAddMenu>
     );
   }
 
   return (
     <>
       <Popover modal>
-        <PopoverTrigger>{children}</PopoverTrigger>
+        <PopoverTrigger asChild={asChild}>{children}</PopoverTrigger>
         <PopoverContent className="p-2 w-full">
           <section className="py-2" hidden={!isset}>
             <div className="flex flex-col space-y-2 w-full">
@@ -147,31 +339,14 @@ export function DataQueryPredicatesMenu({
                         </Select>
                       </div>
                       <div className="flex-1">
-                        {platform.provider == "x-supabase" ? (
-                          <XSBSQLLiteralInput
-                            supabase={{
-                              supabase_project_id: platform.supabase_project_id,
-                              supabase_schema_name: schema_name!,
-                            }}
-                            config={PostgresTypeTools.getSQLLiteralInputConfig(
-                              properties[q.column],
-                              q.op
-                            )}
-                            value={q.value as string}
-                            // TODO: have a debounce here
-                            onValueChange={(v) => onchange({ value: v })}
-                          />
-                        ) : (
-                          <SQLLiteralInput
-                            config={PostgresTypeTools.getSQLLiteralInputConfig(
-                              properties[q.column],
-                              q.op
-                            )}
-                            value={q.value as string}
-                            // TODO: have a debounce here
-                            onValueChange={(v) => onchange({ value: v })}
-                          />
-                        )}
+                        <PredicateValueEditor
+                          predicate={q}
+                          meta={properties[q.column]}
+                          platform={platform}
+                          schema_name={schema_name}
+                          predicateConfig={predicateConfig}
+                          onValueChange={(v) => onchange({ value: v })}
+                        />
                       </div>
                     </div>
                     <Button
@@ -229,6 +404,7 @@ export function DataQueryPrediateAddMenu({
   const def = useTableDefinition();
   const attributes = def ? Object.keys(def.properties) : [];
   const properties = def ? def.properties : {};
+  const predicateConfig = usePredicateConfig();
 
   return (
     <DropdownMenu>
@@ -243,11 +419,21 @@ export function DataQueryPrediateAddMenu({
         )}
         {attributes.map((key) => {
           const property = properties[key];
+          const defaults = predicateConfig?.getDefaultPredicate?.(property);
+          const default_op = defaults?.op ?? "eq";
+          const default_value =
+            "value" in (defaults ?? {}) ? (defaults as any).value : null;
 
           return (
             <DropdownMenuItem
               key={key}
-              onSelect={() => onAdd({ column: key, op: "eq", value: null })}
+              onSelect={() =>
+                onAdd({
+                  column: key,
+                  op: default_op as any,
+                  value: default_value ?? null,
+                })
+              }
             >
               <div className="size-4 flex items-center justify-center gap-2">
                 {property.pk && <KeyIcon className="size-3" />}
@@ -273,12 +459,19 @@ export function DataQueryPredicateChip({
 
   const def = useTableDefinition();
   const properties = def ? def.properties : {};
+  const predicateConfig = usePredicateConfig();
 
   const schema_name = useSchemaName();
 
   const platform = useDataPlatform();
 
   const predicate = predicates[index];
+  const meta = properties[predicate.column];
+  const enumOptions = normalizeEnumOptions(
+    meta && meta.array ? predicateConfig?.getEnumOptions?.(meta) : undefined
+  );
+  const isArrayEnum = Array.isArray(enumOptions) && enumOptions.length > 0;
+  const isArray = !!meta?.array;
 
   const format =
     predicate.column in properties
@@ -315,13 +508,10 @@ export function DataQueryPredicateChip({
     [onChange]
   );
 
-  useEffect(
-    () => {
-      onChange({ value: debouncedSearch });
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [debouncedSearch]
-  );
+  useEffect(() => {
+    if (isArrayEnum || isArray) return;
+    onChange({ value: debouncedSearch });
+  }, [debouncedSearch, isArrayEnum, isArray]);
 
   const allowed_ops = Predicate.K.get_operators_by_format(format);
 
@@ -341,13 +531,25 @@ export function DataQueryPredicateChip({
   const this_has_supported_extensions = this_supported_extensions.length > 0;
 
   const fulfilled = !requires_value || !!predicate.value;
+  const chipValue =
+    fulfilled && requires_value
+      ? meta?.array && typeof predicate.value === "string"
+        ? (() => {
+            const items = parsePostgresTextArrayLiteral(predicate.value);
+            return items.length > 0 ? items.join(", ") : predicate.value;
+          })()
+        : String(predicate.value)
+      : "";
 
   return (
     <Popover modal>
       <PopoverTrigger>
         <QueryChip badge={!fulfilled} active={fulfilled}>
-          {predicate.column} {Predicate.K.operators[predicate.op].symbol}{" "}
-          {fulfilled ? (requires_value ? String(predicate.value) : "") : "..."}
+          <span className="inline-flex max-w-64 items-center gap-1 overflow-hidden align-middle">
+            <span className="font-semibold">{predicate.column}</span>
+            <span>{Predicate.K.operators[predicate.op].symbol}</span>
+            <span className="truncate">{fulfilled ? chipValue : "..."}</span>
+          </span>
         </QueryChip>
       </PopoverTrigger>
       <PopoverContent className="flex flex-col gap-2 w-[200px] p-2">
@@ -417,7 +619,18 @@ export function DataQueryPredicateChip({
         </div>
         {requires_value && (
           <>
-            {platform.provider == "x-supabase" ? (
+            {isArrayEnum ? (
+              <ArrayPredicateValueInput
+                value={predicate.value}
+                onValueChange={(v) => onChange({ value: v })}
+                options={enumOptions!}
+              />
+            ) : isArray ? (
+              <ArrayPredicateValueInput
+                value={predicate.value}
+                onValueChange={(v) => onChange({ value: v })}
+              />
+            ) : platform.provider == "x-supabase" ? (
               <XSBSQLLiteralInput
                 supabase={{
                   supabase_project_id: platform.supabase_project_id,
diff --git a/editor/scaffolds/grid-editor/components/query/query-chips.tsx b/editor/scaffolds/grid-editor/components/query/query-chips.tsx
index 8486e34074..1fa38d5567 100644
--- a/editor/scaffolds/grid-editor/components/query/query-chips.tsx
+++ b/editor/scaffolds/grid-editor/components/query/query-chips.tsx
@@ -24,7 +24,7 @@ export function TableQueryChips(
       {predicates.map((predicate, i) => (
         <DataQueryPredicateChip key={i} index={i} {...props} />
       ))}
-      <DataQueryPrediateAddMenu {...props}>
+      <DataQueryPrediateAddMenu {...props} asChild>
         <Button variant="ghost" size="xs" className="text-muted-foreground">
           <PlusIcon className="size-3 me-2" />
           Add filter
diff --git a/editor/scaffolds/grid-editor/index.tsx b/editor/scaffolds/grid-editor/index.tsx
index a468f35a3f..26fb29842c 100644
--- a/editor/scaffolds/grid-editor/index.tsx
+++ b/editor/scaffolds/grid-editor/index.tsx
@@ -49,7 +49,6 @@ import {
 import { Columns3Icon, Rows3Icon } from "lucide-react";
 import {
   useDatabaseTableId,
-  useDataGridTextSearch,
   useDataGridQuery,
   useDataGridRefresh,
   useDatagridTableAttributes,
@@ -59,10 +58,7 @@ import { saveAs } from "file-saver";
 import Papa from "papaparse";
 import {
   DataQueryPredicatesMenu,
-  DataQueryPredicateChip,
-  DataQueryPrediateAddMenu,
   DataQueryOrderByMenu,
-  DataQueryOrderbyChip,
 } from "./components/query";
 import {
   DataQueryPredicatesMenuTriggerButton,
diff --git a/editor/scaffolds/platform/customer/customer-edit-dialog.tsx b/editor/scaffolds/platform/customer/customer-edit-dialog.tsx
index 3c7edf3544..644780af3a 100644
--- a/editor/scaffolds/platform/customer/customer-edit-dialog.tsx
+++ b/editor/scaffolds/platform/customer/customer-edit-dialog.tsx
@@ -12,52 +12,224 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Spinner } from "@/components/ui/spinner";
 import { PhoneInput } from "@/components/extension/phone-input";
 import { Textarea } from "@/components/ui/textarea";
+import { TagInput } from "@/components/tag";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field";
 
-export interface CustomerEditDialogDTO {
+export interface CustomerContactsEditDialogDTO {
   name: string | null;
   email: string | null;
   phone: string | null;
   description: string | null;
 }
 
-const t_operation_action_label = {
-  insert: "create",
-  update: "update",
-} as const;
+export interface CustomerCreateDialogDTO extends CustomerContactsEditDialogDTO {
+  tags: string[];
+}
 
-export default function CustomerEditDialog({
+export function CustomerCreateDialog({
   default: defaultValues = {
     name: "",
     email: "",
     phone: "",
     description: "",
+    tags: [],
   },
-  operation,
   onSubmit,
+  tagOptions,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
-  operation: "insert" | "update";
-  default?: CustomerEditDialogDTO;
-  onSubmit?: (data: CustomerEditDialogDTO) => Promise<boolean>;
+  default?: CustomerContactsEditDialogDTO & { tags?: string[] };
+  onSubmit?: (data: CustomerCreateDialogDTO) => Promise<boolean>;
+  /**
+   * Autocomplete options (tag names). Freeform tags are still allowed.
+   */
+  tagOptions?: string[];
 }) {
   const {
     control,
     register,
     handleSubmit,
     formState: { isSubmitting },
-  } = useForm<CustomerEditDialogDTO>({
-    defaultValues: defaultValues,
+  } = useForm<CustomerContactsEditDialogDTO>({
+    defaultValues: {
+      name: defaultValues.name ?? "",
+      email: defaultValues.email ?? "",
+      phone: defaultValues.phone ?? "",
+      description: defaultValues.description ?? "",
+    },
   });
 
-  const t_action_label = t_operation_action_label[operation];
+  const [activeTagIndex, setActiveTagIndex] = React.useState<number | null>(
+    null
+  );
+  const [tags, setTags] = React.useState<{ id: string; text: string }[]>(() =>
+    (defaultValues.tags ?? []).map((t) => ({ id: t, text: t }))
+  );
 
-  const onFormSubmit = async (data: CustomerEditDialogDTO) => {
+  const onFormSubmit = async (data: CustomerContactsEditDialogDTO) => {
     // Transform falsy (empty) values to null.
-    const transformedData: CustomerEditDialogDTO = {
+    const transformedData: CustomerCreateDialogDTO = {
+      name: data.name?.trim() || null,
+      email: data.email?.trim() || null,
+      phone: data.phone?.trim() || null,
+      description: data.description?.trim() || null,
+      tags: tags.map((t) => t.text.trim()).filter((t) => t.length > 0),
+    };
+
+    await onSubmit?.(transformedData).then((success) => {
+      if (success) props.onOpenChange?.(false);
+    });
+  };
+
+  return (
+    <Dialog {...props}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader className="flex flex-row items-center justify-between">
+          <DialogTitle className="capitalize">create customer</DialogTitle>
+        </DialogHeader>
+        <form
+          id="customer-create-form"
+          onSubmit={handleSubmit(onFormSubmit)}
+          className="w-full"
+        >
+          <FieldGroup>
+            <FieldSet>
+              <FieldLegend>Account information</FieldLegend>
+              <FieldGroup>
+                <Field>
+                  <FieldLabel htmlFor="customer-create-name">Name</FieldLabel>
+                  <Input
+                    id="customer-create-name"
+                    placeholder="John Doe"
+                    {...register("name")}
+                    max={255}
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="customer-create-email">
+                    Account email
+                  </FieldLabel>
+                  <Input
+                    id="customer-create-email"
+                    type="email"
+                    placeholder="alice@acme.com"
+                    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
+                    {...register("email")}
+                    min={5}
+                    max={255}
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="customer-create-phone">
+                    Account Phone Number
+                  </FieldLabel>
+                  <Controller
+                    name="phone"
+                    control={control}
+                    render={({ field }) => (
+                      <PhoneInput
+                        id="customer-create-phone"
+                        {...field}
+                        value={field.value as any}
+                      />
+                    )}
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="customer-create-description">
+                    Description
+                  </FieldLabel>
+                  <Textarea
+                    id="customer-create-description"
+                    {...register("description")}
+                    maxLength={400}
+                  />
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+
+            <FieldSet>
+              <FieldLegend>Tags</FieldLegend>
+              <FieldDescription>
+                Add tags to organize and filter customers later.
+              </FieldDescription>
+              <FieldGroup>
+                <Field>
+                  <FieldLabel htmlFor="customer-create-tags">
+                    Customer tags
+                  </FieldLabel>
+                  <TagInput
+                    id="customer-create-tags"
+                    tags={tags}
+                    setTags={setTags}
+                    activeTagIndex={activeTagIndex}
+                    setActiveTagIndex={setActiveTagIndex}
+                    enableAutocomplete={(tagOptions?.length ?? 0) > 0}
+                    autocompleteOptions={tagOptions?.map((t) => ({
+                      id: t,
+                      text: t,
+                    }))}
+                    placeholder="Add tags"
+                  />
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+          </FieldGroup>
+        </form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline" disabled={isSubmitting}>
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button
+            form="customer-create-form"
+            disabled={isSubmitting}
+            className="capitalize"
+          >
+            {isSubmitting ? <Spinner /> : "create customer"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function CustomerContactsEditDialog({
+  default: defaultValues = {
+    name: "",
+    email: "",
+    phone: "",
+    description: "",
+  },
+  onSubmit,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  default?: CustomerContactsEditDialogDTO;
+  onSubmit?: (data: CustomerContactsEditDialogDTO) => Promise<boolean>;
+}) {
+  const {
+    control,
+    register,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<CustomerContactsEditDialogDTO>({
+    defaultValues: defaultValues,
+  });
+
+  const onFormSubmit = async (data: CustomerContactsEditDialogDTO) => {
+    // Transform falsy (empty) values to null.
+    const transformedData: CustomerContactsEditDialogDTO = {
       name: data.name?.trim() || null,
       email: data.email?.trim() || null,
       phone: data.phone?.trim() || null,
@@ -74,58 +246,70 @@ export default function CustomerEditDialog({
       <DialogContent className="sm:max-w-[500px]">
         <DialogHeader className="flex flex-row items-center justify-between">
           <DialogTitle className="capitalize">
-            {t_action_label} customer
+            Edit contact information
           </DialogTitle>
         </DialogHeader>
         <form
-          id="create-customer"
+          id="customer-contacts-edit-form"
           onSubmit={handleSubmit(onFormSubmit)}
-          className="space-y-6"
+          className="w-full"
         >
-          <div>
-            <h3 className="text-lg font-medium">Account information</h3>
-          </div>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="name">Name</Label>
-              <Input
-                id="name"
-                placeholder="John Doe"
-                {...register("name")}
-                max={255}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="email">Account email</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="alice@acme.com"
-                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
-                {...register("email")}
-                min={5}
-                max={255}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="phone">Account Phone Number</Label>
-              <Controller
-                name="phone"
-                control={control}
-                render={({ field }) => (
-                  <PhoneInput {...field} value={field.value as any} />
-                )}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
-              <Textarea
-                id="description"
-                {...register("description")}
-                maxLength={400}
-              />
-            </div>
-          </div>
+          <FieldGroup>
+            <FieldSet>
+              <FieldLegend>Account information</FieldLegend>
+              <FieldGroup>
+                <Field>
+                  <FieldLabel htmlFor="customer-contacts-name">Name</FieldLabel>
+                  <Input
+                    id="customer-contacts-name"
+                    placeholder="John Doe"
+                    {...register("name")}
+                    max={255}
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="customer-contacts-email">
+                    Account email
+                  </FieldLabel>
+                  <Input
+                    id="customer-contacts-email"
+                    type="email"
+                    placeholder="alice@acme.com"
+                    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
+                    {...register("email")}
+                    min={5}
+                    max={255}
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="customer-contacts-phone">
+                    Account Phone Number
+                  </FieldLabel>
+                  <Controller
+                    name="phone"
+                    control={control}
+                    render={({ field }) => (
+                      <PhoneInput
+                        id="customer-contacts-phone"
+                        {...field}
+                        value={field.value as any}
+                      />
+                    )}
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="customer-contacts-description">
+                    Description
+                  </FieldLabel>
+                  <Textarea
+                    id="customer-contacts-description"
+                    {...register("description")}
+                    maxLength={400}
+                  />
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+          </FieldGroup>
         </form>
         <DialogFooter>
           <DialogClose asChild>
@@ -134,14 +318,16 @@ export default function CustomerEditDialog({
             </Button>
           </DialogClose>
           <Button
-            form="create-customer"
+            form="customer-contacts-edit-form"
             disabled={isSubmitting}
             className="capitalize"
           >
-            {isSubmitting ? <Spinner /> : `${t_action_label} customer`}
+            {isSubmitting ? <Spinner /> : "save"}
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
 }
+
+export default CustomerCreateDialog;
diff --git a/editor/scaffolds/platform/customer/use-customer-feed.ts b/editor/scaffolds/platform/customer/use-customer-feed.ts
index 0e2f7deedf..13f0d74f1d 100644
--- a/editor/scaffolds/platform/customer/use-customer-feed.ts
+++ b/editor/scaffolds/platform/customer/use-customer-feed.ts
@@ -7,17 +7,19 @@ import type { SupabaseClient } from "@supabase/supabase-js";
 import type { Database } from "@app/database";
 
 export async function insertCustomer(
-  client: SupabaseClient<Database, "public">,
+  client: SupabaseClient<Database, "grida_ciam_public">,
   project_id: number,
-  data: Partial<
-    Pick<Platform.Customer.Customer, "name" | "email" | "phone" | "description">
+  data: Omit<
+    Database["grida_ciam_public"]["Views"]["customer_with_tags"]["Insert"],
+    "project_id"
   >
 ) {
   return await client
-    .from("customer")
+    .from("customer_with_tags")
     .insert({
       project_id,
       ...data,
+      tags: data.tags ?? [],
     })
     .select("*")
     .single();
@@ -92,7 +94,7 @@ export function useCustomers(
   >([]);
 
   useEffect(() => {
-    fetchCustomers(client, project_id, query).then(({ data, error }) => {
+    fetchCustomers(client, project_id, query).then(({ data }) => {
       if (data) {
         setCustomers(data);
       }
diff --git a/editor/scaffolds/workspace/workspace.tsx b/editor/scaffolds/workspace/workspace.tsx
index a0fd180056..3fa5a89c88 100644
--- a/editor/scaffolds/workspace/workspace.tsx
+++ b/editor/scaffolds/workspace/workspace.tsx
@@ -315,3 +315,12 @@ export function useTags() {
 
   return context;
 }
+
+/**
+ * Like {@link useTags}, but returns null when not within {@link ProjectTagsProvider}.
+ *
+ * Useful for optional tag autocomplete in shared UI components.
+ */
+export function useOptionalTags() {
+  return useContext(ProjectTagsContext);
+}
diff --git a/editor/theme/templates/enterprise/west-referral/invitation/page.tsx b/editor/theme/templates/enterprise/west-referral/invitation/page.tsx
index e328e67126..9893256470 100644
--- a/editor/theme/templates/enterprise/west-referral/invitation/page.tsx
+++ b/editor/theme/templates/enterprise/west-referral/invitation/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { Label } from "@/components/ui/label";
 import {
   Card,
   CardContent,
@@ -13,11 +12,10 @@ import { Button } from "@/components/ui/button";
 import {
   Drawer,
   DrawerContent,
-  DrawerDescription,
   DrawerFooter,
-  DrawerHeader,
   DrawerTitle,
 } from "@/components/ui/drawer";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { FormView } from "@/grida-forms-hosted/e";
 import {
   ScreenMobileFrame,
@@ -28,7 +26,6 @@ import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { TicketCheckIcon } from "lucide-react";
 import { ShineBorder } from "@/www/ui/shine-border";
-import Link from "next/link";
 import * as Standard from "@/theme/templates/enterprise/west-referral/standard";
 import { useDialogState } from "@/components/hooks/use-dialog-state";
 import { template } from "@/utils/template";
@@ -113,8 +110,10 @@ export default function InvitationPageTemplate({
   };
   client?: Platform.WEST.Referral.WestReferralClient;
 }) {
+  if (!visible) return null;
+
   const t = dictionary[locale];
-  const { code, campaign, referrer_name: _referrer_name, is_claimed } = data;
+  const { code, referrer_name: _referrer_name, is_claimed } = data;
   const referrer_name = _referrer_name || t.an_anonymous;
   const router = useRouter();
   const [claimed, setClaimed] = useState(is_claimed);
@@ -304,9 +303,46 @@ function SignUpForm({
   const isOpen = props.open === true;
   const hasForm = typeof form_id === "string" && form_id.length > 0;
 
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formdata = new FormData(e.target as HTMLFormElement);
+    const submit_json = await submitFormToDefaultEndpoint<{
+      customer_id?: string | null;
+    }>(form_id, formdata);
+
+    const customer_id =
+      submit_json?.data?.customer_id &&
+      typeof submit_json.data.customer_id === "string"
+        ? submit_json.data.customer_id
+        : null;
+
+    if (!customer_id) {
+      toast.error(copy.event_signup_fail);
+      return;
+    }
+
+    if (!client) {
+      toast.error(copy.event_signup_fail);
+      return;
+    }
+
+    const ok = await client.claim(invitation_code, customer_id);
+    if (!ok) {
+      toast.error(copy.event_signup_fail);
+      return;
+    }
+
+    toast.success(copy.event_signup_success);
+    onClaimed?.();
+  };
+
   return (
     <Drawer {...props} data-testid="west-referral-invitation-signup-form">
-      <DrawerContent>
+      {/* Ref: shadcn-ui/ui#2167 – scrolling inside Drawer on mobile.
+          Key: give drawer a fixed (d)vh height + overflow-hidden,
+          and make the scroll container fill the remaining height. */}
+      <DrawerContent className="h-[90dvh] max-h-[90dvh] min-h-0 overflow-hidden">
         <DrawerTitle className="sr-only">Mission Signup Form</DrawerTitle>
 
         {/* Only mount the form session + loading state when the drawer is open.
@@ -314,51 +350,28 @@ function SignUpForm({
         {isOpen ? (
           hasForm ? (
             <FormViewProvider form_id={form_id}>
-              <FormView.Body
-                onSubmit={async (e) => {
-                  e.preventDefault();
-
-                  const formdata = new FormData(e.target as HTMLFormElement);
-                  const submit_json = await submitFormToDefaultEndpoint<{
-                    customer_id?: string | null;
-                  }>(form_id, formdata);
-
-                  const customer_id =
-                    submit_json?.data?.customer_id &&
-                    typeof submit_json.data.customer_id === "string"
-                      ? submit_json.data.customer_id
-                      : null;
-
-                  if (!customer_id) {
-                    toast.error(copy.event_signup_fail);
-                    return;
-                  }
-
-                  if (!client) {
-                    toast.error(copy.event_signup_fail);
-                    return;
-                  }
-
-                  const ok = await client.claim(invitation_code, customer_id);
-                  if (!ok) {
-                    toast.error(copy.event_signup_fail);
-                    return;
-                  }
-
-                  toast.success(copy.event_signup_success);
-                  onClaimed?.();
-                }}
-                className="max-w-full"
-                config={{
-                  is_powered_by_branding_enabled: false,
-                }}
-              />
+              <div className="flex min-h-0 flex-1 flex-col">
+                {/* Scrollable form area (critical for small screens). */}
+                <ScrollArea className="min-h-0 flex-1">
+                  <div>
+                    <FormView.Body
+                      onSubmit={onSubmit}
+                      className="max-w-full"
+                      config={{
+                        is_powered_by_branding_enabled: false,
+                      }}
+                    />
+                  </div>
+                </ScrollArea>
 
-              <DrawerFooter className="pt-2">
-                <FormView.Prev>Previous</FormView.Prev>
-                <FormView.Next>Next</FormView.Next>
-                <FormView.Submit>Save</FormView.Submit>
-              </DrawerFooter>
+                {/* Fixed action area */}
+                {/* TODO: have i18n */}
+                <DrawerFooter className="pt-2 border-t bg-background pb-[calc(env(safe-area-inset-bottom)+1rem)]">
+                  <FormView.Prev>Previous</FormView.Prev>
+                  <FormView.Next>Next</FormView.Next>
+                  <FormView.Submit>Save</FormView.Submit>
+                </DrawerFooter>
+              </div>
             </FormViewProvider>
           ) : (
             <div className="p-4">
@@ -383,11 +396,7 @@ function FormViewProvider({
   // (or allow callers to fully control loading UX). For now, we keep a simple
   // built-in skeleton and only mount this provider when the dialog is open.
   const { session, clearSessionStorage } = useRequestFormSession(form_id);
-  const {
-    data: res,
-    error: servererror,
-    isLoading,
-  } = useFormSession(form_id, {
+  const { data: res, isLoading } = useFormSession(form_id, {
     mode: "signed",
     session_id: session,
     // TODO: not implemented
@@ -400,7 +409,7 @@ function FormViewProvider({
     };
   }, []);
 
-  const { data, error } = res || {};
+  const { data } = res || {};
 
   if (isLoading || !session || !data) {
     return (
diff --git a/editor/theme/templates/enterprise/west-referral/referrer/page.tsx b/editor/theme/templates/enterprise/west-referral/referrer/page.tsx
index 0a19000367..ddd3c708a0 100644
--- a/editor/theme/templates/enterprise/west-referral/referrer/page.tsx
+++ b/editor/theme/templates/enterprise/west-referral/referrer/page.tsx
@@ -49,7 +49,9 @@ function renderSharable({
   }
 
   return {
-    text: template(template_text, context),
+    // Some mobile share targets are sensitive to trailing newlines/spaces.
+    // Normalize to avoid extra empty lines being introduced.
+    text: template(template_text, context).trimEnd(),
     url: context.url,
   };
 }
@@ -95,14 +97,20 @@ async function reshare({
 async function share_or_copy(
   sharable: WebSharePayload
 ): Promise<{ type: "clipboard" | "share" }> {
+  const normalized: WebSharePayload = {
+    // Some share targets add their own separators; keep our payload clean.
+    title: sharable.title?.trim(),
+    text: sharable.text?.trimEnd(),
+    url: sharable.url?.trim(),
+  };
+
   if (navigator.share) {
-    await navigator.share(sharable);
+    await navigator.share(normalized);
     return { type: "share" };
   } else {
-    const shareUrl = sharable.url;
-    const shareText = sharable.text;
-    const shareTitle = sharable.title;
-    const shareContent = `${shareTitle}\n${shareText}\n${shareUrl}`;
+    const shareContent = [normalized.title, normalized.text, normalized.url]
+      .filter((v): v is string => typeof v === "string" && v.length > 0)
+      .join("\n");
     await navigator.clipboard.writeText(shareContent);
     return { type: "clipboard" };
   }
diff --git a/package.json b/package.json
index f641ce1660..8e3294ede7 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
       "axios": "1.6.7",
       "prosemirror-model": "1.23.0",
       "prosemirror-view": "1.36.0",
-      "next": "16.1.2",
+      "next": "16.1.3",
       "react": "19.2.3",
       "react-dom": "19.2.3"
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e16dd9ce9f..dd4d0617ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,7 @@ overrides:
   axios: 1.6.7
   prosemirror-model: 1.23.0
   prosemirror-view: 1.36.0
-  next: 16.1.2
+  next: 16.1.3
   react: 19.2.3
   react-dom: 19.2.3
 
@@ -48,8 +48,8 @@ importers:
   apps/backgrounds:
     dependencies:
       '@next/third-parties':
-        specifier: 16.1.2
-        version: 16.1.2(next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
+        specifier: 16.1.3
+        version: 16.1.3(next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
       '@react-three/drei':
         specifier: ^10.0.7
         version: 10.1.2(@react-three/fiber@9.1.2(@types/react@19.1.3)(immer@9.0.21)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.170.0))(@types/react@19.1.3)(@types/three@0.170.0)(immer@9.0.21)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.170.0)
@@ -63,8 +63,8 @@ importers:
         specifier: ^12.11.0
         version: 12.15.0(@emotion/is-prop-valid@1.3.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       next:
-        specifier: 16.1.2
-        version: 16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 16.1.3
+        version: 16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react:
         specifier: 19.2.3
         version: 19.2.3
@@ -103,8 +103,8 @@ importers:
         specifier: ^9
         version: 9.27.0(jiti@2.4.2)
       eslint-config-next:
-        specifier: 16.1.2
-        version: 16.1.2(@typescript-eslint/parser@8.53.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
+        specifier: 16.1.3
+        version: 16.1.3(@typescript-eslint/parser@8.53.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
       tailwindcss:
         specifier: ^4
         version: 4.1.8
@@ -225,8 +225,8 @@ importers:
         specifier: ^0.511.0
         version: 0.511.0(react@19.2.3)
       next:
-        specifier: 16.1.2
-        version: 16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 16.1.3
+        version: 16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       pdfjs-dist:
         specifier: 4.8.69
         version: 4.8.69
@@ -262,8 +262,8 @@ importers:
         specifier: ^9
         version: 9.27.0(jiti@2.4.2)
       eslint-config-next:
-        specifier: 16.1.2
-        version: 16.1.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
+        specifier: 16.1.3
+        version: 16.1.3(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
       postcss:
         specifier: ^8
         version: 8.5.6
@@ -431,11 +431,11 @@ importers:
         specifier: ^4.6.0
         version: 4.7.0(monaco-editor@0.47.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@next/mdx':
-        specifier: 16.1.2
-        version: 16.1.2(@mdx-js/loader@3.1.0(acorn@8.15.0)(webpack@5.98.0(esbuild@0.25.4)))(@mdx-js/react@3.1.0(@types/react@19.1.3)(react@19.2.3))
+        specifier: 16.1.3
+        version: 16.1.3(@mdx-js/loader@3.1.0(acorn@8.15.0)(webpack@5.98.0(esbuild@0.25.4)))(@mdx-js/react@3.1.0(@types/react@19.1.3)(react@19.2.3))
       '@next/third-parties':
-        specifier: 16.1.2
-        version: 16.1.2(next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
+        specifier: 16.1.3
+        version: 16.1.3(next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
       '@number-flow/react':
         specifier: ^0.5.7
         version: 0.5.9(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -537,7 +537,7 @@ importers:
         version: 0.0.38(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@sentry/nextjs':
         specifier: ^10.34.0
-        version: 10.34.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(webpack@5.98.0(esbuild@0.25.4))
+        version: 10.34.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(webpack@5.98.0(esbuild@0.25.4))
       '@stepperize/react':
         specifier: ^3.1.1
         version: 3.1.1(react@19.2.3)
@@ -618,7 +618,7 @@ importers:
         version: 10.3.1(react@19.2.3)
       '@vercel/analytics':
         specifier: ^1.3.1
-        version: 1.5.0(next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(svelte@4.2.19)(vue@3.5.13(typescript@5.8.3))
+        version: 1.5.0(next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(svelte@4.2.19)(vue@3.5.13(typescript@5.8.3))
       '@vercel/edge-config':
         specifier: ^1.2.1
         version: 1.4.0(@opentelemetry/api@1.9.0)
@@ -630,7 +630,7 @@ importers:
         version: 1.7.7(zod@4.2.1)
       '@vercel/speed-insights':
         specifier: ^1.0.12
-        version: 1.2.0(next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(svelte@4.2.19)(vue@3.5.13(typescript@5.8.3))
+        version: 1.2.0(next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(svelte@4.2.19)(vue@3.5.13(typescript@5.8.3))
       '@visx/responsive':
         specifier: ^3.10.2
         version: 3.12.0(react@19.2.3)
@@ -788,8 +788,8 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0
       next:
-        specifier: 16.1.2
-        version: 16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 16.1.3
+        version: 16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -1001,9 +1001,6 @@ importers:
       '@types/geojson':
         specifier: ^7946.0.14
         version: 7946.0.16
-      '@types/hast':
-        specifier: ^3.0.4
-        version: 3.0.4
       '@types/mapbox-gl':
         specifier: ^3.1.0
         version: 3.4.1
@@ -1056,11 +1053,8 @@ importers:
         specifier: ^9
         version: 9.27.0(jiti@2.4.2)
       eslint-config-next:
-        specifier: 16.1.2
-        version: 16.1.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
-      hast:
-        specifier: ^1.0.0
-        version: 1.0.0
+        specifier: 16.1.3
+        version: 16.1.3(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3)
       import-in-the-middle:
         specifier: ^1.13.2
         version: 1.14.0
@@ -3670,14 +3664,14 @@ packages:
     peerDependencies:
       three: '>= 0.159.0'
 
-  '@next/env@16.1.2':
-    resolution: {integrity: sha512-r6TpLovDTvWtzw11UubUQxEK6IduT8rSAHbGX68yeFpA/1Oq9R4ovi5nqMUMgPN0jr2SpfeyFRbTZg3Inuuv3g==}
+  '@next/env@16.1.3':
+    resolution: {integrity: sha512-BLP14oBOvZWXgfdJf9ao+VD8O30uE+x7PaV++QtACLX329WcRSJRO5YJ+Bcvu0Q+c/lei41TjSiFf6pXqnpbQA==}
 
-  '@next/eslint-plugin-next@16.1.2':
-    resolution: {integrity: sha512-jjO5BKDxZEXt2VCAnAG/ldULnpxeXspjCo9AZErV3Lm5HmNj8r2rS+eUMIAAj6mXPAOiPqAMgVPGnkyhPyDx4g==}
+  '@next/eslint-plugin-next@16.1.3':
+    resolution: {integrity: sha512-MqBh3ltFAy0AZCRFVdjVjjeV7nEszJDaVIpDAnkQcn8U9ib6OEwkSnuK6xdYxMGPhV/Y4IlY6RbDipPOpLfBqQ==}
 
-  '@next/mdx@16.1.2':
-    resolution: {integrity: sha512-Lb2oUdEbX/GT6yVNZNOEBikIN5OF5R1TYYOYkiH/bQVvaVBzlnJzy7sEVApIyi+rKb5P1rpjZ2h5InNxvhwzMA==}
+  '@next/mdx@16.1.3':
+    resolution: {integrity: sha512-idbNOfd0KKsyhTzA95QCNRJmKadZ6wZK4pU9zq1VspRC0cqkTcrhNE9CFMc7kusLdwd1cCgPTNOdfOIOBt9hMg==}
     peerDependencies:
       '@mdx-js/loader': '>=0.15.0'
       '@mdx-js/react': '>=0.15.0'
@@ -3687,58 +3681,58 @@ packages:
       '@mdx-js/react':
         optional: true
 
-  '@next/swc-darwin-arm64@16.1.2':
-    resolution: {integrity: sha512-0N2baysDpTXASTVxTV+DkBnD97bo9PatUj8sHlKA+oR9CyvReaPQchQyhCbH0Jm0mC/Oka5F52intN+lNOhSlA==}
+  '@next/swc-darwin-arm64@16.1.3':
+    resolution: {integrity: sha512-CpOD3lmig6VflihVoGxiR/l5Jkjfi4uLaOR4ziriMv0YMDoF6cclI+p5t2nstM8TmaFiY6PCTBgRWB57/+LiBA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.1.2':
-    resolution: {integrity: sha512-Q0wnSK0lmeC9ps+/w/bDsMSF3iWS45WEwF1bg8dvMH3CmKB2BV4346tVrjWxAkrZq20Ro6Of3R19IgrEJkXKyw==}
+  '@next/swc-darwin-x64@16.1.3':
+    resolution: {integrity: sha512-aF4us2JXh0zn3hNxvL1Bx3BOuh8Lcw3p3Xnurlvca/iptrDH1BrpObwkw9WZra7L7/0qB9kjlREq3hN/4x4x+Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@16.1.2':
-    resolution: {integrity: sha512-4twW+h7ZatGKWq+2pUQ9SDiin6kfZE/mY+D8jOhSZ0NDzKhQfAPReXqwTDWVrNjvLzHzOcDL5kYjADHfXL/b/Q==}
+  '@next/swc-linux-arm64-gnu@16.1.3':
+    resolution: {integrity: sha512-8VRkcpcfBtYvhGgXAF7U3MBx6+G1lACM1XCo1JyaUr4KmAkTNP8Dv2wdMq7BI+jqRBw3zQE7c57+lmp7jCFfKA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@16.1.2':
-    resolution: {integrity: sha512-Sn6LxPIZcADe5AnqqMCfwBv6vRtDikhtrjwhu+19WM6jHZe31JDRcGuPZAlJrDk6aEbNBPUUAKmySJELkBOesg==}
+  '@next/swc-linux-arm64-musl@16.1.3':
+    resolution: {integrity: sha512-UbFx69E2UP7MhzogJRMFvV9KdEn4sLGPicClwgqnLht2TEi204B71HuVfps3ymGAh0c44QRAF+ZmvZZhLLmhNg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@16.1.2':
-    resolution: {integrity: sha512-nwzesEQBfQIOOnQ7JArzB08w9qwvBQ7nC1i8gb0tiEFH94apzQM3IRpY19MlE8RBHxc9ArG26t1DEg2aaLaqVQ==}
+  '@next/swc-linux-x64-gnu@16.1.3':
+    resolution: {integrity: sha512-SzGTfTjR5e9T+sZh5zXqG/oeRQufExxBF6MssXS7HPeZFE98JDhCRZXpSyCfWrWrYrzmnw/RVhlP2AxQm+wkRQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@16.1.2':
-    resolution: {integrity: sha512-s60bLf16BDoICQHeKEm0lDgUNMsL1UpQCkRNZk08ZNnRpK0QUV+6TvVHuBcIA7oItzU0m7kVmXe8QjXngYxJVA==}
+  '@next/swc-linux-x64-musl@16.1.3':
+    resolution: {integrity: sha512-HlrDpj0v+JBIvQex1mXHq93Mht5qQmfyci+ZNwGClnAQldSfxI6h0Vupte1dSR4ueNv4q7qp5kTnmLOBIQnGow==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@16.1.2':
-    resolution: {integrity: sha512-Sq8k4SZd8Y8EokKdz304TvMO9HoiwGzo0CTacaiN1bBtbJSQ1BIwKzNFeFdxOe93SHn1YGnKXG6Mq3N+tVooyQ==}
+  '@next/swc-win32-arm64-msvc@16.1.3':
+    resolution: {integrity: sha512-3gFCp83/LSduZMSIa+lBREP7+5e7FxpdBoc9QrCdmp+dapmTK9I+SLpY60Z39GDmTXSZA4huGg9WwmYbr6+WRw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.1.2':
-    resolution: {integrity: sha512-KQDBwspSaNX5/wwt6p7ed5oINJWIxcgpuqJdDNubAyq7dD+ZM76NuEjg8yUxNOl5R4NNgbMfqE/RyNrsbYmOKg==}
+  '@next/swc-win32-x64-msvc@16.1.3':
+    resolution: {integrity: sha512-1SZVfFT8zmMB+Oblrh5OKDvUo5mYQOkX2We6VGzpg7JUVZlqe4DYOFGKYZKTweSx1gbMixyO1jnFT4thU+nNHQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
-  '@next/third-parties@16.1.2':
-    resolution: {integrity: sha512-l7caHpg4DQub6R4pgAFpREL+BuCnELweT2ch+vfFdMj312j3Yu1yc0lbZTxqwoaj24dHb5tVGiSL08i3rXkN8w==}
+  '@next/third-parties@16.1.3':
+    resolution: {integrity: sha512-jfsjVs/w2MGSF/+2Miy9iLw5aPShzcfNEAhRQeMB7wCThdUXnA/f9UjXLlAQDqbRhQ0qKV2vuTyWaiFwRAp+kQ==}
     peerDependencies:
-      next: 16.1.2
+      next: 16.1.3
       react: 19.2.3
 
   '@nodelib/fs.scandir@2.1.5':
@@ -5187,7 +5181,7 @@ packages:
     resolution: {integrity: sha512-Dozk4j2WSJkDy1phsdzFtPBaCzHuj1ESAMOhXim8/RVPGusxSc3z68+Sf3qjDKYjVK+8TsMQZHr+8j2WCTAKgQ==}
     engines: {node: '>=18'}
     peerDependencies:
-      next: 16.1.2
+      next: 16.1.3
 
   '@sentry/node-core@10.34.0':
     resolution: {integrity: sha512-FrGfC8GzD1cnZDO3zwQ4cjyoY1ZwNHvZbXSvXRYxpjhXidZhvaPurjgLRSB0xGaFgoemmOp1ufsx/w6fQOGA6Q==}
@@ -6350,7 +6344,7 @@ packages:
     peerDependencies:
       '@remix-run/react': ^2
       '@sveltejs/kit': ^1 || ^2
-      next: 16.1.2
+      next: 16.1.3
       react: 19.2.3
       svelte: '>= 4'
       vue: ^3
@@ -6410,7 +6404,7 @@ packages:
     resolution: {integrity: sha512-y9GVzrUJ2xmgtQlzFP2KhVRoCglwfRQgjyfY607aU0hh0Un6d0OUyrJkjuAlsV18qR4zfoFPs/BiIj9YDS6Wzw==}
     peerDependencies:
       '@sveltejs/kit': ^1 || ^2
-      next: 16.1.2
+      next: 16.1.3
       react: 19.2.3
       svelte: '>= 4'
       vue: ^3
@@ -6927,10 +6921,6 @@ packages:
   array-flatten@1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 
-  array-includes@3.1.8:
-    resolution: {integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==}
-    engines: {node: '>= 0.4'}
-
   array-includes@3.1.9:
     resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
     engines: {node: '>= 0.4'}
@@ -8315,10 +8305,6 @@ packages:
   error-stack-parser@2.1.4:
     resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
 
-  es-abstract@1.23.9:
-    resolution: {integrity: sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==}
-    engines: {node: '>= 0.4'}
-
   es-abstract@1.24.1:
     resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
     engines: {node: '>= 0.4'}
@@ -8404,8 +8390,8 @@ packages:
     engines: {node: '>=6.0'}
     hasBin: true
 
-  eslint-config-next@16.1.2:
-    resolution: {integrity: sha512-y97rpFfUsaXdXlQc2FMl/yqRc5yfVVKtKRcv+7LeyBrKh83INFegJuZBE28dc9Chp4iKXwmjaW4sHHx/mgyDyA==}
+  eslint-config-next@16.1.3:
+    resolution: {integrity: sha512-q2Z87VSsoJcv+vgR+Dm8NPRf+rErXcRktuBR5y3umo/j5zLjIWH7rqBCh3X804gUGKbOrqbgsLUkqDE35C93Gw==}
     peerDependencies:
       eslint: ^9
       typescript: ^5
@@ -9189,10 +9175,6 @@ packages:
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
-  hast@1.0.0:
-    resolution: {integrity: sha512-vFUqlRV5C+xqP76Wwq2SrM0kipnmpxJm7OfvVXpB35Fp+Fn4MV+ozr+JZr5qFvyR1q/U+Foim2x+3P+x9S1PLA==}
-    deprecated: Renamed to rehype
-
   hastscript@9.0.1:
     resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
 
@@ -10691,8 +10673,8 @@ packages:
       react: 19.2.3
       react-dom: 19.2.3
 
-  next@16.1.2:
-    resolution: {integrity: sha512-SVSWX7wjUUDrIDVqhl4xm/jiOrvYGMG7NzVE/dGzzgs7r3dFGm4V19ia0xn3GDNtHCKM7C9h+5BoimnJBhmt9A==}
+  next@16.1.3:
+    resolution: {integrity: sha512-gthG3TRD+E3/mA0uDQb9lqBmx1zVosq5kIwxNN6+MRNd085GzD+9VXMPUs+GGZCbZ+GDZdODUq4Pm7CTXK6ipw==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
@@ -17411,46 +17393,46 @@ snapshots:
       promise-worker-transferable: 1.0.4
       three: 0.170.0
 
-  '@next/env@16.1.2': {}
+  '@next/env@16.1.3': {}
 
-  '@next/eslint-plugin-next@16.1.2':
+  '@next/eslint-plugin-next@16.1.3':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/mdx@16.1.2(@mdx-js/loader@3.1.0(acorn@8.15.0)(webpack@5.98.0(esbuild@0.25.4)))(@mdx-js/react@3.1.0(@types/react@19.1.3)(react@19.2.3))':
+  '@next/mdx@16.1.3(@mdx-js/loader@3.1.0(acorn@8.15.0)(webpack@5.98.0(esbuild@0.25.4)))(@mdx-js/react@3.1.0(@types/react@19.1.3)(react@19.2.3))':
     dependencies:
       source-map: 0.7.4
     optionalDependencies:
       '@mdx-js/loader': 3.1.0(acorn@8.15.0)(webpack@5.98.0(esbuild@0.25.4))
       '@mdx-js/react': 3.1.0(@types/react@19.1.3)(react@19.2.3)
 
-  '@next/swc-darwin-arm64@16.1.2':
+  '@next/swc-darwin-arm64@16.1.3':
     optional: true
 
-  '@next/swc-darwin-x64@16.1.2':
+  '@next/swc-darwin-x64@16.1.3':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.1.2':
+  '@next/swc-linux-arm64-gnu@16.1.3':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.1.2':
+  '@next/swc-linux-arm64-musl@16.1.3':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.1.2':
+  '@next/swc-linux-x64-gnu@16.1.3':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.1.2':
+  '@next/swc-linux-x64-musl@16.1.3':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.1.2':
+  '@next/swc-win32-arm64-msvc@16.1.3':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.1.2':
+  '@next/swc-win32-x64-msvc@16.1.3':
     optional: true
 
-  '@next/third-parties@16.1.2(next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)':
+  '@next/third-parties@16.1.3(next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)':
     dependencies:
-      next: 16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
       third-party-capital: 1.0.20
 
@@ -18947,7 +18929,7 @@ snapshots:
 
   '@sentry/core@10.34.0': {}
 
-  '@sentry/nextjs@10.34.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(webpack@5.98.0(esbuild@0.25.4))':
+  '@sentry/nextjs@10.34.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(webpack@5.98.0(esbuild@0.25.4))':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/semantic-conventions': 1.38.0
@@ -18960,7 +18942,7 @@ snapshots:
       '@sentry/react': 10.34.0(react@19.2.3)
       '@sentry/vercel-edge': 10.34.0
       '@sentry/webpack-plugin': 4.6.1(encoding@0.1.13)(webpack@5.98.0(esbuild@0.25.4))
-      next: 16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       rollup: 4.53.5
       stacktrace-parser: 0.1.11
     transitivePeerDependencies:
@@ -20299,9 +20281,9 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.3
 
-  '@vercel/analytics@1.5.0(next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(svelte@4.2.19)(vue@3.5.13(typescript@5.8.3))':
+  '@vercel/analytics@1.5.0(next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(svelte@4.2.19)(vue@3.5.13(typescript@5.8.3))':
     optionalDependencies:
-      next: 16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
       svelte: 4.2.19
       vue: 3.5.13(typescript@5.8.3)
@@ -20322,9 +20304,9 @@ snapshots:
     dependencies:
       zod: 4.2.1
 
-  '@vercel/speed-insights@1.2.0(next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(svelte@4.2.19)(vue@3.5.13(typescript@5.8.3))':
+  '@vercel/speed-insights@1.2.0(next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(svelte@4.2.19)(vue@3.5.13(typescript@5.8.3))':
     optionalDependencies:
-      next: 16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
       svelte: 4.2.19
       vue: 3.5.13(typescript@5.8.3)
@@ -21109,15 +21091,6 @@ snapshots:
 
   array-flatten@1.1.1: {}
 
-  array-includes@3.1.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.23.9
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      is-string: 1.1.1
-
   array-includes@3.1.9:
     dependencies:
       call-bind: 1.0.8
@@ -21135,7 +21108,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       es-shim-unscopables: 1.1.0
@@ -21145,7 +21118,7 @@ snapshots:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       es-shim-unscopables: 1.1.0
@@ -21154,21 +21127,21 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-shim-unscopables: 1.1.0
 
   array.prototype.flatmap@1.3.3:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-shim-unscopables: 1.1.0
 
   array.prototype.tosorted@1.1.4:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-shim-unscopables: 1.1.0
 
@@ -21177,7 +21150,7 @@ snapshots:
       array-buffer-byte-length: 1.0.2
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       is-array-buffer: 3.0.5
@@ -22647,60 +22620,6 @@ snapshots:
     dependencies:
       stackframe: 1.3.4
 
-  es-abstract@1.23.9:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      arraybuffer.prototype.slice: 1.0.4
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      data-view-buffer: 1.0.2
-      data-view-byte-length: 1.0.2
-      data-view-byte-offset: 1.0.1
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-set-tostringtag: 2.1.0
-      es-to-primitive: 1.3.0
-      function.prototype.name: 1.1.8
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      get-symbol-description: 1.1.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      internal-slot: 1.1.0
-      is-array-buffer: 3.0.5
-      is-callable: 1.2.7
-      is-data-view: 1.0.2
-      is-regex: 1.2.1
-      is-shared-array-buffer: 1.0.4
-      is-string: 1.1.1
-      is-typed-array: 1.1.15
-      is-weakref: 1.1.1
-      math-intrinsics: 1.1.0
-      object-inspect: 1.13.4
-      object-keys: 1.1.1
-      object.assign: 4.1.7
-      own-keys: 1.0.1
-      regexp.prototype.flags: 1.5.4
-      safe-array-concat: 1.1.3
-      safe-push-apply: 1.0.0
-      safe-regex-test: 1.1.0
-      set-proto: 1.0.0
-      string.prototype.trim: 1.2.10
-      string.prototype.trimend: 1.0.9
-      string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.3
-      typed-array-byte-length: 1.0.3
-      typed-array-byte-offset: 1.0.4
-      typed-array-length: 1.0.7
-      unbox-primitive: 1.1.0
-      which-typed-array: 1.1.18
-
   es-abstract@1.24.1:
     dependencies:
       array-buffer-byte-length: 1.0.2
@@ -22779,7 +22698,7 @@ snapshots:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-set-tostringtag: 2.1.0
       function-bind: 1.1.2
@@ -22910,9 +22829,9 @@ snapshots:
       source-map: 0.6.1
     optional: true
 
-  eslint-config-next@16.1.2(@typescript-eslint/parser@8.53.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
+  eslint-config-next@16.1.3(@typescript-eslint/parser@8.53.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
     dependencies:
-      '@next/eslint-plugin-next': 16.1.2
+      '@next/eslint-plugin-next': 16.1.3
       eslint: 9.27.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.8.0(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2))
@@ -22930,9 +22849,9 @@ snapshots:
       - eslint-plugin-import-x
       - supports-color
 
-  eslint-config-next@16.1.2(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
+  eslint-config-next@16.1.3(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3):
     dependencies:
-      '@next/eslint-plugin-next': 16.1.2
+      '@next/eslint-plugin-next': 16.1.3
       eslint: 9.27.0(jiti@2.4.2)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.8.0(eslint-plugin-import@2.32.0)(eslint@9.27.0(jiti@2.4.2))
@@ -22961,7 +22880,7 @@ snapshots:
   eslint-import-resolver-typescript@3.8.0(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.27.0(jiti@2.4.2)))(eslint@9.27.0(jiti@2.4.2)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.1
+      debug: 4.4.3
       enhanced-resolve: 5.18.1
       eslint: 9.27.0(jiti@2.4.2)
       get-tsconfig: 4.10.0
@@ -22976,7 +22895,7 @@ snapshots:
   eslint-import-resolver-typescript@3.8.0(eslint-plugin-import@2.32.0)(eslint@9.27.0(jiti@2.4.2)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.1
+      debug: 4.4.3
       enhanced-resolve: 5.18.1
       eslint: 9.27.0(jiti@2.4.2)
       get-tsconfig: 4.10.0
@@ -23068,7 +22987,7 @@ snapshots:
   eslint-plugin-jsx-a11y@6.10.2(eslint@9.27.0(jiti@2.4.2)):
     dependencies:
       aria-query: 5.3.2
-      array-includes: 3.1.8
+      array-includes: 3.1.9
       array.prototype.flatmap: 1.3.3
       ast-types-flow: 0.0.8
       axe-core: 4.10.2
@@ -23097,7 +23016,7 @@ snapshots:
 
   eslint-plugin-react@7.37.4(eslint@9.27.0(jiti@2.4.2)):
     dependencies:
-      array-includes: 3.1.8
+      array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
       array.prototype.flatmap: 1.3.3
       array.prototype.tosorted: 1.1.4
@@ -24032,8 +23951,6 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
-  hast@1.0.0: {}
-
   hastscript@9.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -24533,7 +24450,7 @@ snapshots:
 
   is-typed-array@1.1.15:
     dependencies:
-      which-typed-array: 1.1.18
+      which-typed-array: 1.1.20
 
   is-typedarray@1.0.0: {}
 
@@ -24721,7 +24638,7 @@ snapshots:
 
   jsx-ast-utils@3.3.5:
     dependencies:
-      array-includes: 3.1.8
+      array-includes: 3.1.9
       array.prototype.flat: 1.3.3
       object.assign: 4.1.7
       object.values: 1.2.1
@@ -25844,9 +25761,9 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  next@16.1.2(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  next@16.1.3(@babel/core@7.27.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@next/env': 16.1.2
+      '@next/env': 16.1.3
       '@swc/helpers': 0.5.15
       baseline-browser-mapping: 2.9.14
       caniuse-lite: 1.0.30001717
@@ -25855,14 +25772,14 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       styled-jsx: 5.1.6(@babel/core@7.27.4)(react@19.2.3)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.1.2
-      '@next/swc-darwin-x64': 16.1.2
-      '@next/swc-linux-arm64-gnu': 16.1.2
-      '@next/swc-linux-arm64-musl': 16.1.2
-      '@next/swc-linux-x64-gnu': 16.1.2
-      '@next/swc-linux-x64-musl': 16.1.2
-      '@next/swc-win32-arm64-msvc': 16.1.2
-      '@next/swc-win32-x64-msvc': 16.1.2
+      '@next/swc-darwin-arm64': 16.1.3
+      '@next/swc-darwin-x64': 16.1.3
+      '@next/swc-linux-arm64-gnu': 16.1.3
+      '@next/swc-linux-arm64-musl': 16.1.3
+      '@next/swc-linux-x64-gnu': 16.1.3
+      '@next/swc-linux-x64-musl': 16.1.3
+      '@next/swc-win32-arm64-msvc': 16.1.3
+      '@next/swc-win32-x64-msvc': 16.1.3
       '@opentelemetry/api': 1.9.0
       '@playwright/test': 1.52.0
       sharp: 0.34.5
@@ -25975,14 +25892,14 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-object-atoms: 1.1.1
 
   object.groupby@1.0.3:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
 
   object.values@1.2.1:
     dependencies:
@@ -27557,7 +27474,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
@@ -28465,14 +28382,14 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
 
   string.prototype.matchall@4.0.12:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
@@ -28486,7 +28403,7 @@ snapshots:
   string.prototype.repeat@1.0.0:
     dependencies:
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
 
   string.prototype.trim@1.2.10:
     dependencies:
@@ -28494,7 +28411,7 @@ snapshots:
       call-bound: 1.0.4
       define-data-property: 1.1.4
       define-properties: 1.2.1
-      es-abstract: 1.23.9
+      es-abstract: 1.24.1
       es-object-atoms: 1.1.1
       has-property-descriptors: 1.0.2
 
@@ -29644,7 +29561,7 @@ snapshots:
       isarray: 2.0.5
       which-boxed-primitive: 1.1.1
       which-collection: 1.0.2
-      which-typed-array: 1.1.18
+      which-typed-array: 1.1.20
 
   which-collection@1.0.2:
     dependencies: