@devsym/graph-toolkit-react 0.1.0-next.2

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) Microsoft and Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Note: Usage of the assets referenced in Office UI Fabric files is subject to
+the terms listed at https://aka.ms/fabric-assets-license

package/dist/components/Person/Person.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Person component - Display a person using Fluent UI Persona
+ */
+import React from 'react';
+import { PersonProps } from './Person.types';
+export declare const Person: React.FC<PersonProps>;
+//# sourceMappingURL=Person.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Person.d.ts","sourceRoot":"","sources":["../../../src/components/Person/Person.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA2C7C,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuFxC,CAAC"}

package/dist/components/Person/Person.types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Person component types
+ */
+import type { CSSProperties } from 'react';
+import { User } from '@microsoft/microsoft-graph-types';
+export type PersonView = 'avatar' | 'oneline' | 'twolines' | 'threelines';
+export type PersonSize = 'small' | 'medium' | 'large' | 'extra-large';
+export type PersonTextAlignment = 'start' | 'center';
+export type PersonTextPosition = 'before' | 'after' | 'below';
+export interface PersonDetails {
+    displayName?: string;
+    mail?: string;
+    jobTitle?: string;
+    department?: string;
+    officeLocation?: string;
+    id?: string;
+    userPrincipalName?: string;
+}
+export interface PersonProps {
+    userId?: string;
+    userPrincipalName?: string;
+    email?: string;
+    personDetails?: PersonDetails;
+    view?: PersonView;
+    showPresence?: boolean;
+    avatarSize?: PersonSize;
+    textAlignment?: PersonTextAlignment;
+    textPosition?: PersonTextPosition;
+    numericSize?: number;
+    fetchImage?: boolean;
+    onClick?: (person: User) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+//# sourceMappingURL=Person.types.d.ts.map

package/dist/components/Person/Person.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Person.types.d.ts","sourceRoot":"","sources":["../../../src/components/Person/Person.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AAExD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC;AAC1E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AACtE,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,CAAC;AACrD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,WAAW;IAE1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,aAAa,CAAC,EAAE,aAAa,CAAC;IAG9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC;IAGxB,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,KAAK,IAAI,CAAC;IAGjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB"}

package/dist/components/Person/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Person component exports
+ */
+export { Person } from './Person';
+export type { PersonProps } from './Person.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Person/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Person/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/hooks/useGraphClient.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook to access Graph Client
+ */
+import { Client } from '@microsoft/microsoft-graph-client';
+/**
+ * Hook to get a configured Graph Client instance
+ */
+export declare const useGraphClient: () => Client | null;
+//# sourceMappingURL=useGraphClient.d.ts.map

package/dist/hooks/useGraphClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGraphClient.d.ts","sourceRoot":"","sources":["../../src/hooks/useGraphClient.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAI3D;;GAEG;AACH,eAAO,MAAM,cAAc,QAAO,MAAM,GAAG,IAS1C,CAAC"}

package/dist/hooks/usePersonData.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Hook to fetch person data from Microsoft Graph
+ */
+import { User, Presence } from '@microsoft/microsoft-graph-types';
+export interface PersonData {
+    user: User | null;
+    presence: Presence | null;
+    photoUrl: string | null;
+    loading: boolean;
+    error: Error | null;
+}
+export interface UsePersonDataOptions {
+    userId?: string;
+    userPrincipalName?: string;
+    fetchPresence?: boolean;
+    fetchPhoto?: boolean;
+}
+/**
+ * Fetch person data from Microsoft Graph
+ */
+export declare const usePersonData: (options: UsePersonDataOptions) => PersonData;
+//# sourceMappingURL=usePersonData.d.ts.map

package/dist/hooks/usePersonData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersonData.d.ts","sourceRoot":"","sources":["../../src/hooks/usePersonData.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAKlE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,SAAS,oBAAoB,KAAG,UAgK7D,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Graph Toolkit React - React Components
+ *
+ * React components for Microsoft Graph powered by Fluent UI
+ */
+export * from './components/Person';
+export * from './providers/IProvider';
+export * from './providers/ProviderContext';
+export * from './providers/MockProvider';
+export * from './providers/MsalBrowserProvider';
+export * from './providers/TeamsHostedProvider';
+export * from './hooks/useGraphClient';
+export * from './hooks/usePersonData';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,qBAAqB,CAAC;AAGpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAGhD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react/jsx-runtime"),O=require("@fluentui/react-components"),d=require("react"),q=require("@microsoft/microsoft-graph-client");var o=(t=>(t.Loading="Loading",t.SignedOut="SignedOut",t.SignedIn="SignedIn",t))(o||{});const P=d.createContext({provider:null,state:o.Loading}),G=({provider:t,children:e})=>{const s=d.useCallback(()=>t?.getState?.()??o.Loading,[t]),r=d.useCallback(i=>(t.onStateChanged?.(i),()=>{const c=t;typeof c.removeStateChangedHandler=="function"&&c.removeStateChangedHandler(i)}),[t]),n=d.useSyncExternalStore(r,s,s),a=d.useMemo(()=>({provider:t,state:n}),[t,n]);return w.jsx(P.Provider,{value:a,children:e})},I=()=>{const{provider:t}=d.useContext(P);return t},b=()=>{const{state:t}=d.useContext(P);return t},L=t=>q.Client.init({authProvider:async e=>{try{const s=await t.getAccessToken();e(null,s)}catch(s){e(s,null)}}}),z=t=>{const e=t.trim().split(" ");return e.length===1?e[0].substring(0,2).toUpperCase():(e[0][0]+e[e.length-1][0]).toUpperCase()},U=()=>{const t=I(),e=b();return d.useMemo(()=>!t||e!=="SignedIn"?null:L(t),[t,e])};class C{state=o.SignedOut;listeners=[];constructor(e){e?.autoSignIn&&(this.state=o.SignedIn)}getAccessToken(){return this.state!==o.SignedIn?Promise.reject(new Error("Not signed in")):Promise.resolve("mock-token")}async login(){this.state=o.SignedIn,this.emit()}async logout(){this.state=o.SignedOut,this.emit()}getState(){return this.state}onStateChanged(e){this.listeners.push(e)}removeStateChangedHandler(e){this.listeners=this.listeners.filter(s=>s!==e)}emit(){for(const e of this.listeners)try{e()}catch{}}}const B=()=>new C({autoSignIn:!0}),j=t=>{const e=U(),s=I(),r=b(),{userId:n,userPrincipalName:a,fetchPresence:i=!1,fetchPhoto:c=!0}=t,[f,p]=d.useState({user:null,presence:null,photoUrl:null,loading:!0,error:null});return d.useEffect(()=>{let h=!1;return(async()=>{if(s instanceof C){const l={id:"00000000-0000-0000-0000-000000000000",displayName:"Adele Vance",userPrincipalName:"adelev@contoso.com",jobTitle:"Product Manager",department:"Marketing",officeLocation:"19/3106",mail:"adelev@contoso.com"},u={availability:"Available",activity:"Available",id:l.id,odataType:"#microsoft.graph.presence"};h||p({user:l,presence:i?u:null,photoUrl:c?"https://ui-avatars.com/api/?name=Adele+Vance&background=0D8ABC&color=ffffff":null,loading:!1,error:null});return}if(r!=="SignedIn"){h||p({user:null,presence:null,photoUrl:null,loading:!1,error:r==="SignedOut"?null:new Error("Provider not signed in")});return}if(!e){h||p(l=>({...l,loading:!0}));return}const m=n||a;if(!m){h||p({user:null,presence:null,photoUrl:null,loading:!1,error:null});return}try{p(g=>({...g,loading:!0,error:null}));const l=m.toLowerCase()==="me",u=await e.api(l?"/me":`/users/${m}`).select("id,displayName,jobTitle,mail,department,officeLocation,userPrincipalName").get();if(h)return;let S=null,k=null;if(i&&u.id)try{S=await e.api(l?"/me/presence":`/users/${u.id}/presence`).get()}catch(g){console.warn("Failed to fetch presence:",g)}if(c&&u.id)try{const g=await e.api(l?"/me/photo/$value":`/users/${u.id}/photo/$value`).get();k=URL.createObjectURL(g)}catch(g){console.warn("Failed to fetch photo:",g)}h||p({user:u,presence:S,photoUrl:k,loading:!1,error:null})}catch(l){h||p({user:null,presence:null,photoUrl:null,loading:!1,error:l})}})(),()=>{h=!0}},[e,s,r,n,a,i,c]),f},N=t=>{switch(t){case"small":return"small";case"large":return"large";case"extra-large":return"extra-large";default:return"medium"}},$=t=>{switch(t?.toLowerCase()){case"available":case"availableidle":return"available";case"away":case"berightback":return"away";case"busy":case"busyidle":case"donotdisturb":return"busy";default:return"offline"}},D=({userId:t,userPrincipalName:e,email:s,personDetails:r,view:n="oneline",showPresence:a=!1,avatarSize:i="medium",textAlignment:c,textPosition:f,numericSize:p,fetchImage:h=!0,onClick:y,className:m,style:l})=>{const{user:u,presence:S,photoUrl:k,loading:g}=j({userId:r?void 0:t||e||s,fetchPresence:a,fetchPhoto:h}),T=r||u,E=p??N(i);if(g)return w.jsx(O.Persona,{size:E,name:"Loading...",textAlignment:c,textPosition:f,className:m,style:l});if(!T)return null;const M=T.displayName||"Unknown User",F=z(M),v={size:E,name:M,textAlignment:c,textPosition:f,avatar:{image:k?{src:k}:void 0,initials:k?void 0:F},className:m,style:l};return a&&S&&(v.presence={status:$(S.availability)}),n!=="avatar"&&((n==="twolines"||n==="threelines")&&(v.secondaryText=T.jobTitle??void 0),n==="threelines"&&(v.tertiaryText=T.department??void 0)),y&&(v.onClick=()=>{u&&y(u)}),w.jsx(O.Persona,{...v})};function H(t){return`See https://aka.ms/msal.js.errors#${t} for details`}class x extends Error{constructor(e,s,r){const n=s||(e?H(e):""),a=n?`${e}: ${n}`:e;super(a),Object.setPrototypeOf(this,x.prototype),this.errorCode=e||"",this.errorMessage=n||"",this.subError=r||"",this.name="AuthError"}setCorrelationId(e){this.correlationId=e}}class A extends x{constructor(e,s,r,n,a,i,c,f){super(e,s,r),Object.setPrototypeOf(this,A.prototype),this.timestamp=n||"",this.traceId=a||"",this.correlationId=i||"",this.claims=c||"",this.name="InteractionRequiredAuthError",this.errorNo=f}}class R{msalInstance;defaultScopes;account=null;state=o.Loading;listeners=[];constructor(e,s){this.msalInstance=e,this.defaultScopes=s}async initialize(){await this.msalInstance.initialize(),await this.msalInstance.handleRedirectPromise();const e=this.msalInstance.getActiveAccount(),s=this.msalInstance.getAllAccounts();this.account=e??s[0]??null,this.account?(this.msalInstance.setActiveAccount(this.account),this.setState(o.SignedIn)):this.setState(o.SignedOut)}async login(){const e={scopes:this.defaultScopes},s=await this.msalInstance.loginPopup(e);this.account=s.account,this.account&&this.msalInstance.setActiveAccount(this.account),this.setState(o.SignedIn)}async logout(){const e=this.msalInstance.getActiveAccount()??this.account??void 0;await this.msalInstance.logoutPopup({account:e}),this.account=null,this.setState(o.SignedOut)}async getAccessToken(e){const s=e&&e.length>0?e:this.defaultScopes,r=this.msalInstance.getActiveAccount()??this.account;if(!r)throw new Error("No active account. User must sign in first.");const n={scopes:s,account:r};try{return(await this.msalInstance.acquireTokenSilent(n)).accessToken}catch(a){if(a instanceof A){const i={scopes:s,account:r};return(await this.msalInstance.acquireTokenPopup(i)).accessToken}throw a}}getState(){return this.state}onStateChanged(e){this.listeners.push(e)}removeStateChangedHandler(e){this.listeners=this.listeners.filter(s=>s!==e)}setState(e){this.state=e,this.emit()}emit(){for(const e of this.listeners)try{e()}catch{}}}const K=6e4;function V(t){const e=t.fetchFn??fetch;return async({ssoToken:s,scopes:r})=>{const n=await e(t.endpoint,{method:"POST",headers:{Authorization:`Bearer ${s}`,"Content-Type":"application/json"},body:JSON.stringify({scopes:r})}),a=await n.json().catch(()=>({error:n.statusText||"Token exchange failed"}));if(!n.ok){const i=a?.error||a?.message||n.statusText;throw new Error(`Backend token exchange failed: ${i}`)}if(!a?.accessToken)throw new Error("Backend token exchange response did not include accessToken.");return{accessToken:a.accessToken,expiresAt:a.expiresAt}}}class J{defaultScopes;getTeamsSsoTokenFn;exchangeForGraphTokenFn;refreshSkewMs;state=o.SignedOut;listeners=[];tokenCache=new Map;constructor(e){if(!e.defaultScopes||e.defaultScopes.length===0)throw new Error("TeamsHostedProvider requires at least one default scope.");this.defaultScopes=[...new Set(e.defaultScopes)],this.getTeamsSsoTokenFn=e.getTeamsSsoToken,this.exchangeForGraphTokenFn=e.exchangeForGraphToken,this.refreshSkewMs=e.refreshSkewMs??K}async login(){try{await this.getAccessToken(),this.setState(o.SignedIn)}catch(e){throw this.clearCache(),this.setState(o.SignedOut),e}}async logout(){this.clearCache(),this.setState(o.SignedOut)}async getAccessToken(e){const s=this.normalizeScopes(e),r=this.buildScopeKey(s),n=this.tokenCache.get(r);if(n&&this.isTokenValid(n))return n.accessToken;const a=await this.getTeamsSsoTokenFn(s);if(!a)throw new Error("Teams SSO token acquisition returned empty token.");const i=await this.exchangeForGraphTokenFn({ssoToken:a,scopes:s}),c=this.normalizeExchangedToken(i);return this.tokenCache.set(r,c),this.setState(o.SignedIn),c.accessToken}getState(){return this.state}onStateChanged(e){this.listeners.push(e)}removeStateChangedHandler(e){this.listeners=this.listeners.filter(s=>s!==e)}normalizeScopes(e){const s=e&&e.length>0?e:this.defaultScopes,r=[...new Set(s.filter(Boolean))];if(r.length===0)throw new Error("At least one scope is required to request a Graph token.");return r}buildScopeKey(e){return[...e].sort().join(" ")}isTokenValid(e){return e.expiresAtMs?Date.now()+this.refreshSkewMs<e.expiresAtMs:!0}normalizeExchangedToken(e){if(typeof e=="string"){if(!e)throw new Error("Graph token exchange returned empty access token.");return{accessToken:e}}if(!e.accessToken)throw new Error("Graph token exchange returned empty access token.");return{accessToken:e.accessToken,expiresAtMs:this.toEpochMs(e.expiresAt)}}toEpochMs(e){if(e)return e instanceof Date?e.getTime():e}clearCache(){this.tokenCache.clear()}setState(e){this.state!==e&&(this.state=e,this.emit())}emit(){for(const e of this.listeners)try{e()}catch{}}}exports.GraphProvider=G;exports.MockProvider=C;exports.MsalBrowserProvider=R;exports.Person=D;exports.ProviderState=o;exports.TeamsHostedProvider=J;exports.createBackendTokenExchange=V;exports.createMockSignedInProvider=B;exports.useGraphClient=U;exports.usePersonData=j;exports.useProvider=I;exports.useProviderState=b;

package/dist/index.mjs

@@ -0,0 +1,465 @@
+import { jsx as w } from "react/jsx-runtime";
+import { Persona as C } from "@fluentui/react-components";
+import { createContext as j, useCallback as x, useSyncExternalStore as G, useMemo as E, useContext as M, useState as q, useEffect as z } from "react";
+import { Client as N } from "@microsoft/microsoft-graph-client";
+var o = /* @__PURE__ */ ((t) => (t.Loading = "Loading", t.SignedOut = "SignedOut", t.SignedIn = "SignedIn", t))(o || {});
+const v = j({
+  provider: null,
+  state: o.Loading
+}), Y = ({ provider: t, children: e }) => {
+  const s = x(
+    () => t?.getState?.() ?? o.Loading,
+    [t]
+  ), r = x(
+    (i) => (t.onStateChanged?.(i), () => {
+      const c = t;
+      typeof c.removeStateChangedHandler == "function" && c.removeStateChangedHandler(i);
+    }),
+    [t]
+  ), n = G(r, s, s), a = E(() => ({ provider: t, state: n }), [t, n]);
+  return /* @__PURE__ */ w(v.Provider, { value: a, children: e });
+}, U = () => {
+  const { provider: t } = M(v);
+  return t;
+}, O = () => {
+  const { state: t } = M(v);
+  return t;
+}, $ = (t) => N.init({
+  authProvider: async (e) => {
+    try {
+      const s = await t.getAccessToken();
+      e(null, s);
+    } catch (s) {
+      e(s, null);
+    }
+  }
+}), B = (t) => {
+  const e = t.trim().split(" ");
+  return e.length === 1 ? e[0].substring(0, 2).toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
+}, D = () => {
+  const t = U(), e = O();
+  return E(() => !t || e !== "SignedIn" ? null : $(t), [t, e]);
+};
+class F {
+  state = o.SignedOut;
+  listeners = [];
+  constructor(e) {
+    e?.autoSignIn && (this.state = o.SignedIn);
+  }
+  getAccessToken() {
+    return this.state !== o.SignedIn ? Promise.reject(new Error("Not signed in")) : Promise.resolve("mock-token");
+  }
+  async login() {
+    this.state = o.SignedIn, this.emit();
+  }
+  async logout() {
+    this.state = o.SignedOut, this.emit();
+  }
+  getState() {
+    return this.state;
+  }
+  onStateChanged(e) {
+    this.listeners.push(e);
+  }
+  removeStateChangedHandler(e) {
+    this.listeners = this.listeners.filter((s) => s !== e);
+  }
+  emit() {
+    for (const e of this.listeners)
+      try {
+        e();
+      } catch {
+      }
+  }
+}
+const Z = () => new F({ autoSignIn: !0 }), H = (t) => {
+  const e = D(), s = U(), r = O(), { userId: n, userPrincipalName: a, fetchPresence: i = !1, fetchPhoto: c = !0 } = t, [p, d] = q({
+    user: null,
+    presence: null,
+    photoUrl: null,
+    loading: !0,
+    error: null
+  });
+  return z(() => {
+    let h = !1;
+    return (async () => {
+      if (s instanceof F) {
+        const l = {
+          id: "00000000-0000-0000-0000-000000000000",
+          displayName: "Adele Vance",
+          userPrincipalName: "adelev@contoso.com",
+          jobTitle: "Product Manager",
+          department: "Marketing",
+          officeLocation: "19/3106",
+          mail: "adelev@contoso.com"
+        }, u = {
+          availability: "Available",
+          activity: "Available",
+          id: l.id,
+          odataType: "#microsoft.graph.presence"
+        };
+        h || d({
+          user: l,
+          presence: i ? u : null,
+          photoUrl: c ? "https://ui-avatars.com/api/?name=Adele+Vance&background=0D8ABC&color=ffffff" : null,
+          loading: !1,
+          error: null
+        });
+        return;
+      }
+      if (r !== "SignedIn") {
+        h || d({
+          user: null,
+          presence: null,
+          photoUrl: null,
+          loading: !1,
+          error: r === "SignedOut" ? null : new Error("Provider not signed in")
+        });
+        return;
+      }
+      if (!e) {
+        h || d((l) => ({ ...l, loading: !0 }));
+        return;
+      }
+      const g = n || a;
+      if (!g) {
+        h || d({
+          user: null,
+          presence: null,
+          photoUrl: null,
+          loading: !1,
+          error: null
+        });
+        return;
+      }
+      try {
+        d((f) => ({ ...f, loading: !0, error: null }));
+        const l = g.toLowerCase() === "me", u = await e.api(l ? "/me" : `/users/${g}`).select("id,displayName,jobTitle,mail,department,officeLocation,userPrincipalName").get();
+        if (h) return;
+        let m = null, S = null;
+        if (i && u.id)
+          try {
+            m = await e.api(l ? "/me/presence" : `/users/${u.id}/presence`).get();
+          } catch (f) {
+            console.warn("Failed to fetch presence:", f);
+          }
+        if (c && u.id)
+          try {
+            const f = await e.api(l ? "/me/photo/$value" : `/users/${u.id}/photo/$value`).get();
+            S = URL.createObjectURL(f);
+          } catch (f) {
+            console.warn("Failed to fetch photo:", f);
+          }
+        h || d({
+          user: u,
+          presence: m,
+          photoUrl: S,
+          loading: !1,
+          error: null
+        });
+      } catch (l) {
+        h || d({
+          user: null,
+          presence: null,
+          photoUrl: null,
+          loading: !1,
+          error: l
+        });
+      }
+    })(), () => {
+      h = !0;
+    };
+  }, [
+    e,
+    s,
+    r,
+    n,
+    a,
+    i,
+    c
+  ]), p;
+}, R = (t) => {
+  switch (t) {
+    case "small":
+      return "small";
+    case "large":
+      return "large";
+    case "extra-large":
+      return "extra-large";
+    default:
+      return "medium";
+  }
+}, K = (t) => {
+  switch (t?.toLowerCase()) {
+    case "available":
+    case "availableidle":
+      return "available";
+    case "away":
+    case "berightback":
+      return "away";
+    case "busy":
+    case "busyidle":
+    case "donotdisturb":
+      return "busy";
+    default:
+      return "offline";
+  }
+}, ee = ({
+  userId: t,
+  userPrincipalName: e,
+  email: s,
+  personDetails: r,
+  view: n = "oneline",
+  showPresence: a = !1,
+  avatarSize: i = "medium",
+  textAlignment: c,
+  textPosition: p,
+  numericSize: d,
+  fetchImage: h = !0,
+  onClick: T,
+  className: g,
+  style: l
+}) => {
+  const { user: u, presence: m, photoUrl: S, loading: f } = H({
+    userId: r ? void 0 : t || e || s,
+    fetchPresence: a,
+    fetchPhoto: h
+  }), y = r || u, A = d ?? R(i);
+  if (f)
+    return /* @__PURE__ */ w(
+      C,
+      {
+        size: A,
+        name: "Loading...",
+        textAlignment: c,
+        textPosition: p,
+        className: g,
+        style: l
+      }
+    );
+  if (!y)
+    return null;
+  const b = y.displayName || "Unknown User", L = B(b), k = {
+    size: A,
+    name: b,
+    textAlignment: c,
+    textPosition: p,
+    avatar: {
+      image: S ? { src: S } : void 0,
+      initials: S ? void 0 : L
+    },
+    className: g,
+    style: l
+  };
+  return a && m && (k.presence = {
+    status: K(m.availability)
+  }), n !== "avatar" && ((n === "twolines" || n === "threelines") && (k.secondaryText = y.jobTitle ?? void 0), n === "threelines" && (k.tertiaryText = y.department ?? void 0)), T && (k.onClick = () => {
+    u && T(u);
+  }), /* @__PURE__ */ w(C, { ...k });
+};
+function V(t) {
+  return `See https://aka.ms/msal.js.errors#${t} for details`;
+}
+class I extends Error {
+  constructor(e, s, r) {
+    const n = s || (e ? V(e) : ""), a = n ? `${e}: ${n}` : e;
+    super(a), Object.setPrototypeOf(this, I.prototype), this.errorCode = e || "", this.errorMessage = n || "", this.subError = r || "", this.name = "AuthError";
+  }
+  setCorrelationId(e) {
+    this.correlationId = e;
+  }
+}
+class P extends I {
+  constructor(e, s, r, n, a, i, c, p) {
+    super(e, s, r), Object.setPrototypeOf(this, P.prototype), this.timestamp = n || "", this.traceId = a || "", this.correlationId = i || "", this.claims = c || "", this.name = "InteractionRequiredAuthError", this.errorNo = p;
+  }
+}
+class te {
+  msalInstance;
+  defaultScopes;
+  account = null;
+  state = o.Loading;
+  listeners = [];
+  constructor(e, s) {
+    this.msalInstance = e, this.defaultScopes = s;
+  }
+  async initialize() {
+    await this.msalInstance.initialize(), await this.msalInstance.handleRedirectPromise();
+    const e = this.msalInstance.getActiveAccount(), s = this.msalInstance.getAllAccounts();
+    this.account = e ?? s[0] ?? null, this.account ? (this.msalInstance.setActiveAccount(this.account), this.setState(o.SignedIn)) : this.setState(o.SignedOut);
+  }
+  async login() {
+    const e = { scopes: this.defaultScopes }, s = await this.msalInstance.loginPopup(e);
+    this.account = s.account, this.account && this.msalInstance.setActiveAccount(this.account), this.setState(o.SignedIn);
+  }
+  async logout() {
+    const e = this.msalInstance.getActiveAccount() ?? this.account ?? void 0;
+    await this.msalInstance.logoutPopup({ account: e }), this.account = null, this.setState(o.SignedOut);
+  }
+  async getAccessToken(e) {
+    const s = e && e.length > 0 ? e : this.defaultScopes, r = this.msalInstance.getActiveAccount() ?? this.account;
+    if (!r)
+      throw new Error("No active account. User must sign in first.");
+    const n = {
+      scopes: s,
+      account: r
+    };
+    try {
+      return (await this.msalInstance.acquireTokenSilent(n)).accessToken;
+    } catch (a) {
+      if (a instanceof P) {
+        const i = {
+          scopes: s,
+          account: r
+        };
+        return (await this.msalInstance.acquireTokenPopup(i)).accessToken;
+      }
+      throw a;
+    }
+  }
+  getState() {
+    return this.state;
+  }
+  onStateChanged(e) {
+    this.listeners.push(e);
+  }
+  removeStateChangedHandler(e) {
+    this.listeners = this.listeners.filter((s) => s !== e);
+  }
+  setState(e) {
+    this.state = e, this.emit();
+  }
+  emit() {
+    for (const e of this.listeners)
+      try {
+        e();
+      } catch {
+      }
+  }
+}
+const J = 6e4;
+function se(t) {
+  const e = t.fetchFn ?? fetch;
+  return async ({ ssoToken: s, scopes: r }) => {
+    const n = await e(t.endpoint, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${s}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ scopes: r })
+    }), a = await n.json().catch(() => ({ error: n.statusText || "Token exchange failed" }));
+    if (!n.ok) {
+      const i = a?.error || a?.message || n.statusText;
+      throw new Error(`Backend token exchange failed: ${i}`);
+    }
+    if (!a?.accessToken)
+      throw new Error("Backend token exchange response did not include accessToken.");
+    return {
+      accessToken: a.accessToken,
+      expiresAt: a.expiresAt
+    };
+  };
+}
+class ne {
+  defaultScopes;
+  getTeamsSsoTokenFn;
+  exchangeForGraphTokenFn;
+  refreshSkewMs;
+  state = o.SignedOut;
+  listeners = [];
+  tokenCache = /* @__PURE__ */ new Map();
+  constructor(e) {
+    if (!e.defaultScopes || e.defaultScopes.length === 0)
+      throw new Error("TeamsHostedProvider requires at least one default scope.");
+    this.defaultScopes = [...new Set(e.defaultScopes)], this.getTeamsSsoTokenFn = e.getTeamsSsoToken, this.exchangeForGraphTokenFn = e.exchangeForGraphToken, this.refreshSkewMs = e.refreshSkewMs ?? J;
+  }
+  async login() {
+    try {
+      await this.getAccessToken(), this.setState(o.SignedIn);
+    } catch (e) {
+      throw this.clearCache(), this.setState(o.SignedOut), e;
+    }
+  }
+  async logout() {
+    this.clearCache(), this.setState(o.SignedOut);
+  }
+  async getAccessToken(e) {
+    const s = this.normalizeScopes(e), r = this.buildScopeKey(s), n = this.tokenCache.get(r);
+    if (n && this.isTokenValid(n))
+      return n.accessToken;
+    const a = await this.getTeamsSsoTokenFn(s);
+    if (!a)
+      throw new Error("Teams SSO token acquisition returned empty token.");
+    const i = await this.exchangeForGraphTokenFn({
+      ssoToken: a,
+      scopes: s
+    }), c = this.normalizeExchangedToken(i);
+    return this.tokenCache.set(r, c), this.setState(o.SignedIn), c.accessToken;
+  }
+  getState() {
+    return this.state;
+  }
+  onStateChanged(e) {
+    this.listeners.push(e);
+  }
+  removeStateChangedHandler(e) {
+    this.listeners = this.listeners.filter((s) => s !== e);
+  }
+  normalizeScopes(e) {
+    const s = e && e.length > 0 ? e : this.defaultScopes, r = [...new Set(s.filter(Boolean))];
+    if (r.length === 0)
+      throw new Error("At least one scope is required to request a Graph token.");
+    return r;
+  }
+  buildScopeKey(e) {
+    return [...e].sort().join(" ");
+  }
+  isTokenValid(e) {
+    return e.expiresAtMs ? Date.now() + this.refreshSkewMs < e.expiresAtMs : !0;
+  }
+  normalizeExchangedToken(e) {
+    if (typeof e == "string") {
+      if (!e)
+        throw new Error("Graph token exchange returned empty access token.");
+      return { accessToken: e };
+    }
+    if (!e.accessToken)
+      throw new Error("Graph token exchange returned empty access token.");
+    return {
+      accessToken: e.accessToken,
+      expiresAtMs: this.toEpochMs(e.expiresAt)
+    };
+  }
+  toEpochMs(e) {
+    if (e)
+      return e instanceof Date ? e.getTime() : e;
+  }
+  clearCache() {
+    this.tokenCache.clear();
+  }
+  setState(e) {
+    this.state !== e && (this.state = e, this.emit());
+  }
+  emit() {
+    for (const e of this.listeners)
+      try {
+        e();
+      } catch {
+      }
+  }
+}
+export {
+  Y as GraphProvider,
+  F as MockProvider,
+  te as MsalBrowserProvider,
+  ee as Person,
+  o as ProviderState,
+  ne as TeamsHostedProvider,
+  se as createBackendTokenExchange,
+  Z as createMockSignedInProvider,
+  D as useGraphClient,
+  H as usePersonData,
+  U as useProvider,
+  O as useProviderState
+};

