@behindthemusictree/app-kit-ui 0.0.0-stage → 26.1.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026, Andreas Garcia
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -1,3 +1,47 @@
-# Temporary Holding Version
+# app-kit-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`@behindthemusictree/app-kit-ui` — the styled BehindTheMusicTree components (popups, OAuth callback
+screen, genre tree) built on the headless `@behindthemusictree/app-kit`. Install it to get the
+BTMT look; skip it and compose your own UI on app-kit's hooks to get a different one.
+
+## Subpaths
+
+```tsx
+import { BasePopup, AuthPopup, NetworkErrorPopup, TrackUploadPopup } from "@behindthemusictree/app-kit-ui/popup";
+import { AuthCallbackHandler } from "@behindthemusictree/app-kit-ui/auth";
+import { GenreTreeView, TrackListSidebar, TrackItem, Rating } from "@behindthemusictree/app-kit-ui/genre-tree";
+import "@behindthemusictree/app-kit-ui/genre-tree/styles.css";
+```
+
+## Peers
+
+`@behindthemusictree/app-kit` (one copy only, so the Session/Player/Popup contexts are shared),
+`@behindthemusictree/ui`, `@tanstack/react-query`, `next`, `react`, `react-dom`. Tailwind must
+scan `node_modules/@behindthemusictree/app-kit-ui/dist/**`.
+
+## Theme contract
+
+Colors come from CSS variables, defined by `@behindthemusictree/brand` (`tokens/theme.css`) or by
+your own stylesheet:
+
+| Token | Used for |
+| --- | --- |
+| `--color-primary`, `--color-primary-hover` | Primary actions |
+| `--color-text` | Body text |
+| `--color-neutral-100` … `--color-neutral-700` (100, 200, 300, 500, 600, 700) | Surfaces, borders, muted text |
+| `--color-red-500`, `--color-red-600`, `--color-red-700` | Errors |
+| `--color-green-500` | Playing state |
+| `--color-blue-500` | Links and highlights |
+
+Third-party brand colors (Spotify, Google) stay literal.
+
+`PlayerPanel` also reads the layout tokens `--layout-gutter`, `--layout-band-top`, `--layout-right-w` and `--layout-detail-panel-w` from the same stylesheet.
+
+`GenreTreeView` with `placement="regions"` sets `--layout-left-w` to `0px` on the document while its info panel is hidden, so the stylesheet can widen the center column.
+
+## Extension points
+
+- `GenreTreeView` takes `className` on its root (no outer margin by default) and
+  `showDisplayOptions` (default `true`) to hide the "Tree display options" group.
+- Render props (`renderArtistLink`, `renderSummary`, `renderTracksToolbar`, …) replace pieces of
+  the genre detail panel.

package/dist/auth/index.cjs

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/auth/index.ts
+var auth_exports = {};
+__export(auth_exports, {
+  AuthCallbackHandler: () => AuthCallbackHandler
+});
+module.exports = __toCommonJS(auth_exports);
+
+// src/auth/AuthCallbackHandler.tsx
+var import_auth = require("@behindthemusictree/app-kit/auth");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AuthCallbackHandler({ renderStatus, ...options }) {
+  const state = (0, import_auth.useAuthCallback)(options);
+  if (state.status === null) return null;
+  if (renderStatus) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderStatus(state) });
+  if (state.status === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--color-neutral-100)] p-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full max-w-md rounded-lg border border-[color-mix(in_srgb,var(--color-red-500)_20%,transparent)] bg-[color-mix(in_srgb,var(--color-red-500)_10%,transparent)] p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "mb-2 font-semibold text-[var(--color-red-500)]", children: "Authentication Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[color-mix(in_srgb,var(--color-red-500)_80%,transparent)]", children: state.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: state.goHome,
+          className: "mt-4 rounded bg-[var(--color-red-600)] px-4 py-2 text-white hover:bg-[var(--color-red-700)]",
+          children: "Go to home"
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--color-neutral-100)]", "data-page": "auth-callback-handler", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "mb-4 text-2xl font-bold", children: "Connecting\u2026" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[var(--color-neutral-600)]", children: "Completing sign-in." })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthCallbackHandler
+});
+//# sourceMappingURL=index.cjs.map

