hazo_auth 10.4.13 → 10.5.0

package/dist/client.d.ts

@@ -12,6 +12,8 @@ export * from "./components/layouts/shared/utils/validation.js";
 export { requestGoogleScopes } from "./lib/auth/request_google_scopes.js";
 export { PermissionDeniedDialog } from "./components/permission_denied_dialog.client.js";
 export type { PermissionDeniedDialogProps, PermissionDeniedDetails } from "./components/permission_denied_dialog.client";
+export { UserPickerSelect, UserAvatar, userDisplayName } from "./components/user_picker_select.js";
+export type { UserPickerSelectProps, UserAvatarProps, PickableUser, } from "./components/user_picker_select";
 export { AuthIssueCard, registerAuthIssueCardRenderer } from './admin-issues/plugin.client.js';
 export { PermissionDeniedProvider, showPermissionDeniedDialog, handlePermissionDenied, fetchWithPermissionCapture, } from './admin-issues/permission_denied_provider.client.js';
 export type { PermissionDeniedProviderProps } from './admin-issues/permission_denied_provider.client';

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAYA,cAAc,oBAAoB,CAAC;AAInC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAInI,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIpD,cAAc,uBAAuB,CAAC;AAItC,OAAO,EAAE,eAAe,EAAE,2BAA2B,EAAE,MAAM,mDAAmD,CAAC;AACjH,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AAC3G,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,qDAAqD,CAAC;AACnH,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAGvI,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAIxG,cAAc,8CAA8C,CAAC;AAG7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,YAAY,EAAE,2BAA2B,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAGzH,OAAO,EAAE,aAAa,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAG5F,OAAO,EACL,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,GAC3B,MAAM,kDAAkD,CAAC;AAC1D,YAAY,EAAE,6BAA6B,EAAE,MAAM,kDAAkD,CAAC"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAYA,cAAc,oBAAoB,CAAC;AAInC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAInI,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIpD,cAAc,uBAAuB,CAAC;AAItC,OAAO,EAAE,eAAe,EAAE,2BAA2B,EAAE,MAAM,mDAAmD,CAAC;AACjH,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AAC3G,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,qDAAqD,CAAC;AACnH,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAGvI,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAIxG,cAAc,8CAA8C,CAAC;AAG7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,YAAY,EAAE,2BAA2B,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAKzH,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAChG,YAAY,EACV,qBAAqB,EACrB,eAAe,EACf,YAAY,GACb,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAAE,aAAa,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAG5F,OAAO,EACL,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,GAC3B,MAAM,kDAAkD,CAAC;AAC1D,YAAY,EAAE,6BAA6B,EAAE,MAAM,kDAAkD,CAAC"}

package/dist/client.js

@@ -33,6 +33,10 @@ export * from "./components/layouts/shared/utils/validation.js";
 export { requestGoogleScopes } from "./lib/auth/request_google_scopes.js";
 // section: permission_denied_dialog_exports
 export { PermissionDeniedDialog } from "./components/permission_denied_dialog.client.js";
+// section: user_picker_exports
+// Reusable avatar + username dropdown for choosing a user (issue owner,
+// assignee, mention, etc.). Data-agnostic — caller supplies the candidate list.
+export { UserPickerSelect, UserAvatar, userDisplayName } from "./components/user_picker_select.js";
 // admin-issues plugin (client card renderer)
 export { AuthIssueCard, registerAuthIssueCardRenderer } from './admin-issues/plugin.client.js';
 // permission-denied provider + fetch helper