package/dist/providers/IProvider.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Provider interface for Microsoft Graph authentication
+ */
+export declare enum ProviderState {
+    Loading = "Loading",
+    SignedOut = "SignedOut",
+    SignedIn = "SignedIn"
+}
+export interface IProvider {
+    /**
+     * Get an access token for the specified scopes
+     */
+    getAccessToken(scopes?: string[]): Promise<string>;
+    /**
+     * Initiate login flow
+     */
+    login(): Promise<void>;
+    /**
+     * Initiate logout flow
+     */
+    logout(): Promise<void>;
+    /**
+     * Get the current provider state
+     */
+    getState(): ProviderState;
+    /**
+     * Event handler for state changes
+     */
+    onStateChanged?: (handler: () => void) => void;
+}
+//# sourceMappingURL=IProvider.d.ts.map

package/dist/providers/IProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IProvider.d.ts","sourceRoot":"","sources":["../../src/providers/IProvider.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAEnD;;OAEG;IACH,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvB;;OAEG;IACH,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAExB;;OAEG;IACH,QAAQ,IAAI,aAAa,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAChD"}

package/dist/providers/MockProvider.d.ts

@@ -0,0 +1,21 @@
+/**
+ * MockProvider - simple in-memory provider for development and tests
+ */
+import { IProvider, ProviderState } from './IProvider';
+export declare class MockProvider implements IProvider {
+    private state;
+    private listeners;
+    constructor(options?: {
+        autoSignIn?: boolean;
+        mockUserId?: string;
+    });
+    getAccessToken(): Promise<string>;
+    login(): Promise<void>;
+    logout(): Promise<void>;
+    getState(): ProviderState;
+    onStateChanged(handler: () => void): void;
+    removeStateChangedHandler(handler: () => void): void;
+    private emit;
+}
+export declare const createMockSignedInProvider: () => MockProvider;
+//# sourceMappingURL=MockProvider.d.ts.map