package/dist/auth/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/auth/index.ts","../../src/auth/AuthCallbackHandler.tsx"],"sourcesContent":["export { default as AuthCallbackHandler } from \"./AuthCallbackHandler\";\nexport type { AuthCallbackHandlerProps } from \"./AuthCallbackHandler\";\n","\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { useAuthCallback, type AuthCallbackState, type UseAuthCallbackOptions } from \"@behindthemusictree/app-kit/auth\";\n\nexport interface AuthCallbackHandlerProps extends UseAuthCallbackOptions {\n  /** Optional custom \"connecting…\" / error UI; defaults to a minimal full-screen overlay. */\n  renderStatus?: (state: Exclude<AuthCallbackState, { status: null }>) => ReactNode;\n}\n\n/** Handles OAuth callbacks at layout level. Rendered in the app shell so it runs on every load. */\nexport default function AuthCallbackHandler({ renderStatus, ...options }: AuthCallbackHandlerProps) {\n  const state = useAuthCallback(options);\n\n  if (state.status === null) return null;\n\n  if (renderStatus) return <>{renderStatus(state)}</>;\n\n  if (state.status === \"error\") {\n    return (\n      <div className=\"fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--color-neutral-100)] p-4\">\n        <div className=\"w-full max-w-md rounded-lg border border-[color-mix(in_srgb,var(--color-red-500)_20%,transparent)] bg-[color-mix(in_srgb,var(--color-red-500)_10%,transparent)] p-4\">\n          <h2 className=\"mb-2 font-semibold text-[var(--color-red-500)]\">Authentication Error</h2>\n          <p className=\"text-[color-mix(in_srgb,var(--color-red-500)_80%,transparent)]\">{state.message}</p>\n          <button\n            type=\"button\"\n            onClick={state.goHome}\n            className=\"mt-4 rounded bg-[var(--color-red-600)] px-4 py-2 text-white hover:bg-[var(--color-red-700)]\"\n          >\n            Go to home\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--color-neutral-100)]\" data-page=\"auth-callback-handler\">\n      <div className=\"text-center\">\n        <h1 className=\"mb-4 text-2xl font-bold\">Connecting…</h1>\n        <p className=\"text-[var(--color-neutral-600)]\">Completing sign-in.</p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGA,kBAAqF;AAa1D;AALZ,SAAR,oBAAqC,EAAE,cAAc,GAAG,QAAQ,GAA6B;AAClG,QAAM,YAAQ,6BAAgB,OAAO;AAErC,MAAI,MAAM,WAAW,KAAM,QAAO;AAElC,MAAI,aAAc,QAAO,2EAAG,uBAAa,KAAK,GAAE;AAEhD,MAAI,MAAM,WAAW,SAAS;AAC5B,WACE,4CAAC,SAAI,WAAU,qGACb,uDAAC,SAAI,WAAU,uKACb;AAAA,kDAAC,QAAG,WAAU,kDAAiD,kCAAoB;AAAA,MACnF,4CAAC,OAAE,WAAU,kEAAkE,gBAAM,SAAQ;AAAA,MAC7F;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM;AAAA,UACf,WAAU;AAAA,UACX;AAAA;AAAA,MAED;AAAA,OACF,GACF;AAAA,EAEJ;AAEA,SACE,4CAAC,SAAI,WAAU,iGAAgG,aAAU,yBACvH,uDAAC,SAAI,WAAU,eACb;AAAA,gDAAC,QAAG,WAAU,2BAA0B,8BAAW;AAAA,IACnD,4CAAC,OAAE,WAAU,mCAAkC,iCAAmB;AAAA,KACpE,GACF;AAEJ;","names":[]}

package/dist/auth/index.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { UseAuthCallbackOptions, AuthCallbackState } from '@behindthemusictree/app-kit/auth';
+
+interface AuthCallbackHandlerProps extends UseAuthCallbackOptions {
+    /** Optional custom "connecting…" / error UI; defaults to a minimal full-screen overlay. */
+    renderStatus?: (state: Exclude<AuthCallbackState, {
+        status: null;
+    }>) => ReactNode;
+}
+/** Handles OAuth callbacks at layout level. Rendered in the app shell so it runs on every load. */
+declare function AuthCallbackHandler({ renderStatus, ...options }: AuthCallbackHandlerProps): react.JSX.Element | null;
+
+export { AuthCallbackHandler, type AuthCallbackHandlerProps };

package/dist/auth/index.js

@@ -0,0 +1,7 @@
+import {
+  AuthCallbackHandler
+} from "../chunk-MMJCB3CJ.js";
+export {
+  AuthCallbackHandler
+};
+//# sourceMappingURL=index.js.map

package/dist/auth/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}