drops-mcp 0.1.0

package/README.md

@@ -0,0 +1,40 @@
+# drops-mcp
+
+**Open-source artifact sharing — publish HTML/Markdown/files as branded, password-protected,
+zero-knowledge links on your own domain, from any AI agent.** CLI + MCP server. The open-source,
+self-hosted [Stacktree](https://stacktr.ee) alternative.
+
+→ Site & docs: **[drops.maxtechera.dev](https://drops.maxtechera.dev)** · Source: [github.com/maxtechera/drops-share](https://github.com/maxtechera/drops-share)
+
+## Install
+
+```bash
+npx drops-install            # wire the MCP into Claude Code / Codex / Cursor / OpenCode
+# or one-line installer:
+curl -fsSL https://drops.maxtechera.dev/install.sh | sh
+```
+
+## Use
+
+```bash
+drop report.html --managed   # zero-setup: publish to the managed tier (no account, auto-expires 24h)
+drop report.html             # your own domain (after `drop init` + `drop setup`)
+drop notes.md                # markdown → branded HTML
+drop site.zip                # multi-file static site
+drop list | rm <slug> | gc   # manage drops
+```
+
+## MCP
+
+```bash
+claude mcp add drops -- npx -y drops-mcp
+```
+
+Tools: `publish_html`, `publish_file`, `update_site`, `list_sites`, `delete_site`.
+
+## How it works
+
+Branding + AES-256 encryption happen **client-side** (StatiCrypt) before upload to Vercel Blob; an
+edge proxy serves it from your domain with the right headers. The server only ever stores ciphertext.
+
+MIT © [Max Techera](https://maxtechera.dev)

package/SETUP.md

@@ -0,0 +1,83 @@
+# drop — backend setup (stand up your own deployment)
+
+`drop` serves from **your** domain via a Vercel Blob store behind this repo's edge proxy. Do this
+once; afterwards every machine just needs `drop setup` (the token) — the backend is shared.
+
+## What you're building
+
+- A **Vercel project** deploying this repo (`index.html` landing + `middleware.js` edge proxy + `vercel.json`).
+- A **Vercel Blob store** that holds the uploaded drops.
+- A **domain** (e.g. `drops.yoursite.com`) pointed at the project.
+- A **token** (`BLOB_READ_WRITE_TOKEN`) the CLI uses to upload/list/delete.
+
+## Steps
+
+```bash
+# 0. clone + deploy this repo to Vercel
+git clone https://github.com/maxtechera/drops-share && cd drops-share
+vercel link --yes                     # creates .vercel/project.json (note the projectId + orgId)
+
+# 1. add a Blob store named "drops" and pull its token
+vercel blob store add drops           # link to this project, all environments
+vercel env pull .env.local --environment=production    # contains BLOB_READ_WRITE_TOKEN
+
+# 2. discover your PUBLIC blob host: do one upload and read the returned URL's host.
+#    e.g. https://<id>.public.blob.vercel-storage.com  →  host = <id>.public.blob.vercel-storage.com
+#    middleware.js reads BLOB host from the BLOB constant — set it there (and vercel.json fallback rewrite).
+
+# 3. deploy + attach your domain
+vercel deploy --prod --yes
+vercel domains add drops.yoursite.com
+
+# 4. point the skill at this deployment
+node skill/drop.mjs init \
+  --domain drops.yoursite.com \
+  --blob-host <id>.public.blob.vercel-storage.com \
+  --project prj_xxx --org team_xxx        # projectId/orgId from .vercel/project.json
+
+# 5. give the skill the token (or run `vercel login` and let setup pull it)
+node skill/drop.mjs setup --token "$(grep BLOB_READ_WRITE_TOKEN .env.local | cut -d= -f2- | tr -d '\"')"
+```
+
+## Wiring the blob host
+
+`drop` itself doesn't need the blob host (the SDK returns blob URLs), but the **serving side** does.
+Set your host in two places so encrypted HTML renders correctly:
+
+**`middleware.js`** — the edge proxy that fixes Blob's `Content-Disposition: attachment` + CSP:
+
+```js
+const BLOB = "https://<id>.public.blob.vercel-storage.com";
+```
+
+**`vercel.json`** — the fallback rewrite:
+
+```json
+{
+  "rewrites": [
+    { "source": "/", "destination": "/index.html" },
+    { "source": "/(.*)", "destination": "https://<id>.public.blob.vercel-storage.com/$1" }
+  ]
+}
+```
+
+Why both: `vercel.json` routes requests to the blob, and `middleware.js` rewrites the response
+headers so password-protected HTML **decrypts and renders in-browser** instead of downloading, and so
+CSP doesn't block StatiCrypt's unlock script. Serving is otherwise a dumb transparent proxy — all
+branding/encryption happens at upload time in `drop.mjs`.
+
+## Branding
+
+Edit `skill/brand/brand.json` (name, colors, owner, social links) and replace
+`skill/brand/logo-white.png` + `skill/brand/favicon.png`. These flow into the unlock gate, the corner
+badge, download pages, and link-preview cards automatically.
+
+## New machine (after the backend exists)
+
+```bash
+git clone https://github.com/maxtechera/drops-share && cd drops-share
+node skill/drop.mjs setup     # installs deps + writes ~/.drop/.env (pulls token from Vercel if logged in)
+```
+
+`drop list`/`rm` read the store directly, so they work from any machine; passwords are kept locally in
+`~/.drop/manifest.json`.

package/SKILL.md

@@ -0,0 +1,93 @@
+---
+name: drop
+description: "Publish/share an artifact (HTML, Markdown, PDF, file, or whole site) as a private, branded, password-protected link on your own domain. Use when the user says 'publish this', 'share this page', 'drop this', 'send them a link', or whenever you've generated an HTML artifact they'll want to open in a browser. Zero-knowledge AES-256, ~1s. Zero-setup via --managed; self-host on your own domain via 'drop init'."
+user-invocable: true
+---
+
+# drop
+
+Open-source artifact sharing on **your own domain**. Drop a file → it's branded, optionally
+password-locked (AES-256, client-side), and live at a clean URL in ~1 second. No git, no
+deploy-per-file — it's object storage (Vercel Blob) behind a one-line edge proxy.
+
+## When to use
+
+Reach for `drop` when the user asks to **publish / share / host / send** something, or whenever
+you've generated an HTML page (report, dashboard, mockup, doc) they'll want to view in a browser.
+Pipe the artifact to `drop` and hand back the URL (and password, if locked).
+
+## Two ways to run
+
+- **Zero-setup (managed):** `drop file.html --managed` — no token, no Vercel. Publishes to the
+  managed tier (HTML/markdown, auto-expires in 24h). Easiest start.
+- **Your own domain:** `drop init` once (BYO Vercel Blob + domain, see `SETUP.md`), then `drop file.html`.
+
+## Default posture
+
+Locked by default (AES-256, client-side — the server only stores ciphertext). Every drop is served
+`noindex` so leaked URLs never get indexed. Use a long password for anything sensitive.
+
+## Usage
+
+```bash
+drop report.html               # brand + lock (auto password) + upload → https://<domain>/report-a1b2
+drop notes.md                  # markdown → rendered, branded HTML page
+drop report.html -p secret     # use your own password
+drop report.html --no-lock     # branded, no password (renders for anyone with the link)
+drop report.html --expire 7d   # auto-expire (7d/24h/2w/date); enforce deletion with `drop gc`
+drop bundle.zip                # raw file, unguessable URL → /bundle-x7f2k9.zip
+drop file.pdf --page           # generate a branded download page wrapping the file
+drop file.pdf --page -p secret # password-protect that download page
+drop -s q3-deck deck.html      # force the slug → /q3-deck
+drop list                      # list live drops + their passwords
+drop rm q3-deck                # delete a drop
+drop gc                        # delete drops whose --expire has passed (cron-friendly)
+```
+
+**MCP server:** `node skill/mcp.mjs` exposes `publish_html`, `publish_file`, `update_site`,
+`list_sites`, `delete_site` over stdio. Wire it into agents with `node skill/install.mjs`.
+
+The URL (and password, if locked) is printed and **copied to the clipboard**.
+
+## How it works (per file)
+
+1. **HTML** → inject branded `<head>` (favicon + OG/Twitter card so pasted links show a branded
+   preview) + a **subtle corner badge** before `</body>`.
+2. If locking: run **StatiCrypt** (AES-256, client-side) with the branded unlock gate. The badge is
+   baked into the content *before* encryption, so it survives decryption.
+3. Upload to **Vercel Blob** under a clean key; served via `middleware.js` on the configured domain
+   (rewrites Blob headers so encrypted HTML renders instead of downloading).
+
+## Configuration
+
+- **Branding** → `brand/brand.json` (name, colors, owner, social links) + swap `brand/logo-white.png`
+  and `brand/favicon.png`. Applied automatically to gate, badge, download pages, and link cards.
+- **Infra** → `~/.drop/config.json` (domain, blob host, Vercel project/org), written by `drop init`.
+- **Token** → `~/.drop/.env` → `BLOB_READ_WRITE_TOKEN`, written by `drop setup`.
+- **Env overrides** → `DROP_DOMAIN`, `DROP_BLOB_HOST`.
+
+## Setup (your own deployment)
+
+```bash
+drop init --domain drops.yoursite.com \
+  --blob-host <id>.public.blob.vercel-storage.com --project prj_xxx --org team_xxx
+drop setup --token vercel_blob_rw_...   # or: vercel login, then `drop setup`
+```
+
+`drop setup` auto-installs `@vercel/blob` and verifies the store. See `SETUP.md` to stand up the
+Vercel Blob store + domain rewrite first. The backend is shared — set up once, then `drop list`/`rm`
+work from any machine; passwords stay local in `~/.drop/manifest.json`.
+
+## Security notes
+
+- **Locked HTML** is genuinely AES-256 encrypted client-side — strong against casual access. The
+  encrypted blob is downloadable, so use long passwords for anything sensitive (it's not a vault).
+- **Raw files** are **not** encrypted — protection is the unguessable random slug. For real
+  protection on a file, use `--page -p <pw>` (gated page).
+- The password manifest at `~/.drop/manifest.json` is plaintext on this machine only.
+
+## Requirements
+
+- `node` ≥ 18, `npx` (StatiCrypt is pulled on demand); `vercel` CLI for `drop setup` token pull
+- `@vercel/blob` — auto-installed on first run (gitignored, not committed)
+- Clipboard helper (optional): `pbcopy` (mac), `clip`/`clip.exe` (windows/WSL), `xclip`/`wl-copy` (linux)

package/brand/badge.html

@@ -0,0 +1,15 @@
+<!-- drop: subtle corner badge (injected before </body>) -->
+<a id="drop-badge" href="https://__DROP_DOMAIN__" target="_blank" rel="noopener noreferrer"
+   style="position:fixed;right:14px;bottom:14px;z-index:2147483646;display:flex;align-items:center;gap:7px;
+          padding:7px 12px 7px 9px;border-radius:999px;text-decoration:none;
+          font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
+          font-size:12px;font-weight:600;line-height:1;color:#fff;
+          background:rgba(20,20,22,0.62);border:1px solid rgba(255,255,255,0.14);
+          box-shadow:0 6px 22px -8px rgba(0,0,0,0.55);
+          -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
+          transition:transform .12s ease,background .12s ease;"
+   onmouseover="this.style.transform='translateY(-1px)';this.style.background='rgba(20,20,22,0.78)'"
+   onmouseout="this.style.transform='none';this.style.background='rgba(20,20,22,0.62)'">
+  <img src="__DROP_LOGO__" alt="" style="height:15px;width:auto;display:block;" />
+  <span style="opacity:.78;">__DROP_DOMAIN__</span>
+</a>

package/brand/brand.json

@@ -0,0 +1,13 @@
+{
+  "name": "drops",
+  "owner": "Max Techera",
+  "domain": "drops.maxtechera.dev",
+  "tagline": "Share anything. Branded. On your own domain.",
+  "primaryColor": "#ff6b35",
+  "accentColor": "#ea580c",
+  "links": {
+    "website": "https://maxtechera.dev",
+    "github": "https://github.com/maxtechera",
+    "instagram": "https://instagram.com/maxtechera"
+  }
+}

package/brand/download-page.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>__DROP_TITLE__</title>
+    __DROP_META__
+    <style>
+        :root {
+            --drop-primary: #ff6b35;
+            --drop-accent: #ea580c;
+        }
+        * { box-sizing: border-box; }
+        html, body { height: 100%; margin: 0; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            -webkit-font-smoothing: antialiased;
+            color: #f5f5f5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 24px;
+            background:
+                radial-gradient(1200px 600px at 50% -10%, rgba(255, 107, 53, 0.22), transparent 60%),
+                radial-gradient(900px 500px at 90% 110%, rgba(234, 88, 12, 0.16), transparent 60%),
+                #0b0b0d;
+        }
+        .card {
+            width: 100%;
+            max-width: 440px;
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 36px 32px 30px;
+            text-align: center;
+            backdrop-filter: blur(18px) saturate(160%);
+            -webkit-backdrop-filter: blur(18px) saturate(160%);
+            box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.7), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
+        }
+        .logo { height: 38px; margin-bottom: 24px; opacity: 0.95; }
+        h1 {
+            font-size: 1.35em;
+            font-weight: 650;
+            letter-spacing: -0.01em;
+            margin: 0 0 6px;
+            word-break: break-word;
+        }
+        .sub { color: rgba(245, 245, 245, 0.55); font-size: 0.9em; margin: 0 0 26px; }
+        .file {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            text-align: left;
+            background: rgba(0, 0, 0, 0.28);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 13px;
+            padding: 14px 16px;
+            margin-bottom: 20px;
+        }
+        .file .ico {
+            flex: 0 0 auto;
+            width: 40px; height: 40px;
+            border-radius: 10px;
+            display: flex; align-items: center; justify-content: center;
+            background: linear-gradient(135deg, var(--drop-primary), var(--drop-accent));
+            font-size: 18px;
+        }
+        .file .meta { min-width: 0; }
+        .file .name { font-weight: 600; font-size: 0.95em; overflow-wrap: anywhere; }
+        .file .size { color: rgba(245, 245, 245, 0.5); font-size: 0.82em; margin-top: 2px; }
+        .btn {
+            display: block;
+            width: 100%;
+            background: linear-gradient(135deg, var(--drop-primary), var(--drop-accent));
+            color: #fff;
+            text-decoration: none;
+            text-align: center;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            font-weight: 650;
+            font-size: 14px;
+            padding: 15px;
+            border-radius: 12px;
+            transition: filter 0.15s ease, transform 0.05s ease;
+        }
+        .btn:hover { filter: brightness(108%); }
+        .btn:active { transform: translateY(1px); }
+        .footer { margin: 22px 0 0; font-size: 0.78em; color: rgba(245, 245, 245, 0.4); }
+        .footer a { color: rgba(255, 107, 53, 0.85); text-decoration: none; }
+    </style>
+</head>
+<body>
+    <div class="card">
+        <img class="logo" src="__DROP_LOGO__" alt="logo" />
+        <h1>__DROP_TITLE__</h1>
+        <p class="sub">__DROP_SUBTITLE__</p>
+        <div class="file">
+            <div class="ico">↓</div>
+            <div class="meta">
+                <div class="name">__DROP_FILE_NAME__</div>
+                <div class="size">__DROP_FILE_SIZE__</div>
+            </div>
+        </div>
+        <a class="btn" href="__DROP_FILE_URL__" download>Download</a>
+        <p class="footer">Shared via <a href="https://__DROP_DOMAIN__">__DROP_DOMAIN__</a><br />
+          <span style="opacity:.8;">made by <a href="__DROP_WEBSITE__">__DROP_OWNER__</a> · <a href="__DROP_GITHUB__">github</a> · <a href="__DROP_INSTAGRAM__">instagram</a></span>
+        </p>
+    </div>
+</body>
+</html>