markupr 2.1.8

package/SIGNING_INSTRUCTIONS.md

@@ -0,0 +1,284 @@
+# Code Signing & Notarization Guide for markupr
+
+This guide explains how to set up Apple code signing and notarization for distributing markupr.
+
+## Why Code Signing Matters
+
+Without code signing, macOS Gatekeeper will:
+- Block the app from opening
+- Show scary "unidentified developer" warnings
+- Require users to go through Security settings to allow the app
+
+With code signing AND notarization:
+- App opens without warnings
+- Users feel confident installing your app
+- Apple has verified the app is free of malware
+
+---
+
+## Prerequisites
+
+1. **Apple Developer Account** ($99/year)
+   - Sign up at https://developer.apple.com
+   - Required for distribution outside the Mac App Store
+
+2. **Xcode Command Line Tools**
+   ```bash
+   xcode-select --install
+   ```
+
+---
+
+## Step 1: Create Certificates
+
+### Via Xcode (Recommended)
+
+1. Open Xcode > Preferences > Accounts
+2. Select your Apple ID > Manage Certificates
+3. Click `+` and create:
+   - "Developer ID Application" certificate
+
+### Via Apple Developer Portal
+
+1. Go to https://developer.apple.com/account/resources/certificates
+2. Click `+` to create a new certificate
+3. Select "Developer ID Application"
+4. Follow the CSR (Certificate Signing Request) instructions
+5. Download and double-click to install in Keychain
+
+### Verify Installation
+
+```bash
+security find-identity -v -p codesigning
+```
+
+You should see your "Developer ID Application: Your Name (TEAM_ID)" certificate.
+
+---
+
+## Step 2: Create App-Specific Password
+
+Apple requires an app-specific password for notarization (not your regular Apple ID password).
+
+1. Go to https://appleid.apple.com
+2. Sign in with your Apple ID
+3. Navigate to "App-Specific Passwords"
+4. Click "Generate Password"
+5. Name it "markupr Notarization"
+6. **Save this password securely** - you'll need it for builds
+
+---
+
+## Step 3: Find Your Team ID
+
+Your Team ID is a 10-character alphanumeric code.
+
+### Method 1: Xcode
+Open Xcode > Preferences > Accounts > Select your team > View the Team ID
+
+### Method 2: Developer Portal
+Go to https://developer.apple.com/account > Membership > Team ID
+
+### Method 3: Command Line
+```bash
+security find-identity -v -p codesigning | grep "Developer ID"
+# Output: ... "Developer ID Application: Your Name (ABCD1234XY)"
+# Your Team ID is the part in parentheses: ABCD1234XY
+```
+
+---
+
+## Step 4: Set Environment Variables
+
+### For Local Development
+
+Add to your shell profile (`~/.zshrc` or `~/.bashrc`):
+
+```bash
+# markupr Code Signing
+export APPLE_ID="your.email@example.com"
+export APPLE_APP_SPECIFIC_PASSWORD="xxxx-xxxx-xxxx-xxxx"
+export APPLE_TEAM_ID="ABCD1234XY"
+```
+
+Then reload:
+```bash
+source ~/.zshrc
+```
+
+### For CI/CD (GitHub Actions)
+
+Add these as repository secrets:
+- `APPLE_ID`
+- `APPLE_APP_SPECIFIC_PASSWORD`
+- `APPLE_TEAM_ID`
+- `CSC_LINK` (base64-encoded .p12 certificate)
+- `CSC_KEY_PASSWORD` (certificate password)
+
+---
+
+## Step 5: Export Certificate for CI
+
+To sign in CI, you need to export your certificate as a base64-encoded .p12 file.
+
+### Export from Keychain
+
+1. Open Keychain Access
+2. Find your "Developer ID Application" certificate
+3. Right-click > Export
+4. Save as `.p12` format
+5. Set a strong password (this becomes `CSC_KEY_PASSWORD`)
+
+### Convert to Base64
+
+```bash
+base64 -i Certificates.p12 -o certificate-base64.txt
+```
+
+The contents of `certificate-base64.txt` is your `CSC_LINK` secret.
+
+---
+
+## Step 6: Build & Sign
+
+### Local Build
+
+```bash
+# Build the app
+npm run build
+
+# Package for macOS (will sign and notarize)
+npm run package:mac
+```
+
+### Build Without Signing (for testing)
+
+```bash
+# Skip signing
+CSC_IDENTITY_AUTO_DISCOVERY=false npm run package:mac
+```
+
+---
+
+## Troubleshooting
+
+### "No identity found for signing"
+
+Your certificate isn't installed or recognized:
+```bash
+# Check installed certificates
+security find-identity -v -p codesigning
+
+# If empty, reinstall your certificate from Keychain
+```
+
+### "Notarization failed: invalid credentials"
+
+1. Regenerate your app-specific password
+2. Verify APPLE_ID matches your developer account email exactly
+3. Check APPLE_TEAM_ID is correct
+
+### "The signature is invalid"
+
+The app was modified after signing:
+```bash
+# Verify signature
+codesign --verify --deep --strict /path/to/markupr.app
+
+# Re-sign if needed
+codesign --deep --force --verify --verbose --sign "Developer ID Application: Your Name" /path/to/markupr.app
+```
+
+### "This app is damaged"
+
+Gatekeeper quarantine issue:
+```bash
+# Remove quarantine attribute
+xattr -cr /Applications/markupr.app
+```
+
+### Notarization timeout
+
+Apple's servers can be slow. The process typically takes 2-10 minutes but can take longer. The script will wait automatically.
+
+---
+
+## GitHub Actions CI Setup
+
+Add this to your workflow:
+
+```yaml
+jobs:
+  build-mac:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Package & Sign
+        env:
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          CSC_LINK: ${{ secrets.CSC_LINK }}
+          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+        run: npm run package:mac
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: markupr-mac
+          path: release/*.dmg
+```
+
+---
+
+## Environment Variables Reference
+
+| Variable | Description | Example |
+|----------|-------------|---------|
+| `APPLE_ID` | Apple Developer account email | `dev@example.com` |
+| `APPLE_APP_SPECIFIC_PASSWORD` | App-specific password from appleid.apple.com | `xxxx-xxxx-xxxx-xxxx` |
+| `APPLE_TEAM_ID` | 10-char Apple Team ID | `ABCD1234XY` |
+| `CSC_LINK` | Base64-encoded .p12 certificate | (long string) |
+| `CSC_KEY_PASSWORD` | Password for .p12 certificate | (your password) |
+
+---
+
+## Quick Reference Commands
+
+```bash
+# Build and package
+npm run build && npm run package:mac
+
+# Release (builds, signs, notarizes, publishes to GitHub)
+npm run release
+
+# Check what will be included in the package
+npx electron-builder --mac --dir
+
+# Verify signature
+codesign --verify --deep --strict "release/mac/markupr.app"
+
+# Check notarization status
+xcrun stapler validate "release/markupr-0.2.0.dmg"
+```
+
+---
+
+## Security Notes
+
+- **Never commit** certificates, passwords, or keys to git
+- Use environment variables or CI secrets only
+- Rotate app-specific passwords periodically
+- Keep your .p12 certificate file secure and backed up