package/dist/providers/MockProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MockProvider.d.ts","sourceRoot":"","sources":["../../src/providers/MockProvider.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIvD,qBAAa,YAAa,YAAW,SAAS;IAC5C,OAAO,CAAC,KAAK,CAA0C;IACvD,OAAO,CAAC,SAAS,CAAuB;gBAC5B,OAAO,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;IAMnE,cAAc,IAAI,OAAO,CAAC,MAAM,CAAC;IAQ3B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAKtB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAK7B,QAAQ,IAAI,aAAa;IAIzB,cAAc,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIzC,yBAAyB,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIpD,OAAO,CAAC,IAAI;CASb;AAED,eAAO,MAAM,0BAA0B,oBAA+C,CAAC"}

package/dist/providers/MsalBrowserProvider.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Native MSAL browser provider for Graph Toolkit React
+ */
+import { PublicClientApplication } from '@azure/msal-browser';
+import { IProvider, ProviderState } from './IProvider';
+export declare class MsalBrowserProvider implements IProvider {
+    private readonly msalInstance;
+    private readonly defaultScopes;
+    private account;
+    private state;
+    private listeners;
+    constructor(msalInstance: PublicClientApplication, defaultScopes: string[]);
+    initialize(): Promise<void>;
+    login(): Promise<void>;
+    logout(): Promise<void>;
+    getAccessToken(scopes?: string[]): Promise<string>;
+    getState(): ProviderState;
+    onStateChanged(handler: () => void): void;
+    removeStateChangedHandler(handler: () => void): void;
+    private setState;
+    private emit;
+}
+//# sourceMappingURL=MsalBrowserProvider.d.ts.map

