feat: update project name to 'image-studio' and enhance document title in App component

bun.lock

@@ -3,7 +3,7 @@
   "configVersion": 1,
   "workspaces": {
     "": {
-      "name": "bun-react-template",
+      "name": "image-studio",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "@radix-ui/react-slot": "^1.2.3",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "bun-react-template",
+  "name": "image-studio",
   "version": "0.1.0",
   "private": true,
   "type": "module",

view/App.tsx

@@ -36,6 +36,10 @@ export function App({ app }: AppProps) {
   const chromaKeyOpen = workspace.panel === "chromaKey";
   const layersOpen = workspace.panel === "layers";
 
+  useEffect(() => {
+    window.document.title = `${document.name} — Image Studio`;
+  }, [document.name]);
+
   useEffect(() => {
     if (generateOpen) void app.workflows.generation.loadResources();
   }, [app.workflows.generation, generateOpen]);
@@ -157,7 +161,11 @@ export function App({ app }: AppProps) {
         closeLayers={closeLayers}
         documentActions={app.actions.document}
       />
-      <header className="pointer-events-none absolute inset-x-3 top-3 z-10 flex h-20 items-center justify-end gap-4 rounded-full px-4 text-white backdrop-blur-xl">
+      <header className="pointer-events-none absolute inset-x-3 top-3 z-10 flex h-20 items-center justify-between gap-4 rounded-full px-4 text-white backdrop-blur-xl">
+        <div className="min-w-0 pl-2">
+          <p className="text-[0.65rem] font-semibold uppercase tracking-[0.22em] text-white/45">Image Studio</p>
+          <h1 className="truncate text-sm font-semibold text-white/90" title={document.name}>{document.name}</h1>
+        </div>
         <div className="pointer-events-auto flex items-center gap-2">
           <button type="button" className="rounded-full border-0 bg-transparent p-0" onClick={openGenerate} aria-label="Open generation activity" title="Open generation activity">
             <GenerationJobStatus generation={generation} compact />