@gigamusic/admin 0.1.0

package/README.md

@@ -0,0 +1,18 @@
+# @gigamusic/admin
+
+Source-shipped React admin for the gigamusic platform: releases CRUD,
+settings, links, link-pages, and orders view — plus per-route handler
+factories the consumer wires into `/api/admin/*`.
+
+```ts
+// app/admin/page.tsx (consumer)
+export { AdminHomePage as default } from "@gigamusic/admin";
+
+// app/api/admin/auth/route.ts (consumer)
+import { createAdminLoginHandler } from "@gigamusic/admin/server";
+export const POST = createAdminLoginHandler({ adminPasswordHash, adminSessionSecret });
+```
+
+Every page is auth-gated by the shared admin session cookie. Override a slot
+via the standard `<GigamusicProvider components={{ Button: MyButton }}>` from
+`@gigamusic/ui`, or replace a page wholesale by simply not mounting it.

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@gigamusic/admin",
+  "version": "0.1.0",
+  "description": "Admin UI (releases CRUD, tracks, settings, links, link-pages, orders) and admin API handler factories for the gigamusic platform. Fully replaceable by the consumer — mount the pages directly or override individual slots.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gigamesh/gigamusic.git",
+    "directory": "packages/admin"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./client": {
+      "types": "./src/client.ts",
+      "default": "./src/client.ts"
+    },
+    "./server": {
+      "types": "./src/server.ts",
+      "default": "./src/server.ts"
+    }
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "zod": "^3.24.1",
+    "@gigamusic/email": "0.1.0",
+    "@gigamusic/config": "0.1.0",
+    "@gigamusic/storage": "0.1.0",
+    "@gigamusic/core": "0.1.0",
+    "@gigamusic/audio": "0.1.0",
+    "@gigamusic/db": "0.1.0",
+    "@gigamusic/ui": "0.1.0"
+  },
+  "peerDependencies": {
+    "next": ">=15",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^25.0.1",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.3",
+    "vitest": "^2.1.8"
+  },
+  "scripts": {
+    "lint": "eslint src",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf .turbo *.tsbuildinfo"
+  }
+}

package/src/client.ts

@@ -0,0 +1,18 @@
+"use client";
+
+// Client-only re-exports — every consumer-side page component lives here so
+// importing them from a server-component context never accidentally pulls in
+// server-only modules.
+
+export { AdminHomePage } from "./pages/AdminHomePage";
+export { AdminLoginPage } from "./pages/AdminLoginPage";
+export { AdminReleasesPage } from "./pages/AdminReleasesPage";
+export { AdminNewReleasePage } from "./pages/AdminNewReleasePage";
+export { AdminEditReleasePage } from "./pages/AdminEditReleasePage";
+export { AdminLinksPage } from "./pages/AdminLinksPage";
+export { AdminSettingsPage } from "./pages/AdminSettingsPage";
+export { AdminOrdersPage } from "./pages/AdminOrdersPage";
+export { ReleaseForm } from "./components/ReleaseForm";
+export type { ReleaseFormProps } from "./components/ReleaseForm";
+export { AdminLoginForm } from "./components/AdminLoginForm";
+export { AdminNav } from "./components/AdminNav";

package/src/components/AdminLoginForm.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useSlot } from "@gigamusic/ui/client";
+
+/** Block off-site redirects via the `?next=` param. */
+function safeNext(value: string | null): string | null {
+  if (!value) return null;
+  if (!value.startsWith("/")) return null;
+  if (value.startsWith("//") || value.startsWith("/\\")) return null;
+  return value;
+}
+
+export function AdminLoginForm() {
+  const Button = useSlot("Button");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const next = safeNext(searchParams.get("next"));
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    const res = await fetch("/api/admin/auth", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ password }),
+    });
+    if (res.ok) {
+      if (next) router.push(next);
+      else router.refresh();
+    } else {
+      setError("Invalid password");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="gm-admin-login space-y-4">
+      <div className="space-y-2">
+        <label htmlFor="password" className="text-sm font-medium">
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          className="block w-full rounded border border-border bg-background px-3 py-2 text-sm"
+        />
+      </div>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+      <Button type="submit" className="w-full" disabled={loading}>
+        {loading ? "Logging in..." : "Log In"}
+      </Button>
+    </form>
+  );
+}

package/src/components/AdminNav.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+interface NavLink {
+  href: string;
+  label: string;
+  exact?: boolean;
+}
+
+const DEFAULT_LINKS: NavLink[] = [
+  { href: "/admin", label: "Releases", exact: true },
+  { href: "/admin/orders", label: "Orders" },
+  { href: "/admin/links", label: "Links" },
+  { href: "/admin/settings", label: "Settings" },
+];
+
+/**
+ * Horizontal admin nav. Consumers can extend the link set by overriding the
+ * `Navigation` slot if they need additional sections; the default set covers
+ * everything this package ships.
+ */
+export function AdminNav({ extraLinks }: { extraLinks?: NavLink[] }) {
+  const pathname = usePathname();
+  const links = [...DEFAULT_LINKS, ...(extraLinks ?? [])];
+
+  return (
+    <nav className="gm-admin-nav flex items-center gap-4 overflow-x-auto border-b border-border pb-4 mb-6">
+      {links.map(({ href, label, exact }) => {
+        const active = exact
+          ? pathname === href
+          : pathname === href || pathname.startsWith(`${href}/`);
+        return (
+          <Link
+            key={href}
+            href={href}
+            className={
+              active
+                ? "text-sm font-semibold whitespace-nowrap"
+                : "text-sm text-muted-foreground hover:underline whitespace-nowrap"
+            }
+          >
+            {label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}