package/dist/providers/MsalBrowserProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MsalBrowserProvider.d.ts","sourceRoot":"","sources":["../../src/providers/MsalBrowserProvider.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAIH,uBAAuB,EAE1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEvD,qBAAa,mBAAoB,YAAW,SAAS;IACjD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA0B;IACvD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAW;IACzC,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,KAAK,CAAwC;IACrD,OAAO,CAAC,SAAS,CAAyB;gBAE9B,YAAY,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,EAAE;IAKpE,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAgB3B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAYtB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAOvB,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC;IA8BxD,QAAQ,IAAI,aAAa;IAIzB,cAAc,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIzC,yBAAyB,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIpD,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,IAAI;CASf"}

package/dist/providers/ProviderContext.d.ts

@@ -0,0 +1,19 @@
+/**
+ * React Context for Graph Provider
+ */
+import React, { ReactNode } from 'react';
+import { IProvider, ProviderState } from './IProvider';
+export interface GraphProviderProps {
+    provider: IProvider;
+    children: ReactNode;
+}
+export declare const GraphProvider: React.FC<GraphProviderProps>;
+/**
+ * Hook to access the current Graph provider
+ */
+export declare const useProvider: () => IProvider | null;
+/**
+ * Hook to access the current provider state
+ */
+export declare const useProviderState: () => ProviderState;
+//# sourceMappingURL=ProviderContext.d.ts.map

