@arbidocs/blocks 0.3.116 → 0.3.117

package/dist/index.cjs

@@ -604,7 +604,25 @@ function ConnectionProvider({
           await arbi.selectWorkspace(target.external_id);
           setWorkspaceId(target.external_id);
         }
-        setUser({ name: email.split("@")[0], email });
+        let resolved = { name: email.split("@")[0], email };
+        try {
+          const me = arbi.user.identity();
+          const members = await arbi.workspaces.listUsers();
+          const self = members.find((m) => m.user.external_id === me?.externalId)?.user;
+          if (self) {
+            const fullName = [self.given_name, self.family_name].filter(Boolean).join(" ").trim();
+            resolved = {
+              name: fullName || email.split("@")[0],
+              email: self.email || email,
+              externalId: self.external_id,
+              picture: self.picture ?? null
+            };
+          } else if (me?.externalId) {
+            resolved.externalId = me.externalId;
+          }
+        } catch {
+        }
+        setUser(resolved);
         setStatus("authenticated");
       } catch (e) {
         setError(e instanceof Error ? e.message : "Sign-in failed. Check your credentials.");
@@ -2450,6 +2468,74 @@ function AppShell({
     }
   );
 }
+function AppHeader({
+  onSearch,
+  onAsk,
+  searchPlaceholder = "Ask AI or search\u2026",
+  searchKbd = "\u2318K",
+  askLabel = "Ask AI",
+  leading,
+  actions,
+  user,
+  userItems,
+  onLogout,
+  onNotificationNavigate,
+  notificationTones,
+  classNames,
+  testIdPrefix = "app"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onSearch,
+        className: classNames?.search ?? "relative hidden max-w-md flex-1 items-center rounded-md border border-input bg-background py-2 pl-9 pr-3 text-left text-sm text-muted-foreground transition-colors hover:bg-accent md:flex",
+        "data-testid": tid(testIdPrefix, "global-search"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: searchPlaceholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-[10px]", children: searchKbd })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-3", children: [
+      leading,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        react.Button,
+        {
+          size: "sm",
+          onClick: onAsk ?? onSearch,
+          className: classNames?.askButton,
+          "data-testid": tid(testIdPrefix, "ask-ai"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }),
+            askLabel
+          ]
+        }
+      ),
+      actions,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.NotificationBell,
+        {
+          testId: tid(testIdPrefix, "notifications"),
+          onNavigate: onNotificationNavigate,
+          toneClassNames: notificationTones
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.UserMenu,
+        {
+          user,
+          items: userItems,
+          onLogout,
+          testId: tid(testIdPrefix, "user-menu"),
+          logoutTestId: tid(testIdPrefix, "logout")
+        }
+      )
+    ] })
+  ] });
+}
 var LiveDataContext = react$1.createContext(false);
 function useLiveDataActive() {
   return react$1.useContext(LiveDataContext);
@@ -3219,6 +3305,9 @@ function useImageGen() {
     reset: task.reset
   };
 }
+function toJpgName(name) {
+  return name.replace(/\.[^.]+$/, "") + ".jpg";
+}
 var IMAGE_EXT = /\.(png|jpe?g|webp|gif|avif|svg)$/i;
 function ImageFieldControl({
   value,
@@ -3232,9 +3321,12 @@ function ImageFieldControl({
   const [url, setUrl] = react$1.useState("");
   const [prompt, setPrompt] = react$1.useState("");
   const [busy, setBusy] = react$1.useState(false);
+  const [cropSrc, setCropSrc] = react$1.useState(null);
+  const [cropName, setCropName] = react$1.useState("image.jpg");
   const arbi = react.useArbi();
   const gen = useImageGen();
   const queryClient = reactQuery.useQueryClient();
+  const currentAssetImage = useAssetImage(isAssetRef(value) ? assetRefId(value) : "");
   const tp = (...q) => tid(`${testIdPrefix}-image`, name, ...q);
   const refreshAssets = () => queryClient.invalidateQueries({ queryKey: ["arbi", "documents", workspaceId] });
   const { data: docs } = react.useDocuments(workspaceId);
@@ -3249,13 +3341,24 @@ function ImageFieldControl({
     [imageDocs]
   );
   const { data: thumbs } = react.useThumbnails(imageIds);
-  const onUpload = async (e) => {
+  const onUpload = (e) => {
     const file = e.target.files?.[0];
     if (!file) return;
+    setCropName(toJpgName(file.name));
+    setCropSrc(URL.createObjectURL(file));
+    e.target.value = "";
+  };
+  const openReframe = () => {
+    if (!currentAssetImage) return;
+    setCropName("reframe.jpg");
+    setCropSrc(currentAssetImage);
+  };
+  const uploadBlobAsAsset = async (blob, name2) => {
     setBusy(true);
     try {
       await arbi.selectWorkspace(workspaceId);
-      const res = await arbi.documents.uploadFile(file, file.name, { folder });
+      const file = new File([blob], name2, { type: blob.type });
+      const res = await arbi.documents.uploadFile(file, name2, { folder });
       const id = res.doc_ext_ids?.[0];
       if (id) {
         onChange(asAssetRef(id));
@@ -3265,6 +3368,12 @@ function ImageFieldControl({
       setBusy(false);
     }
   };
+  const onCropComplete = async (result) => {
+    const src = cropSrc;
+    setCropSrc(null);
+    await uploadBlobAsAsset(result.blob, cropName);
+    if (src?.startsWith("blob:")) URL.revokeObjectURL(src);
+  };
   const onGenerate = async () => {
     if (!prompt.trim() || gen.isGenerating) return;
     const id = await gen.generate(prompt);
@@ -3282,7 +3391,22 @@ function ImageFieldControl({
   const inputClass = "w-full rounded-md border border-border bg-card px-2.5 py-1.5 text-sm text-foreground outline-none focus:border-primary";
   const tabClass = (on) => `inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium ${on ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", "data-testid": tp(), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(BlockImage, { src: value, aspect: "16:9", rounded: "md", testId: tp("preview") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BlockImage, { src: value, aspect: "16:9", rounded: "md", testId: tp("preview") }),
+      currentAssetImage ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: openReframe,
+          className: "absolute right-1.5 top-1.5 inline-flex items-center gap-1 rounded-md bg-background/85 px-2 py-1 text-xs font-medium text-foreground shadow-sm backdrop-blur hover:bg-background",
+          "data-testid": tp("reframe"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crop, { className: "size-3" }),
+            " Crop"
+          ]
+        }
+      ) : null
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: MODES.map((m) => /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -3399,6 +3523,19 @@ function ImageFieldControl({
         "data-testid": tp("clear"),
         children: "Clear"
       }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.ImageCropModal,
+      {
+        open: !!cropSrc,
+        image: cropSrc,
+        title: "Frame your image",
+        aspectOptions: react.DEFAULT_ASPECT_OPTIONS,
+        cropShape: "rect",
+        output: { maxSize: 1600 },
+        onComplete: onCropComplete,
+        onCancel: () => setCropSrc(null)
+      }
     )
   ] });
 }
@@ -5490,6 +5627,7 @@ Object.defineProperty(exports, "toRedlineMarkdown", {
 exports.ASSET_REF_PREFIX = ASSET_REF_PREFIX;
 exports.Accordion = Accordion;
 exports.AgentsPanel = AgentsPanel;
+exports.AppHeader = AppHeader;
 exports.AppShell = AppShell;
 exports.AssetResolverProvider = AssetResolverProvider;
 exports.AvatarBlock = AvatarBlock;