package/assets/DMG_BACKGROUND_INSTRUCTIONS.md

@@ -0,0 +1,130 @@
+# DMG Background Image Instructions
+
+Create a professional DMG background for markupr installation.
+
+## Specifications
+
+| Property | Value |
+|----------|-------|
+| **Dimensions** | 540 x 400 pixels |
+| **Format** | PNG |
+| **Filename** | `dmg-background.png` |
+| **Location** | `assets/dmg-background.png` |
+
+## Design Guidelines
+
+### Background
+- Use a gradient matching the app theme
+- Primary color: `#0f172a` (slate-900)
+- Secondary color: `#1e293b` (slate-800)
+- Gradient direction: top-left to bottom-right
+
+### Layout
+The DMG window has two drop zones:
+- **App icon** at position (130, 220) - left side
+- **Applications folder** at position (410, 220) - right side
+
+### Visual Elements
+
+1. **Arrow Indicator**
+   - Subtle arrow pointing from left (app) to right (Applications)
+   - Color: `#38bdf8` (sky-400) with 50% opacity
+   - Positioned between the two icons at y=220
+
+2. **Install Text** (optional)
+   - "Drag to Applications to install"
+   - Font: SF Pro Display or system font
+   - Color: `#94a3b8` (slate-400)
+   - Position: centered, below the arrow (y~280)
+
+3. **App Branding** (optional)
+   - Small markupr logo in top-left corner
+   - Very subtle, ~40px height
+
+### Color Palette
+
+```
+Background gradient:
+  Start: #0f172a (slate-900)
+  End:   #1e293b (slate-800)
+
+Accent:
+  Primary: #38bdf8 (sky-400)
+
+Text:
+  Muted: #94a3b8 (slate-400)
+  Light: #e2e8f0 (slate-200)
+```
+
+## Creating the Background
+
+### Option 1: Figma/Sketch
+1. Create a 540x400 artboard
+2. Apply background gradient
+3. Add arrow and optional text
+4. Export as PNG
+
+### Option 2: Command Line (Simple Gradient Only)
+```bash
+# Using ImageMagick
+convert -size 540x400 gradient:'#0f172a'-'#1e293b' assets/dmg-background.png
+```
+
+### Option 3: Online Tools
+- Canva (free tier works)
+- Figma (free tier works)
+- Photopea (free Photoshop alternative)
+
+## Icon Requirements
+
+### Application Icon (`icon.icns`)
+- Required sizes: 16, 32, 64, 128, 256, 512, 1024 pixels
+- Format: .icns (macOS icon format)
+- Location: `assets/icon.icns`
+
+To create from PNG:
+```bash
+# Create iconset directory
+mkdir icon.iconset
+
+# Create all required sizes (starting from 1024x1024 source)
+sips -z 16 16     icon-1024.png --out icon.iconset/icon_16x16.png
+sips -z 32 32     icon-1024.png --out icon.iconset/icon_16x16@2x.png
+sips -z 32 32     icon-1024.png --out icon.iconset/icon_32x32.png
+sips -z 64 64     icon-1024.png --out icon.iconset/icon_32x32@2x.png
+sips -z 128 128   icon-1024.png --out icon.iconset/icon_128x128.png
+sips -z 256 256   icon-1024.png --out icon.iconset/icon_128x128@2x.png
+sips -z 256 256   icon-1024.png --out icon.iconset/icon_256x256.png
+sips -z 512 512   icon-1024.png --out icon.iconset/icon_256x256@2x.png
+sips -z 512 512   icon-1024.png --out icon.iconset/icon_512x512.png
+sips -z 1024 1024 icon-1024.png --out icon.iconset/icon_512x512@2x.png
+
+# Convert to icns
+iconutil -c icns icon.iconset -o assets/icon.icns
+```
+
+### DMG Icon (`dmg-icon.icns`)
+- Same process as above
+- Can be the same as app icon or a variation
+- Location: `assets/dmg-icon.icns`
+
+## File Checklist
+
+Before building, ensure these files exist:
+
+```
+assets/
+├── dmg-background.png    (540x400 PNG)
+├── icon.icns             (macOS app icon)
+└── dmg-icon.icns         (DMG volume icon)
+```
+
+## Quick Placeholder
+
+For testing, create a simple placeholder:
+```bash
+# Solid color placeholder (just for testing builds)
+convert -size 540x400 xc:'#0f172a' assets/dmg-background.png
+```
+
+The build will work with a simple background - polish it before release.