package/dist/providers/ProviderContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderContext.d.ts","sourceRoot":"","sources":["../../src/providers/ProviderContext.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAIZ,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAYvD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2BtD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,SAAS,GAAG,IAG1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAO,aAGnC,CAAC"}

package/dist/providers/TeamsHostedProvider.d.ts

@@ -0,0 +1,59 @@
+import { IProvider, ProviderState } from './IProvider';
+export interface ExchangeForGraphTokenParams {
+    ssoToken: string;
+    scopes: string[];
+}
+export interface ExchangedGraphToken {
+    accessToken: string;
+    expiresAt?: number | Date;
+}
+export interface TeamsHostedProviderOptions {
+    defaultScopes: string[];
+    getTeamsSsoToken: (scopes: string[]) => Promise<string>;
+    exchangeForGraphToken: (params: ExchangeForGraphTokenParams) => Promise<string | ExchangedGraphToken>;
+    refreshSkewMs?: number;
+}
+export interface BackendTokenExchangeResponse extends ExchangedGraphToken {
+    accessToken: string;
+}
+export interface CreateBackendTokenExchangeOptions {
+    endpoint: string;
+    fetchFn?: typeof fetch;
+}
+/**
+ * Creates a typed callback for exchanging a Teams SSO token with a backend
+ * endpoint that performs OBO and returns a Graph token.
+ */
+export declare function createBackendTokenExchange(options: CreateBackendTokenExchangeOptions): ({ ssoToken, scopes }: ExchangeForGraphTokenParams) => Promise<BackendTokenExchangeResponse>;
+/**
+ * Teams-hosted auth provider for Graph Toolkit React.
+ *
+ * This provider does not perform Teams interactive login itself.
+ * The consumer application must handle TeamsJS login/token acquisition and
+ * provide callbacks for SSO token retrieval and backend Graph token exchange.
+ */
+export declare class TeamsHostedProvider implements IProvider {
+    private readonly defaultScopes;
+    private readonly getTeamsSsoTokenFn;
+    private readonly exchangeForGraphTokenFn;
+    private readonly refreshSkewMs;
+    private state;
+    private listeners;
+    private readonly tokenCache;
+    constructor(options: TeamsHostedProviderOptions);
+    login(): Promise<void>;
+    logout(): Promise<void>;
+    getAccessToken(scopes?: string[]): Promise<string>;
+    getState(): ProviderState;
+    onStateChanged(handler: () => void): void;
+    removeStateChangedHandler(handler: () => void): void;
+    private normalizeScopes;
+    private buildScopeKey;
+    private isTokenValid;
+    private normalizeExchangedToken;
+    private toEpochMs;
+    private clearCache;
+    private setState;
+    private emit;
+}
+//# sourceMappingURL=TeamsHostedProvider.d.ts.map

