feat: add advanced editor tools to Office App

- Added text alignment buttons (Left, Center, Right, Justify) with inline SVGs.
- Added font family (Inter, JetBrains Mono, Georgia, Arial, Times New Roman), size (10px - 48px), and text color picker selectors.
- Bound fontName, fontSize, and foreColor execCommands to the corresponding input controls.

Author: nepvibes

public/system-manifest.json

@@ -190,8 +190,8 @@
   {
     "path": "/system/apps/office/app.js",
     "type": "file",
-    "size": 15037,
-    "mtime": 1779447299714.5737
+    "size": 18486,
+    "mtime": 1779447539534.429
   },
   {
     "path": "/system/apps/office/app.json",

public/system/apps/office/app.js

@@ -47,11 +47,40 @@ export async function launch(ctx, options = {}) {
         <button class="toolbar-btn" data-cmd="underline"><u>U</u></button>
       </div>
       <div style="width: 1px; height: 24px; background: #333; margin: 0 8px;"></div>
-      <select class="toolbar-select">
-        <option>Inter</option>
-        <option>JetBrains Mono</option>
-        <option>Georgia</option>
-      </select>
+      <div style="display: flex; gap: 4px;">
+        <button class="toolbar-btn" data-cmd="justifyLeft" title="Align Left">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
+        </button>
+        <button class="toolbar-btn" data-cmd="justifyCenter" title="Align Center">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>
+        </button>
+        <button class="toolbar-btn" data-cmd="justifyRight" title="Align Right">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line></svg>
+        </button>
+        <button class="toolbar-btn" data-cmd="justifyFull" title="Justify">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>
+        </button>
+      </div>
+      <div style="width: 1px; height: 24px; background: #333; margin: 0 8px;"></div>
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <select class="toolbar-select" id="office-font" title="Font Family" style="width: 120px;">
+          <option value="Inter">Inter</option>
+          <option value="JetBrains Mono">JetBrains Mono</option>
+          <option value="Georgia">Georgia</option>
+          <option value="Arial">Arial</option>
+          <option value="Times New Roman">Times New Roman</option>
+        </select>
+        <select class="toolbar-select" id="office-size" title="Font Size" style="width: 70px;">
+          <option value="1">10px</option>
+          <option value="2">13px</option>
+          <option value="3" selected>16px</option>
+          <option value="4">18px</option>
+          <option value="5">24px</option>
+          <option value="6">32px</option>
+          <option value="7">48px</option>
+        </select>
+        <input type="color" id="office-color" style="width: 24px; height: 24px; border: 1px solid #333; padding: 0; background: transparent; cursor: pointer; border-radius: 4px;" title="Text Color" value="#eeeeee">
+      </div>
     </div>
     
     <div class="office-editor-viewport" style="flex: 1; overflow-y: auto; padding: 40px 0; background: #050505; perspective: 1000px;">
@@ -322,6 +351,29 @@ export async function launch(ctx, options = {}) {
     }
   };
 
+  // Wire up font family, size and color
+  const fontSelect = content.querySelector('#office-font');
+  const sizeSelect = content.querySelector('#office-size');
+  const colorPicker = content.querySelector('#office-color');
+
+  if (fontSelect) {
+    fontSelect.onchange = () => {
+      document.execCommand('fontName', false, fontSelect.value);
+    };
+  }
+
+  if (sizeSelect) {
+    sizeSelect.onchange = () => {
+      document.execCommand('fontSize', false, sizeSelect.value);
+    };
+  }
+
+  if (colorPicker) {
+    colorPicker.oninput = () => {
+      document.execCommand('foreColor', false, colorPicker.value);
+    };
+  }
+
   if (options.path) {
     loadFile(options.path);
   }