package/assets/svg-source/dmg-background.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="660" height="400" viewBox="0 0 660 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Background gradient -->
+    <linearGradient id="dmgBgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1E1E2E"/>
+      <stop offset="50%" style="stop-color:#2D2D44"/>
+      <stop offset="100%" style="stop-color:#1E1E2E"/>
+    </linearGradient>
+
+    <!-- Accent gradient -->
+    <linearGradient id="dmgAccent" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#6366F1" stop-opacity="0.3"/>
+      <stop offset="50%" style="stop-color:#8B5CF6" stop-opacity="0.5"/>
+      <stop offset="100%" style="stop-color:#EC4899" stop-opacity="0.3"/>
+    </linearGradient>
+
+    <!-- Glow filter -->
+    <filter id="dmgGlow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="20" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+  </defs>
+
+  <!-- Background -->
+  <rect width="660" height="400" fill="url(#dmgBgGrad)"/>
+
+  <!-- Subtle grid pattern -->
+  <g opacity="0.05">
+    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="1"/>
+    </pattern>
+    <rect width="660" height="400" fill="url(#grid)"/>
+  </g>
+
+  <!-- Accent glow orbs -->
+  <circle cx="165" cy="180" r="120" fill="url(#dmgAccent)" filter="url(#dmgGlow)" opacity="0.4"/>
+  <circle cx="495" cy="180" r="120" fill="url(#dmgAccent)" filter="url(#dmgGlow)" opacity="0.4"/>
+
+  <!-- App icon placeholder area (left side) -->
+  <g transform="translate(105, 110)">
+    <rect width="120" height="120" rx="27" fill="#6366F1" opacity="0.2" stroke="#6366F1" stroke-width="2" stroke-dasharray="8 4"/>
+    <text x="60" y="150" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" fill="#94A3B8">markupr</text>
+  </g>
+
+  <!-- Arrow indicating drag direction -->
+  <g transform="translate(280, 155)">
+    <!-- Arrow body -->
+    <rect x="0" y="20" width="100" height="10" rx="5" fill="white" opacity="0.3"/>
+    <!-- Arrow head -->
+    <polygon points="100,25 130,25 115,5" fill="white" opacity="0.4"/>
+    <polygon points="100,25 130,25 115,45" fill="white" opacity="0.4"/>
+  </g>
+
+  <!-- Applications folder placeholder (right side) -->
+  <g transform="translate(435, 110)">
+    <rect width="120" height="120" rx="27" fill="#64748B" opacity="0.2" stroke="#64748B" stroke-width="2" stroke-dasharray="8 4"/>
+    <!-- Folder icon hint -->
+    <path d="M45 50 L45 90 L95 90 L95 55 L70 55 L65 50 Z" fill="#64748B" opacity="0.3"/>
+    <text x="60" y="150" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" fill="#94A3B8">Applications</text>
+  </g>
+
+  <!-- Install instruction text -->
+  <text x="330" y="320" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#F8FAFC" opacity="0.8">
+    Drag to install
+  </text>
+
+  <!-- Subtle brand line -->
+  <rect x="200" y="360" width="260" height="3" rx="1.5" fill="url(#dmgAccent)" opacity="0.6"/>
+</svg>