package/dist/providers/TeamsHostedProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamsHostedProvider.d.ts","sourceRoot":"","sources":["../../src/providers/TeamsHostedProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIvD,MAAM,WAAW,2BAA2B;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,0BAA0B;IACvC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IACxD,qBAAqB,EAAE,CACnB,MAAM,EAAE,2BAA2B,KAClC,OAAO,CAAC,MAAM,GAAG,mBAAmB,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,4BAA6B,SAAQ,mBAAmB;IACrE,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,iCAAiC;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,KAAK,CAAC;CAC1B;AASD;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,iCAAiC,IAGnE,sBAAsB,2BAA2B,KAAG,OAAO,CAAC,4BAA4B,CAAC,CA4B1G;AAED;;;;;;GAMG;AACH,qBAAa,mBAAoB,YAAW,SAAS;IACjD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAW;IACzC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAwC;IAC3E,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAEG;IAC3C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAS;IACvC,OAAO,CAAC,KAAK,CAA0C;IACvD,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;gBAEjD,OAAO,EAAE,0BAA0B;IAWzC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAWtB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAKvB,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC;IA0BxD,QAAQ,IAAI,aAAa;IAIzB,cAAc,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIzC,yBAAyB,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIpD,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,uBAAuB;IAmB/B,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,IAAI;CASf"}