package/dist/components/user_picker_select.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+export interface PickableUser {
+    /** Stable id — the value the picker commits. */
+    user_id: string;
+    /** Display name; falls back to email, then the id. */
+    name?: string | null;
+    email?: string | null;
+    /** Profile picture URL; absent/failed → tinted initials. */
+    profile_picture_url?: string | null;
+}
+export interface UserPickerSelectProps {
+    /** Candidate users to choose from. */
+    users: PickableUser[];
+    /** Selected user_id; null (or "") means unassigned. */
+    value: string | null;
+    /** Fired with the new user_id, or null when the unassigned row is picked. */
+    onChange: (userId: string | null) => void;
+    /** Prepend an "Unassigned" row. Default true. */
+    includeUnassigned?: boolean;
+    /** Label for the unassigned row. Default "Unassigned". */
+    unassignedLabel?: string;
+    /** Placeholder shown when nothing is selected. Default "Select user". */
+    placeholder?: string;
+    disabled?: boolean;
+    /** Control + avatar sizing. Default "default". */
+    size?: "sm" | "default";
+    /** Extra classes for the trigger. */
+    className?: string;
+    /**
+     * Classes for the portalled dropdown panel. The list renders in a body-level
+     * portal, so it escapes any theme tokens scoped to an ancestor — pass classes
+     * here when the surrounding surface pins its own tokens.
+     */
+    contentClassName?: string;
+    /** Inline styles for the portalled dropdown panel (e.g. pinned CSS token vars). */
+    contentStyle?: React.CSSProperties;
+    "aria-label"?: string;
+}
+/** name → email → id, so a row is never blank. */
+export declare function userDisplayName(u: PickableUser): string;
+export interface UserAvatarProps {
+    user?: PickableUser | null;
+    size?: "sm" | "default";
+    className?: string;
+}
+/**
+ * Standalone avatar: the profile picture when present, else tinted initials,
+ * else a muted person glyph for the empty/unassigned slot. Exported so callers
+ * can reuse the exact same avatar outside the picker (cards, headers, etc.).
+ */
+export declare function UserAvatar({ user, size, className }: UserAvatarProps): React.JSX.Element;
+/**
+ * A Select whose rows show a profile picture + username. The trigger mirrors the
+ * selected row (Radix `SelectValue` copies the item's children), so the chosen
+ * user's avatar + name show in the closed control automatically.
+ */
+export declare function UserPickerSelect({ users, value, onChange, includeUnassigned, unassignedLabel, placeholder, disabled, size, className, contentClassName, contentStyle, "aria-label": ariaLabel, }: UserPickerSelectProps): React.JSX.Element;
+//# sourceMappingURL=user_picker_select.d.ts.map

package/dist/components/user_picker_select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user_picker_select.d.ts","sourceRoot":"","sources":["../../src/components/user_picker_select.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,YAAY;IAC3B,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,qBAAqB;IACpC,sCAAsC;IACtC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,uDAAuD;IACvD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mFAAmF;IACnF,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAOD,kDAAkD;AAClD,wBAAgB,eAAe,CAAC,CAAC,EAAE,YAAY,GAAG,MAAM,CAEvD;AA+BD,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,IAAgB,EAAE,SAAS,EAAE,EAAE,eAAe,qBAsBhF;AAGD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,iBAAwB,EACxB,eAA8B,EAC9B,WAA2B,EAC3B,QAAQ,EACR,IAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,YAAY,EAAE,SAAS,GACxB,EAAE,qBAAqB,qBAqCvB"}

package/dist/components/user_picker_select.js