package/assets/svg-source/icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="128" y1="96" x2="896" y2="928" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFFFFF"/>
+      <stop offset="1" stop-color="#EEF1F4"/>
+    </linearGradient>
+    <linearGradient id="glass" x1="512" y1="128" x2="512" y2="896" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.68"/>
+      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+
+  <rect x="96" y="96" width="832" height="832" rx="220" fill="url(#bg)"/>
+  <rect x="96" y="96" width="832" height="832" rx="220" stroke="#D7DCE2" stroke-width="18"/>
+  <rect x="132" y="132" width="760" height="360" rx="184" fill="url(#glass)"/>
+
+  <path d="M292 714V314L512 524L732 314V714" stroke="#111827" stroke-width="74" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="732" cy="714" r="36" fill="#111827"/>
+</svg>

package/assets/svg-source/tray-icon-processing.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="3" width="16" height="16" rx="4" stroke="black" stroke-width="1.6" fill="none"/>
+  <path d="M7 15V8L11 12L15 8V15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="15" cy="15" r="1.2" fill="black"/>
+  <circle cx="18" cy="4" r="2.5" stroke="black" stroke-width="1.3" fill="none" stroke-dasharray="7 5" stroke-linecap="round"/>
+</svg>

package/assets/svg-source/tray-icon-recording.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="3" width="16" height="16" rx="4" stroke="black" stroke-width="1.6" fill="none"/>
+  <path d="M7 15V8L11 12L15 8V15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="15" cy="15" r="1.2" fill="black"/>
+  <circle cx="18" cy="4" r="2.5" fill="#FF3B30"/>
+</svg>

package/assets/svg-source/tray-icon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="3" width="16" height="16" rx="4" stroke="black" stroke-width="1.6" fill="none"/>
+  <path d="M7 15V8L11 12L15 8V15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="15" cy="15" r="1.2" fill="black"/>
+</svg>