package/dist/utils/graph.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Graph utility functions
+ */
+import { Client } from '@microsoft/microsoft-graph-client';
+import { IProvider } from '../providers/IProvider';
+/**
+ * Create a Graph client from a provider
+ */
+export declare const createGraphClient: (provider: IProvider) => Client;
+/**
+ * Extract initials from a display name
+ */
+export declare const getInitials: (displayName?: string) => string;
+//# sourceMappingURL=graph.d.ts.map

package/dist/utils/graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/utils/graph.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,SAAS,KAAG,MAWvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,cAAc,MAAM,KAAG,MASlD,CAAC"}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@devsym/graph-toolkit-react",
+  "version": "0.1.0-next.2",
+  "description": "React components for Microsoft Graph powered by Fluent UI",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "publish-packages": "changeset publish",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prettier:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --output-dir storybook-static"
+  },
+  "keywords": [
+    "react",
+    "microsoft-graph",
+    "fluent-ui",
+    "components",
+    "graph-toolkit"
+  ],
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@azure/msal-browser": "^4.0.0 || ^5.0.0",
+    "@fluentui/react-components": "^9.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@azure/msal-browser": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@microsoft/microsoft-graph-client": "^3.0.7",
+    "@microsoft/microsoft-graph-types": "^2.40.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.7",
+    "@azure/msal-browser": "^5.2.0",
+    "@fluentui/react-components": "^9.72.6",
+    "@storybook/addon-a11y": "^10.0.6",
+    "@storybook/addon-docs": "^10.0.6",
+    "@storybook/addon-links": "^10.0.6",
+    "@storybook/react-vite": "^10.0.6",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.3",
+    "@vitejs/plugin-react": "^5.1.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-storybook": "^10.2.8",
+    "globals": "^17.3.0",
+    "jsdom": "^27.1.0",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^10.0.6",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
+  }
+}

package/readme.md