@@ -0,0 +1,76 @@
+// file_description: reusable user-picker dropdown — a Select whose rows render a
+// profile picture (or tinted initials) beside the user's name. Client-safe;
+// built on the shadcn Avatar + Select primitives. Data-agnostic: the caller
+// supplies the candidate users and owns fetching them (e.g. via
+// hazo_get_user_profiles server-side).
+// section: client_directive
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UserRound } from "lucide-react";
+import { Avatar, AvatarImage, AvatarFallback } from "./ui/avatar.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./ui/select.js";
+import { cn } from "../lib/utils.js";
+// Radix Select forbids an empty-string item value, so the unassigned row uses a
+// sentinel that is mapped back to null across the component boundary.
+const UNASSIGNED = "__hazo_unassigned__";
+// section: helpers
+/** name → email → id, so a row is never blank. */
+export function userDisplayName(u) {
+    return (u.name && u.name.trim()) || (u.email && u.email.trim()) || u.user_id;
+}
+/** Up-to-two-letter initials from a label. */
+function initialsOf(label) {
+    const s = label.trim();
+    if (!s)
+        return "?";
+    const parts = s.split(/[\s@._-]+/).filter(Boolean);
+    if (parts.length === 0)
+        return s.slice(0, 2).toUpperCase();
+    if (parts.length === 1)
+        return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[1][0]).toUpperCase();
+}
+// Deterministic fallback tint from a key, so the same user keeps one colour.
+const TINTS = [
+    "bg-indigo-500 text-white",
+    "bg-emerald-500 text-white",
+    "bg-violet-500 text-white",
+    "bg-amber-500 text-white",
+    "bg-rose-500 text-white",
+    "bg-cyan-500 text-white",
+    "bg-sky-500 text-white",
+    "bg-fuchsia-500 text-white",
+];
+function tintOf(key) {
+    let hash = 0;
+    for (let i = 0; i < key.length; i++)
+        hash = (hash * 31 + key.charCodeAt(i)) | 0;
+    return TINTS[Math.abs(hash) % TINTS.length];
+}
+/**
+ * Standalone avatar: the profile picture when present, else tinted initials,
+ * else a muted person glyph for the empty/unassigned slot. Exported so callers
+ * can reuse the exact same avatar outside the picker (cards, headers, etc.).
+ */
+export function UserAvatar({ user, size = "default", className }) {
+    const dim = size === "sm" ? "h-5 w-5" : "h-6 w-6";
+    if (!user) {
+        return (_jsx(Avatar, { className: cn(dim, "bg-muted text-muted-foreground", className), children: _jsx(AvatarFallback, { className: "bg-transparent", children: _jsx(UserRound, { className: size === "sm" ? "h-3 w-3" : "h-3.5 w-3.5" }) }) }));
+    }
+    const label = userDisplayName(user);
+    return (_jsxs(Avatar, { className: cn(dim, className), children: [user.profile_picture_url ? (_jsx(AvatarImage, { src: user.profile_picture_url, alt: "" })) : null, _jsx(AvatarFallback, { className: cn("text-[9px] font-semibold", tintOf(user.user_id)), children: initialsOf(label) })] }));
+}
+// section: user_picker_select
+/**
+ * A Select whose rows show a profile picture + username. The trigger mirrors the
+ * selected row (Radix `SelectValue` copies the item's children), so the chosen
+ * user's avatar + name show in the closed control automatically.
+ */
+export function UserPickerSelect({ users, value, onChange, includeUnassigned = true, unassignedLabel = "Unassigned", placeholder = "Select user", disabled, size = "default", className, contentClassName, contentStyle, "aria-label": ariaLabel, }) {
+    const current = value ? value : includeUnassigned ? UNASSIGNED : "";
+    const handleChange = (next) => {
+        onChange(next === UNASSIGNED ? null : next);
+    };
+    const triggerSize = size === "sm" ? "h-7 gap-1.5 text-xs" : "h-9 gap-2 text-sm";
+    return (_jsxs(Select, { value: current || undefined, onValueChange: handleChange, disabled: disabled, children: [_jsx(SelectTrigger, { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Select user", className: cn(triggerSize, "min-w-0 [&>span]:truncate", className), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsxs(SelectContent, { className: contentClassName, style: contentStyle, children: [includeUnassigned ? (_jsx(SelectItem, { value: UNASSIGNED, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(UserAvatar, { user: null, size: size }), _jsx("span", { className: "truncate", children: unassignedLabel })] }) })) : null, users.map((u) => (_jsx(SelectItem, { value: u.user_id, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(UserAvatar, { user: u, size: size }), _jsx("span", { className: "truncate", children: userDisplayName(u) })] }) }, u.user_id)))] })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_auth",
-  "version": "10.4.13",
+  "version": "10.5.0",
   "description": "Zero-config authentication UI components for Next.js with RBAC, OAuth, scope-based multi-tenancy, and invitations",
   "keywords": [
     "authentication",