@@ -0,0 +1,355 @@
+<h1 align="center">
+  Graph Toolkit React
+</h1>
+
+<h4 align="center">Modern React Components for <a href="https://graph.microsoft.com">Microsoft Graph</a> powered by <a href="https://react.fluentui.dev/">Fluent UI</a></h4>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/alpha-0.1.0-orange" alt="Alpha Release">
+  <img src="https://img.shields.io/badge/React-18%2F19-blue" alt="React 18/19">
+  <img src="https://img.shields.io/badge/Fluent_UI-9.72-purple" alt="Fluent UI 9">
+  <img src="https://img.shields.io/badge/TypeScript-5.9-blue" alt="TypeScript 5.9">
+</p>
+
+<h3 align="center">
+  <a href="#getting-started">Get Started</a> • 
+  <a href="#storybook">Storybook</a> • 
+  <a href="#contribute">Contribute</a>
+</h3>
+
+## 🎯 Project Vision
+
+This project provides a **modern, React-first component library** built on top of Fluent UI to help React developers integrate with Microsoft Graph quickly and consistently.
+
+> Note: This project is a spiritual successor to Microsoft Graph Toolkit, redesigned as a React-first library.
+
+### Key Principles
+
+- **React-First**: Built specifically for React applications, not framework-agnostic web components
+- **Fluent UI Native**: Uses official Fluent UI v9 components instead of custom implementations
+- **Single Package**: One cohesive npm package instead of a complex monorepo
+- **Modern Stack**: TypeScript 5, Vite, Vitest, and Storybook
+- **Developer Experience**: Simple API, excellent TypeScript support, comprehensive documentation
+
+### Design Philosophy
+
+Instead of maintaining the original web component approach, this fork:
+
+1. **Leverages Fluent UI**: Uses the official `Persona` component from Fluent UI instead of custom Avatar/Text components
+2. **Embraces React Patterns**: Components designed for React's patterns (hooks, context) from the ground up
+3. **Reduces Complexity**: Smaller codebase enables quicker development and easier maintenance
+4. **Focuses on Quality**: Fewer components, better implementation, comprehensive documentation
+
+## 📦 Package
+
+```bash
+npm install @devsym/graph-toolkit-react
+```
+
+| Package | Version | Description |
+| ------- | ------- | ----------- |
+| `@devsym/graph-toolkit-react` | `0.1.0-alpha.1` | React components for Microsoft Graph powered by Fluent UI |
+
+## 🎨 Components
+
+Currently available in alpha:
+
+### Person Component
+A flexible component for displaying user information from Microsoft Graph.
+
+```tsx
+import { Person } from '@devsym/graph-toolkit-react';
+
+<Person 
+  userId="user@contoso.com"
+  view="twoLines"
+  showPresence
+  textAlignment="center"
+  onClick={() => console.log('Clicked!')}
+/>
+```
+
+
+<a id="getting-started"></a>
+## 🚀 Getting Started
+
+### Prerequisites
+
+```json
+{
+  "react": "^18.0.0 || ^19.0.0",
+  "react-dom": "^18.0.0 || ^19.0.0",
+  "@fluentui/react-components": "^9.0.0"
+}
+```
+
+### Installation
+
+```bash
+npm install --save @devsym/graph-toolkit-react
+```
+
+Also install required peer dependencies in your app if they are not already present:
+
+```bash
+npm install --save react react-dom @fluentui/react-components
+```
+
+If you plan to use `MsalBrowserProvider`, also install:
+
+```bash
+npm install --save @azure/msal-browser
+```
+
+If you only use `TeamsHostedProvider` (Teams-hosted app with consumer-managed Teams auth), `@azure/msal-browser` is not required.
+
+### Quick Start
+
+```tsx
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { GraphProvider, MockProvider, Person } from '@devsym/graph-toolkit-react';
+
+function App() {
+  const provider = new MockProvider(); // Use MockProvider for development
+  
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <GraphProvider provider={provider}>
+        <Person userId="AdeleV@contoso.com" view="twoLines" showPresence />
+      </GraphProvider>
+    </FluentProvider>
+  );
+}
+```
+
+### Authentication Providers
+
+The library uses a provider pattern for authentication:
+
+- **MockProvider**: Returns mock data (Adele Vance) without API calls - perfect for development
+- **MsalBrowserProvider**: Native MSAL browser provider included in this package
+- **TeamsHostedProvider**: For Teams-hosted apps using consumer-managed Teams login + backend Graph token exchange
+- **Custom Providers**: Implement `IProvider` interface to integrate with other auth systems
+
+#### `MsalBrowserProvider` quick start
+
+```tsx
+import { PublicClientApplication } from '@azure/msal-browser';
+import {
+  GraphProvider,
+  MsalBrowserProvider,
+  Person,
+  ProviderState,
+} from '@devsym/graph-toolkit-react';
+
+const msal = new PublicClientApplication({
+  auth: {
+    clientId: 'YOUR_CLIENT_ID',
+    authority: 'https://login.microsoftonline.com/common',
+    redirectUri: window.location.origin,
+  },
+});
+
+const provider = new MsalBrowserProvider(msal, ['User.Read']);
+await provider.initialize();
+
+function App() {
+  return (
+    <GraphProvider provider={provider}>
+      <Person userId="me" view="threelines" />
+    </GraphProvider>
+  );
+}
+```
+
+#### `TeamsHostedProvider` quick start (consumer-managed Teams login)
+
+Use this when your app is hosted in Microsoft Teams and your app code already handles TeamsJS auth for multiple APIs.
+The provider does not open Teams login popups itself; it uses callbacks you provide.
+
+```tsx
+import {
+  createBackendTokenExchange,
+  GraphProvider,
+  Person,
+  TeamsHostedProvider,
+} from '@devsym/graph-toolkit-react';
+import { authentication } from '@microsoft/teams-js';
+
+const exchangeForGraphToken = createBackendTokenExchange({
+  endpoint: '/api/token/exchange',
+});
+
+const provider = new TeamsHostedProvider({
+  defaultScopes: ['User.Read'],
+  getTeamsSsoToken: async (scopes) => {
+    // Consumer app owns Teams auth and can reuse token for other APIs
+    return authentication.getAuthToken({ resources: scopes });
+  },
+  exchangeForGraphToken,
+});
+
+await provider.login();
+
+function App() {
+  return (
+    <GraphProvider provider={provider}>
+      <Person userId="me" view="threelines" />
+    </GraphProvider>
+  );
+}
+```
+
+Use explicit mode selection in your app:
+
+- Browser-hosted app: instantiate `MsalBrowserProvider`
+- Teams-hosted app: instantiate `TeamsHostedProvider`
+
+#### Scopes by feature
+
+| Feature | Minimum delegated scope | Notes |
+| ------- | ------------------------ | ----- |
+| Load current user profile (`userId="me"`) | `User.Read` | Required for basic person data (`displayName`, `mail`, etc.) |
+| Load another user by id/upn (`userId="{id}"`) | `User.ReadBasic.All` | May require admin consent depending on tenant policy |
+| Show presence (`showPresence`) | `Presence.Read` | If not granted, person still renders without presence |
+| Load profile photo (`fetchImage`) | `User.Read` | Falls back to initials if photo is unavailable |
+
+```tsx
+import { IProvider, ProviderState } from '@devsym/graph-toolkit-react';
+
+class MyAuthProvider implements IProvider {
+  state = ProviderState.SignedOut;
+  
+  async login(): Promise<void> { /* ... */ }
+  async logout(): Promise<void> { /* ... */ }
+  async getAccessToken(): Promise<string> { /* ... */ }
+}
+```
+
+<a id="storybook"></a>
+## 📚 Storybook
+
+Explore all components interactively in our Storybook documentation:
+
+**[View Storybook →](https://thomaspe.github.io/graph-toolkit-react/)** _(Deployed to GitHub Pages on every main branch update)_
+
+Run locally:
+```bash
+npm run storybook
+```
+
+## 🛠️ Development
+
+### Tech Stack
+
+- **Build**: Vite 7 (ESM + CJS output)
+- **Language**: TypeScript 5.9
+- **Testing**: Vitest 3 + Testing Library
+- **Documentation**: Storybook 10
+- **UI Framework**: Fluent UI v9 (React Components)
+- **Graph SDK**: @microsoft/microsoft-graph-client 3.0
+
+### Build & Test
+
+```bash
+# Install dependencies
+npm install
+
+# Type check
+npm run type-check
+
+# Lint
+npm run lint
+
+# Build library
+npm run build
+
+# Run tests
+npm run test
+
+# Run Storybook
+npm run storybook
+
+# Build Storybook for deployment
+npm run build-storybook
+```
+
+### Project Structure
+
+```
+src/
+├── components/
+│   └── Person/
+│       ├── Person.tsx          # Component implementation
+│       ├── Person.types.ts     # TypeScript definitions
+│       └── __tests__/          # Component tests
+├── providers/
+│   ├── IProvider.ts            # Provider interface
+│   ├── MockProvider.ts         # Development provider
+│   └── ProviderContext.tsx     # React context
+├── hooks/
+│   ├── useGraphClient.ts       # Graph client hook
+│   ├── usePersonData.ts        # Person data fetching
+│   └── useProvider.ts          # Provider access
+└── index.ts                    # Public API
+
+stories/
+└── Person.stories.tsx          # Storybook stories (19 examples)
+```
+
+## 🎯 Current Status
+
+**Alpha** ✅
+
+- ✅ Repository restructured from monorepo to single package
+- ✅ Provider infrastructure with MockProvider for development
+- ✅ Person component using Fluent UI Persona
+- ✅ Full Persona configuration support (textAlignment, textPosition, sizing)
+- ✅ Build system (ESM + CJS + TypeScript declarations)
+- ✅ Storybook documentation and GitHub Pages deployment
+- ✅ CI/CD with GitHub Actions
+- ✅ Automatic Storybook deployment to GitHub Pages
+- ✅ Sample app with MSAL sign-in and `Person` (`userId="me"`) at `samples/react-msal-sample`
+
+**Next Steps**:
+- Additional components (PeoplePicker, PersonCard, Login)
+- Expanded provider guidance and production auth examples
+- Comprehensive test coverage
+- First stable release (1.0.0)
+
+<a id="contribute"></a>
+## 🤝 Contribute
+
+This **community-driven project** provides React developers with components for Microsoft Graph. Contributions are welcome!
+
+### Guidelines
+
+1. Follow the existing code style (TypeScript, ESLint, Prettier)
+2. Use Fluent UI components whenever possible
+3. Write tests for new components
+4. Add Storybook stories demonstrating all component features
+5. Update documentation
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
+
+## 📝 License
+
+MIT License - see [LICENSE](LICENSE) for details.
+
+## 🙏 Acknowledgments
+
+- **Fluent UI Team**: For the excellent React component library
+- **Microsoft Graph**: For the powerful API that makes this all possible
+- **Community Contributors**: For helping improve this project
+
+---
+
+**Note**: This is an alpha release under active development. APIs may change. Not recommended for production use yet.
+
+## 🔗 Links
+
+- **Fluent UI**: [react.fluentui.dev](https://react.fluentui.dev/)
+- **Microsoft Graph**: [graph.microsoft.com](https://graph.microsoft.com)
+- **Changelog**: [CHANGELOG.md](CHANGELOG.md)
+- **Publishing**: [PUBLISHING.md](PUBLISHING.md)
+